pxd 0.0.55 → 0.0.61

package/dist/composables/use-virtual-list.js

@@ -1,176 +1,108 @@
-import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from "vue";
-const DEFAULT_ITEM_SIZE = 50;
-const BUFFER_SIZE = 2;
-export function useVirtualList(props) {
-  const containerRef = shallowRef();
-  const itemRefs = /* @__PURE__ */ new Map();
-  const start = ref(0);
-  const offset = ref(0);
-  const containerHeight = ref(0);
-  const positions = ref([]);
-  const safeListData = computed(() => props.listData || []);
-  const safeItemSize = computed(() => props.itemSize || DEFAULT_ITEM_SIZE);
-  const renderCount = computed(() => {
-    if (containerHeight.value === 0 || safeItemSize.value === 0) {
-      return 0;
-    }
-    return Math.ceil(containerHeight.value / safeItemSize.value) + BUFFER_SIZE;
-  });
-  const end = computed(() => Math.min(start.value + renderCount.value, safeListData.value.length));
-  const renderList = computed(() => safeListData.value.slice(start.value, end.value));
-  const listHeight = computed(() => {
-    if (positions.value.length === 0) {
-      return 0;
-    }
-    return positions.value[positions.value.length - 1]?.bottom || 0;
-  });
-  const listStyle = computed(() => `transform: translate3d(0, ${offset.value}px, 0)`);
-  function setItemRef(el, key) {
-    if (el) {
-      itemRefs.set(key, el instanceof HTMLElement ? el : el.$el);
-    } else {
-      itemRefs.delete(key);
-    }
-  }
-  function clearItemRefs() {
-    itemRefs.clear();
-  }
-  function getStartIndex(scrollTop) {
-    if (positions.value.length === 0) {
-      return 0;
-    }
-    let low = 0;
-    let high = positions.value.length - 1;
-    let result = 0;
-    while (low <= high) {
-      const mid = low + Math.floor((high - low) / 2);
-      const position = positions.value[mid];
-      if (!position) {
-        break;
-      }
-      if (position.bottom <= scrollTop) {
-        low = mid + 1;
-        result = low;
-      } else {
-        high = mid - 1;
+import {
+  elementScroll,
+  observeElementOffset,
+  observeElementRect,
+  Virtualizer
+} from "@tanstack/virtual-core";
+import { computed, onMounted, onUnmounted, shallowRef, watch } from "vue";
+import { toValue } from "../utils/ref.js";
+const DEFAULTS = {
+  status: "",
+  itemSize: 50,
+  overScan: 2
+};
+export function useVirtualList(containerRef, options) {
+  let reachBottomFired = false;
+  let cleanup;
+  const triggerVersion = shallowRef(0);
+  function getItemKey(index) {
+    if (options.dataKey) {
+      const item = options.listData?.[index];
+      const key = item?.[options.dataKey];
+      if (key !== void 0 && key !== null) {
+        return key;
       }
     }
-    return Math.min(result, positions.value.length - 1);
+    return index;
   }
-  function handleScroll(ev) {
-    const target = ev.target;
-    if (!target) {
-      return;
-    }
-    const newStart = getStartIndex(target.scrollTop);
-    start.value = newStart;
-    offset.value = newStart > 0 && positions.value[newStart] ? positions.value[newStart].top : 0;
-  }
-  function initPositions() {
-    if (!safeListData.value.length) {
-      positions.value = [];
-      return;
-    }
-    positions.value = safeListData.value.map((_, index) => ({
-      index,
-      height: safeItemSize.value,
-      top: index * safeItemSize.value,
-      bottom: (index + 1) * safeItemSize.value
-    }));
-  }
-  function updatePositions() {
-    if (!renderList.value.length || positions.value.length === 0) {
-      return;
-    }
-    let firstChangedIndex = -1;
-    const changes = [];
-    renderList.value.forEach((_, i) => {
-      const index = start.value + i;
-      const itemData = props.listData[index];
-      const itemEl = itemRefs.get(itemData[props.dataKey]);
-      const position = positions.value[index];
-      if (!itemEl || !position) {
+  const virtualizer = new Virtualizer({
+    count: options.listData?.length ?? 0,
+    getScrollElement: () => toValue(containerRef) ?? null,
+    estimateSize: () => options.itemSize ?? DEFAULTS.itemSize,
+    getItemKey,
+    overscan: options.overScan ?? DEFAULTS.overScan,
+    observeElementRect,
+    observeElementOffset,
+    scrollToFn: elementScroll,
+    onChange: (instance) => {
+      triggerVersion.value++;
+      const { status = DEFAULTS.status, listData } = options;
+      if (status || listData?.length === 0) {
         return;
       }
-      const rect = itemEl.getBoundingClientRect();
-      const newHeight = rect.height;
-      if (Math.abs(position.height - newHeight) > 1) {
-        changes.push({ index, newHeight });
-        if (firstChangedIndex === -1 || index < firstChangedIndex) {
-          firstChangedIndex = index;
-        }
+      const { onBottom, itemSize = DEFAULTS.itemSize, bottomThreshold } = options;
+      if (!onBottom) {
+        return;
       }
-    });
-    if (changes.length === 0) {
-      return;
-    }
-    changes.forEach(({ index, newHeight }) => {
-      if (positions.value[index]) {
-        positions.value[index].height = newHeight;
+      const { scrollOffset, scrollRect } = instance;
+      if (scrollOffset === null || scrollRect === null) {
+        return;
       }
-    });
-    if (firstChangedIndex !== -1) {
-      for (let i = firstChangedIndex; i < positions.value.length; i++) {
-        const position = positions.value[i];
-        if (!position) {
-          continue;
-        }
-        if (i === 0) {
-          position.top = 0;
-        } else {
-          const prevPosition = positions.value[i - 1];
-          if (prevPosition) {
-            position.top = prevPosition.bottom;
-          }
+      const totalSize2 = instance.getTotalSize();
+      const threshold = bottomThreshold ?? itemSize;
+      const scrollBottom = scrollOffset + scrollRect.height;
+      if (scrollBottom >= totalSize2 - threshold) {
+        if (!reachBottomFired) {
+          reachBottomFired = true;
+          onBottom();
         }
-        position.bottom = position.top + position.height;
+      } else {
+        reachBottomFired = false;
       }
     }
+  });
+  const virtualItems = computed(() => {
+    void triggerVersion.value;
+    return virtualizer.getVirtualItems();
+  });
+  const totalSize = computed(() => {
+    void triggerVersion.value;
+    return virtualizer.getTotalSize();
+  });
+  function updateVirtualizer() {
+    virtualizer.setOptions({
+      ...virtualizer.options,
+      count: options.listData?.length ?? 0,
+      estimateSize: () => options.itemSize ?? DEFAULTS.itemSize,
+      getItemKey
+    });
+    virtualizer._willUpdate();
+    triggerVersion.value++;
   }
-  function updateContainerHeight() {
-    if (!containerRef.value) {
-      return;
-    }
-    containerHeight.value = containerRef.value.clientHeight;
-  }
-  const unwatchList = watch(
-    () => props.listData,
-    () => {
-      clearItemRefs();
-      initPositions();
-    },
-    { immediate: true }
-  );
-  const unwatchRenderList = watch(
-    () => renderList.value,
-    () => {
-      updatePositions();
-    }
-  );
-  function stop() {
-    containerRef.value?.removeEventListener("scroll", handleScroll);
-    unwatchRenderList();
-    clearItemRefs();
-    unwatchList();
-  }
+  watch(() => [options.itemSize, options.dataKey], updateVirtualizer);
+  watch(() => [options.listData, options.listData?.length], updateVirtualizer);
   onMounted(() => {
-    if (!containerRef.value) {
-      return;
-    }
-    updateContainerHeight();
-    containerRef.value.addEventListener("scroll", handleScroll, { passive: true });
+    virtualizer._willUpdate();
+    cleanup = virtualizer._didMount();
   });
   onUnmounted(() => {
-    stop();
+    cleanup?.();
   });
+  function measureElement(el) {
+    if (!el) {
+      virtualizer.measureElement(null);
+      return;
+    }
+    const htmlEl = el instanceof HTMLElement ? el : el.$el;
+    virtualizer.measureElement(htmlEl);
+  }
   return {
-    containerRef,
-    renderList,
-    listHeight,
-    listStyle,
-    stop,
-    setItemRef,
-    updateContainerHeight,
-    getStartIndex
+    virtualItems,
+    totalSize,
+    measureElement,
+    scrollToIndex: virtualizer.scrollToIndex.bind(virtualizer),
+    scrollToOffset: virtualizer.scrollToOffset.bind(virtualizer),
+    scrollBy: virtualizer.scrollBy.bind(virtualizer),
+    getVirtualizer: () => virtualizer
   };
 }

package/dist/composables/use-window-size.d.ts

@@ -0,0 +1,4 @@
+export declare function useWindowSize(): {
+    width: import("vue").ShallowRef<number, number>;
+    height: import("vue").ShallowRef<number, number>;
+};

package/dist/composables/use-window-size.js

@@ -0,0 +1,27 @@
+import { onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { cachedOn, cachedOff } from "../utils/event.js";
+import { isServer } from "../utils/is.js";
+export function useWindowSize() {
+  const width = shallowRef(0);
+  const height = shallowRef(0);
+  const updateSize = () => {
+    width.value = window.innerWidth;
+    height.value = window.innerHeight;
+  };
+  onMounted(() => {
+    if (isServer()) {
+      return;
+    }
+    updateSize();
+    cachedOn(window, "resize", updateSize);
+    cachedOn(window, "orientationchange", updateSize);
+  });
+  onBeforeUnmount(() => {
+    cachedOff(window, "resize", updateSize);
+    cachedOff(window, "orientationchange", updateSize);
+  });
+  return {
+    width,
+    height
+  };
+}

package/dist/contexts/avatar.d.ts

@@ -1,2 +1,5 @@
-import type { AvatarGroupProps } from '../components/avatar/types';
-export declare const provideAvatarGroupContext: (contextValue: AvatarGroupProps) => AvatarGroupProps, useAvatarGroupContext: (fallback?: AvatarGroupProps | null | undefined) => AvatarGroupProps | null;
+import type { AvatarGroupProps } from '../components/avatar-group/types';
+export interface AvatarGroupContext {
+    props: AvatarGroupProps;
+}
+export declare const provideAvatarGroupContext: (contextValue: AvatarGroupContext) => AvatarGroupContext, useAvatarGroupContext: (fallback?: AvatarGroupContext | null | undefined) => AvatarGroupContext | null;

package/dist/contexts/carousel.d.ts

@@ -1,13 +1,13 @@
+import type { CarouselProps } from '../components/carousel/types';
 import type { Ref } from 'vue';
-import type { CarouselGroupProps } from '../components/carousel/types';
 export interface CarouselState {
     uid: string;
     translateItem: (index: number, activeIndex: number) => void;
 }
-export interface CarouselGroupContext {
-    props: CarouselGroupProps;
+export interface CarouselContext {
+    props: CarouselProps;
     carousels: Ref<CarouselState[]>;
     registerCarousel: (state: CarouselState) => void;
     unregisterCarousel: (id: string) => void;
 }
-export declare const provideCarouselGroupContext: (contextValue: CarouselGroupContext) => CarouselGroupContext, useCarouselGroupContext: ((fallback?: CarouselGroupContext | undefined) => CarouselGroupContext) & ((fallback: null) => CarouselGroupContext | null);
+export declare const provideCarouselContext: (contextValue: CarouselContext) => CarouselContext, useCarouselContext: ((fallback?: CarouselContext | undefined) => CarouselContext) & ((fallback: null) => CarouselContext | null);

package/dist/contexts/carousel.js

@@ -1,2 +1,2 @@
 import { createContext } from "../utils/context.js";
-export const [provideCarouselGroupContext, useCarouselGroupContext] = createContext("CarouselGroup");
+export const [provideCarouselContext, useCarouselContext] = createContext("Carousel");

package/dist/contexts/checkbox.d.ts

@@ -1,2 +1,7 @@
-import type { CheckboxGroupProps } from '../components/checkbox/types';
-export declare const provideCheckboxGroupContext: (contextValue: CheckboxGroupProps) => CheckboxGroupProps, useCheckboxGroupContext: (fallback?: CheckboxGroupProps | null | undefined) => CheckboxGroupProps | null;
+import type { CheckboxGroupProps, CheckboxGroupEmits } from '../components/checkbox-group/types';
+import type { EmitFn } from 'vue';
+export interface CheckboxGroupContext {
+    props: CheckboxGroupProps;
+    emits: EmitFn<CheckboxGroupEmits>;
+}
+export declare const provideCheckboxGroupContext: (contextValue: CheckboxGroupContext) => CheckboxGroupContext, useCheckboxGroupContext: (fallback?: CheckboxGroupContext | null | undefined) => CheckboxGroupContext | null;

package/dist/contexts/choicebox.d.ts

@@ -1,4 +1,8 @@
-import type { Ref } from 'vue';
-import type { ChoiceboxGroupProps } from '../components/choicebox/types';
-export declare const provideChoiceboxGroupContext: (contextValue: ChoiceboxGroupProps) => ChoiceboxGroupProps, useChoiceboxGroupContext: ((fallback?: ChoiceboxGroupProps | undefined) => ChoiceboxGroupProps) & ((fallback: null) => ChoiceboxGroupProps | null);
-export declare const provideChoiceboxGroupModelValue: (contextValue: Ref<import("../types/shared").ComponentValue | import("../types/shared").ComponentValue[] | undefined, import("../types/shared").ComponentValue | import("../types/shared").ComponentValue[] | undefined>) => Ref<import("../types/shared").ComponentValue | import("../types/shared").ComponentValue[] | undefined, import("../types/shared").ComponentValue | import("../types/shared").ComponentValue[] | undefined>, useChoiceboxGroupModelValue: ((fallback?: Ref<import("../types/shared").ComponentValue | import("../types/shared").ComponentValue[] | undefined, import("../types/shared").ComponentValue | import("../types/shared").ComponentValue[] | undefined> | undefined) => Ref<import("../types/shared").ComponentValue | import("../types/shared").ComponentValue[] | undefined, import("../types/shared").ComponentValue | import("../types/shared").ComponentValue[] | undefined>) & ((fallback: null) => Ref<import("../types/shared").ComponentValue | import("../types/shared").ComponentValue[] | undefined, import("../types/shared").ComponentValue | import("../types/shared").ComponentValue[] | undefined> | null);
+import type { ChoiceboxEmits, ChoiceboxProps } from '../components/choicebox/types';
+import type { EmitFn } from 'vue';
+interface ChoiceboxContext {
+    props: ChoiceboxProps;
+    emits: EmitFn<ChoiceboxEmits>;
+}
+export declare const provideChoiceboxContext: (contextValue: ChoiceboxContext) => ChoiceboxContext, useChoiceboxContext: ((fallback?: ChoiceboxContext | undefined) => ChoiceboxContext) & ((fallback: null) => ChoiceboxContext | null);
+export {};

package/dist/contexts/choicebox.js

@@ -1,5 +1,2 @@
 import { createContext } from "../utils/context.js";
-export const [provideChoiceboxGroupContext, useChoiceboxGroupContext] = createContext("ChoiceboxGroup", {
-  multiple: false
-});
-export const [provideChoiceboxGroupModelValue, useChoiceboxGroupModelValue] = createContext("ChoiceboxGroupModalValue");
+export const [provideChoiceboxContext, useChoiceboxContext] = createContext("ChoiceboxGroup");

package/dist/contexts/collapse.d.ts

@@ -1,8 +1,7 @@
+import type { CollapseGroupProps } from '../components/collapse-group/types';
 import type { Ref } from 'vue';
-interface CollapseGroupContext {
-    multiple: Ref<boolean>;
-    isExpanded: (id: string) => boolean;
-    toggleItem: (id: string, expanded: boolean) => void;
+export interface CollapseGroupContext {
+    expandedIds: Ref<Set<string>>;
+    props: CollapseGroupProps;
 }
-export declare const provideCollapseGroupContext: (contextValue: CollapseGroupContext) => CollapseGroupContext, useCollapseGroupContext: ((fallback?: CollapseGroupContext | undefined) => CollapseGroupContext) & ((fallback: null) => CollapseGroupContext | null);
-export {};
+export declare const provideCollapseGroupContext: (contextValue: CollapseGroupContext) => CollapseGroupContext, useCollapseGroupContext: (fallback?: CollapseGroupContext | null | undefined) => CollapseGroupContext | null;

package/dist/contexts/collapse.js

@@ -1,2 +1,2 @@
 import { createContext } from "../utils/context.js";
-export const [provideCollapseGroupContext, useCollapseGroupContext] = createContext("CollapseGroup");
+export const [provideCollapseGroupContext, useCollapseGroupContext] = createContext("CollapseGroup", null);

package/dist/contexts/config-provider.d.ts

@@ -0,0 +1,5 @@
+import type { ConfigProviderProps } from '../components/config-provider/types';
+export declare const injectionKey = "ConfigProvider";
+export interface ConfigProviderContext extends Required<ConfigProviderProps> {
+}
+export declare const provideConfigProvider: (contextValue: ConfigProviderContext) => ConfigProviderContext, useConfigProvider: ((fallback?: ConfigProviderContext | undefined) => ConfigProviderContext) & ((fallback: null) => ConfigProviderContext | null);

package/dist/{composables/use-config-provider-context.js → contexts/config-provider.js}

@@ -1,8 +1,11 @@
 import enUS from "../locales/en-us.js";
 import { createContext } from "../utils/context.js";
 export const injectionKey = "ConfigProvider";
-export const [provideConfigProvider, useConfigProvider] = createContext(injectionKey, {
-  size: "md",
-  locale: enUS,
-  popoverShowTransition: true
-});
+export const [provideConfigProvider, useConfigProvider] = createContext(
+  injectionKey,
+  {
+    size: "md",
+    locale: enUS,
+    popoverShowTransition: true
+  }
+);

package/dist/contexts/list.d.ts

@@ -1,5 +1,5 @@
-import type { Ref } from 'vue';
 import type { ListOption } from '../components/list/types';
+import type { Ref } from 'vue';
 export interface ListContext {
     activeValue: Ref<string>;
     onOptionClick: ListOption['onClick'];

package/dist/contexts/radio.d.ts

@@ -1,2 +1,8 @@
-import type { RadioGroupProps } from '../components/radio/types';
-export declare const provideRadioGroupContext: (contextValue: RadioGroupProps) => RadioGroupProps, useRadioGroupContext: (fallback?: RadioGroupProps | null | undefined) => RadioGroupProps | null;
+import type { RadioGroupEmits, RadioGroupProps } from '../components/radio-group/types';
+import type { EmitFn } from 'vue';
+export interface RadioGroupContext {
+    name: string;
+    props: RadioGroupProps;
+    emits: EmitFn<RadioGroupEmits>;
+}
+export declare const provideRadioGroupContext: (contextValue: RadioGroupContext) => RadioGroupContext, useRadioGroupContext: (fallback?: RadioGroupContext | null | undefined) => RadioGroupContext | null;

package/dist/contexts/resizable.d.ts

@@ -1,5 +1,5 @@
-import type { Ref } from 'vue';
 import type { ComponentDirection } from '../types/shared/props';
+import type { Ref } from 'vue';
 interface PanelConfig {
     id: string;
     order: number;

package/dist/contexts/switch.d.ts

@@ -1,4 +1,8 @@
-import type { Ref } from 'vue';
-import type { SwitchGroupProps } from '../components/switch/types';
-export declare const provideSwitchGroupContext: (contextValue: SwitchGroupProps) => SwitchGroupProps, useSwitchGroupContext: ((fallback?: SwitchGroupProps | undefined) => SwitchGroupProps) & ((fallback: null) => SwitchGroupProps | null);
-export declare const provideSwitchGroupModelValue: (contextValue: Ref<string | number | undefined, string | number | undefined>) => Ref<string | number | undefined, string | number | undefined>, useSwitchGroupModelValue: ((fallback?: Ref<string | number | undefined, string | number | undefined> | undefined) => Ref<string | number | undefined, string | number | undefined>) & ((fallback: null) => Ref<string | number | undefined, string | number | undefined> | null);
+import type { SwitchEmits, SwitchProps } from '../components/switch/types';
+import type { EmitFn } from 'vue';
+export interface SwitchContext {
+    name: string;
+    props: SwitchProps;
+    emits: EmitFn<SwitchEmits>;
+}
+export declare const provideSwitchContext: (contextValue: SwitchContext) => SwitchContext, useSwitchContext: ((fallback?: SwitchContext | undefined) => SwitchContext) & ((fallback: null) => SwitchContext | null);

package/dist/contexts/switch.js

@@ -1,3 +1,2 @@
 import { createContext } from "../utils/context.js";
-export const [provideSwitchGroupContext, useSwitchGroupContext] = createContext("SwitchGroup");
-export const [provideSwitchGroupModelValue, useSwitchGroupModelValue] = createContext("SwitchGroupModalValue");
+export const [provideSwitchContext, useSwitchContext] = createContext("Switch");

package/dist/contexts/toggle-button.d.ts

@@ -0,0 +1,7 @@
+import type { ToggleButtonGroupProps, ToggleButtonGroupEmits } from '../components/toggle-button-group/types';
+import type { EmitFn } from 'vue';
+export interface ToggleButtonGroupContext {
+    props: ToggleButtonGroupProps;
+    emits: EmitFn<ToggleButtonGroupEmits>;
+}
+export declare const provideToggleButtonGroupContext: (contextValue: ToggleButtonGroupContext) => ToggleButtonGroupContext, useToggleButtonGroupContext: (fallback?: ToggleButtonGroupContext | null | undefined) => ToggleButtonGroupContext | null;

package/dist/contexts/toggle-button.js

@@ -0,0 +1,2 @@
+import { createContext } from "../utils/context.js";
+export const [provideToggleButtonGroupContext, useToggleButtonGroupContext] = createContext("ToggleButtonGroup", null);

package/dist/styles/source.css

@@ -449,7 +449,7 @@
   transition-timing-function: var(--default-transition-timing-function);
 }
 
-@utility scrollbar-hidden {
+@utility scrollbar-none {
   & {
     scrollbar-width: none;
     -ms-overflow-style: none;
@@ -477,7 +477,7 @@
   }
 }
 
-@utility smallest {
+@utility visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -486,7 +486,17 @@
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
+  visibility: hidden;
   border-width: 0;
+  opacity: 0;
+}
+
+@utility content-visibility-auto {
+  content-visibility: auto;
+}
+
+@utility intrinsic-size-auto {
+  contain-intrinsic-size: auto none;
 }
 
 @utility font-inherit {
@@ -592,6 +602,7 @@
   transform: scale(var(--scale, 0.95));
 }
 
+/*
 .line-clamp {
   display: -webkit-box;
   overflow: hidden;
@@ -600,6 +611,7 @@
   -webkit-line-clamp: var(--line-clamp, 1);
   -webkit-box-orient: vertical;
 }
+*/
 
 .scrollbar-stable {
   scrollbar-gutter: stable !important;