pxd 0.0.39 → 0.0.41

package/dist/components/message/index.vue

@@ -7,10 +7,11 @@ import LoadingIcon from "@gdsicon/vue/loader-circle";
 import WarningFillIcon from "@gdsicon/vue/warning-fill";
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import {
+  CLEAR_MESSAGES_EVENT_NAME,
   CREATE_MESSAGE_EVENT_NAME,
   REMOVE_MESSAGE_EVENT_NAME
 } from "../../composables/use-message";
-import { optimizedOff, optimizedOn } from "../../utils/events";
+import { optimizedOff, optimizedOn } from "../../utils/event";
 import { isServer } from "../../utils/is";
 import PButton from "../button/index.vue";
 import PTeleport from "../teleport/index.vue";
@@ -30,7 +31,8 @@ const TYPE_ICONS = {
   error: ErrorFillIcon,
   loading: LoadingIcon
 };
-const ITEM_SELECTOR = ".pxd-message--item";
+const ITEM_CLASSES = "pxd-message--item";
+const ITEM_SELECTOR = `.${ITEM_CLASSES}`;
 const groupMessages = ref([]);
 const visibleMessages = computed(() => {
   const max = Math.max(props.max, 0);
@@ -152,6 +154,12 @@ function closeMessageByKey(key) {
   }
   groupMessages.value.splice(index, 1);
 }
+function clearMessage() {
+  groupMessages.value.forEach((m) => {
+    m._timerId && clearTimeout(m._timerId);
+  });
+  groupMessages.value = [];
+}
 function onCreateMessage({ detail: data }) {
   if (!data || data.group !== props.group) {
     return;
@@ -167,32 +175,34 @@ function onRemoveMessage({ detail: data }) {
   }
   closeMessageByKey(data.key);
 }
-function closeMessageByKeyAll() {
-  groupMessages.value.forEach((m) => {
-    m._timerId && clearTimeout(m._timerId);
-  });
-  groupMessages.value = [];
+function onClearMessages({ detail: data }) {
+  if (!data || data.group !== props.group) {
+    return;
+  }
+  clearMessage();
 }
 onMounted(() => {
   if (isServer) {
     return;
   }
+  optimizedOn(window, CLEAR_MESSAGES_EVENT_NAME, onClearMessages);
   optimizedOn(window, CREATE_MESSAGE_EVENT_NAME, onCreateMessage);
   optimizedOn(window, REMOVE_MESSAGE_EVENT_NAME, onRemoveMessage);
 });
 onBeforeUnmount(() => {
-  closeMessageByKeyAll();
+  clearMessage();
+  optimizedOff(window, CLEAR_MESSAGES_EVENT_NAME, onCreateMessage);
   optimizedOff(window, CREATE_MESSAGE_EVENT_NAME, onCreateMessage);
   optimizedOff(window, REMOVE_MESSAGE_EVENT_NAME, onRemoveMessage);
 });
 defineExpose({
   messages: groupMessages,
   visibleMessages,
-  getMessage: getMessageByKey,
-  pauseMessage: pauseMessageByKey,
-  resumeMessage: resumeMessageByKey,
-  closeMessage: closeMessageByKey,
-  closeMessageAll: closeMessageByKeyAll
+  get: getMessageByKey,
+  pause: pauseMessageByKey,
+  resume: resumeMessageByKey,
+  close: closeMessageByKey,
+  clear: clearMessage
 });
 </script>
 
@@ -218,7 +228,7 @@ defineExpose({
           aria-live="polite"
           :data-key="item.key"
           :data-type="item.type"
-          :class="[ITEM_SELECTOR, item.class, { 'pr-9 pointer-events-auto': item.closeable }]"
+          :class="[ITEM_CLASSES, item.class, { 'pr-9 pointer-events-auto': item.closeable }]"
           class="py-2 px-3 text-sm relative flex w-max max-w-full rounded-lg bg-background-100 break-all whitespace-pre-wrap shadow-border-modal"
         >
           <Component :is="TYPE_ICONS[item.type]" v-if="item.type" class="pxd-message--icon size-4 mr-2 mt-0.5 shrink-0" :class="item.type" />
@@ -247,6 +257,10 @@ defineExpose({
   max-width: min(500px, 100vw);
   max-height: min(800px, 50vh);
 
+  .pxd-transition--fade-scale-leave-active {
+    position: absolute;
+  }
+
   .pxd-message--item {
     --scale: .95;
   }
@@ -317,8 +331,4 @@ defineExpose({
     }
   }
 }
-
-.relative > .pxd-transition--fade-scale-leave-active {
-  position: absolute;
-}
 </style>

package/dist/components/modal/index.vue

@@ -2,9 +2,8 @@
 import { shallowRef, watch } from "vue";
 import { useFocusTrap } from "../../composables/use-focus-trap";
 import { useModelValue } from "../../composables/use-model-value";
-import { getCssUnitValue } from "../../utils/format";
+import { getCssUnitValue, isTruthyProp } from "../../utils/format";
 import POverlay from "../overlay/index.vue";
-import PScrollable from "../scrollable/index.vue";
 defineOptions({
   name: "PModal",
   model: {
@@ -21,17 +20,18 @@ const props = defineProps({
   appendToBody: { type: Boolean, required: false, default: true },
   headerStylize: { type: Boolean, required: false, default: false },
   footerStylize: { type: Boolean, required: false, default: true },
-  modalClass: { type: [String, Array, Object], required: false },
+  wrapperClass: { type: [String, Array, Object], required: false },
+  contentClass: { type: [String, Array, Object], required: false },
   closeOnPressEscape: { type: Boolean, required: false, default: false },
   closeOnClickOverlay: { type: Boolean, required: false, default: false }
 });
-const emits = defineEmits(["open", "close", "click-outside", "update:modelValue"]);
+const emits = defineEmits(["show", "hide", "visible-change", "outside-click", "update:modelValue"]);
 const modalRef = shallowRef();
 const isVisible = useModelValue(props, emits);
 useFocusTrap(modalRef);
 function onOverlayClick(ev) {
-  emits("click-outside", ev);
-  if (!props.closeOnClickOverlay || props.loading) {
+  emits("outside-click", ev);
+  if (!isTruthyProp(props.closeOnClickOverlay) || isTruthyProp(props.loading)) {
     return;
   }
   isVisible.value = false;
@@ -43,11 +43,12 @@ function onUpdateModelValue(visible) {
   isVisible.value = visible;
 }
 watch(() => isVisible.value, (visible) => {
+  emits("visible-change", visible);
   if (visible) {
-    emits("open");
+    emits("show");
     return;
   }
-  emits("close");
+  emits("hide");
 });
 </script>
 
@@ -66,35 +67,36 @@ watch(() => isVisible.value, (visible) => {
         role="dialog"
         tabindex="-1"
         aria-modal="true"
-        class="pxd-modal left-0 bottom-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-[calc(var(--w,540)*1px)] fixed z-10 flex h-max 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="modalClass"
+        class="pxd-modal left-0 bottom-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(--w,540px)] fixed z-10 flex h-max max-h-[min(800px,80vh)] 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="{ '--w': getCssUnitValue(width) }"
       >
         <header
           class="pxd-modal--header px-6 py-4 relative shrink-0 empty:py-3"
           :class="{ 'sm:pt-4 border-b bg-background-200 dark:bg-background-100': headerStylize }"
         >
-          <h3 v-if="$slots.title || title" class="text-lg sm:text-xl font-semibold tracking-tight m-0">
-            <slot name="title">
-              {{ title }}
-            </slot>
-          </h3>
+          <slot name="header">
+            <h3 v-if="$slots.title || title" class="text-lg sm:text-xl font-semibold tracking-tight m-0">
+              <slot name="title">
+                {{ title }}
+              </slot>
+            </h3>
 
-          <div v-if="$slots.subtitle || subtitle" class="mt-2 text-sm text-muted-foreground">
-            <slot name="subtitle">
-              {{ subtitle }}
-            </slot>
-          </div>
+            <div v-if="$slots.subtitle || subtitle" class="mt-2 text-sm text-muted-foreground">
+              <slot name="subtitle">
+                {{ subtitle }}
+              </slot>
+            </div>
+          </slot>
         </header>
 
-        <PScrollable
+        <div
           v-if="$slots.default"
-          :data-header="headerStylize"
-          class="pxd-modal--content group flex-1"
-          content-class="group-data-[header=true]:pt-5 px-6 pb-5"
+          class="pxd-modal--content group px-6 pb-5 h-full flex-1 overflow-auto"
+          :class="[{ 'pt-5': headerStylize }, contentClass]"
         >
           <slot />
-        </PScrollable>
+        </div>
 
         <footer
           v-if="$slots.footer"
@@ -111,19 +113,13 @@ watch(() => isVisible.value, (visible) => {
 <style>
 .pxd-transition--modal-enter-active,
 .pxd-transition--modal-leave-active {
-  transition-timing-function: var(--default-transition-timing-function);
-  transition:
-    transform var(--default-transition-duration),
-    opacity var(--default-transition-duration);
+  transition: var(--default-transition-duration) var(--default-transition-timing-function);
+  transition-property: transform, opacity;
 }
 
-.pxd-modal.pxd-transition--modal-enter-from,
-.pxd-modal.pxd-transition--modal-leave-to {
+.pxd-transition--modal-enter-from,
+.pxd-transition--modal-leave-to {
   opacity: var(--o, 1);
-  transform: var(--t, translate(0, 100%));
-}
-
-.pxd-modal {
-  max-height: min(800px, 80vh);
+  transform: var(--t, translate3d(0, 100%, 0));
 }
 </style>

package/dist/components/note/index.vue

@@ -85,7 +85,7 @@ const computedClass = computed(() => {
         <Component :is="computedLabel" class="font-medium shrink-0" />
       </slot>
 
-      <span class="flex-1">
+      <span class="flex-1 shrink-0">
         <slot />
       </span>
     </div>

package/dist/components/overlay/index.vue

@@ -1,11 +1,26 @@
 <script setup>
-import { computed, nextTick, onBeforeUnmount, shallowRef, watch } from "vue";
-import { getScrollContainer, getScrollElByContainer, hasScrollbar, isScrollable } from "../../utils/dom";
-import { optimizedOff, optimizedOn } from "../../utils/events";
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  ref,
+  shallowRef,
+  watch
+} from "vue";
+import {
+  getScrollContainer,
+  getScrollElByContainer,
+  hasScrollbar,
+  isScrollable
+} from "../../utils/dom";
+import { optimizedOff, optimizedOn } from "../../utils/event";
+import { isTruthyProp } from "../../utils/format";
 import { isServer } from "../../utils/is";
+import { unrefElement } from "../../utils/ref";
 import PTeleport from "../teleport/index.vue";
 defineOptions({
   name: "POverlay",
+  inheritAttrs: false,
   model: {
     prop: "modelValue",
     event: "update:modelValue"
@@ -16,25 +31,27 @@ const props = defineProps({
   zIndex: { type: Number, required: false },
   modelValue: { type: Boolean, required: false, default: false },
   appendToBody: { type: Boolean, required: false, default: true },
-  overlayClass: { type: [String, Array, Object], required: false },
   closeOnPressEscape: { type: Boolean, required: false, default: true },
-  closeOnClickOverlay: { type: Boolean, required: false }
+  closeOnClickOverlay: { type: Boolean, required: false },
+  shownElement: { type: null, required: false }
 });
 const emits = defineEmits(["click", "update:modelValue"]);
 let scrollContainer;
+const clipPath = ref("");
 const overlayRef = shallowRef();
 const computedStyle = computed(() => ({
-  "--z": props.zIndex
+  "--z": props.zIndex,
+  "clip-path": clipPath.value
 }));
 function onOverlayClick(ev) {
   emits("click", ev);
-  if (!props.closeOnClickOverlay) {
+  if (!isTruthyProp(props.closeOnClickOverlay)) {
     return;
   }
   emits("update:modelValue", false);
 }
 function onOverlayKeydown(ev) {
-  if (!props.closeOnPressEscape || !props.modelValue) {
+  if (!isTruthyProp(props.closeOnPressEscape) || !props.modelValue) {
     return;
   }
   if (ev.ctrlKey || ev.metaKey || ev.altKey || ev.shiftKey) {
@@ -62,27 +79,63 @@ function removeScrollDisabled() {
   if (!scrollContainer) {
     return;
   }
-  scrollContainer.classList.remove("scroll-disabled-x", "scroll-disabled-y", "scrollbar-stable");
+  scrollContainer.classList.remove(
+    "scroll-disabled-x",
+    "scroll-disabled-y",
+    "scrollbar-stable"
+  );
 }
-watch(() => props.modelValue, (visible) => {
-  if (isServer) {
+function tryGetShownElementIfNeed() {
+  const { shownElement } = props;
+  if (!shownElement) {
     return;
   }
-  if (!visible) {
-    removeScrollDisabled();
-    optimizedOff(document, "keydown", onOverlayKeydown);
+  const el = typeof shownElement === "string" ? document.querySelector(shownElement) : unrefElement(shownElement);
+  if (!el) {
     return;
   }
-  nextTick(() => {
-    if (!scrollContainer) {
-      scrollContainer = getScrollElByContainer(
-        getScrollContainer(overlayRef.value, true)
-      );
+  const rect = el.getBoundingClientRect();
+  clipPath.value = `polygon(
+    0% 0%,
+    0% 100%,
+    ${rect.left}px 100%,
+    ${rect.left}px ${rect.top}px,
+    ${rect.right}px ${rect.top}px,
+    ${rect.right}px ${rect.bottom}px,
+    ${rect.left}px ${rect.bottom}px,
+    ${rect.left}px 100%,
+    100% 100%,
+    100% 0%
+  )`;
+}
+watch(
+  () => props.shownElement,
+  tryGetShownElementIfNeed
+);
+watch(
+  () => props.modelValue,
+  (visible) => {
+    if (isServer) {
+      return;
+    }
+    if (!visible) {
+      removeScrollDisabled();
+      optimizedOff(document, "keydown", onOverlayKeydown);
+      return;
     }
-    addScrollDisabled();
-    optimizedOn(document, "keydown", onOverlayKeydown);
-  });
-}, { immediate: true });
+    nextTick(() => {
+      if (!scrollContainer) {
+        scrollContainer = getScrollElByContainer(
+          getScrollContainer(overlayRef.value, true)
+        );
+      }
+      addScrollDisabled();
+      tryGetShownElementIfNeed();
+      optimizedOn(document, "keydown", onOverlayKeydown);
+    });
+  },
+  { immediate: true }
+);
 onBeforeUnmount(() => {
   optimizedOff(document, "keydown", onOverlayKeydown);
   removeScrollDisabled();
@@ -98,8 +151,8 @@ onBeforeUnmount(() => {
         ref="overlayRef"
         :data-blur="blur"
         class="pxd-overlay inset-0 bg-black/40 sm:bg-background-100/80 fixed z-(--z,10) data-[blur=true]:backdrop-blur-xs motion-safe:transition-colors"
-        :class="overlayClass"
         :style="computedStyle"
+        v-bind="$attrs"
         @click="onOverlayClick"
       />
     </Transition>

package/dist/components/pagination/index.vue

@@ -14,7 +14,7 @@ const config = useConfigProvider();
 <template>
   <nav aria-label="pagination" class="pxd-pagination relative flex w-full flex-wrap items-start justify-between">
     <RouterLink v-if="prev" :to="prev.href" class="pxd-pagination--prev min-h-13 group py-1 pr-2 pl-6 rounded-md !no-underline self-focus-ring outline-none">
-      <span secondary class="text-[13px] text-foreground-secondary group-hover:text-foreground motion-safe:transition-colors">
+      <span secondary class="text-13px text-foreground-secondary group-hover:text-foreground motion-safe:transition-colors">
         {{ config.locale.compare.prev }}
       </span>
 
@@ -29,7 +29,7 @@ const config = useConfigProvider();
     </div>
 
     <RouterLink v-if="next" :to="next.href" class="pxd-pagination--next min-h-13 group py-1 pl-2 pr-6 rounded-md !no-underline self-focus-ring outline-none">
-      <span secondary class="text-[13px] text-foreground-secondary group-hover:text-foreground motion-safe:transition-colors">
+      <span secondary class="text-13px text-foreground-secondary group-hover:text-foreground motion-safe:transition-colors">
         {{ config.locale.compare.next }}
       </span>
 

package/dist/components/placeholder/index.vue

@@ -9,7 +9,8 @@ const props = defineProps({
   color: { type: String, required: false },
   width: { type: String, required: false },
   height: { type: String, required: false },
-  border: { type: Boolean, required: false }
+  border: { type: Boolean, required: false },
+  invert: { type: Boolean, required: false }
 });
 const computedStyle = computed(() => {
   return {
@@ -22,21 +23,27 @@ const computedStyle = computed(() => {
 
 <template>
   <div
-    class="pxd-placeholder relative max-w-full overflow-hidden rounded-lg border-dashed"
-    :class="{ border }"
+    class="pxd-placeholder relative max-w-full overflow-hidden rounded-lg"
+    :class="{ 'border': border, 'is-invert': invert }"
     :style="computedStyle"
     v-bind="$attrs"
   />
 </template>
 
-<style scoped>
+<style lang="postcss">
 .pxd-placeholder {
+  --deg: -45deg;
+
+  &.is-invert {
+    --deg: 45deg;
+  }
+
   width: 100%;
   height: 36px;
-  color: var(--color-gray-300);
+  color: var(--color-gray-400);
   background-image:
     repeating-linear-gradient(
-      -45deg,
+      var(--deg),
       currentColor 0,
       currentColor 1px,
       transparent 1px,