@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 4.29 kB
Source Map (JSON)
{"version":3,"file":"checkbox-group.cjs","sources":["../../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport { warn } from 'vue';\nimport { DtInputGroup } from '../input_group';\n\n/**\n * Checkbox Groups are convenience components for a grouping of related Checkboxes.\n * While each Checkbox within the group is independent, the `v-model` on the group provides\n * a convenient interface for determining which Checkboxes within the group are checked.\n * @see https://dialtone.dialpad.com/components/checkbox_group.html\n */\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtCheckboxGroup',\n\n extends: DtInputGroup,\n\n props: {\n /**\n * Not supported by this component, please use selectedValues\n */\n modelValue: {\n type: [],\n default: null,\n validator: value => {\n if (!value) {\n return true;\n }\n\n warn(\n 'Component uses selectedValues to initialize the model, modelValue is not supported by this component',\n this,\n );\n\n return false;\n },\n },\n\n /**\n * A provided list of selected values(s) for the checkbox group\n * @model selectedValues\n */\n selectedValues: {\n type: Array,\n default () {\n return [];\n },\n },\n\n /**\n * A data qa tag for the radio group\n */\n dataQaGroup: {\n type: String,\n default: 'checkbox-group',\n },\n\n /**\n * A data qa tag for the radio group legend\n */\n dataQaGroupLegend: {\n type: String,\n default: 'checkbox-group-legend',\n },\n\n /**\n * A data qa tag for the radio group messages\n */\n dataQaGroupMessages: {\n type: String,\n default: 'checkbox-group-messages',\n },\n },\n\n emits: [\n /**\n * Native input event\n *\n * @event input\n * @type {Array}\n */\n 'input',\n /**\n * Selected values for the checkbox group\n *\n * @event input\n * @type {Array}\n */\n 'update:selectedValues',\n ],\n\n data () {\n return {\n internalValue: this.selectedValues,\n };\n },\n\n watch: {\n selectedValues (newSelectedValues) {\n this.internalValue = newSelectedValues;\n },\n\n /*\n * watching value to support 2 way binding for slotted checkboxes.\n * need this to pass value to slotted checkboxes if modified outside\n * checkbox group.\n */\n internalValue: {\n immediate: true,\n handler (newInternalValue) {\n this.provideObj.selectedValues = newInternalValue;\n },\n },\n },\n\n methods: {\n /*\n * provided value to support 2 way binding for slotted checkboxes.\n * slotted checkbox will change this value and need to emit new value up.\n */\n setGroupValue (value, checked) {\n if (!checked) {\n this.internalValue = this.internalValue.filter(checkedValue => checkedValue !== value);\n } else if (!this.internalValue.includes(value)) {\n this.internalValue.push(value);\n }\n\n this.$emit('input', this.internalValue);\n this.$emit('update:selectedValues', this.internalValue);\n },\n\n getMessageKey (type, index) {\n return `checkbox-group-message-${type}-${index}-${this.id}`;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtInputGroup","value","warn","this","newSelectedValues","newInternalValue","checked","checkedValue","type","index"],"mappings":"+KAUKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,kBAEN,QAASC,EAAAA,QAET,MAAO,CAIL,WAAY,CACV,KAAM,CAAA,EACN,QAAS,KACT,UAAWC,GACJA,GAILC,EAAAA,KACE,uGACAC,QAGK,IARE,IAgBb,eAAgB,CACd,KAAM,MACN,SAAW,CACT,MAAO,CAAA,CACT,GAMF,YAAa,CACX,KAAM,OACN,QAAS,kBAMX,kBAAmB,CACjB,KAAM,OACN,QAAS,yBAMX,oBAAqB,CACnB,KAAM,OACN,QAAS,4BAIb,MAAO,CAOL,QAOA,yBAGF,MAAQ,CACN,MAAO,CACL,cAAe,KAAK,eAExB,EAEA,MAAO,CACL,eAAgBC,EAAmB,CACjC,KAAK,cAAgBA,CACvB,EAOA,cAAe,CACb,UAAW,GACX,QAASC,EAAkB,CACzB,KAAK,WAAW,eAAiBA,CACnC,IAIJ,QAAS,CAKP,cAAeJ,EAAOK,EAAS,CACxBA,EAEO,KAAK,cAAc,SAASL,CAAK,GAC3C,KAAK,cAAc,KAAKA,CAAK,EAF7B,KAAK,cAAgB,KAAK,cAAc,OAAOM,GAAgBA,IAAiBN,CAAK,EAKvF,KAAK,MAAM,QAAS,KAAK,aAAa,EACtC,KAAK,MAAM,wBAAyB,KAAK,aAAa,CACxD,EAEA,cAAeO,EAAMC,EAAO,CAC1B,MAAO,0BAA0BD,CAAI,IAAIC,CAAK,IAAI,KAAK,EAAE,EAC3D,EAEJ"}