@dialpad/dialtone/dist/vue3/lib/radio/radio.js

Dialpad's Dialtone design system monorepo

import { InputMixin as p, CheckableMixin as c, GroupableMixin as h, MessagesMixin as g } from "../../common/mixins/input.js";
import { RADIO_INPUT_VALIDATION_CLASSES as f } from "./radio-constants.js";
import { hasSlotContent as C, removeClassStyleAttrs as V, addClassStyleAttrs as v } from "../../common/utils/index.js";
import { resolveComponent as b, openBlock as i, createElementBlock as o, normalizeProps as M, guardReactiveProps as S, createElementVNode as a, normalizeClass as k, mergeProps as t, toHandlers as y, renderSlot as r, createTextVNode as d, toDisplayString as l, createCommentVNode as n, createVNode as A } from "vue";
import { _ as D } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import N from "../validation-messages/validation-messages.js";
const $ = {
  compatConfig: { MODE: 3 },
  name: "DtRadio",
  components: { DtValidationMessages: N },
  mixins: [p, c, h, g],
  inheritAttrs: !1,
  props: {
    /**
     * A provided value for the radio
     */
    value: {
      type: [String, Number],
      default: ""
    }
  },
  emits: [
    /**
     * Native input event
     *
     * @event input
     * @type {String | Number}
     */
    "input",
    /**
     * Event fired to sync the modelValue prop with the parent component
     *
     * @event input
     * @type {String | Number}
     */
    "update:modelValue",
    /**
     * 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: C
    };
  },
  computed: {
    inputValidationClass() {
      return f[this.internalValidationState];
    },
    radioGroupValue() {
      var e;
      return (e = this.groupContext) == null ? void 0 : e.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: (e) => this.$emit("focusin", e),
        focusout: (e) => this.$emit("focusout", e),
        change: (e) => this.emitValue(e.target.value)
      };
    },
    hasMessages() {
      return this.formattedMessages.length && this.showMessages;
    }
  },
  watch: {
    radioGroupValue: {
      immediate: !0,
      handler(e) {
        this.hasGroup && (this.internalChecked = e === this.value);
      }
    }
  },
  methods: {
    removeClassStyleAttrs: V,
    addClassStyleAttrs: v,
    emitValue(e) {
      e !== this.radioGroupValue && (this.setGroupValue(e), this.$emit("input", e), this.$emit("update:modelValue", e));
    }
  }
}, P = { class: "d-radio__input" }, _ = ["checked", "name", "value", "disabled"], G = {
  key: 0,
  class: "d-radio__messages",
  "data-qa": "radio-description-messages"
};
function w(e, I, u, q, E, s) {
  const m = b("dt-validation-messages");
  return i(), o("div", M(S(s.addClassStyleAttrs(e.$attrs))), [
    a("label", {
      class: k(["d-radio-group", { "d-radio-group--disabled": e.internalDisabled }])
    }, [
      a("div", P, [
        a("input", t({
          checked: e.internalChecked,
          name: e.internalName,
          value: u.value,
          disabled: e.internalDisabled,
          type: "radio",
          class: ["d-radio", s.inputValidationClass, e.inputClass]
        }, s.removeClassStyleAttrs(e.$attrs), y(s.inputListeners, !0)), null, 16, _)
      ]),
      a("div", t({
        class: [e.labelClass, "d-radio__copy d-radio__label"]
      }, e.labelChildProps, { "data-qa": "radio-label" }), [
        r(e.$slots, "default", {}, () => [
          d(l(e.label), 1)
        ])
      ], 16)
    ], 2),
    e.$slots.description || e.description || s.hasMessages ? (i(), o("div", G, [
      e.$slots.description || e.description ? (i(), o("div", t({
        key: 0,
        class: ["d-description", e.descriptionClass]
      }, e.descriptionChildProps, { "data-qa": "radio-description" }), [
        r(e.$slots, "description", {}, () => [
          d(l(e.description), 1)
        ])
      ], 16)) : n("", !0),
      A(m, t({
        "validation-messages": e.formattedMessages,
        "show-messages": e.showMessages,
        class: e.messagesClass
      }, e.messagesChildProps, { "data-qa": "dt-radio-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
    ])) : n("", !0)
  ], 16);
}
const H = /* @__PURE__ */ D($, [["render", w]]);
export {
  H as default
};
//# sourceMappingURL=radio.js.map