pxd 0.0.52 → 0.0.53

package/dist/components/toggle/index.vue

@@ -32,10 +32,10 @@ const SIZES = {
   lg: "w-11 h-6"
 };
 const uniqueId = getUniqueId();
-const config = useConfigProvider();
+const configProvider = useConfigProvider();
 const modelValue = useModelValue(props, emits);
 const isChecked = computed(() => modelValue.value === props.activeValue);
-const computedSize = computed(() => getFallbackValue(props.size, SIZES, config.size));
+const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
 async function onCheckboxChange(e) {
   if (props.loading) {
     return;
@@ -69,12 +69,13 @@ async function onCheckboxChange(e) {
       :checked="isChecked"
       class="pxd-toggle--input peer smallest"
       @change.prevent="onCheckboxChange"
-    >
+    />
 
     <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"
-    >{{ inactiveLabel }}</span>
+      >{{ 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 motion-safe:transition-all"
@@ -84,7 +85,9 @@ async function onCheckboxChange(e) {
   '--toggle-inactive-color': inactiveColor
 }"
     >
-      <div class="pxd-toggle--handle-icon text-xs shadow-sm relative flex aspect-square h-full translate-x-(--tx) transform-gpu items-center justify-center overflow-hidden rounded-full bg-background-100 text-foreground-secondary motion-safe:transition-transform">
+      <div
+        class="pxd-toggle--handle-icon text-xs shadow-sm relative flex aspect-square h-full translate-x-(--tx) transform-gpu items-center justify-center overflow-hidden rounded-full bg-background-100 text-foreground-secondary motion-safe:transition-transform"
+      >
         <div class="inset-0 absolute flex items-center justify-center">
           <Transition name="pxd-transition--fade" mode="out-in">
             <LoaderCircleIcon v-if="loading" class="motion-safe:animate-spin" />
@@ -98,7 +101,8 @@ 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"
-    >{{ activeLabel }}</span>
+      >{{ activeLabel }}</span
+    >
   </label>
 </template>
 

package/dist/components/tooltip/index.vue

@@ -40,9 +40,9 @@ const computedVariant = computed(() => getFallbackValue(props.variant, VARIANTS,
 const computedDisabled = computed(() => {
   return props.disabled || props.desktopOnly && isTouchDevice();
 });
-const mergedClasses = computed(() => {
+const computedClasses = computed(() => {
   return [
-    "px-2 py-2 rounded-md text-13px break-words whitespace-pre-line shadow-border-tooltip bg-(--popover-bg)",
+    "px-2 py-2 rounded-md text-sm break-words whitespace-pre-line shadow-border-tooltip bg-(--popover-arrow-bg)",
     computedVariant.value.text,
     props.contentClass
   ].join(" ");
@@ -56,7 +56,7 @@ const mergedClasses = computed(() => {
     :disabled="computedDisabled"
     :show-arrow="showArrow"
     :arrow-color="computedVariant.bg"
-    :content-class="mergedClasses"
+    :content-class="computedClasses"
     :content-style="contentStyle"
     v-bind="$attrs"
   >

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

@@ -5,13 +5,7 @@ const props = defineProps({
   listData: { type: Array, required: false, default: () => [] },
   itemSize: { type: Number, required: false, default: 50 }
 });
-const {
-  containerRef,
-  renderList,
-  listHeight,
-  listStyle,
-  setItemRef
-} = useVirtualList(props);
+const { containerRef, renderList, listHeight, listStyle, setItemRef } = useVirtualList(props);
 </script>
 
 <template>

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

@@ -4,7 +4,7 @@ export declare const useIntersectionObserver: (target: TargetRef, callback: Inte
 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>;
 type Observers = IntersectionObserver | ResizeObserver | MutationObserver;
-type TargetRef = MaybeRefOrGetter<Nullable<HTMLElement>> | MaybeRefOrGetter<Nullable<HTMLElement>>[];
+type TargetRef = MaybeRefOrGetter<Nullable<HTMLElement>> | MaybeRefOrGetter<Nullable<HTMLElement>>[] | MaybeRefOrGetter<Nullable<HTMLElement>[]>;
 interface ObserverResults<T extends Observers> {
     observer: T | undefined;
     stop: () => void;

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

@@ -1,20 +1,16 @@
+import { isNotNil } from "es-toolkit";
 import { computed, onBeforeUnmount, watch } from "vue";
 import { toArray } from "../utils/format.js";
-import { isNotNullish } from "../utils/is.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
-);
+export const useIntersectionObserver = createObserver(globalThis.IntersectionObserver);
+export const useMutationObserver = createObserver(globalThis.MutationObserver);
+export const useResizeObserver = createObserver(globalThis.ResizeObserver);
 function createObserver(ObserverConstructor) {
   function observerWrapper(target, callback, options) {
     let observer;
-    const targets = computed(() => toArray(toValue(target)).map(unrefElement).filter(isNotNullish));
+    const targets = computed(
+      () => toArray(toValue(target)).map(unrefElement).filter(isNotNil)
+    );
     const unwatch = watch(
       () => [targets.value],
       ([newTargets]) => {
@@ -32,11 +28,19 @@ function createObserver(ObserverConstructor) {
           );
           newTargets.forEach((el) => observer.observe(el));
         } else if (ObserverConstructor.name === "MutationObserver") {
-          observer = new ObserverConstructor(callback);
-          newTargets.forEach((el) => observer.observe(el, options));
+          observer = new ObserverConstructor(
+            callback
+          );
+          newTargets.forEach(
+            (el) => observer.observe(el, options)
+          );
         } else {
-          observer = new ObserverConstructor(callback);
-          newTargets.forEach((el) => observer.observe(el, options));
+          observer = new ObserverConstructor(
+            callback
+          );
+          newTargets.forEach(
+            (el) => observer.observe(el, options)
+          );
         }
       },
       {

package/dist/composables/use-config-provider-context.d.ts

@@ -3,5 +3,6 @@ export declare const injectionKey = "ConfigProvider";
 export interface ConfigProviderProps {
     size?: ComponentSize;
     locale?: Record<string, any>;
+    popoverShowTransition?: boolean;
 }
 export declare const provideConfigProvider: (contextValue: Required<ConfigProviderProps>) => Required<ConfigProviderProps>, useConfigProvider: ((fallback?: Required<ConfigProviderProps> | undefined) => Required<ConfigProviderProps>) & ((fallback: null) => Required<ConfigProviderProps> | null);

package/dist/composables/use-config-provider-context.js

@@ -1,13 +1,8 @@
 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
-  }
-);
+export const [provideConfigProvider, useConfigProvider] = createContext(injectionKey, {
+  size: "md",
+  locale: enUS,
+  popoverShowTransition: true
+});

package/dist/composables/use-countdown.js

@@ -17,9 +17,7 @@ export function useCountdown(props, emits) {
     }
     return Math.max(0, formatTime(durations ?? 0));
   });
-  const isInfiniteCountup = computed(
-    () => props.invert && totalDuration.value === Infinity
-  );
+  const isInfiniteCountup = computed(() => props.invert && totalDuration.value === Infinity);
   function formatTime(time = 0) {
     return props.millisecond ? Math.round(time) : Math.round(time * 1e3);
   }

package/dist/composables/use-deferred-value.js

@@ -1,11 +1,7 @@
 import { onBeforeUnmount, ref, watch } from "vue";
 import { toValue } from "../utils/ref.js";
 export function useDeferredValue(defaultValue, options = {}) {
-  const {
-    deep,
-    delay = 300,
-    valueChange
-  } = options;
+  const { deep, delay = 300, valueChange } = options;
   const syncValue = ref(toValue(defaultValue));
   const deferredValue = ref(syncValue.value);
   let syncTimeoutId;

package/dist/composables/use-delay-change.js

@@ -1,9 +1,6 @@
 import { shallowRef } from "vue";
 export function useDelayChange(value, options = {}) {
-  const {
-    delay = 300,
-    valueChange
-  } = options;
+  const { delay = 300, valueChange } = options;
   let timerId;
   const delayValue = shallowRef(value);
   function setValue(newValue, immediate = false) {

package/dist/composables/use-delay-destroy.js

@@ -1,11 +1,7 @@
 import { shallowRef } from "vue";
 import { toValue } from "../utils/ref.js";
 export function useDelayDestroy(value, options = {}) {
-  const {
-    delay = 300,
-    renderChange,
-    visibleChange
-  } = options;
+  const { delay = 300, renderChange, visibleChange } = options;
   const render = shallowRef(toValue(value));
   const visible = shallowRef(value);
   let destroyTimeoutId;

package/dist/composables/use-loading-bar.d.ts

@@ -1,21 +1,13 @@
-export declare const START_LOADING_BAR_EVENT_NAME = "#start-loading-bar";
-export declare const ERROR_LOADING_BAR_EVENT_NAME = "#error-loading-bar";
-export declare const FINISH_LOADING_BAR_EVENT_NAME = "#finish-loading-bar";
-export declare const INCREASE_LOADING_BAR_EVENT_NAME = "#increase-loading-bar";
-declare const LOADING_BAR_EVENTS: {
-    readonly start: "#start-loading-bar";
-    readonly error: "#error-loading-bar";
-    readonly finish: "#finish-loading-bar";
-    readonly increase: "#increase-loading-bar";
-};
-interface Options extends Record<string, any> {
-    type?: keyof typeof LOADING_BAR_EVENTS;
-}
+export declare const UPDATE_LOADING_BAR_EVENT_NAME = "#update-loading-bar";
+export type LoadingBarActionType = 'start' | 'error' | 'finish' | 'increase';
 export interface LoadingBarEventParams {
+    type: LoadingBarActionType;
     group: string;
     value?: number;
 }
-export declare function useLoadingBar(options?: Options): void;
+interface Options extends LoadingBarEventParams {
+}
+export declare function useLoadingBar(options: Options): void;
 export declare namespace useLoadingBar {
     var start: (group?: string) => void;
     var error: (group?: string) => void;

package/dist/composables/use-loading-bar.js

@@ -1,17 +1,6 @@
-export const START_LOADING_BAR_EVENT_NAME = "#start-loading-bar";
-export const ERROR_LOADING_BAR_EVENT_NAME = "#error-loading-bar";
-export const FINISH_LOADING_BAR_EVENT_NAME = "#finish-loading-bar";
-export const INCREASE_LOADING_BAR_EVENT_NAME = "#increase-loading-bar";
-const LOADING_BAR_EVENTS = {
-  start: START_LOADING_BAR_EVENT_NAME,
-  error: ERROR_LOADING_BAR_EVENT_NAME,
-  finish: FINISH_LOADING_BAR_EVENT_NAME,
-  increase: INCREASE_LOADING_BAR_EVENT_NAME
-};
-export function useLoadingBar(options = {}) {
-  const { type = "start", ...data } = options;
-  const event = LOADING_BAR_EVENTS[type];
-  window.dispatchEvent(new CustomEvent(event, { detail: data }));
+export const UPDATE_LOADING_BAR_EVENT_NAME = "#update-loading-bar";
+export function useLoadingBar(options) {
+  window.dispatchEvent(new CustomEvent(UPDATE_LOADING_BAR_EVENT_NAME, { detail: options }));
 }
 useLoadingBar.start = function(group = "default") {
   useLoadingBar({ type: "start", group });

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

@@ -39,9 +39,15 @@ interface UseMessage {
     error: (msg: MessageContent, options?: Options) => void;
     loading: (msg: MessageContent, options?: Options) => void;
 }
-export declare const CLEAR_MESSAGES_EVENT_NAME = "#clear-messages";
-export declare const CREATE_MESSAGE_EVENT_NAME = "#create-message";
-export declare const REMOVE_MESSAGE_EVENT_NAME = "#remove-message";
+export declare const UPDATE_MESSAGE_EVENT_NAME = "#update-message";
+export type MessageActionType = 'create' | 'remove' | 'clear';
+export interface MessageUpdateParams {
+    type: MessageActionType;
+    group: string;
+    data?: MessageItemType | {
+        id: Options['id'];
+    };
+}
 export declare const useMessage: UseMessage;
 export declare function closeMessage(group: Options['group'], id: Options['id']): void;
 export declare function clearMessage(group: Options['group']): void;

package/dist/composables/use-message.js

@@ -1,7 +1,5 @@
 import { isServer } from "../utils/is.js";
-export const CLEAR_MESSAGES_EVENT_NAME = "#clear-messages";
-export const CREATE_MESSAGE_EVENT_NAME = "#create-message";
-export const REMOVE_MESSAGE_EVENT_NAME = "#remove-message";
+export const UPDATE_MESSAGE_EVENT_NAME = "#update-message";
 export const useMessage = ((msg, options) => {
   if (isServer()) {
     return;
@@ -16,13 +14,15 @@ export const useMessage = ((msg, options) => {
     closeable: options.closeable ?? false
   };
   window.dispatchEvent(
-    new CustomEvent(CREATE_MESSAGE_EVENT_NAME, { detail: message })
+    new CustomEvent(UPDATE_MESSAGE_EVENT_NAME, {
+      detail: { type: "create", group: message.group, data: message }
+    })
   );
 });
 const shortcutTypes = ["info", "error", "loading", "warning", "success"];
 shortcutTypes.forEach((type) => {
   useMessage[type] = (msg, options) => {
-    useMessage(msg, { ...options ?? {}, type });
+    useMessage(msg, { ...options, type });
   };
 });
 export function closeMessage(group, id) {
@@ -30,15 +30,15 @@ export function closeMessage(group, id) {
     return;
   }
   window.dispatchEvent(
-    new CustomEvent(REMOVE_MESSAGE_EVENT_NAME, {
-      detail: { group: group ?? "default", id }
+    new CustomEvent(UPDATE_MESSAGE_EVENT_NAME, {
+      detail: { type: "remove", group: group ?? "default", data: { id } }
     })
   );
 }
 export function clearMessage(group) {
   window.dispatchEvent(
-    new CustomEvent(CLEAR_MESSAGES_EVENT_NAME, {
-      detail: { group: group ?? "default" }
+    new CustomEvent(UPDATE_MESSAGE_EVENT_NAME, {
+      detail: { type: "clear", group: group ?? "default" }
     })
   );
 }

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

@@ -2,6 +2,7 @@ import type { WritableComputedRef } from 'vue';
 interface Options {
     get?: (value: any) => any;
     set?: (value: any) => void;
+    withChange?: boolean;
 }
 interface BaseEmit {
     (event: 'change', ...args: any[]): void;

package/dist/composables/use-model-value.js

@@ -1,9 +1,11 @@
 import { computed } from "vue";
-export function useModelValue(props, emits, options = {}) {
+export function useModelValue(props, emits, options = { withChange: true }) {
   const modelValue = computed({
     get: options.get || (() => props.modelValue),
     set: options.set || ((value) => {
-      emits("change", value);
+      if (options.withChange) {
+        emits("change", value);
+      }
       emits("update:modelValue", value);
     })
   });

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

@@ -18,14 +18,18 @@ export function useOutsideClick(container, options = {}) {
     }
     onTrigger?.(ev);
   }
-  const unwatch = watch(() => toValue(container), (dom, _, onCleanup) => {
-    if (dom) {
-      cachedOn(document, "click", onClick);
-    }
-    onCleanup(() => {
-      cachedOff(document, "click", onClick);
-    });
-  }, { immediate: true });
+  const unwatch = watch(
+    () => toValue(container),
+    (dom, _, onCleanup) => {
+      if (dom) {
+        cachedOn(document, "click", onClick);
+      }
+      onCleanup(() => {
+        cachedOff(document, "click", onClick);
+      });
+    },
+    { immediate: true }
+  );
   function stop() {
     unwatch();
     cachedOff(document, "click", onClick);

package/dist/composables/use-pointer-gesture.js

@@ -220,7 +220,11 @@ export function usePointerGesture(container, options = {}) {
     const el = boundEl;
     el.addEventListener("pointermove", onPointerMove, { passive: false, capture: true });
     el.addEventListener("pointerup", onPointerUp, { passive: true, once: true, capture: true });
-    el.addEventListener("pointercancel", onPointerCancel, { passive: true, once: true, capture: true });
+    el.addEventListener("pointercancel", onPointerCancel, {
+      passive: true,
+      once: true,
+      capture: true
+    });
     boundScrollEl = getScrollEl();
   }
   function onPointerMove(e) {

package/dist/composables/use-toggle-value.js

@@ -1,9 +1,6 @@
 import { shallowRef } from "vue";
 export function useToggleValue(initialValue = false, options = {}) {
-  const {
-    truthyValue = true,
-    falsyValue = false
-  } = options;
+  const { truthyValue = true, falsyValue = false } = options;
   const value = shallowRef(initialValue);
   function toggle(newValue) {
     value.value = newValue ?? (value.value === truthyValue ? falsyValue : truthyValue);

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

@@ -133,13 +133,20 @@ export function useVirtualList(props) {
     }
     containerHeight.value = containerRef.value.clientHeight;
   }
-  const unwatchList = watch(() => props.listData, () => {
-    clearItemRefs();
-    initPositions();
-  }, { immediate: true });
-  const unwatchRenderList = watch(() => renderList.value, () => {
-    updatePositions();
-  });
+  const unwatchList = watch(
+    () => props.listData,
+    () => {
+      clearItemRefs();
+      initPositions();
+    },
+    { immediate: true }
+  );
+  const unwatchRenderList = watch(
+    () => renderList.value,
+    () => {
+      updatePositions();
+    }
+  );
   function stop() {
     containerRef.value?.removeEventListener("scroll", handleScroll);
     unwatchRenderList();

package/dist/contexts/avatar.js

@@ -1,5 +1,5 @@
 import { createContext } from "../utils/context.js";
-export const [
-  provideAvatarGroupContext,
-  useAvatarGroupContext
-] = createContext("AvatarGroup", null);
+export const [provideAvatarGroupContext, useAvatarGroupContext] = createContext(
+  "AvatarGroup",
+  null
+);

package/dist/contexts/carousel.js

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

package/dist/contexts/checkbox.js

@@ -1,5 +1,2 @@
 import { createContext } from "../utils/context.js";
-export const [
-  provideCheckboxGroupContext,
-  useCheckboxGroupContext
-] = createContext("CheckboxGroup", null);
+export const [provideCheckboxGroupContext, useCheckboxGroupContext] = createContext("CheckboxGroup", null);

package/dist/contexts/choicebox.js

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

package/dist/contexts/collapse.js

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

package/dist/contexts/list.js

@@ -1,9 +1,6 @@
 import { createContext } from "../utils/context.js";
-export const [
-  provideListContext,
-  useListContext
-] = createContext("List");
-export const [
-  provideListFilterValue,
-  useListFilterValue
-] = createContext("ListFilterValue", null);
+export const [provideListContext, useListContext] = createContext("List");
+export const [provideListFilterValue, useListFilterValue] = createContext(
+  "ListFilterValue",
+  null
+);

package/dist/contexts/radio.js

@@ -1,5 +1,5 @@
 import { createContext } from "../utils/context.js";
-export const [
-  provideRadioGroupContext,
-  useRadioGroupContext
-] = createContext("RadioGroup", null);
+export const [provideRadioGroupContext, useRadioGroupContext] = createContext(
+  "RadioGroup",
+  null
+);

package/dist/contexts/resizable.js

@@ -1,5 +1,2 @@
 import { createContext } from "../utils/context.js";
-export const [
-  provideResizableContext,
-  useResizableContext
-] = createContext("ResizableContext");
+export const [provideResizableContext, useResizableContext] = createContext("ResizableContext");

package/dist/contexts/switch.js

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

package/dist/index.d.ts

@@ -2,5 +2,6 @@ import type { App } from 'vue';
 export { version } from '../package.json';
 export * from './components/index.js';
 export * from './composables/index.js';
+export type * from './types/components';
 export type * from './types/shared';
 export default function install(app: App, prefix?: string): void;