@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
108 lines (107 loc) • 2.51 kB
JavaScript
import a from "vue";
import { n } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import l from "../input-group/input-group.js";
const r = {
name: "DtCheckboxGroup",
extends: l,
model: {
prop: "selectedValues"
},
props: {
/**
* Not supported by this component, please use selectedValues
*/
value: {
type: [],
default: null,
validator: (e) => e ? (a.util.warn(
"Component uses selectedValues to initialize the model, value is not supported by this component",
void 0
), !1) : !0
},
/**
* 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,
// wrap values in object to make reactive
provideObj: {
selectedValues: this.selectedValues
}
};
},
watch: {
selectedValues(e) {
this.internalValue = e;
},
/*
* watching value to support 2 way binding for slotted checkboxes.
* need this to pass value to slotted checkboxes if modified outside
* checkbox group.
*/
internalValue(e) {
this.provideObj.selectedValues = e;
}
},
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(e, t) {
t ? this.internalValue.includes(e) || this.internalValue.push(e) : this.internalValue = this.internalValue.filter((s) => s !== e), this.$emit("input", this.internalValue);
},
getMessageKey(e, t) {
return `checkbox-group-message-${e}-${t}-${this.id}`;
}
}
}, u = null, i = null;
var o = /* @__PURE__ */ n(
r,
u,
i
);
const h = o.exports;
export {
h as default
};
//# sourceMappingURL=checkbox-group.js.map