pxd 0.0.52 → 0.0.53

package/dist/components/placeholder/index.vue

@@ -36,9 +36,16 @@ const computedStyle = computed(() => {
   }
 
   --placeholder-deg: -45deg;
-  background:
-    linear-gradient(var(--placeholder-deg),var(--placeholder-color) 12.5%,#0000 12.5%,#0000 50%,var(--placeholder-color) 50%,var(--placeholder-color) 62.5%,#0000 62.5%,#0000 100%)
-    0 0 / var(--placeholder-gap, 12px) var(--placeholder-gap, 12px)
-    padding-box fixed;
+  background: linear-gradient(
+      var(--placeholder-deg),
+      var(--placeholder-color) 12.5%,
+      #0000 12.5%,
+      #0000 50%,
+      var(--placeholder-color) 50%,
+      var(--placeholder-color) 62.5%,
+      #0000 62.5%,
+      #0000 100%
+    )
+    0 0 / var(--placeholder-gap, 12px) var(--placeholder-gap, 12px) padding-box fixed;
 }
 </style>

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

@@ -11,16 +11,16 @@ interface Props {
     position?: ComponentPosition;
     showDelay?: number;
     hideDelay?: number;
-    enterable?: boolean;
     showArrow?: boolean;
     arrowColor?: string;
-    toggleClick?: 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;
     lockScrollOnVisible?: boolean;
@@ -57,10 +57,11 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {
     showDelay: number;
     hideDelay: number;
     arrowColor: string;
-    toggleClick: boolean;
+    interactive: boolean;
     autoPosition: boolean;
     unsetPosition: boolean;
     transitionType: "fade" | "fade-scale" | "fade-slide";
+    toggleOnTrigger: boolean;
     closeOnInvisible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/popover/index.vue

@@ -8,6 +8,7 @@ import { useOutsideClick } from "../../composables/use-outside-click";
 import { debounce } from "../../utils/debounce";
 import { cachedOff, cachedOn, sleep } from "../../utils/event";
 import { getCssUnitValue, toArray } from "../../utils/format";
+import { useConfigProvider } from "../../composables/use-config-provider-context";
 import PTeleport from "../teleport/index.vue";
 defineOptions({
   name: "PPopover",
@@ -21,18 +22,18 @@ const props = defineProps({
   disabled: { type: Boolean, 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 },
-  enterable: { type: Boolean, required: false },
+  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))" },
-  toggleClick: { type: Boolean, required: false, default: true },
+  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 },
   lockScrollOnVisible: { type: Boolean, required: false }
@@ -48,13 +49,11 @@ const localPosition = shallowRef(props.position);
 const triggerMethods = computed(() => toArray(props.trigger));
 const wrapperStyle = computed(() => ({
   "z-index": props.zIndex,
-  "--popover-bg": props.arrowColor,
+  "--popover-arrow-bg": props.arrowColor,
   "--popover-max-width": getCssUnitValue(props.maxWidth)
 }));
-const {
-  lockScroll,
-  unlockScroll
-} = useLockScroll();
+const configProvider = useConfigProvider();
+const { lockScroll, unlockScroll } = useLockScroll();
 const {
   render: isRender,
   visible: isVisible,
@@ -88,13 +87,17 @@ useOutsideClick(wrapperRef, {
     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;
-    }
-    handlePopoverHide();
-  }, 500, { edges: ["leading"] })
+  onTrigger: debounce(
+    (ev) => {
+      emits("outside-click", ev);
+      if (triggerMethods.value.includes("manual")) {
+        return;
+      }
+      handlePopoverHide();
+    },
+    500,
+    { edges: ["leading"] }
+  )
 });
 useIntersectionObserver(triggerRef, ([entry]) => {
   if (props.closeOnInvisible && isVisible.value && entry.intersectionRatio === 0) {
@@ -158,10 +161,13 @@ async function handlePopoverHide(immediate = false) {
       clearTimeout(showPopoverTimer);
       showPopoverTimer = null;
     }
-    hidePopoverTimer = setTimeout(() => {
-      hidePopoverTimer = null;
-      resolve();
-    }, immediate ? 0 : props.hideDelay);
+    hidePopoverTimer = setTimeout(
+      () => {
+        hidePopoverTimer = null;
+        resolve();
+      },
+      immediate ? 0 : props.hideDelay
+    );
   });
   await hidePopover();
   if (props.closeOnPressEscape) {
@@ -186,7 +192,7 @@ async function onTriggerClick(ev) {
   if (!triggerMethods.value.includes("click")) {
     return;
   }
-  if (isVisible.value && props.toggleClick) {
+  if (isVisible.value && props.toggleOnTrigger) {
     handlePopoverHide();
     return;
   }
@@ -234,7 +240,7 @@ function onContentPointerEnter() {
   if (props.disabled) {
     return;
   }
-  if (!props.enterable || !isVisible.value) {
+  if (!props.interactive || !isVisible.value) {
     return;
   }
   handlePopoverShow();
@@ -243,7 +249,7 @@ function onContentPointerLeave() {
   if (props.disabled) {
     return;
   }
-  if (props.enterable && !triggerMethods.value.includes("hover")) {
+  if (props.interactive && !triggerMethods.value.includes("hover")) {
     return;
   }
   handlePopoverHide();
@@ -286,15 +292,16 @@ defineExpose({
         :class="wrapperClass"
         :style="wrapperStyle"
         :data-visible="isVisible"
-        :data-enterable="enterable"
-        class="pxd-popover--wrapper sm:max-w-(--popover-max-width) absolute isolate z-10 flex max-w-full outline-none data-[enterable=false]:pointer-events-none motion-reduce:data-[visible=false]:hidden"
+        :data-interactive="interactive"
+        class="pxd-popover--wrapper sm:max-w-(--popover-max-width) absolute isolate z-10 flex 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"
       >
         <div
-          class="pxd-popover--container pointer-events-auto relative z-1 w-inherit"
+          class="pxd-popover--container pointer-events-auto relative z-1 w-inherit transform-gpu default-animation-duration default-animation-timing-function"
           :data-position="localPosition"
           :data-transition-type="transitionType"
+          :data-show-transition="configProvider.popoverShowTransition"
         >
           <i v-if="showArrow" ref="arrayRef" class="pxd-popover--arrow absolute z-1 border-solid" />
           <div class="pxd-popover--content" :class="contentClass" :style="contentStyle">
@@ -308,55 +315,101 @@ defineExpose({
 
 <style lang="postcss">
 @keyframes popover-fade-show {
-  0% { opacity: 0; pointer-events: none; }
-  100% { opacity: 1 }
+  0% {
+    opacity: 0;
+    pointer-events: none;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 @keyframes popover-fade-hide {
-  0% { opacity: 1 }
-  100% { opacity: 0; pointer-events: none; }
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    pointer-events: none;
+  }
 }
 @keyframes popover-fade-scale-show {
-  0% { transform: scale(0.95); opacity: 0; pointer-events: none; }
-  100% { transform: scale(1); opacity: 1 }
+  0% {
+    transform: scale(0.95);
+    opacity: 0;
+    pointer-events: none;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 @keyframes popover-fade-scale-hide {
-  0% { transform: scale(1); opacity: 1 }
-  100% { transform: scale(0.95); opacity: 0; pointer-events: none; }
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.95);
+    opacity: 0;
+    pointer-events: none;
+  }
 }
 @keyframes popover-fade-slide-show {
-  0% { transform: translateY(100%); opacity: 0; pointer-events: none; }
-  100% { transform: translateY(0); opacity: 1 }
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+    pointer-events: none;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 @keyframes popover-fade-slide-hide {
-  0% { transform: translateY(0); opacity: 1 }
-  100% { transform: translateY(100%); opacity: 0; pointer-events: none; }
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100%);
+    opacity: 0;
+    pointer-events: none;
+  }
 }
 
 .pxd-popover--container {
-  will-change: transform, opacity;
-  animation: popover-fade-show var(--default-transition-duration) var(--default-transition-timing-function) forwards;
+  animation-name: popover-fade-show;
+  animation-fill-mode: forwards;
+
+  &:hover {
+    will-change: transform, animation;
+  }
+
+  [data-visible='true'] &[data-show-transition='false'] {
+    animation-name: none !important;
+  }
 
-  [data-visible="true"] &[data-transition-type="fade"] {
+  [data-visible='true'] &[data-transition-type='fade'] {
     animation-name: popover-fade-show;
   }
 
-  [data-visible="false"] &[data-transition-type="fade"] {
+  [data-visible='false'] &[data-transition-type='fade'] {
     animation-name: popover-fade-hide;
   }
 
-  [data-visible="true"] &[data-transition-type="fade-scale"] {
+  [data-visible='true'] &[data-transition-type='fade-scale'] {
     animation-name: popover-fade-scale-show;
   }
 
-  [data-visible="false"] &[data-transition-type="fade-scale"] {
+  [data-visible='false'] &[data-transition-type='fade-scale'] {
     animation-name: popover-fade-scale-hide;
   }
 
-  [data-visible="true"] &[data-transition-type="fade-slide"] {
+  [data-visible='true'] &[data-transition-type='fade-slide'] {
     animation-name: popover-fade-slide-show;
   }
 
-  [data-visible="false"] &[data-transition-type="fade-slide"] {
+  [data-visible='false'] &[data-transition-type='fade-slide'] {
     animation-name: popover-fade-slide-hide;
   }
 
@@ -381,7 +434,7 @@ defineExpose({
   }
 
   &[data-position='left'] {
-    transform-origin: right center ;
+    transform-origin: right center;
   }
   &[data-position='left-start'] {
     transform-origin: right top;
@@ -400,12 +453,12 @@ defineExpose({
     transform-origin: left bottom;
   }
 
-  &[data-position="top"] .pxd-popover--arrow,
-  &[data-position="top-start"] .pxd-popover--arrow,
-  &[data-position="top-end"] .pxd-popover--arrow {
+  &[data-position='top'] .pxd-popover--arrow,
+  &[data-position='top-start'] .pxd-popover--arrow,
+  &[data-position='top-end'] .pxd-popover--arrow {
     bottom: -5px;
     border-width: 6px 6px 0;
-    border-color: var(--popover-bg) transparent transparent;
+    border-color: var(--popover-arrow-bg) transparent transparent;
   }
 
   &[data-position='bottom'] .pxd-popover--arrow,
@@ -413,7 +466,7 @@ defineExpose({
   &[data-position='bottom-end'] .pxd-popover--arrow {
     top: -5px;
     border-width: 0 6px 6px;
-    border-color: transparent transparent var(--popover-bg);
+    border-color: transparent transparent var(--popover-arrow-bg);
   }
 
   &[data-position='left'] .pxd-popover--arrow,
@@ -421,7 +474,7 @@ defineExpose({
   &[data-position='left-end'] .pxd-popover--arrow {
     right: -5px;
     border-width: 6px 0 6px 6px;
-    border-color: transparent transparent transparent var(--popover-bg);
+    border-color: transparent transparent transparent var(--popover-arrow-bg);
   }
 
   &[data-position='right'] .pxd-popover--arrow,
@@ -429,7 +482,7 @@ defineExpose({
   &[data-position='right-end'] .pxd-popover--arrow {
     left: -5px;
     border-width: 6px 6px 6px 0;
-    border-color: transparent var(--popover-bg) transparent transparent;
+    border-color: transparent var(--popover-arrow-bg) transparent transparent;
   }
 }
 </style>

package/dist/components/progress/cn.d.ts

@@ -0,0 +1,19 @@
+export declare const progressVariant: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "pxd-progress-bar flex-1 shrink-0 overflow-hidden rounded-full bg-gray-200", {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "pxd-progress-bar flex-1 shrink-0 overflow-hidden rounded-full bg-gray-200", unknown, unknown, undefined>>;

package/dist/components/progress/cn.js

@@ -0,0 +1,14 @@
+import { tv } from "tailwind-variants";
+export const progressVariant = tv({
+  base: "pxd-progress-bar flex-1 shrink-0 overflow-hidden rounded-full bg-gray-200",
+  variants: {
+    size: {
+      sm: "h-2",
+      md: "h-2.5",
+      lg: "h-3.5"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});

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

@@ -20,8 +20,8 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     "onUpdate:modelValue"?: ((args_0: number) => any) | undefined;
 }>, {
     label: boolean | string | number;
-    variant: ComponentVariant | "secondary";
     max: number;
+    variant: ComponentVariant | "secondary";
     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

@@ -3,7 +3,8 @@ import { computed } from "vue";
 import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { useModelValue } from "../../composables/use-model-value";
 import { isTruthyProp } from "../../utils/format";
-import { getColorByThreshold, getFallbackValue } from "../../utils/get";
+import { getColorByThreshold } from "../../utils/get";
+import { progressVariant } from "./cn";
 defineOptions({
   name: "PProgress",
   model: {
@@ -21,12 +22,7 @@ const props = defineProps({
   modelValue: { type: [Number, null], required: false }
 });
 const emits = defineEmits(["change", "update:modelValue"]);
-const config = useConfigProvider();
-const SIZES = {
-  sm: "h-2",
-  md: "h-2.5",
-  lg: "h-3.5"
-};
+const configProvider = useConfigProvider();
 const VARIANTS_COLORS = {
   primary: "var(--color-primary)",
   success: "hsl(var(--color-blue-700-value))",
@@ -47,9 +43,8 @@ const computedLabel = computed(() => {
   }
   return false;
 });
-const computedClass = computed(() => {
-  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 computedClasses = computed(() => {
+  return progressVariant({ size: props.size || configProvider.size });
 });
 const computedColors = computed(() => {
   const { colors, variant } = props;
@@ -68,12 +63,24 @@ const computedProgressBarStyles = computed(() => {
 </script>
 
 <template>
-  <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
+    role="progressbar"
+    class="pxd-progress flex w-full items-center"
+    :aria-valuenow="progress"
+    :aria-valuemin="min"
+    :aria-valuemax="max"
+  >
+    <div :class="computedClasses">
+      <div
+        class="h-full rounded-inherit motion-safe:transition-all"
+        :style="computedProgressBarStyles"
+      />
     </div>
 
-    <span v-if="computedLabel || $slots.default" class="text-sm ml-3 font-mono text-foreground-secondary empty:hidden">
+    <span
+      v-if="computedLabel || $slots.default"
+      class="text-sm ml-3 font-mono text-foreground-secondary empty:hidden"
+    >
       <slot>
         {{ computedLabel }}
       </slot>

package/dist/components/radio/cn.d.ts

@@ -0,0 +1,46 @@
+export declare const radioVariant: import("tailwind-variants").TVReturnType<{
+    checked: {
+        true: {
+            base: string;
+            disabled: string;
+        };
+        false: {
+            base: string;
+            disabled: string;
+        };
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, "pxd-radio--inner size-4 inline-flex items-center justify-center rounded-full border peer-focus-ring after:content-empty after:size-2 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", {
+    checked: {
+        true: {
+            base: string;
+            disabled: string;
+        };
+        false: {
+            base: string;
+            disabled: string;
+        };
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    checked: {
+        true: {
+            base: string;
+            disabled: string;
+        };
+        false: {
+            base: string;
+            disabled: string;
+        };
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, "pxd-radio--inner size-4 inline-flex items-center justify-center rounded-full border peer-focus-ring after:content-empty after:size-2 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", unknown, unknown, undefined>>;

package/dist/components/radio/cn.js

@@ -0,0 +1,42 @@
+import { tv } from "tailwind-variants";
+export const radioVariant = tv({
+  base: "pxd-radio--inner size-4 inline-flex items-center justify-center rounded-full border peer-focus-ring after:content-empty after:size-2 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",
+  variants: {
+    checked: {
+      true: {
+        base: "border-primary bg-background-100 peer-checked:after:scale-100",
+        disabled: "border-gray-500 bg-gray-100 peer-disabled:after:bg-gray-500"
+      },
+      false: {
+        base: "border-gray-alpha-400 bg-background-100 group-hover/radio:bg-gray-200",
+        disabled: "border-gray-500 bg-gray-100"
+      }
+    },
+    disabled: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      checked: true,
+      disabled: false,
+      class: "border-primary bg-background-100 peer-checked:after:scale-100"
+    },
+    {
+      checked: true,
+      disabled: true,
+      class: "border-gray-500 bg-gray-100 peer-disabled:after:bg-gray-500"
+    },
+    {
+      checked: false,
+      disabled: false,
+      class: "border-gray-alpha-400 bg-background-100 group-hover/radio:bg-gray-200"
+    },
+    { checked: false, disabled: true, class: "border-gray-500 bg-gray-100" }
+  ],
+  defaultVariants: {
+    checked: false,
+    disabled: false
+  }
+});

package/dist/components/radio/index.vue

@@ -4,6 +4,7 @@ import { useModelValue } from "../../composables/use-model-value";
 import { useUniqueId } from "../../composables/use-unique-id-context";
 import { useRadioGroupContext } from "../../contexts/radio";
 import { getUniqueId } from "../../utils/uid";
+import { radioVariant } from "./cn";
 defineOptions({
   name: "PRadio",
   model: {
@@ -23,24 +24,16 @@ const uniqueId = getUniqueId();
 const modelValue = useModelValue(props, emits);
 const radioGroupName = useUniqueId("RadioGroupName");
 const radioGroupContext = useRadioGroupContext();
-const isChecked = computed(() => (radioGroupContext?.modelValue ?? modelValue.value) === props.value);
+const isChecked = computed(
+  () => (radioGroupContext?.modelValue ?? modelValue.value) === props.value
+);
 const computedDisabled = computed(() => props.disabled || radioGroupContext?.disabled);
 const computedRequired = computed(() => props.required || radioGroupContext?.required);
-const computedInnerClasses = computed(() => {
-  const classes = [
-    "pxd-radio--inner size-4 inline-flex items-center justify-center rounded-full border peer-focus-ring motion-safe:transition-colors",
-    "after:content-empty after:size-2 after:scale-40 after:rounded-full after:bg-primary after:opacity-0 peer-checked:after:scale-100 peer-checked:after:opacity-100 motion-safe:after:transition-all"
-  ];
-  if (isChecked.value) {
-    classes.push(
-      computedDisabled.value ? "bg-gray-100 border-gray-500 peer-disabled:after:bg-gray-500" : "bg-background-100 border-primary peer-checked:after:scale-100"
-    );
-  } else {
-    classes.push(
-      computedDisabled.value ? "bg-gray-100 border-gray-500" : "bg-background-100 border-gray-alpha-400 group-hover/radio:bg-gray-200"
-    );
-  }
-  return classes.join(" ");
+const computedClasses = computed(() => {
+  return radioVariant({
+    checked: isChecked.value,
+    disabled: computedDisabled.value
+  });
 });
 function onChangeValue() {
   emits("update:modelValue", props.value);
@@ -66,9 +59,9 @@ function onChangeValue() {
       :required="computedRequired"
       :disabled="computedDisabled"
       @change="onChangeValue"
-    >
+    />
 
-    <span aria-hidden="true" :class="computedInnerClasses" />
+    <span aria-hidden="true" :class="computedClasses" />
 
     <span class="text-sm flex-1 shrink-0 empty:hidden">
       <slot>

package/dist/components/resizable/index.vue

@@ -17,7 +17,10 @@ function registerPanel(config) {
   if (existingIndex === -1) {
     panelConfigs.value.push({ ...config, order: orderCounter.value++ });
   } else {
-    panelConfigs.value[existingIndex] = { ...config, order: panelConfigs.value[existingIndex].order };
+    panelConfigs.value[existingIndex] = {
+      ...config,
+      order: panelConfigs.value[existingIndex].order
+    };
   }
   panelConfigs.value.sort((a, b) => a.order - b.order);
   nextTick(() => {
@@ -36,7 +39,10 @@ function registerHandle(config) {
   if (existingIndex === -1) {
     handleConfigs.value.push({ ...config, order: orderCounter.value++ });
   } else {
-    handleConfigs.value[existingIndex] = { ...config, order: handleConfigs.value[existingIndex].order };
+    handleConfigs.value[existingIndex] = {
+      ...config,
+      order: handleConfigs.value[existingIndex].order
+    };
   }
   handleConfigs.value.sort((a, b) => a.order - b.order);
 }

package/dist/components/resizable-handle/index.vue

@@ -27,6 +27,7 @@ function handlePointerMove(e) {
   startPosition = { x: e.clientX, y: e.clientY };
 }
 function handlePointerUp(e) {
+  ;
   e.target.releasePointerCapture(e.pointerId);
   isDragging = false;
 }