@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 { addClassStyleAttrs as C, removeClassStyleAttrs as V, hasSlotContent as v } from "../../common/utils/index.js";
import { resolveComponent as b, createElementBlock as i, openBlock as o, normalizeProps as M, guardReactiveProps as S, createElementVNode as a, createCommentVNode as r, normalizeClass as k, mergeProps as t, toHandlers as y, renderSlot as d, createTextVNode as l, toDisplayString 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: v
    };
  },
  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: C,
    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 o(), i("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" }), [
        d(e.$slots, "default", {}, () => [
          l(n(e.label), 1)
        ])
      ], 16)
    ], 2),
    e.$slots.description || e.description || s.hasMessages ? (o(), i("div", G, [
      e.$slots.description || e.description ? (o(), i("div", t({
        key: 0,
        class: ["d-description", e.descriptionClass]
      }, e.descriptionChildProps, { "data-qa": "radio-description" }), [
        d(e.$slots, "description", {}, () => [
          l(n(e.description), 1)
        ])
      ], 16)) : r("", !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"])
    ])) : r("", !0)
  ], 16);
}
const H = /* @__PURE__ */ D($, [["render", w]]);
export {
  H as default
};
//# sourceMappingURL=radio.js.map