@hoci/core 0.5.9 → 0.7.0

package/dist/index.mjs

@@ -1,8 +1,414 @@
-import { ref, inject, computed, watchPostEffect, provide, reactive, renderSlot, watch, nextTick } from 'vue';
-import { useElementBounding, useElementVisibility, useEventListener, syncRef, isDefined, tryOnScopeDispose, useVModel, onClickOutside } from '@vueuse/core';
-import { defineHookProps, defineHookEmits, defineHookComponent, toReactive, useElement, throttleByRaf, isWindow, valuePropType, classPropType, labelPropType, useSharedConfig, getFirstChilld } from '@hoci/shared';
+import { defineHookProps, defineHookEmits, defineHookComponent, elementRef, toReactive, useElement, throttleByRaf, isWindow, useSharedConfig, valuePropType, labelPropType, classPropType, getFirstChilld } from '@hoci/shared';
 export * from '@hoci/shared';
-import { px, cls, createUnitFormat } from 'tslx';
+import { getCurrentInstance, onMounted, nextTick, getCurrentScope, onScopeDispose, unref, watch, ref, computed, inject, watchPostEffect, provide, reactive, renderSlot } from 'vue';
+import { px, createUnitFormat, cls } from 'tslx';
+
+var _a;
+const isClient = typeof window !== "undefined";
+const isDef = (val) => typeof val !== "undefined";
+const isFunction = (val) => typeof val === "function";
+const isString = (val) => typeof val === "string";
+const noop = () => {
+};
+isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
+
+function resolveUnref(r) {
+  return typeof r === "function" ? r() : unref(r);
+}
+function identity(arg) {
+  return arg;
+}
+
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+
+function isDefined(v) {
+  return unref(v) != null;
+}
+
+function syncRef(left, right, options = {}) {
+  var _a, _b;
+  const {
+    flush = "sync",
+    deep = false,
+    immediate = true,
+    direction = "both",
+    transform = {}
+  } = options;
+  let watchLeft;
+  let watchRight;
+  const transformLTR = (_a = transform.ltr) != null ? _a : (v) => v;
+  const transformRTL = (_b = transform.rtl) != null ? _b : (v) => v;
+  if (direction === "both" || direction === "ltr") {
+    watchLeft = watch(left, (newValue) => right.value = transformLTR(newValue), { flush, deep, immediate });
+  }
+  if (direction === "both" || direction === "rtl") {
+    watchRight = watch(right, (newValue) => left.value = transformRTL(newValue), { flush, deep, immediate });
+  }
+  return () => {
+    watchLeft == null ? void 0 : watchLeft();
+    watchRight == null ? void 0 : watchRight();
+  };
+}
+
+function tryOnMounted(fn, sync = true) {
+  if (getCurrentInstance())
+    onMounted(fn);
+  else if (sync)
+    fn();
+  else
+    nextTick(fn);
+}
+
+function unrefElement(elRef) {
+  var _a;
+  const plain = resolveUnref(elRef);
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+}
+
+const defaultWindow = isClient ? window : void 0;
+
+function useEventListener(...args) {
+  let target;
+  let events;
+  let listeners;
+  let options;
+  if (isString(args[0]) || Array.isArray(args[0])) {
+    [events, listeners, options] = args;
+    target = defaultWindow;
+  } else {
+    [target, events, listeners, options] = args;
+  }
+  if (!target)
+    return noop;
+  if (!Array.isArray(events))
+    events = [events];
+  if (!Array.isArray(listeners))
+    listeners = [listeners];
+  const cleanups = [];
+  const cleanup = () => {
+    cleanups.forEach((fn) => fn());
+    cleanups.length = 0;
+  };
+  const register = (el, event, listener) => {
+    el.addEventListener(event, listener, options);
+    return () => el.removeEventListener(event, listener, options);
+  };
+  const stopWatch = watch(() => unrefElement(target), (el) => {
+    cleanup();
+    if (!el)
+      return;
+    cleanups.push(...events.flatMap((event) => {
+      return listeners.map((listener) => register(el, event, listener));
+    }));
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(stop);
+  return stop;
+}
+
+function onClickOutside(target, handler, options = {}) {
+  const { window = defaultWindow, ignore = [], capture = true, detectIframe = false } = options;
+  if (!window)
+    return;
+  let shouldListen = true;
+  let fallback;
+  const shouldIgnore = (event) => {
+    return ignore.some((target2) => {
+      if (typeof target2 === "string") {
+        return Array.from(window.document.querySelectorAll(target2)).some((el) => el === event.target || event.composedPath().includes(el));
+      } else {
+        const el = unrefElement(target2);
+        return el && (event.target === el || event.composedPath().includes(el));
+      }
+    });
+  };
+  const listener = (event) => {
+    window.clearTimeout(fallback);
+    const el = unrefElement(target);
+    if (!el || el === event.target || event.composedPath().includes(el))
+      return;
+    if (event.detail === 0)
+      shouldListen = !shouldIgnore(event);
+    if (!shouldListen) {
+      shouldListen = true;
+      return;
+    }
+    handler(event);
+  };
+  const cleanup = [
+    useEventListener(window, "click", listener, { passive: true, capture }),
+    useEventListener(window, "pointerdown", (e) => {
+      const el = unrefElement(target);
+      if (el)
+        shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e);
+    }, { passive: true }),
+    useEventListener(window, "pointerup", (e) => {
+      if (e.button === 0) {
+        const path = e.composedPath();
+        e.composedPath = () => path;
+        fallback = window.setTimeout(() => listener(e), 50);
+      }
+    }, { passive: true }),
+    detectIframe && useEventListener(window, "blur", (event) => {
+      var _a;
+      const el = unrefElement(target);
+      if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement)))
+        handler(event);
+    })
+  ].filter(Boolean);
+  const stop = () => cleanup.forEach((fn) => fn());
+  return stop;
+}
+
+function useSupported(callback, sync = false) {
+  const isSupported = ref();
+  const update = () => isSupported.value = Boolean(callback());
+  update();
+  tryOnMounted(update, sync);
+  return isSupported;
+}
+function cloneFnJSON(source) {
+  return JSON.parse(JSON.stringify(source));
+}
+
+const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+const globalKey = "__vueuse_ssr_handlers__";
+_global[globalKey] = _global[globalKey] || {};
+
+var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
+var __hasOwnProp$f = Object.prototype.hasOwnProperty;
+var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
+var __objRest$2 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function useResizeObserver(target, callback, options = {}) {
+  const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest$2(_a, ["window"]);
+  let observer;
+  const isSupported = useSupported(() => window && "ResizeObserver" in window);
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const stopWatch = watch(() => unrefElement(target), (el) => {
+    cleanup();
+    if (isSupported.value && window && el) {
+      observer = new ResizeObserver(callback);
+      observer.observe(el, observerOptions);
+    }
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop
+  };
+}
+
+function useElementBounding(target, options = {}) {
+  const {
+    reset = true,
+    windowResize = true,
+    windowScroll = true,
+    immediate = true
+  } = options;
+  const height = ref(0);
+  const bottom = ref(0);
+  const left = ref(0);
+  const right = ref(0);
+  const top = ref(0);
+  const width = ref(0);
+  const x = ref(0);
+  const y = ref(0);
+  function update() {
+    const el = unrefElement(target);
+    if (!el) {
+      if (reset) {
+        height.value = 0;
+        bottom.value = 0;
+        left.value = 0;
+        right.value = 0;
+        top.value = 0;
+        width.value = 0;
+        x.value = 0;
+        y.value = 0;
+      }
+      return;
+    }
+    const rect = el.getBoundingClientRect();
+    height.value = rect.height;
+    bottom.value = rect.bottom;
+    left.value = rect.left;
+    right.value = rect.right;
+    top.value = rect.top;
+    width.value = rect.width;
+    x.value = rect.x;
+    y.value = rect.y;
+  }
+  useResizeObserver(target, update);
+  watch(() => unrefElement(target), (ele) => !ele && update());
+  if (windowScroll)
+    useEventListener("scroll", update, { capture: true, passive: true });
+  if (windowResize)
+    useEventListener("resize", update, { passive: true });
+  tryOnMounted(() => {
+    if (immediate)
+      update();
+  });
+  return {
+    height,
+    bottom,
+    left,
+    right,
+    top,
+    width,
+    x,
+    y,
+    update
+  };
+}
+
+function useElementVisibility(element, { window = defaultWindow, scrollTarget } = {}) {
+  const elementIsVisible = ref(false);
+  const testBounding = () => {
+    if (!window)
+      return;
+    const document = window.document;
+    const el = unrefElement(element);
+    if (!el) {
+      elementIsVisible.value = false;
+    } else {
+      const rect = el.getBoundingClientRect();
+      elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
+    }
+  };
+  watch(() => unrefElement(element), () => testBounding(), { immediate: true, flush: "post" });
+  if (window) {
+    useEventListener(scrollTarget || window, "scroll", testBounding, {
+      capture: false,
+      passive: true
+    });
+  }
+  return elementIsVisible;
+}
+
+var SwipeDirection;
+(function(SwipeDirection2) {
+  SwipeDirection2["UP"] = "UP";
+  SwipeDirection2["RIGHT"] = "RIGHT";
+  SwipeDirection2["DOWN"] = "DOWN";
+  SwipeDirection2["LEFT"] = "LEFT";
+  SwipeDirection2["NONE"] = "NONE";
+})(SwipeDirection || (SwipeDirection = {}));
+
+var __defProp = Object.defineProperty;
+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;
+};
+const _TransitionPresets = {
+  easeInSine: [0.12, 0, 0.39, 0],
+  easeOutSine: [0.61, 1, 0.88, 1],
+  easeInOutSine: [0.37, 0, 0.63, 1],
+  easeInQuad: [0.11, 0, 0.5, 0],
+  easeOutQuad: [0.5, 1, 0.89, 1],
+  easeInOutQuad: [0.45, 0, 0.55, 1],
+  easeInCubic: [0.32, 0, 0.67, 0],
+  easeOutCubic: [0.33, 1, 0.68, 1],
+  easeInOutCubic: [0.65, 0, 0.35, 1],
+  easeInQuart: [0.5, 0, 0.75, 0],
+  easeOutQuart: [0.25, 1, 0.5, 1],
+  easeInOutQuart: [0.76, 0, 0.24, 1],
+  easeInQuint: [0.64, 0, 0.78, 0],
+  easeOutQuint: [0.22, 1, 0.36, 1],
+  easeInOutQuint: [0.83, 0, 0.17, 1],
+  easeInExpo: [0.7, 0, 0.84, 0],
+  easeOutExpo: [0.16, 1, 0.3, 1],
+  easeInOutExpo: [0.87, 0, 0.13, 1],
+  easeInCirc: [0.55, 0, 1, 0.45],
+  easeOutCirc: [0, 0.55, 0.45, 1],
+  easeInOutCirc: [0.85, 0, 0.15, 1],
+  easeInBack: [0.36, 0, 0.66, -0.56],
+  easeOutBack: [0.34, 1.56, 0.64, 1],
+  easeInOutBack: [0.68, -0.6, 0.32, 1.6]
+};
+__spreadValues({
+  linear: identity
+}, _TransitionPresets);
+
+function useVModel(props, key, emit, options = {}) {
+  var _a, _b, _c;
+  const {
+    clone = false,
+    passive = false,
+    eventName,
+    deep = false,
+    defaultValue
+  } = options;
+  const vm = getCurrentInstance();
+  const _emit = emit || (vm == null ? void 0 : vm.emit) || ((_a = vm == null ? void 0 : vm.$emit) == null ? void 0 : _a.bind(vm)) || ((_c = (_b = vm == null ? void 0 : vm.proxy) == null ? void 0 : _b.$emit) == null ? void 0 : _c.bind(vm == null ? void 0 : vm.proxy));
+  let event = eventName;
+  if (!key) {
+    {
+      key = "modelValue";
+    }
+  }
+  event = eventName || event || `update:${key.toString()}`;
+  const cloneFn = (val) => !clone ? val : isFunction(clone) ? clone(val) : cloneFnJSON(val);
+  const getValue = () => isDef(props[key]) ? cloneFn(props[key]) : defaultValue;
+  if (passive) {
+    const initialValue = getValue();
+    const proxy = ref(initialValue);
+    watch(() => props[key], (v) => proxy.value = cloneFn(v));
+    watch(proxy, (v) => {
+      if (v !== props[key] || deep)
+        _emit(event, v);
+    }, { deep });
+    return proxy;
+  } else {
+    return computed({
+      get() {
+        return getValue();
+      },
+      set(value) {
+        _emit(event, value);
+      }
+    });
+  }
+}
 
 const affixProps = defineHookProps(
   {
@@ -53,7 +459,7 @@ function getTargetRect(target) {
 const useAffix = defineHookComponent({
   props: affixProps,
   setup(props, { emit }) {
-    const wrapperRef = ref(null);
+    const wrapperRef = elementRef();
     const wrapperRect = toReactive(useElementBounding(wrapperRef));
     const parentRef = inject(AFFIX_TARGET_KEY, void 0);
     const targetRef = useElement(props.target, parentRef);
@@ -131,6 +537,150 @@ function provideAffixTarget(target) {
   provide(AFFIX_TARGET_KEY, target);
 }
 
+const configProviderProps = defineHookProps({
+  icon: {
+    type: Object
+  },
+  activateEvent: {
+    type: String
+  }
+});
+
+const fileUploadProps = defineHookProps({
+  modelValue: {
+    type: [File, Array],
+    default: () => []
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  }
+});
+const fileUploadEmits = defineHookEmits([
+  "update:modelValue",
+  "change"
+]);
+const useFileUpload = defineHookComponent({
+  props: fileUploadProps,
+  emits: fileUploadEmits,
+  setup(props, { emit }) {
+    const fileInputRef = elementRef();
+    const files = ref([]);
+    watch(props.modelValue, (value) => {
+      if (value instanceof File) {
+        files.value.push(value);
+      } else if (Array.isArray(value)) {
+        files.value.push(...value);
+      }
+      if (props.multiple) {
+        files.value.splice(1, files.value.length - 1);
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    const openFileInput = () => {
+      fileInputRef.value?.click();
+    };
+    useEventListener(fileInputRef, "change", (event) => {
+      const newFiles = event.target.files;
+      let value = [];
+      if (newFiles) {
+        if (props.multiple) {
+          value = Array.from(newFiles);
+          files.value.push(...value);
+        } else {
+          value = Array.from(newFiles)[0];
+          files.value = value ? [value] : [];
+        }
+      }
+      emit("update:modelValue", value);
+      emit("change", value);
+    });
+    return {
+      fileInputRef,
+      files,
+      openFileInput
+    };
+  }
+});
+
+const iconProps = defineHookProps({
+  src: {
+    type: String,
+    required: true
+  },
+  size: {
+    type: [Number, String]
+  },
+  width: {
+    type: [Number, String]
+  },
+  height: {
+    type: [Number, String]
+  },
+  color: {
+    type: String,
+    default: "currentColor"
+  },
+  mask: {
+    type: [Boolean, String],
+    default: () => "auto"
+  }
+});
+const isSvg = (src) => src.endsWith(".svg") || src.startsWith("data:image/svg+xml");
+const useIcon = defineHookComponent({
+  props: iconProps,
+  setup(props, context) {
+    const sharedConfig = useSharedConfig("icon");
+    const sizeStyle = computed(() => {
+      const s = props.size ?? sharedConfig.size;
+      const unit = createUnitFormat(sharedConfig.sizeUnit ?? "px");
+      const size = s ? unit(s) : void 0;
+      const w = props.width ?? size;
+      const h = props.height ?? size;
+      const width = w ? unit(w) : void 0;
+      const height = h ? unit(h) : void 0;
+      return {
+        width,
+        height
+      };
+    });
+    const dynamicStyle = computed(() => {
+      const mask = props.mask === "auto" ? isSvg(props.src) : props.mask;
+      if (!mask) {
+        return {
+          "background-image": "var(--icon-url)",
+          "background-size": "100% 100%"
+        };
+      }
+      return {
+        "mask": "var(--icon-url) no-repeat",
+        "mask-size": "100% 100%",
+        "-webkit-mask": "var(--icon-url) no-repeat",
+        "-webkit-mask-size": "100% 100%",
+        "background-color": props.color
+      };
+    });
+    const staticStyle = computed(() => {
+      return {
+        "--icon-url": `url("${props.src}")`
+      };
+    });
+    const style = computed(() => {
+      return {
+        ...staticStyle.value,
+        ...dynamicStyle.value,
+        ...sizeStyle.value,
+        ...context.attrs.style ?? {}
+      };
+    });
+    return {
+      style
+    };
+  }
+});
+
 const selectionProps = defineHookProps({
   modelValue: {
     type: valuePropType,
@@ -165,7 +715,7 @@ const selectionProps = defineHookProps({
    *  多选模式
    */
   multiple: {
-    type: [Boolean, Number],
+    type: [Boolean, Number, Array],
     default: () => false
   },
   /**
@@ -206,7 +756,8 @@ function useSelectionContext() {
     itemClass: "",
     activateEvent: sharedConfig.activateEvent,
     label: null,
-    multiple: false
+    multiple: false,
+    limit: [0, Number.POSITIVE_INFINITY]
   });
 }
 const useSelectionList = defineHookComponent({
@@ -247,16 +798,26 @@ const useSelectionList = defineHookComponent({
     function isActive(value) {
       return actives.includes(value);
     }
+    const multipleActive = computed(() => !!props.multiple);
+    const multipleLimit = computed(() => {
+      if (Array.isArray(props.multiple)) {
+        if (props.multiple[1] === void 0) {
+          return [props.multiple[0], Number.POSITIVE_INFINITY];
+        }
+        return props.multiple;
+      }
+      return [0, Number.POSITIVE_INFINITY];
+    });
     function activate(value) {
+      const [min, max] = multipleLimit.value;
       if (isActive(value)) {
-        if (props.multiple || props.clearable) {
+        if (multipleActive.value && actives.length > min || props.clearable) {
           actives.splice(actives.indexOf(value), 1);
           emitChange();
         }
       } else {
         if (props.multiple) {
-          const limit = typeof props.multiple === "number" ? props.multiple : Number.POSITIVE_INFINITY;
-          if (actives.length < limit) {
+          if (actives.length < max) {
             actives.push(value);
             emitChange();
           }
@@ -294,7 +855,8 @@ const useSelectionList = defineHookComponent({
       disabledClass: computed(() => cls(props.disabledClass)),
       itemClass: computed(() => cls(props.itemClass)),
       label: computed(() => props.label),
-      multiple: computed(() => props.multiple),
+      multiple: multipleActive,
+      limit: multipleLimit,
       clearable: computed(() => props.clearable),
       defaultValue: computed(() => props.defaultValue),
       activateEvent: computed(() => props.activateEvent ?? sharedConfig.activateEvent),
@@ -420,157 +982,6 @@ const useSelectionItem = defineHookComponent({
   }
 });
 
-const switchProps = defineHookProps({
-  modelValue: {
-    type: Boolean,
-    default: () => false
-  },
-  class: {
-    type: classPropType
-  },
-  activeClass: {
-    type: classPropType
-  },
-  unactiveClass: {
-    type: classPropType
-  },
-  activateEvent: {
-    type: String
-  },
-  disabled: {
-    type: Boolean,
-    default: () => false
-  },
-  disabledClass: {
-    type: classPropType
-  }
-});
-const switchEmits = defineHookEmits(["update:modelValue", "change", "reject"]);
-const useSwitch = defineHookComponent({
-  props: switchProps,
-  emits: switchEmits,
-  setup(props, context) {
-    const modelValue = useVModel(props, "modelValue", context.emit, {
-      passive: true,
-      defaultValue: false
-    });
-    const toggle = function(value) {
-      if (props.disabled) {
-        context.emit("reject", value);
-        return;
-      }
-      const oldValue = modelValue.value;
-      const newValue = typeof value === "boolean" ? value : !oldValue;
-      if (newValue !== oldValue) {
-        modelValue.value = newValue;
-        context.emit("change", newValue);
-      }
-    };
-    const isDisabled = computed(() => props.disabled);
-    const className = computed(() => {
-      return cls([
-        props.class,
-        modelValue.value ? props.activeClass : props.unactiveClass,
-        isDisabled.value ? props.disabledClass : ""
-      ]);
-    });
-    const sharedConfig = useSharedConfig();
-    const activateEvent = computed(() => props.activateEvent ?? sharedConfig.activateEvent);
-    return {
-      toggle,
-      modelValue,
-      className,
-      isDisabled,
-      activateEvent
-    };
-  }
-});
-
-const iconProps = defineHookProps({
-  src: {
-    type: String,
-    required: true
-  },
-  size: {
-    type: [Number, String]
-  },
-  width: {
-    type: [Number, String]
-  },
-  height: {
-    type: [Number, String]
-  },
-  color: {
-    type: String,
-    default: "currentColor"
-  },
-  mask: {
-    type: [Boolean, String],
-    default: () => "auto"
-  }
-});
-const isSvg = (src) => src.endsWith(".svg") || src.startsWith("data:image/svg+xml");
-const useIcon = defineHookComponent({
-  props: iconProps,
-  setup(props, context) {
-    const sharedConfig = useSharedConfig("icon");
-    const sizeStyle = computed(() => {
-      const s = props.size ?? sharedConfig.size;
-      const unit = createUnitFormat(sharedConfig.sizeUnit ?? "px");
-      const size = s ? unit(s) : void 0;
-      const w = props.width ?? size;
-      const h = props.height ?? size;
-      const width = w ? unit(w) : void 0;
-      const height = h ? unit(h) : void 0;
-      return {
-        width,
-        height
-      };
-    });
-    const dynamicStyle = computed(() => {
-      const mask = props.mask === "auto" ? isSvg(props.src) : props.mask;
-      if (!mask) {
-        return {
-          "background-image": "var(--icon-url)",
-          "background-size": "100% 100%"
-        };
-      }
-      return {
-        "mask": "var(--icon-url) no-repeat",
-        "mask-size": "100% 100%",
-        "-webkit-mask": "var(--icon-url) no-repeat",
-        "-webkit-mask-size": "100% 100%",
-        "background-color": props.color
-      };
-    });
-    const staticStyle = computed(() => {
-      return {
-        "--icon-url": `url("${props.src}")`
-      };
-    });
-    const style = computed(() => {
-      return {
-        ...staticStyle.value,
-        ...dynamicStyle.value,
-        ...sizeStyle.value,
-        ...context.attrs.style ?? {}
-      };
-    });
-    return {
-      style
-    };
-  }
-});
-
-const configProviderProps = defineHookProps({
-  icon: {
-    type: Object
-  },
-  activateEvent: {
-    type: String
-  }
-});
-
 const popoverProps = defineHookProps({
   popupClass: {
     type: String
@@ -612,8 +1023,8 @@ const usePopover = defineHookComponent({
     const visible = useVModel(props, "visible", context.emit, {
       passive: true
     });
-    const triggerRef = ref();
-    const popupRef = ref();
+    const triggerRef = elementRef();
+    const popupRef = elementRef();
     const validate = (event) => {
       const events2 = Array.isArray(event) ? event : [event];
       return !props.disabled && events2.includes(props.triggerEvent);
@@ -804,4 +1215,70 @@ const usePopover = defineHookComponent({
   }
 });
 
-export { AFFIX_TARGET_KEY, affixEmits, affixProps, configProviderProps, iconProps, itemEmits, itemProps, popoverEmits, popoverProps, provideAffixTarget, selectionEmits, selectionProps, switchEmits, switchProps, useAffix, useIcon, usePopover, useSelectionContext, useSelectionItem, useSelectionList, useSwitch };
+const switchProps = defineHookProps({
+  modelValue: {
+    type: Boolean,
+    default: () => false
+  },
+  class: {
+    type: classPropType
+  },
+  activeClass: {
+    type: classPropType
+  },
+  unactiveClass: {
+    type: classPropType
+  },
+  activateEvent: {
+    type: String
+  },
+  disabled: {
+    type: Boolean,
+    default: () => false
+  },
+  disabledClass: {
+    type: classPropType
+  }
+});
+const switchEmits = defineHookEmits(["update:modelValue", "change", "reject"]);
+const useSwitch = defineHookComponent({
+  props: switchProps,
+  emits: switchEmits,
+  setup(props, context) {
+    const modelValue = useVModel(props, "modelValue", context.emit, {
+      passive: true,
+      defaultValue: false
+    });
+    const toggle = function(value) {
+      if (props.disabled) {
+        context.emit("reject", value);
+        return;
+      }
+      const oldValue = modelValue.value;
+      const newValue = typeof value === "boolean" ? value : !oldValue;
+      if (newValue !== oldValue) {
+        modelValue.value = newValue;
+        context.emit("change", newValue);
+      }
+    };
+    const isDisabled = computed(() => props.disabled);
+    const className = computed(() => {
+      return cls([
+        props.class,
+        modelValue.value ? props.activeClass : props.unactiveClass,
+        isDisabled.value ? props.disabledClass : ""
+      ]);
+    });
+    const sharedConfig = useSharedConfig();
+    const activateEvent = computed(() => props.activateEvent ?? sharedConfig.activateEvent);
+    return {
+      toggle,
+      modelValue,
+      className,
+      isDisabled,
+      activateEvent
+    };
+  }
+});
+
+export { AFFIX_TARGET_KEY, affixEmits, affixProps, configProviderProps, fileUploadEmits, fileUploadProps, iconProps, itemEmits, itemProps, popoverEmits, popoverProps, provideAffixTarget, selectionEmits, selectionProps, switchEmits, switchProps, useAffix, useFileUpload, useIcon, usePopover, useSelectionContext, useSelectionItem, useSelectionList, useSwitch };