@ctsy/layui-vue/es/switch/index.js

a component library for Vue 3 base on layui-vue

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, computed, openBlock, createElementBlock, withModifiers, createElementVNode, normalizeClass, unref, normalizeStyle, toDisplayString, renderSlot } from "vue";
var index = "";
const _hoisted_1 = ["onClick"];
const __default__ = {
  name: "LaySwitch"
};
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
  props: {
    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 }
  },
  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 = function() {
      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"])
      }, [
        createElementVNode("div", {
          class: normalizeClass(["layui-unselect layui-form-switch", {
            "layui-disabled": __props.disabled,
            "layui-form-onswitch": unref(isActive),
            "layui-switch-disabled": __props.disabled
          }]),
          style: normalizeStyle(unref(styles))
        }, [
          createElementVNode("em", null, toDisplayString(unref(isActive) == true ? __props.onswitchText : __props.unswitchText), 1),
          createElementVNode("span", null, [
            createElementVNode("div", null, [
              unref(isActive) ? renderSlot(_ctx.$slots, "onswitch-icon", { key: 0 }) : renderSlot(_ctx.$slots, "unswitch-icon", { key: 1 })
            ])
          ])
        ], 6)
      ], 8, _hoisted_1);
    };
  }
}));
_sfc_main.install = (app) => {
  app.component(_sfc_main.name, _sfc_main);
};
export { _sfc_main as default };