v-uixy 1.4.0 → 1.6.0

package/package.json

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

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

@@ -33,7 +33,10 @@
         :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:
@@ -49,6 +52,8 @@
           (!!props.isDateDisabled && props.isDateDisabled(day.date))
         "
         @click="handleDayClick(day.date)"
+        @mouseenter="emit('dayHover', day.date)"
+        @mouseleave="emit('dayLeave')"
       >
         {{ day.day }}
       </button>
@@ -60,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",

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

@@ -15,6 +15,10 @@ export const calendarDayStyles = styles(
       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",

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

@@ -4,4 +4,12 @@ export interface UixyCalendarProps {
   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;
 }

package/templates/components/Chart/Chart.component.vue

@@ -0,0 +1,308 @@
+<template>
+  <div class="relative w-full h-full">
+    <svg
+      width="100%"
+      height="100%"
+      :viewBox="`0 0 ${vbWidth} ${vbHeight}`"
+      preserveAspectRatio="xMidYMid meet"
+      role="img"
+      aria-label="Pixel chart"
+      class="block select-none pointer-events-none overflow-visible"
+      shape-rendering="crispEdges"
+    >
+      <rect
+        v-for="cell in renderCells"
+        :key="`base-${cell.key}`"
+        :x="cell.x"
+        :y="cell.y"
+        :width="CELL"
+        :height="CELL"
+        class="fill-gray-200 dark:fill-gray-900"
+      />
+
+      <rect
+        v-for="cell in renderCells"
+        :key="`color-${cell.key}`"
+        :x="cell.x"
+        :y="cell.y"
+        :width="CELL"
+        :height="CELL"
+        :class="cell.cls"
+        :fill="cell.fill"
+        :style="{
+          opacity: cell.filled ? 1 : 0,
+          transition: props.animate
+            ? `opacity ${REVEAL_DURATION}s ease-out`
+            : 'none',
+        }"
+      />
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, onUnmounted, ref, watch } from "vue";
+  import type { UixyChartProps, UixyChartSeries } from "./Chart.types";
+
+  const CELL = 12;
+  const GAP = 2;
+
+  const COLUMN_STEP = 0.05;
+  const ROW_STEP = 0.04;
+  const REVEAL_DURATION = 0.18;
+
+  const TOP_HEADROOM = 0.15;
+  const FADE_ROWS = 2;
+
+  const DEFAULT_CLASSES = [
+    "fill-gray-500 dark:fill-gray-600",
+    "fill-gray-800 dark:fill-gray-300",
+    "fill-gray-900 dark:fill-gray-200",
+    "fill-black dark:fill-white",
+  ];
+
+  const props = withDefaults(defineProps<UixyChartProps>(), {
+    rows: 8,
+    animate: true,
+  });
+
+  type Paint = { fill?: string; cls?: string };
+
+  type Cell = {
+    key: string;
+    x: number;
+    y: number;
+    filled: boolean;
+    fill?: string;
+    cls?: string;
+  };
+
+  const parseHex = (hex: string) => {
+    let h = hex.replace("#", "").trim();
+    if (h.length === 3)
+      h = h
+        .split("")
+        .map((c) => c + c)
+        .join("");
+    const n = parseInt(h, 16);
+    return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
+  };
+
+  const toHex = (r: number, g: number, b: number) => {
+    const channel = (v: number) =>
+      Math.max(0, Math.min(255, Math.round(v)))
+        .toString(16)
+        .padStart(2, "0");
+    return `#${channel(r)}${channel(g)}${channel(b)}`;
+  };
+
+  const mix = (a: string, b: string, t: number) => {
+    const from = parseHex(a);
+    const to = parseHex(b);
+    return toHex(
+      from.r + (to.r - from.r) * t,
+      from.g + (to.g - from.g) * t,
+      from.b + (to.b - from.b) * t,
+    );
+  };
+
+  const peak = computed(() => props.color ?? "#000000");
+  const base = computed(
+    () =>
+      props.baseColor ??
+      (props.color ? mix(props.color, "#000000", 0.4) : "#000000"),
+  );
+
+  const paintForDepth = (depth: number): Paint => {
+    if (!props.color) {
+      const index = depth <= 0 ? 0 : depth > FADE_ROWS ? 3 : depth;
+      return { cls: DEFAULT_CLASSES[index] };
+    }
+    if (depth <= 0) return { fill: peak.value };
+    if (depth > FADE_ROWS) return { fill: base.value };
+    return { fill: mix(peak.value, base.value, depth / (FADE_ROWS + 1)) };
+  };
+
+  const basePaint = (): Paint =>
+    props.color ? { fill: base.value } : { cls: DEFAULT_CLASSES[3] };
+
+  const rows = computed(() => Math.max(1, Math.floor(props.rows)));
+
+  const series = computed<UixyChartSeries[]>(() => {
+    if (props.series?.length) return props.series;
+    if (props.data?.length)
+      return [{ label: "data", values: props.data.map((d) => d.value) }];
+    return [];
+  });
+
+  const columnCount = computed(() =>
+    Math.max(0, ...series.value.map((s) => s.values.length)),
+  );
+
+  const columnTotals = computed(() =>
+    Array.from({ length: columnCount.value }, (_, c) =>
+      series.value.reduce((sum, s) => sum + Math.max(0, s.values[c] ?? 0), 0),
+    ),
+  );
+
+  const usableRows = computed(() =>
+    Math.max(1, Math.floor(rows.value * (1 - TOP_HEADROOM))),
+  );
+
+  const scale = computed(
+    () => usableRows.value / Math.max(1, Math.max(0, ...columnTotals.value)),
+  );
+
+  const barHeights = computed(() =>
+    columnTotals.value.map((total) =>
+      Math.min(usableRows.value, Math.round(total * scale.value)),
+    ),
+  );
+
+  const vbWidth = computed(
+    () => columnCount.value * CELL + Math.max(0, columnCount.value - 1) * GAP,
+  );
+  const vbHeight = computed(() => rows.value * CELL + (rows.value - 1) * GAP);
+
+  type Scheduled = {
+    apply: () => void;
+    done: boolean;
+    timer?: ReturnType<typeof setTimeout>;
+  };
+
+  let prevHeights: number[] = [];
+  let prevPaint: Record<string, Paint> = {};
+  let scheduled: Scheduled[] = [];
+
+  const renderCells = ref<Cell[]>([]);
+
+  const flushScheduled = () => {
+    scheduled.forEach((s) => {
+      if (s.timer) clearTimeout(s.timer);
+      if (!s.done) s.apply();
+    });
+    scheduled = [];
+  };
+
+  const ensureCells = () => {
+    const needed = columnCount.value * rows.value;
+    if (renderCells.value.length === needed) return;
+
+    const cells: Cell[] = [];
+    for (let col = 0; col < columnCount.value; col++) {
+      const x = col * (CELL + GAP);
+      for (let row = 0; row < rows.value; row++) {
+        const y = vbHeight.value - (row + 1) * CELL - row * GAP;
+        cells.push({
+          key: `${col}-${row}`,
+          x,
+          y,
+          filled: false,
+          cls: DEFAULT_CLASSES[3],
+        });
+      }
+    }
+
+    renderCells.value = cells;
+    prevHeights = [];
+    prevPaint = {};
+  };
+
+  type CellTarget = {
+    cell: Cell;
+    filled: boolean;
+    paint: Paint;
+    waveStep: number;
+    changed: boolean;
+  };
+
+  const build = () => {
+    flushScheduled();
+    ensureCells();
+
+    const heights = barHeights.value;
+    const nextPaint: Record<string, Paint> = {};
+
+    const columns = Array.from({ length: columnCount.value }, (_, col) => {
+      const height = heights[col] ?? 0;
+      const prevHeight = prevHeights[col] ?? 0;
+      const rising = height >= prevHeight;
+      let columnChanged = height !== prevHeight;
+
+      const targets: CellTarget[] = [];
+      for (let row = 0; row < rows.value; row++) {
+        const cell = renderCells.value[col * rows.value + row]!;
+        const filled = row < height;
+        const paint = filled
+          ? paintForDepth(height - 1 - row)
+          : (prevPaint[cell.key] ?? basePaint());
+        nextPaint[cell.key] = paint;
+
+        const changed =
+          cell.filled !== filled ||
+          cell.fill !== paint.fill ||
+          cell.cls !== paint.cls;
+        if (changed) columnChanged = true;
+
+        targets.push({
+          cell,
+          filled,
+          paint,
+          waveStep: rising ? row : rows.value - 1 - row,
+          changed,
+        });
+      }
+
+      return { columnChanged, targets };
+    });
+
+    let activeColumn = 0;
+    columns.forEach(({ columnChanged, targets }) => {
+      const columnDelay = activeColumn * COLUMN_STEP;
+      if (columnChanged) activeColumn++;
+
+      targets.forEach(({ cell, filled, paint, waveStep, changed }) => {
+        if (!changed) return;
+
+        const apply = () => {
+          cell.filled = filled;
+          cell.fill = paint.fill;
+          cell.cls = paint.cls;
+        };
+
+        const delay = props.animate ? columnDelay + waveStep * ROW_STEP : 0;
+        if (delay <= 0) {
+          apply();
+          return;
+        }
+
+        const record: Scheduled = { apply, done: false };
+        record.timer = setTimeout(() => {
+          record.done = true;
+          apply();
+        }, delay * 1000);
+        scheduled.push(record);
+      });
+    });
+
+    prevHeights = heights.slice();
+    prevPaint = nextPaint;
+  };
+
+  watch(
+    [
+      barHeights,
+      () => props.color,
+      () => props.baseColor,
+      () => props.animate,
+      rows,
+      columnCount,
+    ],
+    build,
+    { immediate: true },
+  );
+
+  onUnmounted(() => {
+    scheduled.forEach((s) => s.timer && clearTimeout(s.timer));
+  });
+</script>