maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
129 lines (128 loc) • 6.18 kB
JavaScript
import { defineComponent, ref, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, createCommentVNode, mergeProps, createVNode, renderSlot, createTextVNode, toDisplayString } from "vue";
import { MazCheck } from "@maz-ui/icons";
import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazCheckbox.Di88TJ3e.css';const _hoisted_1 = ["for", "aria-checked"], _hoisted_2 = ["id", "checked", "disabled", "name"], _hoisted_3 = {
key: 0,
class: "m-checkbox__text"
}, _sfc_main = /* @__PURE__ */ defineComponent({
inheritAttrs: !1,
__name: "MazCheckbox",
props: {
style: { default: void 0 },
class: { default: void 0 },
modelValue: { default: void 0 },
id: { default: void 0 },
color: { default: "primary" },
value: { type: [String, Number, Boolean], default: void 0 },
name: { default: "m-checkbox" },
size: { default: "md" },
label: { default: void 0 },
disabled: { type: Boolean, default: !1 },
error: { type: Boolean },
success: { type: Boolean },
warning: { type: Boolean },
hint: {}
},
emits: ["update:model-value", "change", "blur", "focus"],
setup(__props, { emit: __emit }) {
const props = __props, emits = __emit, instanceId = useInstanceUniqId({
componentName: "MazCheckbox",
providedId: props.id
}), inputRef = ref(), isFocused = ref(!1), isChecked = computed(() => typeof props.value != "boolean" && Array.isArray(props.modelValue) ? props.modelValue.includes(props.value) : typeof props.modelValue == "boolean" ? props.modelValue : !1), checkboxSize = computed(() => {
switch (props.size) {
case "xl":
return "2rem";
case "lg":
return "1.75rem";
case "sm":
return "1.25rem";
case "xs":
return "1rem";
case "mini":
return "0.75rem";
default:
return "1.5rem";
}
}), checkIconSize = computed(() => {
switch (props.size) {
case "xl":
return "maz-text-2xl";
case "lg":
return "maz-text-xl";
case "sm":
return "maz-text-base";
case "xs":
return "maz-text-sm";
case "mini":
return "maz-text-xs";
default:
return "maz-text-lg";
}
}), checkIconColor = computed(() => props.color === "contrast" ? "hsl(var(--maz-background))" : `hsl(var(--maz-${props.color}-foreground))`), checkboxSelectedColor = computed(() => props.color === "contrast" ? "hsl(var(--maz-contrast))" : `hsl(var(--maz-${props.color}))`), checkboxBoxShadow = computed(() => props.error && !isFocused.value ? "hsl(var(--maz-destructive))" : props.warning && !isFocused.value ? "hsl(var(--maz-warning))" : props.success && !isFocused.value ? "hsl(var(--maz-success))" : ["transparent", "contrast"].includes(props.color) ? "hsl(var(--maz-muted))" : `hsl(var(--maz-${props.color}) / 60%)`);
function keyboardHandler(event) {
["Space"].includes(event.code) && (event.preventDefault(), emitValue(props.value ?? !props.modelValue));
}
function getNewValue(value) {
return typeof value == "boolean" && (typeof props.modelValue == "boolean" || props.modelValue === void 0 || props.modelValue === null) ? !props.modelValue : Array.isArray(props.modelValue) && typeof value != "boolean" ? props.modelValue.includes(value) ? props.modelValue.filter((v) => v !== value) : [...props.modelValue, value] : [value];
}
function emitValue(value) {
const newValue = getNewValue(value);
emits("update:model-value", newValue), emits("change", newValue);
}
function onBlur(event) {
isFocused.value = !1, inputRef.value?.dispatchEvent(new Event("blur")), emits("blur", event);
}
function onFocus(event) {
isFocused.value = !0, inputRef.value?.dispatchEvent(new Event("focus")), emits("focus", event);
}
return (_ctx, _cache) => (openBlock(), createElementBlock("label", {
for: unref(instanceId),
class: normalizeClass(["m-checkbox m-reset-css", [{ "--error": _ctx.error, "--warning": _ctx.warning, "--success": _ctx.success }, props.class]]),
style: normalizeStyle([_ctx.style, { "--checkbox-selected-color": checkboxSelectedColor.value, "--checkbox-box-shadow-color": checkboxBoxShadow.value }]),
role: "checkbox",
"aria-checked": isChecked.value,
tabindex: "0",
onKeydown: keyboardHandler,
onBlur,
onFocus
}, [
createElementVNode("input", mergeProps({
id: unref(instanceId),
ref_key: "inputRef",
ref: inputRef,
checked: isChecked.value
}, _ctx.$attrs, {
tabindex: "-1",
disabled: _ctx.disabled,
name: _ctx.name,
type: "checkbox",
onChange: _cache[0] || (_cache[0] = ($event) => emitValue(_ctx.value ?? $event?.target?.checked))
}), null, 16, _hoisted_2),
createElementVNode("span", {
style: normalizeStyle({ width: checkboxSize.value, height: checkboxSize.value })
}, [
createVNode(unref(MazCheck), {
class: normalizeClass(["check-icon", checkIconSize.value]),
style: normalizeStyle({ color: checkIconColor.value })
}, null, 8, ["class", "style"])
], 4),
_ctx.label || _ctx.$slots.default || _ctx.hint ? (openBlock(), createElementBlock("div", _hoisted_3, [
renderSlot(_ctx.$slots, "default", { value: _ctx.value }, () => [
createTextVNode(toDisplayString(_ctx.label), 1)
], !0),
_ctx.hint ? (openBlock(), createElementBlock("span", {
key: 0,
class: normalizeClass(["m-checkbox__hint", {
"--error": _ctx.error,
"--success": _ctx.success,
"--warning": _ctx.warning
}])
}, toDisplayString(_ctx.hint), 3)) : createCommentVNode("", !0)
])) : createCommentVNode("", !0)
], 46, _hoisted_1));
}
}), MazCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1a4c0aa6"]]);
export {
MazCheckbox as default
};