pxd 0.0.40 → 0.0.41

package/dist/components/popover/index.vue

@@ -7,7 +7,7 @@ import {
   getScrollElByContainer,
   getScrollPositions
 } from "../../utils/dom";
-import { off, on, optimizedOff, optimizedOn } from "../../utils/event";
+import { optimizedOff, optimizedOn } from "../../utils/event";
 import { toArray } from "../../utils/format";
 import { isServer } from "../../utils/is";
 import { throttleByRaf } from "../../utils/throttle";
@@ -18,7 +18,6 @@ defineOptions({
 const props = defineProps({
   zIndex: { type: Number, required: false, default: 5 },
   offset: { type: Number, required: false, default: 10 },
-  content: { type: String, required: false },
   visible: { type: Boolean, required: false },
   trigger: { type: [String, Array], required: false, default: () => ["hover"] },
   disabled: { type: Boolean, required: false },
@@ -38,14 +37,14 @@ const props = defineProps({
   triggerStyle: { type: [Object, String], required: false },
   contentStyle: { type: [Object, String], required: false },
   transitionName: { type: String, required: false },
-  showTransition: { type: Boolean, required: false, default: true },
-  hideTransition: { type: Boolean, required: false, default: true },
   minVisibleRatio: { type: Number, required: false, default: 0.88 },
   closeOnPressEscape: { type: Boolean, required: false, default: false },
   autoPositionThreshold: { type: Number, required: false, default: 30 },
-  scrollHiddenThreshold: { type: Number, required: false, default: 150 }
+  scrollHiddenThreshold: { type: Number, required: false, default: 150 },
+  disabledShowTransition: { type: Boolean, required: false },
+  disabledHideTransition: { type: Boolean, required: false }
 });
-const emits = defineEmits(["show", "hide", "visible-change", "trigger-click", "trigger-keydown"]);
+const emits = defineEmits(["show", "hide", "visible-change", "outside-click", "trigger-click", "trigger-keydown"]);
 const triggerRect = shallowRef();
 let viewportRect = null;
 let scrollContainer;
@@ -69,7 +68,7 @@ const {
 });
 const triggerMethods = computed(() => toArray(props.trigger));
 const computedTransitionName = computed(
-  () => props.transitionName ?? `pxd-transition--popover-${localPosition.value.split("-")[0]}`
+  () => props.transitionName ?? "pxd-transition--fade"
 );
 let savedScrollTop = 0;
 const onContainerScroll = throttleByRaf(async (ev) => {
@@ -149,36 +148,58 @@ async function handleDirectionInvertIfNeed() {
   }
 }
 async function handlePopoverShow(immediate = false) {
+  if (showPopoverTimer) {
+    return;
+  }
+  getTriggerRect();
   await new Promise((resolve) => {
-    getTriggerRect();
-    clearTimeout(hidePopoverTimer);
-    clearTimeout(showPopoverTimer);
+    if (hidePopoverTimer) {
+      clearTimeout(hidePopoverTimer);
+      hidePopoverTimer = null;
+    }
     showPopoverTimer = setTimeout(() => {
-      localPosition.value = props.position;
-      updateContentPosition();
-      openPopover();
-      resolve(true);
+      showPopoverTimer = null;
+      resolve();
     }, immediate ? 0 : props.showDelay);
   });
+  localPosition.value = props.position;
+  updateContentPosition();
+  await openPopover();
+  emits("show");
+  emits("visible-change", true);
   savedScrollTop = getScrollElByContainer(scrollContainer).scrollTop;
-  on(scrollContainer, "scroll", onContainerScroll, { passive: true });
+  optimizedOff(document, "click", onClickOutsideToHide);
+  optimizedOff(scrollContainer, "scroll", onContainerScroll, { passive: true });
+  optimizedOn(document, "click", onClickOutsideToHide);
+  optimizedOn(scrollContainer, "scroll", onContainerScroll, { passive: true });
   if (!props.autoPosition) {
     return;
   }
   handleDirectionInvertIfNeed();
 }
 async function handlePopoverHide(immediate = false) {
+  if (hidePopoverTimer) {
+    return;
+  }
+  if (!isRender.value) {
+    return;
+  }
   await new Promise((resolve) => {
-    clearTimeout(showPopoverTimer);
-    clearTimeout(hidePopoverTimer);
+    if (showPopoverTimer) {
+      clearTimeout(showPopoverTimer);
+      showPopoverTimer = null;
+    }
     hidePopoverTimer = setTimeout(() => {
-      closePopover();
-      resolve(true);
+      hidePopoverTimer = null;
+      resolve();
     }, immediate ? 0 : props.hideDelay);
   });
-  off(scrollContainer, "scroll", onContainerScroll);
-  off(document, "click", onClickOutsideToHide);
-  off(document, "contextmenu", onTriggerContextmenu);
+  optimizedOff(document, "click", onClickOutsideToHide);
+  optimizedOff(document, "contextmenu", onTriggerContextmenu);
+  optimizedOff(scrollContainer, "scroll", onContainerScroll);
+  await closePopover();
+  emits("hide");
+  emits("visible-change", false);
 }
 async function onTriggerClick(ev) {
   if (props.disabled) {
@@ -189,12 +210,11 @@ async function onTriggerClick(ev) {
     return;
   }
   if (isVisible.value) {
-    off(document, "click", onClickOutsideToHide);
+    optimizedOff(document, "click", onClickOutsideToHide);
     await handlePopoverHide();
     return;
   }
-  on(document, "click", onClickOutsideToHide);
-  await handlePopoverShow();
+  handlePopoverShow();
 }
 function onTriggerPointerEnter() {
   if (props.disabled) {
@@ -227,17 +247,23 @@ async function onTriggerContextmenu(ev) {
   ev.preventDefault();
   if (isVisible.value) {
     await handlePopoverHide();
-    off(document, "click", onClickOutsideToHide);
-    off(document, "contextmenu", onTriggerContextmenu);
+    optimizedOff(document, "click", onClickOutsideToHide);
+    optimizedOff(document, "contextmenu", onTriggerContextmenu);
     return;
   }
   await handlePopoverShow();
-  on(document, "click", onClickOutsideToHide);
-  on(document, "contextmenu", onTriggerContextmenu);
+  optimizedOff(document, "click", onClickOutsideToHide);
+  optimizedOff(document, "contextmenu", onTriggerContextmenu);
+  optimizedOn(document, "click", onClickOutsideToHide);
+  optimizedOn(document, "contextmenu", onTriggerContextmenu);
 }
 function onClickOutsideToHide(ev) {
+  if (!triggerMethods.value.includes("click") && !triggerMethods.value.includes("manual") && !triggerMethods.value.includes("contextmenu")) {
+    return;
+  }
   const target = ev.target;
   if (!triggerRef.value?.contains(target) && !wrapperRef.value?.contains(target)) {
+    emits("outside-click", ev);
     handlePopoverHide();
   }
 }
@@ -245,7 +271,7 @@ function onContentPointerEnter() {
   if (props.disabled) {
     return;
   }
-  if (!props.enterable) {
+  if (!props.enterable || !isVisible.value) {
     return;
   }
   handlePopoverShow();
@@ -254,7 +280,7 @@ function onContentPointerLeave() {
   if (props.disabled) {
     return;
   }
-  if (!triggerMethods.value.includes("hover")) {
+  if (props.enterable && !triggerMethods.value.includes("hover")) {
     return;
   }
   handlePopoverHide();
@@ -426,19 +452,11 @@ watch(
     }
   }
 );
-watch(() => isVisible.value, (visible) => {
-  emits("visible-change", visible);
-  if (visible) {
-    emits("show");
-  } else {
-    emits("hide");
-  }
-});
 watch(
   () => [triggerRef.value, triggerMethods.value],
   ([newDom, newMethods], [oldDom, oldMethods]) => {
-    updateTriggerEvents(oldMethods, oldDom, off);
-    updateTriggerEvents(newMethods, newDom, on);
+    updateTriggerEvents(oldMethods, oldDom, optimizedOff);
+    updateTriggerEvents(newMethods, newDom, optimizedOn);
   }
 );
 onMounted(() => {
@@ -450,12 +468,10 @@ onMounted(() => {
 });
 onBeforeUnmount(() => {
   viewportRect = null;
-  clearTimeout(showPopoverTimer);
-  clearTimeout(hidePopoverTimer);
-  off(document, "click", onClickOutsideToHide);
-  off(document, "contextmenu", onTriggerContextmenu);
-  off(scrollContainer, "scroll", onContainerScroll);
+  optimizedOff(document, "click", onClickOutsideToHide);
+  optimizedOff(document, "contextmenu", onTriggerContextmenu);
   optimizedOff(window, "resize", onResizeUpdatePosition);
+  optimizedOff(scrollContainer, "scroll", onContainerScroll);
 });
 defineExpose({
   show: handlePopoverShow,
@@ -464,21 +480,26 @@ defineExpose({
 </script>
 
 <template>
-  <div class="pxd-popover relative inline-flex w-max">
+  <div class="pxd-popover relative inline-flex max-w-full">
     <div
       ref="triggerRef"
-      class="pxd-popover--trigger active:select-none"
+      class="pxd-popover--trigger max-w-full active:select-none"
       :class="triggerClass"
       :style="triggerStyle"
       @contextmenu.prevent
-      @click="onTriggerClick"
       @keydown="onTriggerKeydown"
+      @click="onTriggerClick"
     >
       <slot />
     </div>
 
     <PTeleport>
-      <Transition mode="out-in" :name="computedTransitionName" appear :class="{ showTransition, hideTransition }">
+      <Transition
+        appear
+        mode="out-in"
+        :name="computedTransitionName"
+        :class="{ disabledShowTransition, disabledHideTransition }"
+      >
         <div
           v-if="isRender"
           v-show="isVisible"
@@ -487,15 +508,13 @@ defineExpose({
           :style="wrapperStyle"
           :data-enterable="enterable"
           :data-position="localPosition"
-          class="pxd-popover--container sm:max-w-(--popover-max-width) absolute isolate w-max max-w-full data-[enterable=false]:pointer-events-none"
+          class="pxd-popover--container sm:max-w-(--popover-max-width) absolute isolate max-w-full data-[enterable=false]:pointer-events-none"
           @pointerenter="onContentPointerEnter"
           @pointerleave="onContentPointerLeave"
         >
           <i v-if="showArrow" class="pxd-popover--arrow absolute z-1" />
           <div class="pxd-popover--content" :class="contentClass" :style="contentStyle">
-            <slot name="content">
-              {{ content }}
-            </slot>
+            <slot name="content" />
           </div>
         </div>
       </Transition>
@@ -591,25 +610,8 @@ defineExpose({
   }
 }
 
-.showTransition.pxd-transition--popover-top-enter-active,
-.hideTransition.pxd-transition--popover-top-leave-active,
-.showTransition.pxd-transition--popover-bottom-enter-active,
-.hideTransition.pxd-transition--popover-bottom-leave-active,
-.showTransition.pxd-transition--popover-left-enter-active,
-.hideTransition.pxd-transition--popover-left-leave-active,
-.showTransition.pxd-transition--popover-right-enter-active,
-.hideTransition.pxd-transition--popover-right-leave-active {
-  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
-}
-
-.showTransition.pxd-transition--popover-top-enter-from,
-.hideTransition.pxd-transition--popover-top-leave-to,
-.showTransition.pxd-transition--popover-bottom-enter-from,
-.hideTransition.pxd-transition--popover-bottom-leave-to,
-.showTransition.pxd-transition--popover-left-enter-from,
-.hideTransition.pxd-transition--popover-left-leave-to,
-.showTransition.pxd-transition--popover-right-enter-from,
-.hideTransition.pxd-transition--popover-right-leave-to {
-  opacity: 0;
+.disabledShowTransition.pxd-transition--fade-enter-active,
+.disabledHideTransition.pxd-transition--fade-leave-active {
+  --default-transition-duration: 0 !important
 }
 </style>

package/dist/components/progress/index.vue

@@ -48,7 +48,7 @@ const computedLabel = computed(() => {
   return false;
 });
 const computedClass = computed(() => {
-  const classes = ["pxd-progress-bar flex-1 overflow-hidden rounded-full bg-gray-200", getFallbackValue(props.size, SIZES, config.size)];
+  const classes = ["pxd-progress-bar flex-1 shrink-0 overflow-hidden rounded-full bg-gray-200", getFallbackValue(props.size, SIZES, config.size)];
   return classes.join(" ");
 });
 const computedColors = computed(() => {

package/dist/components/radio/index.vue

@@ -70,7 +70,7 @@ function onChangeValue() {
 
     <span aria-hidden="true" :class="computedInnerClasses" />
 
-    <span class="text-sm flex-1 empty:hidden">
+    <span class="text-sm flex-1 shrink-0 empty:hidden">
       <slot>
         {{ label }}
       </slot>

package/dist/components/scrollable/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
 import { useResizeObserver } from "../../composables/use-browser-observer";
-import { off, on, once } from "../../utils/event";
+import { once, optimizedOff, optimizedOn } from "../../utils/event";
 import { isServer } from "../../utils/is";
 import { throttleByRaf } from "../../utils/throttle";
 import PFader from "../fader/index.vue";
@@ -10,16 +10,16 @@ defineOptions({
 });
 const props = defineProps({
   fader: { type: Boolean, required: false, default: true },
-  faderSize: { type: Number, required: false, default: 16 },
+  faderSize: { type: Number, required: false },
   faderColor: { type: String, required: false },
   faderDirection: { type: String, required: false },
   scrollbar: { 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 },
-  scrollbarSize: { type: Number, required: false, default: 6 },
-  scrollbarColor: { type: String, required: false, default: "var(--color-gray-alpha-300)" },
-  scrollbarHoverColor: { type: String, required: false, default: "var(--color-gray-alpha-500)" },
+  scrollbarSize: { type: Number, required: false },
+  scrollbarColor: { type: String, required: false },
+  scrollbarHoverColor: { type: String, required: false },
   loading: { type: Boolean, required: false },
   endThreshold: { type: Number, required: false, default: 10 }
 });
@@ -43,7 +43,7 @@ const scrollInfo = ref({
 });
 const computedStyle = computed(() => {
   return {
-    "--scrollbar-size": `${props.scrollbarSize}px`,
+    "--scrollbar-size": props.scrollbarSize,
     "--scrollbar-color": props.scrollbarColor,
     "--scrollbar-hover-color": props.scrollbarHoverColor
   };
@@ -160,7 +160,7 @@ function startDragVertical(e) {
     startClientPos: e.clientY,
     startThumbPos: scrollInfo.value.verticalThumbTop
   };
-  on(document, "mousemove", onDragMove);
+  optimizedOn(document, "mousemove", onDragMove);
   once(document, "mouseup", onEndDrag);
 }
 function startDragHorizontal(e) {
@@ -175,7 +175,7 @@ function startDragHorizontal(e) {
     startClientPos: e.clientX,
     startThumbPos: scrollInfo.value.horizontalThumbLeft
   };
-  on(document, "mousemove", onDragMove);
+  optimizedOn(document, "mousemove", onDragMove);
   once(document, "mouseup", onEndDrag);
 }
 function onDragMove(e) {
@@ -210,7 +210,7 @@ function onEndDrag(ev) {
   ev.stopPropagation();
   dragState.isDragging = false;
   dragState.direction = null;
-  off(document, "mousemove", onDragMove);
+  optimizedOff(document, "mousemove", onDragMove);
   throttledUpdate.cancel();
   requestAnimationFrame(updateScrollbarMetrics);
 }
@@ -230,13 +230,13 @@ onMounted(async () => {
   if (!props.scrollbar && !props.fader) {
     return;
   }
-  on(window, "resize", updateScrollbarMetrics, { passive: true });
+  optimizedOn(window, "resize", updateScrollbarMetrics, { passive: true });
   requestAnimationFrame(updateScrollbarMetrics);
 });
 onBeforeUnmount(() => {
-  off(window, "resize", updateScrollbarMetrics);
-  off(document, "mousemove", onDragMove);
-  off(document, "mouseup", onEndDrag);
+  optimizedOff(window, "resize", updateScrollbarMetrics);
+  optimizedOff(document, "mousemove", onDragMove);
+  optimizedOff(document, "mouseup", onEndDrag);
   throttledUpdate.cancel();
 });
 defineExpose({
@@ -256,7 +256,7 @@ defineExpose({
       ref="contentRef"
       :class="contentClass"
       :style="contentStyle"
-      class="pxd-scrollable--content relative scrollbar-hidden max-h-full flex-1 overflow-scroll"
+      class="pxd-scrollable--content relative scrollbar-hidden max-h-full flex-1 shrink-0 overflow-scroll"
       @scroll.passive="onContainerScroll"
     >
       <slot />
@@ -272,28 +272,47 @@ defineExpose({
 
     <template v-if="scrollbar">
       <div
-        v-if="scrollInfo.isScrollableY"
+        v-if="scrollInfo.isScrollableX"
         aria-hidden="true"
-        class="pxd-scrollable--scrollbar-y top-0 right-0 bottom-0 absolute w-(--scrollbar-size) touch-none opacity-(--o) select-none active:opacity-100 motion-safe:transition-opacity"
+        class="pxd-scrollable--scrollbar-x left-0 right-0 bottom-0 absolute touch-none opacity-(--o) select-none active:opacity-100 motion-safe:transition-opacity"
       >
         <div
-          class="pxd-scrollable--thumb absolute w-(--scrollbar-size) rounded-full bg-(--scrollbar-color) hover:bg-(--scrollbar-hover-color) hover:will-change-transform active:bg-(--scrollbar-hover-color) active:opacity-100 motion-safe:transition-colors"
-          :style="verticalThumbStyle"
-          @mousedown="startDragVertical"
+          class="pxd-scrollable--thumb h-inherit rounded-full hover:will-change-transform active:opacity-100 motion-safe:transition-colors"
+          :style="horizontalThumbStyle"
+          @mousedown="startDragHorizontal"
         />
       </div>
 
       <div
-        v-if="scrollInfo.isScrollableX"
+        v-if="scrollInfo.isScrollableY"
         aria-hidden="true"
-        class="pxd-scrollable--scrollbar-x left-0 right-0 bottom-0 absolute h-(--scrollbar-size) touch-none opacity-(--o) select-none active:opacity-100 motion-safe:transition-opacity"
+        class="pxd-scrollable--scrollbar-y top-0 right-0 bottom-0 absolute touch-none opacity-(--o) select-none active:opacity-100 motion-safe:transition-opacity"
       >
         <div
-          class="pxd-scrollable--thumb absolute h-(--scrollbar-size) rounded-full bg-(--scrollbar-color) hover:bg-(--scrollbar-hover-color) hover:will-change-transform active:bg-(--scrollbar-hover-color) active:opacity-100 motion-safe:transition-colors"
-          :style="horizontalThumbStyle"
-          @mousedown="startDragHorizontal"
+          class="pxd-scrollable--thumb w-inherit rounded-full hover:will-change-transform active:opacity-100 motion-safe:transition-colors"
+          :style="verticalThumbStyle"
+          @mousedown="startDragVertical"
         />
       </div>
     </template>
   </div>
 </template>
+
+<style lang="postcss">
+.pxd-scrollable--scrollbar-x {
+  height: calc(var(--scrollbar-size, 6) * 1px);
+}
+
+.pxd-scrollable--scrollbar-y {
+  width: calc(var(--scrollbar-size, 6) * 1px);
+}
+
+.pxd-scrollable--thumb {
+  background-color: var(--scrollbar-color, var(--color-gray-alpha-300));
+
+  &:hover,
+  &:active {
+    background-color: var(--scrollbar-hover-color, var(--color-gray-alpha-500));
+  }
+}
+</style>

package/dist/components/slider/index.vue

@@ -2,7 +2,7 @@
 import { computed, onBeforeUnmount, shallowRef } from "vue";
 import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { useModelValue } from "../../composables/use-model-value";
-import { off, on, once } from "../../utils/event";
+import { once, optimizedOff, optimizedOn } from "../../utils/event";
 import { getFallbackValue } from "../../utils/get";
 defineOptions({
   name: "PSlider",
@@ -134,9 +134,9 @@ function startDragging(ev, thumb) {
   activeThumb.value = thumb;
   lastClientX = ev.clientX;
   updateValueFromPosition(ev.clientX);
-  on(document, "pointermove", handleMove, { passive: false });
   once(document, "pointerup", endDragging);
   once(document, "pointercancel", endDragging);
+  optimizedOn(document, "pointermove", handleMove, { passive: false });
 }
 function handleMove(ev) {
   if (!isDragging || props.disabled) {
@@ -154,8 +154,8 @@ function endDragging() {
     cancelAnimationFrame(animationFrameId);
     animationFrameId = null;
   }
-  off(document, "pointermove", handleMove);
-  off(document, "pointercancel", endDragging);
+  optimizedOff(document, "pointermove", handleMove);
+  optimizedOff(document, "pointercancel", endDragging);
 }
 function handleSliderClick(ev) {
   if (isDragging || !props.range || props.disabled) {
@@ -193,9 +193,9 @@ onBeforeUnmount(() => {
   if (animationFrameId) {
     cancelAnimationFrame(animationFrameId);
   }
-  off(document, "pointermove", handleMove);
-  off(document, "pointerup", endDragging);
-  off(document, "pointercancel", endDragging);
+  optimizedOff(document, "pointermove", handleMove);
+  optimizedOff(document, "pointerup", endDragging);
+  optimizedOff(document, "pointercancel", endDragging);
 });
 </script>
 

package/dist/components/switch/index.vue

@@ -38,7 +38,7 @@ const computedClass = computed(() => {
 <template>
   <label
     :aria-checked="isChecked"
-    class="pxd-switch flex-1 cursor-pointer"
+    class="pxd-switch flex-1 shrink-0 cursor-pointer"
     :for="uniqueId"
   >
     <input