pxd 0.0.61 → 0.0.62

package/dist/components/popover/index.vue

@@ -2,106 +2,104 @@
 import { arrow, autoUpdate, computePosition, flip, shift, hide } from "@floating-ui/dom";
 import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
 import { useDelayDestroy } from "../../composables/use-delay-destroy";
-import { useLockScroll } from "../../composables/use-lock-scroll";
+import { useFocusTrap } from "../../composables/use-focus-trap";
 import { useOutsideClick } from "../../composables/use-outside-click";
 import { useConfigProvider } from "../../contexts/config-provider";
-import { debounce } from "../../utils/debounce";
-import { cachedOff, cachedOn, sleep } from "../../utils/event";
 import { getCssUnitValue, toArray } from "../../utils/format";
-import PTeleport from "../teleport/index.vue";
+import PPopoverArrow from "../_internal/popover-arrow.vue";
+import POverlay from "../overlay/index.vue";
 defineOptions({
   name: "PPopover",
-  inheritAttrs: false
+  inheritAttrs: false,
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
 });
 const props = defineProps({
   zIndex: { type: [Number, String], required: false },
-  offset: { type: Number, required: false, default: 8 },
-  visible: { type: Boolean, required: false },
+  offset: { type: Number, required: false },
   trigger: { type: [String, Array], required: false, default: () => ["hover"] },
   disabled: { type: Boolean, required: false },
+  adaptive: { type: Boolean, required: false },
   maxWidth: { type: [Number, String], required: false },
   position: { type: null, required: false, default: "bottom" },
   showDelay: { type: Number, required: false, default: 0 },
   hideDelay: { type: Number, required: false, default: 0 },
   showArrow: { type: Boolean, required: false },
-  arrowColor: { type: String, required: false, default: "hsl(var(--primary))" },
+  arrowColor: { type: String, required: false },
+  modelValue: { type: Boolean, required: false },
   interactive: { type: Boolean, required: false, default: true },
   autoPosition: { type: Boolean, required: false, default: true },
   wrapperClass: { type: [String, Array, Object], required: false },
   contentClass: { type: [String, Array, Object], required: false },
   contentStyle: { type: [Object, String], required: false },
-  unsetPosition: { type: Boolean, required: false, default: false },
-  transitionType: { type: String, required: false, default: "fade-scale" },
   toggleOnTrigger: { type: Boolean, required: false, default: true },
   closeOnInvisible: { type: Boolean, required: false, default: true },
-  closeOnPressEscape: { type: Boolean, required: false },
+  closeOnPressEscape: { type: Boolean, required: false, default: true },
   lockScrollOnVisible: { type: Boolean, required: false }
 });
-const emits = defineEmits(["show", "hide", "escape", "outside-click", "trigger-click", "visible-change"]);
-let isLockedScroll = false;
+const emits = defineEmits(["show", "hide", "escape", "outside-click", "trigger-click", "visible-change", "update:modelValue"]);
 let showPopoverTimer;
 let hidePopoverTimer;
 let cleanupAutoUpdate = null;
-const allowedMethods = ["click", "manual", "contextmenu"];
-const arrayRef = shallowRef(null);
+const arrowRef = shallowRef(null);
 const triggerRef = shallowRef(null);
 const wrapperRef = shallowRef(null);
 const localPosition = shallowRef(props.position);
 const triggerMethods = computed(() => toArray(props.trigger));
+const transitionType = computed(() => props.adaptive ? "fade-slide" : "fade-scale");
 const wrapperStyle = computed(() => ({
-  "z-index": props.zIndex,
+  "--popover-index": props.zIndex,
   "--popover-offset": props.offset,
-  "--popover-arrow-bg": props.arrowColor,
+  "--popover-arrow-color": props.arrowColor,
   "--popover-max-width": getCssUnitValue(props.maxWidth)
 }));
 const configProvider = useConfigProvider();
