pxd 0.0.45 → 0.0.47

package/dist/components/popover/index.vue

@@ -1,31 +1,24 @@
 <script setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import { arrow, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { computed, shallowRef, watch } from "vue";
 import { useIntersectionObserver } from "../../composables/use-browser-observer";
 import { useDelayDestroy } from "../../composables/use-delay-destroy";
 import { useOutsideClick } from "../../composables/use-outside-click";
 import { debounce } from "../../utils/debounce";
-import {
-  getElementRectFromContainer,
-  getScrollContainer,
-  getScrollElByContainer,
-  getViewportRect
-} from "../../utils/dom";
 import { optimizedOff, optimizedOn } from "../../utils/event";
 import { getCssUnitValue, toArray } from "../../utils/format";
-import { isServer } from "../../utils/is";
-import { throttleByRaf } from "../../utils/throttle";
 import PTeleport from "../teleport/index.vue";
 defineOptions({
   name: "PPopover",
   inheritAttrs: false
 });
 const props = defineProps({
-  zIndex: { type: Number, required: false, default: 5 },
+  zIndex: { type: [Number, String], required: false },
   offset: { type: Number, required: false, default: 8 },
   visible: { type: Boolean, required: false },
   trigger: { type: [String, Array], required: false, default: () => ["hover"] },
   disabled: { type: Boolean, required: false },
-  maxWidth: { type: Number, required: false },
+  maxWidth: { type: [Number, String], required: false },
   position: { type: null, required: false, default: "bottom" },
   showDelay: { type: Number, required: false, default: 300 },
   hideDelay: { type: Number, required: false, default: 300 },
@@ -33,36 +26,27 @@ const props = defineProps({
   showArrow: { type: Boolean, required: false },
   arrowColor: { type: String, required: false, default: "hsl(var(--primary))" },
   autoPosition: { type: Boolean, required: false, default: true },
-  closeOnScroll: { type: Boolean, required: false },
   wrapperClass: { type: [String, Array, Object], required: false },
   contentClass: { type: [String, Array, Object], required: false },
   contentStyle: { type: [Object, String], required: false },
-  showTransition: { type: Boolean, required: false, default: true },
-  hideTransition: { type: Boolean, required: false, default: true },
   transitionType: { type: String, required: false, default: "fade-scale" },
-  closeOnPressEscape: { type: Boolean, required: false },
-  autoPositionThreshold: { type: Number, required: false, default: 30 },
-  closeOnScrollThreshold: { type: Number, required: false, default: 150 }
+  closeOnInvisible: { type: Boolean, required: false, default: true },
+  closeOnPressEscape: { type: Boolean, required: false }
 });
 const emits = defineEmits(["show", "hide", "escape", "outside-click", "trigger-click", "visible-change"]);
-let triggerRect = null;
-let wrapperRect = null;
-let viewportRect = null;
-let scrollContainer;
 let showPopoverTimer;
 let hidePopoverTimer;
-let savedScrollPosition = 0;
 const allowedMethods = ["click", "manual", "contextmenu"];
-const triggerRef = shallowRef();
-const wrapperRef = shallowRef();
-const wrapperStyle = shallowRef({
-  "--popover-bg": props.arrowColor,
-  "--popover-offset": getCssUnitValue(props.offset),
-  "--popover-max-width": getCssUnitValue(props.maxWidth),
-  "--popover-arrow-offset": `${props.offset - 5}px`
-});
+const arrayRef = shallowRef(null);
+const triggerRef = shallowRef(null);
+const wrapperRef = shallowRef(null);
 const localPosition = shallowRef(props.position);
 const triggerMethods = computed(() => toArray(props.trigger));
+const wrapperStyle = computed(() => ({
+  "z-index": props.zIndex,
+  "--popover-bg": props.arrowColor,
+  "--popover-max-width": getCssUnitValue(props.maxWidth)
+}));
 const {
   render: isRender,
   visible: isVisible,
@@ -70,17 +54,10 @@ const {
   hide: hidePopover
 } = useDelayDestroy(props.visible, {
   delay: 2e3,
-  async renderChange(v) {
-    if (v) {
-      await nextTick();
-      getBoundingRects();
-      reversePositionIfNeed();
+  visibleChange(v) {
+    if (triggerMethods.value.includes("manual")) {
       return;
     }
-    restorePosition();
-    clearBoundingRect();
-  },
-  visibleChange(v) {
     emits("visible-change", v);
     if (v) {
       emits("show");
@@ -94,7 +71,8 @@ useOutsideClick(wrapperRef, {
     return isVisible.value && allowedMethods.some((t) => triggerMethods.value.includes(t));
   },
   isOutside: (ev) => {
-    return !triggerRef.value?.contains(ev.target);
+    const el = ev.target;
+    return !(triggerRef.value?.contains(el) || wrapperRef.value?.contains(el));
   },
   onTrigger: debounce((ev) => {
     emits("outside-click", ev);
@@ -104,37 +82,12 @@ useOutsideClick(wrapperRef, {
     handlePopoverHide();
   }, 500, { edges: ["leading"] })
 });
-let triggerVisible = false;
 useIntersectionObserver(triggerRef, ([entry]) => {
-  triggerVisible = entry.isIntersecting;
-});
-const onContainerScroll = throttleByRaf(async (ev) => {
-  if (!isVisible.value) {
-    return;
-  }
-  const scrollTop = getScrollElByContainer(ev.target).scrollTop;
-  const delta = Math.abs(scrollTop - savedScrollPosition);
-  if (props.closeOnScroll && (delta >= props.closeOnScrollThreshold || !triggerVisible)) {
+  if (props.closeOnInvisible && isVisible.value && entry.intersectionRatio === 0) {
     handlePopoverHide(true);
   }
-  if (!props.autoPosition) {
-    return;
-  }
-  if (delta < props.autoPositionThreshold) {
-    reversePositionIfNeed();
-  }
 });
-function getBoundingRects() {
-  triggerRect = triggerRef.value.getBoundingClientRect();
-  wrapperRect = wrapperRef.value.getBoundingClientRect();
-  viewportRect = getViewportRect();
-}
-function clearBoundingRect() {
-  triggerRect = null;
-  wrapperRect = null;
-  viewportRect = null;
-}
-async function handlePopoverShow(immediate = false) {
+async function handlePopoverShow() {
   if (showPopoverTimer || props.disabled) {
     return;
   }
@@ -146,16 +99,37 @@ async function handlePopoverShow(immediate = false) {
     showPopoverTimer = setTimeout(() => {
       showPopoverTimer = null;
       resolve();
-    }, immediate ? 0 : props.showDelay);
+    }, props.showDelay);
+  });
+  await showPopover();
+  const { x, y, placement, middlewareData } = await computePosition(
+    triggerRef.value,
+    wrapperRef.value,
+    {
+      placement: localPosition.value,
+      middleware: [
+        shift(),
+        offset(props.offset),
+        props.autoPosition && flip(),
+        props.showArrow && arrow({ element: arrayRef.value })
+      ]
+    }
+  );
+  localPosition.value = placement;
+  Object.assign(wrapperRef.value.style, {
+    left: `${x}px`,
+    top: `${y}px`
   });
-  showPopover();
-  await nextTick();
-  updateContentPosition();
-  savedScrollPosition = getScrollElByContainer(scrollContainer).scrollTop;
+  if (middlewareData.arrow) {
+    const { x: x2, y: y2 } = middlewareData.arrow;
+    Object.assign(arrayRef.value.style, {
+      left: x2 != null ? `${Math.max(x2, 5)}px` : "",
+      top: y2 != null ? `${Math.max(y2, 5)}px` : ""
+    });
+  }
   if (props.closeOnPressEscape) {
     optimizedOn(document, "keydown", onPopoverKeystroke);
   }
-  optimizedOn(scrollContainer, "scroll", onContainerScroll, { passive: true });
 }
 async function handlePopoverHide(immediate = false) {
   if (hidePopoverTimer) {
@@ -172,17 +146,15 @@ async function handlePopoverHide(immediate = false) {
     }, immediate ? 0 : props.hideDelay);
   });
   await hidePopover();
-  wrapperRect = null;
   if (props.closeOnPressEscape) {
     optimizedOff(document, "keydown", onPopoverKeystroke);
   }
-  optimizedOff(scrollContainer, "scroll", onContainerScroll);
 }
 function onPopoverKeystroke(ev) {
   if (ev.ctrlKey || ev.metaKey || ev.altKey || ev.shiftKey) {
     return;
   }
-  if (ev.key !== "Escape" || !props.closeOnPressEscape) {
+  if (ev.key !== "Escape") {
     return;
   }
   emits("escape", ev);
@@ -257,121 +229,6 @@ function onContentPointerLeave() {
   }
   handlePopoverHide();
 }
-async function updateContentPosition() {
-  if (!wrapperRect) {
-    return;
-  }
-  const { offset, maxWidth, zIndex, arrowColor } = props;
-  const { width: wrapperWidth, height: wrapperHeight } = wrapperRect;
-  const { scrollLeft, scrollTop, width, height } = getElementRectFromContainer(triggerRect, viewportRect);
-  let top = "";
-  let left = "";
-  switch (localPosition.value) {
-    case "top":
-      top = `${scrollTop - wrapperHeight}px`;
-      left = `${scrollLeft + width / 2 - wrapperWidth / 2}px`;
-      break;
-    case "top-start":
-      top = `${scrollTop - wrapperHeight}px`;
-      left = `${scrollLeft}px`;
-      break;
-    case "top-end":
-      top = `${scrollTop - wrapperHeight}px`;
-      left = `${scrollLeft + width - wrapperWidth}px`;
-      break;
-    case "right":
-      top = `${scrollTop + height / 2 - wrapperHeight / 2}px`;
-      left = `${scrollLeft + width}px`;
-      break;
-    case "right-start":
-      top = `${scrollTop}px`;
-      left = `${scrollLeft + width}px`;
-      break;
-    case "right-end":
-      top = `${scrollTop + height - wrapperHeight}px`;
-      left = `${scrollLeft + width}px`;
-      break;
-    case "bottom":
-      top = `${scrollTop + height}px`;
-      left = `${scrollLeft + width / 2 - wrapperWidth / 2}px`;
-      break;
-    case "bottom-start":
-      top = `${scrollTop + height}px`;
-      left = `${scrollLeft}px`;
-      break;
-    case "bottom-end":
-      top = `${scrollTop + height}px`;
-      left = `${scrollLeft + width - wrapperWidth}px`;
-      break;
-    case "left":
-      top = `${scrollTop + height / 2 - wrapperHeight / 2}px`;
-      left = `${scrollLeft - wrapperWidth}px`;
-      break;
-    case "left-start":
-      top = `${scrollTop}px`;
-      left = `${scrollLeft - wrapperWidth}px`;
-      break;
-    case "left-end":
-      top = `${scrollTop + height - wrapperHeight}px`;
-      left = `${scrollLeft - wrapperWidth}px`;
-      break;
-  }
-  wrapperStyle.value = {
-    left,
-    top,
-    zIndex,
-    "--popover-bg": arrowColor,
-    "--popover-offset": getCssUnitValue(offset),
-    "--popover-max-width": getCssUnitValue(maxWidth),
-    "--popover-arrow-offset": `${offset - 5}px`
-  };
-}
-function restorePosition() {
-  localPosition.value = props.position;
-}
-function reversePosition(position, modifier) {
-  const positionsMap = {
-    top: "bottom",
-    left: "right",
-    right: "left",
-    bottom: "top"
-  };
-  localPosition.value = `${positionsMap[position]}${modifier ? "-" : ""}${modifier}`;
-}
-function reversePositionIfNeed() {
-  if (!wrapperRect) {
-    return;
-  }
-  const trigger = triggerRect;
-  const wrapper = wrapperRect;
-  const viewport = viewportRect;
-  const [position, modifier = ""] = localPosition.value.split("-");
-  if (position === "left") {
-    if (trigger.left - wrapper.width < 0) {
-      reversePosition(position, modifier);
-    } else {
-      restorePosition();
-    }
-  } else if (position === "top") {
-    if (trigger.top - wrapper.height < 0) {
-      reversePosition(position, modifier);
-    } else {
-      restorePosition();
-    }
-  } else if (position === "right") {
-    if (trigger.right + wrapper.width > viewport.width) {
-      reversePosition(position, modifier);
-    } else {
-      restorePosition();
-    }
-  } else if (position === "bottom") {
-    if (trigger.bottom + wrapper.height > viewport.height) {
-      reversePosition(position, modifier);
-    } else {
-      restorePosition();
-    }
-  }
-}
 const triggerMethodEvents = {
   focus: [
     ["focusin", onTriggerFocusin],
@@ -393,13 +250,6 @@ function updateTriggerEvents(methods, dom, handler) {
     }
   }
 }
-function onResizeUpdatePosition() {
-  if (!isVisible.value || !props.autoPosition) {
-    return;
-  }
-  getBoundingRects();
-  updateContentPosition();
-}
 watch(
   () => props.visible,
   (visible) => {
@@ -417,18 +267,6 @@ watch(
     updateTriggerEvents(newMethods, newDom, optimizedOn);
   }
 );
-onMounted(() => {
-  if (isServer) {
-    return;
-  }
-  scrollContainer = getScrollContainer(triggerRef.value);
-  optimizedOn(window, "resize", onResizeUpdatePosition);
-});
-onBeforeUnmount(() => {
-  clearBoundingRect();
-  optimizedOff(window, "resize", onResizeUpdatePosition);
-  optimizedOff(scrollContainer, "scroll", onContainerScroll);
-});
 defineExpose({
   show: handlePopoverShow,
   hide: handlePopoverHide
@@ -454,14 +292,12 @@ defineExpose({
         :data-visible="isVisible"
         :data-enterable="enterable"
         :data-position="localPosition"
-        :data-show-transition="showTransition"
-        :data-hide-transition="hideTransition"
         :data-transition-type="transitionType"
-        class="pxd-popover--container sm:max-w-(--popover-max-width) absolute isolate w-max max-w-full motion-reduce:data-[visible=false]:hidden"
+        class="pxd-popover--container sm:max-w-(--popover-max-width) absolute isolate z-1 w-max max-w-full motion-reduce:data-[visible=false]:hidden"
         @pointerenter="onContentPointerEnter"
         @pointerleave="onContentPointerLeave"
       >
-        <i v-if="showArrow" class="pxd-popover--arrow absolute z-1" />
+        <i v-if="showArrow" ref="arrayRef" class="pxd-popover--arrow absolute z-1 border-solid" />
         <div class="pxd-popover--content" :class="contentClass" :style="contentStyle">
           <slot name="content" />
         </div>
@@ -489,20 +325,23 @@ defineExpose({
 }
 
 .pxd-popover--container {
-  &[data-visible="true"][data-show-transition="true"][data-transition-type="fade"] {
-    animation: popover-fade-show var(--default-transition-duration) var(--default-transition-timing-function) forwards;
+  will-change: transform, opacity;
+  animation: popover-fade-show var(--default-transition-duration) var(--default-transition-timing-function) forwards;
+
+  &[data-visible="true"][data-transition-type="fade"] {
+    animation-name: popover-fade-show;
   }
 
-  &[data-visible="false"][data-hide-transition="true"][data-transition-type="fade"] {
-    animation: popover-fade-hide var(--default-transition-duration) var(--default-transition-timing-function) forwards;
+  &[data-visible="false"][data-transition-type="fade"] {
+    animation-name: popover-fade-hide;
   }
 
-  &[data-visible="true"][data-show-transition="true"][data-transition-type="fade-scale"] {
-    animation: popover-fade-scale-show var(--default-transition-duration) var(--default-transition-timing-function) forwards;
+  &[data-visible="true"][data-transition-type="fade-scale"] {
+    animation-name: popover-fade-scale-show;
   }
 
-  &[data-visible="false"][data-hide-transition="true"][data-transition-type="fade-scale"] {
-    animation: popover-fade-scale-hide var(--default-transition-duration) var(--default-transition-timing-function) forwards;
+  &[data-visible="false"][data-transition-type="fade-scale"] {
+    animation-name: popover-fade-scale-hide;
   }
 
   &[data-enterable="false"] {
@@ -530,49 +369,29 @@ defineExpose({
   }
 
   &[data-position='left'] {
-    transform-origin: 100% 50%;
+    transform-origin: right center ;
   }
   &[data-position='left-start'] {
-    transform-origin: 100% 0;
+    transform-origin: right top;
   }
   &[data-position='left-end'] {
-    transform-origin: 100% 100%;
+    transform-origin: right bottom;
   }
 
   &[data-position='right'] {
-    transform-origin: 0 50%;
+    transform-origin: left center;
   }
   &[data-position='right-start'] {
-    transform-origin: 0 0;
+    transform-origin: left top;
   }
   &[data-position='right-end'] {
-    transform-origin: 0 100%;
-  }
-
-  &[data-position^='top'] {
-    padding-bottom: var(--popover-offset);
-  }
-
-  &[data-position^='bottom'] {
-    padding-top: var(--popover-offset);
-  }
-
-  &[data-position^='left'] {
-    padding-right: var(--popover-offset);
-  }
-
-  &[data-position^='right'] {
-    padding-left: var(--popover-offset);
-  }
-
-  .pxd-popover--arrow {
-    border-style: solid;
+    transform-origin: left bottom;
   }
 
   &[data-position="top"] .pxd-popover--arrow,
   &[data-position="top-start"] .pxd-popover--arrow,
   &[data-position="top-end"] .pxd-popover--arrow {
-    bottom: var(--popover-arrow-offset);
+    bottom: -5px;
     border-width: 6px 6px 0;
     border-color: var(--popover-bg) transparent transparent;
   }
@@ -580,7 +399,7 @@ defineExpose({
   &[data-position='bottom'] .pxd-popover--arrow,
   &[data-position='bottom-start'] .pxd-popover--arrow,
   &[data-position='bottom-end'] .pxd-popover--arrow {
-    top: var(--popover-arrow-offset);
+    top: -5px;
     border-width: 0 6px 6px;
     border-color: transparent transparent var(--popover-bg);
   }
@@ -588,7 +407,7 @@ defineExpose({
   &[data-position='left'] .pxd-popover--arrow,
   &[data-position='left-start'] .pxd-popover--arrow,
   &[data-position='left-end'] .pxd-popover--arrow {
-    right: var(--popover-arrow-offset);
+    right: -5px;
     border-width: 6px 0 6px 6px;
     border-color: transparent transparent transparent var(--popover-bg);
   }
@@ -596,41 +415,9 @@ defineExpose({
   &[data-position='right'] .pxd-popover--arrow,
   &[data-position='right-start'] .pxd-popover--arrow,
   &[data-position='right-end'] .pxd-popover--arrow {
-    left: var(--popover-arrow-offset);
+    left: -5px;
     border-width: 6px 6px 6px 0;
     border-color: transparent var(--popover-bg) transparent transparent;
   }
-
-  &[data-position='top'] .pxd-popover--arrow,
-  &[data-position='bottom'] .pxd-popover--arrow {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  &[data-position='left'] .pxd-popover--arrow,
-  &[data-position='right'] .pxd-popover--arrow {
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  &[data-position='left-start'] .pxd-popover--arrow,
-  &[data-position='right-start'] .pxd-popover--arrow {
-    top: 16px;
-  }
-
-  &[data-position='left-end'] .pxd-popover--arrow,
-  &[data-position='right-end'] .pxd-popover--arrow {
-    bottom: 16px;
-  }
-
-  &[data-position='top-start'] .pxd-popover--arrow,
-  &[data-position='bottom-start'] .pxd-popover--arrow {
-    left: 16px;
-  }
-
-  &[data-position='top-end'] .pxd-popover--arrow,
-  &[data-position='bottom-end'] .pxd-popover--arrow {
-    right: 16px;
-  }
 }
 </style>

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

@@ -2,12 +2,12 @@ import type { CSSProperties } from 'vue';
 import type { PopoverTrigger } from '../../types/components/popover';
 import type { ComponentClass, ComponentPosition } from '../../types/shared';
 interface Props {
-    zIndex?: number;
+    zIndex?: number | string;
     offset?: number;
     visible?: boolean;
     trigger?: PopoverTrigger | PopoverTrigger[];
     disabled?: boolean;
-    maxWidth?: number;
+    maxWidth?: number | string;
     position?: ComponentPosition;
     showDelay?: number;
     hideDelay?: number;
@@ -15,20 +15,14 @@ interface Props {
     showArrow?: boolean;
     arrowColor?: string;
     autoPosition?: boolean;
-    closeOnScroll?: boolean;
     wrapperClass?: ComponentClass;
     contentClass?: ComponentClass;
     contentStyle?: CSSProperties | string;
-    showTransition?: boolean;
-    hideTransition?: boolean;
     transitionType?: 'fade' | 'fade-scale';
+    closeOnInvisible?: boolean;
     closeOnPressEscape?: boolean;
-    /** 自动调整位置的阈值, 当滚动距离超过该值时, 自动调整位置, 单位: px */
-    autoPositionThreshold?: number;
-    /** 滚动隐藏的阈值, 当滚动距离超过该值时, 自动隐藏弹窗, 单位: px */
-    closeOnScrollThreshold?: number;
 }
-declare function handlePopoverShow(immediate?: boolean): Promise<void>;
+declare function handlePopoverShow(): Promise<void>;
 declare function handlePopoverHide(immediate?: boolean): Promise<void>;
 declare var __VLS_1: {}, __VLS_9: {};
 type __VLS_Slots = {} & {
@@ -54,19 +48,15 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {
     "onOutside-click"?: ((args_0: MouseEvent) => any) | undefined;
     "onTrigger-click"?: ((args_0: PointerEvent) => any) | undefined;
 }>, {
-    zIndex: number;
+    position: ComponentPosition;
     offset: number;
     trigger: PopoverTrigger | PopoverTrigger[];
-    position: ComponentPosition;
     showDelay: number;
     hideDelay: number;
     arrowColor: string;
     autoPosition: boolean;
-    showTransition: boolean;
-    hideTransition: boolean;
     transitionType: "fade" | "fade-scale";
-    autoPositionThreshold: number;
-    closeOnScrollThreshold: number;
+    closeOnInvisible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -18,8 +18,8 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     "onUpdate:modelValue"?: ((args_0: number) => any) | undefined;
 }>, {
     label: boolean | string | number;
-    max: number;
     variant: ComponentVariant | "secondary";
+    max: number;
     min: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -18,8 +18,8 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     "onUpdate:modelValue"?: ((args_0: number) => any) | undefined;
 }>, {
     label: boolean | string | number;
-    max: number;
     variant: ComponentVariant | "secondary";
+    max: number;
     min: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -14,8 +14,8 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     "onUpdate:modelValue"?: ((args_0: NonNullable<number | [number, number] | null | undefined>) => any) | undefined;
 }>, {
-    max: number;
     variant: ComponentVariant | "secondary";
+    max: number;
     modelValue: number | [number, number] | null;
     min: number;
     step: number;

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

@@ -14,8 +14,8 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     "onUpdate:modelValue"?: ((args_0: NonNullable<number | [number, number] | null | undefined>) => any) | undefined;
 }>, {
-    max: number;
     variant: ComponentVariant | "secondary";
+    max: number;
     modelValue: number | [number, number] | null;
     min: number;
     step: number;

package/dist/components/stack/index.vue

@@ -91,5 +91,5 @@ const computedClass = computed(() => {
     :style="formattedGap"
   >
     <slot />
-  </component>
+  </Component>
 </template>

package/dist/components/status-dot/index.d.vue.ts

@@ -1,9 +1,10 @@
+import type { ComponentLabel } from 'dist/index';
 interface Props {
-    label?: boolean | string;
+    label?: boolean | ComponentLabel;
     state?: 'QUEUED' | 'BUILDING' | 'READY' | 'ERROR' | 'CANCELED';
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    label: boolean | string;
+    label: boolean | ComponentLabel;
     state: "QUEUED" | "BUILDING" | "READY" | "ERROR" | "CANCELED";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/status-dot/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { capitalize as capitalizeText } from "../../utils/format";
 const props = defineProps({
-  label: { type: [Boolean, String], required: false, default: false },
+  label: { type: Boolean, required: false, skipCheck: true, default: false },
   state: { type: String, required: false, default: "QUEUED" }
 });
 const stateClassNames = {

package/dist/components/status-dot/index.vue.d.ts

@@ -1,9 +1,10 @@
+import type { ComponentLabel } from 'dist/index';
 interface Props {
-    label?: boolean | string;
+    label?: boolean | ComponentLabel;
     state?: 'QUEUED' | 'BUILDING' | 'READY' | 'ERROR' | 'CANCELED';
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    label: boolean | string;
+    label: boolean | ComponentLabel;
     state: "QUEUED" | "BUILDING" | "READY" | "ERROR" | "CANCELED";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;