@dialpad/dialtone/dist/vue3/components/radio/radio.vue.cjs

Dialpad's Dialtone design system monorepo

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const input = require("../../common/mixins/input.cjs");
const radio_constants = require("./radio_constants.cjs");
const common_utils = require("../../common/utils.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const validation_messages = require("../validation_messages/validation_messages.vue.cjs");
const _sfc_main = {
  compatConfig: { MODE: 3 },
  name: "DtRadio",
  components: { DtValidationMessages: validation_messages.default },
  mixins: [input.InputMixin, input.CheckableMixin, input.GroupableMixin, input.MessagesMixin],
  inheritAttrs: false,
  props: {
    /**
     * A provided value for the radio
     */
    value: {
      type: [String, Number],
      default: ""
    }
  },
  emits: [
    /**
     * Native input event
     *
     * @event input
     * @type {String | Number}
     */
    "input",
    /**
     * Native input focus event
     *
     * @event focus
     * @type {FocusEvent}
     */
    "focus",
    /**
     * Native input focusin event
     *
     * @event focusin
     * @property {FocusEvent}
     */
    "focusin",
    /**
     * Native input focusout event
     *
     * @event focusout
     * @property {FocusEvent}
     */
    "focusout",
    /**
     * Native click event
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click"
  ],
  data() {
    return {
      hasSlotContent: common_utils.hasSlotContent
    };
  },
  computed: {
    inputValidationClass() {
      return radio_constants.RADIO_INPUT_VALIDATION_CLASSES[this.internalValidationState];
    },
    radioGroupValue() {
      var _a;
      return (_a = this.groupContext) == null ? void 0 : _a.selectedValue;
    },
    inputListeners() {
      return {
        /*
         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input
         * element which will result in the handler being called twice
         * (once on the input element and once by the emitted input event by the change listener).
        */
        input: () => {
        },
        focusin: (event) => this.$emit("focusin", event),
        focusout: (event) => this.$emit("focusout", event),
        change: (event) => this.emitValue(event.target.value)
      };
    }
  },
  watch: {
    radioGroupValue: {
      immediate: true,
      handler(newRadioGroupValue) {
        if (this.hasGroup) {
          this.internalChecked = newRadioGroupValue === this.value;
        }
      }
    }
  },
  methods: {
    removeClassStyleAttrs: common_utils.removeClassStyleAttrs,
    addClassStyleAttrs: common_utils.addClassStyleAttrs,
    emitValue(value) {
      if (value !== this.radioGroupValue) {
        this.setGroupValue(value);
        this.$emit("input", value);
      }
    }
  }
};
const _hoisted_1 = { class: "d-radio__input" };
const _hoisted_2 = ["checked", "name", "value", "disabled"];
const _hoisted_3 = {
  class: "d-radio__copy d-radio__label",
  "data-qa": "radio-label-description-container"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_dt_validation_messages = vue.resolveComponent("dt-validation-messages");
  return vue.openBlock(), vue.createElementBlock("div", vue.normalizeProps(vue.guardReactiveProps($options.addClassStyleAttrs(_ctx.$attrs))), [
    vue.createElementVNode("label", null, [
      vue.createElementVNode("div", {
        class: vue.normalizeClass(["d-radio-group", { "d-radio-group--disabled": _ctx.internalDisabled }])
      }, [
        vue.createElementVNode("div", _hoisted_1, [
          vue.createElementVNode("input", vue.mergeProps({
            checked: _ctx.internalChecked,
            name: _ctx.internalName,
            value: $props.value,
            disabled: _ctx.internalDisabled,
            type: "radio",
            class: ["d-radio", $options.inputValidationClass, _ctx.inputClass]
          }, $options.removeClassStyleAttrs(_ctx.$attrs), vue.toHandlers($options.inputListeners, true)), null, 16, _hoisted_2)
        ]),
        vue.createElementVNode("div", _hoisted_3, [
          vue.createElementVNode("div", vue.mergeProps({ class: _ctx.labelClass }, _ctx.labelChildProps, { "data-qa": "radio-label" }), [
            vue.renderSlot(_ctx.$slots, "default", {}, () => [
              vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
            ])
          ], 16),
          _ctx.$slots.description || _ctx.description ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
            key: 0,
            class: ["d-description", _ctx.descriptionClass]
          }, _ctx.descriptionChildProps, { "data-qa": "radio-description" }), [
            vue.renderSlot(_ctx.$slots, "description", {}, () => [
              vue.createTextVNode(vue.toDisplayString(_ctx.description), 1)
            ])
          ], 16)) : vue.createCommentVNode("", true),
          vue.createVNode(_component_dt_validation_messages, vue.mergeProps({
            "validation-messages": _ctx.formattedMessages,
            "show-messages": _ctx.showMessages,
            class: _ctx.messagesClass
          }, _ctx.messagesChildProps, { "data-qa": "dt-radio-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
        ])
      ], 2)
    ])
  ], 16);
}
const radio = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = radio;
//# sourceMappingURL=radio.vue.cjs.map