v-uixy 1.4.0 → 1.5.0

package/templates/components/DateRangePicker/DateRangePicker.component.vue

@@ -0,0 +1,304 @@
+<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: !hasValue, disabled: props.disabled })"
+      >
+        {{ displayValue }}
+      </span>
+      <uixy-icon
+        v-if="hasValue && !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
+                  :year="viewYear"
+                  :month="viewMonth"
+                  :start-of-week="props.startOfWeek"
+                  :is-date-disabled="props.isDateDisabled"
+                  :range-start="model.start"
+                  :range-end="model.end"
+                  :range-hover="rangeHover"
+                  @update:model-value="onDayPick"
+                  @day-hover="onDayHover"
+                  @day-leave="rangeHover = null"
+                />
+
+                <div v-if="props.withTime" class="flex gap-3">
+                  <div class="flex flex-col items-center gap-1">
+                    <span :class="sectionLabelStyles()">Start</span>
+                    <uixy-time-wheel
+                      v-model="startTime"
+                      :hour-cycle="24"
+                      :with-seconds="props.withSeconds"
+                      :disabled="!model.start"
+                    />
+                  </div>
+                  <div class="flex flex-col items-center gap-1">
+                    <span :class="sectionLabelStyles()">End</span>
+                    <uixy-time-wheel
+                      v-model="endTime"
+                      :hour-cycle="24"
+                      :with-seconds="props.withSeconds"
+                      :disabled="!model.end"
+                    />
+                  </div>
+                </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 "../DatePicker";
+  import type {
+    UixyDateRange,
+    UixyDateRangePickerProps,
+  } from "./DateRangePicker.types";
+  import {
+    triggerStyles,
+    triggerValueStyles,
+    triggerIconStyles,
+    labelStyles,
+    helperStyles,
+    panelStyles,
+    sectionLabelStyles,
+    footerStyles,
+  } from "../DatePicker/DatePicker.styles";
+  import {
+    formatDate,
+    timePartsOf,
+    withTimeParts,
+    startOfDay,
+    type UixyTimeParts,
+  } from "../DatePicker/DatePicker.utils";
+
+  const props = defineProps<UixyDateRangePickerProps>();
+
+  const model = defineModel<UixyDateRange>({
+    default: () => ({ start: null, end: null }),
+  });
+
+  const {
+    active,
+    styles: positionStyles,
+    refElement,
+    handleOpen,
+    handleLeave,
+  } = usePosition({ direction: props.direction ?? "bottom" });
+
+  const triggerRef = ref<HTMLElement>();
+
+  const rangeHover = ref<Date | null>(null);
+
+  const draftStartTime = ref<UixyTimeParts>(timePartsOf(model.value.start));
+
+  const draftEndTime = ref<UixyTimeParts>(timePartsOf(model.value.end));
+
+  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 hasValue = computed(() => !!model.value.start || !!model.value.end);
+
+  const formatBound = (date: Date | null) =>
+    formatDate(date, {
+      withTime: props.withTime,
+      withSeconds: props.withSeconds,
+    });
+
+  const displayValue = computed(() => {
+    const { start, end } = model.value;
+
+    if (start && end) return `${formatBound(start)}  –  ${formatBound(end)}`;
+    if (start) return `${formatBound(start)}  –  …`;
+
+    return props.placeholder ?? "Select range";
+  });
+
+  const viewBase = computed(
+    () => model.value.start ?? model.value.end ?? new Date(),
+  );
+
+  const viewYear = computed(() => viewBase.value.getFullYear());
+
+  const viewMonth = computed(() => viewBase.value.getMonth());
+
+  const startTime = computed<UixyTimeParts>({
+    get: () =>
+      model.value.start ? timePartsOf(model.value.start) : draftStartTime.value,
+    set: (parts) => {
+      draftStartTime.value = parts;
+
+      if (!model.value.start) return;
+
+      model.value = {
+        ...model.value,
+        start: withTimeParts(model.value.start, parts),
+      };
+    },
+  });
+
+  const endTime = computed<UixyTimeParts>({
+    get: () =>
+      model.value.end ? timePartsOf(model.value.end) : draftEndTime.value,
+    set: (parts) => {
+      draftEndTime.value = parts;
+
+      if (!model.value.end) return;
+
+      model.value = {
+        ...model.value,
+        end: withTimeParts(model.value.end, parts),
+      };
+    },
+  });
+
+  const onDayPick = (date: Date | null | undefined) => {
+    if (!date) return;
+
+    const { start, end } = model.value;
+
+    if (!start || end) {
+      model.value = {
+        start: withTimeParts(date, draftStartTime.value),
+        end: null,
+      };
+      return;
+    }
+
+    const dateIsEarlier = startOfDay(date) <= startOfDay(start);
+    const earlier = dateIsEarlier ? date : start;
+    const later = dateIsEarlier ? start : date;
+
+    model.value = {
+      start: withTimeParts(earlier, draftStartTime.value),
+      end: withTimeParts(later, draftEndTime.value),
+    };
+
+    rangeHover.value = null;
+
+    if (!props.withTime && props.closeOnSelect) handleLeave();
+  };
+
+  const onDayHover = (date: Date) => {
+    if (model.value.start && !model.value.end) rangeHover.value = date;
+  };
+
+  const onTriggerClick = (event: MouseEvent | KeyboardEvent) => {
+    if (props.disabled) return;
+
+    handleOpen(event as MouseEvent);
+  };
+
+  const clear = () => {
+    model.value = { start: null, end: null };
+    rangeHover.value = null;
+
+    draftStartTime.value = { hour: 0, minute: 0, second: 0 };
+    draftEndTime.value = { hour: 0, minute: 0, second: 0 };
+  };
+
+  watch(active, (isActive) => {
+    if (isActive) {
+      draftStartTime.value = timePartsOf(model.value.start);
+      draftEndTime.value = timePartsOf(model.value.end);
+    } else {
+      rangeHover.value = null;
+    }
+  });
+
+  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/DateRangePicker/DateRangePicker.types.ts

