v-uixy 1.4.0 → 1.5.0

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>

package/templates/components/DatePicker/DatePicker.styles.ts

@@ -0,0 +1,74 @@
+import styles from "~/utils/styles";
+
+export const triggerStyles = styles(
+  "relative flex w-full items-center gap-2 cursor-pointer transition-colors ease-in-out duration-150 border border-gray-300 dark:border-gray-900 rounded-1 pl-3 pr-3 py-2 text-sm min-h-[38px] outline-offset-1 outline-gray-300 dark:outline-gray-800 select-none",
+  {
+    status: {
+      default:
+        "bg-white dark:bg-gray-1000 hover:border-gray-400 dark:hover:border-gray-700",
+      error:
+        "bg-white dark:bg-gray-1000 border-error-700 dark:border-error-900 text-error-600 dark:text-error-500",
+      disabled:
+        "bg-gray-200 text-gray-400 dark:bg-gray-900 dark:text-gray-700 pointer-events-none cursor-not-allowed",
+    },
+    open: {
+      true: "border-gray-500 dark:border-gray-600",
+      false: "",
+    },
+  }
+);
+
+export const triggerValueStyles = styles("flex-1 truncate text-left", {
+  placeholder: {
+    true: "text-gray-500 dark:text-gray-700",
+    false: "text-gray-900 dark:text-gray-100",
+  },
+  disabled: {
+    true: "text-gray-400 dark:text-gray-700",
+    false: "",
+  },
+});
+
+export const triggerIconStyles = styles(
+  "h-4 w-4 shrink-0 text-gray-400 dark:text-gray-600",
+  {
+    disabled: {
+      true: "dark:text-gray-700",
+      false: "",
+    },
+  }
+);
+
+export const labelStyles = styles(
+  "transition-colors ease-in-out duration-150 text-sm font-500",
+  {
+    status: {
+      default: "",
+      error: "text-error-600",
+      disabled: "text-gray-500 dark:text-gray-700",
+    },
+  }
+);
+
+export const helperStyles = styles(
+  "transition-colors ease-in-out duration-150 text-xs",
+  {
+    status: {
+      default: "text-gray-600",
+      error: "text-error-600",
+      disabled: "text-gray-400 dark:text-gray-800",
+    },
+  }
+);
+
+export const panelStyles = styles(
+  "flex flex-col gap-3 rounded-2 border border-gray-300 bg-gray-100 p-3 shadow-lg dark:border-gray-900 dark:bg-black"
+);
+
+export const sectionLabelStyles = styles(
+  "text-xs font-500 text-gray-500 dark:text-gray-600"
+);
+
+export const footerStyles = styles(
+  "flex items-center justify-between gap-2"
+);

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

@@ -0,0 +1,18 @@
+import type { IconName } from "~/types/icons";
+
+export interface UixyDatePickerProps {
+  placeholder?: string;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  status?: "default" | "error";
+  disabled?: boolean;
+  icon?: IconName;
+  withTime?: boolean;
+  withSeconds?: boolean;
+  startOfWeek?: "Sunday" | "Monday";
+  isDateDisabled?: (date: Date) => boolean;
+  direction?: "top" | "bottom";
+  hideHelper?: boolean;
+  closeOnSelect?: boolean;
+}

package/templates/components/DatePicker/DatePicker.utils.ts

@@ -0,0 +1,46 @@
+export const pad2 = (n: number) => (n < 10 ? `0${n}` : `${n}`);
+
+export const startOfDay = (date: Date) =>
+  new Date(date.getFullYear(), date.getMonth(), date.getDate());
+
+export interface UixyTimeParts {
+  hour: number;
+  minute: number;
+  second: number;
+}
+
+export const timePartsOf = (date?: Date | null): UixyTimeParts => ({
+  hour: date?.getHours() ?? 0,
+  minute: date?.getMinutes() ?? 0,
+  second: date?.getSeconds() ?? 0,
+});
+
+export const withTimeParts = (day: Date, time: UixyTimeParts) =>
+  new Date(
+    day.getFullYear(),
+    day.getMonth(),
+    day.getDate(),
+    time.hour,
+    time.minute,
+    time.second
+  );
+
+export interface UixyDateFormatOptions {
+  withTime?: boolean;
+  withSeconds?: boolean;
+}
+
+export const formatDate = (
+  date?: Date | null,
+  options: UixyDateFormatOptions = {}
+) => {
+  if (!date) return "";
+
+  const { withTime = false, withSeconds = false } = options;
+  const datePart = `${pad2(date.getDate())}-${pad2(date.getMonth() + 1)}-${date.getFullYear()}`;
+
+  if (!withTime) return datePart;
+
+  const tail = withSeconds ? `:${pad2(date.getSeconds())}` : "";
+  return `${datePart} ${pad2(date.getHours())}:${pad2(date.getMinutes())}${tail}`;
+};

