@hoci/core 0.5.0 → 0.5.1

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 = () => {
     };
@@ -556,11 +554,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 +811,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 = () => {
     };
@@ -555,4 +553,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.1",
   "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.1"
   },
   "scripts": {
     "build": "unbuild",