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

Dialpad's Dialtone design system monorepo

import { InputMixin, CheckableMixin, GroupableMixin, MessagesMixin } from "../../common/mixins/input.js";
import { RADIO_INPUT_VALIDATION_CLASSES } from "./radio_constants.js";
import { hasSlotContent, removeClassStyleAttrs, addClassStyleAttrs } from "../../common/utils.js";
import { resolveComponent, openBlock, createElementBlock, normalizeProps, guardReactiveProps, createElementVNode, normalizeClass, mergeProps, toHandlers, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
import DtValidationMessages from "../validation_messages/validation_messages.vue.js";
const _sfc_main = {
  compatConfig: { MODE: 3 },
  name: "DtRadio",
  components: { DtValidationMessages },
  mixins: [InputMixin, CheckableMixin, GroupableMixin, 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
    };
  },
  computed: {
    inputValidationClass() {
      return 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,
    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 = resolveComponent("dt-validation-messages");
  return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps($options.addClassStyleAttrs(_ctx.$attrs))), [
    createElementVNode("label", null, [
      createElementVNode("div", {
        class: normalizeClass(["d-radio-group", { "d-radio-group--disabled": _ctx.internalDisabled }])
      }, [
        createElementVNode("div", _hoisted_1, [
          createElementVNode("input", 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), toHandlers($options.inputListeners, true)), null, 16, _hoisted_2)
        ]),
        createElementVNode("div", _hoisted_3, [
          createElementVNode("div", mergeProps({ class: _ctx.labelClass }, _ctx.labelChildProps, { "data-qa": "radio-label" }), [
            renderSlot(_ctx.$slots, "default", {}, () => [
              createTextVNode(toDisplayString(_ctx.label), 1)
            ])
          ], 16),
          _ctx.$slots.description || _ctx.description ? (openBlock(), createElementBlock("div", mergeProps({
            key: 0,
            class: ["d-description", _ctx.descriptionClass]
          }, _ctx.descriptionChildProps, { "data-qa": "radio-description" }), [
            renderSlot(_ctx.$slots, "description", {}, () => [
              createTextVNode(toDisplayString(_ctx.description), 1)
            ])
          ], 16)) : createCommentVNode("", true),
          createVNode(_component_dt_validation_messages, 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__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  radio as default
};
//# sourceMappingURL=radio.vue.js.map