@umbra.ui/core 0.1.0

package/src/components/pickers/DatePicker/theme.css

@@ -0,0 +1,22 @@
+@import "../theme.css";
+
+/* Light theme */
+:root {
+  /* Weekdays */
+  --datepicker-weekdays-opacity: 0.5;
+
+  /* Selected Day */
+  --datepicker-day-selected-bg: #acd8fc;
+  --datepicker-day-selected-border: #5eb1ef;
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Weekdays */
+  --datepicker-weekdays-opacity: 0.5;
+
+  /* Selected Day */
+  --datepicker-day-selected-bg: #0090ff;
+  --datepicker-day-selected-border: #eeeeee;
+}

package/src/components/pickers/FilePicker/FilePicker.vue

@@ -0,0 +1,534 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import gsap from "gsap";
+import { type FileError, type DropState } from "./types";
+import { icons } from "@umbra-ui/icons";
+import "./theme.css";
+
+export interface FileDropProps {
+  accept?: string | string[];
+  multiple?: boolean;
+  disabled?: boolean;
+  maxSize?: number; // in bytes
+  maxFiles?: number;
+  recursive?: boolean; // for directory traversal
+  appendFiles?: boolean; // append new files or replace
+}
+
+// Props
+const props = withDefaults(defineProps<FileDropProps>(), {
+  accept: "*/*",
+  multiple: true,
+  disabled: false,
+  maxSize: Infinity,
+  maxFiles: Infinity,
+  recursive: true,
+  appendFiles: true,
+});
+
+// Emits
+const emit = defineEmits<{
+  "update:files": [files: File[]];
+  error: [errors: FileError[]];
+  drop: [files: File[]];
+}>();
+
+// Helper to get the correct icon component
+const getIconComponent = (iconName: string) => {
+  return (
+    icons[iconName as keyof typeof icons] || icons.note || icons["circle-plus"]
+  );
+};
+
+// State
+const dropState = ref<DropState>({
+  isDragging: false,
+  isProcessing: false,
+  dragCount: 0,
+});
+
+const droppedFiles = ref<File[]>([]);
+const errors = ref<FileError[]>([]);
+
+// Refs
+const dropZone = ref<HTMLElement>();
+const overlay = ref<HTMLElement>();
+
+// Computed
+const acceptedTypes = computed(() => {
+  if (Array.isArray(props.accept)) {
+    return props.accept;
+  }
+  return props.accept.split(",").map((type) => type.trim());
+});
+
+const isActive = computed(() => !props.disabled && dropState.value.isDragging);
+
+// File validation
+const validateFile = (file: File): string | null => {
+  // Check file type
+  if (
+    props.accept !== "*/*" &&
+    !acceptedTypes.value.some((type) => {
+      if (type.startsWith(".")) {
+        return file.name.toLowerCase().endsWith(type.toLowerCase());
+      }
+      if (type.endsWith("/*")) {
+        const category = type.split("/")[0];
+        return file.type.startsWith(category);
+      }
+      return file.type === type;
+    })
+  ) {
+    return `File type not accepted. Accepted types: ${acceptedTypes.value.join(
+      ", "
+    )}`;
+  }
+
+  // Check file size
+  if (file.size > props.maxSize) {
+    return `File size exceeds maximum of ${formatFileSize(props.maxSize)}`;
+  }
+
+  return null;
+};
+
+// Utility functions
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+};
+
+// File processing
+const processFiles = async (items: DataTransferItemList) => {
+  dropState.value.isProcessing = true;
+  const newFiles: File[] = [];
+  const fileErrors: FileError[] = [];
+
+  const processEntry = async (entry: FileSystemEntry): Promise<void> => {
+    if (entry.isFile) {
+      return new Promise((resolve) => {
+        (entry as FileSystemFileEntry).file((file) => {
+          const error = validateFile(file);
+          if (error) {
+            fileErrors.push({ file: file.name, error });
+          } else if (
+            droppedFiles.value.length + newFiles.length <
+            props.maxFiles
+          ) {
+            newFiles.push(file);
+          } else {
+            fileErrors.push({
+              file: file.name,
+              error: `Maximum number of files (${props.maxFiles}) exceeded`,
+            });
+          }
+          resolve();
+        });
+      });
+    } else if (entry.isDirectory && props.recursive) {
+      const directoryReader = (
+        entry as FileSystemDirectoryEntry
+      ).createReader();
+      return new Promise((resolve) => {
+        const readAllEntries = async () => {
+          directoryReader.readEntries(async (entries) => {
+            if (entries.length === 0) {
+              resolve();
+              return;
+            }
+            await Promise.all(entries.map(processEntry));
+            await readAllEntries();
+          });
+        };
+        readAllEntries();
+      });
+    }
+  };
+
+  // Convert items to entries and process
+  const promises: Promise<void>[] = [];
+  for (let i = 0; i < items.length; i++) {
+    const entry = items[i].webkitGetAsEntry();
+    if (entry) {
+      promises.push(processEntry(entry));
+    }
+  }
+
+  await Promise.all(promises);
+
+  // Handle multiple file restriction
+  if (!props.multiple) {
+    if (newFiles.length > 0) {
+      droppedFiles.value = [newFiles[0]];
+      if (newFiles.length > 1) {
+        fileErrors.push({
+          file: "Multiple files",
+          error: "Only one file allowed",
+        });
+      }
+    }
+  } else {
+    // Append or replace based on prop
+    if (props.appendFiles) {
+      droppedFiles.value = [...droppedFiles.value, ...newFiles];
+    } else {
+      droppedFiles.value = newFiles;
+    }
+  }
+
+  errors.value = fileErrors;
+  dropState.value.isProcessing = false;
+
+  emit("update:files", droppedFiles.value);
+  emit("drop", newFiles); // Emit only the newly dropped files
+  if (fileErrors.length > 0) {
+    emit("error", fileErrors);
+  }
+};
+
+// Drag handlers
+const handleDragEnter = (e: DragEvent) => {
+  e.preventDefault();
+  if (props.disabled) return;
+
+  dropState.value.dragCount++;
+  if (dropState.value.dragCount === 1) {
+    dropState.value.isDragging = true;
+    showOverlay();
+  }
+};
+
+const handleDragLeave = (e: DragEvent) => {
+  e.preventDefault();
+  if (props.disabled) return;
+
+  dropState.value.dragCount--;
+  if (dropState.value.dragCount === 0) {
+    dropState.value.isDragging = false;
+    hideOverlay();
+  }
+};
+
+const handleDragOver = (e: DragEvent) => {
+  e.preventDefault();
+  if (props.disabled) return;
+
+  // Set the drop effect
+  if (e.dataTransfer) {
+    e.dataTransfer.dropEffect = "copy";
+  }
+};
+
+const handleDrop = async (e: DragEvent) => {
+  e.preventDefault();
+  dropState.value.dragCount = 0;
+  dropState.value.isDragging = false;
+  hideOverlay();
+
+  if (props.disabled || !e.dataTransfer) return;
+
+  await processFiles(e.dataTransfer.items);
+};
+
+// Animation functions
+const showOverlay = () => {
+  if (!overlay.value) return;
+  gsap.to(overlay.value, {
+    duration: 0.2,
+    opacity: 1,
+    scale: 1,
+    ease: "power2.out",
+  });
+};
+
+const hideOverlay = () => {
+  if (!overlay.value) return;
+  gsap.to(overlay.value, {
+    duration: 0.2,
+    opacity: 0,
+    scale: 0.95,
+    ease: "power2.in",
+  });
+};
+
+// File input handler (for click-to-upload)
+const handleFileInput = (e: Event) => {
+  const input = e.target as HTMLInputElement;
+  if (!input.files) return;
+
+  const files = Array.from(input.files);
+  const validFiles: File[] = [];
+  const fileErrors: FileError[] = [];
+
+  files.forEach((file) => {
+    const error = validateFile(file);
+    if (error) {
+      fileErrors.push({ file: file.name, error });
+    } else if (droppedFiles.value.length + validFiles.length < props.maxFiles) {
+      validFiles.push(file);
+    } else {
+      fileErrors.push({
+        file: file.name,
+        error: `Maximum number of files (${props.maxFiles}) exceeded`,
+      });
+    }
+  });
+
+  if (!props.multiple && validFiles.length > 0) {
+    droppedFiles.value = [validFiles[0]];
+  } else {
+    if (props.appendFiles) {
+      droppedFiles.value = [...droppedFiles.value, ...validFiles];
+    } else {
+      droppedFiles.value = validFiles;
+    }
+  }
+
+  errors.value = fileErrors;
+
+  emit("update:files", droppedFiles.value);
+  emit("drop", validFiles); // Emit only the newly added files
+  if (fileErrors.length > 0) {
+    emit("error", fileErrors);
+  }
+
+  // Reset input value to allow selecting the same file again
+  input.value = "";
+};
+
+// Public methods
+const openFileDialog = () => {
+  const input = dropZone.value?.querySelector(
+    'input[type="file"]'
+  ) as HTMLInputElement;
+  input?.click();
+};
+
+const clearFiles = () => {
+  droppedFiles.value = [];
+  errors.value = [];
+  emit("update:files", []);
+};
+
+// Expose public methods
+defineExpose({
+  openFileDialog,
+  clearFiles,
+  files: droppedFiles,
+  errors,
+});
+</script>
+
+<template>
+  <div
+    ref="dropZone"
+    :class="[
+      $style.container,
+      {
+        [$style.active]: isActive,
+        [$style.disabled]: disabled,
+        [$style.processing]: dropState.isProcessing,
+      },
+    ]"
+    @dragenter="handleDragEnter"
+    @dragleave="handleDragLeave"
+    @dragover="handleDragOver"
+    @drop="handleDrop"
+  >
+    <!-- Hidden file input -->
+    <input
+      type="file"
+      :class="$style.input"
+      :accept="acceptedTypes.join(',')"
+      :multiple="multiple"
+      :disabled="disabled"
+      @change="handleFileInput"
+    />
+
+    <!-- Default slot content -->
+    <div :class="$style.content" @click="openFileDialog">
+      <slot>
+        <div :class="$style.defaultContent">
+          <component
+            :class="$style.icon"
+            :is="getIconComponent('music')"
+            :size="30"
+          />
+          <div :class="$style.labels">
+            <p :class="[$style.title, 'body']">
+              Drop files here or click to upload
+            </p>
+            <p :class="[$style.subtitle, 'subheadline']">
+              <template v-if="accept !== '*/*'">
+                Accepts: {{ acceptedTypes.join(", ") }}
+              </template>
+              <template v-if="maxSize !== Infinity">
+                • Max size: {{ formatFileSize(maxSize) }}
+              </template>
+            </p>
+          </div>
+        </div>
+      </slot>
+    </div>
+
+    <!-- Drag overlay -->
+    <div ref="overlay" :class="$style.overlay">
+      <slot name="overlay">
+        <div :class="$style.overlayContent">
+          <component :is="getIconComponent('music')" :size="30" />
+          <p :class="[$style.overlayText, 'body']">Drop files here</p>
+        </div>
+      </slot>
+    </div>
+
+    <!-- Processing indicator -->
+    <div v-if="dropState.isProcessing" :class="$style.processing">
+      <slot name="processing">
+        <div :class="$style.spinner"></div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style module>
+.container {
+  position: relative;
+  width: 100%;
+  min-height: 200px;
+  border: 1px dashed var(--filepicker-container-border);
+  border-radius: 0.706rem;
+  background-color: var(--filepicker-container-bg);
+  transition: all 0.2s ease;
+  overflow: hidden;
+}
+
+.container:hover:not(.disabled) {
+  border-color: var(--filepicker-container-hover-border);
+  background-color: var(--filepicker-container-hover-bg);
+}
+
+.container.active {
+  border: 1px solid var(--filepicker-container-active-border);
+  background-color: var(--filepicker-container-active-bg);
+  color: var(--filepicker-container-active-text);
+}
+
+.container.active .title,
+.container.active .subtitle,
+.container.active .icon {
+  opacity: 0;
+}
+
+.container.disabled {
+  opacity: var(--filepicker-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.container.processing {
+  pointer-events: none;
+}
+
+.input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  padding: 2rem;
+  cursor: pointer;
+}
+
+.disabled .content {
+  cursor: not-allowed;
+}
+
+.defaultContent {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.icon {
+  color: var(--filepicker-icon-color);
+}
+
+.labels {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.25rem;
+}
+
+.title {
+  color: var(--filepicker-title-color);
+}
+
+.subtitle {
+  color: var(--filepicker-subtitle-color);
+}
+
+.overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--filepicker-overlay-bg);
+  backdrop-filter: blur(4px);
+  opacity: 0;
+  scale: 0.95;
+  pointer-events: none;
+}
+
+.overlayContent {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.overlayIcon {
+  width: 4rem;
+  height: 4rem;
+  margin: 0 auto 1rem;
+  color: var(--background-1);
+}
+
+.overlayText {
+  color: var(--filepicker-overlay-text);
+}
+
+.processing {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--filepicker-processing-bg);
+}
+
+.spinner {
+  width: 2rem;
+  height: 2rem;
+  border: 3px solid var(--filepicker-spinner-border);
+  border-top-color: var(--filepicker-spinner-border-top);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>