-const { lockScroll, unlockScroll } = useLockScroll();
+const allowOutsideClick = computed(() => !triggerMethods.value.includes("manual"));
+const focusTrapContainer = computed(() => isVisible.value ? wrapperRef.value : null);
+const computePositionMiddleware = computed(() => {
+  return [
+    shift(),
+    props.autoPosition && flip(),
+    props.showArrow && arrow({ element: arrowRef.value }),
+    props.closeOnInvisible && hide({ strategy: "referenceHidden" }),
+    props.closeOnInvisible && hide({ strategy: "escaped" })
+  ];
+});
 const {
   render: isRender,
   visible: isVisible,
   show: showPopover,
   hide: hidePopover
-} = useDelayDestroy(props.visible, {
+} = useDelayDestroy(props.modelValue, {
   delay: 2e3,
   visibleChange(v) {
-    if (triggerMethods.value.includes("manual")) {
+    if (!allowOutsideClick.value) {
       return;
     }
     emits("visible-change", v);
     if (v) {
-      if (props.lockScrollOnVisible) {
-        isLockedScroll = true;
-        lockScroll();
-      }
       emits("show");
+      emits("update:modelValue", true);
     } else {
-      if (isLockedScroll) {
-        isLockedScroll = false;
-        unlockScroll();
-      }
       emits("hide");
+      emits("update:modelValue", false);
     }
   }
 });
+useFocusTrap(focusTrapContainer);
 useOutsideClick(wrapperRef, {
+  allowList: [triggerRef, wrapperRef],
   isEnabled: () => {
-    return isVisible.value && allowedMethods.some((t) => triggerMethods.value.includes(t));
+    return isVisible.value && allowOutsideClick.value;
   },
-  isOutside: (ev) => {
-    const el = ev.target;
-    return !(triggerRef.value?.contains(el) || wrapperRef.value?.contains(el));
-  },
-  onTrigger: debounce(
-    (ev) => {
-      emits("outside-click", ev);
-      if (triggerMethods.value.includes("manual")) {
-        return;
-      }
+  onTrigger: (ev) => {
+    emits("outside-click", ev);
+    if (allowOutsideClick.value) {
       handlePopoverHide();
-    },
-    500,
-    { edges: ["leading"] }
-  )
+    }
+  }
 });
 function disposeAutoUpdate() {
   if (cleanupAutoUpdate) {
@@ -115,13 +113,7 @@ async function updatePosition() {
     wrapperRef.value,
     {
       placement: props.position,
-      middleware: [
-        shift(),
-        props.autoPosition && flip(),
-        props.showArrow && arrow({ element: arrayRef.value }),
-        props.closeOnInvisible && hide({ strategy: "referenceHidden" }),
-        props.closeOnInvisible && hide({ strategy: "escaped" })
-      ]
+      middleware: computePositionMiddleware.value
     }
   );
   localPosition.value = placement;
@@ -129,13 +121,14 @@ async function updatePosition() {
     handlePopoverHide(true);
     return;
   }
-  Object.assign(wrapperRef.value.style, {
-    left: `${x}px`,
-    top: `${y}px`
-  });
+  const wrapperPositionStyle = {
+    left: props.adaptive ? "0" : `${x}px`,
+    top: props.adaptive ? "0" : `${y}px`
+  };
+  Object.assign(wrapperRef.value.style, wrapperPositionStyle);
   if (middlewareData.arrow) {
     const { x: arrowX, y: arrowY } = middlewareData.arrow;
-    Object.assign(arrayRef.value.style, {
+    Object.assign(arrowRef.value.style, {
       left: arrowX != null ? `${Math.max(arrowX, 5)}px` : "",
       top: arrowY != null ? `${Math.max(arrowY, 5)}px` : ""
     });
@@ -156,13 +149,6 @@ async function handlePopoverShow() {
     }, props.showDelay);
   });
   await showPopover();
-  if (props.closeOnPressEscape) {
-    cachedOn(document, "keydown", onPopoverKeystroke);
-  }
-  if (props.unsetPosition) {
-    Object.assign(wrapperRef.value.style, { left: "0", top: "0" });
-    return;
-  }
   disposeAutoUpdate();
   if (props.autoPosition) {
     cleanupAutoUpdate = autoUpdate(triggerRef.value, wrapperRef.value, updatePosition);
@@ -172,7 +158,11 @@ async function handlePopoverShow() {
 }
 async function handlePopoverHide(immediate = false) {
   if (hidePopoverTimer) {
-    return;
+    if (!immediate) {
+      return;
+    }
+    clearTimeout(hidePopoverTimer);
+    hidePopoverTimer = null;
   }
   await new Promise((resolve) => {
     if (showPopoverTimer) {
@@ -188,22 +178,9 @@ async function handlePopoverHide(immediate = false) {
     );
   });
   disposeAutoUpdate();
-  await hidePopover();
-  if (props.closeOnPressEscape) {
-    cachedOff(document, "keydown", onPopoverKeystroke);
-  }
-}
-function onPopoverKeystroke(ev) {
-  if (ev.ctrlKey || ev.metaKey || ev.altKey || ev.shiftKey) {
-    return;
-  }
-  if (ev.key !== "Escape") {
-    return;
-  }
-  emits("escape", ev);
-  handlePopoverHide(true);
+  hidePopover();
 }
-async function onTriggerClick(ev) {
+function onTriggerClick(ev) {
   if (props.disabled) {
     return;
   }
@@ -229,33 +206,27 @@ function onTriggerPointerLeave() {
   }
   handlePopoverHide();
 }
-function onTriggerFocusin() {
-  if (props.disabled || !triggerMethods.value.includes("focus")) {
-    return;
-  }
-  handlePopoverShow();
-}
-async function onTriggerFocusout() {
-  if (props.disabled || !triggerMethods.value.includes("focus")) {
+function onTriggerContextmenu() {
+  if (props.disabled || !triggerMethods.value.includes("contextmenu")) {
     return;
   }
-  await sleep(0);
-  if (wrapperRef.value.contains(document.activeElement)) {
+  if (isVisible.value) {
+    handlePopoverHide();
     return;
   }
-  handlePopoverHide();
+  handlePopoverShow();
 }
-async function onTriggerContextmenu() {
-  if (props.disabled || !triggerMethods.value.includes("contextmenu")) {
+const PREVENT_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "Home", "End"]);
+function onWrapperKeydown(ev) {
+  if (props.disabled || !isVisible.value) {
     return;
   }
-  if (isVisible.value) {
-    await handlePopoverHide();
-    return;
+  const { key } = ev;
+  if (PREVENT_KEYS.has(key)) {
+    ev.preventDefault();
   }
-  await handlePopoverShow();
 }
-function onContentPointerEnter() {
+function onWrapperPointerEnter() {
   if (props.disabled) {
     return;
   }
@@ -264,7 +235,7 @@ function onContentPointerEnter() {
   }
   handlePopoverShow();
 }
-function onContentPointerLeave() {
+function onWrapperPointerLeave() {
   if (props.disabled) {
     return;
   }
@@ -274,20 +245,16 @@ function onContentPointerLeave() {
   handlePopoverHide();
 }
 watch(
-  () => props.visible,
+  () => props.modelValue,
   (visible) => {
     if (visible) {
       handlePopoverShow();
     } else {
-      handlePopoverHide();
+      handlePopoverHide(true);
     }
   }
 );
 onBeforeUnmount(() => {
-  if (isLockedScroll) {
-    isLockedScroll = false;
-    unlockScroll();
-  }
   disposeAutoUpdate();
 });
 defineExpose({
@@ -304,39 +271,39 @@ defineExpose({
     :data-disabled="disabled"
     v-bind="$attrs"
     @click="onTriggerClick"
-    @focusin="onTriggerFocusin"
-    @focusout="onTriggerFocusout"
     @pointerenter="onTriggerPointerEnter"
     @pointerleave="onTriggerPointerLeave"
     @contextmenu.prevent="onTriggerContextmenu"
   >
     <slot />
 
-    <PTeleport>
+    <POverlay
+      :model-value="isVisible"
+      :show-overlay="adaptive"
+      :close-on-press-escape="closeOnPressEscape"
+      :lock-scroll-on-visible="adaptive"
+      @escape="handlePopoverHide()"
+    >
       <div
         v-if="isRender"
         ref="wrapperRef"
         tabindex="-1"
-        :class="wrapperClass"
-        :style="wrapperStyle"
         :data-visible="isVisible"
+        :data-adaptive="adaptive"
         :data-position="localPosition"
         :data-interactive="interactive"
-        :data-unset-position="unsetPosition"
-        class="pxd-popover--wrapper sm:max-w-(--popover-max-width) absolute isolate z-10 flex max-h-full max-w-full outline-none data-[interactive=false]:pointer-events-none data-[visible=false]:pointer-events-none motion-reduce:data-[visible=false]:hidden"
-        @pointerenter="onContentPointerEnter"
-        @pointerleave="onContentPointerLeave"
+        :class="wrapperClass"
+        :style="wrapperStyle"
+        class="pxd-popover--wrapper sm:max-w-(--popover-max-width) absolute -top-full -left-full isolate z-(--popover-index) flex max-h-full max-w-full outline-none data-[interactive=false]:pointer-events-none data-[visible=false]:pointer-events-none motion-reduce:data-[visible=false]:hidden"
+        @keydown="onWrapperKeydown"
+        @pointerenter="onWrapperPointerEnter"
+        @pointerleave="onWrapperPointerLeave"
       >
         <div
-          class="pxd-popover--container pointer-events-auto relative z-1 max-h-[80dvh] max-h-[80vh] w-inherit transform-gpu default-animation-duration default-animation-timing-function"
+          class="pxd-popover--container relative z-1 w-inherit default-transition-duration default-transition-timing-function"
           :data-transition-type="transitionType"
           :data-show-transition="configProvider.popoverShowTransition"
         >
-          <i
-            v-if="showArrow"
-            ref="arrayRef"
-            class="pxd-popover--arrow absolute z-1 rotate-45 border-5 border-(--popover-arrow-bg)"
-          />
           <div
             class="pxd-popover--content h-full max-h-inherit overflow-auto"
             :class="contentClass"
@@ -344,146 +311,121 @@ defineExpose({
           >
             <slot name="content" />
           </div>
+
+          <div
+            v-if="showArrow"
+            ref="arrowRef"
+            class="pxd-popover--arrow pointer-events-none absolute z-1"
+          >
+            <PPopoverArrow
+              fill="var(--popover-arrow-color,transparent)"
+              stroke="var(--popover-arrow-border,transparent)"
+              :position="localPosition"
+            />
+          </div>
         </div>
       </div>
-    </PTeleport>
+    </POverlay>
   </div>
 </template>
 
 <style lang="postcss">
-@keyframes popover-fade-show {
-  0% {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes popover-fade-hide {
-  0% {
-    opacity: 1;
-  }
+.pxd-popover--wrapper {
+  --popover-padding: calc(var(--popover-offset, 8) * 1px);
 
-  100% {
-    opacity: 0;
-    pointer-events: none;
+  .pxd-popover--content.border + .pxd-popover--arrow {
+    --popover-arrow-border: var(--color-gray-300);
   }
-}
 
-@keyframes popover-fade-scale-show {
-  0% {
-    transform: scale(0.95);
-    opacity: 0;
-    pointer-events: none;
-  }
+  &[data-position^='top'] {
+    &[data-adaptive='false'] {
+      padding-bottom: var(--popover-padding);
+    }
 
-  100% {
-    transform: scale(1);
-    opacity: 1;
+    .pxd-popover--arrow {
+      bottom: -6px;
+    }
   }
-}
 
-@keyframes popover-fade-scale-hide {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
+  &[data-position^='bottom'] {
+    &[data-adaptive='false'] {
+      padding-top: var(--popover-padding);
+    }
 
-  100% {
-    transform: scale(0.95);
-    opacity: 0;
-    pointer-events: none;
+    .pxd-popover--arrow {
+      top: -6px;
+    }
   }
-}
 
-@keyframes popover-fade-slide-show {
-  0% {
-    transform: translateY(100%);
-    opacity: 0;
-    pointer-events: none;
-  }
+  &[data-position^='left'] {
+    &[data-adaptive='false'] {
+      padding-right: var(--popover-padding);
+    }
 
-  100% {
-    transform: translateY(0);
-    opacity: 1;
+    .pxd-popover--arrow {
+      right: -6px;
+    }
   }
-}
 
-@keyframes popover-fade-slide-hide {
-  0% {
-    transform: translateY(0);
-    opacity: 1;
-  }
+  &[data-position^='right'] {
+    &[data-adaptive='false'] {
+      padding-left: var(--popover-padding);
+    }
 
-  100% {
-    transform: translateY(100%);
-    opacity: 0;
-    pointer-events: none;
+    .pxd-popover--arrow {
+      left: -6px;
+    }
   }
 }
 
 .pxd-popover--container {
-  --popover-padding: calc(var(--popover-offset, 8) * 1px);
-  animation-name: popover-fade-show;
-  animation-fill-mode: forwards;
+  transition-property: opacity, transform;
+  max-height: min(800px, 80vh);
+  max-height: min(800px, 80dvh);
+  pointer-events: none;
 
-  &:hover {
-    will-change: transform, animation;
+  [data-visible='true'] & {
+    opacity: 1;
+    pointer-events: auto;
   }
 
   [data-visible='true'] &[data-show-transition='false'] {
-    animation-name: none !important;
-  }
-
-  [data-visible='true'] &[data-transition-type='fade'] {
-    animation-name: popover-fade-show;
-  }
-
-  [data-visible='false'] &[data-transition-type='fade'] {
-    animation-name: popover-fade-hide;
-  }
-
-  [data-visible='true'] &[data-transition-type='fade-scale'] {
-    animation-name: popover-fade-scale-show;
+    transition-duration: 0s !important;
   }
 
   [data-visible='false'] &[data-transition-type='fade-scale'] {
-    animation-name: popover-fade-scale-hide;
-  }
-
-  [data-visible='true'] &[data-transition-type='fade-slide'] {
-    animation-name: popover-fade-slide-show;
+    opacity: 0;
+    transform: scale(var(--popover-scale));
+    transition-duration: var(--faster-transition-duration);
   }
 
   [data-visible='false'] &[data-transition-type='fade-slide'] {
-    animation-name: popover-fade-slide-hide;
+    transform: translateY(100%);
+    transition-duration: var(--faster-transition-duration);
   }
 
   [data-position='top'] & {
-    transform-origin: 50% 100%;
+    transform-origin: center bottom;
   }
 
   [data-position='top-start'] & {
-    transform-origin: 0% 100%;
+    transform-origin: left bottom;
   }
 
   [data-position='top-end'] & {
-    transform-origin: 100% 100%;
+    transform-origin: right bottom;
   }
 
   [data-position='bottom'] & {
-    transform-origin: top center;
+    transform-origin: center top;
   }
 
   [data-position='bottom-start'] & {
-    transform-origin: top left;
+    transform-origin: left top;
   }
 
   [data-position='bottom-end'] & {
-    transform-origin: top right;
+    transform-origin: right top;
   }
 
   [data-position='left'] & {
@@ -509,37 +451,5 @@ defineExpose({
   [data-position='right-end'] & {
     transform-origin: left bottom;
   }
-
-  [data-position^='top'][data-unset-position='false'] & {
-    padding-bottom: var(--popover-padding);
-  }
-
-  [data-position^='bottom'][data-unset-position='false'] & {
-    padding-top: var(--popover-padding);
-  }
-
-  [data-position^='left'][data-unset-position='false'] & {
-    padding-right: var(--popover-padding);
-  }
-
-  [data-position^='right'][data-unset-position='false'] & {
-    padding-left: var(--popover-padding);
-  }
-}
-
-.pxd-popover--wrapper[data-position^='top'] .pxd-popover--arrow {
-  bottom: 4px;
-}
-
-.pxd-popover--wrapper[data-position^='bottom'] .pxd-popover--arrow {
-  top: 4px;
-}
-
-.pxd-popover--wrapper[data-position^='left'] .pxd-popover--arrow {
-  right: 4px;
-}
-
-.pxd-popover--wrapper[data-position^='right'] .pxd-popover--arrow {
-  left: 4px;
 }
 </style>

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

@@ -1,27 +1,26 @@
 import type { ComponentClass, ComponentPosition } from '../../types/shared'
 import type { CSSProperties } from 'vue'
 
-export type PopoverTrigger = 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual'
+export type PopoverTrigger = 'click' | 'hover' | 'contextmenu' | 'manual'
 
 export interface PopoverProps {
   zIndex?: number | string
   offset?: number
-  visible?: boolean
   trigger?: PopoverTrigger | PopoverTrigger[]
   disabled?: boolean
+  adaptive?: boolean
   maxWidth?: number | string
   position?: ComponentPosition
   showDelay?: number
   hideDelay?: number
   showArrow?: boolean
   arrowColor?: string
+  modelValue?: boolean
   interactive?: boolean
   autoPosition?: boolean
   wrapperClass?: ComponentClass
   contentClass?: ComponentClass
   contentStyle?: CSSProperties | string
-  unsetPosition?: boolean
-  transitionType?: 'fade' | 'fade-scale' | 'fade-slide'
   toggleOnTrigger?: boolean
   closeOnInvisible?: boolean
   closeOnPressEscape?: boolean
@@ -32,7 +31,8 @@ export interface PopoverEmits {
   show: []
   hide: []
   escape: [KeyboardEvent]
-  'outside-click': [MouseEvent]
+  'outside-click': [PointerEvent]
   'trigger-click': [PointerEvent]
   'visible-change': [visible: boolean]
+  'update:modelValue': [visible: boolean]
 }

package/dist/components/progress/index.vue

@@ -87,7 +87,7 @@ const computedProgressBarStyles = computed(() => {
   >
     <div :class="computedClasses">
       <div
-        class="h-full rounded-inherit motion-safe:transition-all"
+        class="h-full rounded-inherit motion-safe:transition-appearance"
         :style="computedProgressBarStyles"
       />
     </div>

package/dist/components/radio/index.vue

@@ -20,7 +20,7 @@ const props = defineProps({
 });
 const emits = defineEmits(["change", "update:modelValue"]);
 const radioVariant = tv({
-  base: "pxd-radio--inner size-4 after:content-empty after:size-2 inline-flex items-center justify-center rounded-full border peer-focus-ring after:scale-40 after:rounded-full after:bg-primary after:opacity-0 peer-checked:after:scale-100 peer-checked:after:opacity-100 motion-safe:transition-colors motion-safe:after:transition-all",
+  base: "pxd-radio--inner size-4 after:content-empty after:size-2 inline-flex items-center justify-center rounded-full border peer-focus-ring after:scale-40 after:rounded-full after:bg-primary after:opacity-0 peer-checked:after:scale-100 peer-checked:after:opacity-100 motion-safe:transition-colors motion-safe:after:transition-appearance",
   variants: {
     checked: {
       true: {
@@ -105,7 +105,7 @@ function onInputChange() {
 
     <span aria-hidden="true" :class="computedClasses" />
 
-    <span class="text-sm flex-1 shrink-0 empty:hidden">
+    <span class="text-sm flex-1 shrink-0 leading-none empty:hidden">
       <slot>
         {{ label }}
       </slot>