v-uixy 1.3.1 → 1.4.0

package/package.json

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

package/templates/assets/css/main.css

@@ -156,6 +156,10 @@
     @apply bg-transparent;
   }
 
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
   .slider::-webkit-slider-thumb {
     @apply relative z-10 h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-solid border-black bg-gray-100 dark:border-gray-100 dark:bg-black;
   }

package/templates/components/Avatar/Avatar.component.vue

@@ -47,7 +47,11 @@
     show.value = false;
   };
 
-  onMounted(() => {
-    show.value = !!props.src;
-  });
+  watch(
+    () => props.src,
+    (src) => {
+      show.value = !!src;
+    },
+    { immediate: true },
+  );
 </script>

package/templates/components/Avatar/Avatar.styles.ts

@@ -8,11 +8,11 @@ export const avatarWrapperStyles = styles(
       squared: "rounded-2",
       default: "",
     },
-  }
+  },
 );
 
 export const avatarImageStyles = styles(
-  "flex aspect-square items-center overflow-hidden text-center text-[0]",
+  "flex aspect-square object-cover items-center overflow-hidden text-center text-[0]",
   {
     show: {
       true: "",
@@ -23,5 +23,5 @@ export const avatarImageStyles = styles(
       squared: "rounded-2",
       default: "",
     },
-  }
+  },
 );

package/templates/components/Button/Button.styles.ts

@@ -1,7 +1,7 @@
 import styles from "~/utils/styles";
 
 export const buttonStyles = styles(
-  "relative cursor-pointer h-8 font-500 transition-all duration-200 ease-in-out hover:shadow-xs flex items-center justify-center gap-2 disabled:pointer-events-none",
+  "relative cursor-pointer h-8 font-500 transition-all duration-200 ease-in-out hover:shadow-xs flex items-center justify-center gap-2 disabled:pointer-events-none border border-transparent",
   {
     variant: {
       primary:
@@ -9,7 +9,7 @@ export const buttonStyles = styles(
       secondary:
         "bg-gray-300 hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-700 dark:text-gray-100 text-black dark:disabled:bg-gray-600 dark:disabled:text-gray-700 disabled:text-gray-500",
       tertiary:
-        "bg-transparent border border-solid border-gray-300 dark:border-gray-800 hover:bg-gray-200 dark:hover:bg-gray-800 text-black dark:text-gray-100 dark:disabled:border-gray-900 dark:disabled:text-gray-500 dark:disabled:bg-gray-800 disabled:bg-gray-300 disabled:text-gray-500 disabled:border-gray-400",
+        "bg-transparent border-solid border-gray-300 dark:border-gray-800 hover:bg-gray-200 dark:hover:bg-gray-800 text-black dark:text-gray-100 dark:disabled:border-gray-900 dark:disabled:text-gray-500 dark:disabled:bg-gray-800 disabled:bg-gray-300 disabled:text-gray-500 disabled:border-gray-400",
       quaternary:
         "dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800 disabled:text-gray-700",
     },
@@ -22,7 +22,7 @@ export const buttonStyles = styles(
       true: "rounded-full",
       false: "rounded-1",
     },
-  }
+  },
 );
 
 export const iconStyles = styles("h-5 w-5 shrink-0", {

package/templates/components/Calendar/Calendar.component.vue

@@ -7,7 +7,7 @@
         size="sm"
         variant="tertiary"
       />
-      <p class="w-[160px] text-center text-sm font-500">
+      <p class="w-40 text-center text-sm font-500">
         {{ MONTHS[selectedMonth] }} {{ selectedYear }}
       </p>
       <uixy-icon-button
@@ -22,7 +22,7 @@
       class="grid w-full grid-cols-7 text-xs text-gray-400 dark:text-gray-700"
     >
       <div v-for="day in adjustedDays" :key="day" class="py-2 text-center">
-        {{ day.slice(0, 2) }}
+        {{ day?.slice(0, 2) }}
       </div>
     </div>
 
@@ -36,9 +36,18 @@
             selected: model?.toDateString?.() === day.date.toDateString(),
             disabled:
               !!props.disabled || day.fromPreviousMonth || day.fromNextMonth,
+            greyedOut:
+              !!day.fromCurrentMonth &&
+              !!props.isDateDisabled &&
+              props.isDateDisabled(day.date),
+            today: today.toDateString() === day.date.toDateString(),
           })
         "
