@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
111 lines (110 loc) • 3.92 kB
JavaScript
import { addClassStyleAttrs as e, removeClassStyleAttrs as t } from "../../common/utils/index.js";
import { CheckableMixin as n, GroupableMixin as r, InputMixin as i, MessagesMixin as a } from "../../common/mixins/input.js";
import { t as o } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import s from "../validation-messages/validation-messages.js";
import { CHECKBOX_INPUT_VALIDATION_CLASSES as c } from "./checkbox-constants.js";
import { createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, mergeProps as m, normalizeClass as h, openBlock as g, renderSlot as _, resolveComponent as v, toDisplayString as y, toHandlers as b } from "vue";
//#region components/checkbox/checkbox.vue
var x = {
compatConfig: { MODE: 3 },
name: "DtCheckbox",
components: { DtValidationMessages: s },
mixins: [
i,
n,
r,
a
],
inheritAttrs: !1,
emits: [
"input",
"update:modelValue",
"focusin",
"focusout"
],
computed: {
inputValidationClass() {
return c[this.internalValidationState];
},
checkboxGroupValueChecked() {
return this.groupContext?.selectedValues?.includes(this.value) ?? !1;
},
hasLabel() {
return !!(this.$slots.default || this.label);
},
hasMessages() {
return this.formattedMessages.length && this.showMessages;
},
inputListeners() {
return {
input: () => {},
focusin: (e) => this.$emit("focusin", e),
focusout: (e) => this.$emit("focusout", e),
change: (e) => this.emitValue(e.target)
};
}
},
watch: { checkboxGroupValueChecked: {
immediate: !0,
handler(e) {
this.hasGroup && (this.internalChecked = e);
}
} },
mounted() {
this.runValidations();
},
methods: {
removeClassStyleAttrs: t,
addClassStyleAttrs: e,
emitValue(e) {
let { value: t, checked: n } = e;
this.internalIndeterminate && (n = !1, this.internalIndeterminate = !1, e.checked = !1), this.setGroupValue(t, n), this.$emit("input", n), this.$emit("update:modelValue", n);
},
runValidations() {
this.validateInputLabels(this.hasLabel, this.$attrs["aria-label"]);
}
}
}, S = { class: "d-checkbox__input" }, C = [
"checked",
"name",
"value",
"disabled",
".indeterminate"
], w = {
key: 0,
class: "d-checkbox__messages",
"data-qa": "checkbox-description-messages"
};
function T(e, t, n, r, i, a) {
let o = v("dt-validation-messages");
return g(), u("div", m({ class: e.rootClass }, a.addClassStyleAttrs(e.$attrs)), [d("label", { class: h(["d-checkbox-group", { "d-checkbox-group--disabled": e.internalDisabled }]) }, [d("div", S, [d("input", m({
type: "checkbox",
checked: e.internalChecked,
name: e.internalName,
value: e.value,
disabled: e.internalDisabled,
class: [
"d-checkbox",
a.inputValidationClass,
e.inputClass
]
}, a.removeClassStyleAttrs(e.$attrs), { ".indeterminate": e.internalIndeterminate }, b(a.inputListeners, !0)), null, 48, C)]), a.hasLabel ? (g(), u("div", m({
key: 0,
class: [e.labelClass, "d-checkbox__copy d-checkbox__label"]
}, e.labelChildProps, { "data-qa": "checkbox-label" }), [_(e.$slots, "default", {}, () => [f(y(e.label), 1)])], 16)) : l("", !0)], 2), e.$slots.description || e.description || a.hasMessages ? (g(), u("div", w, [e.$slots.description || e.description ? (g(), u("div", m({
key: 0,
class: ["d-description", e.descriptionClass]
}, e.descriptionChildProps, { "data-qa": "checkbox-description" }), [_(e.$slots, "description", {}, () => [f(y(e.description), 1)])], 16)) : l("", !0), p(o, m({
"validation-messages": e.formattedMessages,
"show-messages": e.showMessages,
class: e.messagesClass
}, e.messagesChildProps, { "data-qa": "dt-checkbox-validation-messages" }), null, 16, [
"validation-messages",
"show-messages",
"class"
])])) : l("", !0)], 16);
}
var E = /* @__PURE__ */ o(x, [["render", T]]);
//#endregion
export { E as default };
//# sourceMappingURL=checkbox.js.map