pxd 0.0.61 → 0.0.63

package/dist/components/overlay/index.vue

@@ -1,12 +1,11 @@
 <script setup>
 import { computed, nextTick, onBeforeUnmount, shallowRef, watch } from "vue";
-import { useLockScroll } from "../../composables";
-import { cachedOff, cachedOn, NOOP } from "../../utils/event";
-import { isTruthyProp } from "../../utils/format";
+import { useLockScroll } from "../../composables/use-lock-scroll";
+import { useOverlayManager } from "../../composables/use-overlay-manager";
+import { NOOP } from "../../utils/event";
 import { isServer } from "../../utils/is";
 import { unrefElement } from "../../utils/ref";
 import PTeleport from "../teleport/index.vue";
-import { isTopOverlay, pushOverlay, removeOverlay } from "./overlay-stack";
 defineOptions({
   name: "POverlay",
   inheritAttrs: false,
@@ -16,57 +15,38 @@ defineOptions({
   }
 });
 const props = defineProps({
-  blurred: { type: Boolean, required: false },
   zIndex: { type: Number, required: false },
+  variant: { type: String, required: false },
   modelValue: { type: Boolean, required: false, default: false },
-  transparent: { type: Boolean, required: false },
+  showOverlay: { type: Boolean, required: false, default: true },
   appendToBody: { type: Boolean, required: false, default: true },
+  shownElement: { type: [String, Object], required: false },
   closeOnPressEscape: { type: Boolean, required: false, default: true },
-  closeOnClickOverlay: { type: Boolean, required: false },
-  shownElement: { type: [String, Object], required: false }
+  closeOnClickOverlay: { type: Boolean, required: false, default: false },
+  lockScrollOnVisible: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["click", "escape", "update:modelValue"]);
-const { lockScroll, unlockScroll } = useLockScroll();
-const overlayId = Symbol("pxd-overlay");
 const clipPath = shallowRef("");
 const computedStyle = computed(() => ({
-  "--overlay-z-index": props.zIndex,
+  "--overlay-index": props.zIndex,
   "clip-path": clipPath.value
 }));
-let shownElementEl = null;
-function onOverlayClick(ev) {
-  emits("click", ev);
-  if (!isTruthyProp(props.closeOnClickOverlay)) {
-    return;
-  }
-  emits("update:modelValue", false);
-}
-function onOverlayKeydown(ev) {
-  if (!props.modelValue || !isTruthyProp(props.closeOnPressEscape)) {
-    return;
-  }
-  if (!isTopOverlay(overlayId)) {
-    return;
-  }
-  if (ev.ctrlKey || ev.metaKey || ev.altKey || ev.shiftKey) {
-    return;
-  }
-  if (ev.key !== "Escape") {
-    return;
-  }
-  emits("escape", ev);
-  emits("update:modelValue", false);
-}
-function tryGetShownElementIfNeed() {
-  const { shownElement } = props;
-  if (!shownElement) {
-    return;
-  }
-  const el = typeof shownElement === "string" ? document.querySelector(shownElement) : unrefElement(shownElement);
-  if (!el) {
-    return;
+let cacheShownElement = null;
+const { lockScroll, unlockScroll } = useLockScroll();
+const { registerOverlay, unregisterOverlay } = useOverlayManager({
+  enabled: () => props.modelValue,
+  lockScrollOnVisible: () => props.lockScrollOnVisible,
+  lockScroll,
+  unlockScroll,
+  onPressEscape: (ev) => {
+    emits("escape", ev);
+    if (!props.closeOnPressEscape) {
+      return;
+    }
+    emits("update:modelValue", false);
   }
-  shownElementEl = el;
+});
+function getShownElementClipPath(el) {
   const { top, left, right, bottom } = el.getBoundingClientRect();
   clipPath.value = `polygon(
     0% 0%,
@@ -81,31 +61,49 @@ function tryGetShownElementIfNeed() {
     100% 0%
   )`;
 }
+async function getShownElementIfNeed() {
+  const { shownElement, modelValue } = props;
+  if (!modelValue || !shownElement) {
+    toggleShownElementClasses();
+    clipPath.value = "";
+    return;
+  }
+  await nextTick();
+  const el = typeof shownElement === "string" ? document.querySelector(shownElement) : unrefElement(shownElement);
+  if (!el) {
+    return;
+  }
+  cacheShownElement = el;
+  getShownElementClipPath(el);
+  toggleShownElementClasses(true);
+}
+function toggleShownElementClasses(force = false) {
+  cacheShownElement?.classList.toggle("pointer-events-auto!", force);
+}
 function onOverlayVisibleChange(visible) {
   if (isServer()) {
     return;
   }
   if (visible) {
-    pushOverlay(overlayId);
-    nextTick(() => {
-      lockScroll();
-      tryGetShownElementIfNeed();
-      cachedOn(document, "keydown", onOverlayKeydown);
-      shownElementEl?.classList.add("pointer-events-auto");
-    });
+    registerOverlay();
+    getShownElementIfNeed();
+    return;
+  }
+  unregisterOverlay();
+  toggleShownElementClasses();
+}
+function onOverlayClick(ev) {
+  emits("click", ev);
+  if (!props.closeOnClickOverlay) {
     return;
   }
-  unlockScroll();
-  removeOverlay(overlayId);
-  cachedOff(document, "keydown", onOverlayKeydown);
-  shownElementEl?.classList.remove("pointer-events-auto");
+  emits("update:modelValue", false);
 }
 watch(() => props.modelValue, onOverlayVisibleChange, { immediate: true });
-watch(() => props.shownElement, tryGetShownElementIfNeed);
+watch(() => props.shownElement, getShownElementIfNeed);
 onBeforeUnmount(() => {
-  cachedOff(document, "keydown", onOverlayKeydown);
-  removeOverlay(overlayId);
-  unlockScroll();
+  toggleShownElementClasses();
+  cacheShownElement = null;
 });
 </script>
 
@@ -113,21 +111,18 @@ onBeforeUnmount(() => {
   <PTeleport :disabled="!appendToBody">
     <Transition name="pxd-transition--fade" mode="out-in" appear>
       <div
-        v-if="modelValue"
-        :data-blurred="blurred"
-        :data-transparent="transparent"
-        class="pxd-overlay inset-0 bg-black/40 sm:bg-background-100/80 pointer-events-auto fixed motion-safe:transition-colors"
+        v-if="showOverlay && modelValue"
+        role="presentation"
+        aria-hidden="true"
+        :data-variant="variant"
+        class="pxd-overlay inset-0 bg-black/60 sm:bg-background-100/80 data-[variant='blurred']:backdrop-blur-sm pointer-events-auto fixed z-(--overlay-index) select-none data-[variant='transparent']:opacity-0 motion-safe:transition-colors"
         :style="computedStyle"
         v-bind="$attrs"
-        @touchmove.prevent.stop="NOOP"
         @click="onOverlayClick"
+        @touchmove.prevent.stop="NOOP"
       />
     </Transition>
 
     <slot />
   </PTeleport>
 </template>
-
-<style>
-.pxd-overlay{z-index:var(--overlay-z-index,10)}.pxd-overlay[data-blurred=true]{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.pxd-overlay[data-transparent=true]{opacity:0}
-</style>

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

@@ -1,16 +1,17 @@
 export interface OverlayProps {
-  blurred?: boolean
   zIndex?: number
+  variant?: 'default' | 'blurred' | 'transparent'
   modelValue?: boolean
-  transparent?: boolean
+  showOverlay?: boolean
   appendToBody?: boolean
+  shownElement?: string | object
   closeOnPressEscape?: boolean
   closeOnClickOverlay?: boolean
-  shownElement?: string | object
+  lockScrollOnVisible?: boolean
 }
 
 export interface OverlayEmits {
-  click: [MouseEvent]
+  click: [PointerEvent]
   escape: [KeyboardEvent]
   'update:modelValue': [boolean]
 }

package/dist/components/pagination/index.vue

@@ -25,7 +25,7 @@ const configProvider = useConfigProvider();
     >
       <span
         secondary
-        class="text-13px text-foreground-secondary group-hover:text-foreground motion-safe:transition-colors"
+        class="text-13 text-foreground-secondary group-hover:text-foreground motion-safe:transition-colors"
       >
         {{ configProvider.locale.compare.prev }}
       </span>
@@ -47,7 +47,7 @@ const configProvider = useConfigProvider();
     >
       <span
         secondary
-        class="text-13px text-foreground-secondary group-hover:text-foreground motion-safe:transition-colors"
+        class="text-13 text-foreground-secondary group-hover:text-foreground motion-safe:transition-colors"
       >
         {{ configProvider.locale.compare.next }}
       </span>

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

@@ -11,10 +11,10 @@ declare const __VLS_export: import("vue").DefineComponent<PinInputProps, {
     onChange?: ((args_0: string) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
 }>, {
+    modelValue: string;
     length: number;
     type: "numeric" | "alphabetic" | "alphanumeric" | "numeric-password" | "alphabetic-password" | "alphanumeric-password";
     placeholder: string;
-    modelValue: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -2,6 +2,7 @@
 import { tv } from "tailwind-variants";
 import { computed, shallowRef, watch } from "vue";
 import { useModelValue } from "../../composables/use-model-value";
+import { BASIC_HEIGHTS } from "../../constants/size";
 import { useConfigProvider } from "../../contexts/config-provider";
 import { isTruthyProp } from "../../utils/format";
 defineOptions({
@@ -24,13 +25,13 @@ const props = defineProps({
 });
 const emits = defineEmits(["change", "update:modelValue"]);
 const pinInputVariant = tv({
-  base: "pxd-input--border rounded-md motion-safe:transition-all",
+  base: "pxd-input--border rounded-md motion-safe:transition-appearance",
   variants: {
     size: {
-      xs: "w-6 text-xs",
-      sm: "w-7.5 text-sm",
-      md: "w-9 text-sm",
-      lg: "w-10 text-base"
+      xs: `${BASIC_HEIGHTS.xs} text-xs`,
+      sm: `${BASIC_HEIGHTS.sm} text-sm`,
+      md: `${BASIC_HEIGHTS.md} text-sm`,
+      lg: `${BASIC_HEIGHTS.lg} text-base`
     },
     error: {
       true: "is-error",
@@ -234,7 +235,7 @@ defineExpose({
         :aria-label="`pin code ${n} of ${length}`"
         :type="computedInputType"
         :data-index="i"
-        class="aspect-square size-full appearance-none rounded-inherit border-none bg-transparent text-center font-inherit outline-none placeholder:text-gray-600 placeholder:select-none focus:placeholder:opacity-0 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 disabled:placeholder:text-gray-400 motion-safe:transition-all"
+        class="aspect-square size-full appearance-none rounded-inherit border-none bg-transparent text-center font-inherit outline-none placeholder:text-gray-600 placeholder:select-none focus:placeholder:opacity-0 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 disabled:placeholder:text-gray-400 motion-safe:transition-appearance"
         name="pin-input"
         minlength="1"
         maxlength="1"

package/dist/components/placeholder/index.vue

@@ -49,6 +49,6 @@ const computedStyle = computed(() => {
   );
   background-clip: padding-box;
   background-position: 0 0;
-  background-size: var(--placeholder-gap, 12px) var(--placeholder-gap, 12px);
+  background-size: var(--placeholder-gap) var(--placeholder-gap);
 }
 </style>

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

@@ -1,40 +1,39 @@
 import type { PopoverProps, PopoverTrigger } from './types';
 declare function handlePopoverShow(): Promise<void>;
 declare function handlePopoverHide(immediate?: boolean): Promise<void>;
-declare var __VLS_1: {}, __VLS_9: {};
+declare var __VLS_1: {}, __VLS_11: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    content?: (props: typeof __VLS_9) => any;
+    content?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<PopoverProps, {
     show: typeof handlePopoverShow;
     hide: typeof handlePopoverHide;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (visible: boolean) => any;
     escape: (args_0: KeyboardEvent) => any;
     show: () => any;
     hide: () => any;
+    "outside-click": (args_0: PointerEvent) => any;
     "visible-change": (visible: boolean) => any;
-    "outside-click": (args_0: MouseEvent) => any;
     "trigger-click": (args_0: PointerEvent) => any;
 }, string, import("vue").PublicProps, Readonly<PopoverProps> & Readonly<{
+    "onUpdate:modelValue"?: ((visible: boolean) => any) | undefined;
     onEscape?: ((args_0: KeyboardEvent) => any) | undefined;
     onShow?: (() => any) | undefined;
     onHide?: (() => any) | undefined;
+    "onOutside-click"?: ((args_0: PointerEvent) => any) | undefined;
     "onVisible-change"?: ((visible: boolean) => any) | undefined;
-    "onOutside-click"?: ((args_0: MouseEvent) => any) | undefined;
     "onTrigger-click"?: ((args_0: PointerEvent) => any) | undefined;
 }>, {
     position: import("../../types/shared").ComponentPosition;
-    offset: number;
+    closeOnPressEscape: boolean;
     trigger: PopoverTrigger | PopoverTrigger[];
     showDelay: number;
     hideDelay: number;
-    arrowColor: string;
     interactive: boolean;
     autoPosition: boolean;
-    unsetPosition: boolean;
-    transitionType: "fade" | "fade-scale" | "fade-slide";
     toggleOnTrigger: boolean;
     closeOnInvisible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;