package/templates/components/DatePicker/TimeWheel.vue

@@ -0,0 +1,145 @@
+<template>
+  <div
+    class="relative mx-auto w-fit"
+    :style="{ height: `${ITEM_HEIGHT * VISIBLE}px` }"
+  >
+    <div
+      class="pointer-events-none absolute inset-0 flex items-center justify-center"
+    >
+      <div
+        class="w-full rounded-1 bg-gray-200/80 dark:bg-gray-900/80"
+        :style="{ height: `${ITEM_HEIGHT}px` }"
+      />
+    </div>
+
+    <div
+      class="pointer-events-none absolute inset-x-0 top-0 z-10 bg-gradient-to-b from-gray-100 to-transparent dark:from-black"
+      :style="{ height: `${ITEM_HEIGHT * 1.6}px` }"
+    />
+    <div
+      class="pointer-events-none absolute inset-x-0 bottom-0 z-10 bg-gradient-to-t from-gray-100 to-transparent dark:from-black"
+      :style="{ height: `${ITEM_HEIGHT * 1.6}px` }"
+    />
+
+    <div class="relative flex items-stretch gap-1 text-sm">
+      <div class="w-11">
+        <time-wheel-column
+          v-model="hour"
+          :values="hourValues"
+          :format="pad"
+          :item-height="ITEM_HEIGHT"
+          :visible-count="VISIBLE"
+          :disabled="props.disabled"
+        />
+      </div>
+      <div class="w-11">
+        <time-wheel-column
+          v-model="minute"
+          :values="minuteValues"
+          :format="pad"
+          :item-height="ITEM_HEIGHT"
+          :visible-count="VISIBLE"
+          :disabled="props.disabled"
+        />
+      </div>
+      <div v-if="props.withSeconds" class="w-11">
+        <time-wheel-column
+          v-model="second"
+          :values="minuteValues"
+          :format="pad"
+          :item-height="ITEM_HEIGHT"
+          :visible-count="VISIBLE"
+          :disabled="props.disabled"
+        />
+      </div>
+      <div v-if="is12" class="w-12">
+        <time-wheel-column
+          v-model="period"
+          :values="periodValues"
+          :item-height="ITEM_HEIGHT"
+          :visible-count="VISIBLE"
+          :disabled="props.disabled"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import TimeWheelColumn from "./TimeWheelColumn.vue";
+  import { pad2, type UixyTimeParts } from "./DatePicker.utils";
+
+  const props = withDefaults(
+    defineProps<{
+      hourCycle?: 12 | 24;
+      withSeconds?: boolean;
+      disabled?: boolean;
+    }>(),
+    { hourCycle: 12 },
+  );
+
+  const model = defineModel<UixyTimeParts>({
+    default: () => ({ hour: 0, minute: 0, second: 0 }),
+  });
+
+  const ITEM_HEIGHT = 34;
+  const VISIBLE = 5;
+
+  const pad = (value: number | string) => pad2(Number(value));
+
+  const is12 = computed(() => props.hourCycle === 12);
+
+  const hourValues = computed(() =>
+    is12.value
+      ? Array.from({ length: 12 }, (_, i) => i + 1)
+      : Array.from({ length: 24 }, (_, i) => i),
+  );
+
+  const minuteValues = Array.from({ length: 60 }, (_, i) => i);
+
+  const periodValues = ["AM", "PM"];
+
+  const period = computed<string>({
+    get: () => (model.value.hour < 12 ? "AM" : "PM"),
+    set: (value) => {
+      const base = model.value.hour % 12;
+      let hour = base;
+
+      switch (value) {
+        case "PM":
+          hour = base + 12;
+          break;
+        default:
+          hour = base;
+      }
+
+      model.value = { ...model.value, hour };
+    },
+  });
+
+  const hour = computed<number>({
+    get: () =>
+      is12.value ? ((model.value.hour + 11) % 12) + 1 : model.value.hour,
+    set: (value) => {
+      const next = Number(value);
+
+      if (!is12.value) {
+        model.value = { ...model.value, hour: next };
+        return;
+      }
+
+      const hour24 = (next % 12) + (period.value === "PM" ? 12 : 0);
+      model.value = { ...model.value, hour: hour24 };
+    },
+  });
+
+  const minute = computed<number>({
+    get: () => model.value.minute,
+    set: (value) => (model.value = { ...model.value, minute: Number(value) }),
+  });
+
+  const second = computed<number>({
+    get: () => model.value.second,
+    set: (value) => (model.value = { ...model.value, second: Number(value) }),
+  });
+</script>

package/templates/components/DatePicker/TimeWheelColumn.vue

