@hoci/core 0.5.0 → 0.5.2

package/dist/index.cjs

@@ -298,7 +298,7 @@ const useSelectionList = shared.defineHookComponent({
     }));
     const renderItem = () => {
       const children = options.filter((e) => actives.includes(e.value)).map((e) => e.render());
-      return props.multiple ? children : children[0];
+      return props.multiple ? children : shared.getFirstChilld(children);
     };
     const slotData = {
       isActive,
@@ -362,12 +362,10 @@ const useSelectionItem = shared.defineHookComponent({
       return Array.isArray(label2) ? label2 : [label2];
     });
     function render() {
-      return vue.renderSlot(slots, "default", {
+      return slots.default?.({
         active: context.isActive(props.value),
         activate
-      }, () => {
-        return label.value;
-      });
+      }) ?? label.value.filter(Boolean);
     }
     let remove = () => {
     };
@@ -504,6 +502,7 @@ const iconProps = shared.defineHookProps({
     default: () => "auto"
   }
 });
+const isSvg = (src) => src.endsWith(".svg") || src.startsWith("data:image/svg+xml");
 const useIcon = shared.defineHookComponent({
   props: iconProps,
   setup(props, context) {
@@ -522,7 +521,7 @@ const useIcon = shared.defineHookComponent({
       };
     });
     const dynamicStyle = vue.computed(() => {
-      const mask = props.mask === "auto" ? props.src.endsWith(".svg") : props.mask;
+      const mask = props.mask === "auto" ? isSvg(props.src) : props.mask;
       if (!mask) {
         return {
           "background-image": "var(--icon-url)",
@@ -556,11 +555,256 @@ const useIcon = shared.defineHookComponent({
   }
 });
 
+const configProviderProps = shared.defineHookProps({
+  icon: {
+    type: Object
+  },
+  activateEvent: {
+    type: String
+  }
+});
+
+const popoverProps = shared.defineHookProps({
+  popupClass: {
+    type: String
+  },
+  placement: {
+    type: String,
+    default: () => "auto"
+  },
+  triggerEvent: {
+    type: String,
+    default: () => "hover"
+  },
+  offset: {
+    type: Number,
+    default: () => 8
+  },
+  lazy: {
+    type: Boolean,
+    default: () => false
+  },
+  visible: {
+    type: Boolean,
+    default: () => false
+  },
+  disabled: {
+    type: Boolean,
+    default: () => false
+  },
+  teleport: {
+    type: [String, Object, Boolean],
+    default: () => true
+  }
+});
+const popoverEmits = shared.defineHookEmits(["update:visible", "change"]);
+const usePopover = shared.defineHookComponent({
+  props: popoverProps,
+  emits: popoverEmits,
+  setup(props, context) {
+    const visible = core.useVModel(props, "visible", context.emit, {
+      passive: true
+    });
+    const triggerRef = vue.ref();
+    const popupRef = vue.ref();
+    const validate = (event) => {
+      const events2 = Array.isArray(event) ? event : [event];
+      return !props.disabled && events2.includes(props.triggerEvent);
+    };
+    let timer;
+    const toggle = (_value) => {
+      const value = _value ?? !visible.value;
+      visible.value = value;
+      context.emit("change", value);
+    };
+    function onMouseover() {
+      if (!validate("hover")) {
+        return;
+      }
+      timer = setTimeout(
+        () => {
+          toggle(true);
+        },
+        props.lazy ? 800 : 100
+      );
+    }
+    function onMouseout() {
+      if (!validate("hover")) {
+        return;
+      }
+      clearTimeout(timer);
+      toggle(false);
+    }
+    const onClick = (e) => {
+      if (!validate("click")) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      toggle();
+    };
+    core.onClickOutside(triggerRef, () => {
+      if (!validate(["click", "contextmenu", "touch", "dblclick", "mousedown"])) {
+        return;
+      }
+      toggle(false);
+    }, {
+      ignore: [popupRef]
+    });
+    const onContextmenu = (e) => {
+      if (!validate("contextmenu")) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      toggle();
+    };
+    const onFocusin = () => {
+      if (!validate("focus")) {
+        return;
+      }
+      toggle(true);
+    };
+    const onFocusout = () => {
+      if (!validate("focus")) {
+        return;
+      }
+      toggle(false);
+    };
+    const onTouchend = () => {
+      if (!validate("touch")) {
+        return;
+      }
+      toggle(true);
+    };
+    const onDblclick = () => {
+      if (!validate("dblclick")) {
+        return;
+      }
+      toggle(true);
+    };
+    const onMousedown = () => {
+      if (!validate("mousedown")) {
+        return;
+      }
+      toggle(true);
+    };
+    const onMouseup = () => {
+      if (!validate("mousedown")) {
+        return;
+      }
+      toggle(false);
+    };
+    const events = {
+      onMouseover,
+      onMouseout,
+      onMousedown,
+      onMouseup,
+      onContextmenu,
+      onClick,
+      onDblclick,
+      onFocusin,
+      onFocusout,
+      onTouchend
+    };
+    const dropdownPosition = vue.reactive({ x: 0, y: 0 });
+    const popupClass = vue.computed(() => {
+      return props.popupClass;
+    });
+    function resize() {
+      const trigger = triggerRef.value;
+      const popup = popupRef.value;
+      if (!!trigger && !!popup && visible.value) {
+        const { width, height, left, top } = trigger.getBoundingClientRect();
+        const { clientWidth: pWidth, clientHeight: pHeight } = popup;
+        let x = 0;
+        let y = 0;
+        const offset = props.offset;
+        switch (props.placement) {
+          case "auto":
+          case "bottom":
+            x = left - (pWidth - width) / 2;
+            y = top + height + offset;
+            break;
+          case "bottom-left":
+            x = left;
+            y = top + height + offset;
+            break;
+          case "bottom-right":
+            x = left + width - pWidth;
+            y = top + height + offset;
+            break;
+          case "top":
+            x = left - (pWidth - width) / 2;
+            y = top - pHeight - offset;
+            break;
+          case "top-left":
+            x = left;
+            y = top - pHeight - offset;
+            break;
+          case "top-right":
+            x = left + width - pWidth;
+            y = top - pHeight - offset;
+            break;
+          case "left":
+            x = left - pWidth - offset;
+            y = top - (pHeight - height) / 2;
+            break;
+          case "left-top":
+            x = left - pWidth - offset;
+            y = top;
+            break;
+          case "left-bottom":
+            x = left - pWidth - offset;
+            y = top + height - pHeight;
+            break;
+          case "right":
+            x = left + width + offset;
+            y = top - (pHeight - height) / 2;
+            break;
+          case "right-top":
+            x = left + width + offset;
+            y = top;
+            break;
+          case "right-bottom":
+            x = left + width + offset;
+            y = top + height - pHeight;
+            break;
+        }
+        dropdownPosition.x = x;
+        dropdownPosition.y = y;
+      }
+    }
+    vue.watch(visible, () => {
+      vue.nextTick(resize);
+    });
+    const popupStyle = vue.computed(() => {
+      return {
+        left: tslx.px(dropdownPosition.x),
+        top: tslx.px(dropdownPosition.y),
+        visibility: visible.value ? "visible" : "hidden",
+        position: "fixed"
+      };
+    });
+    return {
+      events,
+      dropdownPosition,
+      triggerRef,
+      popupRef,
+      popupClass,
+      popupStyle
+    };
+  }
+});
+
 exports.AFFIX_TARGET_KEY = AFFIX_TARGET_KEY;
 exports.affixEmits = affixEmits;
 exports.affixProps = affixProps;
+exports.configProviderProps = configProviderProps;
 exports.iconProps = iconProps;
 exports.itemProps = itemProps;
+exports.popoverEmits = popoverEmits;
+exports.popoverProps = popoverProps;
 exports.provideAffixTarget = provideAffixTarget;
 exports.selectionEmits = selectionEmits;
 exports.selectionProps = selectionProps;
@@ -568,6 +812,7 @@ exports.switchEmits = switchEmits;
 exports.switchProps = switchProps;
 exports.useAffix = useAffix;
 exports.useIcon = useIcon;
+exports.usePopover = usePopover;
 exports.useSelectionContext = useSelectionContext;
 exports.useSelectionItem = useSelectionItem;
 exports.useSelectionList = useSelectionList;

package/dist/index.d.cts

@@ -358,9 +358,7 @@ declare const itemProps: {
 };
 declare const useSelectionItem: _hoci_shared.HookComponent<{
     activate: () => void;
-    render: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-        [key: string]: any;
-    }>;
+    render: () => ElementLike;
     isActive: vue.ComputedRef<boolean>;
     isDisabled: vue.ComputedRef<boolean>;
     className: vue.ComputedRef<string>;
@@ -596,4 +594,152 @@ declare const useIcon: _hoci_shared.HookComponent<{
     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 };
+declare const configProviderProps: {
+    icon: {
+        type: PropType<Partial<{
+            size: number | undefined;
+            sizeUnit: string | undefined;
+        }>>;
+    };
+    activateEvent: {
+        type: PropType<Partial<_hoci_shared.ActivateEvent>>;
+    };
+};
+
+type Placement = "bottom" | "top" | "left" | "right" | "auto" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom" | "right-top" | "right-bottom";
+type TriggerEvent = "click" | "mousedown" | "dblclick" | "hover" | "contextmenu" | "focus" | "touch";
+declare const popoverProps: {
+    popupClass: {
+        type: StringConstructor;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: () => "auto";
+    };
+    triggerEvent: {
+        type: PropType<TriggerEvent>;
+        default: () => "hover";
+    };
+    offset: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    lazy: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    teleport: {
+        type: PropType<string | boolean | HTMLElement>;
+        default: () => true;
+    };
+};
+declare const popoverEmits: ("change" | "update:visible")[];
+declare const usePopover: _hoci_shared.HookComponent<{
+    events: {
+        onMouseover: () => void;
+        onMouseout: () => void;
+        onMousedown: () => void;
+        onMouseup: () => void;
+        onContextmenu: (e: MouseEvent) => void;
+        onClick: (e: MouseEvent) => void;
+        onDblclick: () => void;
+        onFocusin: () => void;
+        onFocusout: () => void;
+        onTouchend: () => void;
+    };
+    dropdownPosition: {
+        x: number;
+        y: number;
+    };
+    triggerRef: vue.Ref<HTMLElement | undefined>;
+    popupRef: vue.Ref<HTMLElement | undefined>;
+    popupClass: vue.ComputedRef<string | undefined>;
+    popupStyle: vue.ComputedRef<{
+        left: string;
+        top: string;
+        visibility: string;
+        position: string;
+    }>;
+}, ("change" | "update:visible")[], {
+    popupClass: {
+        type: StringConstructor;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: () => "auto";
+    };
+    triggerEvent: {
+        type: PropType<TriggerEvent>;
+        default: () => "hover";
+    };
+    offset: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    lazy: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    teleport: {
+        type: PropType<string | boolean | HTMLElement>;
+        default: () => true;
+    };
+}, vue.ExtractPropTypes<{
+    popupClass: {
+        type: StringConstructor;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: () => "auto";
+    };
+    triggerEvent: {
+        type: PropType<TriggerEvent>;
+        default: () => "hover";
+    };
+    offset: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    lazy: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    teleport: {
+        type: PropType<string | boolean | HTMLElement>;
+        default: () => true;
+    };
+}>, {
+    offset: number;
+    visible: boolean;
+    disabled: boolean;
+    placement: Placement;
+    triggerEvent: TriggerEvent;
+    lazy: boolean;
+    teleport: string | boolean | HTMLElement;
+}>;
+
+export { AFFIX_TARGET_KEY, type AffixProps, type HiIconProps, type HiItemSlotsData, type HiSelectionContext, type HiSelectionSlotData, type HiSwitchProps, type InitFunction, type Option, type Placement, type SelectionProps, type TriggerEvent, affixEmits, affixProps, configProviderProps, iconProps, itemProps, popoverEmits, popoverProps, provideAffixTarget, selectionEmits, selectionProps, switchEmits, switchProps, useAffix, useIcon, usePopover, useSelectionContext, useSelectionItem, useSelectionList, useSwitch };

package/dist/index.d.mts

@@ -358,9 +358,7 @@ declare const itemProps: {
 };
 declare const useSelectionItem: _hoci_shared.HookComponent<{
     activate: () => void;
-    render: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-        [key: string]: any;
-    }>;
+    render: () => ElementLike;
     isActive: vue.ComputedRef<boolean>;
     isDisabled: vue.ComputedRef<boolean>;
     className: vue.ComputedRef<string>;
@@ -596,4 +594,152 @@ declare const useIcon: _hoci_shared.HookComponent<{
     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 };
+declare const configProviderProps: {
+    icon: {
+        type: PropType<Partial<{
+            size: number | undefined;
+            sizeUnit: string | undefined;
+        }>>;
+    };
+    activateEvent: {
+        type: PropType<Partial<_hoci_shared.ActivateEvent>>;
+    };
+};
+
+type Placement = "bottom" | "top" | "left" | "right" | "auto" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom" | "right-top" | "right-bottom";
+type TriggerEvent = "click" | "mousedown" | "dblclick" | "hover" | "contextmenu" | "focus" | "touch";
+declare const popoverProps: {
+    popupClass: {
+        type: StringConstructor;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: () => "auto";
+    };
+    triggerEvent: {
+        type: PropType<TriggerEvent>;
+        default: () => "hover";
+    };
+    offset: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    lazy: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    teleport: {
+        type: PropType<string | boolean | HTMLElement>;
+        default: () => true;
+    };
+};
+declare const popoverEmits: ("change" | "update:visible")[];
+declare const usePopover: _hoci_shared.HookComponent<{
+    events: {
+        onMouseover: () => void;
+        onMouseout: () => void;
+        onMousedown: () => void;
+        onMouseup: () => void;
+        onContextmenu: (e: MouseEvent) => void;
+        onClick: (e: MouseEvent) => void;
+        onDblclick: () => void;
+        onFocusin: () => void;
+        onFocusout: () => void;
+        onTouchend: () => void;
+    };
+    dropdownPosition: {
+        x: number;
+        y: number;
+    };
+    triggerRef: vue.Ref<HTMLElement | undefined>;
+    popupRef: vue.Ref<HTMLElement | undefined>;
+    popupClass: vue.ComputedRef<string | undefined>;
+    popupStyle: vue.ComputedRef<{
+        left: string;
+        top: string;
+        visibility: string;
+        position: string;
+    }>;
+}, ("change" | "update:visible")[], {
+    popupClass: {
+        type: StringConstructor;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: () => "auto";
+    };
+    triggerEvent: {
+        type: PropType<TriggerEvent>;
+        default: () => "hover";
+    };
+    offset: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    lazy: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    teleport: {
+        type: PropType<string | boolean | HTMLElement>;
+        default: () => true;
+    };
+}, vue.ExtractPropTypes<{
+    popupClass: {
+        type: StringConstructor;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: () => "auto";
+    };
+    triggerEvent: {
+        type: PropType<TriggerEvent>;
+        default: () => "hover";
+    };
+    offset: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    lazy: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    teleport: {
+        type: PropType<string | boolean | HTMLElement>;
+        default: () => true;
+    };
+}>, {
+    offset: number;
+    visible: boolean;
+    disabled: boolean;
+    placement: Placement;
+    triggerEvent: TriggerEvent;
+    lazy: boolean;
+    teleport: string | boolean | HTMLElement;
+}>;
+
+export { AFFIX_TARGET_KEY, type AffixProps, type HiIconProps, type HiItemSlotsData, type HiSelectionContext, type HiSelectionSlotData, type HiSwitchProps, type InitFunction, type Option, type Placement, type SelectionProps, type TriggerEvent, affixEmits, affixProps, configProviderProps, iconProps, itemProps, popoverEmits, popoverProps, provideAffixTarget, selectionEmits, selectionProps, switchEmits, switchProps, useAffix, useIcon, usePopover, useSelectionContext, useSelectionItem, useSelectionList, useSwitch };

package/dist/index.d.ts

@@ -358,9 +358,7 @@ declare const itemProps: {
 };
 declare const useSelectionItem: _hoci_shared.HookComponent<{
     activate: () => void;
-    render: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-        [key: string]: any;
-    }>;
+    render: () => ElementLike;
     isActive: vue.ComputedRef<boolean>;
     isDisabled: vue.ComputedRef<boolean>;
     className: vue.ComputedRef<string>;
@@ -596,4 +594,152 @@ declare const useIcon: _hoci_shared.HookComponent<{
     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 };
+declare const configProviderProps: {
+    icon: {
+        type: PropType<Partial<{
+            size: number | undefined;
+            sizeUnit: string | undefined;
+        }>>;
+    };
+    activateEvent: {
+        type: PropType<Partial<_hoci_shared.ActivateEvent>>;
+    };
+};
+
+type Placement = "bottom" | "top" | "left" | "right" | "auto" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom" | "right-top" | "right-bottom";
+type TriggerEvent = "click" | "mousedown" | "dblclick" | "hover" | "contextmenu" | "focus" | "touch";
+declare const popoverProps: {
+    popupClass: {
+        type: StringConstructor;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: () => "auto";
+    };
+    triggerEvent: {
+        type: PropType<TriggerEvent>;
+        default: () => "hover";
+    };
+    offset: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    lazy: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    teleport: {
+        type: PropType<string | boolean | HTMLElement>;
+        default: () => true;
+    };
+};
+declare const popoverEmits: ("change" | "update:visible")[];
+declare const usePopover: _hoci_shared.HookComponent<{
+    events: {
+        onMouseover: () => void;
+        onMouseout: () => void;
+        onMousedown: () => void;
+        onMouseup: () => void;
+        onContextmenu: (e: MouseEvent) => void;
+        onClick: (e: MouseEvent) => void;
+        onDblclick: () => void;
+        onFocusin: () => void;
+        onFocusout: () => void;
+        onTouchend: () => void;
+    };
+    dropdownPosition: {
+        x: number;
+        y: number;
+    };
+    triggerRef: vue.Ref<HTMLElement | undefined>;
+    popupRef: vue.Ref<HTMLElement | undefined>;
+    popupClass: vue.ComputedRef<string | undefined>;
+    popupStyle: vue.ComputedRef<{
+        left: string;
+        top: string;
+        visibility: string;
+        position: string;
+    }>;
+}, ("change" | "update:visible")[], {
+    popupClass: {
+        type: StringConstructor;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: () => "auto";
+    };
+    triggerEvent: {
+        type: PropType<TriggerEvent>;
+        default: () => "hover";
+    };
+    offset: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    lazy: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    teleport: {
+        type: PropType<string | boolean | HTMLElement>;
+        default: () => true;
+    };
+}, vue.ExtractPropTypes<{
+    popupClass: {
+        type: StringConstructor;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: () => "auto";
+    };
+    triggerEvent: {
+        type: PropType<TriggerEvent>;
+        default: () => "hover";
+    };
+    offset: {
+        type: NumberConstructor;
+        default: () => 8;
+    };
+    lazy: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: () => false;
+    };
+    teleport: {
+        type: PropType<string | boolean | HTMLElement>;
+        default: () => true;
+    };
+}>, {
+    offset: number;
+    visible: boolean;
+    disabled: boolean;
+    placement: Placement;
+    triggerEvent: TriggerEvent;
+    lazy: boolean;
+    teleport: string | boolean | HTMLElement;
+}>;
+
+export { AFFIX_TARGET_KEY, type AffixProps, type HiIconProps, type HiItemSlotsData, type HiSelectionContext, type HiSelectionSlotData, type HiSwitchProps, type InitFunction, type Option, type Placement, type SelectionProps, type TriggerEvent, affixEmits, affixProps, configProviderProps, iconProps, itemProps, popoverEmits, popoverProps, provideAffixTarget, selectionEmits, selectionProps, switchEmits, switchProps, useAffix, useIcon, usePopover, useSelectionContext, useSelectionItem, useSelectionList, useSwitch };

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { ref, inject, computed, watchPostEffect, provide, reactive, renderSlot, watch } from 'vue';
-import { toReactive, useElementBounding, useElementVisibility, useEventListener, syncRef, isDefined, tryOnScopeDispose, useVModel } from '@vueuse/core';
-import { defineHookProps, defineHookEmits, defineHookComponent, useElement, throttleByRaf, isWindow, valuePropType, classPropType, labelPropType, useSharedConfig } from '@hoci/shared';
+import { ref, inject, computed, watchPostEffect, provide, reactive, renderSlot, watch, nextTick } from 'vue';
+import { toReactive, useElementBounding, useElementVisibility, useEventListener, syncRef, isDefined, tryOnScopeDispose, useVModel, onClickOutside } from '@vueuse/core';
+import { defineHookProps, defineHookEmits, defineHookComponent, useElement, throttleByRaf, isWindow, valuePropType, classPropType, labelPropType, useSharedConfig, getFirstChilld } from '@hoci/shared';
 export * from '@hoci/shared';
 import { px, cls, createUnitFormat } from 'tslx';
 
@@ -297,7 +297,7 @@ const useSelectionList = defineHookComponent({
     }));
     const renderItem = () => {
       const children = options.filter((e) => actives.includes(e.value)).map((e) => e.render());
-      return props.multiple ? children : children[0];
+      return props.multiple ? children : getFirstChilld(children);
     };
     const slotData = {
       isActive,
@@ -361,12 +361,10 @@ const useSelectionItem = defineHookComponent({
       return Array.isArray(label2) ? label2 : [label2];
     });
     function render() {
-      return renderSlot(slots, "default", {
+      return slots.default?.({
         active: context.isActive(props.value),
         activate
-      }, () => {
-        return label.value;
-      });
+      }) ?? label.value.filter(Boolean);
     }
     let remove = () => {
     };
@@ -503,6 +501,7 @@ const iconProps = defineHookProps({
     default: () => "auto"
   }
 });
+const isSvg = (src) => src.endsWith(".svg") || src.startsWith("data:image/svg+xml");
 const useIcon = defineHookComponent({
   props: iconProps,
   setup(props, context) {
@@ -521,7 +520,7 @@ const useIcon = defineHookComponent({
       };
     });
     const dynamicStyle = computed(() => {
-      const mask = props.mask === "auto" ? props.src.endsWith(".svg") : props.mask;
+      const mask = props.mask === "auto" ? isSvg(props.src) : props.mask;
       if (!mask) {
         return {
           "background-image": "var(--icon-url)",
@@ -555,4 +554,246 @@ const useIcon = defineHookComponent({
   }
 });
 
-export { AFFIX_TARGET_KEY, affixEmits, affixProps, iconProps, itemProps, provideAffixTarget, selectionEmits, selectionProps, switchEmits, switchProps, useAffix, useIcon, useSelectionContext, useSelectionItem, useSelectionList, useSwitch };
+const configProviderProps = defineHookProps({
+  icon: {
+    type: Object
+  },
+  activateEvent: {
+    type: String
+  }
+});
+
+const popoverProps = defineHookProps({
+  popupClass: {
+    type: String
+  },
+  placement: {
+    type: String,
+    default: () => "auto"
+  },
+  triggerEvent: {
+    type: String,
+    default: () => "hover"
+  },
+  offset: {
+    type: Number,
+    default: () => 8
+  },
+  lazy: {
+    type: Boolean,
+    default: () => false
+  },
+  visible: {
+    type: Boolean,
+    default: () => false
+  },
+  disabled: {
+    type: Boolean,
+    default: () => false
+  },
+  teleport: {
+    type: [String, Object, Boolean],
+    default: () => true
+  }
+});
+const popoverEmits = defineHookEmits(["update:visible", "change"]);
+const usePopover = defineHookComponent({
+  props: popoverProps,
+  emits: popoverEmits,
+  setup(props, context) {
+    const visible = useVModel(props, "visible", context.emit, {
+      passive: true
+    });
+    const triggerRef = ref();
+    const popupRef = ref();
+    const validate = (event) => {
+      const events2 = Array.isArray(event) ? event : [event];
+      return !props.disabled && events2.includes(props.triggerEvent);
+    };
+    let timer;
+    const toggle = (_value) => {
+      const value = _value ?? !visible.value;
+      visible.value = value;
+      context.emit("change", value);
+    };
+    function onMouseover() {
+      if (!validate("hover")) {
+        return;
+      }
+      timer = setTimeout(
+        () => {
+          toggle(true);
+        },
+        props.lazy ? 800 : 100
+      );
+    }
+    function onMouseout() {
+      if (!validate("hover")) {
+        return;
+      }
+      clearTimeout(timer);
+      toggle(false);
+    }
+    const onClick = (e) => {
+      if (!validate("click")) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      toggle();
+    };
+    onClickOutside(triggerRef, () => {
+      if (!validate(["click", "contextmenu", "touch", "dblclick", "mousedown"])) {
+        return;
+      }
+      toggle(false);
+    }, {
+      ignore: [popupRef]
+    });
+    const onContextmenu = (e) => {
+      if (!validate("contextmenu")) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      toggle();
+    };
+    const onFocusin = () => {
+      if (!validate("focus")) {
+        return;
+      }
+      toggle(true);
+    };
+    const onFocusout = () => {
+      if (!validate("focus")) {
+        return;
+      }
+      toggle(false);
+    };
+    const onTouchend = () => {
+      if (!validate("touch")) {
+        return;
+      }
+      toggle(true);
+    };
+    const onDblclick = () => {
+      if (!validate("dblclick")) {
+        return;
+      }
+      toggle(true);
+    };
+    const onMousedown = () => {
+      if (!validate("mousedown")) {
+        return;
+      }
+      toggle(true);
+    };
+    const onMouseup = () => {
+      if (!validate("mousedown")) {
+        return;
+      }
+      toggle(false);
+    };
+    const events = {
+      onMouseover,
+      onMouseout,
+      onMousedown,
+      onMouseup,
+      onContextmenu,
+      onClick,
+      onDblclick,
+      onFocusin,
+      onFocusout,
+      onTouchend
+    };
+    const dropdownPosition = reactive({ x: 0, y: 0 });
+    const popupClass = computed(() => {
+      return props.popupClass;
+    });
+    function resize() {
+      const trigger = triggerRef.value;
+      const popup = popupRef.value;
+      if (!!trigger && !!popup && visible.value) {
+        const { width, height, left, top } = trigger.getBoundingClientRect();
+        const { clientWidth: pWidth, clientHeight: pHeight } = popup;
+        let x = 0;
+        let y = 0;
+        const offset = props.offset;
+        switch (props.placement) {
+          case "auto":
+          case "bottom":
+            x = left - (pWidth - width) / 2;
+            y = top + height + offset;
+            break;
+          case "bottom-left":
+            x = left;
+            y = top + height + offset;
+            break;
+          case "bottom-right":
+            x = left + width - pWidth;
+            y = top + height + offset;
+            break;
+          case "top":
+            x = left - (pWidth - width) / 2;
+            y = top - pHeight - offset;
+            break;
+          case "top-left":
+            x = left;
+            y = top - pHeight - offset;
+            break;
+          case "top-right":
+            x = left + width - pWidth;
+            y = top - pHeight - offset;
+            break;
+          case "left":
+            x = left - pWidth - offset;
+            y = top - (pHeight - height) / 2;
+            break;
+          case "left-top":
+            x = left - pWidth - offset;
+            y = top;
+            break;
+          case "left-bottom":
+            x = left - pWidth - offset;
+            y = top + height - pHeight;
+            break;
+          case "right":
+            x = left + width + offset;
+            y = top - (pHeight - height) / 2;
+            break;
+          case "right-top":
+            x = left + width + offset;
+            y = top;
+            break;
+          case "right-bottom":
+            x = left + width + offset;
+            y = top + height - pHeight;
+            break;
+        }
+        dropdownPosition.x = x;
+        dropdownPosition.y = y;
+      }
+    }
+    watch(visible, () => {
+      nextTick(resize);
+    });
+    const popupStyle = computed(() => {
+      return {
+        left: px(dropdownPosition.x),
+        top: px(dropdownPosition.y),
+        visibility: visible.value ? "visible" : "hidden",
+        position: "fixed"
+      };
+    });
+    return {
+      events,
+      dropdownPosition,
+      triggerRef,
+      popupRef,
+      popupClass,
+      popupStyle
+    };
+  }
+});
+
+export { AFFIX_TARGET_KEY, affixEmits, affixProps, configProviderProps, iconProps, itemProps, popoverEmits, popoverProps, provideAffixTarget, selectionEmits, selectionProps, switchEmits, switchProps, useAffix, useIcon, usePopover, useSelectionContext, useSelectionItem, useSelectionList, useSwitch };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoci/core",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "",
   "author": "chizuki",
   "license": "MIT",
@@ -19,14 +19,13 @@
     "dist/"
   ],
   "peerDependencies": {
-    "@vueuse/core": ">=10",
-    "vue": "^3.3.4"
+    "vue": "^3.0.0-0"
   },
   "dependencies": {
-    "@vueuse/core": "^10.5.0",
+    "@vueuse/core": ">=10.5.0",
     "maybe-types": "^0.1.0",
     "tslx": "^0.1.1",
-    "@hoci/shared": "0.5.0"
+    "@hoci/shared": "0.5.2"
   },
   "scripts": {
     "build": "unbuild",