UNPKG

@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

1 lines 4.59 kB
{"version":3,"file":"checkbox_group.vue.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":["DtInputGroup","this"],"mappings":";;;;;AAUA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,SAAAA,YAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA,CAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,WAAA;AACA,YAAA,CAAA,OAAA;AACA,iBAAA;AAAA,QACA;AAEA,YAAA,KAAA;AAAA,UACA;AAAA,UACAC;AAAAA,QACA;AAEA,eAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AACA,eAAA;MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,eAAA,KAAA;AAAA;AAAA,MAEA,YAAA;AAAA,QACA,gBAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,eAAA,mBAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA,kBAAA;AACA,WAAA,WAAA,iBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA,OAAA,SAAA;AACA,UAAA,CAAA,SAAA;AACA,aAAA,gBAAA,KAAA,cAAA,OAAA,kBAAA,iBAAA,KAAA;AAAA,MACA,WAAA,CAAA,KAAA,cAAA,SAAA,KAAA,GAAA;AACA,aAAA,cAAA,KAAA,KAAA;AAAA,MACA;AAEA,WAAA,MAAA,SAAA,KAAA,aAAA;AAAA,IACA;AAAA,IAEA,cAAA,MAAA,OAAA;AACA,aAAA,0BAAA,IAAA,IAAA,KAAA,IAAA,KAAA,EAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;"}