@hoci/core 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -5,42 +5,6 @@ const core = require('@vueuse/core');
 const shared = require('@hoci/shared');
 const tslx = require('tslx');
 
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
-    }
-  return a;
-};
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 const affixProps = shared.defineHookProps(
   {
     fixedClass: {
@@ -88,29 +52,27 @@ const useAffix = shared.defineHookComponent({
   props: affixProps,
   setup(props, { emit }) {
     const wrapperRef = vue.ref(null);
-    const parentRef = vue.inject(AFFIX_TARGET_KEY, window);
+    const parentRef = vue.inject(AFFIX_TARGET_KEY, void 0);
     const targetRef = shared.useElement(props.target, parentRef);
     const isFixed = vue.ref(false);
     const placeholderStyle = vue.ref({});
     const fixedStyle = vue.ref({});
-    const classNames = vue.computed(() => {
+    const className = vue.computed(() => {
       return isFixed.value ? props.fixedClass : "";
     });
     const wrapperVisible = core.useElementVisibility(wrapperRef);
-    const container = vue.computed(() => {
-      var _a;
-      if (!targetRef.value || !wrapperVisible.value) {
+    const containerRef = vue.computed(() => {
+      if (!wrapperVisible.value) {
         return null;
       }
-      return (_a = targetRef.value) != null ? _a : window;
+      return targetRef.value ?? window;
     });
-    const updatePosition = shared.throttleByRaf(() => __async(this, null, function* () {
-      if (!wrapperRef.value || !targetRef.value) {
+    const updatePosition = shared.throttleByRaf(async () => {
+      if (!wrapperRef.value || !containerRef.value) {
         return;
       }
-      yield vue.nextTick();
       const wrapperRect = wrapperRef.value.getBoundingClientRect();
-      const targetRect = getTargetRect(targetRef.value);
+      const targetRect = getTargetRect(containerRef.value);
       let newIsFixed = false;
       let newFixedStyles = {};
       const newPlaceholderStyles = {
@@ -137,17 +99,21 @@ const useAffix = shared.defineHookComponent({
         emit("change", newIsFixed);
       }
       placeholderStyle.value = newPlaceholderStyles;
-      fixedStyle.value = __spreadValues$1(__spreadValues$1({}, newFixedStyles), newIsFixed ? newPlaceholderStyles : {});
-    }));
-    core.useEventListener(container, "scroll", () => {
+      fixedStyle.value = {
+        ...newFixedStyles,
+        ...newIsFixed ? newPlaceholderStyles : {}
+      };
+    });
+    core.useEventListener(containerRef, "scroll", () => {
       emit("scroll");
       updatePosition();
     });
-    core.useEventListener(container, "resize", updatePosition);
+    core.useEventListener(containerRef, "resize", updatePosition);
     vue.watchPostEffect(updatePosition);
     return {
-      classNames,
+      className,
       wrapperRef,
+      containerRef,
       isFixed,
       placeholderStyle,
       fixedStyle,
@@ -207,8 +173,7 @@ const selectionProps = shared.defineHookProps({
     default: () => null
   },
   activateEvent: {
-    type: String,
-    default: () => "click"
+    type: String
   }
 });
 const selectionEmits = shared.defineHookEmits([
@@ -219,6 +184,7 @@ const selectionEmits = shared.defineHookEmits([
 ]);
 const HiSelectionContextSymbol = Symbol("[hi-selection]context");
 function useSelectionContext() {
+  const sharedConfig = shared.useSharedConfig();
   return vue.inject(HiSelectionContextSymbol, {
     isActive: () => false,
     changeActive: () => {
@@ -227,7 +193,7 @@ function useSelectionContext() {
     unactiveClass: "unactive",
     disabledClass: "disabled",
     itemClass: "",
-    activateEvent: "click",
+    activateEvent: sharedConfig.activateEvent,
     label: null,
     multiple: false
   });
@@ -236,7 +202,6 @@ const useSelectionList = shared.defineHookComponent({
   props: selectionProps,
   emits: selectionEmits,
   setup(props, { emit }) {
-    var _a;
     const options = vue.reactive([]);
     function toArray(value) {
       if (!core.isDefined(value)) {
@@ -248,7 +213,7 @@ const useSelectionList = shared.defineHookComponent({
       return [value];
     }
     const actives = vue.reactive([
-      ...toArray((_a = props.modelValue) != null ? _a : props.defaultValue)
+      ...toArray(props.modelValue ?? props.defaultValue)
     ]);
     const currentValue = vue.computed({
       get() {
@@ -260,8 +225,7 @@ const useSelectionList = shared.defineHookComponent({
     });
     const modelValue = vue.computed({
       get() {
-        var _a2;
-        return (_a2 = props.modelValue) != null ? _a2 : props.defaultValue;
+        return props.modelValue ?? props.defaultValue;
       },
       set(val) {
         emit("update:modelValue", val);
@@ -309,6 +273,7 @@ const useSelectionList = shared.defineHookComponent({
       emit("load", option);
       return remove;
     };
+    const sharedConfig = shared.useSharedConfig();
     vue.provide(HiSelectionContextSymbol, core.toReactive({
       activeClass: vue.computed(() => tslx.cls(props.activeClass)),
       unactiveClass: vue.computed(() => tslx.cls(props.unactiveClass)),
@@ -318,7 +283,7 @@ const useSelectionList = shared.defineHookComponent({
       multiple: vue.computed(() => props.multiple),
       clearable: vue.computed(() => props.clearable),
       defaultValue: vue.computed(() => props.defaultValue),
-      activateEvent: vue.computed(() => props.activateEvent),
+      activateEvent: vue.computed(() => props.activateEvent ?? sharedConfig.activateEvent),
       active: currentValue,
       changeActive,
       isActive,
@@ -378,8 +343,7 @@ const useSelectionItem = shared.defineHookComponent({
         active: context.isActive(props.value),
         activate
       }, () => {
-        var _a;
-        let label = (_a = props.label) != null ? _a : context.label;
+        let label = props.label ?? context.label;
         if (label && typeof label == "function") {
           label = label(props.value);
         }
@@ -416,7 +380,7 @@ const useSelectionItem = shared.defineHookComponent({
       }
       return tslx.cls(array);
     });
-    const activateEvent = vue.computed(() => context.activateEvent);
+    const activateEvent = vue.computed(() => props.activateEvent ?? context.activateEvent);
     return {
       activate,
       render,
@@ -446,8 +410,7 @@ const switchProps = shared.defineHookProps({
     default: "unchecked"
   },
   activateEvent: {
-    type: String,
-    default: "click"
+    type: String
   },
   disabled: {
     type: Boolean,
@@ -486,39 +449,25 @@ const useSwitch = shared.defineHookComponent({
         isDisabled.value ? props.disabledClass : ""
       ]);
     });
+    const sharedConfig = shared.useSharedConfig();
+    const activateEvent = vue.computed(() => props.activateEvent ?? sharedConfig.activateEvent);
     return {
       toggle,
       modelValue,
       className,
-      isDisabled
+      isDisabled,
+      activateEvent
     };
   }
 });
 
-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 iconProps = shared.defineHookProps({
   src: {
     type: String,
     required: true
   },
   size: {
-    type: [Number, String],
-    default: "1rem"
+    type: [Number, String]
   },
   width: {
     type: [Number, String]
@@ -527,7 +476,8 @@ const iconProps = shared.defineHookProps({
     type: [Number, String]
   },
   color: {
-    type: String
+    type: String,
+    default: "currentColor"
   },
   mask: {
     type: [Boolean, String],
@@ -537,38 +487,47 @@ const iconProps = shared.defineHookProps({
 const useIcon = shared.defineHookComponent({
   props: iconProps,
   setup(props, context) {
-    const style = vue.computed(() => {
-      var _a, _b, _c, _d, _e, _f;
-      const icon = props.src;
-      const propSize = (_a = props.size) != null ? _a : "16px";
-      const size = typeof propSize === "number" ? `${propSize}px` : propSize;
-      const propWidth = (_b = props.width) != null ? _b : size;
-      const width = typeof propWidth === "number" ? `${propWidth}px` : propWidth;
-      const propHeight = (_c = props.height) != null ? _c : size;
-      const height = typeof propHeight === "number" ? `${propHeight}px` : propHeight;
-      const color = (_d = props.color) != null ? _d : "currentColor";
-      const mask = props.mask === "auto" ? icon.endsWith(".svg") : props.mask;
+    const sharedConfig = shared.useSharedConfig("icon");
+    const sizeStyle = vue.computed(() => {
+      const s = props.size ?? sharedConfig.size;
+      const size = s ? tslx.unit_f(s, sharedConfig.sizeUnit) : void 0;
+      const w = props.width ?? size;
+      const h = props.height ?? size;
+      const width = w ? tslx.unit_f(w, sharedConfig.sizeUnit) : void 0;
+      const height = h ? tslx.unit_f(h, sharedConfig.sizeUnit) : void 0;
+      return {
+        width,
+        height
+      };
+    });
+    const dynamicStyle = vue.computed(() => {
+      const mask = props.mask === "auto" ? props.src.endsWith(".svg") : props.mask;
       if (!mask) {
-        return __spreadValues({
-          "--icon-url": `url('${icon}')`,
+        return {
           "background-image": "var(--icon-url)",
-          "background-size": "100% 100%",
-          "height": height,
-          "width": width,
-          "display": "inline-block"
-        }, (_e = context.attrs.style) != null ? _e : {});
+          "background-size": "100% 100%"
+        };
       }
-      return __spreadValues({
-        "--icon-url": `url('${icon}')`,
+      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": color,
-        "display": "inline-block",
-        "width": width,
-        "height": height
-      }, (_f = context.attrs.style) != null ? _f : {});
+        "background-color": props.color
+      };
+    });
+    const staticStyle = vue.computed(() => {
+      return {
+        "--icon-url": `url('${props.src}')`
+      };
+    });
+    const style = vue.computed(() => {
+      return {
+        ...staticStyle.value,
+        ...dynamicStyle.value,
+        ...sizeStyle.value,
+        ...context.attrs.style ?? {}
+      };
     });
     return {
       style

package/dist/index.d.cts

@@ -27,7 +27,7 @@ declare const affixProps: {
      * @en Scroll container, default is `window`
      */
     target: {
-        type: PropType<string | Window | HTMLElement>;
+        type: PropType<string | HTMLElement>;
     };
     /**
    * @zh z-index 值
@@ -40,10 +40,11 @@ declare const affixProps: {
 };
 type AffixProps = typeof affixProps;
 declare const affixEmits: ("scroll" | "change")[];
-declare const AFFIX_TARGET_KEY: InjectionKey<MaybeRefOrGetter<HTMLElement | Window | Element | null | undefined>>;
+declare const AFFIX_TARGET_KEY: InjectionKey<MaybeRefOrGetter<Element | null | undefined>>;
 declare const useAffix: _hoci_shared.HookComponent<{
-    classNames: vue.ComputedRef<string>;
+    className: vue.ComputedRef<string>;
     wrapperRef: Ref<HTMLElement | null>;
+    containerRef: vue.ComputedRef<Element | (Window & typeof globalThis) | null>;
     isFixed: Ref<boolean>;
     placeholderStyle: Ref<CSSProperties>;
     fixedStyle: Ref<CSSProperties>;
@@ -70,7 +71,7 @@ declare const useAffix: _hoci_shared.HookComponent<{
      * @en Scroll container, default is `window`
      */
     target: {
-        type: PropType<string | Window | HTMLElement>;
+        type: PropType<string | HTMLElement>;
     };
     /**
    * @zh z-index 值
@@ -102,7 +103,7 @@ declare const useAffix: _hoci_shared.HookComponent<{
      * @en Scroll container, default is `window`
      */
     target: {
-        type: PropType<string | Window | HTMLElement>;
+        type: PropType<string | HTMLElement>;
     };
     /**
    * @zh z-index 值
@@ -118,7 +119,7 @@ declare const useAffix: _hoci_shared.HookComponent<{
     offsetType: "top" | "bottom";
     zIndex: number;
 }>;
-declare function provideAffixTarget(target: MaybeRefOrGetter<HTMLElement | Element | null | undefined>): void;
+declare function provideAffixTarget(target: MaybeRefOrGetter<Element | null | undefined>): void;
 
 type InitFunction = (option: Option) => () => void;
 interface Option {
@@ -188,7 +189,6 @@ declare const selectionProps: {
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
-        default: () => "click";
     };
 };
 type SelectionProps = typeof selectionProps;
@@ -254,7 +254,6 @@ declare const useSelectionList: _hoci_shared.HookComponent<{
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
-        default: () => "click";
     };
 }, vue.ExtractPropTypes<{
     modelValue: {
@@ -305,7 +304,6 @@ declare const useSelectionList: _hoci_shared.HookComponent<{
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
-        default: () => "click";
     };
 }>, {
     multiple: number | boolean;
@@ -316,7 +314,6 @@ declare const useSelectionList: _hoci_shared.HookComponent<{
     unactiveClass: string | string[] | Record<string, boolean>;
     clearable: boolean;
     defaultValue: any;
-    activateEvent: ActivateEvent;
 }>;
 interface HiSelectionSlotData extends Record<string, unknown> {
     isActive: (value: any) => boolean;
@@ -429,7 +426,6 @@ declare const switchProps: {
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
-        default: string;
     };
     disabled: {
         type: BooleanConstructor;
@@ -447,6 +443,7 @@ declare const useSwitch: _hoci_shared.HookComponent<{
     modelValue: vue.Ref<boolean>;
     className: vue.ComputedRef<string>;
     isDisabled: vue.ComputedRef<boolean>;
+    activateEvent: vue.ComputedRef<ActivateEvent>;
 }, ("change" | "update:modelValue")[], {
     modelValue: {
         type: BooleanConstructor;
@@ -466,7 +463,6 @@ declare const useSwitch: _hoci_shared.HookComponent<{
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
-        default: string;
     };
     disabled: {
         type: BooleanConstructor;
@@ -495,7 +491,6 @@ declare const useSwitch: _hoci_shared.HookComponent<{
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
-        default: string;
     };
     disabled: {
         type: BooleanConstructor;
@@ -511,7 +506,6 @@ declare const useSwitch: _hoci_shared.HookComponent<{
     activeClass: string | string[] | Record<string, boolean>;
     disabledClass: string | string[] | Record<string, boolean>;
     unactiveClass: string | string[] | Record<string, boolean>;
-    activateEvent: ActivateEvent;
 }>;
 
 declare const iconProps: {
@@ -521,7 +515,6 @@ declare const iconProps: {
     };
     size: {
         type: (StringConstructor | NumberConstructor)[];
-        default: string;
     };
     width: {
         type: (StringConstructor | NumberConstructor)[];
@@ -531,6 +524,7 @@ declare const iconProps: {
     };
     color: {
         type: StringConstructor;
+        default: string;
     };
     mask: {
         type: PropType<boolean | "auto">;
@@ -547,7 +541,6 @@ declare const useIcon: _hoci_shared.HookComponent<{
     };
     size: {
         type: (StringConstructor | NumberConstructor)[];
-        default: string;
     };
     width: {
         type: (StringConstructor | NumberConstructor)[];
@@ -557,6 +550,7 @@ declare const useIcon: _hoci_shared.HookComponent<{
     };
     color: {
         type: StringConstructor;
+        default: string;
     };
     mask: {
         type: PropType<boolean | "auto">;
@@ -569,7 +563,6 @@ declare const useIcon: _hoci_shared.HookComponent<{
     };
     size: {
         type: (StringConstructor | NumberConstructor)[];
-        default: string;
     };
     width: {
         type: (StringConstructor | NumberConstructor)[];
@@ -579,6 +572,7 @@ declare const useIcon: _hoci_shared.HookComponent<{
     };
     color: {
         type: StringConstructor;
+        default: string;
     };
     mask: {
         type: PropType<boolean | "auto">;
@@ -586,7 +580,7 @@ declare const useIcon: _hoci_shared.HookComponent<{
     };
 }>, {
     mask: boolean | "auto";
-    size: string | number;
+    color: string;
 }>;
 
 export { AFFIX_TARGET_KEY, type AffixProps, type HiIconProps, type HiItemSlotsData, type HiSelectionContext, type HiSelectionSlotData, type HiSwitchProps, type InitFunction, type Option, type SelectionProps, affixEmits, affixProps, iconProps, itemProps, provideAffixTarget, selectionEmits, selectionProps, switchEmits, switchProps, useAffix, useIcon, useSelectionContext, useSelectionItem, useSelectionList, useSwitch };

package/dist/index.d.mts

@@ -27,7 +27,7 @@ declare const affixProps: {
      * @en Scroll container, default is `window`
      */
     target: {
-        type: PropType<string | Window | HTMLElement>;
+        type: PropType<string | HTMLElement>;
     };
     /**
    * @zh z-index 值
@@ -40,10 +40,11 @@ declare const affixProps: {
 };
 type AffixProps = typeof affixProps;
 declare const affixEmits: ("scroll" | "change")[];
-declare const AFFIX_TARGET_KEY: InjectionKey<MaybeRefOrGetter<HTMLElement | Window | Element | null | undefined>>;
+declare const AFFIX_TARGET_KEY: InjectionKey<MaybeRefOrGetter<Element | null | undefined>>;
 declare const useAffix: _hoci_shared.HookComponent<{
-    classNames: vue.ComputedRef<string>;
+    className: vue.ComputedRef<string>;
     wrapperRef: Ref<HTMLElement | null>;
+    containerRef: vue.ComputedRef<Element | (Window & typeof globalThis) | null>;
     isFixed: Ref<boolean>;
     placeholderStyle: Ref<CSSProperties>;
     fixedStyle: Ref<CSSProperties>;
@@ -70,7 +71,7 @@ declare const useAffix: _hoci_shared.HookComponent<{
      * @en Scroll container, default is `window`
      */
     target: {
-        type: PropType<string | Window | HTMLElement>;
+        type: PropType<string | HTMLElement>;
     };
     /**
    * @zh z-index 值
@@ -102,7 +103,7 @@ declare const useAffix: _hoci_shared.HookComponent<{
      * @en Scroll container, default is `window`
      */
     target: {
-        type: PropType<string | Window | HTMLElement>;
+        type: PropType<string | HTMLElement>;
     };
     /**
    * @zh z-index 值
@@ -118,7 +119,7 @@ declare const useAffix: _hoci_shared.HookComponent<{
     offsetType: "top" | "bottom";
     zIndex: number;
 }>;
-declare function provideAffixTarget(target: MaybeRefOrGetter<HTMLElement | Element | null | undefined>): void;
+declare function provideAffixTarget(target: MaybeRefOrGetter<Element | null | undefined>): void;
 
 type InitFunction = (option: Option) => () => void;
 interface Option {
@@ -188,7 +189,6 @@ declare const selectionProps: {
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
-        default: () => "click";
     };
 };
 type SelectionProps = typeof selectionProps;
@@ -254,7 +254,6 @@ declare const useSelectionList: _hoci_shared.HookComponent<{
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
-        default: () => "click";
     };
 }, vue.ExtractPropTypes<{
     modelValue: {
@@ -305,7 +304,6 @@ declare const useSelectionList: _hoci_shared.HookComponent<{
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
-        default: () => "click";
     };
 }>, {
     multiple: number | boolean;
@@ -316,7 +314,6 @@ declare const useSelectionList: _hoci_shared.HookComponent<{
     unactiveClass: string | string[] | Record<string, boolean>;
     clearable: boolean;
     defaultValue: any;
-    activateEvent: ActivateEvent;
 }>;
 interface HiSelectionSlotData extends Record<string, unknown> {
     isActive: (value: any) => boolean;
@@ -429,7 +426,6 @@ declare const switchProps: {
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
-        default: string;
     };
     disabled: {
         type: BooleanConstructor;
@@ -447,6 +443,7 @@ declare const useSwitch: _hoci_shared.HookComponent<{
     modelValue: vue.Ref<boolean>;
     className: vue.ComputedRef<string>;
     isDisabled: vue.ComputedRef<boolean>;
+    activateEvent: vue.ComputedRef<ActivateEvent>;
 }, ("change" | "update:modelValue")[], {
     modelValue: {
         type: BooleanConstructor;
@@ -466,7 +463,6 @@ declare const useSwitch: _hoci_shared.HookComponent<{
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
-        default: string;
     };
     disabled: {
         type: BooleanConstructor;
@@ -495,7 +491,6 @@ declare const useSwitch: _hoci_shared.HookComponent<{
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
-        default: string;
     };
     disabled: {
         type: BooleanConstructor;
@@ -511,7 +506,6 @@ declare const useSwitch: _hoci_shared.HookComponent<{
     activeClass: string | string[] | Record<string, boolean>;
     disabledClass: string | string[] | Record<string, boolean>;
     unactiveClass: string | string[] | Record<string, boolean>;
-    activateEvent: ActivateEvent;
 }>;
 
 declare const iconProps: {
@@ -521,7 +515,6 @@ declare const iconProps: {
     };
     size: {
         type: (StringConstructor | NumberConstructor)[];
-        default: string;
     };
     width: {
         type: (StringConstructor | NumberConstructor)[];
@@ -531,6 +524,7 @@ declare const iconProps: {
     };
     color: {
         type: StringConstructor;
+        default: string;
     };
     mask: {
         type: PropType<boolean | "auto">;
@@ -547,7 +541,6 @@ declare const useIcon: _hoci_shared.HookComponent<{
     };
     size: {
         type: (StringConstructor | NumberConstructor)[];
-        default: string;
     };
     width: {
         type: (StringConstructor | NumberConstructor)[];
@@ -557,6 +550,7 @@ declare const useIcon: _hoci_shared.HookComponent<{
     };
     color: {
         type: StringConstructor;
+        default: string;
     };
     mask: {
         type: PropType<boolean | "auto">;
@@ -569,7 +563,6 @@ declare const useIcon: _hoci_shared.HookComponent<{
     };
     size: {
         type: (StringConstructor | NumberConstructor)[];
-        default: string;
     };
     width: {
         type: (StringConstructor | NumberConstructor)[];
@@ -579,6 +572,7 @@ declare const useIcon: _hoci_shared.HookComponent<{
     };
     color: {
         type: StringConstructor;
+        default: string;
     };
     mask: {
         type: PropType<boolean | "auto">;
@@ -586,7 +580,7 @@ declare const useIcon: _hoci_shared.HookComponent<{
     };
 }>, {
     mask: boolean | "auto";
-    size: string | number;
+    color: string;
 }>;
 
 export { AFFIX_TARGET_KEY, type AffixProps, type HiIconProps, type HiItemSlotsData, type HiSelectionContext, type HiSelectionSlotData, type HiSwitchProps, type InitFunction, type Option, type SelectionProps, affixEmits, affixProps, iconProps, itemProps, provideAffixTarget, selectionEmits, selectionProps, switchEmits, switchProps, useAffix, useIcon, useSelectionContext, useSelectionItem, useSelectionList, useSwitch };

package/dist/index.d.ts

@@ -27,7 +27,7 @@ declare const affixProps: {
      * @en Scroll container, default is `window`
      */
     target: {
-        type: PropType<string | Window | HTMLElement>;
+        type: PropType<string | HTMLElement>;
     };
     /**
    * @zh z-index 值
@@ -40,10 +40,11 @@ declare const affixProps: {
 };
 type AffixProps = typeof affixProps;
 declare const affixEmits: ("scroll" | "change")[];
-declare const AFFIX_TARGET_KEY: InjectionKey<MaybeRefOrGetter<HTMLElement | Window | Element | null | undefined>>;
+declare const AFFIX_TARGET_KEY: InjectionKey<MaybeRefOrGetter<Element | null | undefined>>;
 declare const useAffix: _hoci_shared.HookComponent<{
-    classNames: vue.ComputedRef<string>;
+    className: vue.ComputedRef<string>;
     wrapperRef: Ref<HTMLElement | null>;
+    containerRef: vue.ComputedRef<Element | (Window & typeof globalThis) | null>;
     isFixed: Ref<boolean>;
     placeholderStyle: Ref<CSSProperties>;
     fixedStyle: Ref<CSSProperties>;
@@ -70,7 +71,7 @@ declare const useAffix: _hoci_shared.HookComponent<{
      * @en Scroll container, default is `window`
      */
     target: {
-        type: PropType<string | Window | HTMLElement>;
+        type: PropType<string | HTMLElement>;
     };
     /**
    * @zh z-index 值
@@ -102,7 +103,7 @@ declare const useAffix: _hoci_shared.HookComponent<{
      * @en Scroll container, default is `window`
      */
     target: {
-        type: PropType<string | Window | HTMLElement>;
+        type: PropType<string | HTMLElement>;
     };
     /**
    * @zh z-index 值
@@ -118,7 +119,7 @@ declare const useAffix: _hoci_shared.HookComponent<{
     offsetType: "top" | "bottom";
     zIndex: number;
 }>;
-declare function provideAffixTarget(target: MaybeRefOrGetter<HTMLElement | Element | null | undefined>): void;
+declare function provideAffixTarget(target: MaybeRefOrGetter<Element | null | undefined>): void;
 
 type InitFunction = (option: Option) => () => void;
 interface Option {
@@ -188,7 +189,6 @@ declare const selectionProps: {
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
-        default: () => "click";
     };
 };
 type SelectionProps = typeof selectionProps;
@@ -254,7 +254,6 @@ declare const useSelectionList: _hoci_shared.HookComponent<{
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
-        default: () => "click";
     };
 }, vue.ExtractPropTypes<{
     modelValue: {
@@ -305,7 +304,6 @@ declare const useSelectionList: _hoci_shared.HookComponent<{
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
-        default: () => "click";
     };
 }>, {
     multiple: number | boolean;
@@ -316,7 +314,6 @@ declare const useSelectionList: _hoci_shared.HookComponent<{
     unactiveClass: string | string[] | Record<string, boolean>;
     clearable: boolean;
     defaultValue: any;
-    activateEvent: ActivateEvent;
 }>;
 interface HiSelectionSlotData extends Record<string, unknown> {
     isActive: (value: any) => boolean;
@@ -429,7 +426,6 @@ declare const switchProps: {
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
-        default: string;
     };
     disabled: {
         type: BooleanConstructor;
@@ -447,6 +443,7 @@ declare const useSwitch: _hoci_shared.HookComponent<{
     modelValue: vue.Ref<boolean>;
     className: vue.ComputedRef<string>;
     isDisabled: vue.ComputedRef<boolean>;
+    activateEvent: vue.ComputedRef<ActivateEvent>;
 }, ("change" | "update:modelValue")[], {
     modelValue: {
         type: BooleanConstructor;
@@ -466,7 +463,6 @@ declare const useSwitch: _hoci_shared.HookComponent<{
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
-        default: string;
     };
     disabled: {
         type: BooleanConstructor;
@@ -495,7 +491,6 @@ declare const useSwitch: _hoci_shared.HookComponent<{
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
-        default: string;
     };
     disabled: {
         type: BooleanConstructor;
@@ -511,7 +506,6 @@ declare const useSwitch: _hoci_shared.HookComponent<{
     activeClass: string | string[] | Record<string, boolean>;
     disabledClass: string | string[] | Record<string, boolean>;
     unactiveClass: string | string[] | Record<string, boolean>;
-    activateEvent: ActivateEvent;
 }>;
 
 declare const iconProps: {
@@ -521,7 +515,6 @@ declare const iconProps: {
     };
     size: {
         type: (StringConstructor | NumberConstructor)[];
-        default: string;
     };
     width: {
         type: (StringConstructor | NumberConstructor)[];
@@ -531,6 +524,7 @@ declare const iconProps: {
     };
     color: {
         type: StringConstructor;
+        default: string;
     };
     mask: {
         type: PropType<boolean | "auto">;
@@ -547,7 +541,6 @@ declare const useIcon: _hoci_shared.HookComponent<{
     };
     size: {
         type: (StringConstructor | NumberConstructor)[];
-        default: string;
     };
     width: {
         type: (StringConstructor | NumberConstructor)[];
@@ -557,6 +550,7 @@ declare const useIcon: _hoci_shared.HookComponent<{
     };
     color: {
         type: StringConstructor;
+        default: string;
     };
     mask: {
         type: PropType<boolean | "auto">;
@@ -569,7 +563,6 @@ declare const useIcon: _hoci_shared.HookComponent<{
     };
     size: {
         type: (StringConstructor | NumberConstructor)[];
-        default: string;
     };
     width: {
         type: (StringConstructor | NumberConstructor)[];
@@ -579,6 +572,7 @@ declare const useIcon: _hoci_shared.HookComponent<{
     };
     color: {
         type: StringConstructor;
+        default: string;
     };
     mask: {
         type: PropType<boolean | "auto">;
@@ -586,7 +580,7 @@ declare const useIcon: _hoci_shared.HookComponent<{
     };
 }>, {
     mask: boolean | "auto";
-    size: string | number;
+    color: string;
 }>;
 
 export { AFFIX_TARGET_KEY, type AffixProps, type HiIconProps, type HiItemSlotsData, type HiSelectionContext, type HiSelectionSlotData, type HiSwitchProps, type InitFunction, type Option, type SelectionProps, affixEmits, affixProps, iconProps, itemProps, provideAffixTarget, selectionEmits, selectionProps, switchEmits, switchProps, useAffix, useIcon, useSelectionContext, useSelectionItem, useSelectionList, useSwitch };

package/dist/index.mjs

@@ -1,45 +1,9 @@
-import { ref, inject, computed, watchPostEffect, nextTick, provide, reactive, watch, renderSlot } from 'vue';
+import { ref, inject, computed, watchPostEffect, provide, reactive, watch, renderSlot } from 'vue';
 import { useElementVisibility, useEventListener, syncRef, toReactive, isDefined, tryOnScopeDispose, useVModel } from '@vueuse/core';
-import { defineHookProps, defineHookEmits, defineHookComponent, useElement, throttleByRaf, isWindow, valuePropType, classPropType, labelPropType } from '@hoci/shared';
+import { defineHookProps, defineHookEmits, defineHookComponent, useElement, throttleByRaf, isWindow, valuePropType, classPropType, labelPropType, useSharedConfig } from '@hoci/shared';
 export * from '@hoci/shared';
-import { cls } from 'tslx';
+import { cls, unit_f } from 'tslx';
 
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
-    }
-  return a;
-};
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 const affixProps = defineHookProps(
   {
     fixedClass: {
@@ -87,29 +51,27 @@ const useAffix = defineHookComponent({
   props: affixProps,
   setup(props, { emit }) {
     const wrapperRef = ref(null);
-    const parentRef = inject(AFFIX_TARGET_KEY, window);
+    const parentRef = inject(AFFIX_TARGET_KEY, void 0);
     const targetRef = useElement(props.target, parentRef);
     const isFixed = ref(false);
     const placeholderStyle = ref({});
     const fixedStyle = ref({});
-    const classNames = computed(() => {
+    const className = computed(() => {
       return isFixed.value ? props.fixedClass : "";
     });
     const wrapperVisible = useElementVisibility(wrapperRef);
-    const container = computed(() => {
-      var _a;
-      if (!targetRef.value || !wrapperVisible.value) {
+    const containerRef = computed(() => {
+      if (!wrapperVisible.value) {
         return null;
       }
-      return (_a = targetRef.value) != null ? _a : window;
+      return targetRef.value ?? window;
     });
-    const updatePosition = throttleByRaf(() => __async(this, null, function* () {
-      if (!wrapperRef.value || !targetRef.value) {
+    const updatePosition = throttleByRaf(async () => {
+      if (!wrapperRef.value || !containerRef.value) {
         return;
       }
-      yield nextTick();
       const wrapperRect = wrapperRef.value.getBoundingClientRect();
-      const targetRect = getTargetRect(targetRef.value);
+      const targetRect = getTargetRect(containerRef.value);
       let newIsFixed = false;
       let newFixedStyles = {};
       const newPlaceholderStyles = {
@@ -136,17 +98,21 @@ const useAffix = defineHookComponent({
         emit("change", newIsFixed);
       }
       placeholderStyle.value = newPlaceholderStyles;
-      fixedStyle.value = __spreadValues$1(__spreadValues$1({}, newFixedStyles), newIsFixed ? newPlaceholderStyles : {});
-    }));
-    useEventListener(container, "scroll", () => {
+      fixedStyle.value = {
+        ...newFixedStyles,
+        ...newIsFixed ? newPlaceholderStyles : {}
+      };
+    });
+    useEventListener(containerRef, "scroll", () => {
       emit("scroll");
       updatePosition();
     });
-    useEventListener(container, "resize", updatePosition);
+    useEventListener(containerRef, "resize", updatePosition);
     watchPostEffect(updatePosition);
     return {
-      classNames,
+      className,
       wrapperRef,
+      containerRef,
       isFixed,
       placeholderStyle,
       fixedStyle,
@@ -206,8 +172,7 @@ const selectionProps = defineHookProps({
     default: () => null
   },
   activateEvent: {
-    type: String,
-    default: () => "click"
+    type: String
   }
 });
 const selectionEmits = defineHookEmits([
@@ -218,6 +183,7 @@ const selectionEmits = defineHookEmits([
 ]);
 const HiSelectionContextSymbol = Symbol("[hi-selection]context");
 function useSelectionContext() {
+  const sharedConfig = useSharedConfig();
   return inject(HiSelectionContextSymbol, {
     isActive: () => false,
     changeActive: () => {
@@ -226,7 +192,7 @@ function useSelectionContext() {
     unactiveClass: "unactive",
     disabledClass: "disabled",
     itemClass: "",
-    activateEvent: "click",
+    activateEvent: sharedConfig.activateEvent,
     label: null,
     multiple: false
   });
@@ -235,7 +201,6 @@ const useSelectionList = defineHookComponent({
   props: selectionProps,
   emits: selectionEmits,
   setup(props, { emit }) {
-    var _a;
     const options = reactive([]);
     function toArray(value) {
       if (!isDefined(value)) {
@@ -247,7 +212,7 @@ const useSelectionList = defineHookComponent({
       return [value];
     }
     const actives = reactive([
-      ...toArray((_a = props.modelValue) != null ? _a : props.defaultValue)
+      ...toArray(props.modelValue ?? props.defaultValue)
     ]);
     const currentValue = computed({
       get() {
@@ -259,8 +224,7 @@ const useSelectionList = defineHookComponent({
     });
     const modelValue = computed({
       get() {
-        var _a2;
-        return (_a2 = props.modelValue) != null ? _a2 : props.defaultValue;
+        return props.modelValue ?? props.defaultValue;
       },
       set(val) {
         emit("update:modelValue", val);
@@ -308,6 +272,7 @@ const useSelectionList = defineHookComponent({
       emit("load", option);
       return remove;
     };
+    const sharedConfig = useSharedConfig();
     provide(HiSelectionContextSymbol, toReactive({
       activeClass: computed(() => cls(props.activeClass)),
       unactiveClass: computed(() => cls(props.unactiveClass)),
@@ -317,7 +282,7 @@ const useSelectionList = defineHookComponent({
       multiple: computed(() => props.multiple),
       clearable: computed(() => props.clearable),
       defaultValue: computed(() => props.defaultValue),
-      activateEvent: computed(() => props.activateEvent),
+      activateEvent: computed(() => props.activateEvent ?? sharedConfig.activateEvent),
       active: currentValue,
       changeActive,
       isActive,
@@ -377,8 +342,7 @@ const useSelectionItem = defineHookComponent({
         active: context.isActive(props.value),
         activate
       }, () => {
-        var _a;
-        let label = (_a = props.label) != null ? _a : context.label;
+        let label = props.label ?? context.label;
         if (label && typeof label == "function") {
           label = label(props.value);
         }
@@ -415,7 +379,7 @@ const useSelectionItem = defineHookComponent({
       }
       return cls(array);
     });
-    const activateEvent = computed(() => context.activateEvent);
+    const activateEvent = computed(() => props.activateEvent ?? context.activateEvent);
     return {
       activate,
       render,
@@ -445,8 +409,7 @@ const switchProps = defineHookProps({
     default: "unchecked"
   },
   activateEvent: {
-    type: String,
-    default: "click"
+    type: String
   },
   disabled: {
     type: Boolean,
@@ -485,39 +448,25 @@ const useSwitch = defineHookComponent({
         isDisabled.value ? props.disabledClass : ""
       ]);
     });
+    const sharedConfig = useSharedConfig();
+    const activateEvent = computed(() => props.activateEvent ?? sharedConfig.activateEvent);
     return {
       toggle,
       modelValue,
       className,
-      isDisabled
+      isDisabled,
+      activateEvent
     };
   }
 });
 
-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 iconProps = defineHookProps({
   src: {
     type: String,
     required: true
   },
   size: {
-    type: [Number, String],
-    default: "1rem"
+    type: [Number, String]
   },
   width: {
     type: [Number, String]
@@ -526,7 +475,8 @@ const iconProps = defineHookProps({
     type: [Number, String]
   },
   color: {
-    type: String
+    type: String,
+    default: "currentColor"
   },
   mask: {
     type: [Boolean, String],
@@ -536,38 +486,47 @@ const iconProps = defineHookProps({
 const useIcon = defineHookComponent({
   props: iconProps,
   setup(props, context) {
-    const style = computed(() => {
-      var _a, _b, _c, _d, _e, _f;
-      const icon = props.src;
-      const propSize = (_a = props.size) != null ? _a : "16px";
-      const size = typeof propSize === "number" ? `${propSize}px` : propSize;
-      const propWidth = (_b = props.width) != null ? _b : size;
-      const width = typeof propWidth === "number" ? `${propWidth}px` : propWidth;
-      const propHeight = (_c = props.height) != null ? _c : size;
-      const height = typeof propHeight === "number" ? `${propHeight}px` : propHeight;
-      const color = (_d = props.color) != null ? _d : "currentColor";
-      const mask = props.mask === "auto" ? icon.endsWith(".svg") : props.mask;
+    const sharedConfig = useSharedConfig("icon");
+    const sizeStyle = computed(() => {
+      const s = props.size ?? sharedConfig.size;
+      const size = s ? unit_f(s, sharedConfig.sizeUnit) : void 0;
+      const w = props.width ?? size;
+      const h = props.height ?? size;
+      const width = w ? unit_f(w, sharedConfig.sizeUnit) : void 0;
+      const height = h ? unit_f(h, sharedConfig.sizeUnit) : void 0;
+      return {
+        width,
+        height
+      };
+    });
+    const dynamicStyle = computed(() => {
+      const mask = props.mask === "auto" ? props.src.endsWith(".svg") : props.mask;
       if (!mask) {
-        return __spreadValues({
-          "--icon-url": `url('${icon}')`,
+        return {
           "background-image": "var(--icon-url)",
-          "background-size": "100% 100%",
-          "height": height,
-          "width": width,
-          "display": "inline-block"
-        }, (_e = context.attrs.style) != null ? _e : {});
+          "background-size": "100% 100%"
+        };
       }
-      return __spreadValues({
-        "--icon-url": `url('${icon}')`,
+      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": color,
-        "display": "inline-block",
-        "width": width,
-        "height": height
-      }, (_f = context.attrs.style) != null ? _f : {});
+        "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

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@hoci/core",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "",
   "author": "chizuki",
   "license": "MIT",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "require": "./dist/index.cjs",
       "import": "./dist/index.mjs"
     },
@@ -22,11 +23,10 @@
     "vue": "^3.3.4"
   },
   "dependencies": {
-    "@vueuse/core": "^10.4.1",
-    "maybe-types": "^0.0.3",
-    "tslx": "^0.1.0",
-    "@hoci/core": "0.3.0",
-    "@hoci/shared": "0.3.0"
+    "@vueuse/core": "^10.5.0",
+    "maybe-types": "^0.1.0",
+    "tslx": "^0.1.1",
+    "@hoci/shared": "0.4.0"
   },
   "scripts": {
     "build": "unbuild",