@@ -0,0 +1,23 @@
+import type { IconName } from "~/types/icons";
+
+export interface UixyDateRange {
+  start: Date | null;
+  end: Date | null;
+}
+
+export interface UixyDateRangePickerProps {
+  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/DateRangePicker/index.ts

@@ -0,0 +1,11 @@
+import UixyDateRangePicker from "./DateRangePicker.component.vue";
+import {
+  type UixyDateRangePickerProps,
+  type UixyDateRange,
+} from "./DateRangePicker.types";
+
+export {
+  UixyDateRangePicker,
+  type UixyDateRangePickerProps,
+  type UixyDateRange,
+};

package/templates/components/FileUpload/FileUpload.component.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="flex w-full flex-col gap-2">
+    <input
+      ref="inputRef"
+      type="file"
+      class="hidden"
+      :accept="props.accept"
+      :multiple="props.multiple"
+      :disabled="props.disabled"
+      @change="onInputChange"
+    />
+
+    <div
+      v-if="props.variant === 'button'"
+      class="flex flex-wrap items-center gap-3"
+    >
+      <uixy-button
+        :variant="props.buttonVariant ?? 'secondary'"
+        :size="props.buttonSize ?? 'md'"
+        :icon="props.icon ?? 'upload'"
+        :disabled="props.disabled"
+        type="button"
+        @click="open"
+      >
+        {{ props.label ?? "Upload file" }}
+      </uixy-button>
+      <span v-if="props.hint" :class="dropzoneHintStyles()">{{
+        props.hint
+      }}</span>
+    </div>
+
+    <div
+      v-else
+      role="button"
+      :tabindex="props.disabled ? -1 : 0"
+      :aria-disabled="props.disabled || undefined"
+      :class="dropzoneStyles({ state })"
+      @click="open"
+      @keydown.enter.prevent="open"
+      @keydown.space.prevent="open"
+      @dragenter.prevent="onDragEnter"
+      @dragover.prevent
+      @dragleave.prevent="onDragLeave"
+      @drop.prevent="onDrop"
+    >
+      <uixy-icon
+        :name="props.icon ?? 'cloud-upload'"
+        :class="dropzoneIconStyles({ state })"
+      />
+
+      <div class="flex flex-col gap-0.5">
+        <span :class="dropzoneLabelStyles({ state })">
+          {{ props.label ?? "Click to upload or drag and drop" }}
+        </span>
+        <span v-if="props.hint" :class="dropzoneHintStyles()">{{
+          props.hint
+        }}</span>
+      </div>
+    </div>
+
+    <div v-if="!props.hideList && model.length" :class="fileListStyles()">
+      <div
+        v-for="(file, index) in model"
+        :key="fileKey(file)"
+        :class="fileRowStyles()"
+      >
+        <uixy-icon :name="fileIconFor(file)" :class="fileIconStyles()" />
+        <span :class="fileNameStyles()">{{ file.name }}</span>
+        <span :class="fileSizeStyles()">{{ formatSize(file.size) }}</span>
+        <uixy-icon-button
+          icon="close"
+          variant="tertiary"
+          size="sm"
+          :disabled="props.disabled"
+          aria-label="Remove file"
+          @click="removeFile(index)"
+        />
+      </div>
+    </div>
+
+    <div v-if="text" class="h-4">
+      <animate-presence mode="wait" :initial="false">
+        <motion.div
+          :key="status"
+          :initial="{ opacity: 0, y: '-4px' }"
+          :animate="{ opacity: 1, y: 0 }"
+          :exit="{ opacity: 0, y: '-4px' }"
+          :transition="{ duration: 0.125 }"
+        >
+          <p :class="helperStyles({ status })">{{ text }}</p>
+        </motion.div>
+      </animate-presence>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { UixyIcon } from "../Icon";
+  import { UixyButton } from "../Button";
+  import { UixyIconButton } from "../IconButton";
+  import { AnimatePresence, motion } from "motion-v";
+  import type { IconName } from "~/types/icons";
+  import type {
+    UixyFileUploadProps,
+    UixyFileUploadEmits,
+    UixyFileRejection,
+  } from "./FileUpload.types";
+  import {
+    dropzoneStyles,
+    dropzoneIconStyles,
+    dropzoneLabelStyles,
+    dropzoneHintStyles,
+    fileListStyles,
+    fileRowStyles,
+    fileIconStyles,
+    fileNameStyles,
+    fileSizeStyles,
+    helperStyles,
+  } from "./FileUpload.styles";
+
+  const props = defineProps<UixyFileUploadProps>();
+
+  const emits = defineEmits<UixyFileUploadEmits>();
+
+  const model = defineModel<File[]>({ default: () => [] });
+
+  const inputRef = ref<HTMLInputElement>();
+
+  const dragDepth = ref(0);
+
+  const lastError = ref<string | null>(null);
+
+  const isDragging = computed(() => dragDepth.value > 0);
+
+  const status = computed(() => {
+    if (props.disabled) return "disabled";
+
+    if (props.status === "error" || lastError.value) return "error";
+
+    return "default";
+  });
+
+  const state = computed(() => {
+    if (props.disabled) return "disabled";
+
+    if (isDragging.value) return "dragging";
+
+    if (props.status === "error" || lastError.value) return "error";
+
+    return "default";
+  });
+
+  const text = computed(() => {
+    if (status.value === "error")
+      return props.errorText ?? lastError.value ?? "";
+
+    if (status.value === "default") return props.helperText ?? "";
+
+    return "";
+  });
+
+  const fileIconFor = (file: File): IconName => {
+    if (file.type.startsWith("image/")) return "image";
+
+    return "file";
+  };
+
+  const fileKey = (file: File) =>
+    `${file.name}-${file.size}-${file.lastModified}`;
+
+  const formatSize = (bytes: number) => {
+    if (bytes === 0) return "0 B";
+
+    const units = ["B", "KB", "MB", "GB"];
+    const i = Math.min(
+      units.length - 1,
+      Math.floor(Math.log(bytes) / Math.log(1024)),
+    );
+
+    const value = bytes / Math.pow(1024, i);
+
+    return `${Number.isInteger(value) ? value : value.toFixed(1)} ${units[i]}`;
+  };
+
+  const matchesAccept = (file: File) => {
+    const accept = props.accept?.trim();
+    if (!accept) return true;
+
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+
+    return accept
+      .split(",")
+      .map((token) => token.trim().toLowerCase())
+      .filter(Boolean)
+      .some((token) => {
+        if (token.startsWith(".")) return name.endsWith(token);
+        if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+        return type === token;
+      });
+  };
+
+  const rejectionMessage = (rejections: UixyFileRejection[]) => {
+    const reasons = new Set(rejections.map((r) => r.reason));
+    const parts: string[] = [];
+
+    if (reasons.has("type")) parts.push("unsupported type");
+    if (reasons.has("size") && props.maxSize)
+      parts.push(`larger than ${formatSize(props.maxSize)}`);
+    if (reasons.has("count")) parts.push("over the file limit");
+
+    const count = rejections.length;
+
+    return `${count} file${count > 1 ? "s" : ""} rejected${
+      parts.length ? ` — ${parts.join(", ")}` : ""
+    }.`;
+  };
+
+  const open = () => {
+    if (props.disabled) return;
+
+    inputRef.value?.click();
+  };
+
+  const handleFiles = (fileList: FileList | null) => {
+    if (props.disabled || !fileList) return;
+
+    const limit = props.multiple ? props.maxFiles : 1;
+    const current = props.multiple ? model.value.slice() : [];
+    const accepted: File[] = [];
+    const rejections: UixyFileRejection[] = [];
+
+    for (const file of Array.from(fileList)) {
+      if (!matchesAccept(file)) {
+        rejections.push({ file, reason: "type" });
+      } else if (props.maxSize !== undefined && file.size > props.maxSize) {
+        rejections.push({ file, reason: "size" });
+      } else if (
+        limit !== undefined &&
+        current.length + accepted.length >= limit
+      ) {
+        rejections.push({ file, reason: "count" });
+      } else {
+        accepted.push(file);
+      }
+    }
+
+    if (accepted.length) {
+      const next = props.multiple ? [...current, ...accepted] : [accepted[0]!];
+      model.value = next;
+      lastError.value = null;
+      emits("change", next);
+    }
+
+    if (rejections.length) {
+      lastError.value = rejectionMessage(rejections);
+      emits("reject", rejections);
+    }
+
+    if (inputRef.value) inputRef.value.value = "";
+  };
+
+  const onInputChange = (event: Event) => {
+    handleFiles((event.target as HTMLInputElement).files);
+  };
+
+  const onDrop = (event: DragEvent) => {
+    dragDepth.value = 0;
+    if (props.disabled) return;
+
+    handleFiles(event.dataTransfer?.files ?? null);
+  };
+
+  const onDragEnter = () => {
+    if (props.disabled) return;
+
+    dragDepth.value += 1;
+  };
+
+  const onDragLeave = () => {
+    if (props.disabled) return;
+
+    dragDepth.value = Math.max(0, dragDepth.value - 1);
+  };
+
+  const removeFile = (index: number) => {
+    if (props.disabled) return;
+
+    const next = model.value.slice();
+    next.splice(index, 1);
+
+    model.value = next;
+    lastError.value = null;
+
+    emits("change", next);
+  };
+
+  const clear = () => {
+    model.value = [];
+    lastError.value = null;
+
+    emits("change", []);
+  };
+
+  defineExpose({ open, clear });
+</script>