pxd 0.0.55 → 0.0.61

package/dist/components/input/types.d.ts

@@ -1,6 +1,4 @@
-import type { HTMLAttributes } from 'vue'
-
-import type { ComponentSizeWithXs } from '../shared/props'
+import type { ComponentSizeWithXs, ComponentClass } from '../../types/shared'
 
 export interface InputProps {
   size?: ComponentSizeWithXs
@@ -11,21 +9,20 @@ export interface InputProps {
   readonly?: boolean
   disabled?: boolean
   password?: boolean
-  required?: boolean
   autofocus?: boolean
-  inputType?: HTMLInputElement['type']
-  inputmode?: HTMLAttributes['inputmode']
+  inputType?: string
+  inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
   minlength?: number | string
   maxlength?: number | string
   clearable?: boolean
-  clearValue?: string | number | null | undefined
-  modelValue?: string | number | null | undefined
+  clearValue?: string | number | null
+  modelValue?: string | number | null
   placeholder?: string
-  prefixStyle?: boolean
-  suffixStyle?: boolean
   prefixClass?: ComponentClass
   suffixClass?: ComponentClass
   selectOnFocus?: boolean
+  defaultPrefixStyle?: boolean
+  defaultSuffixStyle?: boolean
 }
 
 export interface InputEmits {

package/dist/components/intersection-observer/index.d.vue.ts

@@ -19,7 +19,6 @@ declare const __VLS_base: import("vue").DefineComponent<IntersectionObserverProp
     "onBefore-hide"?: (() => any) | undefined;
 }>, {
     threshold: number | number[];
-    root: Element | Document | null;
     rootMargin: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/intersection-observer/index.vue

@@ -4,13 +4,14 @@ import { useIntersectionObserver } from "../../composables/use-browser-observer"
 import { getCssUnitValue } from "../../utils/format";
 import FragmentContainer from "../_internal/fragment-container.vue";
 defineOptions({
-  name: "PIntersectionObserver"
+  name: "PIntersectionObserver",
+  inheritAttrs: false
 });
 const props = defineProps({
   width: { type: [Number, String], required: false },
   height: { type: [Number, String], required: false },
   keepAlive: { type: Boolean, required: false },
-  root: { type: null, required: false, default: null },
+  root: { type: null, required: false },
   rootMargin: { type: String, required: false, default: "20%" },
   threshold: { type: [Number, Array], required: false, default: 0 }
 });
@@ -18,12 +19,14 @@ const emits = defineEmits(["visible-change", "before-show", "before-hide", "show
 const isVisible = shallowRef(false);
 const containerRef = shallowRef();
 const containerSize = shallowRef({
+  "contain-intrinsic-size": `auto ${getCssUnitValue(props.height)}`,
   "--slot-estimated-width": getCssUnitValue(props.width),
   "--slot-estimated-height": getCssUnitValue(props.height)
 });
 function getRenderedSlotSize() {
   const rect = containerRef.value.getBoundingClientRect();
   containerSize.value = {
+    "contain-intrinsic-size": `auto ${rect.height}px`,
     "--slot-estimated-width": `${rect.width}px`,
     "--slot-estimated-height": `${rect.height}px`
   };
@@ -55,12 +58,18 @@ useIntersectionObserver(
 </script>
 
 <template>
-  <div ref="containerRef" class="pxd-intersection-observer" :style="containerSize">
+  <div
+    ref="containerRef"
+    class="pxd-intersection-observer content-visibility-auto"
+    :style="containerSize"
+    v-bind="$attrs"
+  >
     <KeepAlive v-if="keepAlive">
       <FragmentContainer v-if="isVisible">
         <slot />
       </FragmentContainer>
     </KeepAlive>
+
     <template v-else>
       <slot v-if="isVisible" />
     </template>

package/dist/components/kbd/index.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { useConfigProvider } from "pxd";
 import { computed } from "vue";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { getFallbackValue } from "../../utils/get";
 defineOptions({
   name: "PKbd",

package/dist/components/link-button/index.d.vue.ts

@@ -13,7 +13,7 @@ declare const __VLS_base: import("vue").DefineComponent<LinkButtonProps, {}, {},
     onClick?: ((args_0: MouseEvent) => any) | undefined;
 }>, {
     align: "left" | "center" | "right";
-    target: HTMLAnchorElement["target"];
+    target: "_blank" | "_self" | "_parent" | "_top";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/link-button/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import ExternalIcon from "@gdsicon/vue/external";
-import { computed, useAttrs } from "vue";
+import { computed } from "vue";
 import { isExternalLink } from "../../utils/format";
 import PButton from "../button/index.vue";
 defineOptions({
@@ -10,16 +10,14 @@ const props = defineProps({
   href: { type: String, required: true },
   text: { type: String, required: false },
   align: { type: String, required: false, default: "left" },
-  target: { type: null, required: false, default: "_self" },
+  target: { type: String, required: false, default: "_self" },
   variant: { type: String, required: false },
   externalIcon: { type: Boolean, required: false }
 });
 const emits = defineEmits(["click"]);
-const attrs = useAttrs();
-const linkButtonAttrs = computed(() => {
+const computedAttrs = computed(() => {
   const { externalIcon, text, href, ...restProps } = props;
   const baseAttrs = {
-    ...attrs,
     ...restProps,
     class: "pxd-link-button",
     rel: "noopener noreferrer",
@@ -47,7 +45,7 @@ function onLinkClick(ev) {
 </script>
 
 <template>
-  <PButton v-bind="linkButtonAttrs">
+  <PButton v-bind="computedAttrs">
     <template #prefix>
       <slot name="prefix" />
     </template>

package/dist/components/link-button/types.d.ts

@@ -4,7 +4,7 @@ export interface LinkButtonProps {
   href: string
   text?: string
   align?: 'left' | 'center' | 'right'
-  target?: HTMLAnchorElement['target']
+  target?: '_blank' | '_self' | '_parent' | '_top'
   variant?: ButtonVariant
   externalIcon?: boolean
 }

package/dist/components/list/index.d.vue.ts

@@ -2,16 +2,20 @@ import type { ListProps, ListOptionSelected } from './types';
 declare function updateListItem(): void;
 declare function isNoVisibleItem(): boolean;
 declare function setActiveValue(newValue?: string): void;
-declare function setActiveValueToFirst(): void;
-declare var __VLS_7: {};
+declare function setFirstAsActive(): void;
+declare var __VLS_7: {}, __VLS_15: {
+    item: import("./types").ListOption;
+};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
+} & {
+    item?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ListProps, {
     setActiveValue: typeof setActiveValue;
     updateListItem: typeof updateListItem;
     isNoVisibleItem: typeof isNoVisibleItem;
-    setActiveValueToFirst: typeof setActiveValueToFirst;
+    setFirstAsActive: typeof setFirstAsActive;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (args_0: MouseEvent, args_1: ListOptionSelected) => any;
     toggle: () => any;
@@ -23,8 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<ListProps, {
 }>, {
     options: import("./types").ListOption[];
     loop: boolean;
-    keyListener: boolean;
-    itemTransition: boolean;
+    toggleOnKeyPress: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/list/index.vue

@@ -13,8 +13,7 @@ defineOptions({
 const props = defineProps({
   loop: { type: Boolean, required: false, default: true },
   options: { type: Array, required: false, default: () => [] },
-  keyListener: { type: Boolean, required: false, default: true },
-  itemTransition: { type: Boolean, required: false, default: true },
+  toggleOnKeyPress: { type: Boolean, required: false, default: true },
   closeOnPressEscape: { type: Boolean, required: false }
 });
 const emits = defineEmits(["toggle", "escape", "select"]);
@@ -28,15 +27,37 @@ const FUNCTION_KEYS = ["Enter", "Tab", "Home", "End"];
 const PREVENT_DEFAULT_KEYS = [...FUNCTION_KEYS, ...PREV_KEYS, ...NEXT_KEYS];
 const listItemKeys = [];
 const listItemsMap = /* @__PURE__ */ new Map();
+function resolveNavigationTarget(key) {
+  const len = listItemKeys.length;
+  if (key === "Home") {
+    return listItemKeys[0];
+  }
+  if (key === "End") {
+    return listItemKeys[len - 1];
+  }
+  const dir = PREV_KEYS.includes(key) ? -1 : NEXT_KEYS.includes(key) ? 1 : void 0;
+  if (dir === void 0) {
+    return void 0;
+  }
+  if (!activeValue.value) {
+    return dir === -1 ? listItemKeys[len - 1] : listItemKeys[0];
+  }
+  const index = listItemKeys.indexOf(activeValue.value);
+  if (index === -1) {
+    return dir === -1 ? listItemKeys[len - 1] : listItemKeys[0];
+  }
+  if (props.loop) {
+    return listItemKeys[(index + dir + len) % len];
+  }
+  const nextIndex = index + dir;
+  return nextIndex >= 0 && nextIndex < len ? listItemKeys[nextIndex] : void 0;
+}
 const containerKeydownThrottled = throttle(
   (ev) => {
     if (ev.ctrlKey || ev.metaKey || ev.altKey || ev.shiftKey) {
       return;
     }
     const { key } = ev;
-    if (key === "Tab") {
-      return;
-    }
     if (key === "Enter") {
       listItemsMap.get(activeValue.value)?.click();
       return;
@@ -45,38 +66,8 @@ const containerKeydownThrottled = throttle(
       emits("escape", ev);
       return;
     }
-    let newActiveValue = "";
-    const listItemKeyLength = listItemKeys.length;
-    if (PREV_KEYS.includes(key)) {
-      if (activeValue.value) {
-        const index = listItemKeys.indexOf(activeValue.value);
-        if (props.loop) {
-          const prevIndex = (index - 1 + listItemKeys.length) % listItemKeys.length;
-          newActiveValue = listItemKeys[prevIndex];
-        } else if (index > 0) {
-          newActiveValue = listItemKeys[index - 1];
-        }
-      } else {
-        newActiveValue = listItemKeys[listItemKeyLength - 1];
-      }
-    } else if (NEXT_KEYS.includes(key)) {
-      if (activeValue.value) {
-        const index = listItemKeys.indexOf(activeValue.value);
-        if (props.loop) {
-          const nextIndex = (index + 1) % listItemKeys.length;
-          newActiveValue = listItemKeys[nextIndex];
-        } else if (index < listItemKeys.length - 1) {
-          newActiveValue = listItemKeys[index + 1];
-        }
-      } else {
-        newActiveValue = listItemKeys[0];
-      }
-    } else if (key === "Home") {
-      newActiveValue = listItemKeys[0];
-    } else if (key === "End") {
-      newActiveValue = listItemKeys[listItemKeyLength - 1];
-    }
-    if (!newActiveValue) {
+    const newActiveValue = resolveNavigationTarget(key);
+    if (newActiveValue === void 0) {
       return;
     }
     if (activeValue.value !== newActiveValue) {
@@ -89,7 +80,7 @@ const containerKeydownThrottled = throttle(
   { edges: ["leading"] }
 );
 function onContainerKeydown(ev) {
-  if (!props.keyListener || listItemKeys.length === 0) {
+  if (!props.toggleOnKeyPress || listItemKeys.length === 0) {
     return;
   }
   if (PREVENT_DEFAULT_KEYS.includes(ev.key)) {
@@ -108,26 +99,31 @@ function onPointerOver(ev) {
   activeValue.value = itemValue;
 }
 function onOptionClick(item, ev) {
-  const { as, onClick, ...option } = item;
   activeValue.value = "";
-  emits("select", ev, option);
+  emits("select", ev, item);
 }
 function updateListItem() {
-  listItemsMap.clear();
-  listItemKeys.splice(0);
+  cleanupListItem();
+  if (!containerRef.value) {
+    return;
+  }
   Array.from(containerRef.value.querySelectorAll(itemSelector)).forEach((el) => {
     const key = el.dataset.value;
     listItemsMap.set(key, el);
     listItemKeys.push(key);
   });
 }
+function cleanupListItem() {
+  listItemsMap.clear();
+  listItemKeys.splice(0);
+}
 function isNoVisibleItem() {
   return listItemsMap.size === 0;
 }
 function setActiveValue(newValue = "") {
   activeValue.value = newValue;
 }
-function setActiveValueToFirst() {
+function setFirstAsActive() {
   setActiveValue(listItemKeys[0]);
 }
 provideListContext({
@@ -143,15 +139,14 @@ onMounted(async () => {
   cachedOn(document, "keydown", onContainerKeydown);
 });
 onBeforeUnmount(() => {
-  listItemsMap.clear();
-  listItemKeys.splice(0);
+  cleanupListItem();
   cachedOff(document, "keydown", onContainerKeydown);
 });
 defineExpose({
   setActiveValue,
   updateListItem,
   isNoVisibleItem,
-  setActiveValueToFirst
+  setFirstAsActive
 });
 </script>
 
@@ -160,18 +155,19 @@ defineExpose({
     ref="containerRef"
     role="list"
     tabindex="-1"
-    :data-transition="itemTransition"
-    class="pxd-list group/list m-0 p-0 max-w-full list-none bg-background-100 outline-none"
+    class="pxd-list m-0 p-0 max-w-full list-none bg-background-100 outline-none"
     v-bind="$attrs"
     @pointerover="onPointerOver"
   >
-    <PScrollable class="p-2 h-full max-h-inherit rounded-inherit" fader-direction="vertical">
+    <PScrollable
+      class="h-full max-h-inherit rounded-inherit"
+      content-class="p-2"
+      fader-direction="vertical"
+    >
       <slot>
-        <PListItem
-          v-for="(option, index) in options"
-          :key="option.value ?? index"
-          v-bind="option"
-        />
+        <PListItem v-for="(option, index) in options" :key="option.value ?? index" v-bind="option">
+          <slot name="item" :item="option" />
+        </PListItem>
       </slot>
     </PScrollable>
   </ul>

package/dist/components/list/types.d.ts

@@ -1,11 +1,8 @@
-import type { ComponentAs, ComponentLabel } from '../shared'
+import type { ComponentAs, ComponentLabel, ComponentOption } from '../../types/shared'
 
-export interface ListOption extends Record<string, any> {
+export interface ListOption extends Partial<ComponentOption> {
   as?: ComponentAs
   type?: 'default' | 'error' | 'warning' | 'separator'
-  label?: ComponentLabel
-  value?: any
-  disabled?: boolean
   description?: ComponentLabel
   onClick?: (item: ListOptionSelected, ev: MouseEvent) => void
 }
@@ -15,8 +12,7 @@ export type ListOptionSelected = Omit<ListOption, 'as' | 'onClick'>
 export interface ListProps {
   loop?: boolean
   options?: ListOption[]
-  keyListener?: boolean
-  itemTransition?: boolean
+  toggleOnKeyPress?: boolean
   closeOnPressEscape?: boolean
 }
 
@@ -25,16 +21,3 @@ export interface ListEmits {
   escape: [KeyboardEvent]
   select: [MouseEvent, ListOptionSelected]
 }
-
-export interface ListItemProps {
-  as?: ListOption['as']
-  type?: ListOption['type']
-  label?: ListOption['label']
-  value?: ListOption['value']
-  disabled?: ListOption['disabled']
-  description?: ListOption['description']
-}
-
-export interface ListItemEmits {
-  click: [ListOptionSelected, MouseEvent]
-}

package/dist/components/list-item/index.d.vue.ts

@@ -1,4 +1,4 @@
-import type { ListItemProps } from '../list/types';
+import type { ListItemProps } from './types';
 declare var __VLS_11: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_11) => any;
@@ -9,8 +9,9 @@ declare const __VLS_base: import("vue").DefineComponent<ListItemProps, {}, {}, {
     onClick?: ((args_0: import("../list/types").ListOptionSelected, args_1: MouseEvent) => any) | undefined;
 }>, {
     type: "default" | "error" | "warning" | "separator";
+    as: import("../../types/shared").ComponentAs;
     disabled: boolean;
-    as: import("../list/types").ListOption["as"];
+    keywords: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/list-item/index.vue

@@ -1,47 +1,73 @@
 <script setup>
-import { computed, nextTick, onMounted, shallowRef } from "vue";
+import { tv } from "tailwind-variants";
+import { computed, shallowRef } from "vue";
 import { useListContext, useListFilterValue } from "../../contexts/list";
 import { unrefElement } from "../../utils/ref";
 import { getUniqueId } from "../../utils/uid";
-import { listItemVariant } from "./cn";
 defineOptions({
   name: "PListItem",
   inheritAttrs: false
 });
 const props = defineProps({
-  as: { type: null, required: false, default: "li" },
+  as: { type: [String, Object], required: false, default: "li" },
   type: { type: String, required: false, default: "default" },
-  label: { type: null, required: false },
-  value: { type: null, required: false },
+  label: { type: [String, Number, Array, null], required: false },
+  value: { type: [String, Number], required: false },
   disabled: { type: Boolean, required: false, default: false },
-  description: { type: null, required: false }
+  keywords: { type: Array, required: false, default: () => [] },
+  description: { type: [String, Number, Array, null], required: false }
 });
 const emits = defineEmits(["click"]);
+const listItemVariant = tv({
+  base: "pxd-list-item h-10 gap-3 px-2 text-sm flex w-full cursor-pointer items-center rounded-md outline-none [contain-intrinsic-size:auto_2.5rem] content-visibility-auto data-[disabled=true]:pointer-events-none data-[disabled=true]:text-gray-700 motion-safe:transition-colors",
+  variants: {
+    type: {
+      error: "text-red-900 pointer-coarse:active:bg-red-100 pointer-fine:data-[selected=true]:bg-red-100",
+      warning: "text-amber-900 pointer-coarse:active:bg-amber-100 pointer-fine:data-[selected=true]:bg-amber-100",
+      default: "text-foreground pointer-coarse:active:bg-gray-alpha-100 pointer-fine:data-[selected=true]:bg-gray-alpha-100",
+      separator: "h-0! px-0 m-1.5 w-auto! border-b"
+    }
+  },
+  defaultVariants: {
+    type: "default"
+  }
+});
 const { activeValue, onOptionClick } = useListContext();
 const uniqueId = getUniqueId();
 const filterValue = useListFilterValue();
 const itemRef = shallowRef();
-const currentValue = shallowRef("");
+const searchableText = computed(() => {
+  const keywordsText = props.keywords.length > 0 ? props.keywords.join("").toLowerCase().replace(/\s/g, "") : "";
+  if (props.label) {
+    const propsText = `${String(props.label || "")}${props.description || ""}`.toLowerCase().replace(/\s/g, "");
+    return propsText + keywordsText;
+  }
+  if (keywordsText) {
+    return keywordsText;
+  }
+  return getCachedTextContent();
+});
 const isVisible = computed(
-  () => filterValue?.value ? currentValue.value.includes(filterValue.value.toLowerCase()) : true
+  () => filterValue?.value ? searchableText.value.includes(filterValue.value.toLowerCase()) : true
 );
 const isSelected = computed(() => activeValue.value === uniqueId);
 const isDisabled = computed(() => props.disabled || props.type === "separator");
 const computedClasses = computed(() => {
   return listItemVariant({ type: props.type });
 });
+let cachedTextContent = "";
+function getCachedTextContent() {
+  const text = unrefElement(itemRef.value)?.textContent || "";
+  if (text) {
+    cachedTextContent = text.toLowerCase().replace(/\s/g, "");
+  }
+  return cachedTextContent;
+}
 function onItemClick(ev) {
-  emits("click", props, ev);
-  onOptionClick?.(props, ev);
+  const { as, keywords, ...restProps } = props;
+  emits("click", restProps, ev);
+  onOptionClick?.(restProps, ev);
 }
-onMounted(async () => {
-  await nextTick();
-  if (props.label) {
-    currentValue.value = `${String(props.label || "")}${props.description || ""}`.toLowerCase().replace(/\s/g, "");
-  } else {
-    currentValue.value = (unrefElement(itemRef.value)?.textContent || "").toLowerCase().replace(/\s/g, "");
-  }
-});
 </script>
 
 <template>

package/dist/components/list-item/types.d.ts

@@ -0,0 +1,15 @@
+import type { ListOption, ListOptionSelected } from '../list/types'
+
+export interface ListItemProps {
+  as?: ListOption['as']
+  type?: ListOption['type']
+  label?: ListOption['label']
+  value?: ListOption['value']
+  disabled?: ListOption['disabled']
+  keywords?: string[]
+  description?: ListOption['description']
+}
+
+export interface ListItemEmits {
+  click: [ListOptionSelected, MouseEvent]
+}

package/dist/components/loading-bar/index.vue

@@ -1,23 +1,54 @@
 <script setup>
+import { tv } from "tailwind-variants";
 import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
 import { UPDATE_LOADING_BAR_EVENT_NAME } from "../../composables/use-loading-bar";
 import { cachedOff, cachedOn } from "../../utils/event";
 import { clampValue, isTruthyProp } from "../../utils/format";
 import { isServer } from "../../utils/is";
 import PTeleport from "../teleport/index.vue";
-import { loadingBarVariant } from "./cn";
 defineOptions({
   name: "PLoadingBar",
   inheritAttrs: false
 });
 const props = defineProps({
-  to: { type: null, required: false },
+  to: { type: [String, Object], required: false },
   group: { type: String, required: false, default: "default" },
   minimum: { type: Number, required: false, default: 0.08 },
   trickle: { type: Boolean, required: false, default: true },
   hideDelay: { type: Number, required: false, default: 500 },
   trickleThreshold: { type: Number, required: false, default: 300 }
 });
+const loadingBarVariant = tv({
+  slots: {
+    wrapper: "pxd-loading-bar top-0 left-0 right-0 pointer-events-none z-10 max-w-full overflow-hidden",
+    inner: "pxd-loading-bar--inner h-0.5 data-[hidden=true]:h-0 origin-left data-[transition=false]:transition-none! motion-safe:transition-all"
+  },
+  variants: {
+    status: {
+      running: {
+        inner: "bg-gray-500"
+      },
+      finish: {
+        inner: "bg-primary"
+      },
+      error: {
+        inner: "bg-red-900"
+      }
+    },
+    absolute: {
+      true: {
+        wrapper: "absolute"
+      },
+      false: {
+        wrapper: "fixed"
+      }
+    }
+  },
+  defaultVariants: {
+    status: "finish",
+    absolute: false
+  }
+});
 let prevTimestamp = 0;
 let prevAnimationKey = 0;
 let hiddenBarTimeout;

package/dist/components/loading-bar/types.d.ts

@@ -1,7 +1,7 @@
 export type LoadingBarStatus = 'running' | 'error' | 'finish'
 
 export interface LoadingBarProps {
-  to?: string | HTMLElement
+  to?: string | object
   group?: string
   minimum?: number
   trickle?: boolean

package/dist/components/loading-dots/index.vue

@@ -1,11 +1,12 @@
 <script setup>
 defineOptions({
-  name: "PLoadingDots"
+  name: "PLoadingDots",
+  inheritAttrs: false
 });
 </script>
 
 <template>
-  <span class="pxd-loading-dots inline-flex items-center">
+  <span class="pxd-loading-dots inline-flex items-center" v-bind="$attrs">
     <div v-if="$slots.prefix" class="pxd-loading-dots--text mr-3">
       <slot name="prefix" />
     </div>

package/dist/components/menu/index.d.vue.ts

@@ -1,3 +1,4 @@
+import type { ListOptionSelected } from '../list/types';
 import type { MenuProps } from './types';
 declare var __VLS_12: {}, __VLS_23: {};
 type __VLS_Slots = {} & {
@@ -12,9 +13,11 @@ declare const __VLS_base: import("vue").DefineComponent<MenuProps, {}, {}, {}, {
     onSelect?: ((args_0: ListOptionSelected, args_1: MouseEvent) => any) | undefined;
     onChange?: ((visible: boolean) => any) | undefined;
 }>, {
-    options: ListOption[];
+    options: import("../list/types").ListOption[];
     closeOnPressEscape: boolean;
-    position: ComponentPosition;
+    position: import("../../types/shared").ComponentPosition;
+    showDelay: number;
+    hideDelay: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/menu/index.vue

@@ -12,6 +12,8 @@ defineProps({
   width: { type: [String, Number], required: false },
   options: { type: Array, required: false, default: () => [] },
   position: { type: null, required: false, default: "bottom-start" },
+  showDelay: { type: Number, required: false, default: 0 },
+  hideDelay: { type: Number, required: false, default: 100 },
   closeOnPressEscape: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["change", "select"]);
@@ -33,7 +35,8 @@ function onOptionClick(ev, item) {
   <PPopover
     class="pxd-menu"
     trigger="click"
-    :hide-delay="100"
+    :show-delay="isXs ? 0 : showDelay"
+    :hide-delay="isXs ? 0 : hideDelay"
     :position="position"
     :visible="popoverVisible"
     :unset-position="isXs"