v-uixy 1.4.0 → 1.6.0

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>

package/templates/components/FileUpload/FileUpload.styles.ts

@@ -0,0 +1,74 @@
+import styles from "~/utils/styles";
+
+export const dropzoneStyles = styles(
+  "relative flex w-full flex-col items-center justify-center gap-2 rounded-2 border border-dashed px-6 py-8 text-center transition-colors duration-150 ease-in-out outline-offset-2 outline-gray-300",
+  {
+    state: {
+      default:
+        "cursor-pointer border-gray-300 bg-white hover:border-gray-400 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-1000 dark:hover:border-gray-700 dark:hover:bg-gray-900",
+      dragging:
+        "cursor-copy border-gray-500 bg-gray-100 dark:border-gray-500 dark:bg-gray-900",
+      error:
+        "cursor-pointer border-error-700 bg-white hover:bg-gray-100 dark:border-error-900 dark:bg-gray-1000 dark:hover:bg-gray-900",
+      disabled:
+        "pointer-events-none cursor-not-allowed border-gray-300 bg-gray-200 dark:border-gray-900 dark:bg-gray-900",
+    },
+  }
+);
+
+export const dropzoneIconStyles = styles(
+  "h-6 w-6 transition-colors duration-150 ease-in-out",
+  {
+    state: {
+      default: "text-gray-400 dark:text-gray-600",
+      dragging: "text-gray-700 dark:text-gray-300",
+      error: "text-error-600 dark:text-error-500",
+      disabled: "text-gray-400 dark:text-gray-700",
+    },
+  }
+);
+
+export const dropzoneLabelStyles = styles(
+  "text-sm font-500 text-gray-800 dark:text-gray-200",
+  {
+    state: {
+      default: "",
+      dragging: "",
+      error: "",
+      disabled: "text-gray-500 dark:text-gray-700",
+    },
+  }
+);
+
+export const dropzoneHintStyles = styles(
+  "text-xs text-gray-500 dark:text-gray-600"
+);
+
+export const fileListStyles = styles("flex flex-col gap-2");
+
+export const fileRowStyles = styles(
+  "flex items-center gap-3 rounded-1 border border-gray-300 bg-white px-3 py-2 dark:border-gray-900 dark:bg-gray-1000"
+);
+
+export const fileIconStyles = styles(
+  "h-5 w-5 shrink-0 text-gray-500 dark:text-gray-500"
+);
+
+export const fileNameStyles = styles(
+  "flex-1 min-w-0 truncate text-sm text-gray-800 dark:text-gray-200"
+);
+
+export const fileSizeStyles = styles(
+  "shrink-0 text-xs text-gray-500 dark:text-gray-600"
+);
+
+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",
+    },
+  }
+);

package/templates/components/FileUpload/FileUpload.types.ts

@@ -0,0 +1,31 @@
+import type { IconName } from "~/types/icons";
+
+export type UixyFileRejectionReason = "type" | "size" | "count";
+
+export interface UixyFileRejection {
+  file: File;
+  reason: UixyFileRejectionReason;
+}
+
+export interface UixyFileUploadProps {
+  variant?: "dropzone" | "button";
+  buttonVariant?: "primary" | "secondary" | "tertiary" | "quaternary";
+  buttonSize?: "sm" | "md" | "lg";
+  accept?: string;
+  multiple?: boolean;
+  maxSize?: number;
+  maxFiles?: number;
+  disabled?: boolean;
+  icon?: IconName;
+  label?: string;
+  hint?: string;
+  status?: "default" | "error";
+  helperText?: string;
+  errorText?: string;
+  hideList?: boolean;
+}
+
+export interface UixyFileUploadEmits {
+  (event: "change", files: File[]): void;
+  (event: "reject", rejections: UixyFileRejection[]): void;
+}

package/templates/components/FileUpload/index.ts

@@ -0,0 +1,15 @@
+import UixyFileUpload from "./FileUpload.component.vue";
+import {
+  type UixyFileUploadProps,
+  type UixyFileUploadEmits,
+  type UixyFileRejection,
+  type UixyFileRejectionReason,
+} from "./FileUpload.types";
+
+export {
+  UixyFileUpload,
+  type UixyFileUploadProps,
+  type UixyFileUploadEmits,
+  type UixyFileRejection,
+  type UixyFileRejectionReason,
+};

package/templates/components/InputOTP/InputOTP.component.vue

@@ -45,7 +45,9 @@
   import { inputOTPStyles } from "./InputOTP.styles";
   import type { UixyInputOTPProps } from "./InputOTP.types";
 
-  const props = defineProps<UixyInputOTPProps>();
+  const props = withDefaults(defineProps<UixyInputOTPProps>(), {
+    autoFocus: true,
+  });
 
   const INPUT_LENGTH = 6 as const;
   const PLACES = [
@@ -153,6 +155,6 @@
   });
 
   onMounted(() => {
-    inputRefs[0].value?.focus();
+    if (props.autoFocus) inputRefs[0].value?.focus();
   });
 </script>

package/templates/components/InputOTP/InputOTP.types.ts

@@ -1,4 +1,5 @@
 export interface UixyInputOTPProps {
   disabled?: boolean;
+  autoFocus?: boolean;
   filled?: (code: string) => Promise<boolean>;
 }

package/templates/components/Popover/Popover.component.vue

