v-uixy 1.8.0 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-uixy",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "private": false,
   "author": {
     "name": "Alan Haber",

package/templates/components/Modal/Modal.component.vue

@@ -13,10 +13,12 @@
           @click.self="handleClick"
         >
           <motion.div
+            class="flex w-full justify-center"
             :initial="{ scale: 0.8 }"
             :animate="{ scale: 1 }"
             :exit="{ scale: 0.8 }"
             :transition="{ duration: 0.15, ease: 'easeInOut' }"
+            @click.self="handleClick"
           >
             <slot />
           </motion.div>
@@ -40,7 +42,7 @@
   const open = defineModel<boolean>();
 
   const handleClick = () => {
-    if (props.persistent) return;
+    if (props.persistent || props.loading) return;
 
     open.value = false;
   };

package/templates/components/Modal/Modal.styles.ts

@@ -1,7 +1,7 @@
 import styles from "~/utils/styles";
 
 const modalStyles = styles(
-  "fixed left-0 top-0 z-20 flex size-full items-center justify-center bg-white/5 backdrop-blur-[2px] dark:bg-gray-900/5"
+  "fixed left-0 top-0 z-[60] flex size-full items-center justify-center bg-white/5 backdrop-blur-[2px] dark:bg-gray-900/5"
 );
 
 export { modalStyles };

package/templates/components/Modal/Modal.types.ts

@@ -1,3 +1,4 @@
 export interface UixyModalProps {
   persistent?: boolean;
+  loading?: boolean;
 }

package/templates/components/Popover/Popover.component.vue

@@ -39,6 +39,7 @@
 
   const { active, handleOpen, handleLeave, styles, refElement } = usePosition({
     direction: props.direction ?? "bottom",
+    align: props.align ?? "center",
   });
 
   const handleClickOutside = (e: MouseEvent) => {

package/templates/components/Popover/Popover.types.ts

@@ -1,5 +1,6 @@
 export interface UixyPopoverProps {
   direction?: "top" | "bottom";
+  align?: "center" | "start";
   closeOnClick?: boolean;
   group?: string;
 }

package/templates/components/SegmentedControl/SegmentedControl.component.vue

@@ -14,6 +14,7 @@
       type="button"
       role="tab"
       :aria-selected="model === option.value"
+      :aria-label="option.ariaLabel"
       :disabled="props.disabled || option.disabled"
       :class="
         segmentStyles({

package/templates/components/SegmentedControl/SegmentedControl.types.ts

@@ -5,6 +5,7 @@ export interface UixySegmentedOption {
   value: string | number;
   icon?: IconName;
   disabled?: boolean;
+  ariaLabel?: string;
 }
 
 export interface UixySegmentedControlProps {

package/templates/composables/usePosition.ts

@@ -1,9 +1,11 @@
 import { ref, computed, watch, onBeforeUnmount, nextTick, type Ref } from "vue";
 
 type Direction = "top" | "bottom";
+type Align = "center" | "start";
 
 interface UsePositionOptions {
   direction?: Direction;
+  align?: Align;
 }
 
 const GAP = 6;
@@ -17,7 +19,10 @@ function hasFixedParent(el: HTMLElement | null): boolean {
   return false;
 }
 
-export function usePosition({ direction = "bottom" }: UsePositionOptions) {
+export function usePosition({
+  direction = "bottom",
+  align = "center",
+}: UsePositionOptions) {
   const refElement = ref<HTMLElement>();
 
   const active = ref(false);
@@ -26,7 +31,7 @@ export function usePosition({ direction = "bottom" }: UsePositionOptions) {
   const baseStyles = computed(() => ({
     position: hasFixedParent(target.value) ? "fixed" : "absolute",
     width: "max-content",
-    zIndex: 20,
+    zIndex: 70,
   }));
 
   const styles = ref<Record<string, string | number>>({
@@ -65,7 +70,10 @@ export function usePosition({ direction = "bottom" }: UsePositionOptions) {
         ? targetRect.top - tooltipRect.height - GAP + scrollY
         : targetRect.bottom + GAP + scrollY;
 
-    let left = targetRect.left + targetRect.width / 2 - tooltipRect.width / 2;
+    let left =
+      align === "start"
+        ? targetRect.left
+        : targetRect.left + targetRect.width / 2 - tooltipRect.width / 2;
     const newStyles: Record<string, string | number> = {
       ...baseStyles.value,
       top,
@@ -87,13 +95,31 @@ export function usePosition({ direction = "bottom" }: UsePositionOptions) {
     };
   };
 
+  let resizeObserver: ResizeObserver | null = null;
+
+  const observeResize = () => {
+    if (typeof ResizeObserver === "undefined") return;
+    resizeObserver = new ResizeObserver(() => {
+      void updatePosition();
+    });
+    if (target.value) resizeObserver.observe(target.value);
+    if (refElement.value) resizeObserver.observe(refElement.value);
+  };
+
+  const unobserveResize = () => {
+    resizeObserver?.disconnect();
+    resizeObserver = null;
+  };
+
   watch(
-    [active, () => direction],
+    [active, () => direction, () => align],
     ([isActive]) => {
       if (isActive) {
         updatePosition();
+        observeResize();
         window.addEventListener("resize", updatePosition);
       } else {
+        unobserveResize();
         window.removeEventListener("resize", updatePosition);
       }
     },
@@ -101,6 +127,7 @@ export function usePosition({ direction = "bottom" }: UsePositionOptions) {
   );
 
   onBeforeUnmount(() => {
+    unobserveResize();
     window.removeEventListener("resize", updatePosition);
   });