pxd 0.0.52 → 0.0.53

package/dist/components/message/index.vue

@@ -1,11 +1,7 @@
 <script setup>
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useDocumentHidden } from "../../composables/use-document-hidden";
-import {
-  CLEAR_MESSAGES_EVENT_NAME,
-  CREATE_MESSAGE_EVENT_NAME,
-  REMOVE_MESSAGE_EVENT_NAME
-} from "../../composables/use-message";
+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";
@@ -186,7 +182,7 @@ function handlePromiseMessage(message) {
     }
   });
 }
-function onCreateMessage({ detail: data }) {
+function handleCreateMessage(data) {
   if (!data || data.group !== props.group) {
     return;
   }
@@ -199,17 +195,34 @@ function onCreateMessage({ detail: data }) {
     setAutoCloseTimer(message);
   }
 }
-function onRemoveMessage({ detail: data }) {
-  if (!data || !data.id || data.group !== props.group) {
+function handleRemoveMessage(data) {
+  if (!data || !data.id) {
     return;
   }
   closeMessageById(data.id);
 }
-function onClearMessages({ detail: data }) {
-  if (!data || data.group !== props.group) {
+function handleClearMessages() {
+  clearMessage();
+}
+function onUpdateMessage({ detail }) {
+  if (detail.group !== props.group) {
     return;
   }
-  clearMessage();
+  switch (detail.type) {
+    case "create":
+      if (detail.data) {
+        handleCreateMessage(detail.data);
+      }
+      break;
+    case "remove":
+      if (detail.data) {
+        handleRemoveMessage(detail.data);
+      }
+      break;
+    case "clear":
+      handleClearMessages();
+      break;
+  }
 }
 function pauseAllMessages() {
   groupMessages.value.forEach(pauseMessage);
@@ -217,16 +230,38 @@ function pauseAllMessages() {
 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() {
-  resumeAllMessages();
-  if (props.expand) {
+  clearTimeout(leaveTimeoutId);
+  if (isTransitioning) {
     return;
   }
-  groupExpand.value = false;
+  leaveTimeoutId = setTimeout(() => {
+    resumeAllMessages();
+    if (props.expand) {
+      return;
+    }
+    isTransitioning = true;
+    groupExpand.value = false;
+    setTimeout(() => {
+      isTransitioning = false;
+    }, TRANSITION_LOCK_MS);
+  }, LEAVE_DEBOUNCE_MS);
 }
 watch(
   () => props.expand,
@@ -239,15 +274,11 @@ onMounted(() => {
   if (isServer()) {
     return;
   }
-  cachedOn(window, CLEAR_MESSAGES_EVENT_NAME, onClearMessages);
-  cachedOn(window, CREATE_MESSAGE_EVENT_NAME, onCreateMessage);
-  cachedOn(window, REMOVE_MESSAGE_EVENT_NAME, onRemoveMessage);
+  cachedOn(window, UPDATE_MESSAGE_EVENT_NAME, onUpdateMessage);
 });
 onBeforeUnmount(() => {
   clearMessage();
-  cachedOff(window, CLEAR_MESSAGES_EVENT_NAME, onClearMessages);
-  cachedOff(window, CREATE_MESSAGE_EVENT_NAME, onCreateMessage);
-  cachedOff(window, REMOVE_MESSAGE_EVENT_NAME, onRemoveMessage);
+  cachedOff(window, UPDATE_MESSAGE_EVENT_NAME, onUpdateMessage);
 });
 defineExpose({
   messages: groupMessages,
@@ -273,7 +304,7 @@ defineExpose({
         appear
         tag="ol"
         name="pxd-transition-message"
-        class="pxd-message--group min-w-16 flex h-auto w-full"
+        class="pxd-message--group min-w-16 p-0 m-0 flex h-auto w-full"
         :class="{ 'gap-3': groupExpand }"
         @pointerenter="onPointerEnter"
         @pointerleave="onPointerLeave"
@@ -300,24 +331,15 @@ defineExpose({
     max-width: 100vw;
     align-items: center;
     flex-direction: column;
-
-    &:not(:empty)::after {
-      content: '';
-      position: absolute;
-      left: -10px;
-      z-index: 0;
-      width: calc(100% + 20px);
-      height: var(--message-placeholder-height);
-    }
   }
 
-  &[data-position^="top"] {
+  &[data-position^='top'] {
     --item-offset: 10px;
     --starting-offset: -100%;
     top: 1rem;
   }
 
-  &[data-position^="bottom"] {
+  &[data-position^='bottom'] {
     --item-offset: -10px;
     --starting-offset: 100%;
     bottom: 1rem;
@@ -327,15 +349,15 @@ defineExpose({
     }
   }
 
-  &[data-position="top"],
-  &[data-position="bottom"] {
+  &[data-position='top'],
+  &[data-position='bottom'] {
     left: 50%;
     justify-content: center;
     transform: translateX(-50%);
   }
 
-  &[data-position="top-start"],
-  &[data-position="bottom-start"] {
+  &[data-position='top-start'],
+  &[data-position='bottom-start'] {
     left: 1rem;
     justify-content: flex-start;
 
@@ -344,8 +366,8 @@ defineExpose({
     }
   }
 
-  &[data-position="top-end"],
-  &[data-position="bottom-end"] {
+  &[data-position='top-end'],
+  &[data-position='bottom-end'] {
     right: 1rem;
     justify-content: flex-end;
 
@@ -357,9 +379,19 @@ defineExpose({
   .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"] {
+  &[data-expand='true'] {
     .pxd-message--group {
       --message-placeholder-height: calc(var(--message-front-height) * (var(--message-items) + 1));
     }
@@ -371,20 +403,22 @@ defineExpose({
     }
   }
 
-  &[data-expand="false"] {
+  &[data-expand='false'] {
     .pxd-message--group {
       --message-placeholder-height: calc(var(--message-front-height) + var(--message-items) * 12px);
     }
 
     .pxd-message--item {
-      --message-item-transform: translateZ(0) translateY(calc(var(--item-offset) * var(--message-item-index))) scale(calc(-1 * var(--message-item-scale)));
+      --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"] {
+      &[data-front='false'] {
         height: var(--message-front-height);
 
         & > * {
-          transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
+          transition: opacity 0.1s ease-out;
           opacity: 0;
         }
       }
@@ -411,20 +445,20 @@ defineExpose({
 
   .pxd-message--icon {
     &.info {
-      color: var(--color-gray-600)
+      color: var(--color-gray-600);
     }
     &.error {
-      color: var(--color-red-700)
+      color: var(--color-red-700);
     }
     &.loading {
       animation: spin 1s linear infinite;
-      color: var(--color-blue-700)
+      color: var(--color-blue-700);
     }
     &.warning {
-      color: var(--color-amber-700)
+      color: var(--color-amber-700);
     }
     &.success {
-      color: var(--color-green-700)
+      color: var(--color-green-700);
     }
   }
 }

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

@@ -31,7 +31,7 @@ const computedStyle = computed(() => {
   return {
     "--message-item-index": index,
     "z-index": max - index,
-    "opacity": isVisible ? 1 : 0,
+    opacity: isVisible ? 1 : 0,
     "pointer-events": isVisible ? "auto" : "none"
   };
 });
@@ -67,7 +67,12 @@ onMounted(() => {
     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 }]"
   >
-    <Component :is="TYPE_ICONS[itemData.type]" v-if="itemData.type" class="pxd-message--icon mr-2 size-4 h-lh shrink-0" :class="itemData.type" />
+    <Component
+      :is="TYPE_ICONS[itemData.type]"
+      v-if="itemData.type"
+      class="pxd-message--icon mr-2 size-4 h-lh shrink-0"
+      :class="itemData.type"
+    />
 
     <span v-if="typeof itemData.message === 'string'" v-html="itemData.message" />
     <Component :is="itemData.message" v-else :key="itemData.id" />

package/dist/components/modal/index.vue

@@ -51,14 +51,17 @@ function onOverlayClick(ev) {
   }
   closeOverlayIfNeed();
 }
-watch(() => isVisible.value, (visible) => {
-  emits("visible-change", visible);
-  if (visible) {
-    emits("show");
-    return;
+watch(
+  () => isVisible.value,
+  (visible) => {
+    emits("visible-change", visible);
+    if (visible) {
+      emits("show");
+      return;
+    }
+    emits("hide");
   }
-  emits("hide");
-});
+);
 </script>
 
 <template>
@@ -76,17 +79,22 @@ watch(() => isVisible.value, (visible) => {
         aria-modal="true"
         role="dialog"
         tabindex="-1"
-        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)] 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 max-sm:bottom-0 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-[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="wrapperClass"
         :style="computedStyle"
         v-bind="$attrs"
       >
         <header
-          class="pxd-modal--header px-6 pt-4 sm:pt-6 relative shrink-0 empty:py-3"
-          :class="{ 'pb-4 sm:pb-6 border-b bg-background-200 dark:bg-background-100': headerStylize }"
+          class="pxd-modal--header px-6 pt-4 sm:pt-6 empty:py-3 relative shrink-0"
+          :class="{
+  'pb-4 sm:pb-6 border-b bg-background-200 dark:bg-background-100': headerStylize
+}"
         >
           <slot name="header">
-            <h3 v-if="$slots.title || title" class="text-lg sm:text-xl font-semibold tracking-tight m-0">
+            <h3
+              v-if="$slots.title || title"
+              class="text-lg sm:text-xl font-semibold tracking-tight m-0"
+            >
               <slot name="title">
                 {{ title }}
               </slot>
@@ -101,7 +109,7 @@ watch(() => isVisible.value, (visible) => {
         </header>
 
         <div
-          class="pxd-modal--content px-6 py-4 sm:py-6 h-full flex-1 overflow-auto empty:py-3"
+          class="pxd-modal--content px-6 py-4 sm:py-6 empty:py-3 h-full flex-1 overflow-auto"
           :class="contentClass"
         >
           <slot />

package/dist/components/more-button/index.d.vue.ts

@@ -1,5 +1,4 @@
-import type { ButtonProps } from '../../types/components/button';
-interface Props extends ButtonProps {
+interface Props {
     moreText?: string;
     lessText?: string;
     modelValue?: boolean;
@@ -11,7 +10,6 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
     onChange?: ((args_0: NonNullable<boolean | undefined>) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: NonNullable<boolean | undefined>) => any) | undefined;
 }>, {
-    shape: "square" | "rounded";
     modelValue: boolean;
     moreText: string;
     lessText: string;

package/dist/components/more-button/index.vue

@@ -1,10 +1,10 @@
 <script setup>
 import ChevronDownIcon from "@gdsicon/vue/chevron-down";
-import { computed } from "vue";
 import { useModelValue } from "../../composables/use-model-value";
 import PButton from "../button/index.vue";
 defineOptions({
   name: "PMoreButton",
+  inheritAttrs: false,
   model: {
     prop: "modelValue",
     event: "update:modelValue"
@@ -13,23 +13,10 @@ defineOptions({
 const props = defineProps({
   moreText: { type: String, required: false, default: "Show More" },
   lessText: { type: String, required: false, default: "Show Less" },
-  modelValue: { type: Boolean, required: false, default: false },
-  as: { type: null, required: false },
-  variant: { type: String, required: false },
-  size: { type: String, required: false },
-  shape: { type: String, required: false, default: "rounded" },
-  align: { type: String, required: false },
-  icon: { type: Boolean, required: false },
-  block: { type: Boolean, required: false },
-  loading: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false }
+  modelValue: { type: Boolean, required: false, default: false }
 });
 const emits = defineEmits(["change", "update:modelValue"]);
 const isExpanded = useModelValue(props, emits);
-const buttonProps = computed(() => {
-  const { moreText, lessText, modelValue, ...rest } = props;
-  return rest;
-});
 function onToggleExpand() {
   isExpanded.value = !isExpanded.value;
 }
@@ -37,11 +24,14 @@ function onToggleExpand() {
 
 <template>
   <div class="pxd-more-button px-4 mt-4 flex w-full items-center">
-    <PButton class="relative z-1" v-bind="buttonProps" @click="onToggleExpand">
+    <PButton class="relative z-1" shape="rounded" v-bind="$attrs" @click="onToggleExpand">
       {{ isExpanded ? lessText : moreText }}
 
       <template #suffix>
-        <ChevronDownIcon class="-ml-0.5 motion-safe:transition-transform motion-safe:duration-200" :class="{ 'rotate-180': isExpanded }" />
+        <ChevronDownIcon
+          class="-ml-0.5 motion-safe:transition-transform motion-safe:duration-200"
+          :class="{ 'rotate-180': isExpanded }"
+        />
       </template>
     </PButton>
   </div>

package/dist/components/note/cn.d.ts

@@ -0,0 +1,121 @@
+export declare const noteVariant: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        success: {
+            base: string;
+            fill: string;
+        };
+        error: {
+            base: string;
+            fill: string;
+        };
+        warning: {
+            base: string;
+            fill: string;
+        };
+        default: {
+            base: string;
+            fill: string;
+        };
+        primary: {
+            base: string;
+            fill: string;
+        };
+        violet: {
+            base: string;
+            fill: string;
+        };
+        cyan: {
+            base: string;
+            fill: string;
+        };
+    };
+    fill: {
+        true: {};
+        false: {};
+    };
+}, undefined, "pxd-note gap-2 sm:flex-row sm:items-center flex max-w-full flex-col rounded-md border", {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        success: {
+            base: string;
+            fill: string;
+        };
+        error: {
+            base: string;
+            fill: string;
+        };
+        warning: {
+            base: string;
+            fill: string;
+        };
+        default: {
+            base: string;
+            fill: string;
+        };
+        primary: {
+            base: string;
+            fill: string;
+        };
+        violet: {
+            base: string;
+            fill: string;
+        };
+        cyan: {
+            base: string;
+            fill: string;
+        };
+    };
+    fill: {
+        true: {};
+        false: {};
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    variant: {
+        success: {
+            base: string;
+            fill: string;
+        };
+        error: {
+            base: string;
+            fill: string;
+        };
+        warning: {
+            base: string;
+            fill: string;
+        };
+        default: {
+            base: string;
+            fill: string;
+        };
+        primary: {
+            base: string;
+            fill: string;
+        };
+        violet: {
+            base: string;
+            fill: string;
+        };
+        cyan: {
+            base: string;
+            fill: string;
+        };
+    };
+    fill: {
+        true: {};
+        false: {};
+    };
+}, undefined, "pxd-note gap-2 sm:flex-row sm:items-center flex max-w-full flex-col rounded-md border", unknown, unknown, undefined>>;

package/dist/components/note/cn.js

@@ -0,0 +1,66 @@
+import { tv } from "tailwind-variants";
+export const noteVariant = tv({
+  base: "pxd-note gap-2 sm:flex-row sm:items-center flex max-w-full flex-col rounded-md border",
+  variants: {
+    size: {
+      sm: "px-2 py-1.5 text-xs",
+      md: "px-3 py-2 text-sm",
+      lg: "px-4 py-2.5 text-base"
+    },
+    variant: {
+      success: {
+        base: "border-blue-500 text-blue-900",
+        fill: "border-blue-100 bg-blue-200 text-blue-900"
+      },
+      error: {
+        base: "border-red-500 text-red-900",
+        fill: "border-red-100 bg-red-200 text-red-900"
+      },
+      warning: {
+        base: "border-amber-500 text-amber-900",
+        fill: "border-amber-100 bg-amber-200 text-amber-900"
+      },
+      default: {
+        base: "border-input text-gray-900",
+        fill: "border-gray-100 bg-gray-200 text-gray-900"
+      },
+      primary: {
+        base: "border-gray-alpha-400 text-primary",
+        fill: "border-gray-100 bg-primary text-gray-100"
+      },
+      violet: {
+        base: "text-violet-900 border-violet-400",
+        fill: "text-violet-900 bg-violet-200 border-violet-100"
+      },
+      cyan: {
+        base: "border-teal-400 text-teal-900",
+        fill: "border-teal-100 bg-teal-200 text-teal-900"
+      }
+    },
+    fill: {
+      true: {},
+      false: {}
+    }
+  },
+  compoundVariants: [
+    { variant: "success", fill: true, class: "border-blue-100 bg-blue-200 text-blue-900" },
+    { variant: "success", fill: false, class: "border-blue-500 text-blue-900" },
+    { variant: "error", fill: true, class: "border-red-100 bg-red-200 text-red-900" },
+    { variant: "error", fill: false, class: "border-red-500 text-red-900" },
+    { 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: "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" },
+    { variant: "violet", fill: false, class: "text-violet-900 border-violet-400" },
+    { variant: "cyan", fill: true, class: "border-teal-100 bg-teal-200 text-teal-900" },
+    { variant: "cyan", fill: false, class: "border-teal-400 text-teal-900" }
+  ],
+  defaultVariants: {
+    size: "md",
+    variant: "default",
+    fill: false
+  }
+});

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

@@ -1,47 +1,11 @@
 import type { ComponentLabel, ComponentSize } from '../../types/shared';
+import { noteVariant } from './cn';
 interface Props {
-    variant?: keyof typeof VARIANTS;
+    variant?: keyof typeof noteVariant.variants.variant;
     size?: ComponentSize;
     fill?: boolean;
     label?: boolean | ComponentLabel;
 }
-declare const VARIANTS: {
-    success: {
-        icon: any;
-        fill: string;
-        basic: string;
-    };
-    error: {
-        icon: any;
-        fill: string;
-        basic: string;
-    };
-    warning: {
-        icon: any;
-        fill: string;
-        basic: string;
-    };
-    default: {
-        icon: any;
-        fill: string;
-        basic: string;
-    };
-    primary: {
-        icon: any;
-        fill: string;
-        basic: string;
-    };
-    violet: {
-        icon: any;
-        fill: string;
-        basic: string;
-    };
-    cyan: {
-        icon: any;
-        fill: string;
-        basic: string;
-    };
-};
 declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_1) => any;
@@ -52,7 +16,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     label: boolean | ComponentLabel;
-    variant: keyof typeof VARIANTS;
+    variant: keyof typeof noteVariant.variants.variant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;