@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
155 lines (154 loc) • 6.1 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const input = require("../../common/mixins/input.cjs");
const common_utils = require("../../common/utils.cjs");
const checkbox_constants = require("./checkbox_constants.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const validation_messages = require("../validation_messages/validation_messages.vue.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtCheckbox",
components: { DtValidationMessages: validation_messages.default },
mixins: [input.InputMixin, input.CheckableMixin, input.GroupableMixin, input.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_constants.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: common_utils.removeClassStyleAttrs,
addClassStyleAttrs: common_utils.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 = vue.resolveComponent("dt-validation-messages");
return vue.openBlock(), vue.createElementBlock("div", vue.normalizeProps(vue.guardReactiveProps($options.addClassStyleAttrs(_ctx.$attrs))), [
vue.createElementVNode("label", null, [
vue.createElementVNode("div", {
class: vue.normalizeClass(["d-checkbox-group", { "d-checkbox-group--disabled": _ctx.internalDisabled }])
}, [
vue.createElementVNode("div", _hoisted_1, [
vue.createElementVNode("input", vue.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 }, vue.toHandlers($options.inputListeners, true)), null, 48, _hoisted_2)
]),
$options.hasLabelOrDescription ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
$options.hasLabel ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
key: 0,
class: _ctx.labelClass
}, _ctx.labelChildProps, { "data-qa": "checkbox-label" }), [
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
])
], 16)) : vue.createCommentVNode("", true),
$options.hasDescription ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
key: 1,
class: ["d-description", _ctx.descriptionClass]
}, _ctx.descriptionChildProps, { "data-qa": "checkbox-description" }), [
vue.renderSlot(_ctx.$slots, "description", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.description), 1)
])
], 16)) : vue.createCommentVNode("", true),
vue.createVNode(_component_dt_validation_messages, vue.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"])
])) : vue.createCommentVNode("", true)
], 2)
])
], 16);
}
const checkbox = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = checkbox;
//# sourceMappingURL=checkbox.vue.cjs.map