v-uixy 1.5.0 → 1.7.0

package/package.json

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

package/templates/components/Alert/Alert.component.vue

@@ -22,6 +22,8 @@
               v-bind="alert"
               :key="alert.id"
               @close-alert="close(alert.id)"
+              @pause-timer="pauseTimer(alert.id)"
+              @resume-timer="resumeTimer(alert.id)"
             />
           </motion.li>
         </animate-presence>
@@ -41,9 +43,25 @@
 
   const alerts = ref<UixyAlertItemProps[]>([]);
 
-  const timeouts = reactive<
-    { id: string; timeout: ReturnType<typeof setTimeout> }[]
-  >([]);
+  const ALERT_DURATION = 8000;
+
+  interface AlertTimeout {
+    id: string;
+    timeout: ReturnType<typeof setTimeout> | null;
+    remaining: number;
+    startedAt: number;
+  }
+
+  const timeouts = reactive<AlertTimeout[]>([]);
+
+  const startTimeout = (entry: AlertTimeout) => {
+    entry.startedAt = Date.now();
+    entry.timeout = setTimeout(() => {
+      alerts.value = alerts.value.filter((a) => a.id !== entry.id);
+      const index = timeouts.findIndex((t) => t.id === entry.id);
+      if (index !== -1) timeouts.splice(index, 1);
+    }, entry.remaining);
+  };
 
   const push = (alert: Omit<UixyAlertItemProps, "id">) => {
     const id = uuidv4();
@@ -56,20 +74,25 @@
       },
     ];
 
