pxd 0.0.61 → 0.0.62

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

@@ -3,6 +3,7 @@ import { tv } from "tailwind-variants";
 import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
 import { UPDATE_LOADING_BAR_EVENT_NAME } from "../../composables/use-loading-bar";
 import { cachedOff, cachedOn } from "../../utils/event";
+import { caf, raf } from "../../utils/event";
 import { clampValue, isTruthyProp } from "../../utils/format";
 import { isServer } from "../../utils/is";
 import PTeleport from "../teleport/index.vue";
@@ -21,7 +22,7 @@ const props = defineProps({
 const loadingBarVariant = tv({
   slots: {
     wrapper: "pxd-loading-bar top-0 left-0 right-0 pointer-events-none z-10 max-w-full overflow-hidden",
-    inner: "pxd-loading-bar--inner h-0.5 data-[hidden=true]:h-0 origin-left data-[transition=false]:transition-none! motion-safe:transition-all"
+    inner: "pxd-loading-bar--inner h-0.5 data-[hidden=true]:h-0 origin-left data-[transition=false]:transition-none! motion-safe:transition-appearance"
   },
   variants: {
     status: {
@@ -79,14 +80,14 @@ function getIncreaseDelta(n) {
 }
 function increaseProgress(n) {
   if (progressValue.value >= 1) {
-    cancelAnimationFrame(prevAnimationKey);
+    caf(prevAnimationKey);
     return;
   }
   const now = performance.now();
   const delta = now - prevTimestamp;
   const threshold = props.trickleThreshold || 200;
   if (delta < threshold && props.trickle) {
-    prevAnimationKey = requestAnimationFrame(() => increaseProgress());
+    prevAnimationKey = raf(increaseProgress);
     return;
   }
   prevTimestamp = now;
@@ -95,7 +96,7 @@ function increaseProgress(n) {
   if (amount === 0 || !props.trickle) {
     return;
   }
-  prevAnimationKey = requestAnimationFrame(() => increaseProgress());
+  prevAnimationKey = raf(increaseProgress);
 }
 async function hideAndResetProgress() {
   hiddenBarTimeout = setTimeout(() => {
@@ -119,13 +120,13 @@ function handleStartProgress() {
     return;
   }
   prevTimestamp = 0;
-  requestAnimationFrame(() => increaseProgress());
+  raf(() => increaseProgress());
 }
 async function handleErrorProgress() {
   if (status.value !== "running") {
     return;
   }
-  cancelAnimationFrame(prevAnimationKey);
+  caf(prevAnimationKey);
   status.value = "error";
   hiddenBar.value = false;
   progressValue.value = 1;
@@ -135,7 +136,7 @@ function handleFinishProgress() {
   if (status.value !== "running") {
     return;
   }
-  cancelAnimationFrame(prevAnimationKey);
+  caf(prevAnimationKey);
   status.value = "finish";
   hiddenBar.value = false;
   progressValue.value = 1;

package/dist/components/material/index.vue

@@ -1,60 +1,38 @@
 <script setup>
+import { tv } from "tailwind-variants";
+import { computed } from "vue";
 import PStack from "../stack/index.vue";
 defineOptions({
   name: "PMaterial",
   inheritAttrs: false
 });
-defineProps({
+const props = defineProps({
   variant: { type: String, required: false, default: "default" }
 });
+const materialVariants = tv({
+  base: "pxd-material w-full bg-background-100",
+  variants: {
+    variant: {
+      default: "rounded-md shadow-border-base",
+      small: "rounded-md shadow-border-small",
+      medium: "rounded-xl shadow-border-medium",
+      large: "rounded-xl shadow-border-large",
+      tooltip: "rounded-md shadow-border-tooltip",
+      menu: "rounded-xl shadow-border-menu",
+      modal: "rounded-xl shadow-border-modal",
+      fullscreen: "rounded-2xl shadow-border-fullscreen"
+    }
+  }
+});
+const computedClasses = computed(() => {
+  return materialVariants({
+    variant: props.variant
+  });
+});
 </script>
 
 <template>
-  <PStack class="pxd-material w-full bg-background-100" :class="variant" v-bind="$attrs">
+  <PStack :class="computedClasses" v-bind="$attrs">
     <slot />
   </PStack>
 </template>
-
-<style lang="postcss">
-.pxd-material {
-  &.default {
-    border-radius: calc(var(--radius) - 2px);
-    box-shadow: var(--shadow-border-default);
-  }
-
-  &.small {
-    border-radius: calc(var(--radius) - 2px);
-    box-shadow: var(--shadow-border-small);
-  }
-
-  &.medium {
-    border-radius: calc(var(--radius) + 6px);
-    box-shadow: var(--shadow-border-medium);
-  }
-
-  &.large {
-    border-radius: calc(var(--radius) + 6px);
-    box-shadow: var(--shadow-border-large);
-  }
-
-  &.tooltip {
-    border-radius: calc(var(--radius) - 2px);
-    box-shadow: var(--shadow-border-tooltip);
-  }
-
-  &.menu {
-    border-radius: calc(var(--radius) + 6px);
-    box-shadow: var(--shadow-border-menu);
-  }
-
-  &.modal {
-    border-radius: calc(var(--radius) + 6px);
-    box-shadow: var(--shadow-border-modal);
-  }
-
-  &.fullscreen {
-    border-radius: calc(var(--radius) + 8px);
-    box-shadow: var(--shadow-border-fullscreen);
-  }
-}
-</style>

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

@@ -1,23 +1,21 @@
 import type { ListOptionSelected } from '../list/types';
 import type { MenuProps } from './types';
-declare var __VLS_12: {}, __VLS_23: {};
+declare var __VLS_8: {}, __VLS_19: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_12) => any;
+    default?: (props: typeof __VLS_8) => any;
 } & {
-    items?: (props: typeof __VLS_23) => any;
+    items?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<MenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (args_0: ListOptionSelected, args_1: MouseEvent) => any;
     change: (visible: boolean) => any;
+    select: (args_0: ListOptionSelected, args_1: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<MenuProps> & Readonly<{
-    onSelect?: ((args_0: ListOptionSelected, args_1: MouseEvent) => any) | undefined;
     onChange?: ((visible: boolean) => any) | undefined;
+    onSelect?: ((args_0: ListOptionSelected, args_1: MouseEvent) => any) | undefined;
 }>, {
+    position: import("../../types/shared").ComponentPosition;
     options: import("../list/types").ListOption[];
     closeOnPressEscape: boolean;
-    position: import("../../types/shared").ComponentPosition;
-    showDelay: number;
-    hideDelay: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/menu/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { shallowRef } from "vue";
+import { computed, shallowRef } from "vue";
 import { usePopoverResponsive } from "../../composables/use-popover-responsive";
 import { getCssUnitValue } from "../../utils/format";
 import PList from "../list/index.vue";
@@ -8,47 +8,41 @@ defineOptions({
   name: "PMenu",
   inheritAttrs: false
 });
-defineProps({
+const props = defineProps({
   width: { type: [String, Number], required: false },
   options: { type: Array, required: false, default: () => [] },
+  disabled: { type: Boolean, required: false },
   position: { type: null, required: false, default: "bottom-start" },
-  showDelay: { type: Number, required: false, default: 0 },
-  hideDelay: { type: Number, required: false, default: 100 },
   closeOnPressEscape: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["change", "select"]);
-const { isXs, attrs } = usePopoverResponsive();
+const { isAdaptive, responsiveClasses } = usePopoverResponsive();
 const popoverVisible = shallowRef(false);
-function onVisibleChange(visible) {
+const listStyles = computed(() => ({
+  "--list-width": getCssUnitValue(props.width)
+}));
+function togglePopoverVisible(visible) {
   popoverVisible.value = visible;
 }
-function hidePopover() {
-  onVisibleChange(false);
-}
-function onOptionClick(ev, item) {
+function onOptionClick(item, ev) {
   emits("select", item, ev);
-  hidePopover();
+  togglePopoverVisible(false);
 }
 </script>
 
 <template>
   <PPopover
+    v-model="popoverVisible"
     class="pxd-menu"
     trigger="click"
-    :show-delay="isXs ? 0 : showDelay"
-    :hide-delay="isXs ? 0 : hideDelay"
+    :disabled="disabled"
     :position="position"
-    :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"
     v-bind="$attrs"
-    @escape="hidePopover"
-    @outside-click="hidePopover"
-    @visible-change="onVisibleChange"
   >
     <slot />
 
@@ -56,8 +50,8 @@ function onOptionClick(ev, item) {
       <PList
         :width="width"
         :options="options"
-        :key-listener="popoverVisible"
-        :style="{ '--list-width': getCssUnitValue(width) }"
+        :style="listStyles"
+        :visible="popoverVisible"
         class="max-h-68 sm:w-(--list-width) rounded-inherit"
         @select="onOptionClick"
       >

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

@@ -4,9 +4,8 @@ import type { ListOption, ListOptionSelected } from '../list/types'
 export interface MenuProps {
   width?: string | number
   options?: ListOption[]
+  disabled?: boolean
   position?: ComponentPosition
-  showDelay?: number
-  hideDelay?: number
   closeOnPressEscape?: boolean
 }
 

package/dist/components/message/composables/use-group-expand.d.ts

@@ -0,0 +1,13 @@
+import type { MaybeRefOrGetter } from 'vue';
+interface UseGroupExpandOptions {
+    expand: MaybeRefOrGetter<boolean | undefined>;
+    onPauseAll: () => void;
+    onResumeAll: () => void;
+}
+export declare function useGroupExpand({ expand, onPauseAll, onResumeAll }: UseGroupExpandOptions): {
+    groupExpand: import("vue").ShallowRef<boolean | undefined, boolean | undefined>;
+    collapse: () => void;
+    onPointerEnter: () => void;
+    onPointerLeave: () => void;
+};
+export {};

package/dist/components/message/composables/use-group-expand.js

@@ -0,0 +1,50 @@
+import { shallowRef, watchEffect } from "vue";
+import { toValue } from "../../../utils/ref.js";
+const TRANSITION_LOCK_MS = 250;
+const LEAVE_DEBOUNCE_MS = 200;
+export function useGroupExpand({ expand, onPauseAll, onResumeAll }) {
+  const groupExpand = shallowRef(toValue(expand));
+  let leaveTimeoutId;
+  let isTransitioning = false;
+  function onPointerEnter() {
+    clearTimeout(leaveTimeoutId);
+    if (groupExpand.value || isTransitioning) {
+      return;
+    }
+    isTransitioning = true;
+    groupExpand.value = true;
+    onPauseAll();
+    setTimeout(() => {
+      isTransitioning = false;
+    }, TRANSITION_LOCK_MS);
+  }
+  function onPointerLeave() {
+    clearTimeout(leaveTimeoutId);
+    if (isTransitioning) {
+      return;
+    }
+    leaveTimeoutId = setTimeout(() => {
+      onResumeAll();
+      if (toValue(expand)) {
+        return;
+      }
+      isTransitioning = true;
+      groupExpand.value = false;
+      setTimeout(() => {
+        isTransitioning = false;
+      }, TRANSITION_LOCK_MS);
+    }, LEAVE_DEBOUNCE_MS);
+  }
+  function collapse() {
+    groupExpand.value = false;
+  }
+  watchEffect(() => {
+    groupExpand.value = toValue(expand);
+  });
+  return {
+    groupExpand,
+    collapse,
+    onPointerEnter,
+    onPointerLeave
+  };
+}

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

@@ -0,0 +1,9 @@
+import type { MessageItemConfig } from '../../../composables/use-message';
+export declare function useMessageTimer(onTimeout: (id: MessageItemConfig['id']) => void): {
+    setAutoCloseTimer: (message: MessageItemConfig) => void;
+    pauseMessage: (message: MessageItemConfig) => void;
+    resumeMessage: (message: MessageItemConfig) => void;
+    clearTimers: (messages: MessageItemConfig[]) => void;
+    pauseAll: (messages: MessageItemConfig[]) => void;
+    resumeAll: (messages: MessageItemConfig[]) => void;
+};

package/dist/components/message/composables/use-message-timer.js

@@ -0,0 +1,61 @@
+export function useMessageTimer(onTimeout) {
+  function setAutoCloseTimer(message) {
+    message._startedAtMs = Date.now();
+    if (message._remainingMs == null) {
+      message._remainingMs = message.durations;
+    }
+    if (message._timerId) {
+      clearTimeout(message._timerId);
+    }
+    message._timerId = setTimeout(() => {
+      onTimeout(message.id);
+    }, message._remainingMs);
+  }
+  function pauseMessage(message) {
+    if (!message.durations || message.durations <= 0) {
+      return;
+    }
+    if (message._timerId) {
+      clearTimeout(message._timerId);
+      message._timerId = void 0;
+    }
+    if (message._startedAtMs != null) {
+      const elapsed = Date.now() - message._startedAtMs;
+      const previousRemaining = message._remainingMs ?? message.durations;
+      message._remainingMs = Math.max(0, previousRemaining - elapsed);
+    }
+  }
+  function resumeMessage(message) {
+    if (!message.durations || message.durations <= 0) {
+      return;
+    }
+    const remaining = message._remainingMs ?? 0;
+    if (remaining <= 100) {
+      onTimeout(message.id);
+      return;
+    }
+    setAutoCloseTimer(message);
+  }
+  function clearTimers(messages) {
+    messages.forEach((m) => {
+      if (m._timerId) {
+        clearTimeout(m._timerId);
+        m._timerId = void 0;
+      }
+    });
+  }
+  function pauseAll(messages) {
+    messages.forEach(pauseMessage);
+  }
+  function resumeAll(messages) {
+    messages.forEach(resumeMessage);
+  }
+  return {
+    setAutoCloseTimer,
+    pauseMessage,
+    resumeMessage,
+    clearTimers,
+    pauseAll,
+    resumeAll
+  };
+}

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

@@ -0,0 +1,4 @@
+import type { MessageItemConfig } from '../../../composables/use-message';
+export declare function usePromiseMessage(setAutoCloseTimer: (message: MessageItemConfig) => void): {
+    handlePromiseMessage: (message: MessageItemConfig) => void;
+};

package/dist/components/message/composables/use-promise-message.js

@@ -0,0 +1,49 @@
+export function usePromiseMessage(setAutoCloseTimer) {
+  function resolvePromiseMessage(handler, data) {
+    if (!handler) {
+      return void 0;
+    }
+    if (typeof handler === "function") {
+      const result = handler(data);
+      return typeof result === "string" ? result : void 0;
+    }
+    return typeof handler === "string" ? handler : void 0;
+  }
+  function handlePromiseMessage(message) {
+    if (!message.promise) {
+      return;
+    }
+    let promiseResult;
+    message.promise.then((data) => {
+      promiseResult = data;
+      message.type = "success";
+      const successMessage = resolvePromiseMessage(message.success, data);
+      if (successMessage) {
+        message.message = successMessage;
+      }
+    }).catch((err) => {
+      promiseResult = err;
+      message.type = "error";
+      const errorMessage = resolvePromiseMessage(message.error, err);
+      if (errorMessage) {
+        message.message = errorMessage;
+      }
+    }).finally(() => {
+      const finallyMessage = resolvePromiseMessage(message.finally, promiseResult);
+      if (finallyMessage) {
+        message.message = finallyMessage;
+      }
+      message.promise = void 0;
+      message.success = void 0;
+      message.error = void 0;
+      message.finally = void 0;
+      if (message.durations && message.durations > 0) {
+        message._remainingMs = message.durations;
+        setAutoCloseTimer(message);
+      }
+    });
+  }
+  return {
+    handlePromiseMessage
+  };
+}

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

@@ -7,16 +7,7 @@ declare function getMessageById(id: MessageItemConfig['id']): {
     index: number;
     message: {
         height?: number | undefined;
-        _timerId?: {
-            close: () => NodeJS.Timeout;
-            hasRef: () => boolean;
-            ref: () => NodeJS.Timeout;
-            refresh: () => NodeJS.Timeout;
-            unref: () => NodeJS.Timeout;
-            _onTimeout: (...args: any[]) => void;
-            [Symbol.toPrimitive]: () => number;
-            [Symbol.dispose]: () => void;
-        } | undefined;
+        _timerId?: ReturnType<typeof setTimeout> | undefined;
         _remainingMs?: number | undefined;
         _startedAtMs?: number | undefined;
         id?: string | number | undefined;
@@ -61,16 +52,7 @@ declare function clearMessage(): void;
 declare const __VLS_export: import("vue").DefineComponent<MessageProps, {
     messages: import("vue").Ref<{
         height?: number | undefined;
-        _timerId?: {
-            close: () => NodeJS.Timeout;
-            hasRef: () => boolean;
-            ref: () => NodeJS.Timeout;
-            refresh: () => NodeJS.Timeout;
-            unref: () => NodeJS.Timeout;
-            _onTimeout: (...args: any[]) => void;
-            [Symbol.toPrimitive]: () => number;
-            [Symbol.dispose]: () => void;
-        } | undefined;
+        _timerId?: ReturnType<typeof setTimeout> | undefined;
         _remainingMs?: number | undefined;
         _startedAtMs?: number | undefined;
         id?: string | number | undefined;
@@ -108,16 +90,7 @@ declare const __VLS_export: import("vue").DefineComponent<MessageProps, {
         }>)) | undefined;
     }[], MessageItemConfig[] | {
         height?: number | undefined;
-        _timerId?: {
-            close: () => NodeJS.Timeout;
-            hasRef: () => boolean;
-            ref: () => NodeJS.Timeout;
-            refresh: () => NodeJS.Timeout;
-            unref: () => NodeJS.Timeout;
-            _onTimeout: (...args: any[]) => void;
-            [Symbol.toPrimitive]: () => number;
-            [Symbol.dispose]: () => void;
-        } | undefined;
+        _timerId?: ReturnType<typeof setTimeout> | undefined;
         _remainingMs?: number | undefined;
         _startedAtMs?: number | undefined;
         id?: string | number | undefined;
@@ -160,13 +133,13 @@ declare const __VLS_export: import("vue").DefineComponent<MessageProps, {
     close: typeof closeMessageById;
     clear: typeof clearMessage;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (id: MessageItemType) => any;
+    close: (id: string | number | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<MessageProps> & Readonly<{
-    onClose?: ((id: MessageItemType) => any) | undefined;
+    onClose?: ((id: string | number | undefined) => any) | undefined;
 }>, {
+    position: import("../../types/shared").ComponentPosition<"top" | "bottom">;
     max: number;
     group: string;
-    position: import("../../types/shared").ComponentPosition<"top" | "bottom">;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;