-        :disabled="day.fromPreviousMonth || day.fromNextMonth"
+        :disabled="
+          day.fromPreviousMonth ||
+          day.fromNextMonth ||
+          (!!props.isDateDisabled && props.isDateDisabled(day.date))
+        "
         @click="handleDayClick(day.date)"
       >
         {{ day.day }}
@@ -82,11 +91,13 @@
     "Saturday",
   ];
 
+  const today = new Date();
+
   const selectedYear = ref(props.year ?? new Date().getFullYear());
   const selectedMonth = ref(props.month ?? new Date().getMonth());
 
   const adjustedDays = computed(() =>
-    props.startOfWeek === "Monday" ? [...DAYS.slice(1), DAYS[0]] : DAYS
+    props.startOfWeek === "Monday" ? [...DAYS.slice(1), DAYS[0]] : DAYS,
   );
 
   const getDaysInMonth = (year: number, month: number) =>
@@ -101,11 +112,11 @@
   });
 
   const daysInCurrentMonth = computed(() =>
-    getDaysInMonth(selectedYear.value, selectedMonth.value)
+    getDaysInMonth(selectedYear.value, selectedMonth.value),
   );
 
   const daysInPreviousMonth = computed(() =>
-    getDaysInMonth(selectedYear.value, selectedMonth.value - 1)
+    getDaysInMonth(selectedYear.value, selectedMonth.value - 1),
   );
 
   const prevMonthDaysToShow = computed(() =>
@@ -114,11 +125,11 @@
       date: new Date(
         selectedYear.value,
         selectedMonth.value - 1,
-        daysInPreviousMonth.value - i
+        daysInPreviousMonth.value - i,
       ),
       dayOfWeek: (firstDayOfMonth.value - 1 - i + 7) % 7,
       fromPreviousMonth: true,
-    })).reverse()
+    })).reverse(),
   );
 
   const currentMonthDaysToShow = computed(() =>
@@ -128,18 +139,18 @@
       dayOfWeek: new Date(
         selectedYear.value,
         selectedMonth.value,
-        i + 1
+        i + 1,
       ).getDay(),
       fromCurrentMonth: true,
-    }))
+    })),
   );
 
   const lastDayOfMonth = computed(() =>
     new Date(
       selectedYear.value,
       selectedMonth.value,
-      daysInCurrentMonth.value
-    ).getDay()
+      daysInCurrentMonth.value,
+    ).getDay(),
   );
 
   const nextMonthDaysToShow = computed(() => {
@@ -190,8 +201,8 @@
   }
 
   function handleDayClick(date: Date) {
-    if (!props.disabled) {
-      model.value = date;
-    }
+    if (props.disabled) return;
+    if (props.isDateDisabled?.(date)) return;
+    model.value = date;
   }
 </script>

package/templates/components/Calendar/Calendar.styles.ts

@@ -1,7 +1,7 @@
 import styles from "~/utils/styles";
 
 export const calendarStyles = styles(
-  "flex w-fit flex-col items-center rounded-2 border border-gray-300 bg-gray-100 p-3 shadow-xs dark:border-gray-900 dark:bg-black"
+  "flex w-fit flex-col items-center rounded-2 border border-gray-300 bg-gray-100 p-3 shadow-xs dark:border-gray-900 dark:bg-black",
 );
 
 export const calendarDayStyles = styles(
@@ -9,7 +9,7 @@ export const calendarDayStyles = styles(
   {
     currentMonth: {
       true: "dark:text-gray-300",
-      false: "text-gray-500 dark:text-gray-600",
+      false: "text-gray-400 dark:text-gray-600",
     },
     selected: {
       true: "bg-black text-white hover:bg-black dark:bg-white dark:!text-black dark:hover:bg-white",
@@ -19,5 +19,13 @@ export const calendarDayStyles = styles(
       true: "cursor-default pointer-events-none",
       false: "cursor-pointer",
     },
-  }
+    greyedOut: {
+      true: "opacity-35 cursor-not-allowed pointer-events-none",
+      false: "",
+    },
+    today: {
+      true: "ring-1 ring-gray-400 dark:ring-gray-600",
+      false: "",
+    },
+  },
 );

package/templates/components/Calendar/Calendar.types.ts

@@ -3,4 +3,5 @@ export interface UixyCalendarProps {
   month?: number;
   startOfWeek?: "Sunday" | "Monday";
   disabled?: boolean;
+  isDateDisabled?: (date: Date) => boolean;
 }

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

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

package/templates/components/ColorPicker/ColorPicker.component.vue

@@ -2,7 +2,7 @@
   <uixy-card class="p-2 flex flex-col gap-4">
     <div
       ref="svRef"
-      class="relative cursor-crosshair overflow-hidden rounded-1 w-64 h-48"
+      class="relative cursor-crosshair overflow-hidden rounded-1 min-w-64 h-48"
       :style="svBackgroundStyle"
       @mousedown="onSvMouseDown"
       @touchstart.prevent="onSvTouchStart"
@@ -69,11 +69,11 @@
 
   const rgbToHex8 = (r: number, g: number, b: number, a: number) =>
     `#${componentToHex(r)}${componentToHex(g)}${componentToHex(
-      b
+      b,
     )}${componentToHex(clamp(a, 0, 255))}`;
 
   const hexToRgbA = (
-    hex?: string
+    hex?: string,
   ): {
     r: number;
     g: number;
@@ -162,7 +162,7 @@
   const svRef = ref<HTMLElement | null>(null);
 
   const rgb = computed(() =>
-    hsvToRgb(hue.value, sat.value / 100, val.value / 100)
+    hsvToRgb(hue.value, sat.value / 100, val.value / 100),
   );
 
   const updatingFromModel = ref(false);

package/templates/components/Command/Command.component.vue

@@ -1,5 +1,5 @@
 <template>
-  <uixy-modal v-model="open">
+  <uixy-modal v-model="open" :persistent="props.persistent">
     <uixy-card :class="commandStyles($attrs.class as string)">
       <div class="flex items-center gap-2 p-3">
         <label :for="id">
@@ -22,7 +22,7 @@
         />
       </div>
       <uixy-separator variant="horizontal" />
-      <div class="scrollbar max-h-[320px] overflow-y-auto">
+      <div class="scrollbar max-h-80 overflow-y-auto">
         <template v-for="option in filteredOptions" :key="option.label">
           <template v-if="option.items.length > 0">
             <ul class="flex flex-col gap-2 p-2">
@@ -79,13 +79,13 @@
     props.options.map((option) => ({
       label: option.label,
       items: option.items.filter((item) =>
-        item.label.toLowerCase().includes(input.value?.toLowerCase() ?? "")
+        item.label.toLowerCase().includes(input.value?.toLowerCase() ?? ""),
       ),
-    }))
+    })),
   );
 
   const isEmpty = computed(() =>
-    filteredOptions.value.every((option) => option.items.length === 0)
+    filteredOptions.value.every((option) => option.items.length === 0),
   );
 
   const handleClose = () => {
@@ -93,7 +93,7 @@
   };
 
   const placeholder = computed(
-    () => props.placeholder || "Search or type a command..."
+    () => props.placeholder || "Search or type a command...",
   );
 
   const emptyText = computed(() => props.emptyText || "No results found.");

