@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
116 lines (115 loc) • 4.83 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const input = require("../../common/mixins/input.cjs");
const checkbox_constants = require("./checkbox_constants.cjs");
const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
const validation_messages = require("../validation_messages/validation_messages.vue.cjs");
const _sfc_main = {
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 {
/* TODO
Check if any usages of this component leverage $listeners and either remove if unused or scope the removal
and migration prior to upgrading to Vue 3.x
*/
...this.$listeners,
/*
* 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: () => {
},
change: (event) => this.emitValue(event.target)
};
}
},
watch: {
checkboxGroupValueChecked: {
immediate: true,
handler(newCheckboxGroupValueChecked) {
if (this.hasGroup) {
this.internalChecked = newCheckboxGroupValueChecked;
}
}
}
},
mounted() {
this.runValidations();
},
methods: {
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"]);
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", [_c("label", [_c("div", { class: ["d-checkbox-group", { "d-checkbox-group--disabled": _vm.internalDisabled }] }, [_c("div", { staticClass: "d-checkbox__input" }, [_c("input", _vm._g(_vm._b({ class: ["d-checkbox", _vm.inputValidationClass, _vm.inputClass], attrs: { "type": "checkbox", "name": _vm.internalName, "disabled": _vm.internalDisabled }, domProps: { "checked": _vm.internalChecked, "value": _vm.value, "indeterminate": _vm.internalIndeterminate } }, "input", _vm.$attrs, false), _vm.inputListeners))]), _vm.hasLabelOrDescription ? _c("div", { staticClass: "d-checkbox__copy d-checkbox__label", attrs: { "data-qa": "checkbox-label-description-container" } }, [_vm.hasLabel ? _c("div", _vm._b({ class: _vm.labelClass, attrs: { "data-qa": "checkbox-label" } }, "div", _vm.labelChildProps, false), [_vm._t("default", function() {
return [_vm._v(_vm._s(_vm.label))];
})], 2) : _vm._e(), _vm.hasDescription ? _c("div", _vm._b({ class: ["d-description", _vm.descriptionClass], attrs: { "data-qa": "checkbox-description" } }, "div", _vm.descriptionChildProps, false), [_vm._t("description", function() {
return [_vm._v(_vm._s(_vm.description))];
})], 2) : _vm._e(), _c("dt-validation-messages", _vm._b({ class: _vm.messagesClass, attrs: { "validation-messages": _vm.formattedMessages, "show-messages": _vm.showMessages, "data-qa": "dt-checkbox-validation-messages" } }, "dt-validation-messages", _vm.messagesChildProps, false))], 1) : _vm._e()])])]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const checkbox = __component__.exports;
exports.default = checkbox;
//# sourceMappingURL=checkbox.vue.cjs.map