pxd 0.0.39 → 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/events";
+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 },
@@ -33,18 +32,19 @@ const props = defineProps({
   autoPosition: { type: Boolean, required: false, default: true },
   scrollHidden: { type: Boolean, required: false, default: false },
   triggerClass: { type: [String, Array, Object], required: false },
-  popoverClass: { type: [String, Array, Object], required: false },
+  wrapperClass: { type: [String, Array, Object], required: false },
+  contentClass: { type: [String, Array, Object], required: false },
   triggerStyle: { type: [Object, String], required: false },
-  popoverStyle: { 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", "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;
@@ -68,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) => {
@@ -148,38 +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);
-      emits("show");
+      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);
-      emits("hide");
+      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) {
@@ -190,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) {
@@ -228,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();
   }
 }
@@ -246,7 +271,7 @@ function onContentPointerEnter() {
   if (props.disabled) {
     return;
   }
-  if (!props.enterable) {
+  if (!props.enterable || !isVisible.value) {
     return;
   }
   handlePopoverShow();
@@ -255,7 +280,7 @@ function onContentPointerLeave() {
   if (props.disabled) {
     return;
   }
-  if (!triggerMethods.value.includes("hover")) {
+  if (props.enterable && !triggerMethods.value.includes("hover")) {
     return;
   }
   handlePopoverHide();
@@ -333,10 +358,10 @@ function updateContentPosition() {
     top,
     zIndex,
     "transform": `translate3d(${translateX}, ${translateY}, 0)`,
-    "--c": arrowColor,
-    "--o": `${offset}px`,
-    "--mw": `${maxWidth}px`,
-    "--ao": `${offset - 5}px`
+    "--popover-bg": arrowColor,
+    "--popover-offset": `${offset}px`,
+    "--popover-max-width": `${maxWidth}px`,
+    "--popover-arrow-offset": `${offset - 5}px`
   };
 }
 function applyAutoPosition(overlapping) {
@@ -430,8 +455,8 @@ watch(
 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(() => {
@@ -443,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,
@@ -457,37 +480,41 @@ 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"
           ref="wrapperRef"
+          :class="wrapperClass"
           :style="wrapperStyle"
           :data-enterable="enterable"
           :data-position="localPosition"
-          class="pxd-popover--container sm:max-w-(--mw) 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="popoverClass" :style="popoverStyle">
-            <slot name="content">
-              {{ content }}
-            </slot>
+          <div class="pxd-popover--content" :class="contentClass" :style="contentStyle">
+            <slot name="content" />
           </div>
         </div>
       </Transition>
@@ -499,19 +526,19 @@ defineExpose({
 .pxd-popover--container {
 
   &[data-position^='top'] {
-    padding-bottom: var(--o);
+    padding-bottom: var(--popover-offset);
   }
 
   &[data-position^='bottom'] {
-    padding-top: var(--o);
+    padding-top: var(--popover-offset);
   }
 
   &[data-position^='left'] {
-    padding-right: var(--o);
+    padding-right: var(--popover-offset);
   }
 
   &[data-position^='right'] {
-    padding-left: var(--o);
+    padding-left: var(--popover-offset);
   }
 
   .pxd-popover--arrow {
@@ -521,33 +548,33 @@ defineExpose({
   &[data-position="top"] .pxd-popover--arrow,
   &[data-position="top-start"] .pxd-popover--arrow,
   &[data-position="top-end"] .pxd-popover--arrow {
-    bottom: var(--ao);
+    bottom: var(--popover-arrow-offset);
     border-width: 6px 6px 0;
-    border-color: var(--c) transparent transparent;
+    border-color: var(--popover-bg) transparent transparent;
   }
 
   &[data-position='bottom'] .pxd-popover--arrow,
   &[data-position='bottom-start'] .pxd-popover--arrow,
   &[data-position='bottom-end'] .pxd-popover--arrow {
-    top: var(--ao);
+    top: var(--popover-arrow-offset);
     border-width: 0 6px 6px;
-    border-color: transparent transparent var(--c);
+    border-color: transparent transparent var(--popover-bg);
   }
 
   &[data-position='left'] .pxd-popover--arrow,
   &[data-position='left-start'] .pxd-popover--arrow,
   &[data-position='left-end'] .pxd-popover--arrow {
-    right: var(--ao);
+    right: var(--popover-arrow-offset);
     border-width: 6px 0 6px 6px;
-    border-color: transparent transparent transparent var(--c);
+    border-color: transparent transparent transparent var(--popover-bg);
   }
 
   &[data-position='right'] .pxd-popover--arrow,
   &[data-position='right-start'] .pxd-popover--arrow,
   &[data-position='right-end'] .pxd-popover--arrow {
-    left: var(--ao);
+    left: var(--popover-arrow-offset);
     border-width: 6px 6px 6px 0;
-    border-color: transparent var(--c) transparent transparent;
+    border-color: transparent var(--popover-bg) transparent transparent;
   }
 
   &[data-position='top'] .pxd-popover--arrow,
@@ -583,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

@@ -51,8 +51,9 @@ function onChangeValue() {
   <label
     role="radio"
     :aria-checked="isChecked"
-    class="pxd-radio group/radio gap-2 inline-flex touch-manipulation items-center"
-    :class="{ 'is-disabled cursor-not-allowed text-gray-500': computedDisabled }"
+    :data-disabled="computedDisabled"
+    class="pxd-radio group/radio gap-2 inline-flex max-w-full cursor-pointer touch-manipulation items-center data-[disabled=true]:cursor-not-allowed"
+    :class="{ 'is-disabled text-gray-500': computedDisabled }"
     :for="uniqueId"
   >
     <input
@@ -69,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/radio-group/index.vue

@@ -25,7 +25,7 @@ provideRadioGroupContext(props);
 </script>
 
 <template>
-  <PStack class="pxd-radio-group w-max" role="radiogroup" aria-label="Radio Group" v-bind="$attrs">
+  <PStack class="pxd-radio-group" role="radiogroup" aria-label="Radio Group" v-bind="$attrs">
     <slot>
       <PRadio
         v-for="option in options"