134 lines
8.3 KiB
JavaScript
134 lines
8.3 KiB
JavaScript
import { w as withInstall } from "../badge/index2.js";
|
|
import { defineComponent, inject, computed, useSlots, openBlock, createElementBlock, withModifiers, createElementVNode, normalizeClass, unref, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode } from "vue";
|
|
import { _ as _sfc_main$2W } from "../_chunks/@layui/index.js";
|
|
var index = /* @__PURE__ */ (() => ".layui-checkbox[size=lg]{height:18px;line-height:18px}.layui-checkbox[size=lg] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:18px;height:18px;font-size:16px}.layui-checkbox[size=lg] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:18px;line-height:18px;font-size:16px}.layui-checkbox[size=md]{height:16px;line-height:16px}.layui-checkbox[size=md] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:16px;height:16px;font-size:14px}.layui-checkbox[size=md] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:16px;line-height:16px;font-size:14px}.layui-checkbox[size=sm]{height:14px;line-height:14px}.layui-checkbox[size=sm] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:14px;height:14px;font-size:12px}.layui-checkbox[size=sm] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:14px;line-height:14px;font-size:12px}.layui-checkbox[size=xs]{height:12px;line-height:12px}.layui-checkbox[size=xs] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:12px;height:12px;font-size:10px}.layui-checkbox[size=xs] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:12px;line-height:12px;font-size:10px}.layui-checkbox input[type=checkbox]{display:none}.layui-form-checkbox{position:relative;height:30px;line-height:30px;margin-right:10px;padding-right:30px;cursor:pointer;font-size:0;-webkit-transition:.1s linear;transition:.1s linear;box-sizing:border-box}.layui-form-checkbox span{padding:0 10px;height:100%;font-size:14px;border-radius:2px 0 0 2px;background-color:var(--global-neutral-color-6);color:#fff;overflow:hidden}.layui-form-checkbox:hover span{background-color:var(--global-neutral-color-8)}.layui-form-checkbox i{top:0;right:0;width:29px;height:28px;position:absolute;border-top:1px solid var(--global-neutral-color-6);border-bottom:1px solid var(--global-neutral-color-6);border-right:1px solid var(--global-neutral-color-6);border-radius:0 2px 2px 0;color:#fff;font-size:20px;text-align:center}.layui-form-checkbox:hover i{border-color:var(--global-neutral-color-8);color:var(--global-neutral-color-8)}.layui-form-checkbox[lay-skin=primary]{height:auto!important;line-height:normal!important;min-width:18px;min-height:18px;border:none!important;margin-right:0;padding-left:28px;padding-right:0;background:0 0}.layui-form-checkbox[lay-skin=primary] span{padding-left:0;padding-right:15px;line-height:18px;background:0 0;color:#666}.layui-form-checkbox[lay-skin=primary] i{right:auto;left:0;width:16px;height:16px;line-height:16px;border:1px solid var(--global-neutral-color-6);font-size:12px;border-radius:2px;background-color:#fff;-webkit-transition:.1s linear;transition:.1s linear}.layui-form-checkbox[lay-skin=primary]:hover i{border-color:var(--global-checked-color);color:#fff}.layui-form-checked,.layui-form-checked:hover{border-color:var(--global-checked-color)}.layui-form-checked i,.layui-form-checked:hover i{color:var(--global-checked-color)}.layui-form-checked span,.layui-form-checked:hover span{background-color:var(--global-checked-color)}.layui-form-checked[lay-skin=primary] i{border-color:var(--global-checked-color);background-color:var(--global-checked-color);color:#fff}.layui-form-checked[lay-skin=primary] span{background:0 0!important}.layui-checkbox-disabled[lay-skin=primary] span{background:0 0!important;color:var(--global-neutral-color-8)!important}.layui-checkbox-disabled[lay-skin=primary]:hover i{border-color:var(--global-neutral-color-6)}.layui-checkbox-disabled,.layui-checkbox-disabled i{border-color:var(--global-neutral-color-3)!important}.layui-checkbox-disabled span{background-color:var(--global-neutral-color-3)!important}.layui-checkbox-disabled em{color:var(--global-neutral-color-6)!important}.layui-checkbox-disabled:hover i{color:#fff!important}.layui-checkbox-disabled .layui-icon-ok,.layui-checkbox-disabled .layui-icon-subtraction{background-color:var(--global-neutral-color-3)!important;border-color:var(--global-neutral-color-3)!important}\n")();
|
|
const _hoisted_1 = ["onClick", "size"];
|
|
const _hoisted_2 = ["name", "value"];
|
|
const _hoisted_3 = ["lay-skin"];
|
|
const _hoisted_4 = {
|
|
key: 0,
|
|
class: "layui-checkbox-label"
|
|
};
|
|
const __default__ = {
|
|
name: "LayCheckbox"
|
|
};
|
|
const _sfc_main = defineComponent({
|
|
...__default__,
|
|
props: {
|
|
name: null,
|
|
skin: null,
|
|
label: { default: "" },
|
|
value: null,
|
|
modelValue: { type: [Boolean, Array], default: false },
|
|
isIndeterminate: { type: Boolean, default: false },
|
|
size: { default: "md" },
|
|
disabled: { type: Boolean, default: false }
|
|
},
|
|
emits: ["update:modelValue", "change"],
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const checkboxGroup = inject("checkboxGroup", {});
|
|
const isGroup = computed(() => {
|
|
return checkboxGroup != void 0 && (checkboxGroup == null ? void 0 : checkboxGroup.name) === "LayCheckboxGroup";
|
|
});
|
|
const slots = useSlots();
|
|
const isChecked = computed({
|
|
get() {
|
|
if (isGroup.value) {
|
|
return checkboxGroup.modelValue.value.includes(props.value);
|
|
} else {
|
|
if (Array.isArray(props.modelValue)) {
|
|
return props.modelValue.includes(props.value);
|
|
} else {
|
|
return props.modelValue;
|
|
}
|
|
}
|
|
},
|
|
set(val) {
|
|
if (isGroup.value) {
|
|
setGroupModelValue(val);
|
|
} else {
|
|
if (Array.isArray(props.modelValue)) {
|
|
setArrayModelValue(val);
|
|
} else {
|
|
emit("change", val);
|
|
emit("update:modelValue", val);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
const arrayModelValue = computed(() => {
|
|
if (Array.isArray(props.modelValue)) {
|
|
return [...props.modelValue];
|
|
} else {
|
|
return [];
|
|
}
|
|
});
|
|
const setGroupModelValue = function(checked) {
|
|
let groupModelValue = [...checkboxGroup.modelValue.value];
|
|
if (!checked) {
|
|
groupModelValue.splice(groupModelValue.indexOf(props.value), 1);
|
|
} else {
|
|
groupModelValue.push(props.value);
|
|
}
|
|
checkboxGroup.modelValue.value = groupModelValue;
|
|
};
|
|
const setArrayModelValue = function(checked) {
|
|
let arr = [...arrayModelValue.value];
|
|
if (!checked) {
|
|
arr.splice(arr.indexOf(props.value), 1);
|
|
} else {
|
|
arr.push(props.value);
|
|
}
|
|
emit("change", arr);
|
|
emit("update:modelValue", arr);
|
|
};
|
|
const handleClick = function() {
|
|
if (!isDisabled.value) {
|
|
isChecked.value = !isChecked.value;
|
|
}
|
|
};
|
|
const isDisabled = computed(() => {
|
|
if (props.disabled) {
|
|
return true;
|
|
}
|
|
if (checkboxGroup.hasOwnProperty("disabled") && checkboxGroup.disabled.value) {
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
expose({ toggle: handleClick });
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("span", {
|
|
onClick: withModifiers(handleClick, ["stop"]),
|
|
class: "layui-checkbox",
|
|
size: __props.size
|
|
}, [
|
|
createElementVNode("input", {
|
|
type: "checkbox",
|
|
name: __props.name,
|
|
value: __props.value
|
|
}, null, 8, _hoisted_2),
|
|
createElementVNode("div", {
|
|
class: normalizeClass(["layui-form-checkbox", {
|
|
"layui-form-checked": unref(isChecked),
|
|
"layui-checkbox-disabled layui-disabled": unref(isDisabled)
|
|
}]),
|
|
"lay-skin": __props.skin
|
|
}, [
|
|
unref(slots).default || __props.label ? (openBlock(), createElementBlock("span", _hoisted_4, [
|
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
createTextVNode(toDisplayString(__props.label), 1)
|
|
])
|
|
])) : createCommentVNode("", true),
|
|
createVNode(unref(_sfc_main$2W), {
|
|
type: props.isIndeterminate && unref(isChecked) ? "layui-icon-subtraction" : unref(isChecked) ? "layui-icon-ok" : ""
|
|
}, null, 8, ["type"])
|
|
], 10, _hoisted_3)
|
|
], 8, _hoisted_1);
|
|
};
|
|
}
|
|
});
|
|
const component = withInstall(_sfc_main);
|
|
export { _sfc_main as _, component as c };
|