@@ -0,0 +1,147 @@
+<template>
+  <div
+    ref="containerRef"
+    class="relative overflow-y-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+    :class="props.disabled ? 'pointer-events-none opacity-40' : ''"
+    :style="{ height: `${itemHeight * visibleCount}px`, scrollSnapType: 'y mandatory' }"
+    @scroll="onScroll"
+  >
+    <div :style="{ height: `${spacer}px` }" aria-hidden="true" />
+    <button
+      v-for="(value, index) in props.values"
+      :key="index"
+      type="button"
+      class="flex w-full items-center justify-center font-500 tabular-nums select-none transition-colors"
+      style="scroll-snap-align: center"
+      :style="itemStyle(index)"
+      @click="selectIndex(index)"
+    >
+      {{ props.format ? props.format(value) : value }}
+    </button>
+    <div :style="{ height: `${spacer}px` }" aria-hidden="true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = withDefaults(
+    defineProps<{
+      values: (number | string)[];
+      disabled?: boolean;
+      itemHeight?: number;
+      visibleCount?: number;
+      format?: (value: number | string) => string;
+    }>(),
+    {
+      itemHeight: 34,
+      visibleCount: 5,
+    }
+  );
+
+  const model = defineModel<number | string>();
+
+  const containerRef = ref<HTMLElement>();
+
+  const scrollTop = ref(0);
+
+  const itemHeight = computed(() => props.itemHeight);
+
+  const visibleCount = computed(() => props.visibleCount);
+
+  const spacer = computed(
+    () => (itemHeight.value * (visibleCount.value - 1)) / 2
+  );
+
+  const currentIndex = computed(() => {
+    const idx = props.values.findIndex((v) => v === model.value);
+    return idx === -1 ? 0 : idx;
+  });
+
+  const itemStyle = (index: number) => {
+    const distance =
+      Math.abs(index * itemHeight.value - scrollTop.value) / itemHeight.value;
+    const opacity = Math.max(0.25, 1 - distance * 0.32);
+    const scale = Math.max(0.78, 1 - distance * 0.12);
+    return {
+      height: `${itemHeight.value}px`,
+      lineHeight: `${itemHeight.value}px`,
+      opacity,
+      transform: `scale(${scale})`,
+    };
+  };
+
+  let settleTimer: ReturnType<typeof setTimeout> | undefined;
+  let rafId = 0;
+
+  const onScroll = () => {
+    const el = containerRef.value;
+    if (!el) return;
+
+    if (!rafId) {
+      rafId = requestAnimationFrame(() => {
+        scrollTop.value = el.scrollTop;
+        rafId = 0;
+      });
+    }
+
+    if (settleTimer) clearTimeout(settleTimer);
+    settleTimer = setTimeout(settle, 110);
+  };
+
+  const settle = () => {
+    const el = containerRef.value;
+    if (!el) return;
+
+    const index = Math.max(
+      0,
+      Math.min(props.values.length - 1, Math.round(el.scrollTop / itemHeight.value))
+    );
+
+    const value = props.values[index];
+    if (value !== undefined && value !== model.value) model.value = value;
+  };
+
+  const scrollToIndex = (index: number) => {
+    const el = containerRef.value;
+    if (!el) return;
+
+    const top = index * itemHeight.value;
+    if (Math.abs(el.scrollTop - top) < 1) return;
+
+    el.scrollTo({ top, behavior: "smooth" });
+  };
+
+  const selectIndex = (index: number) => {
+    if (props.disabled) return;
+
+    const value = props.values[index];
+    if (value !== undefined && value !== model.value) model.value = value;
+
+    scrollToIndex(index);
+  };
+
+  onMounted(() => {
+    nextTick(() => {
+      const el = containerRef.value;
+      if (el) {
+        el.scrollTop = currentIndex.value * itemHeight.value;
+        scrollTop.value = el.scrollTop;
+      }
+    });
+  });
+
+  watch(
+    () => model.value,
+    () => {
+      const el = containerRef.value;
+      if (!el) return;
+
+      const target = currentIndex.value * itemHeight.value;
+      if (Math.abs(el.scrollTop - target) > 1) scrollToIndex(currentIndex.value);
+    }
+  );
+
+  onUnmounted(() => {
+    if (settleTimer) clearTimeout(settleTimer);
+    if (rafId) cancelAnimationFrame(rafId);
+  });
+</script>

package/templates/components/DatePicker/index.ts

@@ -0,0 +1,11 @@
+import UixyDatePicker from "./DatePicker.component.vue";
+import UixyTimeWheel from "./TimeWheel.vue";
+import { type UixyDatePickerProps } from "./DatePicker.types";
+import { type UixyTimeParts } from "./DatePicker.utils";
+
+export {
+  UixyDatePicker,
+  UixyTimeWheel,
+  type UixyDatePickerProps,
+  type UixyTimeParts,
+};