@sandlada/vue-mdc
Version:
118 lines (117 loc) • 4.04 kB
JavaScript
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
import { defineComponent, createVNode } from "vue";
import { componentNamePrefix } from "../../internals/component-name-prefix/component-name-prefix.js";
import { isServer } from "../../utils/is-server.js";
import { generateUuid } from "../../utils/uuid.js";
import { FocusRing } from "../focus-ring/focus-ring.js";
import "../../internals/navigation/render-navigation-destination.js";
import { Ripple } from "../ripple/ripple.js";
import { props } from "./checkbox.definition.js";
import css from "./styles/checkbox.module.scss.js";
const Checkbox = /* @__PURE__ */ defineComponent({
name: `${componentNamePrefix}-checkbox`,
props,
slots: {},
emits: ["update:modelValue", "change"],
data: (props2) => ({
prevChecked: false,
prevDisabled: false,
prevIndeterminate: false,
checked: props2.defaultChecked || props2.modelValue || false,
interIndeterminate: props2.indeterminate || false
}),
created() {
if (this.defaultChecked !== null) {
this.$emit("update:modelValue", this.defaultChecked);
}
},
mounted() {
if (isServer()) {
return;
}
this.$el.querySelector("&>.input-target").addEventListener("change", this.handleChange);
},
beforeUpdate() {
this.prevChecked = this.checked;
this.prevDisabled = this.disabled;
this.prevIndeterminate = this.interIndeterminate;
if (this.modelValue !== null) {
this.setChecked(this.modelValue);
}
},
beforeUnmount() {
this.$el.querySelector("&>.input-target").removeEventListener("change", this.handleChange);
},
methods: {
handleChange(e) {
const target = e.target;
this.setChecked(target.checked);
this.interIndeterminate = target.indeterminate;
},
setChecked(value) {
const changeEvent = new Event("change", {
bubbles: true,
cancelable: true
});
this.$emit("change", changeEvent);
const preventChange = !dispatchEvent(changeEvent);
if (preventChange) {
return;
}
if (this.checked === value) {
return;
}
this.checked = value;
this.$emit("update:modelValue", value);
}
},
render() {
const prevNone = !this.prevChecked && !this.prevIndeterminate;
const prevChecked = this.prevChecked && !this.prevIndeterminate;
const prevIndeterminate = this.prevIndeterminate;
const isChecked = this.checked && !this.interIndeterminate;
const isIndeterminate = this.interIndeterminate;
const classes = [this.disabled && css.disabled, (isChecked || isIndeterminate) && css.selected, !isChecked && !css.isIndeterminate && css.unselected, isChecked && css.checked, isIndeterminate && css.indeterminate, prevNone && css["prev-unselected"], prevChecked && css["prev-checked"], prevIndeterminate && css["prev-indeterminate"], this.prevDisabled && css["prev-disabled"]];
const id = `checkbox-${generateUuid()}`;
return createVNode("div", {
"data-component": "checkbox",
"class": [css.checkbox, ...classes]
}, [createVNode(Ripple, {
"disabled": this.disabled
}, null), createVNode(FocusRing, {
"for": id,
"shapeInherit": false
}, null), createVNode("div", {
"aria-hidden": "true",
"class": css.outline
}, null), createVNode("div", {
"aria-hidden": "true",
"class": css.background
}, null), createVNode("input", {
"class": "input-target",
"type": "checkbox",
"checked": this.checked,
"aria-checked": this.checked,
"disabled": this.disabled,
"aria-disabled": this.disabled,
"id": id
}, null), createVNode("svg", {
"class": css.icon,
"viewBox": "0 0 18 18",
"aria-hidden": "true"
}, [createVNode("rect", {
"class": [css.mark, css.short]
}, null), createVNode("rect", {
"class": [css.mark, css.long]
}, null)])]);
},
inheritAttrs: true
});
export {
Checkbox
};
//# sourceMappingURL=checkbox.js.map