@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
113 lines (112 loc) • 2.8 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const input_group = require("../input_group/input_group.vue.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtCheckboxGroup",
extends: input_group.default,
model: {
prop: "selectedValues"
},
props: {
/**
* Not supported by this component, please use selectedValues
*/
value: {
type: [],
default: null,
validator: (value) => {
if (!value) {
return true;
}
vue.warn(
"Component uses selectedValues to initialize the model, value is not supported by this component",
void 0
);
return false;
}
},
/**
* A provided list of selected values(s) for the checkbox group
* @model selectedValues
*/
selectedValues: {
type: Array,
default() {
return [];
}
},
/**
* A data qa tag for the radio group
*/
dataQaGroup: {
type: String,
default: "checkbox-group"
},
/**
* A data qa tag for the radio group legend
*/
dataQaGroupLegend: {
type: String,
default: "checkbox-group-legend"
},
/**
* A data qa tag for the radio group messages
*/
dataQaGroupMessages: {
type: String,
default: "checkbox-group-messages"
}
},
emits: [
/**
* Native input event
*
* @event input
* @type {Array}
*/
"input"
],
data() {
return {
internalValue: this.selectedValues
};
},
watch: {
selectedValues(newSelectedValues) {
this.internalValue = newSelectedValues;
},
/*
* watching value to support 2 way binding for slotted checkboxes.
* need this to pass value to slotted checkboxes if modified outside
* checkbox group.
*/
internalValue: {
immediate: true,
handler(newInternalValue) {
this.provideObj.selectedValues = newInternalValue;
}
}
},
methods: {
/*
* provided value to support 2 way binding for slotted checkboxes.
* slotted checkbox will change this value and need to emit new value up.
*/
setGroupValue(value, checked) {
if (!checked) {
this.internalValue = this.internalValue.filter((checkedValue) => checkedValue !== value);
} else if (!this.internalValue.includes(value)) {
this.internalValue.push(value);
}
this.$emit("input", this.internalValue);
},
getMessageKey(type, index) {
return `checkbox-group-message-${type}-${index}-${this.id}`;
}
}
};
const _sfc_main$1 = _sfc_main;
exports.default = _sfc_main$1;
//# sourceMappingURL=checkbox_group.vue.cjs.map