pxd 0.0.61 → 0.0.62

package/dist/components/time-picker/index.vue

@@ -1,10 +1,11 @@
 <script setup>
 import CalendarIcon from "@gdsicon/vue/calendar";
-import { computed, shallowRef, watch } from "vue";
+import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
 import { usePopoverResponsive } from "../../composables/use-popover-responsive";
 import { useConfigProvider } from "../../contexts/config-provider";
 import { dayjs } from "../../utils/date";
 import { clampValue } from "../../utils/format";
+import { throttleByRaf } from "../../utils/timing";
 import PButton from "../button/index.vue";
 import PInput from "../input/index.vue";
 import PPopover from "../popover/index.vue";
@@ -30,16 +31,20 @@ const props = defineProps({
   format: { type: String, required: false, default: "HH:mm:ss" },
   valueFormat: { type: String, required: false, default: "HH:mm:ss" }
 });
-const emits = defineEmits(["change", "select", "update:modelValue"]);
+const emits = defineEmits(["change", "update:modelValue"]);
 const HEIGHT = 32;
 const VALUE_POSITION_MAP = {
   hour: 0,
   minute: 1,
   second: 2
 };
-const popoverTrigger = ["click"];
+const paddedTimes = {
+  hours: Array.from({ length: 24 }, (_, i) => padStringZero(i)),
+  minutes: Array.from({ length: 60 }, (_, i) => padStringZero(i)),
+  seconds: Array.from({ length: 60 }, (_, i) => padStringZero(i))
+};
 const configProvider = useConfigProvider();
-const { isXs, attrs } = usePopoverResponsive();
+const { isAdaptive, responsiveClasses } = usePopoverResponsive();
 const timeHoursRef = shallowRef();
 const timeMinutesRef = shallowRef();
 const timeSecondsRef = shallowRef();
@@ -50,11 +55,12 @@ const modelValue = computed({
     return dayjsDateTime.value ? dayjsDateTime.value.format(props.format) : "";
   },
   set(value) {
+    emits("change", value);
     emits("update:modelValue", value);
   }
 });
 const scrollTimers = [];
-function onTimeListScroll(ev) {
+const onTimeListScroll = throttleByRaf((ev) => {
   const target = ev.target;
   const value = Math.round(target.scrollTop / HEIGHT);
   const type = target.dataset.type;
@@ -66,18 +72,18 @@ function onTimeListScroll(ev) {
       top: clampedValue * HEIGHT,
       behavior: "smooth"
     });
+    if (!dayjsDateTime.value) {
+      return;
+    }
     dayjsDateTime.value = dayjsDateTime.value.set(type, clampedValue);
   }, 100);
-}
+});
 function padStringZero(value) {
   return String(value).padStart(2, "0");
 }