-    timeouts.push({
+    const entry: AlertTimeout = {
       id,
-      timeout: setTimeout(() => {
-        alerts.value = alerts.value.filter((a) => a.id !== id);
-      }, 8000),
-    });
+      timeout: null,
+      remaining: ALERT_DURATION,
+      startedAt: Date.now(),
+    };
+
+    timeouts.push(entry);
+    startTimeout(entry);
   };
 
   const close = (id: string) => {
     alerts.value = alerts.value.filter((alert) => {
       if (alert.id === id) {
-        const timeout = timeouts.find((t) => t.id === id);
-        if (timeout) {
-          clearTimeout(timeout.timeout);
+        const index = timeouts.findIndex((t) => t.id === id);
+        if (index !== -1) {
+          const timeout = timeouts[index];
+          if (timeout.timeout) clearTimeout(timeout.timeout);
+          timeouts.splice(index, 1);
         }
         return false;
       }
@@ -77,6 +100,25 @@
     });
   };
 
+  const pauseTimer = (id: string) => {
+    const entry = timeouts.find((t) => t.id === id);
+    if (!entry || !entry.timeout) return;
+
+    clearTimeout(entry.timeout);
+    entry.timeout = null;
+    entry.remaining = Math.max(
+      entry.remaining - (Date.now() - entry.startedAt),
+      0,
+    );
+  };
+
+  const resumeTimer = (id: string) => {
+    const entry = timeouts.find((t) => t.id === id);
+    if (!entry || entry.timeout) return;
+
+    startTimeout(entry);
+  };
+
   provide("push-alert", push);
   provide("close-alert", close);
 </script>

package/templates/components/Alert/Alert.types.ts

@@ -15,4 +15,6 @@ export interface UixyAlertItemProps {
 
 export interface UixyAlertItemEmits {
   (event: "close-alert"): void;
+  (event: "pause-timer"): void;
+  (event: "resume-timer"): void;
 }

package/templates/components/Alert/AlertItem.component.vue

@@ -1,6 +1,8 @@
 <template>
   <uixy-card
     class="relative flex w-full items-center justify-between gap-8 overflow-hidden bg-gray-200 py-4 shadow-xs dark:bg-black"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
   >
     <div class="flex gap-4">
       <uixy-icon v-if="props.icon" :name="props.icon" class="size-6 shrink-0" />
@@ -34,7 +36,12 @@
 </template>
 
 <script setup lang="ts">
-  import { motion, useMotionValue, animate } from "motion-v";
+  import {
+    motion,
+    useMotionValue,
+    animate,
+    type AnimationPlaybackControls,
+  } from "motion-v";
   import { UixyButton, UixyIconButton, UixyIcon, UixyCard } from "..";
   import type { UixyAlertItemProps, UixyAlertItemEmits } from "./Alert.types";
 
@@ -44,10 +51,22 @@
 
   const width = useMotionValue("100%");
 
+  let controls: AnimationPlaybackControls | undefined;
+
   onMounted(() => {
-    animate(width, "0%", {
+    controls = animate(width, "0%", {
       duration: 8,
       ease: "linear",
     });
   });
+
+  const handleMouseEnter = () => {
+    controls?.pause();
+    emit("pause-timer");
+  };
+
+  const handleMouseLeave = () => {
+    controls?.play();
+    emit("resume-timer");
+  };
 </script>

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 border border-transparent",
+  "relative cursor-pointer 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:
@@ -14,9 +14,9 @@ export const buttonStyles = styles(
         "dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800 disabled:text-gray-700",
     },
     size: {
-      sm: "px-5 py-1 text-button-sm",
-      md: "px-6 py-1 text-button-md",
-      lg: "px-7 py-1 text-button-lg",
+      sm: "h-7 px-4 text-button-sm",
+      md: "h-8 px-6 text-button-md",
+      lg: "h-10 px-8 text-button-lg",
     },
     rounded: {
       true: "rounded-full",

package/templates/components/Checkbox/Checkbox.component.vue

@@ -2,14 +2,15 @@
   <label :class="checkboxStyles($attrs.class as string)">
     <div class="relative flex items-center justify-center">
       <input
+        ref="inputRef"
         type="checkbox"
         :disabled="props.disabled"
         v-model="checked"
-        class="size-4 cursor-pointer appearance-none rounded-1 border border-black transition-all duration-150 ease-in-out checked:bg-black hover:bg-gray-300 checked:hover:bg-gray-800 disabled:pointer-events-none disabled:border-gray-500 disabled:bg-gray-300 checked:disabled:bg-gray-500 dark:border-gray-100 dark:checked:bg-gray-100 dark:hover:bg-gray-800 dark:checked:hover:bg-gray-200 dark:disabled:border-gray-600 dark:disabled:bg-gray-900 dark:checked:disabled:bg-gray-600"
+        :class="inputStyles({ indeterminate: !!props.indeterminate })"
       />
       <animate-presence>
         <motion.div
-          v-if="checked"
+          v-if="checked || props.indeterminate"
           :initial="{ opacity: 0 }"
           :animate="{ opacity: 1 }"
           :exit="{ opacity: 0 }"
@@ -17,11 +18,11 @@
           class="pointer-events-none absolute"
         >
           <uixy-icon
-            name="check"
+            :name="props.indeterminate ? 'minus' : 'check'"
             :class="
               iconStyles({
                 disabled: !!props.disabled,
-                checked: checked,
+                checked: checked || props.indeterminate,
               })
             "
           />
@@ -41,9 +42,22 @@
   import { motion, AnimatePresence } from "motion-v";
   import { UixyIcon } from "../Icon";
   import type { UixyCheckboxProps } from "./Checkbox.types";
-  import { checkboxStyles, iconStyles, labelStyles } from "./Checkbox.styles";
+  import {
+    checkboxStyles,
+    inputStyles,
+    iconStyles,
+    labelStyles,
+  } from "./Checkbox.styles";
 
   const props = defineProps<UixyCheckboxProps>();
 
   const checked = defineModel<boolean>("checked");
+
+  const inputRef = ref<HTMLInputElement | null>(null);
+
+  watchEffect(() => {
+    if (inputRef.value) {
+      inputRef.value.indeterminate = !!props.indeterminate;
+    }
+  });
 </script>

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

@@ -2,6 +2,16 @@ import styles from "~/utils/styles";
 
 export const checkboxStyles = styles("flex items-center gap-2");
 
+export const inputStyles = styles(
+  "size-4 cursor-pointer appearance-none rounded-1 border border-black transition-all duration-150 ease-in-out checked:bg-black hover:bg-gray-300 checked:hover:bg-gray-800 disabled:pointer-events-none disabled:border-gray-500 disabled:bg-gray-300 checked:disabled:bg-gray-500 dark:border-gray-100 dark:checked:bg-gray-100 dark:hover:bg-gray-800 dark:checked:hover:bg-gray-200 dark:disabled:border-gray-600 dark:disabled:bg-gray-900 dark:checked:disabled:bg-gray-600",
+  {
+    indeterminate: {
+      true: "bg-black hover:bg-gray-800 disabled:bg-gray-300 dark:bg-gray-100 dark:hover:bg-gray-200 dark:disabled:bg-gray-900",
+      false: "",
+    },
+  },
+);
+
 export const iconStyles = styles("h-3 w-3", {
   disabled: {
     true: "text-gray-500",

package/templates/components/Checkbox/Checkbox.types.ts

@@ -1,3 +1,4 @@
 export interface UixyCheckboxProps {
   disabled?: boolean;
+  indeterminate?: boolean;
 }

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

@@ -33,9 +33,29 @@
       />
     </div>
 
-    <div v-if="!props.hideHelper && helperText" class="h-4">
-      <p :class="helperStyles({ status })">{{ helperText }}</p>
-    </div>
+    <animate-presence mode="wait" :initial="false">
+      <motion.div
+        v-if="!!helperText"
+        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 + helperText"
+            :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 }"
+          >
+            {{ helperText }}
+          </motion.p>
+        </animate-presence>
+      </motion.div>
+    </animate-presence>
 
     <teleport to="body">
       <animate-presence>

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

@@ -13,6 +13,5 @@ export interface UixyDatePickerProps {
   startOfWeek?: "Sunday" | "Monday";
   isDateDisabled?: (date: Date) => boolean;
   direction?: "top" | "bottom";
-  hideHelper?: boolean;
   closeOnSelect?: boolean;
 }

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

@@ -19,7 +19,12 @@
         :class="triggerIconStyles({ disabled: props.disabled })"
       />
       <span
-        :class="triggerValueStyles({ placeholder: !hasValue, disabled: props.disabled })"
+        :class="
+          triggerValueStyles({
+            placeholder: !hasValue,
+            disabled: props.disabled,
+          })
+        "
       >
         {{ displayValue }}
       </span>
@@ -31,9 +36,29 @@
       />
     </div>
 
-    <div v-if="!props.hideHelper && helperText" class="h-4">
-      <p :class="helperStyles({ status })">{{ helperText }}</p>
-    </div>
+    <animate-presence mode="wait" :initial="false">
+      <motion.div
+        v-if="!!helperText"
+        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 + helperText"
+            :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 }"
+          >
+            {{ helperText }}
+          </motion.p>
+        </animate-presence>
+      </motion.div>
+    </animate-presence>
 
     <teleport to="body">
       <animate-presence>

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

@@ -18,6 +18,5 @@ export interface UixyDateRangePickerProps {
   startOfWeek?: "Sunday" | "Monday";
   isDateDisabled?: (date: Date) => boolean;
   direction?: "top" | "bottom";
-  hideHelper?: boolean;
   closeOnSelect?: boolean;
 }

package/templates/components/FileUpload/FileUpload.component.vue

@@ -78,19 +78,29 @@
       </div>
     </div>
 
-    <div v-if="text" class="h-4">
-      <animate-presence mode="wait" :initial="false">
-        <motion.div
-          :key="status"
-          :initial="{ opacity: 0, y: '-4px' }"
-          :animate="{ opacity: 1, y: 0 }"
-          :exit="{ opacity: 0, y: '-4px' }"
-          :transition="{ duration: 0.125 }"
-        >
-          <p :class="helperStyles({ status })">{{ text }}</p>
-        </motion.div>
-      </animate-presence>
-    </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>
 </template>
 

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

@@ -27,19 +27,29 @@
         {{ props.label }}
       </label>
     </div>
-    <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>
+    <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>
 </template>
 

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

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

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

@@ -17,7 +17,7 @@
             :exit="{ opacity: 0, scale: 0.8 }"
             :transition="{ duration: 0.15, ease: 'easeInOut' }"
           >
-            <slot />
+            <slot :close="handleLeave" />
           </motion.div>
         </div>
       </motion.div>

package/templates/components/Select/Select.component.vue

@@ -63,7 +63,6 @@
                   icon="search"
                   iconPositon="right"
                   placeholder="Search..."
-                  hide-helper
                 />
               </div>
 
@@ -140,19 +139,29 @@
         {{ props.label }}
       </div>
     </div>
-    <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>
+    <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>
 </template>
 

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

@@ -34,7 +34,6 @@ export type UixySelectProps = {
   leafOnly?: boolean;
   autoOpen?: boolean;
   delay?: number;
-  hideHelper?: boolean;
   deselectable?: boolean;
   allowCustom?: boolean;
   clearSearchOnSelect?: boolean;