import { defineComponent, createVNode as _createVNode } from "vue"; import { addUnit, numericProp, unknownProp, createNamespace } from "../utils/index.mjs"; import { useCustomFieldValue } from "@vant/use"; import { Loading } from "../loading/index.mjs"; const [name, bem] = createNamespace("switch"); const switchProps = { size: numericProp, loading: Boolean, disabled: Boolean, modelValue: unknownProp, activeColor: String, inactiveColor: String, activeValue: { type: unknownProp, default: true }, inactiveValue: { type: unknownProp, default: false } }; var stdin_default = defineComponent({ name, props: switchProps, emits: ["change", "update:modelValue"], setup(props, { emit, slots }) { const isChecked = () => props.modelValue === props.activeValue; const onClick = () => { if (!props.disabled && !props.loading) { const newValue = isChecked() ? props.inactiveValue : props.activeValue; emit("update:modelValue", newValue); emit("change", newValue); } }; const renderLoading = () => { if (props.loading) { const color = isChecked() ? props.activeColor : props.inactiveColor; return _createVNode(Loading, { "class": bem("loading"), "color": color }, null); } if (slots.node) { return slots.node(); } }; useCustomFieldValue(() => props.modelValue); return () => { var _a; const { size, loading, disabled, activeColor, inactiveColor } = props; const checked = isChecked(); const style = { fontSize: addUnit(size), backgroundColor: checked ? activeColor : inactiveColor }; return _createVNode("div", { "role": "switch", "class": bem({ on: checked, loading, disabled }), "style": style, "tabindex": disabled ? void 0 : 0, "aria-checked": checked, "onClick": onClick }, [_createVNode("div", { "class": bem("node") }, [renderLoading()]), (_a = slots.background) == null ? void 0 : _a.call(slots)]); }; } }); export { stdin_default as default, switchProps };