package/templates/components/Command/Command.types.ts

@@ -16,4 +16,5 @@ export interface UixyCommandProps {
   options: UixyCommandItems[];
   placeholder?: string;
   emptyText?: string;
+  persistent?: boolean;
 }

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

@@ -2,12 +2,12 @@
   <div class="flex flex-col gap-1">
     <div class="relative flex flex-col-reverse gap-1">
       <input
+        ref="inputRef"
         v-model="model"
         :type="props.type ?? 'text'"
         :id
         :disabled="props.disabled"
         :placeholder="props.placeholder"
-        :auto-focus="props.autoFocus"
         :class="inputStyles({ status, icon }, $attrs.class as string)"
         v-bind="filteredAttrs"
       />
@@ -27,29 +27,19 @@
         {{ props.label }}
       </label>
     </div>
-    <animate-presence mode="wait" :initial="false">
-      <motion.div
-        v-if="!!text"
-        class="overflow-hidden"
-        :initial="{ height: 0 }"
-        :animate="{ height: 'auto' }"
-        :exit="{ height: 0 }"
-        :transition="{ duration: 0.1, ease: 'easeInOut' }"
-      >
-        <animate-presence mode="wait" :initial="false">
-          <motion.p
-            :key="status + text"
-            :class="helperStyles({ status })"
-            :initial="{ opacity: 0, y: -4 }"
-            :animate="{ opacity: 1, y: 0 }"
-            :exit="{ opacity: 0, y: 4 }"
-            :transition="{ duration: 0.12, ease: 'easeInOut', delay: 0.1 }"
-          >
-            {{ text }}
-          </motion.p>
-        </animate-presence>
-      </motion.div>
-    </animate-presence>
+    <div v-if="!props.hideHelper" class="h-4">
+      <animate-presence mode="wait" :initial="false">
+        <motion.div
+          :initial="{ opacity: 0, y: '-4px' }"
+          :animate="{ opacity: 1, y: 0 }"
+          :exit="{ opacity: 0, y: '-4px' }"
+          :transition="{ duration: 0.125 }"
+          :key="status"
+        >
+          <p :class="helperStyles({ status })">{{ text }}</p>
+        </motion.div>
+      </animate-presence>
+    </div>
   </div>
 </template>
 
