@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 4.18 kB
Source Map (JSON)
{"version":3,"file":"checkbox-group.cjs","names":[],"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"],"mappings":"0MAUA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,kBAEN,QAAS,EAAA,QAET,MAAO,CAIL,WAAY,CACV,KAAM,EAAE,CACR,QAAS,KACT,UAAW,GACJ,IAIL,EAAA,EAAA,MACE,uGAAA,IAAA,GAED,CAEM,IARE,GAUZ,CAMD,eAAgB,CACd,KAAM,MACN,SAAW,CACT,MAAO,EAAE,EAEZ,CAKD,YAAa,CACX,KAAM,OACN,QAAS,iBACV,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,wBACV,CAKD,oBAAqB,CACnB,KAAM,OACN,QAAS,0BACV,CACF,CAED,MAAO,CAOL,QAOA,wBACD,CAED,MAAQ,CACN,MAAO,CACL,cAAe,KAAK,eACrB,EAGH,MAAO,CACL,eAAgB,EAAmB,CACjC,KAAK,cAAgB,GAQvB,cAAe,CACb,UAAW,GACX,QAAS,EAAkB,CACzB,KAAK,WAAW,eAAiB,GAEpC,CACF,CAED,QAAS,CAKP,cAAe,EAAO,EAAS,CACxB,EAEO,KAAK,cAAc,SAAS,EAAM,EAC5C,KAAK,cAAc,KAAK,EAAM,CAF9B,KAAK,cAAgB,KAAK,cAAc,OAAO,GAAgB,IAAiB,EAAM,CAKxF,KAAK,MAAM,QAAS,KAAK,cAAc,CACvC,KAAK,MAAM,wBAAyB,KAAK,cAAc,EAGzD,cAAe,EAAM,EAAO,CAC1B,MAAO,0BAA0B,EAAK,GAAG,EAAM,GAAG,KAAK,MAE1D,CACF"}