pxd 0.0.60 → 0.0.62

package/dist/components/message/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { useDocumentHidden } from "../../composables/use-document-hidden";
 import { UPDATE_MESSAGE_EVENT_NAME } from "../../composables/use-message";
 import { cachedOff, cachedOn } from "../../utils/event";
@@ -7,6 +7,9 @@ import { getCssUnitValue } from "../../utils/format";
 import { isServer } from "../../utils/is";
 import PMessageItem from "../message-item/index.vue";
 import PTeleport from "../teleport/index.vue";
+import { useGroupExpand } from "./composables/use-group-expand";
+import { useMessageTimer } from "./composables/use-message-timer";
+import { usePromiseMessage } from "./composables/use-promise-message";
 defineOptions({
   name: "PMessage",
   inheritAttrs: false
@@ -19,15 +22,21 @@ const props = defineProps({
   position: { type: null, required: false, default: "top" }
 });
 const emits = defineEmits(["close"]);
+const groupMessages = ref([]);
+const { setAutoCloseTimer, pauseMessage, resumeMessage, clearTimers, pauseAll, resumeAll } = useMessageTimer(closeMessageById);
+const { handlePromiseMessage } = usePromiseMessage(setAutoCloseTimer);
+const { groupExpand, collapse, onPointerEnter, onPointerLeave } = useGroupExpand({
+  expand: () => props.expand,
+  onPauseAll: () => pauseAll(groupMessages.value),
+  onResumeAll: () => resumeAll(groupMessages.value)
+});
 useDocumentHidden((isHidden) => {
   if (isHidden) {
-    pauseAllMessages();
+    pauseAll(groupMessages.value);
   } else {
-    resumeAllMessages();
+    resumeAll(groupMessages.value);
   }
 });
-const groupExpand = ref(props.expand);
-const groupMessages = ref([]);
 const messageGroupStyle = computed(() => {
   const frontHeight = groupMessages.value[0]?.height || 0;
   const visibleItemCounts = Math.min(props.max, groupMessages.value.length);
@@ -51,43 +60,6 @@ function getMessageById(id) {
     message
   };
 }
-function setAutoCloseTimer(message) {
-  message._startedAtMs = Date.now();
-  if (message._remainingMs == null) {
-    message._remainingMs = message.durations;
-  }
-  if (message._timerId) {
-    clearTimeout(message._timerId);
-  }
-  message._timerId = setTimeout(() => {
-    closeMessageById(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) {
-    closeMessageById(message.id);
-    return;
-  }
-  setAutoCloseTimer(message);
-}
 function pauseMessageById(id) {
   if (!id) {
     return;
@@ -117,63 +89,14 @@ function closeMessageById(id) {
   }
   groupMessages.value.splice(index, 1);
   if (!props.expand && groupMessages.value.length === 0) {
-    groupExpand.value = false;
+    collapse();
   }
   emits("close", id);
 }
 function clearMessage() {
-  groupMessages.value.forEach((m) => {
-    if (m._timerId) {
-      clearTimeout(m._timerId);
-      m._timerId = void 0;
-    }
-  });
+  clearTimers(groupMessages.value);
   groupMessages.value = [];
 }
-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);
-    }
-  });
-}
 function handleCreateMessage(data) {
   if (!data || data.group !== props.group) {
     return;
@@ -187,15 +110,6 @@ function handleCreateMessage(data) {
     setAutoCloseTimer(message);
   }
 }
-function handleRemoveMessage(data) {
-  if (!data || !data.id) {
-    return;
-  }
-  closeMessageById(data.id);
-}
-function handleClearMessages() {
-  clearMessage();
-}
 function onUpdateMessage({ detail }) {
   if (detail.group !== props.group) {
     return;
@@ -208,60 +122,17 @@ function onUpdateMessage({ detail }) {
       break;
     case "remove":
       if (detail.data) {
-        handleRemoveMessage(detail.data);
+        const { id } = detail.data;
+        if (id) {
+          closeMessageById(id);
+        }
       }
       break;
     case "clear":
-      handleClearMessages();
+      clearMessage();
       break;
   }
 }
-function pauseAllMessages() {
-  groupMessages.value.forEach(pauseMessage);
-}
-function resumeAllMessages() {
-  groupMessages.value.forEach(resumeMessage);
-}
-const TRANSITION_LOCK_MS = 250;
-const LEAVE_DEBOUNCE_MS = 200;
-let leaveTimeoutId;
-let isTransitioning = false;
-function onPointerEnter() {
-  clearTimeout(leaveTimeoutId);
-  if (groupExpand.value || isTransitioning) {
-    return;
-  }
-  isTransitioning = true;
-  groupExpand.value = true;
-  pauseAllMessages();
-  setTimeout(() => {
-    isTransitioning = false;
-  }, TRANSITION_LOCK_MS);
-}
-function onPointerLeave() {
-  clearTimeout(leaveTimeoutId);
-  if (isTransitioning) {
-    return;
-  }
-  leaveTimeoutId = setTimeout(() => {
-    resumeAllMessages();
-    if (props.expand) {
-      return;
-    }
-    isTransitioning = true;
-    groupExpand.value = false;
-    setTimeout(() => {
-      isTransitioning = false;
-    }, TRANSITION_LOCK_MS);
-  }, LEAVE_DEBOUNCE_MS);
-}
-watch(
-  () => props.expand,
-  (isExpand) => {
-    groupExpand.value = isExpand;
-  },
-  { immediate: true }
-);
 onMounted(() => {
   if (isServer()) {
     return;
@@ -297,10 +168,11 @@ defineExpose({
         appear
         tag="ol"
         name="pxd-transition-message"
-        class="pxd-message--group min-w-16 p-0 m-0 flex h-auto w-full"
+        class="pxd-message--group min-w-16 p-0 m-0 flex h-auto w-full max-w-full"
         :class="{ 'gap-3': groupExpand }"
         @pointerenter="onPointerEnter"
         @pointerleave="onPointerLeave"
+        @pointercancel="onPointerLeave"
       >
         <PMessageItem
           v-for="(item, index) of groupMessages"
@@ -320,7 +192,6 @@ defineExpose({
   --message-width: 356px;
 
   .pxd-message--group {
-    max-width: 100vw;
     align-items: center;
     flex-direction: column;
   }
@@ -384,22 +255,18 @@ defineExpose({
   }
 
   &[data-expand='true'] {
-    .pxd-message--group {
-      --message-placeholder-height: calc(var(--message-front-height) * (var(--message-items) + 1));
-    }
-
     .pxd-message--item {
       --message-item-transform: none;
       position: relative;
       will-change: transform, opacity, height;
     }
-  }
 
-  &[data-expand='false'] {
-    .pxd-message--group {
-      --message-placeholder-height: calc(var(--message-front-height) + var(--message-items) * 12px);
+    .pxd-transition-message-move {
+      transition-property: transform, opacity;
     }
+  }
 
+  &[data-expand='false'] {
     .pxd-message--item {
       --message-item-transform: translateZ(0)
         translateY(calc(var(--item-offset) * var(--message-item-index)))
@@ -415,10 +282,13 @@ defineExpose({
         }
       }
     }
+
+    .pxd-transition-message-move {
+      transition-duration: 0s;
+    }
   }
 
   &[data-expand] {
-    .pxd-transition-message-move,
     .pxd-transition-message-enter-active,
     .pxd-transition-message-leave-active {
       transition-property: transform, opacity;
@@ -431,30 +301,8 @@ defineExpose({
     .pxd-transition-message-enter-from,
     .pxd-transition-message-leave-to {
       opacity: 0;
-      --message-item-transform: translateZ(0) translateY(var(--starting-offset)) scaleX(0.95);
-    }
-  }
-
-  .pxd-message--icon {
-    &.info {
-      color: var(--color-gray-600);
-    }
-
-    &.error {
-      color: var(--color-red-700);
-    }
-
-    &.loading {
-      animation: spin 1s linear infinite;
-      color: var(--color-blue-700);
-    }
-
-    &.warning {
-      color: var(--color-amber-700);
-    }
-
-    &.success {
-      color: var(--color-green-700);
+      --message-item-transform: translateZ(0) translateY(var(--starting-offset))
+        scaleX(var(--popover-scale));
     }
   }
 }

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

@@ -1,4 +1,4 @@
-import type { MessageItemType } from '../../composables/use-message'
+import type { MessageItemConfig } from '../../composables/use-message'
 import type { ComponentPosition } from '../../types/shared'
 
 export interface MessageProps {
@@ -10,5 +10,5 @@ export interface MessageProps {
 }
 
 export interface MessageEmits {
-  close: [id: MessageItemType['id']]
+  close: [id: MessageItemConfig['id']]
 }

package/dist/components/message-item/index.vue

@@ -45,8 +45,7 @@ function setItemHeightInfo() {
   if (!itemRef.value) {
     return;
   }
-  const rect = itemRef.value.getBoundingClientRect();
-  props.itemData.height = rect.height;
+  props.itemData.height = itemRef.value.offsetHeight;
 }
 watch(
   () => props.itemData.message,
@@ -98,3 +97,28 @@ onMounted(() => {
     </PButton>
   </li>
 </template>
+
+<style lang="postcss">
+.pxd-message--icon {
+  &.info {
+    color: var(--color-gray-600);
+  }
+
+  &.error {
+    color: var(--color-red-700);
+  }
+
+  &.loading {
+    animation: spin 1s linear infinite;
+    color: var(--color-blue-700);
+  }
+
+  &.warning {
+    color: var(--color-amber-700);
+  }
+
+  &.success {
+    color: var(--color-green-700);
+  }
+}
+</style>

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

@@ -13,23 +13,23 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: boolean) => any;
-    "update:modelValue": (args_0: boolean) => any;
+    "update:modelValue": (visible: boolean) => any;
     show: () => any;
     hide: () => any;
-    "visible-change": (args_0: boolean) => any;
-    "outside-click": (args_0: MouseEvent) => any;
+    "outside-click": (args_0: PointerEvent) => any;
+    "visible-change": (visible: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<ModalProps> & Readonly<{
     onChange?: ((args_0: boolean) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((visible: boolean) => any) | undefined;
     onShow?: (() => any) | undefined;
     onHide?: (() => any) | undefined;
-    "onVisible-change"?: ((args_0: boolean) => any) | undefined;
-    "onOutside-click"?: ((args_0: MouseEvent) => any) | undefined;
+    "onOutside-click"?: ((args_0: PointerEvent) => any) | undefined;
+    "onVisible-change"?: ((visible: boolean) => any) | undefined;
 }>, {
     modelValue: boolean;
-    closeOnPressEscape: boolean;
     autoFocusElement: string | boolean;
     appendToBody: boolean;
+    closeOnPressEscape: boolean;
     closeOnClickOverlay: boolean;
     defaultHeaderStyle: boolean;
     defaultFooterStyle: boolean;

package/dist/components/modal/index.vue

@@ -13,6 +13,7 @@ defineOptions({
   }
 });
 const props = defineProps({
+  zIndex: { type: Number, required: false },
   title: { type: [String, Number, Array, null], required: false },
   subtitle: { type: [String, Number, Array, null], required: false },
   width: { type: [String, Number], required: false },
@@ -27,11 +28,14 @@ const props = defineProps({
   closeOnPressEscape: { type: Boolean, required: false, default: false },
   closeOnClickOverlay: { type: Boolean, required: false, default: false }
 });
-const emits = defineEmits(["show", "hide", "change", "visible-change", "outside-click", "update:modelValue"]);
+const emits = defineEmits(["show", "hide", "change", "outside-click", "visible-change", "update:modelValue"]);
 const modalRef = shallowRef();
 const isVisible = useModelValue(props, emits);
 const computedStyle = computed(() => {
-  return { "--modal-width": getCssUnitValue(props.width) };
+  return {
+    "--modal-index": props.zIndex,
+    "--modal-width": getCssUnitValue(props.width)
+  };
 });
 const defaultStyles = computed(() => ({
   headerClass: props.defaultHeaderStyle ? "pb-4 sm:pb-6 border-b bg-background-200 dark:bg-background-100" : "",
@@ -85,7 +89,7 @@ watch(
         tabindex="-1"
         aria-modal="true"
         :aria-expanded="isVisible"
-        class="pxd-modal group/modal left-0 translate-z-0 sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:[--o:0] sm:[--t:scale(0.98)] sm:w-[var(--modal-width,540px)] max-sm:bottom-0 pointer-events-auto fixed z-10 flex w-full max-w-full flex-col overflow-hidden rounded-t-lg bg-background-100 shadow-border-modal outline-none motion-safe:transition-all dark:bg-background-200"
+        class="pxd-modal group/modal left-0 translate-z-0 sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:[--o:0] sm:[--t:scale(0.98)] sm:w-(--modal-width) max-sm:bottom-0 pointer-events-auto fixed z-(--modal-index) flex w-full max-w-full flex-col overflow-hidden rounded-t-lg bg-background-100 shadow-border-modal outline-none motion-safe:transition-appearance dark:bg-background-200"
         :class="wrapperClass"
         :style="computedStyle"
         v-bind="$attrs"

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

@@ -1,6 +1,7 @@
 import type { ComponentClass, ComponentLabel } from '../../types/shared'
 
 export interface ModalProps {
+  zIndex?: number
   title?: ComponentLabel
   subtitle?: ComponentLabel
   width?: string | number
@@ -9,6 +10,9 @@ export interface ModalProps {
   appendToBody?: boolean
   wrapperClass?: ComponentClass
   contentClass?: ComponentClass
+  /**
+   * Whether to automatically focus on the first or specified element.
+   */
   autoFocusElement?: string | boolean
   defaultHeaderStyle?: boolean
   defaultFooterStyle?: boolean
@@ -20,7 +24,7 @@ export interface ModalEmits {
   show: []
   hide: []
   change: [boolean]
-  'visible-change': [boolean]
-  'outside-click': [MouseEvent]
-  'update:modelValue': [boolean]
+  'outside-click': [PointerEvent]
+  'visible-change': [visible: boolean]
+  'update:modelValue': [visible: boolean]
 }

package/dist/components/note/index.vue

@@ -3,10 +3,10 @@ import CheckCircleIcon from "@gdsicon/vue/check-circle";
 import InformationIcon from "@gdsicon/vue/information";
 import StopIcon from "@gdsicon/vue/stop";
 import WarningIcon from "@gdsicon/vue/warning";
+import { tv } from "tailwind-variants";
 import { computed, h } from "vue";
 import { useConfigProvider } from "../../contexts/config-provider";
 import { isTruthyProp } from "../../utils/format";
-import { tv } from "tailwind-variants";
 defineOptions({
   name: "PNote",
   inheritAttrs: false
@@ -39,7 +39,7 @@ const noteVariant = tv({
         fill: "border-amber-100 bg-amber-200 text-amber-900"
       },
       default: {
-        base: "border-input text-gray-900",
+        base: "text-gray-900",
         fill: "border-gray-100 bg-gray-200 text-gray-900"
       },
       primary: {
@@ -68,7 +68,7 @@ const noteVariant = tv({
     { variant: "warning", fill: true, class: "border-amber-100 bg-amber-200 text-amber-900" },
     { variant: "warning", fill: false, class: "border-amber-500 text-amber-900" },
     { variant: "default", fill: true, class: "border-gray-100 bg-gray-200 text-gray-900" },
-    { variant: "default", fill: false, class: "border-input text-gray-900" },
+    { variant: "default", fill: false, class: "text-gray-900" },
     { variant: "primary", fill: true, class: "border-gray-100 bg-primary text-gray-100" },
     { variant: "primary", fill: false, class: "border-gray-alpha-400 text-primary" },
     { variant: "violet", fill: true, class: "text-violet-900 bg-violet-200 border-violet-100" },

package/dist/components/number-input/index.d.vue.ts

@@ -10,22 +10,23 @@ type __VLS_Slots = {} & {
     plusIcon?: (props: typeof __VLS_27) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<NumberInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    input: (args_0: number | null | undefined) => any;
     change: (args_0: number | null | undefined, args_1: Event) => any;
     "update:modelValue": (args_0: number | null | undefined) => any;
-    blur: (args_0: FocusEvent) => any;
+    input: (args_0: number | null | undefined) => any;
     focus: (args_0: FocusEvent) => any;
+    blur: (args_0: FocusEvent) => any;
 }, string, import("vue").PublicProps, Readonly<NumberInputProps> & Readonly<{
-    onInput?: ((args_0: number | null | undefined) => any) | undefined;
     onChange?: ((args_0: number | null | undefined, args_1: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: number | null | undefined) => any) | undefined;
-    onBlur?: ((args_0: FocusEvent) => any) | undefined;
+    onInput?: ((args_0: number | null | undefined) => any) | undefined;
     onFocus?: ((args_0: FocusEvent) => any) | undefined;
+    onBlur?: ((args_0: FocusEvent) => any) | undefined;
 }>, {
     max: number;
     min: number;
     clearValue: number | null;
     step: number;
+    controls: boolean;
     thousandsSeparator: string;
     scientific: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/number-input/index.vue

@@ -20,6 +20,7 @@ const props = defineProps({
   step: { type: Number, required: false, default: 1 },
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
+  controls: { type: Boolean, required: false, default: true },
   precision: { type: Number, required: false },
   thousands: { type: Boolean, required: false },
   thousandsSeparator: { type: String, required: false, default: "," },
@@ -221,6 +222,7 @@ watch(
   >
     <template #prefix>
       <button
+        v-if="controls"
         tabindex="-1"
         class="flex aspect-square h-full cursor-pointer touch-manipulation appearance-none items-center justify-center border-r font-inherit text-foreground outline-none enabled:hover:bg-background-hover enabled:hover:text-gray-1000 enabled:active:bg-background-active disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 motion-safe:transition-colors"
         :disabled="decreaseDisabled"
@@ -241,6 +243,7 @@ watch(
       <slot name="suffix" />
 
       <button
+        v-if="controls"
         tabindex="-1"
         class="flex aspect-square h-full cursor-pointer touch-manipulation appearance-none items-center justify-center border-l font-inherit text-foreground outline-none enabled:hover:bg-background-hover enabled:hover:text-gray-1000 enabled:active:bg-background-active disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 motion-safe:transition-colors"
         :disabled="increaseDisabled"

package/dist/components/number-input/types.d.ts

@@ -4,6 +4,7 @@ export interface NumberInputProps {
   step?: number
   readonly?: boolean
   disabled?: boolean
+  controls?: boolean
   precision?: number
   thousands?: boolean
   thousandsSeparator?: string

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

@@ -4,17 +4,20 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<OverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (args_0: MouseEvent) => any;
     "update:modelValue": (args_0: boolean) => any;
+    click: (args_0: PointerEvent) => any;
     escape: (args_0: KeyboardEvent) => any;
 }, string, import("vue").PublicProps, Readonly<OverlayProps> & Readonly<{
-    onClick?: ((args_0: MouseEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
+    onClick?: ((args_0: PointerEvent) => any) | undefined;
     onEscape?: ((args_0: KeyboardEvent) => any) | undefined;
 }>, {
     modelValue: boolean;
-    closeOnPressEscape: boolean;
+    lockScrollOnVisible: boolean;
+    showOverlay: boolean;
     appendToBody: boolean;
+    closeOnPressEscape: boolean;
+    closeOnClickOverlay: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;