@dialpad/dialtone-vue/dist/lib/radio/radio.js

Vue component library for Dialpad's design system Dialtone

import { InputMixin as t, CheckableMixin as i, GroupableMixin as r, MessagesMixin as n } from "../../common/mixins/input.js";
import { RADIO_INPUT_VALIDATION_CLASSES as o } from "./radio-constants.js";
import { n as d } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import l from "../validation-messages/validation-messages.js";
const p = {
  name: "DtRadio",
  components: { DtValidationMessages: l },
  mixins: [t, i, r, n],
  inheritAttrs: !1,
  props: {
    /**
     * A provided value for the radio
     */
    value: {
      type: [String, Number],
      default: ""
    }
  },
  emits: [
    /**
     * Native input event
     *
     * @event input
     * @type {String | Number}
     */
    "input",
    /**
     * Native input focusin event
     *
     * @event focusin
     * @property {FocusEvent}
     */
    "focusin",
    /**
     * Native input focusout event
     *
     * @event focusout
     * @property {FocusEvent}
     */
    "focusout"
  ],
  computed: {
    inputValidationClass() {
      return o[this.internalValidationState];
    },
    radioGroupValue() {
      var e;
      return (e = this.groupContext) == null ? void 0 : e.selectedValue;
    },
    inputListeners() {
      return {
        /* TODO
            Check if any usages of this component leverage $listeners and either remove if unused or scope the removal
            and migration prior to upgrading to Vue 3.x
        */
        ...this.$listeners,
        /*
         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input
         * element which will result in the hander being called twice (once on the input element and once by the emitted
         * input event by the change listener).
        */
        input: () => {
        },
        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: {
    emitValue(e) {
      e !== this.radioGroupValue && (this.setGroupValue(e), this.$emit("input", e));
    }
  }
};
var u = function() {
  var s = this, a = s._self._c;
  return a("div", [a("label", { class: ["d-radio-group", { "d-radio-group--disabled": s.internalDisabled }] }, [a("div", { staticClass: "d-radio__input" }, [a("input", s._g(s._b({ class: ["d-radio", s.inputValidationClass, s.inputClass], attrs: { name: s.internalName, disabled: s.internalDisabled, type: "radio" }, domProps: { checked: s.internalChecked, value: s.value } }, "input", s.$attrs, !1), s.inputListeners))]), a("div", s._b({ class: [s.labelClass, "d-radio__copy d-radio__label"], attrs: { "data-qa": "radio-label" } }, "div", s.labelChildProps, !1), [s._t("default", function() {
    return [s._v(s._s(s.label))];
  })], 2)]), s.$slots.description || s.description || s.hasMessages ? a("div", { staticClass: "d-radio__messages", attrs: { "data-qa": "radio-description-messages" } }, [s.$slots.description || s.description ? a("div", s._b({ class: ["d-description", s.descriptionClass], attrs: { "data-qa": "radio-description" } }, "div", s.descriptionChildProps, !1), [s._t("description", function() {
    return [s._v(" " + s._s(s.description) + " ")];
  })], 2) : s._e(), a("dt-validation-messages", s._b({ class: s.messagesClass, attrs: { "validation-messages": s.formattedMessages, "show-messages": s.showMessages, "data-qa": "dt-radio-validation-messages" } }, "dt-validation-messages", s.messagesChildProps, !1))], 1) : s._e()]);
}, c = [], m = /* @__PURE__ */ d(
  p,
  u,
  c
);
const v = m.exports;
export {
  v as default
};
//# sourceMappingURL=radio.js.map