UNPKG

@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

1 lines 8.03 kB
{"version":3,"file":"radio.vue.cjs","sources":["../../../components/radio/radio.vue"],"sourcesContent":["<template>\n <div\n v-bind=\"addClassStyleAttrs($attrs)\"\n >\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=\"removeClassStyleAttrs($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';\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 /**\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\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\n this.$emit('input', value);\n }\n },\n },\n};\n</script>\n"],"names":["DtValidationMessages","InputMixin","CheckableMixin","GroupableMixin","MessagesMixin","hasSlotContent","RADIO_INPUT_VALIDATION_CLASSES","removeClassStyleAttrs","addClassStyleAttrs","_openBlock","_createElementBlock","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_mergeProps","_toHandlers","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":";;;;;;;;AAoEA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY,EAAEA,sBAAAA,oBAAAA,QAAsB;AAAA,EAEpC,QAAQ,CAACC,MAAU,YAAEC,sBAAgBC,MAAAA,gBAAgBC,MAAAA,aAAa;AAAA,EAElE,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAC,aAAc;AAAA;EAEjB;AAAA,EAED,UAAU;AAAA,IACR,uBAAwB;AACtB,aAAOC,gBAA8B,+BAAC,KAAK,uBAAuB;AAAA,IACnE;AAAA,IAED,kBAAmB;;AACjB,cAAO,UAAK,iBAAL,mBAAmB;AAAA,IAC3B;AAAA,IAED,iBAAkB;AAChB,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAML,OAAO,MAAM;AAAA,QAAE;AAAA,QACf,SAAS,WAAS,KAAK,MAAM,WAAW,KAAK;AAAA,QAC7C,UAAU,WAAS,KAAK,MAAM,YAAY,KAAK;AAAA,QAC/C,QAAQ,WAAS,KAAK,UAAU,MAAM,OAAO,KAAK;AAAA;IAErD;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,iBAAiB;AAAA,MACf,WAAW;AAAA,MACX,QAAS,oBAAoB;AAC3B,YAAI,KAAK,UAAU;AAEjB,eAAK,kBAAkB,uBAAuB,KAAK;AAAA,QACrD;AAAA,MACD;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,uBAAAC,aAAqB;AAAA,IACrB,oBAAAC,aAAkB;AAAA,IAClB,UAAW,OAAO;AAChB,UAAI,UAAU,KAAK,iBAAiB;AAElC,aAAK,cAAc,KAAK;AAExB,aAAK,MAAM,SAAS,KAAK;AAAA,MAC3B;AAAA,IACD;AAAA,EACF;AACH;AAlLa,MAAA,aAAA,EAAA,OAAM,iBAAgB;AANnC,MAAA,aAAA,CAAA,WAAA,QAAA,SAAA,UAAA;;EAmBU,OAAM;AAAA,EACN,WAAQ;;;;AAnBhB,SAAAC,cAAA,GAAAC,uBAgDM,OAjDRC,IAAAA,eAAAC,IAAAA,mBAEY,SAAA,mBAAmB,KAAM,MAAA,CAAA,CAAA,GAAA;AAAA,IAEjCC,IA4CQ,mBAAA,SAAA,MAAA;AAAA,MA3CNA,IAAAA,mBA0CM,OAAA;AAAA,QA1CA,OALZC,kEAKkE,KAAgB,iBAAA,CAAA,CAAA;AAAA;QAC1ED,IAAA,mBAWM,OAXN,YAWM;AAAA,UAVJA,IAAA,mBASC,SATDE,eASC;AAAA,YARE,SAAS,KAAe;AAAA,YACxB,MAAM,KAAY;AAAA,YAClB,OAAO,OAAK;AAAA,YACZ,UAAU,KAAgB;AAAA,YAC3B,MAAK;AAAA,YACJ,OAAK,CAAA,WAAc,SAAoB,sBAAE,KAAU,UAAA;AAAA,UAC5C,GAAA,SAAA,sBAAsB,KAAM,MAAA,GACpCC,IAAqB,WAAf,yBAflB,IAAA,CAAA,GAAA,MAAA,IAAA,UAAA;AAAA;QAkBQH,IAAA,mBA4BM,OA5BN,YA4BM;AAAA,UAxBJA,IAAAA,mBAOM,OAPNE,IAAAA,WAOM,EANH,OAAO,KAAU,cACV,KAAe,iBAAA,EACvB,WAAQ,cAAa,CAAA,GAAA;AAAA,YAGrBE,IAAAA,WAAwB,4BAAxB,MAAwB;AAAA,cA5BpCC,IAAAA,gBAAAC,IAAAA,gBA4BqB,KAAK,KAAA,GAAA,CAAA;AAAA;;UAGR,KAAM,OAAC,eAAe,KAAW,eADzCV,IAAAA,aAAAC,IAAAA,mBAQM,OARNK,eAQM;AAAA,YAtChB,KAAA;AAAA,YAgCa,yBAAyB,KAAgB,gBAAA;AAAA,aAClC,KAAqB,uBAAA,EAC7B,WAAQ,oBAAmB,CAAA,GAAA;AAAA,YAG3BE,IAAAA,WAAiD,gCAAjD,MAAiD;AAAA,cArC7DC,IAAAA,gBAAAC,IAAAA,gBAqCwC,KAAW,WAAA,GAAA,CAAA;AAAA;oBArCnDC,IAAA,mBAAA,IAAA,IAAA;AAAA,UAuCUC,IAAA,YAME,mCANFN,eAME;AAAA,YALC,uBAAqB,KAAiB;AAAA,YACtC,iBAAe,KAAY;AAAA,YAC3B,OAAO,KAAa;AAAA,aACb,KAAkB,oBAAA,EAC1B,WAAQ,+BAA8B,CAAA,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,OAAA,CAAA;AAAA;;;;;;;"}