@dialpad/dialtone/dist/vue2/components/radio/radio.vue.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"radio.vue.cjs","sources":["../../../components/radio/radio.vue"],"sourcesContent":["<template>\n  <div>\n    <label>\n      <div :class=\"['d-radio-group', { 'd-radio-group--disabled': internalDisabled }]\">\n        <div class=\"d-radio__input\">\n          <input\n            :checked=\"internalChecked\"\n            :name=\"internalName\"\n            :value=\"value\"\n            :disabled=\"internalDisabled\"\n            type=\"radio\"\n            :class=\"['d-radio', inputValidationClass, inputClass]\"\n            v-bind=\"$attrs\"\n            v-on=\"inputListeners\"\n          >\n        </div>\n        <div\n          class=\"d-radio__copy d-radio__label\"\n          data-qa=\"radio-label-description-container\"\n        >\n          <div\n            :class=\"labelClass\"\n            v-bind=\"labelChildProps\"\n            data-qa=\"radio-label\"\n          >\n            <!-- @slot slot for Radio Label -->\n            <slot>{{ label }}</slot>\n          </div>\n          <div\n            v-if=\"$slots.description || description\"\n            :class=\"['d-description', descriptionClass]\"\n            v-bind=\"descriptionChildProps\"\n            data-qa=\"radio-description\"\n          >\n            <!-- @slot slot for Radio Description -->\n            <slot name=\"description\">{{ description }}</slot>\n          </div>\n          <dt-validation-messages\n            :validation-messages=\"formattedMessages\"\n            :show-messages=\"showMessages\"\n            :class=\"messagesClass\"\n            v-bind=\"messagesChildProps\"\n            data-qa=\"dt-radio-validation-messages\"\n          />\n        </div>\n      </div>\n    </label>\n  </div>\n</template>\n\n<script>\nimport {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n} from '@/common/mixins/input';\nimport { RADIO_INPUT_VALIDATION_CLASSES } from './radio_constants';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * Radios are control elements that allow the user to make a single selection.\n * They are typically used in a Radio Group which allows the user to make a selection from a list of options.\n * @see https://dialtone.dialpad.com/components/radio.html\n */\nexport default {\n  name: 'DtRadio',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * A provided value for the radio\n     */\n    value: {\n      type: [String, Number],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'input',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @property {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @property {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  computed: {\n    inputValidationClass () {\n      return RADIO_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n    },\n\n    radioGroupValue () {\n      return this.groupContext?.selectedValue;\n    },\n\n    inputListeners () {\n      return {\n        /* TODO\n            Check if any usages of this component leverage $listeners and either remove if unused or scope the removal\n            and migration prior to upgrading to Vue 3.x\n        */\n        ...this.$listeners,\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n         * element which will result in the hander being called twice (once on the input element and once by the emitted\n         * input event by the change listener).\n        */\n        input: () => {},\n        change: event => this.emitValue(event.target.value),\n      };\n    },\n  },\n\n  watch: {\n    radioGroupValue: {\n      immediate: true,\n      handler (newRadioGroupValue) {\n        if (this.hasGroup) {\n          // update internal value when the radio group value changes\n          this.internalChecked = newRadioGroupValue === this.value;\n        }\n      },\n    },\n  },\n\n  methods: {\n    emitValue (value) {\n      if (value !== this.radioGroupValue) {\n        // update provided value if injected\n        this.setGroupValue(value);\n\n        this.$emit('input', value);\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtValidationMessages","InputMixin","CheckableMixin","GroupableMixin","MessagesMixin","RADIO_INPUT_VALIDATION_CLASSES"],"mappings":";;;;;;AAiEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAAA,sBAAAA,oBAAAA,QAAA;AAAA,EAEA,QAAA,CAAAC,MAAA,YAAAC,sBAAAC,MAAAA,gBAAAC,MAAAA,aAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,uBAAA;AACA,aAAAC,gBAAA,+BAAA,KAAA,uBAAA;AAAA,IACA;AAAA,IAEA,kBAAA;;AACA,cAAA,UAAA,iBAAA,mBAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA,GAAA,KAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMA,OAAA,MAAA;AAAA,QAAA;AAAA,QACA,QAAA,WAAA,KAAA,UAAA,MAAA,OAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,iBAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA,oBAAA;AACA,YAAA,KAAA,UAAA;AAEA,eAAA,kBAAA,uBAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA,OAAA;AACA,UAAA,UAAA,KAAA,iBAAA;AAEA,aAAA,cAAA,KAAA;AAEA,aAAA,MAAA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}