@@ -80,6 +70,8 @@
     return rest;
   });
 
+  const inputRef = ref<HTMLInputElement>();
+
   const model = defineModel<string>();
 
   const instance = getCurrentInstance();
@@ -89,7 +81,7 @@
   const hasIconClickEmit = computed(() => !!instance?.vnode.props?.onIconClick);
 
   const status = computed(() =>
-    props.disabled ? "disabled" : props.status ?? "default"
+    props.disabled ? "disabled" : (props.status ?? "default"),
   );
 
   const text = computed(
@@ -99,10 +91,18 @@
         default: props.helperText,
         disabled: "",
         valid: "",
-      }[props.status ?? "default"])
+      })[props.status ?? "default"],
   );
 
   const icon = computed(() =>
-    props.icon ? props.iconPositon ?? "right" : "none"
+    props.icon ? (props.iconPositon ?? "right") : "none",
   );
+
+  onMounted(() => {
+    if (props.autoFocus) {
+      nextTick(() => inputRef.value?.focus({ preventScroll: true }));
+    }
+  });
+
+  defineExpose({ focus: () => inputRef.value?.focus({ preventScroll: true }) });
 </script>

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

@@ -17,7 +17,7 @@ export const inputStyles = styles(
       right: "pr-8",
       none: "",
     },
-  }
+  },
 );
 
 export const iconStyles = styles(
@@ -41,11 +41,11 @@ export const iconStyles = styles(
       true: "pointer-events-auto cursor-pointer",
       false: "",
     },
-  }
+  },
 );
 
 export const labelStyles = styles(
-  "transition-colors ease-in-out duration-150 text-xs font-500",
+  "transition-colors ease-in-out duration-150 text-sm font-500",
   {
     status: {
       default: "",
@@ -53,7 +53,7 @@ export const labelStyles = styles(
       disabled: "text-gray-500 dark:text-gray-700",
       valid: "",
     },
-  }
+  },
 );
 
 export const helperStyles = styles(
@@ -65,5 +65,5 @@ export const helperStyles = styles(
       disabled: "text-gray-400 dark:text-gray-800",
       valid: "text-gray-600",
     },
-  }
+  },
 );

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

