@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 7.93 kB
Source Map (JSON)
{"version":3,"file":"radio.cjs","sources":["../../../components/radio/radio.vue"],"sourcesContent":["<template>\n <div\n v-bind=\"addClassStyleAttrs($attrs)\"\n >\n <label :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=\"removeClassStyleAttrs($attrs)\"\n v-on=\"inputListeners\"\n >\n </div>\n <div\n :class=\"[labelClass, 'd-radio__copy d-radio__label']\"\n v-bind=\"labelChildProps\"\n data-qa=\"radio-label\"\n >\n <!-- @slot slot for Radio Label -->\n <slot>{{ label }}</slot>\n </div>\n </label>\n <div\n v-if=\"$slots.description || description || hasMessages\"\n class=\"d-radio__messages\"\n data-qa=\"radio-description-messages\"\n >\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\">\n {{ description }}\n </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</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';\nimport { hasSlotContent, removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\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 compatConfig: { MODE: 3 },\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 * Event fired to sync the modelValue prop with the parent component\n *\n * @event input\n * @type {String | Number}\n */\n 'update:modelValue',\n\n /**\n * Native input focus event\n *\n * @event focus\n * @type {FocusEvent}\n */\n 'focus',\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 * Native click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n ],\n\n data () {\n return {\n hasSlotContent,\n };\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 /*\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 handler being called twice\n * (once on the input element and once by the emitted input event by the change listener).\n */\n input: () => {},\n focusin: event => this.$emit('focusin', event),\n focusout: event => this.$emit('focusout', event),\n change: event => this.emitValue(event.target.value),\n };\n },\n\n hasMessages () {\n return this.formattedMessages.length && this.showMessages;\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 removeClassStyleAttrs,\n addClassStyleAttrs,\n emitValue (value) {\n if (value !== this.radioGroupValue) {\n // update provided value if injected\n this.setGroupValue(value);\n this.$emit('input', value);\n this.$emit('update:modelValue', value);\n }\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","InputMixin","CheckableMixin","GroupableMixin","MessagesMixin","hasSlotContent","RADIO_INPUT_VALIDATION_CLASSES","_a","event","newRadioGroupValue","removeClassStyleAttrs","addClassStyleAttrs","value","_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","$options","_ctx","_createElementVNode","_normalizeClass","_mergeProps","$props","_toHandlers","_renderSlot","_createTextVNode","_toDisplayString","_hoisted_3","_createCommentVNode","_createVNode","_component_dt_validation_messages"],"mappings":"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"}