pxd 0.0.55 → 0.0.61

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

@@ -1,26 +1,82 @@
 <script setup>
+import LoaderCircleIcon from "@gdsicon/vue/loader-circle";
+import { shallowRef } from "vue";
 import { useVirtualList } from "../../composables/use-virtual-list";
+defineOptions({
+  name: "PVirtualList",
+  inheritAttrs: false
+});
 const props = defineProps({
+  errorText: { type: String, required: false, default: "Request failed. Click to reload" },
+  loadingText: { type: String, required: false, default: "Loading..." },
+  finishedText: { type: String, required: false, default: "Finished" },
+  status: { type: String, required: false },
   dataKey: { type: String, required: false, default: "id" },
   listData: { type: Array, required: false, default: () => [] },
-  itemSize: { type: Number, required: false, default: 50 }
+  itemSize: { type: Number, required: false, default: 50 },
+  overScan: { type: Number, required: false, default: 2 },
+  onBottom: { type: Function, required: false },
+  bottomThreshold: { type: Number, required: false, default: 50 }
+});
+const emits = defineEmits(["retry", "bottom"]);
+const containerRef = shallowRef();
+const {
+  totalSize,
+  virtualItems,
+  measureElement,
+  getVirtualizer,
+  scrollToIndex,
+  scrollToOffset,
+  scrollBy
+} = useVirtualList(containerRef, props);
+function onRetryClick() {
+  if (props.status !== "error") {
+    return;
+  }
+  emits("retry");
+}
+defineExpose({
+  totalSize,
+  virtualItems,
+  getVirtualizer,
+  scrollToIndex,
+  scrollToOffset,
+  scrollBy
 });
-const { containerRef, renderList, listHeight, listStyle, setItemRef } = useVirtualList(props);
 </script>
 
 <template>
-  <div ref="containerRef" class="pxd-virtual-list relative overflow-auto">
-    <div class="pxd-virtual-list--content top-0 absolute z-0 w-full" :style="listStyle">
+  <div ref="containerRef" class="pxd-virtual-list relative overflow-auto" v-bind="$attrs">
+    <div
+      class="pxd-virtual-list--content relative w-full content-visibility-auto"
+      :style="{ height: `${totalSize}px`, containIntrinsicSize: `auto ${totalSize}px` }"
+    >
       <div
-        v-for="item in renderList"
-        :key="item[dataKey]"
-        :ref="(el) => setItemRef(el, item[dataKey])"
-        class="pxd-virtual-list--item w-full"
+        v-for="virtualItem in virtualItems"
+        :key="virtualItem.key"
+        :ref="(el) => measureElement(el)"
+        :data-index="virtualItem.index"
+        class="pxd-virtual-list--item left-0 top-0 absolute w-full"
+        :style="{ transform: `translateY(${virtualItem.start}px)` }"
       >
-        <slot :item="item" />
+        <slot name="item" :item="listData[virtualItem.index]" :virtual-item="virtualItem" />
       </div>
     </div>
 
-    <div class="pxd-virtual-list--placeholder" :style="`height:${listHeight}px`" />
+    <div
+      v-if="status"
+      class="pxd-virtual-list--message py-4 text-sm left-0 right-0 flex items-center justify-center text-gray-600 empty:hidden motion-safe:transition-colors"
+      :class="{ 'cursor-pointer hover:text-gray-900': status === 'error' }"
+      @click="onRetryClick"
+    >
+      <slot name="message">
+        <span v-if="status === 'error'">{{ errorText }}</span>
+        <span v-else-if="status === 'finished'">{{ finishedText }}</span>
+        <template v-else-if="status === 'loading'">
+          <LoaderCircleIcon class="mr-1.5 motion-safe:animate-spin" />
+          <span>{{ loadingText }}</span>
+        </template>
+      </slot>
+    </div>
   </div>
 </template>

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

