@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
1 lines • 4.18 kB
Source Map (JSON)
{"version":3,"file":"checkbox-group.cjs","sources":["../../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport Vue 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 name: 'DtCheckboxGroup',\n\n extends: DtInputGroup,\n\n model: {\n prop: 'selectedValues',\n },\n\n props: {\n /**\n * Not supported by this component, please use selectedValues\n */\n value: {\n type: [],\n default: null,\n validator: value => {\n if (!value) {\n return true;\n }\n\n Vue.util.warn(\n 'Component uses selectedValues to initialize the model, value 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\n data () {\n return {\n internalValue: this.selectedValues,\n // wrap values in object to make reactive\n provideObj: {\n selectedValues: this.selectedValues,\n },\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 (newInternalValue) {\n this.provideObj.selectedValues = newInternalValue;\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 },\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","Vue","this","newSelectedValues","newInternalValue","checked","checkedValue","type","index"],"mappings":"uOAUAA,EAAA,CACA,KAAA,kBAEA,QAAAC,EAAAA,QAEA,MAAA,CACA,KAAA,gBACA,EAEA,MAAA,CAIA,MAAA,CACA,KAAA,CAAA,EACA,QAAA,KACA,UAAAC,GACAA,GAIAC,EAAA,KAAA,KACA,kGACAC,MACA,EAEA,IARA,EAUA,EAMA,eAAA,CACA,KAAA,MACA,SAAA,CACA,MAAA,CAAA,CACA,CACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,gBACA,EAKA,kBAAA,CACA,KAAA,OACA,QAAA,uBACA,EAKA,oBAAA,CACA,KAAA,OACA,QAAA,yBACA,CACA,EAEA,MAAA,CAOA,OACA,EAEA,MAAA,CACA,MAAA,CACA,cAAA,KAAA,eAEA,WAAA,CACA,eAAA,KAAA,cACA,CACA,CACA,EAEA,MAAA,CACA,eAAAC,EAAA,CACA,KAAA,cAAAA,CACA,EAOA,cAAAC,EAAA,CACA,KAAA,WAAA,eAAAA,CACA,CACA,EAEA,QAAA,CAKA,cAAAJ,EAAAK,EAAA,CACAA,EAEA,KAAA,cAAA,SAAAL,CAAA,GACA,KAAA,cAAA,KAAAA,CAAA,EAFA,KAAA,cAAA,KAAA,cAAA,OAAAM,GAAAA,IAAAN,CAAA,EAKA,KAAA,MAAA,QAAA,KAAA,aAAA,CACA,EAEA,cAAAO,EAAAC,EAAA,CACA,MAAA,0BAAAD,CAAA,IAAAC,CAAA,IAAA,KAAA,EAAA,EACA,CACA,CACA"}