@pixelium/web-vue 0.0.1-beta → 0.0.2

package/es/message-box/message-box.js

@@ -1,9 +1,9 @@
 import './css.js'
-import { defineComponent, useModel, computed, ref, createElementBlock, openBlock, normalizeStyle, createElementVNode, normalizeClass, unref, Fragment, renderList, createBlock } from "vue";
-import { O as On, N } from "../aside/index.js";
+import { defineComponent, useModel, computed, shallowRef, createElementBlock, openBlock, normalizeStyle, unref, createElementVNode, normalizeClass, Fragment, renderList, createBlock } from "vue";
+import { N } from "../aside/index.js";
 import { _ as _sfc_main$1 } from "../message/index.js";
-import { M as MESSAGE_Z_INDEX } from "../share/const/index.js";
 import { n as nanoid } from "./index.js";
+import { u as useZIndex } from "../share/hook/use-z-index.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "MessageBoxInner"
@@ -11,14 +11,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "message-box",
   props: {
     messages: {},
-    position: {},
-    zIndex: { default: MESSAGE_Z_INDEX },
+    placement: { default: "top" },
+    position: { default: "top" },
+    zIndex: {},
     root: {},
     "onUpdate:messages": {}
   },
   emits: ["close"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const [currentZIndex] = useZIndex("message");
     const messages = useModel(props, "messages");
     const emits = __emit;
     const clone = computed(() => {
@@ -43,7 +45,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       emits("close", id);
     };
-    const messageRef = ref([]);
+    const messageRef = shallowRef([]);
     __expose({
       close: (id) => {
         var _a;
@@ -60,7 +62,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         {
           class: "px-message-box",
           style: normalizeStyle({
-            zIndex: props.zIndex
+            zIndex: props.zIndex ?? unref(currentZIndex)
           })
         },
         [
@@ -68,7 +70,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "div",
             {
               class: normalizeClass(["px-message-box-container", {
-                [`px-message-box-container__${unref(On)(props.position || "top")}`]: true
+                [`px-message-box-container__${props.placement || props.position || "top"}`]: true
               }])
             },
             [

package/es/message-box/type.d.ts

@@ -32,7 +32,12 @@ export type MessageOptions = {
      */
     closable?: boolean;
     /**
-     * @property {'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'} [position='top']
+     * @property {'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'} [placement='top']
+     * @version 0.0.2
+     */
+    placement?: MessageBoxProps['placement'];
+    /**
+     * @property {'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'} [position='top']
      * @version 0.0.0-beta
      */
     position?: MessageBoxProps['position'];
@@ -61,12 +66,17 @@ export type MessageBoxProps = {
      */
     messages: MessageProps[];
     /**
-     * @property {'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'} [position='top']
+     * @property {'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'} [placement='top']
+     * @version 0.0.2
+     */
+    placement?: 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * @property {'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'} [position='top']
      * @version 0.0.0-beta
      */
-    position?: 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+    position?: 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     /**
-     * @property {number} [zIndex=3000]
+     * @property {number} [zIndex]
      * @version 0.0.0-beta
      */
     zIndex?: number;

package/es/option-list/css.js

@@ -0,0 +1,2 @@
+import '../index.css'
+import './index.css'

package/es/option-list/index.css

@@ -0,0 +1,57 @@
+.px-option-list {
+  --item-size: var(--px-medium-base-size);
+  --px-padding-x: var(--px-interval-1);
+  --px-padding-group-x: var(--px-interval-2);
+  overflow: auto;
+  max-height: calc(var(--item-size) * 6);
+  background-color: var(--px-neutral-1);
+  color: var(--px-neutral-10);
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.px-option-list-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: var(--item-size);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.25s;
+  padding-left: var(--px-padding-x);
+  padding-right: var(--px-padding-x);
+  background-color: var(--px-neutral-1);
+}
+.px-option-list-item:hover {
+  background-color: var(--px-primary-1);
+}
+.px-option-list-item__disabled {
+  background-color: var(--px-neutral-1);
+  color: var(--px-neutral-6);
+  cursor: not-allowed;
+}
+.px-option-list-item__disabled:hover {
+  background-color: var(--px-neutral-1);
+}
+.px-option-list-item__disabled.px-option-list-item__active {
+  color: var(--px-primary-3);
+}
+.px-option-list-item__active {
+  color: var(--px-primary-6);
+}
+.px-option-list-item-group .px-option-list-item {
+  padding-left: var(--px-padding-group-x);
+}
+.px-option-list-item-group-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--px-neutral-9);
+  height: var(--item-size);
+  display: flex;
+  align-items: center;
+  padding-left: var(--px-padding-x);
+  padding-right: var(--px-padding-x);
+}

package/es/option-list/index.d.ts

@@ -0,0 +1,38 @@
+import type { OptionListGroupOption, OptionListOption, OptionListProps } from './type';
+declare var __VLS_1: {
+    option: string;
+}, __VLS_3: {
+    option: OptionListOption | OptionListGroupOption;
+}, __VLS_5: {
+    option: OptionListGroupOption;
+}, __VLS_7: {
+    option: string;
+}, __VLS_9: {
+    option: OptionListOption;
+};
+type __VLS_Slots = {} & {
+    option?: (props: typeof __VLS_1) => any;
+} & {
+    option?: (props: typeof __VLS_3) => any;
+} & {
+    'group-label'?: (props: typeof __VLS_5) => any;
+} & {
+    option?: (props: typeof __VLS_7) => any;
+} & {
+    option?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<OptionListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (value: any, option: string | OptionListOption, e: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<OptionListProps> & Readonly<{
+    onSelect?: ((value: any, option: string | OptionListOption, e: MouseEvent) => any) | undefined;
+}>, {
+    options: (string | OptionListOption | OptionListGroupOption)[];
+    activeValues: any[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/option-list/index.js

@@ -0,0 +1,169 @@
+import './css.js'
+import { defineComponent, createElementBlock, openBlock, Fragment, renderList, unref, normalizeClass, renderSlot, createTextVNode, toDisplayString, createElementVNode } from "vue";
+import { p, d } from "../aside/index.js";
+import { G as GROUP_OPTION_TYPE } from "../share/const/index.js";
+const _hoisted_1 = { class: "px-option-list" };
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = {
+  key: 2,
+  class: "px-option-list-item-group"
+};
+const _hoisted_5 = { class: "px-option-list-item-group-label" };
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "OptionList"
+  },
+  __name: "index",
+  props: {
+    options: { default: () => [] },
+    activeValues: { default: () => [] }
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const selectHandler = (value, e) => {
+      emits("select", value, value, e);
+    };
+    const selectObjectHandler = (option, e) => {
+      if (option.disabled) {
+        return;
+      }
+      emits("select", option.value, option, e);
+    };
+    const getKey = (option) => {
+      if (p(option)) {
+        return option;
+      } else if ("type" in option && option.type === GROUP_OPTION_TYPE) {
+        return option.key;
+      } else {
+        return option.label;
+      }
+    };
+    const checkActive = (option) => {
+      if (!props.activeValues.length) {
+        return false;
+      }
+      if (p(option)) {
+        return props.activeValues.includes(option);
+      }
+      return props.activeValues.includes(option.value);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("ul", _hoisted_1, [
+        (openBlock(true), createElementBlock(
+          Fragment,
+          null,
+          renderList(props.options, (item) => {
+            return openBlock(), createElementBlock(
+              Fragment,
+              {
+                key: getKey(item)
+              },
+              [
+                unref(p)(item) ? (openBlock(), createElementBlock("li", {
+                  key: 0,
+                  class: normalizeClass(["px-option-list-item", {
+                    "px-option-list-item__active": checkActive(item)
+                  }]),
+                  onClick: (e) => selectHandler(item, e)
+                }, [
+                  renderSlot(_ctx.$slots, "option", { option: item }, () => [
+                    createTextVNode(
+                      toDisplayString(item),
+                      1
+                      /* TEXT */
+                    )
+                  ])
+                ], 10, _hoisted_2)) : unref(d)(item) && !("type" in item && item.type === unref(GROUP_OPTION_TYPE)) ? (openBlock(), createElementBlock("li", {
+                  key: 1,
+                  class: normalizeClass(["px-option-list-item", {
+                    "px-option-list-item__disabled": item.disabled,
+                    "px-option-list-item__active": checkActive(item)
+                  }]),
+                  onClick: (e) => selectObjectHandler(item, e)
+                }, [
+                  renderSlot(_ctx.$slots, "option", { option: item }, () => [
+                    createTextVNode(
+                      toDisplayString(item.label),
+                      1
+                      /* TEXT */
+                    )
+                  ])
+                ], 10, _hoisted_3)) : (openBlock(), createElementBlock("li", _hoisted_4, [
+                  createElementVNode("div", _hoisted_5, [
+                    renderSlot(_ctx.$slots, "group-label", { option: item }, () => [
+                      createTextVNode(
+                        toDisplayString(item.label),
+                        1
+                        /* TEXT */
+                      )
+                    ])
+                  ]),
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(item.children, (child) => {
+                      return openBlock(), createElementBlock(
+                        Fragment,
+                        {
+                          key: getKey(child)
+                        },
+                        [
+                          unref(p)(child) ? (openBlock(), createElementBlock("li", {
+                            key: 0,
+                            class: normalizeClass(["px-option-list-item", {
+                              "px-option-list-item__active": checkActive(child)
+                            }]),
+                            onClick: (e) => selectHandler(child, e)
+                          }, [
+                            renderSlot(_ctx.$slots, "option", { option: child }, () => [
+                              createTextVNode(
+                                toDisplayString(child),
+                                1
+                                /* TEXT */
+                              )
+                            ])
+                          ], 10, _hoisted_6)) : (openBlock(), createElementBlock("li", {
+                            key: 1,
+                            class: normalizeClass(["px-option-list-item", {
+                              "px-option-list-item__disabled": child.disabled,
+                              "px-option-list-item__active": checkActive(child)
+                            }]),
+                            onClick: (e) => selectObjectHandler(child, e)
+                          }, [
+                            renderSlot(_ctx.$slots, "option", { option: child }, () => [
+                              createTextVNode(
+                                toDisplayString(child.label),
+                                1
+                                /* TEXT */
+                              )
+                            ])
+                          ], 10, _hoisted_7))
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      );
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ]))
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            );
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/es/option-list/type.d.ts

@@ -0,0 +1,16 @@
+import type { GroupOption, Option } from '../share/type';
+export interface OptionListOption extends Option<any> {
+    disabled?: boolean;
+}
+export interface OptionListGroupOption extends GroupOption {
+    label: string;
+    key: string | number | symbol;
+    children: (OptionListOption | string)[];
+}
+export type OptionListProps = {
+    options?: (string | OptionListOption | OptionListGroupOption)[];
+    activeValues?: any[];
+};
+export type OptionListEvent = {
+    select: [value: any, option: OptionListOption | string, e: MouseEvent];
+};

package/es/popover/css.js

@@ -0,0 +1 @@
+import '../index.css'

package/es/popover/index.d.ts

@@ -0,0 +1,203 @@
+import { nextTick, type VNode } from 'vue';
+import type { PopoverProps } from './type';
+declare const _default: import("vue").DefineComponent<PopoverProps, {
+    triggerContent: import("vue").ShallowRef<({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly content?: string | undefined;
+            readonly visible?: boolean | null | undefined;
+            readonly defaultVisible?: boolean | null | undefined;
+            readonly placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | undefined;
+            readonly offset?: number | undefined;
+            readonly variant?: "dark" | "light" | undefined;
+            readonly arrow?: boolean | undefined;
+            readonly zIndex?: number | undefined;
+            readonly target?: (HTMLElement | VNode | null) | undefined;
+            readonly root?: (HTMLElement | string) | undefined;
+            readonly borderRadius?: number | undefined;
+            readonly widthEqual?: boolean | undefined;
+            readonly contentStyle?: import("vue").CSSProperties | undefined;
+            readonly onContentMouseenter?: ((e: MouseEvent) => any) | undefined;
+            readonly onContentMouseleave?: ((e: MouseEvent) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance | null;
+        $parent: import("vue").ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: ((event: "contentMouseenter", e: MouseEvent) => void) & ((event: "contentMouseleave", e: MouseEvent) => void);
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("../popup-content/type.ts").PopupContentProps> & Readonly<{
+            onContentMouseenter?: ((e: MouseEvent) => any) | undefined;
+            onContentMouseleave?: ((e: MouseEvent) => any) | undefined;
+        }>, {
+            updateRenderState: () => void;
+            content: import("vue").ShallowRef<HTMLDivElement | null, HTMLDivElement | null>;
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            contentMouseenter: (e: MouseEvent) => any;
+            contentMouseleave: (e: MouseEvent) => any;
+        }, string, {
+            variant: "dark" | "light";
+            placement: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+            root: HTMLElement | string;
+            offset: number;
+            visible: boolean | null;
+            arrow: boolean;
+            widthEqual: boolean;
+        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, ((cleanupFn: () => void) => void)]) => any : (...args: [any, any, ((cleanupFn: () => void) => void)]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    } & Readonly<{
+        variant: "dark" | "light";
+        placement: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+        root: HTMLElement | string;
+        offset: number;
+        visible: boolean | null;
+        arrow: boolean;
+        widthEqual: boolean;
+    }> & Omit<Readonly<import("../popup-content/type.ts").PopupContentProps> & Readonly<{
+        onContentMouseenter?: ((e: MouseEvent) => any) | undefined;
+        onContentMouseleave?: ((e: MouseEvent) => any) | undefined;
+    }>, "content" | ("variant" | "placement" | "root" | "offset" | "visible" | "arrow" | "widthEqual") | "updateRenderState"> & import("vue").ShallowUnwrapRef<{
+        updateRenderState: () => void;
+        content: import("vue").ShallowRef<HTMLDivElement | null, HTMLDivElement | null>;
+    }> & {} & import("vue").ComponentCustomProperties & {} & {
+        $slots: {
+            content?: (props: {}) => any;
+        };
+    }) | undefined, ({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly content?: string | undefined;
+            readonly visible?: boolean | null | undefined;
+            readonly defaultVisible?: boolean | null | undefined;
+            readonly placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | undefined;
+            readonly offset?: number | undefined;
+            readonly variant?: "dark" | "light" | undefined;
+            readonly arrow?: boolean | undefined;
+            readonly zIndex?: number | undefined;
+            readonly target?: (HTMLElement | VNode | null) | undefined;
+            readonly root?: (HTMLElement | string) | undefined;
+            readonly borderRadius?: number | undefined;
+            readonly widthEqual?: boolean | undefined;
+            readonly contentStyle?: import("vue").CSSProperties | undefined;
+            readonly onContentMouseenter?: ((e: MouseEvent) => any) | undefined;
+            readonly onContentMouseleave?: ((e: MouseEvent) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance | null;
+        $parent: import("vue").ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: ((event: "contentMouseenter", e: MouseEvent) => void) & ((event: "contentMouseleave", e: MouseEvent) => void);
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("../popup-content/type.ts").PopupContentProps> & Readonly<{
+            onContentMouseenter?: ((e: MouseEvent) => any) | undefined;
+            onContentMouseleave?: ((e: MouseEvent) => any) | undefined;
+        }>, {
+            updateRenderState: () => void;
+            content: import("vue").ShallowRef<HTMLDivElement | null, HTMLDivElement | null>;
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            contentMouseenter: (e: MouseEvent) => any;
+            contentMouseleave: (e: MouseEvent) => any;
+        }, string, {
+            variant: "dark" | "light";
+            placement: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+            root: HTMLElement | string;
+            offset: number;
+            visible: boolean | null;
+            arrow: boolean;
+            widthEqual: boolean;
+        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, ((cleanupFn: () => void) => void)]) => any : (...args: [any, any, ((cleanupFn: () => void) => void)]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    } & Readonly<{
+        variant: "dark" | "light";
+        placement: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+        root: HTMLElement | string;
+        offset: number;
+        visible: boolean | null;
+        arrow: boolean;
+        widthEqual: boolean;
+    }> & Omit<Readonly<import("../popup-content/type.ts").PopupContentProps> & Readonly<{
+        onContentMouseenter?: ((e: MouseEvent) => any) | undefined;
+        onContentMouseleave?: ((e: MouseEvent) => any) | undefined;
+    }>, "content" | ("variant" | "placement" | "root" | "offset" | "visible" | "arrow" | "widthEqual") | "updateRenderState"> & import("vue").ShallowUnwrapRef<{
+        updateRenderState: () => void;
+        content: import("vue").ShallowRef<HTMLDivElement | null, HTMLDivElement | null>;
+    }> & {} & import("vue").ComponentCustomProperties & {} & {
+        $slots: {
+            content?: (props: {}) => any;
+        };
+    }) | undefined>;
+    updateRenderState: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (e: MouseEvent) => any;
+    open: (e: MouseEvent) => any;
+    "update:visible": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<PopoverProps> & Readonly<{
+    onClose?: ((e: MouseEvent) => any) | undefined;
+    onOpen?: ((e: MouseEvent) => any) | undefined;
+    "onUpdate:visible"?: ((value: boolean) => any) | undefined;
+}>, {
+    variant: "dark" | "light";
+    placement: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+    root: HTMLElement | string;
+    offset: number;
+    visible: boolean | null;
+    defaultVisible: boolean | null;
+    arrow: boolean;
+    widthEqual: boolean;
+    trigger: "hover" | "click";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;