@@ -17,7 +17,7 @@
             :exit="{ opacity: 0, scale: 0.8 }"
             :transition="{ duration: 0.15, ease: 'easeInOut' }"
           >
-            <slot />
+            <slot :close="handleLeave" />
           </motion.div>
         </div>
       </motion.div>

package/templates/components/SegmentedControl/SegmentedControl.component.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+    role="tablist"
+    :class="
+      segmentedTrackStyles({
+        fullWidth: props.fullWidth,
+        disabled: props.disabled,
+      })
+    "
+  >
+    <button
+      v-for="option in props.options"
+      :key="option.value"
+      type="button"
+      role="tab"
+      :aria-selected="model === option.value"
+      :disabled="props.disabled || option.disabled"
+      :class="
+        segmentStyles({
+          size: props.size ?? 'md',
+          selected: model === option.value,
+          disabled: !!option.disabled,
+          fullWidth: props.fullWidth,
+        })
+      "
+      @click="select(option)"
+    >
+      <animate-presence mode="wait" :initial="false">
+        <motion.div
+          v-if="model === option.value"
+          :layout-id="pillLayoutId"
+          :initial="{ opacity: 0 }"
+          :animate="{ opacity: 1 }"
+          :exit="{ opacity: 0 }"
+          :transition="{ duration: 0.2, ease: 'easeInOut' }"
+          :class="segmentPillStyles()"
+        />
+      </animate-presence>
+
+      <span :class="segmentContentStyles()">
+        <uixy-icon
+          v-if="option.icon"
+          :name="option.icon"
+          :class="segmentIconStyles({ size: props.size ?? 'md' })"
+        />
+        <span v-if="option.label">{{ option.label }}</span>
+      </span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { motion, AnimatePresence } from "motion-v";
+  import { v4 as uuidv4 } from "uuid";
+  import { UixyIcon } from "../Icon";
+  import type {
+    UixySegmentedControlProps,
+    UixySegmentedOption,
+  } from "./SegmentedControl.types";
+  import {
+    segmentedTrackStyles,
+    segmentStyles,
+    segmentPillStyles,
+    segmentContentStyles,
+    segmentIconStyles,
+  } from "./SegmentedControl.styles";
+
+  const props = defineProps<UixySegmentedControlProps>();
+
+  const model = defineModel<string | number>();
+
+  const pillLayoutId = computed(() => `uixy-segmented-${uuidv4()}`);
+
+  const select = (option: UixySegmentedOption) => {
+    if (props.disabled || option.disabled) return;
+
+    model.value = option.value;
+  };
+
+  onBeforeMount(() => {
+    if (model.value === undefined && props.options.length > 0) {
+      model.value = props.options[0]?.value;
+    }
+  });
+</script>

package/templates/components/SegmentedControl/SegmentedControl.styles.ts

@@ -0,0 +1,55 @@
+import styles from "~/utils/styles";
+
+export const segmentedTrackStyles = styles(
+  "relative inline-flex items-center gap-1 rounded-1 bg-gray-200 p-0.5 dark:bg-gray-900",
+  {
+    fullWidth: {
+      true: "flex w-full",
+      false: "",
+    },
+    disabled: {
+      true: "pointer-events-none opacity-50",
+      false: "",
+    },
+  },
+);
+
+export const segmentStyles = styles(
+  "relative flex items-center justify-center rounded-1 font-500 cursor-pointer select-none transition-colors duration-150 ease-in-out outline-offset-2 outline-gray-300",
+  {
+    size: {
+      sm: "px-2.5 py-1 text-xs",
+      md: "px-3 py-1 text-sm",
+      lg: "px-4 py-1.5 text-sm",
+    },
+    selected: {
+      true: "text-black dark:text-white",
+      false:
+        "text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-gray-100",
+    },
+    disabled: {
+      true: "cursor-not-allowed text-gray-400 hover:text-gray-400 dark:text-gray-700 dark:hover:text-gray-700",
+      false: "",
+    },
+    fullWidth: {
+      true: "flex-1",
+      false: "",
+    },
+  },
+);
+
+export const segmentPillStyles = styles(
+  "absolute inset-0 rounded-1 bg-white shadow-xs dark:bg-gray-700",
+);
+
+export const segmentContentStyles = styles(
+  "relative z-10 flex items-center gap-1.5",
+);
+
+export const segmentIconStyles = styles("shrink-0", {
+  size: {
+    sm: "h-3.5 w-3.5",
+    md: "h-4 w-4",
+    lg: "h-4 w-4",
+  },
+});

package/templates/components/SegmentedControl/SegmentedControl.types.ts

@@ -0,0 +1,15 @@
+import type { IconName } from "~/types/icons";
+
+export interface UixySegmentedOption {
+  label?: string;
+  value: string | number;
+  icon?: IconName;
+  disabled?: boolean;
+}
+
+export interface UixySegmentedControlProps {
+  options: UixySegmentedOption[];
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  fullWidth?: boolean;
+}

package/templates/components/SegmentedControl/index.ts

@@ -0,0 +1,11 @@
+import UixySegmentedControl from "./SegmentedControl.component.vue";
+import {
+  type UixySegmentedControlProps,
+  type UixySegmentedOption,
+} from "./SegmentedControl.types";
+
+export {
+  UixySegmentedControl,
+  type UixySegmentedControlProps,
+  type UixySegmentedOption,
+};