-function onVisibleChange(visible) {
+function togglePopoverVisible(visible) {
   popoverVisible.value = visible;
 }
-function hidePopover() {
-  onVisibleChange(false);
-}
 function updateDayjsDateTime(value) {
   if (!value) {
     dayjsDateTime.value = null;
@@ -101,7 +107,7 @@ function getFormattedValue(value) {
   }
   return dayjs(_value);
 }
-async function setTimesScrollTop() {
+function setTimesScrollTop() {
   if (!dayjsDateTime.value) {
     dayjsDateTime.value = dayjs();
   }
@@ -142,7 +148,7 @@ function updateModelValue() {
 function onInputValueChange(value) {
   updateDayjsDateTime(value);
   updateModelValue();
-  hidePopover();
+  togglePopoverVisible(false);
 }
 function onPresetClick(ev) {
   const target = ev.target;
@@ -159,54 +165,56 @@ function onPresetClick(ev) {
   }
   updateDayjsDateTime(presetValue);
   updateModelValue();
-  hidePopover();
+  togglePopoverVisible(false);
 }
-function onConfirmClick() {
+function onSetNowClick() {
   updateDayjsDateTime(/* @__PURE__ */ new Date());
   updateModelValue();
-  hidePopover();
+  togglePopoverVisible(false);
 }
 function onCancelClick() {
   updateDayjsDateTime(props.modelValue);
-  hidePopover();
+  togglePopoverVisible(false);
 }
 watch(() => props.modelValue, updateDayjsDateTime, { immediate: true });
+onBeforeUnmount(() => {
+  scrollTimers.forEach((timer) => clearTimeout(timer));
+  onTimeListScroll.cancel();
+});
 </script>
 
 <template>
   <PPopover
-    :trigger="popoverTrigger"
+    v-model="popoverVisible"
+    class="pxd-time-picker w-full"
+    trigger="click"
     :disabled="disabled"
     :class="$attrs.class"
     :style="$attrs.style"
     :toggle-on-trigger="false"
-    :visible="popoverVisible"
-    :unset-position="isXs"
-    :wrapper-class="attrs.wrapperClass"
-    :content-class="attrs.contentClass"
-    :transition-type="attrs.transitionType"
-    :lock-scroll-on-visible="isXs"
+    :adaptive="isAdaptive"
+    :wrapper-class="responsiveClasses.wrapper"
+    :content-class="responsiveClasses.content"
+    :lock-scroll-on-visible="isAdaptive"
     :close-on-press-escape="closeOnPressEscape"
-    class="pxd-time-picker w-full"
-    @escape="onCancelClick"
     @show="setTimesScrollTop"
     @outside-click="updateModelValue"
-    @visible-change="onVisibleChange"
   >
     <PInput
       :size="size"
       :error="error"
       :disabled="disabled"
-      :readonly="isXs"
+      :readonly="isAdaptive"
       :clearable="clearable"
       :model-value="modelValue"
       :placeholder="placeholder"
       :default-prefix-style="false"
       :data-focusing="popoverVisible"
-      :select-on-focus="!isXs"
+      :select-on-focus="!isAdaptive"
       v-bind="$attrs"
       @clear="onInputValueChange"
       @change="onInputValueChange"
+      @keydown.enter="togglePopoverVisible(true)"
     >
       <template v-if="prefixIcon" #prefix>
         <CalendarIcon class="ml-3" />
@@ -214,18 +222,18 @@ watch(() => props.modelValue, updateDayjsDateTime, { immediate: true });
     </PInput>
 
     <template #content>
-      <div class="max-sm:p-2 p-1 gap-1 flex items-center justify-between border-b" @click.stop>
-        <PButton size="xs" variant="ghost" class="sm:px-0! text-13px" @click="onCancelClick">
+      <div class="p-1.5 gap-1 flex items-center justify-between border-b" @click.stop>
+        <PButton size="sm" variant="ghost" class="sm:px-0.5 text-13" @click="onCancelClick">
           {{ configProvider.locale.confirm.cancel }}
         </PButton>
 
-        <PButton size="xs" variant="ghost" class="sm:px-0! text-13px" @click="onConfirmClick">
+        <PButton size="sm" variant="ghost" class="sm:px-0.5 text-13" @click="onSetNowClick">
           {{ configProvider.locale.date.now }}
         </PButton>
       </div>
 
       <div
-        class="sm:text-sm max-sm:text-base flex max-w-full transform-gpu items-stretch tabular-nums outline-none select-none"
+        class="sm:text-15 max-sm:text-base flex max-w-full transform-gpu items-stretch tabular-nums outline-none select-none"
         @click.stop="onTimeListClick"
       >
         <div class="p-2 gap-1 relative mx-auto flex items-center">
@@ -233,11 +241,11 @@ watch(() => props.modelValue, updateDayjsDateTime, { immediate: true });
             <ul
               ref="timeHoursRef"
               data-type="hour"
-              class="w-8 h-40 px-0 m-0 py-16 relative scrollbar-none list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none motion-safe:transition-colors"
+              class="w-16 sm:w-12 h-40 px-0 m-0 py-16 relative scrollbar-none list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none motion-safe:transition-colors"
               @scroll.stop="onTimeListScroll"
             >
-              <li v-for="(_, i) of 24" :key="i" class="h-8 leading-8 cursor-pointer">
-                {{ padStringZero(i) }}
+              <li v-for="i of paddedTimes.hours" :key="i" class="h-8 leading-8 cursor-pointer">
+                {{ i }}
               </li>
             </ul>
           </div>
@@ -245,11 +253,11 @@ watch(() => props.modelValue, updateDayjsDateTime, { immediate: true });
             <ul
               ref="timeMinutesRef"
               data-type="minute"
-              class="w-8 h-40 px-0 m-0 py-16 relative scrollbar-none list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none motion-safe:transition-colors"
+              class="w-16 sm:w-12 h-40 px-0 m-0 py-16 relative scrollbar-none list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none motion-safe:transition-colors"
               @scroll.stop="onTimeListScroll"
             >
-              <li v-for="(_, i) of 60" :key="i" class="h-8 leading-8 cursor-pointer">
-                {{ padStringZero(i) }}
+              <li v-for="i of paddedTimes.minutes" :key="i" class="h-8 leading-8 cursor-pointer">
+                {{ i }}
               </li>
             </ul>
           </div>
@@ -257,11 +265,11 @@ watch(() => props.modelValue, updateDayjsDateTime, { immediate: true });
             <ul
               ref="timeSecondsRef"
               data-type="second"
-              class="w-8 h-40 px-0 m-0 py-16 relative scrollbar-none list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none motion-safe:transition-colors"
+              class="w-16 sm:w-12 h-40 px-0 m-0 py-16 relative scrollbar-none list-none overflow-x-hidden overflow-y-scroll overscroll-contain text-center outline-none motion-safe:transition-colors"
               @scroll.stop="onTimeListScroll"
             >
-              <li v-for="(_, i) of 60" :key="i" class="h-8 leading-8 cursor-pointer">
-                {{ padStringZero(i) }}
+              <li v-for="i of paddedTimes.seconds" :key="i" class="h-8 leading-8 cursor-pointer">
+                {{ i }}
               </li>
             </ul>
           </div>
@@ -276,7 +284,7 @@ watch(() => props.modelValue, updateDayjsDateTime, { immediate: true });
             v-for="(preset, i) in presets"
             :key="preset.label"
             :data-index="i"
-            class="px-1.5 py-0.5 sm:text-13px sm:leading-4 max-sm:leading-5 max-sm:text-sm cursor-pointer appearance-none rounded-sm border-none bg-gray-300 font-inherit whitespace-nowrap text-foreground self-focus-ring outline-none hover:bg-gray-400 active:bg-gray-500 motion-safe:transition-all"
+            class="px-1.5 py-0.5 sm:text-13 sm:leading-4 max-sm:leading-5 max-sm:text-sm cursor-pointer appearance-none rounded-sm border-none bg-gray-300 font-inherit whitespace-nowrap text-foreground self-focus-ring outline-none hover:bg-gray-400 active:bg-gray-500 motion-safe:transition-appearance"
           >
             {{ preset.label }}
           </button>
@@ -292,9 +300,9 @@ watch(() => props.modelValue, updateDayjsDateTime, { immediate: true });
   &::after {
     content: '';
     position: absolute;
-    left: -2px;
-    right: -2px;
-    height: 64px;
+    left: -0.125rem;
+    right: -0.125rem;
+    height: 4rem;
     pointer-events: none;
     z-index: 1;
   }

package/dist/components/time-picker/types.d.ts

@@ -21,7 +21,6 @@ export interface TimePickerProps {
 }
 
 export interface TimePickerEmits {
-  change: [boolean]
-  select: [MouseEvent]
+  change: [string]
   'update:modelValue': [string]
 }

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

@@ -14,8 +14,6 @@ declare const __VLS_base: import("vue").DefineComponent<ToggleProps, {}, {}, {},
 }>, {
     activeValue: import("./types").ValueType;
     inactiveValue: import("./types").ValueType;
-    activeColor: string;
-    inactiveColor: 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/toggle/index.vue

@@ -21,8 +21,8 @@ const props = defineProps({
   activeValue: { type: [Boolean, Number, String], required: false, default: true },
   inactiveValue: { type: [Boolean, Number, String], required: false, default: false },
   beforeChange: { type: Function, required: false },
-  activeColor: { type: String, required: false, default: "var(--color-primary)" },
-  inactiveColor: { type: String, required: false, default: "var(--color-gray-alpha-100)" },
+  activeColor: { type: String, required: false },
+  inactiveColor: { type: String, required: false },
   activeLabel: { type: String, required: false },
   inactiveLabel: { type: String, required: false }
 });
@@ -76,12 +76,12 @@ async function onCheckboxChange(e) {
 
     <span
       v-if="inactiveLabel"
-      class="pxd-toggle--label text-sm mr-1.5 pl-0.5 opacity-100 peer-checked:opacity-50 motion-safe:transition-opacity"
+      class="pxd-toggle--label text-sm mr-1.5 pl-0.5 leading-none opacity-100 peer-checked:opacity-50 motion-safe:transition-opacity"
       >{{ inactiveLabel }}</span
     >
 
     <div
-      class="pxd-toggle--handle rounded-full border border-input bg-(--toggle-inactive-color) p-px peer-focus-ring [--tx:0] peer-checked:bg-(--toggle-active-color) peer-checked:[--tx:100%] peer-disabled:cursor-not-allowed peer-checked:peer-disabled:bg-gray-500 motion-safe:transition-all"
+      class="pxd-toggle--handle rounded-full border bg-(--toggle-inactive-color) p-px peer-focus-ring [--tx:0] peer-checked:bg-(--toggle-active-color) peer-checked:[--tx:100%] peer-disabled:cursor-not-allowed peer-checked:peer-disabled:bg-gray-500 motion-safe:transition-appearance"
       :class="computedSize"
       :style="{
   '--toggle-active-color': activeColor,
@@ -91,7 +91,7 @@ async function onCheckboxChange(e) {
       <div
         :data-checked="isChecked"
         :data-disabled="isDisabled"
-        class="pxd-toggle--handle-icon text-xs shadow-sm bg-white relative flex aspect-square h-full translate-x-(--tx) transform-gpu items-center justify-center overflow-hidden rounded-full text-foreground-secondary motion-safe:transition-all dark:data-[checked=true]:bg-background-100 dark:data-[disabled=true]:bg-gray-900 dark:data-[disabled=true]:text-gray-500"
+        class="pxd-toggle--handle-icon text-xs shadow-sm bg-white relative flex aspect-square h-full translate-x-(--tx) transform-gpu items-center justify-center overflow-hidden rounded-full text-foreground-secondary motion-safe:transition-appearance dark:data-[checked=true]:bg-background-100 dark:data-[disabled=true]:bg-gray-900 dark:data-[disabled=true]:text-gray-500"
       >
         <div class="inset-0 pointer-events-none absolute flex items-center justify-center">
           <Transition name="pxd-transition--fade" mode="out-in">
@@ -105,7 +105,7 @@ async function onCheckboxChange(e) {
 
     <span
       v-if="activeLabel"
-      class="pxd-toggle--label text-sm ml-1.5 pr-0.5 opacity-50 peer-checked:opacity-100 motion-safe:transition-opacity"
+      class="pxd-toggle--label text-sm ml-1.5 pr-0.5 leading-none opacity-50 peer-checked:opacity-100 motion-safe:transition-opacity"
       >{{ activeLabel }}</span
     >
   </label>

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

@@ -2,6 +2,7 @@
 import { tv } from "tailwind-variants";
 import { computed } from "vue";
 import { useModelValue } from "../../composables/use-model-value";
+import { BASIC_HEIGHTS } from "../../constants/size";
 import { useConfigProvider } from "../../contexts/config-provider";
 import { useToggleButtonGroupContext } from "../../contexts/toggle-button";
 import { toArray } from "../../utils/format";
@@ -23,16 +24,17 @@ const props = defineProps({
 });
 const emits = defineEmits(["change", "update:modelValue"]);
 const toggleButtonVariant = tv({
-  base: "pxd-toggle-button gap-2 font-medium relative inline-flex shrink-0 appearance-none items-center justify-center border bg-background-100 outline-none group-data-[gap=0]/toggle-button-group:not-first:-ml-px group-data-[gap=0]/toggle-button-group:not-first:rounded-l-none group-data-[gap=0]/toggle-button-group:not-last:rounded-r-none group-data-[gap=0]/toggle-button-group:first:rounded-r-none data-[state=off]:enabled:hover:z-1 data-[state=on]:z-1 motion-safe:transition-colors [&_svg]:pointer-events-none",
+  base: "pxd-toggle-button gap-2 font-medium relative inline-flex shrink-0 appearance-none items-center justify-center border bg-background-100 outline-none group-data-[gap=0]/toggle-button-group:not-first:-ml-px group-data-[gap=0]/toggle-button-group:not-first:rounded-l-none group-data-[gap=0]/toggle-button-group:not-last:rounded-r-none data-[state=off]:enabled:hover:z-1 data-[state=on]:z-1 motion-safe:transition-colors [&_svg]:pointer-events-none",
   variants: {
     size: {
-      sm: "h-7.5 px-1.75 text-sm rounded-md",
-      md: "h-9 px-2.5 text-sm rounded-md",
-      lg: "h-10 px-2.75 text-base rounded-lg"
+      xs: `${BASIC_HEIGHTS.xs} px-1.25 text-xs rounded-sm`,
+      sm: `${BASIC_HEIGHTS.sm} px-1.75 text-sm rounded-md`,
+      md: `${BASIC_HEIGHTS.md} px-2.5 text-sm rounded-md`,
+      lg: `${BASIC_HEIGHTS.lg} px-2.75 text-base rounded-lg`
     },
     variant: {
       ghost: "border-transparent",
-      outline: "border-input"
+      outline: ""
     },
     disabled: {
       true: "cursor-not-allowed",
@@ -46,7 +48,7 @@ const toggleButtonVariant = tv({
   compoundVariants: [
     { checked: true, disabled: true, class: "bg-gray-200" },
     { checked: false, disabled: true, class: "text-gray-400" },
-    { checked: false, disabled: false, class: "hover:text-gray-800" },
+    { checked: false, disabled: false, class: "hover:text-gray-900" },
     { variant: "outline", checked: false, disabled: true, class: "border-gray-400" },
     { variant: "outline", checked: true, disabled: true, class: "border-gray-500 bg-gray-100" }
   ],

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

@@ -6,8 +6,8 @@ type __VLS_Slots = {} & {
     content?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
-    variant: import("../../types/shared").ComponentVariant;
     position: import("../../types/shared").ComponentPosition;
+    variant: "default" | "error" | "warning" | "success" | "invert" | "violet";
     showDelay: number;
     hideDelay: number;
     showArrow: boolean;

package/dist/components/tooltip/index.vue

@@ -10,42 +10,50 @@ defineOptions({
 const props = defineProps({
   offset: { type: Number, required: false },
   content: { type: String, required: false },
-  variant: { type: String, required: false, default: "primary" },
+  variant: { type: String, required: false, default: "default" },
   position: { type: null, required: false, default: "top" },
   disabled: { type: Boolean, required: false },
   showDelay: { type: Number, required: false, default: 300 },
-  hideDelay: { type: Number, required: false, default: 100 },
+  hideDelay: { type: Number, required: false, default: 300 },
   showArrow: { type: Boolean, required: false, default: true },
   desktopOnly: { type: Boolean, required: false },
   contentClass: { type: [String, Array, Object], required: false },
   contentStyle: { type: [Object, String], required: false }
 });
 const VARIANTS = {
-  primary: {
-    bg: "var(--color-primary)",
-    text: "text-gray-100"
+  invert: {
+    bg: "var(--color-background-100)",
+    base: "text-foreground border"
+  },
+  default: {
+    bg: "var(--color-gray-1000)",
+    base: "text-gray-100"
   },
   error: {
     bg: "var(--color-red-700)",
-    text: "text-gray-100 dark:text-gray-1000"
+    base: "text-gray-100 dark:text-gray-1000"
   },
   warning: {
     bg: "var(--color-amber-700)",
-    text: "text-gray-1000 dark:text-gray-100"
+    base: "text-gray-1000 dark:text-gray-100"
   },
   success: {
     bg: "var(--color-green-700)",
-    text: "text-gray-100 dark:text-gray-1000"
+    base: "text-gray-100 dark:text-gray-1000"
+  },
+  violet: {
+    bg: "var(--color-purple-700)",
+    base: "text-gray-100 dark:text-gray-1000"
   }
 };
-const computedVariant = computed(() => getFallbackValue(props.variant, VARIANTS, "primary"));
+const computedVariant = computed(() => getFallbackValue(props.variant, VARIANTS, "default"));
 const isDisabled = computed(() => {
   return props.disabled || props.desktopOnly && isTouchDevice();
 });
 const computedClasses = computed(() => {
   return [
-    "px-3 py-2 rounded-md text-sm break-words whitespace-pre-line bg-(--popover-arrow-bg)",
-    computedVariant.value.text,
+    "px-3 py-2 rounded-md text-13 break-words shadow-tooltip whitespace-pre-line bg-(--popover-arrow-color)",
+    computedVariant.value.base,
     props.contentClass
   ].join(" ");
 });

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

@@ -1,10 +1,10 @@
-import type { ComponentClass, ComponentPosition, ComponentVariant } from '../../types/shared'
+import type { ComponentClass, ComponentPosition } from '../../types/shared'
 import type { CSSProperties } from 'vue'
 
 export interface TooltipProps {
   offset?: number
   content?: string
-  variant?: ComponentVariant
+  variant?: 'default' | 'error' | 'warning' | 'success' | 'invert' | 'violet'
   position?: ComponentPosition
   disabled?: boolean
   showDelay?: number

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

@@ -1,7 +1,8 @@
 import type { VirtualListProps } from './types';
+import { type VirtualListItem } from '../../composables/use-virtual-list';
 declare var __VLS_1: {
     item: any;
-    virtualItem: import("../../composables/use-virtual-list").VirtualListItem;
+    virtualItem: VirtualListItem;
 }, __VLS_3: {};
 type __VLS_Slots = {} & {
     item?: (props: typeof __VLS_1) => any;
@@ -10,11 +11,11 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<VirtualListProps, {
     totalSize: import("vue").ComputedRef<number>;
-    virtualItems: import("vue").ComputedRef<import("../../composables/use-virtual-list").VirtualListItem[]>;
+    virtualItems: import("vue").ComputedRef<VirtualListItem[]>;
     getVirtualizer: () => import("@tanstack/virtual-core").Virtualizer<HTMLElement, HTMLElement>;
-    scrollToIndex: any;
-    scrollToOffset: any;
-    scrollBy: any;
+    scrollToIndex: (index: number, { align: initialAlign, behavior, }?: import("@tanstack/virtual-core").ScrollToOptions) => void;
+    scrollToOffset: (toOffset: number, { align, behavior }?: import("@tanstack/virtual-core").ScrollToOptions) => void;
+    scrollBy: (delta: number, { behavior }?: import("@tanstack/virtual-core").ScrollToOptions) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     bottom: () => any;
     retry: () => any;
@@ -22,14 +23,13 @@ declare const __VLS_base: import("vue").DefineComponent<VirtualListProps, {
     onBottom?: (() => any) | undefined;
     onRetry?: (() => any) | undefined;
 }>, {
-    bottomThreshold: number;
     listData: any[];
-    itemSize: number;
     errorText: string;
     loadingText: string;
     finishedText: string;
     dataKey: string;
-    overScan: number;
+    columnGap: number;
+    columnCount: 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/virtual-list/index.vue

@@ -7,16 +7,20 @@ defineOptions({
   inheritAttrs: false
 });
 const props = defineProps({
+  listClass: { type: [String, Array, Object], required: false },
+  itemClass: { type: [String, Array, Object], required: false },
   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 },
-  overScan: { type: Number, required: false, default: 2 },
+  itemSize: { type: Number, required: false },
+  overScan: { type: Number, required: false },
+  columnGap: { type: Number, required: false, default: 0 },
+  columnCount: { type: Number, required: false, default: 1 },
   onBottom: { type: Function, required: false },
-  bottomThreshold: { type: Number, required: false, default: 50 }
+  bottomThreshold: { type: Number, required: false }
 });
 const emits = defineEmits(["retry", "bottom"]);
 const containerRef = shallowRef();
@@ -29,6 +33,22 @@ const {
   scrollToOffset,
   scrollBy
 } = useVirtualList(containerRef, props);
+function getItemStyle(virtualItem) {
+  const lanes = Math.max(1, Math.floor(props.columnCount));
+  const gap = props.columnGap;
+  const y = `translateY(${virtualItem.start}px)`;
+  if (lanes <= 1) {
+    return { transform: y };
+  }
+  const lane = virtualItem.lane;
+  const width = `calc((100% - ${(lanes - 1) * gap}px) / ${lanes})`;
+  const left = `calc(${lane} * ((100% - ${(lanes - 1) * gap}px) / ${lanes} + ${gap}px))`;
+  return {
+    width,
+    left,
+    transform: y
+  };
+}
 function onRetryClick() {
   if (props.status !== "error") {
     return;
@@ -49,6 +69,7 @@ defineExpose({
   <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"
+      :class="listClass"
       :style="{ height: `${totalSize}px`, containIntrinsicSize: `auto ${totalSize}px` }"
     >
       <div
@@ -57,7 +78,8 @@ defineExpose({
         :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)` }"
+        :class="itemClass"
+        :style="getItemStyle(virtualItem)"
       >
         <slot name="item" :item="listData[virtualItem.index]" :virtual-item="virtualItem" />
       </div>
@@ -66,7 +88,7 @@ defineExpose({
     <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' }"
+      :class="{ 'cursor-pointer hover:text-gray-800': status === 'error' }"
       @click="onRetryClick"
     >
       <slot name="message">

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

@@ -1,5 +1,8 @@
 import type { VirtualListOptions } from '../../composables/use-virtual-list';
+import type { ComponentClass } from '../../types/shared/props';
 export interface VirtualListProps extends VirtualListOptions {
+    listClass?: ComponentClass;
+    itemClass?: ComponentClass;
     errorText?: string;
     loadingText?: string;
     finishedText?: string;

package/dist/composables/index.d.ts

@@ -9,15 +9,18 @@ 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-list-filter.js';
+export * from './use-list-navigation.js';
 export * from './use-loading-bar.js';
 export * from './use-lock-scroll.js';
 export * from './use-media-query.js';
 export * from './use-message.js';
 export * from './use-model-value.js';
 export * from './use-outside-click.js';
-export * from './use-pointer-gesture.js';
+export * from './use-overlay-manager.js';
 export * from './use-popover-responsive.js';
 export * from './use-repeat-action.js';
+export * from './use-swipe-gesture.js';
 export * from './use-toggle-value.js';
 export * from './use-virtual-list.js';
 export * from './use-window-size.js';

package/dist/composables/index.js

@@ -9,15 +9,18 @@ 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-list-filter.js";
+export * from "./use-list-navigation.js";
 export * from "./use-loading-bar.js";
 export * from "./use-lock-scroll.js";
 export * from "./use-media-query.js";
 export * from "./use-message.js";
 export * from "./use-model-value.js";
 export * from "./use-outside-click.js";
-export * from "./use-pointer-gesture.js";
+export * from "./use-overlay-manager.js";
 export * from "./use-popover-responsive.js";
 export * from "./use-repeat-action.js";
+export * from "./use-swipe-gesture.js";
 export * from "./use-toggle-value.js";
 export * from "./use-virtual-list.js";
 export * from "./use-window-size.js";

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

@@ -1,5 +1,5 @@
 import { isNotNil } from "es-toolkit";
-import { computed, onBeforeUnmount, watch, shallowRef } from "vue";
+import { computed, onScopeDispose, watch, shallowRef } from "vue";
 import { toArray } from "../utils/format.js";
 import { toValue, unrefElement } from "../utils/ref.js";
 export const useIntersectionObserver = createObserver(
@@ -62,7 +62,7 @@ function createObserver(ObserverConstructor, type) {
       cleanup();
       unwatch();
     }
-    onBeforeUnmount(() => {
+    onScopeDispose(() => {
       stop();
     });
     return {

package/dist/composables/use-client-online.js

@@ -1,4 +1,4 @@
-import { onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { onScopeDispose, onMounted, shallowRef } from "vue";
 import { cachedOn } from "../utils/event.js";
 import { isServer } from "../utils/is.js";
 export function useClientOnline() {
@@ -12,7 +12,7 @@ export function useClientOnline() {
     cleanOnline = cachedOn(window, "online", toggle);
     cleanOffline = cachedOn(window, "offline", toggle);
   });
-  onBeforeUnmount(() => {
+  onScopeDispose(() => {
     cleanOnline?.();
     cleanOffline?.();
   });