@@ -1,5 +1,10 @@
-export interface VirtualListProps {
-    dataKey?: string;
-    listData?: any[];
-    itemSize?: number;
+import type { VirtualListOptions } from '../../composables/use-virtual-list';
+export interface VirtualListProps extends VirtualListOptions {
+    errorText?: string;
+    loadingText?: string;
+    finishedText?: string;
+}
+export interface VirtualListEmits {
+    retry: [];
+    bottom: [];
 }

package/dist/composables/index.d.ts

@@ -1,7 +1,6 @@
 export * from './use-browser-observer.js';
 export * from './use-client-online.js';
 export * from './use-color-scheme.js';
-export * from './use-config-provider-context.js';
 export * from './use-copy-click.js';
 export * from './use-countdown.js';
 export * from './use-deferred-value.js';
@@ -9,6 +8,7 @@ export * from './use-delay-change.js';
 export * from './use-delay-destroy.js';
 export * from './use-document-hidden.js';
 export * from './use-focus-trap.js';
+export * from './use-forward-ref-expose.js';
 export * from './use-loading-bar.js';
 export * from './use-lock-scroll.js';
 export * from './use-media-query.js';
@@ -19,5 +19,5 @@ export * from './use-pointer-gesture.js';
 export * from './use-popover-responsive.js';
 export * from './use-repeat-action.js';
 export * from './use-toggle-value.js';
-export * from './use-unique-id-context.js';
 export * from './use-virtual-list.js';
+export * from './use-window-size.js';

package/dist/composables/index.js

@@ -1,7 +1,6 @@
 export * from "./use-browser-observer.js";
 export * from "./use-client-online.js";
 export * from "./use-color-scheme.js";
-export * from "./use-config-provider-context.js";
 export * from "./use-copy-click.js";
 export * from "./use-countdown.js";
 export * from "./use-deferred-value.js";
@@ -9,6 +8,7 @@ export * from "./use-delay-change.js";
 export * from "./use-delay-destroy.js";
 export * from "./use-document-hidden.js";
 export * from "./use-focus-trap.js";
+export * from "./use-forward-ref-expose.js";
 export * from "./use-loading-bar.js";
 export * from "./use-lock-scroll.js";
 export * from "./use-media-query.js";
@@ -19,5 +19,5 @@ export * from "./use-pointer-gesture.js";
 export * from "./use-popover-responsive.js";
 export * from "./use-repeat-action.js";
 export * from "./use-toggle-value.js";
-export * from "./use-unique-id-context.js";
 export * from "./use-virtual-list.js";
+export * from "./use-window-size.js";

package/dist/composables/use-browser-observer.d.ts

@@ -1,12 +1,12 @@
-import type { MaybeRefOrGetter } from 'vue';
 import type { Nullable } from '../types/shared/utils';
-export declare const useIntersectionObserver: (target: TargetRef, callback: IntersectionObserverCallback, options?: MaybeRefOrGetter<IntersectionObserverInit>) => ObserverResults<IntersectionObserver>;
-export declare const useMutationObserver: (target: TargetRef, callback: MutationCallback, options?: MaybeRefOrGetter<MutationObserverInit>) => ObserverResults<MutationObserver>;
-export declare const useResizeObserver: (target: TargetRef, callback: ResizeObserverCallback, options?: MaybeRefOrGetter<ResizeObserverOptions>) => ObserverResults<ResizeObserver>;
+import type { MaybeRefOrGetter, Ref } from 'vue';
+export declare const useIntersectionObserver: (target: TargetRef, callback: IntersectionObserverCallback, options?: IntersectionObserverInit) => ObserverResults<IntersectionObserver>;
+export declare const useMutationObserver: (target: TargetRef, callback: MutationCallback, options?: MutationObserverInit) => ObserverResults<MutationObserver>;
+export declare const useResizeObserver: (target: TargetRef, callback: ResizeObserverCallback, options?: ResizeObserverOptions) => ObserverResults<ResizeObserver>;
 type Observers = IntersectionObserver | ResizeObserver | MutationObserver;
 type TargetRef = MaybeRefOrGetter<Nullable<HTMLElement>> | MaybeRefOrGetter<Nullable<HTMLElement>>[] | MaybeRefOrGetter<Nullable<HTMLElement>[]>;
 interface ObserverResults<T extends Observers> {
-    observer: T | undefined;
+    observer: Ref<T | undefined>;
     stop: () => void;
 }
 export {};

package/dist/composables/use-browser-observer.js

@@ -1,19 +1,22 @@
 import { isNotNil } from "es-toolkit";
-import { computed, onBeforeUnmount, watch } from "vue";
+import { computed, onBeforeUnmount, watch, shallowRef } from "vue";
 import { toArray } from "../utils/format.js";
 import { toValue, unrefElement } from "../utils/ref.js";
-export const useIntersectionObserver = createObserver(globalThis.IntersectionObserver);
-export const useMutationObserver = createObserver(globalThis.MutationObserver);
-export const useResizeObserver = createObserver(globalThis.ResizeObserver);
-function createObserver(ObserverConstructor) {
+export const useIntersectionObserver = createObserver(
+  globalThis.IntersectionObserver,
+  "IntersectionObserver"
+);
+export const useMutationObserver = createObserver(globalThis.MutationObserver, "MutationObserver");
+export const useResizeObserver = createObserver(globalThis.ResizeObserver, "ResizeObserver");
+function createObserver(ObserverConstructor, type) {
   function observerWrapper(target, callback, options) {
-    let observer;
+    const observer = shallowRef();
     const targets = computed(
       () => toArray(toValue(target)).map(unrefElement).filter(isNotNil)
     );
     const unwatch = watch(
-      () => [targets.value],
-      ([newTargets]) => {
+      targets,
+      (newTargets) => {
         if (typeof window === "undefined" || typeof ObserverConstructor === "undefined") {
           return;
         }
@@ -21,25 +24,25 @@ function createObserver(ObserverConstructor) {
         if (!newTargets?.length) {
           return;
         }
-        if (ObserverConstructor.name === "IntersectionObserver") {
-          observer = new ObserverConstructor(
+        if (type === "IntersectionObserver") {
+          observer.value = new ObserverConstructor(
             callback,
             options
           );
-          newTargets.forEach((el) => observer.observe(el));
-        } else if (ObserverConstructor.name === "MutationObserver") {
-          observer = new ObserverConstructor(
+          newTargets.forEach((el) => observer.value.observe(el));
+        } else if (type === "MutationObserver") {
+          observer.value = new ObserverConstructor(
             callback
           );
           newTargets.forEach(
-            (el) => observer.observe(el, options)
+            (el) => observer.value.observe(el, options)
           );
-        } else {
-          observer = new ObserverConstructor(
+        } else if (type === "ResizeObserver") {
+          observer.value = new ObserverConstructor(
             callback
           );
           newTargets.forEach(
-            (el) => observer.observe(el, options)
+            (el) => observer.value.observe(el, options)
           );
         }
       },
@@ -49,11 +52,11 @@ function createObserver(ObserverConstructor) {
       }
     );
     function cleanup() {
-      if (!observer) {
+      if (!observer.value) {
         return;
       }
-      observer.disconnect();
-      observer = void 0;
+      observer.value.disconnect();
+      observer.value = void 0;
     }
     function stop() {
       cleanup();

package/dist/composables/use-copy-click.js

@@ -1,9 +1,13 @@
 import { shallowRef } from "vue";
+import { isServer } from "../utils/is.js";
 export function useCopyClick() {
   let copiedTimer;
   let copyPromise = null;
   const isCopied = shallowRef(false);
   async function copyText(text = "") {
+    if (isServer()) {
+      return;
+    }
     if (copyPromise) {
       return copyPromise;
     }

package/dist/composables/use-countdown.d.ts

@@ -1,5 +1,5 @@
 import type { EmitFn, Ref } from 'vue';
-export interface UseCountdownOptions {
+export interface CountdownOptions {
     /**
      * 是否启用正计时
      * Whether to enable count up mode.
@@ -58,5 +58,5 @@ interface Results {
     reset: () => void;
     timestamp: Ref<number>;
 }
-export declare function useCountdown<T extends Record<string, any>>(props: UseCountdownOptions, emits: EmitFn<T>): Results;
+export declare function useCountdown<T extends Record<string, any>>(props: CountdownOptions, emits: EmitFn<T>): Results;
 export {};

package/dist/composables/use-delay-destroy.d.ts

@@ -1,5 +1,5 @@
-import type { MaybeRefOrGetter, Ref } from 'vue';
 import type { Nullable } from '../types/shared';
+import type { MaybeRefOrGetter, Ref } from 'vue';
 interface Options {
     delay?: number;
     renderChange?: (v: boolean) => void;

package/dist/composables/use-focus-trap.d.ts

@@ -1,12 +1,16 @@
-import type { Options as FocusTrapOptions } from 'focus-trap';
 import type { MaybeElementRef } from '../types/shared/utils';
+import type { Options as FocusTrapOptions } from 'focus-trap';
+import { type MaybeRefOrGetter } from 'vue';
+export interface UseFocusTrapOptions extends FocusTrapOptions {
+    autoFocusElement?: string | boolean;
+}
 /**
- * Best-practice defaults for dialogs (Modal/Drawer):
+ * Best-practice defaults for dialogs (Modal/Drawer/Popover):
  * - Keep trap active unless component decides to close (avoid implicit deactivation).
  * - Always provide a fallback focus target to avoid runtime errors when no tabbables exist.
  * - Prevent scroll jumps caused by focusing.
  * - Share a trap stack among PXD traps so nested dialogs coordinate pause/unpause.
  */
-export declare function useFocusTrap(container: MaybeElementRef<HTMLElement>, userOptions?: FocusTrapOptions): {
+export declare function useFocusTrap(container: MaybeElementRef<HTMLElement>, userOptions?: MaybeRefOrGetter<UseFocusTrapOptions>): {
     stop: import("vue").WatchHandle;
 };

package/dist/composables/use-focus-trap.js

@@ -1,7 +1,14 @@
 import { createFocusTrap } from "focus-trap";
 import { onBeforeUnmount, watch } from "vue";
 import { toValue } from "../utils/ref.js";
-const pxdFocusTrapStack = [];
+const focusTrapStack = [];
+const AUTO_FOCUS_FIRST_SELECTOR = [
+  'input:not([type="hidden"]):not(:disabled)',
+  "button:not(:disabled)",
+  "select:not(:disabled)",
+  "textarea:not(:disabled)",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
 export function useFocusTrap(container, userOptions = {}) {
   let trapper = null;
   const unwatch = watch(
@@ -10,6 +17,7 @@ export function useFocusTrap(container, userOptions = {}) {
       if (!target) {
         return;
       }
+      const { autoFocusElement, ...restOptions } = toValue(userOptions);
       const defaultOptions = {
         allowOutsideClick: true,
         escapeDeactivates: false,
@@ -18,20 +26,24 @@ export function useFocusTrap(container, userOptions = {}) {
         returnFocusOnDeactivate: true,
         preventScroll: true,
         fallbackFocus: () => target,
-        initialFocus: () => target,
+        initialFocus: () => {
+          if (autoFocusElement) {
+            const elSelector = typeof autoFocusElement === "boolean" ? AUTO_FOCUS_FIRST_SELECTOR : autoFocusElement;
+            return target.querySelector(elSelector) ?? target;
+          }
+          return target;
+        },
         // Coordinate nested PXD dialogs
-        trapStack: pxdFocusTrapStack
+        trapStack: focusTrapStack
       };
-      trapper = createFocusTrap(target, { ...defaultOptions, ...userOptions });
+      trapper = createFocusTrap(target, { ...defaultOptions, ...restOptions });
       trapper.activate();
       onCleanup(() => {
         trapper.deactivate();
         trapper = null;
       });
     },
-    {
-      flush: "post"
-    }
+    { flush: "post" }
   );
   onBeforeUnmount(() => {
     unwatch();

package/dist/composables/use-forward-ref-expose.d.ts

@@ -0,0 +1,2 @@
+import type { MaybeRefOrGetter } from 'vue';
+export declare function useForwardRefExpose<T extends object>(refEl: MaybeRefOrGetter<T | null | undefined>): T;

package/dist/composables/use-forward-ref-expose.js

@@ -0,0 +1,41 @@
+import { toValue } from "../utils/ref.js";
+export function useForwardRefExpose(refEl) {
+  return new Proxy({}, {
+    get(_, prop) {
+      const target = toValue(refEl);
+      if (!target) {
+        return void 0;
+      }
+      const value = Reflect.get(target, prop, target);
+      return typeof value === "function" ? value.bind(target) : value;
+    },
+    set(_, prop, value) {
+      const target = toValue(refEl);
+      if (!target) {
+        return false;
+      }
+      return Reflect.set(target, prop, value, target);
+    },
+    has(_, prop) {
+      const target = toValue(refEl);
+      if (!target) {
+        return false;
+      }
+      return prop in target;
+    },
+    ownKeys() {
+      const target = toValue(refEl);
+      if (!target) {
+        return [];
+      }
+      return Reflect.ownKeys(target);
+    },
+    getOwnPropertyDescriptor(_, prop) {
+      const target = toValue(refEl);
+      if (!target) {
+        return void 0;
+      }
+      return Reflect.getOwnPropertyDescriptor(target, prop);
+    }
+  });
+}

package/dist/composables/use-message.d.ts

@@ -1,6 +1,6 @@
-import type { VNode } from 'vue';
 import type { ButtonProps } from '../components/button/types';
 import type { ComponentClass } from '../types/shared/props';
+import type { VNode } from 'vue';
 type MessageContent = string | VNode;
 type PromiseMessageHandler = MessageContent | ((data: unknown) => MessageContent);
 interface Action {
@@ -22,15 +22,12 @@ interface Options {
     success?: PromiseMessageHandler;
     finally?: PromiseMessageHandler;
 }
-export interface MessageItemType extends Options {
+export interface MessageItemConfig extends Options {
+    height?: number;
     _timerId?: ReturnType<typeof setTimeout>;
     _remainingMs?: number;
     _startedAtMs?: number;
 }
-export interface MessageItemHeightType {
-    id: MessageItemType['id'];
-    height: number;
-}
 interface UseMessage {
     (msg: MessageContent, options?: Options): void;
     info: (msg: MessageContent, options?: Options) => void;
@@ -44,7 +41,7 @@ export type MessageActionType = 'create' | 'remove' | 'clear';
 export interface MessageUpdateParams {
     type: MessageActionType;
     group: string;
-    data?: MessageItemType | {
+    data?: MessageItemConfig | {
         id: Options['id'];
     };
 }

package/dist/composables/use-model-value.d.ts

@@ -1,14 +1,15 @@
 import type { WritableComputedRef } from 'vue';
-interface Options {
-    get?: (value: any) => any;
-    set?: (value: any) => void;
-    withChange?: boolean;
+interface BaseProps {
+    modelValue?: any;
 }
-interface BaseEmit {
+interface BaseEmits {
     (event: 'change', ...args: any[]): void;
     (event: 'update:modelValue', ...args: any[]): void;
 }
-export declare function useModelValue<P extends {
-    modelValue: any;
-}, E extends BaseEmit>(props: P, emits: E, options?: Options): WritableComputedRef<NonNullable<P['modelValue']>>;
+interface ModelValueOptions {
+    get?: (value: any) => any;
+    set?: (value: any) => void;
+    withChange?: boolean;
+}
+export declare function useModelValue<P extends BaseProps, E extends BaseEmits>(props: P, emits: E, options?: ModelValueOptions): WritableComputedRef<NonNullable<P['modelValue']>>;
 export {};

package/dist/composables/use-popover-responsive.d.ts

@@ -1,11 +1,11 @@
 export declare function usePopoverResponsive(): {
     isXs: import("vue").Ref<boolean, boolean>;
     attrs: import("vue").ComputedRef<{
-        readonly contentClass: "bg-background-100 shadow-border-menu w-full rounded-tl-lg rounded-tr-lg";
+        readonly contentClass: "bg-background-100 border w-full rounded-tl-xl rounded-tr-xl";
         readonly wrapperClass: "fixed w-screen h-screen items-end pointer-events-none pxd-container-mask";
         readonly transitionType: "fade-slide";
     } | {
-        readonly contentClass: "bg-background-100 shadow-border-menu rounded-lg";
+        readonly contentClass: "bg-background-100 border rounded-xl";
         readonly wrapperClass: "";
         readonly transitionType: "fade-scale";
     }>;

package/dist/composables/use-popover-responsive.js

@@ -3,16 +3,16 @@ import { PRESET_MEDIA_QUERIES, useMediaQuery } from "./use-media-query.js";
 export function usePopoverResponsive() {
   const isXs = useMediaQuery(PRESET_MEDIA_QUERIES.IS_XS);
   const attrs = computed(() => {
-    const basicContentClass = "bg-background-100 shadow-border-menu";
+    const basicContentClass = "bg-background-100 border";
     if (isXs.value) {
       return {
-        contentClass: `${basicContentClass} w-full rounded-tl-lg rounded-tr-lg`,
+        contentClass: `${basicContentClass} w-full rounded-tl-xl rounded-tr-xl`,
         wrapperClass: "fixed w-screen h-screen items-end pointer-events-none pxd-container-mask",
         transitionType: "fade-slide"
       };
     }
     return {
-      contentClass: `${basicContentClass} rounded-lg`,
+      contentClass: `${basicContentClass} rounded-xl`,
       wrapperClass: "",
       transitionType: "fade-scale"
     };

package/dist/composables/use-repeat-action.d.ts

@@ -1,5 +1,5 @@
-import type { MaybeRefOrGetter } from 'vue';
 import type { Callback } from '../types/shared/utils';
+import type { MaybeRefOrGetter } from 'vue';
 interface Options {
     action: Callback;
     disabled?: MaybeRefOrGetter<boolean>;

package/dist/composables/use-repeat-action.js

@@ -5,10 +5,10 @@ export function useRepeatAction(actionOrOptions) {
   const {
     action,
     disabled,
-    finalInterval = 1e3 / 17,
+    finalInterval = 1e3 / 16.6,
     // 60fps
     initialInterval = 680,
-    accelerationDuration = 2e3
+    accelerationDuration = 1500
   } = typeof actionOrOptions === "function" ? { action: actionOrOptions } : actionOrOptions;
   let timer = null;
   let startTime = 0;

package/dist/composables/use-virtual-list.d.ts

@@ -1,16 +1,25 @@
+import type { MaybeElementRef } from '../types/shared';
+import type { VirtualItem } from '@tanstack/virtual-core';
 import type { ComponentPublicInstance } from 'vue';
-export interface VirtualListProps {
+import { Virtualizer } from '@tanstack/virtual-core';
+export interface VirtualListItem extends VirtualItem {
+    key: string | number;
+}
+export interface VirtualListOptions {
+    status?: 'loading' | 'finished' | 'error' | '';
     dataKey?: string;
-    listData: any[];
-    itemSize: number;
+    listData?: any[];
+    itemSize?: number;
+    overScan?: number;
+    onBottom?: () => void | Promise<void>;
+    bottomThreshold?: number;
 }
-export declare function useVirtualList<Props extends VirtualListProps>(props: Props): {
-    containerRef: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
-    renderList: import("vue").ComputedRef<any[]>;
-    listHeight: import("vue").ComputedRef<number>;
-    listStyle: import("vue").ComputedRef<string>;
-    stop: () => void;
-    setItemRef: (el: Element | ComponentPublicInstance | null, key: number | string) => void;
-    updateContainerHeight: () => void;
-    getStartIndex: (scrollTop: number) => number;
+export declare function useVirtualList<Options extends VirtualListOptions>(containerRef: MaybeElementRef<HTMLElement>, options: Options): {
+    virtualItems: import("vue").ComputedRef<VirtualListItem[]>;
+    totalSize: import("vue").ComputedRef<number>;
+    measureElement: (el: Element | ComponentPublicInstance | null) => void;
+    scrollToIndex: any;
+    scrollToOffset: any;
+    scrollBy: any;
+    getVirtualizer: () => Virtualizer<HTMLElement, HTMLElement>;
 };