pxd 0.0.64 → 0.1.3

package/dist/components/message/index.vue

@@ -1,161 +1,179 @@
 <script setup>
 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";
-import { getCssUnitValue } from "../../utils/format";
-import { isServer } from "../../utils/is";
+import { useMessageGroup } from "../../composables/_internal/use-message-group.js";
+import { useDocumentHidden } from "../../composables/use-document-hidden.js";
+import { UPDATE_MESSAGE_EVENT_NAME } from "../../composables/use-message.js";
+import { cachedOff, cachedOn } from "../../utils/event.js";
+import { getCssUnitValue } from "../../utils/format.js";
+import { isServer } from "../../utils/is.js";
 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
+	name: "PMessage",
+	inheritAttrs: false
 });
 const props = defineProps({
-  max: { type: Number, required: false, default: 3 },
-  width: { type: [String, Number], required: false },
-  group: { type: String, required: false, default: "default" },
-  expand: { type: Boolean, required: false },
-  position: { type: null, required: false, default: "top" }
+	max: {
+		type: Number,
+		required: false,
+		default: 3
+	},
+	width: {
+		type: [String, Number],
+		required: false
+	},
+	group: {
+		type: String,
+		required: false,
+		default: "default"
+	},
+	expand: {
+		type: Boolean,
+		required: false
+	},
+	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)
+const messageGroupStyle = computed(() => {
+	const frontHeight = groupMessages.value[0]?.height || 0;
+	return {
+		"--message-width": getCssUnitValue(props.width),
+		"--message-front-height": getCssUnitValue(frontHeight)
+	};
 });
-useDocumentHidden((isHidden) => {
-  if (isHidden) {
-    pauseAll(groupMessages.value);
-  } else {
-    resumeAll(groupMessages.value);
-  }
+const { groupExpand, collapse, onPointerEnter, onPointerLeave, startTimer, clearTimer, clearTimers, pauseMessage, resumeMessage, pauseAll, resumeAll, handlePromiseMessage } = useMessageGroup({
+	messages: groupMessages,
+	expand: () => props.expand,
+	onTimeout: closeMessageById
 });
-const messageGroupStyle = computed(() => {
-  const frontHeight = groupMessages.value[0]?.height || 0;
-  const visibleItemCounts = Math.min(props.max, groupMessages.value.length);
-  return {
-    "--message-width": getCssUnitValue(props.width),
-    "--message-items": visibleItemCounts,
-    "--message-front-height": getCssUnitValue(frontHeight)
-  };
+useDocumentHidden((isHidden) => {
+	if (isHidden) {
+		pauseAll();
+	} else {
+		resumeAll();
+	}
 });
 function getMessageById(id) {
-  const index = groupMessages.value.findIndex((m) => m.id === id);
-  const message = groupMessages.value[index];
-  if (!message) {
-    return {
-      index: -1,
-      message: null
-    };
-  }
-  return {
-    index,
-    message
-  };
+	const index = groupMessages.value.findIndex((m) => m.id === id);
+	const message = groupMessages.value[index];
+	if (!message) {
+		return {
+			index: -1,
+			message: null
+		};
+	}
+	return {
+		index,
+		message
+	};
 }
 function pauseMessageById(id) {
-  if (!id) {
-    return;
-  }
-  const { message } = getMessageById(id);
-  if (message) {
-    pauseMessage(message);
-  }
+	if (!id) {
+		return;
+	}
+	const { message } = getMessageById(id);
+	if (message) {
+		pauseMessage(message);
+	}
 }
 function resumeMessageById(id) {
-  if (!id) {
-    return;
-  }
-  const { message } = getMessageById(id);
-  if (message) {
-    resumeMessage(message);
-  }
+	if (!id) {
+		return;
+	}
+	const { message } = getMessageById(id);
+	if (message) {
+		resumeMessage(message);
+	}
 }
 function closeMessageById(id) {
-  const { index, message } = getMessageById(id);
-  if (!message) {
-    return;
-  }
-  if (message._timerId) {
-    clearTimeout(message._timerId);
-    message._timerId = void 0;
-  }
-  groupMessages.value.splice(index, 1);
-  if (!props.expand && groupMessages.value.length === 0) {
-    collapse();
-  }
-  emits("close", id);
+	const { index, message } = getMessageById(id);
+	if (!message) {
+		return;
+	}
+	clearTimer(message);
+	groupMessages.value.splice(index, 1);
+	// Avoid manually closing all data and maintaining the expanded state when creating again
+	if (!props.expand && groupMessages.value.length === 0) {
+		collapse();
+	}
+	emits("close", id);
 }
 function clearMessage() {
-  clearTimers(groupMessages.value);
-  groupMessages.value = [];
+	clearTimers();
+	groupMessages.value = [];
+	if (!props.expand) {
+		collapse();
+	}
 }
 function handleCreateMessage(data) {
-  if (!data || data.group !== props.group) {
-    return;
-  }
-  groupMessages.value.unshift(data);
-  const isPromiseLoading = data.type === "loading" && data.promise;
-  const message = groupMessages.value[0];
-  if (isPromiseLoading) {
-    handlePromiseMessage(message);
-  } else if (message.durations) {
-    setAutoCloseTimer(message);
-  }
+	if (!data || data.group !== props.group) {
+		return;
+	}
+	groupMessages.value.unshift(data);
+	// If it's a loading type with promise, don't start auto-close timer
+	// Wait for promise to resolve/reject first
+	const isPromiseLoading = data.type === "loading" && data.promise;
+	// Make sure the data has been converted to responsive
+	// to avoid changing the type from not taking effect.
+	const message = groupMessages.value[0];
+	if (isPromiseLoading) {
+		handlePromiseMessage(message);
+	} else if (message.durations) {
+		startTimer(message);
+	}
 }
 function onUpdateMessage({ detail }) {
-  if (detail.group !== props.group) {
-    return;
-  }
-  switch (detail.type) {
-    case "create":
-      if (detail.data) {
-        handleCreateMessage(detail.data);
-      }
-      break;
-    case "remove":
-      if (detail.data) {
-        const { id } = detail.data;
-        if (id) {
-          closeMessageById(id);
-        }
-      }
-      break;
-    case "clear":
-      clearMessage();
-      break;
-  }
+	if (detail.group !== props.group) {
+		return;
+	}
+	switch (detail.type) {
+		case "create":
+			if (detail.data) {
+				handleCreateMessage(detail.data);
+			}
+			break;
+		case "remove":
+			if (detail.data) {
+				const { id } = detail.data;
+				if (id) {
+					closeMessageById(id);
+				}
+			}
+			break;
+		case "clear":
+			clearMessage();
+			break;
+	}
 }
 onMounted(() => {
-  if (isServer()) {
-    return;
-  }
-  cachedOn(window, UPDATE_MESSAGE_EVENT_NAME, onUpdateMessage);
+	if (isServer()) {
+		return;
+	}
+	cachedOn(window, UPDATE_MESSAGE_EVENT_NAME, onUpdateMessage);
 });
 onBeforeUnmount(() => {
-  clearMessage();
-  cachedOff(window, UPDATE_MESSAGE_EVENT_NAME, onUpdateMessage);
+	clearMessage();
+	cachedOff(window, UPDATE_MESSAGE_EVENT_NAME, onUpdateMessage);
 });
 defineExpose({
-  messages: groupMessages,
-  get: getMessageById,
-  pause: pauseMessageById,
-  resume: resumeMessageById,
-  close: closeMessageById,
-  clear: clearMessage
+	messages: groupMessages,
+	get: getMessageById,
+	pause: pauseMessageById,
+	resume: resumeMessageById,
+	close: closeMessageById,
+	clear: clearMessage
 });
 </script>
 
 <template>
   <PTeleport to="body">
     <section
+      data-message
       class="pxd-message h-0 fixed z-20 flex w-(--message-width)"
       aria-live="polite"
       aria-label="Notifications"
@@ -187,123 +205,6 @@ defineExpose({
   </PTeleport>
 </template>
 
-<style lang="postcss">
-.pxd-message {
-  --message-width: 356px;
-
-  .pxd-message--group {
-    align-items: center;
-    flex-direction: column;
-  }
-
-  &[data-position^='top'] {
-    --item-offset: 10px;
-    --starting-offset: -100%;
-    top: 1rem;
-  }
-
-  &[data-position^='bottom'] {
-    --item-offset: -10px;
-    --starting-offset: 100%;
-    bottom: 1rem;
-
-    .pxd-message--group {
-      flex-direction: column-reverse;
-    }
-  }
-
-  &[data-position='top'],
-  &[data-position='bottom'] {
-    left: 50%;
-    justify-content: center;
-    transform: translateX(-50%);
-  }
-
-  &[data-position='top-start'],
-  &[data-position='bottom-start'] {
-    left: 1rem;
-    justify-content: flex-start;
-
-    .pxd-message--group {
-      align-items: flex-start;
-    }
-  }
-
-  &[data-position='top-end'],
-  &[data-position='bottom-end'] {
-    right: 1rem;
-    justify-content: flex-end;
-
-    .pxd-message--group {
-      align-items: flex-end;
-    }
-  }
-
-  .pxd-message--item {
-    --message-item-scale: var(--message-item-index) * 0.05 + 1;
-    --message-item-transition: transform, opacity, height;
-
-    &::after {
-      content: '';
-      position: absolute;
-      right: 0;
-      left: 0;
-      top: -18px;
-      height: 24px;
-      z-index: -1;
-    }
-  }
-
-  &[data-expand='true'] {
-    .pxd-message--item {
-      --message-item-transform: none;
-      position: relative;
-      will-change: transform, opacity, height;
-    }
-
-    .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)))
-        scale(calc(-1 * var(--message-item-scale)));
-      position: absolute;
-
-      &[data-front='false'] {
-        height: var(--message-front-height);
-
-        & > * {
-          transition: opacity 0.1s ease-out;
-          opacity: 0;
-        }
-      }
-    }
-
-    .pxd-transition-message-move {
-      transition-duration: 0s;
-    }
-  }
-
-  &[data-expand] {
-    .pxd-transition-message-enter-active,
-    .pxd-transition-message-leave-active {
-      transition-property: transform, opacity;
-    }
-
-    .pxd-transition-message-leave-active {
-      position: absolute;
-    }
-
-    .pxd-transition-message-enter-from,
-    .pxd-transition-message-leave-to {
-      opacity: 0;
-      --message-item-transform: translateZ(0) translateY(var(--starting-offset))
-        scaleX(var(--popover-scale));
-    }
-  }
-}
+<style>
+.pxd-message{--message-width:356px}.pxd-message .pxd-message--group{align-items:center;flex-direction:column}.pxd-message[data-position^=top]{--item-offset:10px;--starting-offset:-100%;top:1rem}.pxd-message[data-position^=bottom]{--item-offset:-10px;--starting-offset:100%;bottom:1rem}.pxd-message[data-position^=bottom] .pxd-message--group{flex-direction:column-reverse}.pxd-message[data-position=bottom],.pxd-message[data-position=top]{justify-content:center;left:50%;transform:translateX(-50%)}.pxd-message[data-position=bottom-start],.pxd-message[data-position=top-start]{justify-content:flex-start;left:1rem}.pxd-message[data-position=bottom-start] .pxd-message--group,.pxd-message[data-position=top-start] .pxd-message--group{align-items:flex-start}.pxd-message[data-position=bottom-end],.pxd-message[data-position=top-end]{justify-content:flex-end;right:1rem}.pxd-message[data-position=bottom-end] .pxd-message--group,.pxd-message[data-position=top-end] .pxd-message--group{align-items:flex-end}.pxd-message .pxd-message-item{--message-item-scale:calc(1 - var(--message-item-index)*0.05);--message-item-transition:transform,opacity,height}.pxd-message .pxd-message-item:after{content:"";height:24px;left:0;position:absolute;right:0;top:-18px;z-index:-1}.pxd-message[data-expand=true] .pxd-message-item{--message-item-transform:none;position:relative;will-change:transform,opacity,height}.pxd-message[data-expand=true] .pxd-transition-message-move{transition-property:transform,opacity}.pxd-message[data-expand=false] .pxd-message-item{--message-item-transform:translateZ(0) translateY(calc(var(--item-offset)*var(--message-item-index))) scale(var(--message-item-scale));position:absolute}.pxd-message[data-expand=false] .pxd-message-item[data-front=false]{height:var(--message-front-height)}.pxd-message[data-expand=false] .pxd-message-item[data-front=false]>*{opacity:0;transition:opacity .1s ease-out}.pxd-message[data-expand=false] .pxd-transition-message-move{transition-duration:0s}.pxd-message[data-expand] .pxd-transition-message-enter-active,.pxd-message[data-expand] .pxd-transition-message-leave-active{transition-property:transform,opacity}.pxd-message[data-expand] .pxd-transition-message-leave-active{position:absolute}.pxd-message[data-expand] .pxd-transition-message-enter-from,.pxd-message[data-expand] .pxd-transition-message-leave-to{opacity:0;--message-item-transform:translateZ(0) translateY(var(--starting-offset)) scaleX(var(--popover-scale))}
 </style>

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

@@ -1,5 +1,5 @@
 import type { MessageItemConfig } from '../../composables/use-message'
-import type { ComponentPosition } from '../../types/shared'
+import type { ComponentPosition } from '../../types/shared/props'
 
 export interface MessageProps {
   max?: number

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

@@ -8,56 +8,60 @@ import WarningFillIcon from "@gdsicon/vue/warning-fill";
 import { computed, onMounted, shallowRef, watch } from "vue";
 import PButton from "../button/index.vue";
 defineOptions({
-  name: "PMessageItem",
-  inheritAttrs: false
+	name: "PMessageItem",
+	inheritAttrs: false
 });
 const props = defineProps({
-  max: { type: Number, required: true },
-  index: { type: Number, required: true },
-  itemData: { type: Object, required: true }
+	max: {
+		type: Number,
+		required: true
+	},
+	index: {
+		type: Number,
+		required: true
+	},
+	itemData: {
+		type: Object,
+		required: true
+	}
 });
 const emits = defineEmits(["close"]);
 const TYPE_ICONS = {
-  info: InformationFillIcon,
-  success: SuccessFillIcon,
-  warning: WarningFillIcon,
-  error: ErrorFillIcon,
-  loading: LoadingIcon
+	info: InformationFillIcon,
+	success: SuccessFillIcon,
+	warning: WarningFillIcon,
+	error: ErrorFillIcon,
+	loading: LoadingIcon
 };
 const itemRef = shallowRef();
 const computedStyle = computed(() => {
-  const { index, max } = props;
-  const isVisible = index < max;
-  return {
-    "--message-item-index": index,
-    "z-index": max - index,
-    opacity: isVisible ? 1 : 0,
-    "pointer-events": isVisible ? "auto" : "none"
-  };
+	const { index, max } = props;
+	const isVisible = index < max;
+	return {
+		"--message-item-index": index,
+		"z-index": max - index,
+		opacity: isVisible ? 1 : 0,
+		position: isVisible ? undefined : "absolute",
+		"pointer-events": isVisible ? "auto" : "none"
+	};
 });
 function onItemCloseClick() {
-  if (props.itemData.action?.onClick) {
-    props.itemData.action.onClick();
-  }
-  emits("close", props.itemData.id);
+	if (props.itemData.action?.onClick) {
+		props.itemData.action.onClick();
+	}
+	emits("close", props.itemData.id);
 }
 function setItemHeightInfo() {
-  if (!itemRef.value) {
-    return;
-  }
-  props.itemData.height = itemRef.value.offsetHeight;
+	if (!itemRef.value) {
+		return;
+	}
+	// It is necessary to ensure the reference to the original object;
+	// otherwise, the type of the promise data cannot be updated.
+	props.itemData.height = itemRef.value.offsetHeight;
 }
-watch(
-  () => props.itemData.message,
-  () => {
-    if (!itemRef.value) {
-      return;
-    }
-    setItemHeightInfo();
-  }
-);
+watch(() => props.itemData.message, setItemHeightInfo, { flush: "post" });
 onMounted(() => {
-  setItemHeightInfo();
+	setItemHeightInfo();
 });
 </script>
 
@@ -65,17 +69,18 @@ onMounted(() => {
   <li
     ref="itemRef"
     tabindex="0"
+    data-message-item
     :data-index="index"
     :data-front="index === 0"
     :style="computedStyle"
-    class="pxd-message--item px-3 py-2 text-sm flex w-full max-w-full shrink-0 transform-(--message-item-transform) rounded-lg bg-background-100 break-all whitespace-pre-wrap shadow-border-modal outline-none motion-safe:transition-(--message-item-transition)"
-    :class="[itemData.class, { 'pr-9': itemData.closeable }]"
+    class="pxd-message-item px-3 py-2 text-sm flex w-full max-w-full shrink-0 transform-(--message-item-transform) rounded-lg bg-background-100 break-all whitespace-pre-wrap shadow-border-modal outline-none motion-safe:transition-(--message-item-transition)"
+    :class="[itemData.class, { 'pe-9': itemData.closeable }]"
     v-bind="$attrs"
   >
     <Component
       :is="TYPE_ICONS[itemData.type]"
       v-if="itemData.type"
-      class="pxd-message--icon mr-2 size-4 h-lh shrink-0"
+      class="pxd-message--icon me-2 size-4 h-lh shrink-0"
       :class="itemData.type"
     />
 
@@ -98,27 +103,6 @@ onMounted(() => {
   </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>
+.pxd-message--icon.info{color:var(--color-gray-600)}.pxd-message--icon.error{color:var(--color-red-700)}.pxd-message--icon.loading{animation:spin 1s linear infinite;color:var(--color-blue-700)}.pxd-message--icon.warning{color:var(--color-amber-700)}.pxd-message--icon.success{color:var(--color-green-700)}
 </style>

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

@@ -1,35 +1,35 @@
 import type { ModalProps } from './types';
-declare var __VLS_17: {}, __VLS_19: {}, __VLS_21: {}, __VLS_23: {}, __VLS_25: {};
+declare var __VLS_16: {}, __VLS_18: {}, __VLS_20: {}, __VLS_35: {}, __VLS_37: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_17) => any;
+    header?: (props: typeof __VLS_16) => any;
 } & {
-    title?: (props: typeof __VLS_19) => any;
+    title?: (props: typeof __VLS_18) => any;
 } & {
-    subtitle?: (props: typeof __VLS_21) => any;
+    subtitle?: (props: typeof __VLS_20) => any;
 } & {
-    default?: (props: typeof __VLS_23) => any;
+    default?: (props: typeof __VLS_35) => any;
 } & {
-    footer?: (props: typeof __VLS_25) => any;
+    footer?: (props: typeof __VLS_37) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: boolean) => any;
     "update:modelValue": (visible: boolean) => any;
+    "outside-click": (args_0: PointerEvent) => any;
     show: () => any;
     hide: () => 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"?: ((visible: boolean) => any) | undefined;
+    "onOutside-click"?: ((args_0: PointerEvent) => any) | undefined;
     onShow?: (() => any) | undefined;
     onHide?: (() => any) | undefined;
-    "onOutside-click"?: ((args_0: PointerEvent) => any) | undefined;
     "onVisible-change"?: ((visible: boolean) => any) | undefined;
 }>, {
+    closeable: boolean;
     modelValue: boolean;
-    autoFocusElement: string | boolean;
-    appendToBody: boolean;
     closeOnPressEscape: boolean;
+    autoFocusElement: string | boolean;
     closeOnClickOverlay: boolean;
     defaultHeaderStyle: boolean;
     defaultFooterStyle: boolean;