1

package/component/es/switch/index.css

@@ -0,0 +1 @@
+.layui-switch-container[size=lg] .layui-form-switch{height:24px;min-width:42px}.layui-switch-container[size=lg] .layui-form-switch span{width:20px;height:20px;transition:all .1s linear}.layui-switch-container[size=lg] .layui-form-switch em{margin-left:21px}.layui-switch-container[size=lg] .layui-form-onswitch span{left:calc(100% - 23px)}.layui-switch-container[size=lg] .layui-form-onswitch em{margin-right:21px;margin-left:0}.layui-switch-container[size=md] .layui-form-switch{height:22px;min-width:37px}.layui-switch-container[size=md] .layui-form-switch span{width:18px;height:18px;transition:all .1s linear}.layui-switch-container[size=md] .layui-form-switch em{margin-left:19px}.layui-switch-container[size=md] .layui-form-onswitch span{left:calc(100% - 21px)}.layui-switch-container[size=md] .layui-form-onswitch em{margin-right:19px;margin-left:0}.layui-switch-container[size=sm] .layui-form-switch{height:20px;min-width:32px}.layui-switch-container[size=sm] .layui-form-switch span{width:16px;height:16px;transition:all .1s linear}.layui-switch-container[size=sm] .layui-form-switch em{margin-left:17px}.layui-switch-container[size=sm] .layui-form-onswitch span{left:calc(100% - 19px)}.layui-switch-container[size=sm] .layui-form-onswitch em{margin-right:17px;margin-left:0}.layui-switch-container[size=xs] .layui-form-switch{height:18px;min-width:27px}.layui-switch-container[size=xs] .layui-form-switch span{width:14px;height:14px;transition:all .1s linear}.layui-switch-container[size=xs] .layui-form-switch em{margin-left:15px}.layui-switch-container[size=xs] .layui-form-onswitch span{left:calc(100% - 17px)}.layui-switch-container[size=xs] .layui-form-onswitch em{margin-right:15px;margin-left:0}.layui-switch-container .layui-switch-input{display:none}.layui-form-switch{position:relative;height:22px;line-height:22px;min-width:35px;padding:0 4px;border-radius:20px;cursor:pointer;background-color:var(--global-neutral-color-6);-webkit-transition:all .1s linear;transition:all .1s linear}.layui-form-switch span{position:absolute;display:flex;align-items:center;justify-content:center;left:3px;top:2px;width:18px;height:18px;line-height:18px;border-radius:20px;background-color:#fff;box-shadow:0 2px 4px #00230b33;-webkit-transition:all .1s linear;transition:all .1s linear}.layui-form-switch em{position:relative;padding:0 2px;text-align:center!important;color:#999!important;font-style:normal!important;font-size:12px;width:25px;top:0}.layui-form-onswitch{border-color:var(--global-checked-color);background-color:var(--global-checked-color)}.layui-form-onswitch span{background-color:#fff}.layui-form-onswitch em{color:#fff!important}.layui-switch-disabled{opacity:.6}.layui-switch-disabled,.layui-switch-disabled *{cursor:not-allowed!important}

package/component/es/switch/index.js

@@ -0,0 +1,88 @@
+import { w as withInstall } from "../badge/index2.js";
+import { defineComponent, computed, openBlock, createElementBlock, withModifiers, createElementVNode, normalizeClass, unref, normalizeStyle, toDisplayString, createCommentVNode, Fragment, renderSlot } from "vue";
+var index = /* @__PURE__ */ (() => ".layui-switch-container[size=lg] .layui-form-switch{height:24px;min-width:42px}.layui-switch-container[size=lg] .layui-form-switch span{width:20px;height:20px;transition:all .1s linear}.layui-switch-container[size=lg] .layui-form-switch em{margin-left:21px}.layui-switch-container[size=lg] .layui-form-onswitch span{left:calc(100% - 23px)}.layui-switch-container[size=lg] .layui-form-onswitch em{margin-right:21px;margin-left:0}.layui-switch-container[size=md] .layui-form-switch{height:22px;min-width:37px}.layui-switch-container[size=md] .layui-form-switch span{width:18px;height:18px;transition:all .1s linear}.layui-switch-container[size=md] .layui-form-switch em{margin-left:19px}.layui-switch-container[size=md] .layui-form-onswitch span{left:calc(100% - 21px)}.layui-switch-container[size=md] .layui-form-onswitch em{margin-right:19px;margin-left:0}.layui-switch-container[size=sm] .layui-form-switch{height:20px;min-width:32px}.layui-switch-container[size=sm] .layui-form-switch span{width:16px;height:16px;transition:all .1s linear}.layui-switch-container[size=sm] .layui-form-switch em{margin-left:17px}.layui-switch-container[size=sm] .layui-form-onswitch span{left:calc(100% - 19px)}.layui-switch-container[size=sm] .layui-form-onswitch em{margin-right:17px;margin-left:0}.layui-switch-container[size=xs] .layui-form-switch{height:18px;min-width:27px}.layui-switch-container[size=xs] .layui-form-switch span{width:14px;height:14px;transition:all .1s linear}.layui-switch-container[size=xs] .layui-form-switch em{margin-left:15px}.layui-switch-container[size=xs] .layui-form-onswitch span{left:calc(100% - 17px)}.layui-switch-container[size=xs] .layui-form-onswitch em{margin-right:15px;margin-left:0}.layui-switch-container .layui-switch-input{display:none}.layui-form-switch{position:relative;height:22px;line-height:22px;min-width:35px;padding:0 4px;border-radius:20px;cursor:pointer;background-color:var(--global-neutral-color-6);-webkit-transition:all .1s linear;transition:all .1s linear}.layui-form-switch span{position:absolute;display:flex;align-items:center;justify-content:center;left:3px;top:2px;width:18px;height:18px;line-height:18px;border-radius:20px;background-color:#fff;box-shadow:0 2px 4px #00230b33;-webkit-transition:all .1s linear;transition:all .1s linear}.layui-form-switch em{position:relative;padding:0 2px;text-align:center!important;color:#999!important;font-style:normal!important;font-size:12px;width:25px;top:0}.layui-form-onswitch{border-color:var(--global-checked-color);background-color:var(--global-checked-color)}.layui-form-onswitch span{background-color:#fff}.layui-form-onswitch em{color:#fff!important}.layui-switch-disabled{opacity:.6}.layui-switch-disabled,.layui-switch-disabled *{cursor:not-allowed!important}\n")();
+const _hoisted_1 = ["onClick", "size"];
+const _hoisted_2 = ["name", "value"];
+const _hoisted_3 = { key: 0 };
+const __default__ = {
+  name: "LaySwitch"
+};
+const _sfc_main = defineComponent({
+  ...__default__,
+  props: {
+    name: null,
+    disabled: { type: Boolean, default: false },
+    modelValue: { type: [String, Number, Boolean] },
+    onswitchText: null,
+    unswitchText: null,
+    onswitchColor: null,
+    unswitchColor: null,
+    onswitchValue: { type: [String, Number, Boolean], default: true },
+    unswitchValue: { type: [String, Number, Boolean], default: false },
+    size: { default: "md" },
+    loadingIcon: { default: "layui-icon-loading-one" },
+    loading: { type: Boolean }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const isActive = computed({
+      get() {
+        return props.modelValue === props.onswitchValue;
+      },
+      set(val) {
+        if (val) {
+          emit("change", props.onswitchValue);
+          emit("update:modelValue", props.onswitchValue);
+        } else {
+          emit("change", props.unswitchValue);
+          emit("update:modelValue", props.unswitchValue);
+        }
+      }
+    });
+    const handleClick = () => {
+      if (!props.disabled) {
+        isActive.value = !isActive.value;
+      }
+    };
+    const styles = computed(() => {
+      return {
+        "background-color": isActive.value ? props.onswitchColor : props.unswitchColor
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        onClick: withModifiers(handleClick, ["stop"]),
+        class: "layui-switch-container",
+        size: __props.size
+      }, [
+        createElementVNode("input", {
+          class: "layui-switch-input",
+          name: __props.name,
+          value: __props.modelValue
+        }, null, 8, _hoisted_2),
+        createElementVNode("div", {
+          class: normalizeClass(["layui-unselect layui-form-switch", {
+            "layui-form-onswitch": unref(isActive),
+            "layui-switch-disabled": __props.disabled
+          }]),
+          style: normalizeStyle(unref(styles))
+        }, [
+          __props.onswitchText || __props.unswitchText ? (openBlock(), createElementBlock("em", _hoisted_3, toDisplayString(unref(isActive) == true ? __props.onswitchText : __props.unswitchText), 1)) : createCommentVNode("", true),
+          createElementVNode("span", null, [
+            createElementVNode("div", null, [
+              __props.loading ? (openBlock(), createElementBlock("i", {
+                key: 0,
+                class: normalizeClass(["layui-icon layui-anim layui-anim-rotate layui-anim-loop", __props.loadingIcon])
+              }, null, 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                unref(isActive) ? renderSlot(_ctx.$slots, "onswitch-icon", { key: 0 }) : renderSlot(_ctx.$slots, "unswitch-icon", { key: 1 })
+              ], 64))
+            ])
+          ])
+        ], 6)
+      ], 8, _hoisted_1);
+    };
+  }
+});
+const component = withInstall(_sfc_main);
+export { component as default };