v-uixy 1.7.2 → 1.8.1

package/package.json

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

package/templates/components/Checkbox/Checkbox.styles.ts

@@ -23,7 +23,7 @@ export const iconStyles = styles("h-3 w-3", {
   },
 });
 
-export const labelStyles = styles("text-sm", {
+export const labelStyles = styles("text-xs", {
   disabled: {
     true: "text-gray-500 dark:text-gray-600",
     false: "",

package/templates/components/DatePicker/DatePicker.component.vue

@@ -9,14 +9,14 @@
       role="button"
       :tabindex="props.disabled ? -1 : 0"
       :aria-expanded="active"
-      :class="triggerStyles({ status, open: active })"
+      :class="triggerStyles({ status, open: active, size })"
       @click="onTriggerClick"
       @keydown.enter.prevent="onTriggerClick"
       @keydown.space.prevent="onTriggerClick"
     >
       <uixy-icon
         :name="props.icon ?? 'calendar'"
-        :class="triggerIconStyles({ disabled: props.disabled })"
+        :class="triggerIconStyles({ disabled: props.disabled, size })"
       />
       <span
         :class="
@@ -28,7 +28,7 @@
       <uixy-icon
         v-if="model && !props.disabled"
         name="close"
-        class="h-4 w-4 shrink-0 cursor-pointer text-gray-400 hover:text-black dark:text-gray-600 dark:hover:text-white"
+        :class="closeIconStyles({ size })"
         @click.stop="clear"
       />
     </div>
@@ -122,6 +122,7 @@
     triggerStyles,
     triggerValueStyles,
     triggerIconStyles,
+    closeIconStyles,
     labelStyles,
     helperStyles,
     panelStyles,
@@ -156,6 +157,8 @@
     return props.status ?? "default";
   });
 
+  const size = computed(() => props.size ?? "md");
+
   const helperText = computed(() => {
     if (status.value === "error") return props.errorText ?? "";
 

package/templates/components/DatePicker/DatePicker.styles.ts

@@ -1,7 +1,7 @@
 import styles from "~/utils/styles";
 
 export const triggerStyles = styles(
-  "relative flex w-full items-center gap-2 cursor-pointer transition-colors ease-in-out duration-150 border border-gray-300 dark:border-gray-900 rounded-1 pl-3 pr-3 py-2 text-sm min-h-[38px] outline-offset-1 outline-gray-300 dark:outline-gray-800 select-none",
+  "relative flex w-full items-center gap-2 cursor-pointer transition-colors ease-in-out duration-150 border border-gray-300 dark:border-gray-900 rounded-1 outline-offset-1 outline-gray-300 dark:outline-gray-800 select-none",
   {
     status: {
       default:
@@ -15,7 +15,12 @@ export const triggerStyles = styles(
       true: "border-gray-500 dark:border-gray-600",
       false: "",
     },
-  }
+    size: {
+      sm: "pl-2.5 pr-2.5 py-1.5 text-xs min-h-[32px]",
+      md: "pl-3 pr-3 py-2 text-sm min-h-[38px]",
+      xl: "pl-3.5 pr-3.5 py-2.5 text-base min-h-[42px]",
+    },
+  },
 );
 
 export const triggerValueStyles = styles("flex-1 truncate text-left", {
@@ -30,13 +35,29 @@ export const triggerValueStyles = styles("flex-1 truncate text-left", {
 });
 
 export const triggerIconStyles = styles(
-  "h-4 w-4 shrink-0 text-gray-400 dark:text-gray-600",
+  "shrink-0 text-gray-400 dark:text-gray-600",
   {
     disabled: {
       true: "dark:text-gray-700",
       false: "",
     },
-  }
+    size: {
+      sm: "h-3.5 w-3.5",
+      md: "h-4 w-4",
+      xl: "h-5 w-5",
+    },
+  },
+);
+
+export const closeIconStyles = styles(
+  "shrink-0 cursor-pointer text-gray-400 hover:text-black dark:text-gray-600 dark:hover:text-white",
+  {
+    size: {
+      sm: "h-3.5 w-3.5",
+      md: "h-4 w-4",
+      xl: "h-5 w-5",
+    },
+  },
 );
 
 export const labelStyles = styles(
@@ -47,7 +68,7 @@ export const labelStyles = styles(
       error: "text-error-600",
       disabled: "text-gray-500 dark:text-gray-700",
     },
-  }
+  },
 );
 
 export const helperStyles = styles(
@@ -58,17 +79,15 @@ export const helperStyles = styles(
       error: "text-error-600",
       disabled: "text-gray-400 dark:text-gray-800",
     },
-  }
+  },
 );
 
 export const panelStyles = styles(
-  "flex flex-col gap-3 rounded-2 border border-gray-300 bg-gray-100 p-3 shadow-lg dark:border-gray-900 dark:bg-black"
+  "flex flex-col gap-3 rounded-2 border border-gray-300 bg-gray-100 p-3 shadow-lg dark:border-gray-900 dark:bg-black",
 );
 
 export const sectionLabelStyles = styles(
-  "text-xs font-500 text-gray-500 dark:text-gray-600"
+  "text-xs font-500 text-gray-500 dark:text-gray-600",
 );
 
-export const footerStyles = styles(
-  "flex items-center justify-between gap-2"
-);
+export const footerStyles = styles("flex items-center justify-between gap-2");

package/templates/components/DatePicker/DatePicker.types.ts

@@ -1,4 +1,5 @@
 import type { IconName } from "~/types/icons";
+import type { UixyFieldSize } from "~/types/field";
 
 export interface UixyDatePickerProps {
   placeholder?: string;
@@ -14,4 +15,5 @@ export interface UixyDatePickerProps {
   isDateDisabled?: (date: Date) => boolean;
   direction?: "top" | "bottom";
   closeOnSelect?: boolean;
+  size?: UixyFieldSize;
 }

package/templates/components/DateRangePicker/DateRangePicker.component.vue

@@ -9,14 +9,14 @@
       role="button"
       :tabindex="props.disabled ? -1 : 0"
       :aria-expanded="active"
-      :class="triggerStyles({ status, open: active })"
+      :class="triggerStyles({ status, open: active, size })"
       @click="onTriggerClick"
       @keydown.enter.prevent="onTriggerClick"
       @keydown.space.prevent="onTriggerClick"
     >
       <uixy-icon
         :name="props.icon ?? 'calendar'"
-        :class="triggerIconStyles({ disabled: props.disabled })"
+        :class="triggerIconStyles({ disabled: props.disabled, size })"
       />
       <span
         :class="
@@ -31,7 +31,7 @@
       <uixy-icon
         v-if="hasValue && !props.disabled"
         name="close"
-        class="h-4 w-4 shrink-0 cursor-pointer text-gray-400 hover:text-black dark:text-gray-600 dark:hover:text-white"
+        :class="closeIconStyles({ size })"
         @click.stop="clear"
       />
     </div>
@@ -145,6 +145,7 @@
     triggerStyles,
     triggerValueStyles,
     triggerIconStyles,
+    closeIconStyles,
     labelStyles,
     helperStyles,
     panelStyles,
@@ -187,6 +188,8 @@
     return props.status ?? "default";
   });
 
+  const size = computed(() => props.size ?? "md");
+
   const helperText = computed(() => {
     if (status.value === "error") return props.errorText ?? "";
 

package/templates/components/DateRangePicker/DateRangePicker.types.ts

@@ -1,4 +1,5 @@
 import type { IconName } from "~/types/icons";
+import type { UixyFieldSize } from "~/types/field";
 
 export interface UixyDateRange {
   start: Date | null;
@@ -19,4 +20,5 @@ export interface UixyDateRangePickerProps {
   isDateDisabled?: (date: Date) => boolean;
   direction?: "top" | "bottom";
   closeOnSelect?: boolean;
+  size?: UixyFieldSize;
 }

package/templates/components/Input/Input.component.vue

@@ -8,7 +8,7 @@
         :id
         :disabled="props.disabled"
         :placeholder="props.placeholder"
-        :class="inputStyles({ status, icon }, $attrs.class as string)"
+        :class="inputStyles({ status, icon, size }, $attrs.class as string)"
         v-bind="filteredAttrs"
       />
       <uixy-icon
@@ -19,6 +19,7 @@
           iconStyles({
             status,
             icon,
+            size,
             targetable: !!hasIconClickEmit,
           })
         "
@@ -94,6 +95,8 @@
     props.disabled ? "disabled" : (props.status ?? "default"),
   );
 
+  const size = computed(() => props.size ?? "md");
+
   const text = computed(
     () =>
       ({

package/templates/components/Input/Input.styles.ts

@@ -1,7 +1,7 @@
 import styles from "~/utils/styles";
 
 export const inputStyles = styles(
-  "peer transition-colors ease-in-out duration-150 border border-gray-300 dark:border-gray-900 rounded-1 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-700 dark:outline-gray-800 outline-offset-1 outline-gray-300",
+  "peer transition-colors ease-in-out duration-150 border border-gray-300 dark:border-gray-900 rounded-1 placeholder:text-gray-500 dark:placeholder:text-gray-700 dark:outline-gray-800 outline-offset-1 outline-gray-300",
   {
     status: {
       default:
@@ -12,16 +12,27 @@ export const inputStyles = styles(
       valid:
         "bg-white dark:bg-gray-1000 focus-visible:border-gray-500 dark:focus-visible:border-gray-600",
     },
+    size: {
+      sm: "px-2.5 py-1.5 text-xs",
+      md: "px-3 py-2 text-sm",
+      xl: "px-3.5 py-2.5 text-base",
+    },
     icon: {
       left: "pl-8",
       right: "pr-8",
       none: "",
     },
   },
+  {
+    "size.sm+icon.left": "pl-7",
+    "size.sm+icon.right": "pr-7",
+    "size.xl+icon.left": "pl-9",
+    "size.xl+icon.right": "pr-9",
+  },
 );
 
 export const iconStyles = styles(
-  "select-none pointer-events-none h-5 w-5 absolute bottom-2 transition-colors duration-150 ease-in-out",
+  "select-none pointer-events-none absolute transition-colors duration-150 ease-in-out",
   {
     status: {
       default:
@@ -32,6 +43,11 @@ export const iconStyles = styles(
       valid:
         "text-gray-400 peer-focus:text-black hover:text-black dark:text-gray-700 dark:peer-focus:text-gray-500 dark:hover:text-gray-500",
     },
+    size: {
+      sm: "h-4 w-4 bottom-1.5",
+      md: "h-5 w-5 bottom-2",
+      xl: "h-5 w-5 bottom-2.5",
+    },
     icon: {
       left: "left-2",
       right: "right-2",
@@ -42,6 +58,12 @@ export const iconStyles = styles(
       false: "",
     },
   },
+  {
+    "size.sm+icon.left": "left-1.5",
+    "size.sm+icon.right": "right-1.5",
+    "size.xl+icon.left": "left-2.5",
+    "size.xl+icon.right": "right-2.5",
+  },
 );
 
 export const labelStyles = styles(

package/templates/components/Input/Input.types.ts

@@ -1,4 +1,5 @@
 import type { IconName } from "~/types/icons";
+import type { UixyFieldSize } from "~/types/field";
 
 export interface UixyInputProps {
   status?: "valid" | "error" | "default";
@@ -11,6 +12,7 @@ export interface UixyInputProps {
   helperText?: string;
   errorText?: string;
   autoFocus?: boolean;
+  size?: UixyFieldSize;
 }
 
 export interface UixyInputEmits {

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/components/Select/Select.component.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col gap-1">
     <div class="relative flex flex-col-reverse gap-1" ref="refOptions">
       <div
-        :class="selectStyles({ status }, $attrs.class as string)"
+        :class="selectStyles({ status, size }, $attrs.class as string)"
         :tabIndex="props.disabled ? -1 : 0"
         :auto-focus="props.autoFocus"
         ref="refTrigger"
@@ -37,17 +37,17 @@
         <uixy-icon
           v-if="props.deselectable && !props.multiple && model"
           name="close"
-          class="absolute right-7 top-1/2 h-4 w-4 -translate-y-1/2 cursor-pointer z-10 text-gray-500 dark:text-gray-600 hover:text-black dark:hover:text-gray-400"
+          :class="deselectIconStyles({ size })"
           @click.stop="handleDeselect"
         />
-        <uixy-icon name="chevron-down" :class="iconStyles({ open })" />
+        <uixy-icon name="chevron-down" :class="iconStyles({ open, size })" />
       </div>
 
       <teleport to="body">
         <animate-presence>
           <motion.div
             v-if="open && !props.disabled"
-            class="scrollbar z-50 max-h-60 overflow-y-auto rounded-1 border border-gray-300 bg-white p-1 text-sm shadow-sm dark:border-gray-900 dark:bg-gray-1000"
+            :class="dropdownPanelStyles({ size })"
             :style="dropdownStyles"
             :initial="{ opacity: 0, y: -4, scale: 0.98 }"
             :animate="{ opacity: 1, y: 0, scale: 1 }"
@@ -63,6 +63,7 @@
                   icon="search"
                   iconPositon="right"
                   placeholder="Search..."
+                  :size="size"
                 />
               </div>
 
@@ -81,6 +82,7 @@
                     :multiple="props.multiple"
                     :search-term="search"
                     :original-options="props.options"
+                    :size="size"
                     @toggle-expand="toggleExpand"
                     @select="handleClick"
                   />
@@ -88,7 +90,12 @@
 
                 <li
                   v-if="filteredOptions.length === 0"
-                  class="px-3 text-center dark:text-gray-600"
+                  :class="
+                    listItemPaddingStyles(
+                      { size },
+                      'text-center dark:text-gray-600',
+                    )
+                  "
                 >
                   No results found
                 </li>
@@ -103,6 +110,7 @@
                     itemStyles({
                       selected: isSelected(option),
                       disabled: !!option.disabled,
+                      size,
                     })
                   "
                   @keydown="handleKeydownOption($event, option)"
@@ -112,13 +120,18 @@
                   <uixy-icon
                     v-if="isSelected(option)"
                     name="check"
-                    class="absolute right-2 top-2 size-4"
+                    :class="checkIconStyles({ size })"
                   />
                 </li>
 
                 <li
                   v-if="customAddVisible"
-                  class="relative py-2 px-3 rounded-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-900 text-gray-500 dark:text-gray-600"
+                  :class="
+                    listItemPaddingStyles(
+                      { size },
+                      'relative rounded-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-900 text-gray-500 dark:text-gray-600',
+                    )
+                  "
                   @click="handleCustomAdd"
                 >
                   Add: "{{ search }}"
@@ -126,7 +139,12 @@
 
                 <li
                   v-if="filteredOptions.length === 0 && !customAddVisible"
-                  class="px-3 text-center dark:text-gray-600"
+                  :class="
+                    listItemPaddingStyles(
+                      { size },
+                      'text-center dark:text-gray-600',
+                    )
+                  "
                 >
                   No results found
                 </li>
@@ -174,6 +192,10 @@
     itemStyles,
     helperStyles,
     badgesWrapperStyles,
+    deselectIconStyles,
+    dropdownPanelStyles,
+    listItemPaddingStyles,
+    checkIconStyles,
   } from "./Select.styles";
   import type { UixySelectEmits, UixySelectProps } from "./Select.types";
   import { UixyBadge } from "../Badge";
@@ -232,9 +254,13 @@
     handleCustomAdd,
   } = useSelect<T>(props, model as Ref<T>, emits, refDropdownEl);
 
+  let positionRequestId = 0;
+
   const updateDropdownPosition = async () => {
     if (!open.value || props.disabled) return;
 
+    const requestId = ++positionRequestId;
+
     await nextTick();
     await new Promise<void>((r) => requestAnimationFrame(() => r()));
 
@@ -274,6 +300,8 @@
     const maxLeft = scrollX + window.innerWidth - width - pad;
     left = Math.min(Math.max(minLeft, left), Math.max(minLeft, maxLeft));
 
+    if (requestId !== positionRequestId) return;
+
     dropdownStyles.value = {
       position: "absolute",
       top: `${Math.round(top)}px`,
@@ -290,6 +318,13 @@
     void updateDropdownPosition();
   };
 
+  const dropdownResizeObserver =
+    typeof ResizeObserver !== "undefined"
+      ? new ResizeObserver(() => {
+          void updateDropdownPosition();
+        })
+      : null;
+
   watch(
     () => open.value,
     (isOpen) => {
@@ -308,13 +343,25 @@
         window.addEventListener("scroll", onAnyScroll, true);
       }
 
+      if (dropdownResizeObserver) {
+        nextTick(() => {
+          if (refDropdownEl.value)
+            dropdownResizeObserver.observe(refDropdownEl.value);
+        });
+      }
+
       onWatcherCleanup(() => {
         window.removeEventListener("resize", onResize);
         window.removeEventListener("scroll", onAnyScroll, true);
+        dropdownResizeObserver?.disconnect();
       });
     },
   );
 
+  onUnmounted(() => {
+    dropdownResizeObserver?.disconnect();
+  });
+
   onMounted(() => {
     if (props.autoOpen && !props.disabled) {
       const delayMs = (props.delay ?? 0) * 1000;
@@ -352,6 +399,8 @@
     props.disabled ? "disabled" : (props.status ?? "default"),
   );
 
+  const size = computed(() => props.size ?? "md");
+
   const text = computed(
     () =>
       ({

package/templates/components/Select/Select.styles.ts

@@ -1,7 +1,7 @@
 import styles from "~/utils/styles";
 
 export const selectStyles = styles(
-  "relative select-none peer transition-colors ease-in-out duration-150 border border-gray-300 dark:border-gray-900 rounded-1 pl-3 pr-6 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-700 dark:outline-gray-800 min-h-[38px] outline-offset-1 outline-gray-300",
+  "relative select-none peer transition-colors ease-in-out duration-150 border border-gray-300 dark:border-gray-900 rounded-1 placeholder:text-gray-500 dark:placeholder:text-gray-700 dark:outline-gray-800 outline-offset-1 outline-gray-300",
   {
     status: {
       default:
@@ -13,16 +13,37 @@ export const selectStyles = styles(
       valid:
         "bg-white dark:bg-gray-1000 focus-visible:border-gray-500 dark:focus-visible:border-gray-600 cursor-pointer",
     },
+    size: {
+      sm: "pl-2.5 pr-5 py-1.5 text-xs min-h-[32px]",
+      md: "pl-3 pr-6 py-2 text-sm min-h-[38px]",
+      xl: "pl-3.5 pr-7 py-2.5 text-base min-h-[42px]",
+    },
   },
 );
 
 export const iconStyles = styles(
-  "pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 select-none transition-transform duration-200 ease-in-out",
+  "pointer-events-none absolute top-1/2 -translate-y-1/2 select-none transition-transform duration-200 ease-in-out",
   {
     open: {
       true: "rotate-180",
       false: "",
     },
+    size: {
+      sm: "h-3.5 w-3.5 right-1.5",
+      md: "h-4 w-4 right-2",
+      xl: "h-4 w-4 right-2.5",
+    },
+  },
+);
+
+export const deselectIconStyles = styles(
+  "absolute top-1/2 -translate-y-1/2 cursor-pointer z-10 text-gray-500 dark:text-gray-600 hover:text-black dark:hover:text-gray-400",
+  {
+    size: {
+      sm: "h-3.5 w-3.5 right-6",
+      md: "h-4 w-4 right-7",
+      xl: "h-4 w-4 right-8",
+    },
   },
 );
 
@@ -40,7 +61,7 @@ export const labelStyles = styles(
 );
 
 export const itemStyles = styles(
-  "relative py-2 px-3 rounded-1 cursor-pointer focus-visible:bg-gray-200 focus-visible:border-gray-100 hover:bg-gray-200 dark:focus-visible:bg-gray-900 dark:hover:bg-gray-900 dark:focus-visible:border-gray-600",
+  "relative rounded-1 cursor-pointer focus-visible:bg-gray-200 focus-visible:border-gray-100 hover:bg-gray-200 dark:focus-visible:bg-gray-900 dark:hover:bg-gray-900 dark:focus-visible:border-gray-600",
   {
     selected: {
       true: "bg-gray-200 dark:bg-gray-900",
@@ -50,9 +71,41 @@ export const itemStyles = styles(
       true: "pointer-events-none text-gray-500 dark:text-gray-700",
       false: "",
     },
+    size: {
+      sm: "py-1.5 px-2.5",
+      md: "py-2 px-3",
+      xl: "py-2.5 px-3.5",
+    },
   },
 );
 
+export const listItemPaddingStyles = styles("", {
+  size: {
+    sm: "py-1.5 px-2.5",
+    md: "py-2 px-3",
+    xl: "py-2.5 px-3.5",
+  },
+});
+
+export const dropdownPanelStyles = styles(
+  "scrollbar z-50 max-h-60 overflow-y-auto rounded-1 border border-gray-300 bg-white p-1 shadow-sm dark:border-gray-900 dark:bg-gray-1000",
+  {
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      xl: "text-base",
+    },
+  },
+);
+
+export const checkIconStyles = styles("absolute", {
+  size: {
+    sm: "size-3.5 top-1.5 right-1.5",
+    md: "size-4 top-2 right-2",
+    xl: "size-5 top-2.5 right-2.5",
+  },
+});
+
 export const helperStyles = styles(
   "transition-colors ease-in-out duration-150 text-xs",
   {

package/templates/components/Select/Select.types.ts

@@ -1,3 +1,5 @@
+import type { UixyFieldSize } from "~/types/field";
+
 export interface UixySelectOptionType {
   label: string;
   value?: string;
@@ -38,4 +40,5 @@ export type UixySelectProps = {
   allowCustom?: boolean;
   clearSearchOnSelect?: boolean;
   followOnScroll?: boolean;
+  size?: UixyFieldSize;
 } & (UixyMultipleSelectProps | UixySingleSelectProps);

package/templates/components/Select/SelectTreeItem.vue

@@ -6,6 +6,7 @@
         itemStyles({
           selected: isSelected(option),
           disabled: !!option.disabled,
+          size: props.size ?? 'md',
         })
       "
       :style="{
@@ -69,6 +70,7 @@
           :multiple="multiple"
           :search-term="searchTerm"
           :original-options="originalOptions"
+          :size="size"
           @toggle-expand="$emit('toggle-expand', $event)"
           @select="$emit('select', $event)"
         />
@@ -81,6 +83,7 @@
   import { motion, AnimatePresence } from "motion-v";
   import { itemStyles } from "./Select.styles";
   import type { UixySelectOptionType } from "./Select.types";
+  import type { UixyFieldSize } from "~/types/field";
   import { UixyIcon } from "../Icon";
 
   const props = defineProps<{
@@ -93,6 +96,7 @@
     multiple?: boolean;
     searchTerm?: string;
     originalOptions?: UixySelectOptionType[];
+    size?: UixyFieldSize;
   }>();
 
   const emit = defineEmits<{

package/templates/components/Textarea/Textarea.component.vue

@@ -11,7 +11,7 @@
         :max-length="props.maxLength"
         :class="
           textareaStyles(
-            { status, noResize: !!props.noResize },
+            { status, noResize: !!props.noResize, size },
             $attrs.class as string,
           )
         "
@@ -74,6 +74,8 @@
     props.disabled ? "disabled" : (props.status ?? "default"),
   );
 
+  const size = computed(() => props.size ?? "md");
+
   const text = computed(
     () =>
       ({

package/templates/components/Textarea/Textarea.styles.ts

@@ -1,7 +1,7 @@
 import styles from "~/utils/styles";
 
 export const textareaStyles = styles(
-  "peer transition-colors ease-in-out duration-150 border border-gray-300 dark:border-gray-900 rounded-1 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-700 dark:outline-gray-800 outline-offset-1 outline-gray-300 scrollbar",
+  "peer transition-colors ease-in-out duration-150 border border-gray-300 dark:border-gray-900 rounded-1 placeholder:text-gray-500 dark:placeholder:text-gray-700 dark:outline-gray-800 outline-offset-1 outline-gray-300 scrollbar",
   {
     status: {
       default:
@@ -13,6 +13,11 @@ export const textareaStyles = styles(
       valid:
         "bg-white dark:bg-gray-1000 focus-visible:border-gray-500 dark:focus-visible:border-gray-600",
     },
+    size: {
+      sm: "px-2.5 py-1.5 text-xs",
+      md: "px-3 py-2 text-sm",
+      xl: "px-3.5 py-2.5 text-base",
+    },
     noResize: {
       true: "resize-none",
       false: "",

package/templates/components/Textarea/Textarea.types.ts

@@ -1,3 +1,5 @@
+import type { UixyFieldSize } from "~/types/field";
+
 export interface UixyTextareaProps {
   status?: "valid" | "error" | "default";
   label?: string;
@@ -10,4 +12,5 @@ export interface UixyTextareaProps {
   noResize?: boolean;
   rows?: number;
   maxLength?: number;
+  size?: UixyFieldSize;
 }

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);
   });
 

package/templates/types/field.ts

@@ -0,0 +1 @@
+export type UixyFieldSize = "sm" | "md" | "xl";