pxd 0.0.26 → 0.0.28

package/dist/components/popover/index.vue

@@ -1,16 +1,17 @@
 <script setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
 import { useDelayDestroy } from "../../composables/useDelayDestroy";
+import { PRESET_MEDIA_QUERIES, useMediaQuery } from "../../composables/useMediaQuery";
 import {
   getElementRectFromContainer,
   getScrollContainer,
   getScrollElByContainer,
   getScrollPositions
 } from "../../utils/dom";
-import { off, on } from "../../utils/events";
+import { off, on, optimizedOff, optimizedOn } from "../../utils/events";
 import { throttleByRaf } from "../../utils/fn";
 import { toArray } from "../../utils/format";
-import { isClient } from "../../utils/is";
+import { isServer } from "../../utils/is";
 import PTeleport from "../teleport/index.vue";
 defineOptions({
   name: "PPopover"
@@ -27,29 +28,36 @@ const props = defineProps({
   showDelay: { type: Number, required: false, default: 300 },
   hideDelay: { type: Number, required: false, default: 300 },
   enterable: { type: Boolean, required: false },
-  showArrow: { type: Boolean, required: false, default: true },
-  arrowColor: { type: String, required: false, default: "var(--color-gray-1000)" },
-  triggerClass: { type: [String, Array, Object], required: false },
-  popoverClass: { type: [String, Array, Object], required: false },
+  showArrow: { type: Boolean, required: false, default: false },
+  arrowColor: { type: String, required: false, default: "hsl(var(--primary))" },
   destroyDelay: { type: Number, required: false, default: 2e3 },
   scrollHidden: { type: Boolean, required: false, default: false },
+  triggerClass: { type: [String, Array, Object], required: false },
+  popoverClass: { type: [String, Array, Object], required: false },
+  triggerStyle: { type: [Object, String], required: false },
   popoverStyle: { type: [Object, String], required: false },
   transitionName: { type: String, required: false },
   showTransition: { type: Boolean, required: false, default: true },
   hideTransition: { type: Boolean, required: false, default: true },
-  translateOffset: { type: [String, Number], required: false, default: 0 },
   closeOnPressEscape: { type: Boolean, required: false, default: false },
-  scrollHiddenThreshold: { type: Number, required: false, default: 100 },
+  scrollHiddenThreshold: { type: Number, required: false, default: 150 },
   dynamicPositionThreshold: { type: Number, required: false, default: 5 }
 });
 const emits = defineEmits(["show", "hide", "trigger-keydown"]);
-let triggerRect = null;
+const triggerRect = shallowRef();
 let viewportRect = null;
 let scrollContainer;
 let cachedContainerRect = null;
 let lastScrollInfo = null;
 let showPopoverTimer;
 let hidePopoverTimer;
+const triggerRef = shallowRef();
+const wrapperRef = shallowRef();
+const localPosition = shallowRef(props.position);
+const wrapperStyle = shallowRef({
+  left: "-100%",
+  top: "-100%"
+});
 const {
   render: isRender,
   visible: isVisible,
@@ -59,27 +67,20 @@ const {
   default: props.visible,
   delay: props.destroyDelay
 });
-const triggerRef = shallowRef();
-const containerRef = shallowRef();
-const localPosition = shallowRef(props.position);
-const originalPosition = shallowRef(props.position);
-const containerStyle = shallowRef({
-  left: "-100%",
-  top: "-100%"
-});
+const isSmUp = useMediaQuery(PRESET_MEDIA_QUERIES.SM_UP);
 const triggerMethods = computed(() => toArray(props.trigger));
 let cachedScrollTop = 0;
-let cachedGeneralPosition = null;
-let cachedPositionForGeneral = null;
-const generalPosition = computed(() => {
-  if (cachedPositionForGeneral === localPosition.value && cachedGeneralPosition) {
-    return cachedGeneralPosition;
-  }
-  cachedPositionForGeneral = localPosition.value;
-  cachedGeneralPosition = localPosition.value.split("-")[0];
-  return cachedGeneralPosition;
+let cachedBasePosition = null;
+let cachedPositionForBase = null;
+const basePosition = computed(() => {
+  if (cachedPositionForBase === localPosition.value && cachedBasePosition) {
+    return cachedBasePosition;
+  }
+  cachedPositionForBase = localPosition.value;
+  cachedBasePosition = localPosition.value.split("-")[0];
+  return cachedBasePosition;
 });
-const transitionName = computed(() => props.transitionName ?? `pxd-transition--popover-${generalPosition.value}`);
+const computedTransitionName = computed(() => props.transitionName ?? `pxd-transition--popover-${basePosition.value}`);
 const onContainerScroll = throttleByRaf((ev) => {
   if (!isVisible.value) {
     return;
@@ -112,14 +113,14 @@ function isContainerOverlapping(viewportRect2, containerRect, scrollInfo) {
   };
 }
 function getTriggerRect() {
-  triggerRect = triggerRef.value.getBoundingClientRect();
+  triggerRect.value = triggerRef.value.getBoundingClientRect();
   viewportRect = document.documentElement.getBoundingClientRect();
 }
 function handleDynamicPositionAdjustment() {
-  if (!containerRef.value || !triggerRect || !viewportRect) {
+  if (!wrapperRef.value || !triggerRect.value || !viewportRect) {
     return;
   }
-  const containerRect = containerRef.value.getBoundingClientRect();
+  const containerRect = wrapperRef.value.getBoundingClientRect();
   const scrollInfo = getScrollPositions(scrollContainer);
   if (cachedContainerRect && lastScrollInfo) {
     const rectChanged = Math.abs(containerRect.top - cachedContainerRect.top) > 1 || Math.abs(containerRect.left - cachedContainerRect.left) > 1;
@@ -131,18 +132,17 @@ function handleDynamicPositionAdjustment() {
   cachedContainerRect = containerRect;
   lastScrollInfo = scrollInfo;
   getTriggerRect();
+  const originalPosition = props.position;
   const currentOverlapping = isContainerOverlapping(viewportRect, containerRect, scrollInfo);
   let needsUpdate = false;
   if (currentOverlapping.isOverlapping) {
-    if (localPosition.value === originalPosition.value) {
+    if (localPosition.value === originalPosition) {
       reverseRenderPosition(currentOverlapping);
       needsUpdate = true;
     }
-  } else {
-    if (localPosition.value !== originalPosition.value) {
-      handleOriginalPositionCheck();
-      return;
-    }
+  } else if (localPosition.value !== originalPosition) {
+    handleOriginalPositionCheck();
+    return;
   }
   if (needsUpdate) {
     updateContentPosition();
@@ -150,13 +150,13 @@ function handleDynamicPositionAdjustment() {
 }
 function handleOriginalPositionCheck() {
   const tempPosition = localPosition.value;
-  localPosition.value = originalPosition.value;
+  localPosition.value = props.position;
   updateContentPosition();
   nextTick(() => {
-    if (!containerRef.value || !viewportRect) {
+    if (!wrapperRef.value || !viewportRect) {
       return;
     }
-    const newContainerRect = containerRef.value.getBoundingClientRect();
+    const newContainerRect = wrapperRef.value.getBoundingClientRect();
     const newOverlapping = isContainerOverlapping(viewportRect, newContainerRect, getScrollPositions(scrollContainer));
     if (newOverlapping.isOverlapping) {
       localPosition.value = tempPosition;
@@ -172,7 +172,6 @@ async function handlePopoverShow(immediate = false) {
     clearTimeout(showPopoverTimer);
     showPopoverTimer = setTimeout(() => {
       localPosition.value = props.position;
-      originalPosition.value = props.position;
       updateContentPosition();
       openPopover();
       resolve(true);
@@ -181,17 +180,16 @@ async function handlePopoverShow(immediate = false) {
   });
   cachedScrollTop = getScrollElByContainer(scrollContainer).scrollTop;
   on(scrollContainer, "scroll", onContainerScroll, { passive: true });
-  nextTick(() => {
-    const overlapping = isContainerOverlapping(
-      viewportRect,
-      containerRef.value.getBoundingClientRect(),
-      getScrollPositions(scrollContainer)
-    );
-    if (overlapping.isOverlapping) {
-      reverseRenderPosition(overlapping);
-      updateContentPosition();
-    }
-  });
+  await nextTick();
+  const overlapping = isContainerOverlapping(
+    viewportRect,
+    wrapperRef.value.getBoundingClientRect(),
+    getScrollPositions(scrollContainer)
+  );
+  if (overlapping.isOverlapping) {
+    reverseRenderPosition(overlapping);
+    updateContentPosition();
+  }
 }
 async function handlePopoverHide(immediate = false) {
   await new Promise((resolve) => {
@@ -260,7 +258,7 @@ async function onTriggerContextmenu(ev) {
 }
 function onClickOutsideToHide(ev) {
   const target = ev.target;
-  if (!triggerRef.value?.contains(target) && !containerRef.value?.contains(target)) {
+  if (!triggerRef.value?.contains(target) && !wrapperRef.value?.contains(target)) {
     handlePopoverHide();
   }
 }
@@ -283,74 +281,93 @@ function onContentPointerLeave() {
   handlePopoverHide();
 }
 function updateContentPosition() {
+  const { offset, maxWidth, zIndex, arrowColor } = props;
+  const { scrollLeft, scrollTop, width, height } = getElementRectFromContainer(triggerRect.value, viewportRect);
   const position = localPosition.value;
-  const { offset, arrowColor, maxWidth } = props;
-  const { scrollLeft, scrollTop, width, height } = getElementRectFromContainer(triggerRect, viewportRect);
   const isVertical = position.startsWith("top") || position.startsWith("bottom");
   const isHorizontal = position.startsWith("left") || position.startsWith("right");
   let top = "";
   let left = "";
-  let transform = "";
+  let translateX = "0";
+  let translateY = "0";
   if (isVertical) {
     if (position === "top") {
       top = `${scrollTop}px`;
       left = `${scrollLeft + width / 2}px`;
-      transform = "translate(-50%, -100%)";
+      translateX = "-50%";
+      translateY = "-100%";
     } else if (position === "bottom") {
       top = `${scrollTop + height}px`;
       left = `${scrollLeft + width / 2}px`;
-      transform = "translate(-50%, 0)";
+      translateX = "-50%";
     } else if (position === "top-start") {
       top = `${scrollTop}px`;
       left = `${scrollLeft}px`;
-      transform = "translate(0, -100%)";
+      translateY = "-100%";
     } else if (position === "top-end") {
       top = `${scrollTop}px`;
       left = `${scrollLeft + width}px`;
-      transform = "translate(-100%, -100%)";
+      translateX = "-100%";
+      translateY = "-100%";
     } else if (position === "bottom-start") {
       top = `${scrollTop + height}px`;
       left = `${scrollLeft}px`;
-      transform = "translate(0, 0)";
     } else if (position === "bottom-end") {
       top = `${scrollTop + height}px`;
       left = `${scrollLeft + width}px`;
-      transform = "translate(-100%, 0)";
+      translateX = "-100%";
+    }
+    if (!isSmUp.value) {
+      left = "";
+      translateX = "0";
     }
   } else if (isHorizontal) {
-    if (position === "left") {
-      top = `${scrollTop + height / 2}px`;
-      left = `${scrollLeft}px`;
-      transform = "translate(-100%, -50%)";
-    } else if (position === "right") {
-      top = `${scrollTop + height / 2}px`;
-      left = `${scrollLeft + width}px`;
-      transform = "translate(0, -50%)";
-    } else if (position === "left-start") {
-      top = `${scrollTop}px`;
-      left = `${scrollLeft}px`;
-      transform = "translate(-100%, 0)";
-    } else if (position === "left-end") {
-      top = `${scrollTop + height}px`;
-      left = `${scrollLeft}px`;
-      transform = "translate(-100%, -100%)";
-    } else if (position === "right-start") {
+    if (isSmUp.value) {
+      if (position === "left") {
+        top = `${scrollTop + height / 2}px`;
+        left = `${scrollLeft}px`;
+        translateX = "-100%";
+        translateY = "-50%";
+      } else if (position === "right") {
+        top = `${scrollTop + height / 2}px`;
+        left = `${scrollLeft + width}px`;
+        translateX = "0";
+        translateY = "-50%";
+      } else if (position === "left-start") {
+        top = `${scrollTop}px`;
+        left = `${scrollLeft}px`;
+        translateX = "-100%";
+        translateY = "0";
+      } else if (position === "left-end") {
+        top = `${scrollTop + height}px`;
+        left = `${scrollLeft}px`;
+        translateX = "-100%";
+        translateY = "-100%";
+      } else if (position === "right-start") {
+        top = `${scrollTop}px`;
+        left = `${scrollLeft + width}px`;
+      } else if (position === "right-end") {
+        top = `${scrollTop + height}px`;
+        left = `${scrollLeft + width}px`;
+        translateX = "0";
+        translateY = "-100%";
+      }
+    } else {
       top = `${scrollTop}px`;
-      left = `${scrollLeft + width}px`;
-      transform = "translate(0, 0)";
-    } else if (position === "right-end") {
-      top = `${scrollTop + height}px`;
-      left = `${scrollLeft + width}px`;
-      transform = "translate(0, -100%)";
+      left = "";
+      translateY = "-100%";
+      localPosition.value = "top-start";
     }
   }
-  containerStyle.value = {
+  wrapperStyle.value = {
     left,
     top,
-    transform,
-    "max-width": `${maxWidth || triggerRect.width}px`,
+    zIndex,
+    "transform": `translate3d(${translateX}, ${translateY}, 0)`,
+    "--color": arrowColor,
     "--offset": `${offset}px`,
-    "--arrow-color": arrowColor
+    "--max-width": `${maxWidth}px`,
+    "--arrow-offset": `${offset - 5}px`
   };
 }
 function reverseRenderPosition(overlapping) {
@@ -386,16 +403,6 @@ function reverseRenderPosition(overlapping) {
   }
   localPosition.value = newModifier ? `${newPosition}-${newModifier}` : newPosition;
 }
-watch(
-  () => props.visible,
-  (visible) => {
-    if (visible) {
-      handlePopoverShow();
-    } else {
-      handlePopoverHide();
-    }
-  }
-);
 const triggerMethodEvents = {
   click: [
     ["click", onTriggerClick]
@@ -437,35 +444,50 @@ function onTriggerKeydown(ev) {
   ev.stopPropagation();
   handlePopoverHide();
 }
+function onResizeUpdatePosition() {
+  if (!isVisible.value) {
+    return;
+  }
+  getTriggerRect();
+  updateContentPosition();
+}
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      handlePopoverShow();
+    } else {
+      handlePopoverHide();
+    }
+  }
+);
 watch(
   () => [triggerRef.value, triggerMethods.value],
   ([newDom, newMethods], [oldDom, oldMethods]) => {
-    if (oldDom) {
-      updateTriggerEvents(oldMethods, oldDom, off);
-    }
-    if (newDom) {
-      updateTriggerEvents(newMethods, newDom, on);
-    }
+    updateTriggerEvents(oldMethods, oldDom, off);
+    updateTriggerEvents(newMethods, newDom, on);
   }
 );
 onMounted(() => {
-  if (!isClient) {
+  if (isServer) {
     return;
   }
   scrollContainer = getScrollContainer(triggerRef.value, true);
+  optimizedOn(window, "resize", onResizeUpdatePosition);
 });
 onBeforeUnmount(() => {
-  triggerRect = null;
   viewportRect = null;
+  triggerRect.value = void 0;
   cachedContainerRect = null;
   lastScrollInfo = null;
-  cachedGeneralPosition = null;
-  cachedPositionForGeneral = null;
+  cachedBasePosition = null;
+  cachedPositionForBase = null;
   clearTimeout(showPopoverTimer);
   clearTimeout(hidePopoverTimer);
   off(document, "click", onClickOutsideToHide);
   off(document, "contextmenu", onTriggerContextmenu);
   off(scrollContainer, "scroll", onContainerScroll);
+  optimizedOff(window, "resize", onResizeUpdatePosition);
 });
 defineExpose({
   show: handlePopoverShow,
@@ -477,8 +499,9 @@ defineExpose({
   <div class="pxd-popover relative inline-flex w-max">
     <div
       ref="triggerRef"
-      class="pxd-popover__trigger active:select-none"
+      class="pxd-popover--trigger active:select-none"
       :class="triggerClass"
+      :style="triggerStyle"
       @contextmenu.prevent
       @keydown="onTriggerKeydown"
     >
@@ -486,22 +509,20 @@ defineExpose({
     </div>
 
     <PTeleport>
-      <Transition
-        mode="out-in" :name="transitionName" :class="{ showTransition, hideTransition }"
-        :style="{ '--translate-offset': translateOffset, zIndex }"
-      >
+      <Transition mode="out-in" :name="computedTransitionName" :class="{ showTransition, hideTransition }">
         <div
           v-if="isRender"
           v-show="isVisible"
-          ref="containerRef"
-          :style="containerStyle"
+          ref="wrapperRef"
+          :style="wrapperStyle"
+          :data-arrow="showArrow"
+          :data-enterable="enterable"
           :data-position="localPosition"
-          class="pxd-popover__container isolate absolute w-max"
-          :class="[{ 'pointer-events-none': !enterable, 'show-arrow': showArrow }]"
+          class="pxd-popover--container sm:max-w-(--max-width) p-2.5 sm:p-0 absolute isolate w-max max-w-full data-[enterable=false]:pointer-events-none"
           @pointerenter="onContentPointerEnter"
           @pointerleave="onContentPointerLeave"
         >
-          <div class="pxd-popover__content" :class="popoverClass" :style="popoverStyle">
+          <div class="pxd-popover--content" :class="popoverClass" :style="popoverStyle">
             <slot name="content">
               {{ content }}
             </slot>
@@ -513,7 +534,7 @@ defineExpose({
 </template>
 
 <style lang="postcss">
-.pxd-popover__container {
+.pxd-popover--container {
 
   &[data-position^='top'] {
     padding-bottom: var(--offset);
@@ -531,75 +552,75 @@ defineExpose({
     padding-left: var(--offset);
   }
 
-  &.show-arrow {
-    .pxd-popover__content::after {
+  &[data-arrow="true"] {
+    .pxd-popover--content::after {
       content: '';
       position: absolute;
       border-style: solid;
       z-index: 1;
     }
 
-    &[data-position="top"] .pxd-popover__content::after,
-    &[data-position="top-start"] .pxd-popover__content::after,
-    &[data-position="top-end"] .pxd-popover__content::after {
-      bottom: calc(var(--offset) - 4px);
+    &[data-position="top"] .pxd-popover--content::after,
+    &[data-position="top-start"] .pxd-popover--content::after,
+    &[data-position="top-end"] .pxd-popover--content::after {
+      bottom: var(--arrow-offset);
       border-width: 6px 6px 0;
-      border-color: var(--arrow-color) transparent transparent;
+      border-color: var(--color) transparent transparent;
     }
 
-    &[data-position='bottom'] .pxd-popover__content::after,
-    &[data-position='bottom-start'] .pxd-popover__content::after,
-    &[data-position='bottom-end'] .pxd-popover__content::after {
-      top: calc(var(--offset) - 4px);
+    &[data-position='bottom'] .pxd-popover--content::after,
+    &[data-position='bottom-start'] .pxd-popover--content::after,
+    &[data-position='bottom-end'] .pxd-popover--content::after {
+      top: var(--arrow-offset);
       border-width: 0 6px 6px;
-      border-color: transparent transparent var(--arrow-color);
+      border-color: transparent transparent var(--color);
     }
 
-    &[data-position='left'] .pxd-popover__content::after,
-    &[data-position='left-start'] .pxd-popover__content::after,
-    &[data-position='left-end'] .pxd-popover__content::after {
-      right: calc(var(--offset) - 4px);
+    &[data-position='left'] .pxd-popover--content::after,
+    &[data-position='left-start'] .pxd-popover--content::after,
+    &[data-position='left-end'] .pxd-popover--content::after {
+      right: var(--arrow-offset);
       border-width: 6px 0 6px 6px;
-      border-color: transparent transparent transparent var(--arrow-color);
+      border-color: transparent transparent transparent var(--color);
     }
 
-    &[data-position='right'] .pxd-popover__content::after,
-    &[data-position='right-start'] .pxd-popover__content::after,
-    &[data-position='right-end'] .pxd-popover__content::after {
-      left: calc(var(--offset) - 4px);
+    &[data-position='right'] .pxd-popover--content::after,
+    &[data-position='right-start'] .pxd-popover--content::after,
+    &[data-position='right-end'] .pxd-popover--content::after {
+      left: var(--arrow-offset);
       border-width: 6px 6px 6px 0;
-      border-color: transparent var(--arrow-color) transparent transparent;
+      border-color: transparent var(--color) transparent transparent;
     }
 
-    &[data-position='top'] .pxd-popover__content::after,
-    &[data-position='bottom'] .pxd-popover__content::after {
+    &[data-position='top'] .pxd-popover--content::after,
+    &[data-position='bottom'] .pxd-popover--content::after {
       left: 50%;
       transform: translateX(-50%);
     }
 
-    &[data-position='left'] .pxd-popover__content::after,
-    &[data-position='right'] .pxd-popover__content::after {
+    &[data-position='left'] .pxd-popover--content::after,
+    &[data-position='right'] .pxd-popover--content::after {
       top: 50%;
       transform: translateY(-50%);
     }
 
-    &[data-position='left-start'] .pxd-popover__content::after,
-    &[data-position='right-start'] .pxd-popover__content::after {
+    &[data-position='left-start'] .pxd-popover--content::after,
+    &[data-position='right-start'] .pxd-popover--content::after {
       top: 15px;
     }
 
-    &[data-position='left-end'] .pxd-popover__content::after,
-    &[data-position='right-end'] .pxd-popover__content::after {
+    &[data-position='left-end'] .pxd-popover--content::after,
+    &[data-position='right-end'] .pxd-popover--content::after {
       bottom: 15px;
     }
 
-    &[data-position='top-start'] .pxd-popover__content::after,
-    &[data-position='bottom-start'] .pxd-popover__content::after {
+    &[data-position='top-start'] .pxd-popover--content::after,
+    &[data-position='bottom-start'] .pxd-popover--content::after {
       left: 15px;
     }
 
-    &[data-position='top-end'] .pxd-popover__content::after,
-    &[data-position='bottom-end'] .pxd-popover__content::after {
+    &[data-position='top-end'] .pxd-popover--content::after,
+    &[data-position='bottom-end'] .pxd-popover--content::after {
       right: 15px;
     }
   }
@@ -613,9 +634,7 @@ defineExpose({
 .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),
-    margin var(--default-transition-duration) var(--default-transition-timing-function);
+  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
 }
 
 .showTransition.pxd-transition--popover-top-enter-from,
@@ -628,24 +647,4 @@ defineExpose({
 .hideTransition.pxd-transition--popover-right-leave-to {
   opacity: 0;
 }
-
-.showTransition.pxd-transition--popover-top-enter-from,
-.hideTransition.pxd-transition--popover-top-leave-to {
-  margin-top: calc(1px * var(--translate-offset));
-}
-
-.showTransition.pxd-transition--popover-bottom-enter-from,
-.hideTransition.pxd-transition--popover-bottom-leave-to {
-  margin-top: calc(-1px * var(--translate-offset));
-}
-
-.showTransition.pxd-transition--popover-left-enter-from,
-.hideTransition.pxd-transition--popover-left-leave-to {
-  margin-left: calc(1px * var(--translate-offset));
-}
-
-.showTransition.pxd-transition--popover-right-enter-from,
-.hideTransition.pxd-transition--popover-right-leave-to {
-  margin-left: calc(-1px * var(--translate-offset));
-}
 </style>

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

@@ -15,15 +15,15 @@ interface Props {
     enterable?: boolean;
     showArrow?: boolean;
     arrowColor?: string;
-    triggerClass?: ComponentClass;
-    popoverClass?: ComponentClass;
     destroyDelay?: number;
     scrollHidden?: boolean;
+    triggerClass?: ComponentClass;
+    popoverClass?: ComponentClass;
+    triggerStyle?: CSSProperties | string;
     popoverStyle?: CSSProperties | string;
     transitionName?: string;
     showTransition?: boolean;
     hideTransition?: boolean;
-    translateOffset?: string | number;
     closeOnPressEscape?: boolean;
     scrollHiddenThreshold?: number;
     dynamicPositionThreshold?: number;
@@ -61,7 +61,6 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {
     scrollHidden: boolean;
     showTransition: boolean;
     hideTransition: boolean;
-    translateOffset: string | number;
     closeOnPressEscape: boolean;
     scrollHiddenThreshold: number;
     dynamicPositionThreshold: number;

package/dist/components/progress/index.vue

@@ -49,7 +49,7 @@ const computedLabel = computed(() => {
   return false;
 });
 const computedClass = computed(() => {
-  const classes = ["pxd-progress-bar flex-1 rounded-full overflow-hidden bg-gray-200", getFallbackValue(props.size, SIZES, config.size)];
+  const classes = ["pxd-progress-bar flex-1 overflow-hidden rounded-full bg-gray-200", getFallbackValue(props.size, SIZES, config.size)];
   return classes.join(" ");
 });
 const computedColors = computed(() => {
@@ -69,12 +69,12 @@ const computedProgressBarStyles = computed(() => {
 </script>
 
 <template>
-  <div role="progressbar" class="pxd-progress w-full flex items-center" :aria-valuenow="progress" :aria-valuemin="min" :aria-valuemax="max">
+  <div role="progressbar" class="pxd-progress flex w-full items-center" :aria-valuenow="progress" :aria-valuemin="min" :aria-valuemax="max">
     <div :class="computedClass">
       <div class="h-full rounded-inherit motion-safe:transition-all" :style="computedProgressBarStyles" />
     </div>
 
-    <span v-if="computedLabel || $slots.default" class="text-foreground-secondary text-sm ml-3 font-mono empty:hidden">
+    <span v-if="computedLabel || $slots.default" class="text-sm ml-3 font-mono text-foreground-secondary empty:hidden">
       <slot>
         {{ computedLabel }}
       </slot>