v-uixy 1.4.0 → 1.6.0

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.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

@@ -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>