v-uixy 1.3.1 → 1.5.0

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>

package/templates/components/Chart/Chart.types.ts

@@ -0,0 +1,18 @@
+export type UixyChartSeries = {
+  label: string;
+  values: number[];
+};
+
+export type UixyChartData = {
+  label: string;
+  value: number;
+};
+
+export interface UixyChartProps {
+  series?: UixyChartSeries[];
+  data?: UixyChartData[];
+  color?: string;
+  baseColor?: string;
+  rows?: number;
+  animate?: boolean;
+}

package/templates/components/Chart/index.ts

@@ -0,0 +1,13 @@
+import UixyChart from "./Chart.component.vue";
+import type {
+  UixyChartData,
+  UixyChartProps,
+  UixyChartSeries,
+} from "./Chart.types";
+
+export {
+  UixyChart,
+  type UixyChartData,
+  type UixyChartProps,
+  type UixyChartSeries,
+};

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

@@ -0,0 +1,219 @@
+<template>
+  <div class="flex w-full flex-col gap-1">
+    <label v-if="props.label" :class="labelStyles({ status })">
+      {{ props.label }}
+    </label>
+
+    <div
+      ref="triggerRef"
+      role="button"
+      :tabindex="props.disabled ? -1 : 0"
+      :aria-expanded="active"
+      :class="triggerStyles({ status, open: active })"
+      @click="onTriggerClick"
+      @keydown.enter.prevent="onTriggerClick"
+      @keydown.space.prevent="onTriggerClick"
+    >
+      <uixy-icon
+        :name="props.icon ?? 'calendar'"
+        :class="triggerIconStyles({ disabled: props.disabled })"
+      />
+      <span
+        :class="
+          triggerValueStyles({ placeholder: !model, disabled: props.disabled })
+        "
+      >
+        {{ displayValue }}
+      </span>
+      <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"
+        @click.stop="clear"
+      />
+    </div>
+
+    <div v-if="!props.hideHelper && helperText" class="h-4">
+      <p :class="helperStyles({ status })">{{ helperText }}</p>
+    </div>
+
+    <teleport to="body">
+      <animate-presence>
+        <motion.div
+          v-if="active"
+          :initial="{ opacity: 0 }"
+          :animate="{ opacity: 1 }"
+          :exit="{ opacity: 0 }"
+          :transition="{ duration: 0.15, ease: 'easeInOut' }"
+          :style="positionStyles"
+        >
+          <div ref="refElement">
+            <motion.div
+              :initial="{ y: 4, scale: 0.96, opacity: 0 }"
+              :animate="{ y: 0, scale: 1, opacity: 1 }"
+              :exit="{ opacity: 0, scale: 0.96 }"
+              :transition="{ duration: 0.15, ease: 'easeInOut' }"
+              :class="panelStyles()"
+            >
+              <div class="flex items-stretch gap-3">
+                <uixy-calendar
+                  :model-value="model"
+                  :year="viewYear"
+                  :month="viewMonth"
+                  :start-of-week="props.startOfWeek"
+                  :is-date-disabled="props.isDateDisabled"
+                  @update:model-value="onDayPick"
+                />
+
+                <div v-if="props.withTime" class="flex items-center">
+                  <uixy-time-wheel
+                    v-model="timeParts"
+                    :hour-cycle="24"
+                    :with-seconds="props.withSeconds"
+                  />
+                </div>
+              </div>
+
+              <div :class="footerStyles()">
+                <uixy-button variant="tertiary" size="sm" @click="clear">
+                  Clear
+                </uixy-button>
+                <uixy-button variant="primary" size="sm" @click="handleLeave">
+                  Done
+                </uixy-button>
+              </div>
+            </motion.div>
+          </div>
+        </motion.div>
+      </animate-presence>
+    </teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { AnimatePresence, motion } from "motion-v";
+  import { usePosition } from "~/composables";
+  import { UixyIcon } from "../Icon";
+  import { UixyButton } from "../Button";
+  import { UixyCalendar } from "../Calendar";
+  import UixyTimeWheel from "./TimeWheel.vue";
+  import type { UixyDatePickerProps } from "./DatePicker.types";
+  import {
+    triggerStyles,
+    triggerValueStyles,
+    triggerIconStyles,
+    labelStyles,
+    helperStyles,
+    panelStyles,
+    footerStyles,
+  } from "./DatePicker.styles";
+  import {
+    formatDate,
+    timePartsOf,
+    withTimeParts,
+    type UixyTimeParts,
+  } from "./DatePicker.utils";
+
+  const props = defineProps<UixyDatePickerProps>();
+
+  const model = defineModel<Date | null>();
+
+  const {
+    active,
+    styles: positionStyles,
+    refElement,
+    handleOpen,
+    handleLeave,
+  } = usePosition({ direction: props.direction ?? "bottom" });
+
+  const triggerRef = ref<HTMLElement>();
+
+  const draftTime = ref<UixyTimeParts>(timePartsOf(model.value));
+
+  const status = computed(() => {
+    if (props.disabled) return "disabled";
+
+    return props.status ?? "default";
+  });
+
+  const helperText = computed(() => {
+    if (status.value === "error") return props.errorText ?? "";
+
+    return props.helperText ?? "";
+  });
+
+  const displayValue = computed(() => {
+    if (!model.value) return props.placeholder ?? "Select date";
+
+    return formatDate(model.value, {
+      withTime: props.withTime,
+      withSeconds: props.withSeconds,
+    });
+  });
+
+  const viewBase = computed(() => model.value ?? new Date());
+
+  const viewYear = computed(() => viewBase.value.getFullYear());
+
+  const viewMonth = computed(() => viewBase.value.getMonth());
+
+  const timeParts = computed<UixyTimeParts>({
+    get: () => (model.value ? timePartsOf(model.value) : draftTime.value),
+    set: (parts) => {
+      draftTime.value = parts;
+
+      if (!model.value) return;
+
+      model.value = withTimeParts(model.value, parts);
+    },
+  });
+
+  const onTriggerClick = (event: MouseEvent | KeyboardEvent) => {
+    if (props.disabled) return;
+
+    handleOpen(event as MouseEvent);
+  };
+
+  const onDayPick = (date: Date | null | undefined) => {
+    if (!date) return;
+
+    model.value = withTimeParts(date, draftTime.value);
+
+    if (!props.withTime && props.closeOnSelect) handleLeave();
+  };
+
+  const clear = () => {
+    model.value = null;
+
+    draftTime.value = { hour: 0, minute: 0, second: 0 };
+  };
+
+  watch(active, (isActive) => {
+    if (isActive) draftTime.value = timePartsOf(model.value);
+  });
+
+  const onDocClick = (event: MouseEvent) => {
+    if (!active.value) return;
+
+    const target = event.target as Node;
+
+    const clickedInside =
+      refElement.value?.contains(target) || triggerRef.value?.contains(target);
+
+    if (!clickedInside) handleLeave();
+  };
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (active.value && event.key === "Escape") handleLeave();
+  };
+
+  onMounted(() => {
+    window.addEventListener("click", onDocClick);
+    window.addEventListener("keydown", onKeyDown);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener("click", onDocClick);
+    window.removeEventListener("keydown", onKeyDown);
+  });
+</script>