v-uixy 1.3.1 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-uixy",
-  "version": "1.3.1",
+  "version": "1.5.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/Alert/Alert.types.ts

@@ -12,3 +12,7 @@ export interface UixyAlertItemProps {
   timer?: boolean;
   showClose?: boolean;
 }
+
+export interface UixyAlertItemEmits {
+  (event: "close-alert"): void;
+}

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

@@ -36,13 +36,11 @@
 <script setup lang="ts">
   import { motion, useMotionValue, animate } from "motion-v";
   import { UixyButton, UixyIconButton, UixyIcon, UixyCard } from "..";
-  import type { UixyAlertItemProps } from "./Alert.types";
+  import type { UixyAlertItemProps, UixyAlertItemEmits } from "./Alert.types";
 
   const props = defineProps<UixyAlertItemProps>();
 
-  const emit = defineEmits<{
-    (event: "close-alert"): void;
-  }>();
+  const emit = defineEmits<UixyAlertItemEmits>();
 
   const width = useMotionValue("100%");
 

package/templates/components/Alert/index.ts

@@ -1,6 +1,10 @@
 import UixyAlert from "./Alert.component.vue";
 import UixyAlertItem from "./AlertItem.component.vue";
-import { type UixyAlertProps, type UixyAlertItemProps } from "./Alert.types";
+import {
+  type UixyAlertProps,
+  type UixyAlertItemProps,
+  type UixyAlertItemEmits,
+} from "./Alert.types";
 
 export * from "./composables";
 export {
@@ -8,4 +12,5 @@ export {
   UixyAlertItem,
   type UixyAlertProps,
   type UixyAlertItemProps,
+  type UixyAlertItemEmits,
 };

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

@@ -0,0 +1,116 @@
+<template>
+  <nav aria-label="Breadcrumb">
+    <ol :class="breadcrumbListStyles({ size: props.size })">
+      <template v-for="(node, index) in nodes" :key="index">
+        <li :class="breadcrumbItemStyles()">
+          <button
+            v-if="node.kind === 'ellipsis'"
+            type="button"
+            :class="breadcrumbEllipsisStyles()"
+            aria-label="Show hidden breadcrumbs"
+            @click="expanded = true"
+          >
+            <uixy-icon
+              name="more-horizontal"
+              :class="breadcrumbIconStyles({ size: props.size })"
+            />
+          </button>
+
+          <uixy-link
+            v-else-if="node.item?.link && !node.current"
+            v-bind="node.item.link"
+            :class="breadcrumbLinkStyles()"
+          >
+            <uixy-icon
+              v-if="node.item.icon"
+              :name="node.item.icon"
+              :class="breadcrumbIconStyles({ size: props.size })"
+            />
+            {{ node.item.label }}
+          </uixy-link>
+
+          <span
+            v-else
+            :class="breadcrumbCurrentStyles()"
+            :aria-current="node.current ? 'page' : undefined"
+          >
+            <uixy-icon
+              v-if="node.item?.icon"
+              :name="node.item.icon"
+              :class="breadcrumbIconStyles({ size: props.size })"
+            />
+            {{ node.item?.label }}
+          </span>
+        </li>
+
+        <li
+          v-if="index < nodes.length - 1"
+          :class="breadcrumbSeparatorStyles()"
+          aria-hidden="true"
+        >
+          <uixy-icon
+            :name="props.separator"
+            :class="breadcrumbSeparatorIconStyles({ size: props.size })"
+          />
+        </li>
+      </template>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+  import { UixyLink } from "../Link";
+  import { UixyIcon } from "../Icon";
+  import type {
+    BreadcrumbNode,
+    ItemNode,
+    UixyBreadcrumbItem,
+    UixyBreadcrumbProps,
+  } from "./Breadcrumb.types";
+  import {
+    breadcrumbListStyles,
+    breadcrumbItemStyles,
+    breadcrumbLinkStyles,
+    breadcrumbCurrentStyles,
+    breadcrumbSeparatorStyles,
+    breadcrumbEllipsisStyles,
+    breadcrumbIconStyles,
+    breadcrumbSeparatorIconStyles,
+  } from "./Breadcrumb.styles";
+
+  const props = withDefaults(defineProps<UixyBreadcrumbProps>(), {
+    separator: "chevron-right",
+    size: "md",
+  });
+
+  const expanded = ref(false);
+
+  const nodes = computed<BreadcrumbNode[]>(() => {
+    const items = props.items ?? [];
+    const total = items.length;
+
+    const toItemNode = (item: UixyBreadcrumbItem, index: number): ItemNode => ({
+      kind: "item",
+      item,
+      current: item.current ?? index === total - 1,
+    });
+
+    const shouldCollapse =
+      !expanded.value &&
+      props.maxItems &&
+      props.maxItems >= 1 &&
+      total > props.maxItems;
+
+    if (!shouldCollapse) return items.map(toItemNode);
+
+    const tail = Math.min(Math.max(props.maxItems! - 1, 1), total - 1);
+
+    const head = toItemNode(items[0]!, 0);
+
+    const tailNodes = items
+      .slice(total - tail)
+      .map((item, i) => toItemNode(item, total - tail + i));
+
+    return [head, { kind: "ellipsis" }, ...tailNodes];
+  });
+</script>

package/templates/components/Breadcrumb/Breadcrumb.styles.ts

@@ -0,0 +1,40 @@
+import styles from "~/utils/styles";
+
+export const breadcrumbListStyles = styles("flex flex-wrap items-center", {
+  size: {
+    sm: "gap-1 text-xs",
+    md: "gap-1.5 text-sm",
+  },
+});
+
+export const breadcrumbItemStyles = styles("inline-flex items-center");
+
+export const breadcrumbLinkStyles = styles(
+  "inline-flex items-center gap-1.5 rounded-1 text-gray-600 hover:text-black dark:text-gray-500 dark:hover:text-white transition-colors duration-150 ease-in-out outline-offset-2 outline-gray-300",
+);
+
+export const breadcrumbCurrentStyles = styles(
+  "inline-flex items-center gap-1.5 font-500 text-gray-900 dark:text-gray-100 select-none",
+);
+
+export const breadcrumbSeparatorStyles = styles(
+  "inline-flex items-center text-gray-400 dark:text-gray-700 select-none",
+);
+
+export const breadcrumbEllipsisStyles = styles(
+  "inline-flex items-center justify-center rounded-1 p-0.5 text-gray-500 hover:text-black dark:text-gray-600 dark:hover:text-white transition-colors duration-150 ease-in-out cursor-pointer outline-offset-2 outline-gray-300",
+);
+
+export const breadcrumbIconStyles = styles("shrink-0", {
+  size: {
+    sm: "h-3.5 w-3.5",
+    md: "h-4 w-4",
+  },
+});
+
+export const breadcrumbSeparatorIconStyles = styles("shrink-0", {
+  size: {
+    sm: "h-3 w-3",
+    md: "h-3.5 w-3.5",
+  },
+});

package/templates/components/Breadcrumb/Breadcrumb.types.ts

@@ -0,0 +1,30 @@
+import { type UixyLinkProps } from "../Link";
+import type { IconName } from "~/types/icons";
+
+export interface UixyBreadcrumbItem {
+  label: string;
+  link?: UixyLinkProps;
+  icon?: IconName;
+  current?: boolean;
+}
+
+export interface UixyBreadcrumbProps {
+  items: UixyBreadcrumbItem[];
+  separator?: IconName;
+  size?: "sm" | "md";
+  maxItems?: number;
+}
+
+export interface ItemNode {
+  kind: "item";
+  item: UixyBreadcrumbItem;
+  current: boolean;
+}
+
+export interface EllipsisNode {
+  kind: "ellipsis";
+  item?: undefined;
+  current?: undefined;
+}
+
+export type BreadcrumbNode = ItemNode | EllipsisNode;

package/templates/components/Breadcrumb/index.ts

@@ -0,0 +1,17 @@
+import UixyBreadcrumb from "./Breadcrumb.component.vue";
+import {
+  type UixyBreadcrumbProps,
+  type UixyBreadcrumbItem,
+  type BreadcrumbNode,
+  type ItemNode,
+  type EllipsisNode,
+} from "./Breadcrumb.types";
+
+export {
+  UixyBreadcrumb,
+  type UixyBreadcrumbProps,
+  type UixyBreadcrumbItem,
+  type BreadcrumbNode,
+  type ItemNode,
+  type EllipsisNode,
+};

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>
 
@@ -33,13 +33,27 @@
         :class="
           calendarDayStyles({
             currentMonth: !!day.fromCurrentMonth,
-            selected: model?.toDateString?.() === day.date.toDateString(),
+            selected: isRange
+              ? isEndpoint(day.date)
+              : model?.toDateString?.() === day.date.toDateString(),
+            inRange: isRange && isInRange(day.date),
             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)"
+        @mouseenter="emit('dayHover', day.date)"
+        @mouseleave="emit('dayLeave')"
       >
         {{ day.day }}
       </button>
@@ -51,12 +65,55 @@
   import { ref, computed } from "vue";
   import { UixyIconButton } from "../IconButton";
   import { calendarDayStyles, calendarStyles } from "./Calendar.styles";
-  import type { UixyCalendarProps } from "./Calendar.types";
+  import type { UixyCalendarProps, UixyCalendarEmits } from "./Calendar.types";
 
   const props = defineProps<UixyCalendarProps>();
 
+  const emit = defineEmits<UixyCalendarEmits>();
+
   const model = defineModel<Date | null>();
 
+  const isRange = computed(
+    () => props.rangeStart !== undefined || props.rangeEnd !== undefined,
+  );
+
+  const sameDay = (a?: Date | null, b?: Date | null) =>
+    !!a && !!b && a.toDateString() === b.toDateString();
+
+  const effectiveEnd = computed(
+    () => props.rangeEnd ?? props.rangeHover ?? null,
+  );
+
+  const isEndpoint = (date: Date) =>
+    sameDay(date, props.rangeStart) || sameDay(date, effectiveEnd.value);
+
+  const isInRange = (date: Date) => {
+    const start = props.rangeStart;
+    const end = effectiveEnd.value;
+
+    if (!start || !end) return false;
+
+    const d = new Date(
+      date.getFullYear(),
+      date.getMonth(),
+      date.getDate(),
+    ).getTime();
+
+    const a = new Date(
+      start.getFullYear(),
+      start.getMonth(),
+      start.getDate(),
+    ).getTime();
+
+    const b = new Date(
+      end.getFullYear(),
+      end.getMonth(),
+      end.getDate(),
+    ).getTime();
+
+    return d > Math.min(a, b) && d < Math.max(a, b);
+  };
+
   const MONTHS = [
     "January",
     "February",
@@ -82,11 +139,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 +160,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 +173,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 +187,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 +249,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,15 +9,27 @@ 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",
       false: "hover:bg-gray-300 dark:hover:bg-gray-700",
     },
+    inRange: {
+      true: "bg-gray-300 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-800",
+      false: "",
+    },
     disabled: {
       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,13 @@ export interface UixyCalendarProps {
   month?: number;
   startOfWeek?: "Sunday" | "Monday";
   disabled?: boolean;
+  isDateDisabled?: (date: Date) => boolean;
+  rangeStart?: Date | null;
+  rangeEnd?: Date | null;
+  rangeHover?: Date | null;
+}
+
+export interface UixyCalendarEmits {
+  (event: "dayHover", date: Date): void;
+  (event: "dayLeave"): void;
 }