@@ -11,6 +11,7 @@ export interface UixyInputProps {
   helperText?: string;
   errorText?: string;
   autoFocus?: boolean;
+  hideHelper?: boolean;
 }
 
 export interface UixyInputEmits {

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

@@ -11,7 +11,6 @@
           :class="modalStyles($attrs.class as string)"
           data-modal
           @click.self="handleClick"
-          @keydown{esc}="handleClick"
         >
           <motion.div
             :initial="{ scale: 0.8 }"
@@ -32,7 +31,7 @@
   import { modalStyles } from "./Modal.styles";
   import { AnimatePresence, motion } from "motion-v";
 
-  defineProps<UixyModalProps>();
+  const props = defineProps<UixyModalProps>();
 
   defineOptions({
     inheritAttrs: false,
@@ -41,14 +40,30 @@
   const open = defineModel<boolean>();
 
   const handleClick = () => {
+    if (props.persistent) return;
+
     open.value = false;
   };
 
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      handleClick();
+      return;
+    }
+    if (e.key === "Enter") {
+      const target = e.target as HTMLElement;
+      if (target.tagName === "TEXTAREA" || target.tagName === "BUTTON") return;
+      const modalEl = document.querySelector("[data-modal]");
+      const form = modalEl?.querySelector("form");
+      form?.requestSubmit();
+    }
+  };
+
   const toggleSiblingsInert = (enable?: boolean) => {
     if (typeof document === "undefined") return;
 
     const modalEl = document.querySelector(
-      "[data-modal]"
+      "[data-modal]",
     ) as HTMLElement | null;
 
     Array.from(document.body.children).forEach((el) => {
@@ -68,7 +83,16 @@
     open,
     (isOpen) => {
       toggleSiblingsInert(isOpen);
+      if (isOpen) {
+        window.addEventListener("keydown", handleKeyDown);
+      } else {
+        window.removeEventListener("keydown", handleKeyDown);
+      }
     },
-    { immediate: true }
+    { immediate: true },
   );
+
+  onUnmounted(() => {
+    window.removeEventListener("keydown", handleKeyDown);
+  });
 </script>

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

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

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

@@ -27,12 +27,16 @@
 
 <script setup lang="ts">
   import { AnimatePresence, motion } from "motion-v";
+  import { v4 as uuidv4 } from "uuid";
   import { usePosition } from "~/composables";
   import { onWatcherCleanup } from "vue";
   import type { UixyPopoverProps } from "./Popover.types";
 
   const props = defineProps<UixyPopoverProps>();
 
+  const POPOVER_GROUP_EVENT = "uixy:popover-group-open";
+  const instanceId = uuidv4();
+
   const { active, handleOpen, handleLeave, styles, refElement } = usePosition({
     direction: props.direction ?? "bottom",
   });
@@ -45,22 +49,49 @@
       handleLeave();
   };
 
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape") handleLeave();
+  };
+
   watch(
     () => active.value,
-    (_, prevVal) => {
+    (isActive, prevVal) => {
       if (prevVal) return;
 
+      if (isActive && props.group) {
+        window.dispatchEvent(
+          new CustomEvent(POPOVER_GROUP_EVENT, { detail: { id: instanceId } }),
+        );
+      }
+
       requestAnimationFrame(() => {
         window.addEventListener("click", handleClickOutside);
+        window.addEventListener("keydown", handleKeyDown);
       });
 
       onWatcherCleanup(() => {
         window.removeEventListener("click", handleClickOutside);
+        window.removeEventListener("keydown", handleKeyDown);
       });
-    }
+    },
   );
 
+  const handleGroupOpen = (e: Event) => {
+    const event = e as CustomEvent<{ id: string }>;
+    if (event.detail.id !== instanceId) handleLeave();
+  };
+
+  onMounted(() => {
+    if (props.group) {
+      window.addEventListener(POPOVER_GROUP_EVENT, handleGroupOpen);
+    }
+  });
+
   onUnmounted(() => {
     window.removeEventListener("click", handleClickOutside);
+    window.removeEventListener("keydown", handleKeyDown);
+    if (props.group) {
+      window.removeEventListener(POPOVER_GROUP_EVENT, handleGroupOpen);
+    }
   });
 </script>

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

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