@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
155 lines (154 loc) • 5.98 kB
JavaScript
import { InputMixin, CheckableMixin, GroupableMixin, MessagesMixin } from "../../common/mixins/input.js";
import { removeClassStyleAttrs, addClassStyleAttrs } from "../../common/utils.js";
import { CHECKBOX_INPUT_VALIDATION_CLASSES } from "./checkbox_constants.js";
import { resolveComponent, openBlock, createElementBlock, normalizeProps, guardReactiveProps, createElementVNode, normalizeClass, mergeProps, toHandlers, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
import DtValidationMessages from "../validation_messages/validation_messages.vue.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtCheckbox",
components: { DtValidationMessages },
mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],
inheritAttrs: false,
emits: [
/**
* Native input event
*
* @event input
* @type {Boolean}
*/
"input",
/**
* Native input focusin event
*
* @event focusin
* @type {FocusEvent}
*/
"focusin",
/**
* Native input focusout event
*
* @event focusout
* @type {FocusEvent}
*/
"focusout"
],
computed: {
inputValidationClass() {
return CHECKBOX_INPUT_VALIDATION_CLASSES[this.internalValidationState];
},
checkboxGroupValueChecked() {
var _a, _b;
return ((_b = (_a = this.groupContext) == null ? void 0 : _a.selectedValues) == null ? void 0 : _b.includes(this.value)) ?? false;
},
hasLabel() {
return !!(this.$slots.default || this.label);
},
hasDescription() {
return !!(this.$slots.description || this.description);
},
hasLabelOrDescription() {
return this.hasLabel || this.hasDescription;
},
inputListeners() {
return {
/*
* Override input listener to as no-op. Prevents parent input listeners from being passed through
* onto the input element which will result in the handler being called twice
* (once on the input element and once by the emitted input event by the change listener).
*/
input: () => {
},
focusin: (event) => this.$emit("focusin", event),
focusout: (event) => this.$emit("focusout", event),
change: (event) => this.emitValue(event.target)
};
}
},
watch: {
checkboxGroupValueChecked: {
immediate: true,
handler(newCheckboxGroupValueChecked) {
if (this.hasGroup) {
this.internalChecked = newCheckboxGroupValueChecked;
}
}
}
},
mounted() {
this.runValidations();
},
methods: {
removeClassStyleAttrs,
addClassStyleAttrs,
emitValue(target) {
let { value, checked } = target;
if (this.internalIndeterminate) {
checked = false;
this.internalIndeterminate = false;
target.checked = false;
}
this.setGroupValue(value, checked);
this.$emit("input", checked);
},
runValidations() {
this.validateInputLabels(this.hasLabel, this.$attrs["aria-label"]);
}
}
};
const _hoisted_1 = { class: "d-checkbox__input" };
const _hoisted_2 = ["checked", "name", "value", "disabled", ".indeterminate"];
const _hoisted_3 = {
key: 0,
class: "d-checkbox__copy d-checkbox__label",
"data-qa": "checkbox-label-description-container"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_validation_messages = resolveComponent("dt-validation-messages");
return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps($options.addClassStyleAttrs(_ctx.$attrs))), [
createElementVNode("label", null, [
createElementVNode("div", {
class: normalizeClass(["d-checkbox-group", { "d-checkbox-group--disabled": _ctx.internalDisabled }])
}, [
createElementVNode("div", _hoisted_1, [
createElementVNode("input", mergeProps({
type: "checkbox",
checked: _ctx.internalChecked,
name: _ctx.internalName,
value: _ctx.value,
disabled: _ctx.internalDisabled,
class: ["d-checkbox", $options.inputValidationClass, _ctx.inputClass]
}, $options.removeClassStyleAttrs(_ctx.$attrs), { ".indeterminate": _ctx.internalIndeterminate }, toHandlers($options.inputListeners, true)), null, 48, _hoisted_2)
]),
$options.hasLabelOrDescription ? (openBlock(), createElementBlock("div", _hoisted_3, [
$options.hasLabel ? (openBlock(), createElementBlock("div", mergeProps({
key: 0,
class: _ctx.labelClass
}, _ctx.labelChildProps, { "data-qa": "checkbox-label" }), [
renderSlot(_ctx.$slots, "default", {}, () => [
createTextVNode(toDisplayString(_ctx.label), 1)
])
], 16)) : createCommentVNode("", true),
$options.hasDescription ? (openBlock(), createElementBlock("div", mergeProps({
key: 1,
class: ["d-description", _ctx.descriptionClass]
}, _ctx.descriptionChildProps, { "data-qa": "checkbox-description" }), [
renderSlot(_ctx.$slots, "description", {}, () => [
createTextVNode(toDisplayString(_ctx.description), 1)
])
], 16)) : createCommentVNode("", true),
createVNode(_component_dt_validation_messages, mergeProps({
"validation-messages": _ctx.formattedMessages,
"show-messages": _ctx.showMessages,
class: _ctx.messagesClass
}, _ctx.messagesChildProps, { "data-qa": "dt-checkbox-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
])) : createCommentVNode("", true)
], 2)
])
], 16);
}
const checkbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
checkbox as default
};
//# sourceMappingURL=checkbox.vue.js.map