create-nuxt-base 0.3.17 → 1.0.3

package/nuxt-base-template/app/components/Upload/TusFileUpload.vue

@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import type { UploadItem } from '~/interfaces/upload.interface';
+
+// ============================================================================
+// Props & Emits
+// ============================================================================
+interface Props {
+  /** Erlaubte Dateitypen (MIME types oder Extensions) */
+  accept?: string;
+  /** Upload automatisch starten */
+  autoStart?: boolean;
+  /** Chunk-Groesse fuer TUS */
+  chunkSize?: number;
+  /** Beschreibung fuer Dropzone */
+  description?: string;
+  /** Deaktiviert */
+  disabled?: boolean;
+  /** TUS Upload Endpoint */
+  endpoint?: string;
+  /** Label fuer Dropzone */
+  label?: string;
+  /** Layout der Dateiliste */
+  layout?: 'grid' | 'list';
+  /** Maximale Dateigroesse in Bytes */
+  maxSize?: number;
+  /** Zusaetzliche Metadaten */
+  metadata?: Record<string, string>;
+  /** Mehrere Dateien erlauben */
+  multiple?: boolean;
+  /** Parallele Uploads */
+  parallelUploads?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  accept: '*/*',
+  autoStart: true,
+  chunkSize: 5 * 1024 * 1024,
+  description: 'Dateien werden automatisch hochgeladen',
+  label: 'Dateien hier ablegen',
+  layout: 'list',
+  maxSize: 100 * 1024 * 1024,
+  multiple: true,
+  parallelUploads: 3,
+});
+
+const emit = defineEmits<{
+  /** Alle Uploads abgeschlossen */
+  complete: [items: UploadItem[]];
+  /** Upload-Fehler */
+  error: [item: UploadItem, error: Error];
+  /** Ein Upload abgeschlossen */
+  success: [item: UploadItem];
+  /** Files geaendert */
+  'update:modelValue': [files: File[]];
+}>();
+
+// ============================================================================
+// Composables
+// ============================================================================
+const toast = useToast();
+const { formatDuration, formatFileSize } = useFile();
+
+// ============================================================================
+// TUS Upload Setup
+// ============================================================================
+const { addFiles, cancelAll, cancelUpload, clearCompleted, isUploading, pauseAll, pauseUpload, resumeAll, resumeUpload, retryUpload, totalProgress, uploads } = useTusUpload({
+  autoStart: props.autoStart,
+  chunkSize: props.chunkSize,
+  endpoint: props.endpoint,
+  metadata: props.metadata,
+  onError: (item, error) => {
+    toast.add({
+      color: 'error',
+      description: item.file.name,
+      title: 'Upload fehlgeschlagen',
+    });
+    emit('error', item, error);
+  },
+  onSuccess: (item) => {
+    toast.add({
+      color: 'success',
+      description: item.file.name,
+      title: 'Upload abgeschlossen',
+    });
+    emit('success', item);
+  },
+  parallelUploads: props.parallelUploads,
+});
+
+// ============================================================================
+// State
+// ============================================================================
+const files = ref<File[]>([]);
+
+// ============================================================================
+// Watchers
+// ============================================================================
+// Neue Dateien zu TUS hinzufuegen
+watch(
+  files,
+  (newFiles, oldFiles) => {
+    const addedFiles = newFiles.filter((f) => !oldFiles?.includes(f));
+    if (addedFiles.length > 0) {
+      // Validierung
+      const validFiles = addedFiles.filter((file) => {
+        if (file.size > props.maxSize) {
+          toast.add({
+            color: 'error',
+            description: `${file.name} ist zu gross (max. ${formatFileSize(props.maxSize)})`,
+            title: 'Datei zu gross',
+          });
+          return false;
+        }
+        return true;
+      });
+
+      if (validFiles.length > 0) {
+        addFiles(validFiles);
+      }
+    }
+    emit('update:modelValue', newFiles);
+  },
+  { deep: true },
+);
+
+// Emit complete wenn alle fertig
+const completedUploads = computed(() => uploads.value.filter((u) => u.status === 'completed'));
+watch([completedUploads, isUploading], ([completed, uploading]) => {
+  if (completed.length > 0 && !uploading && uploads.value.every((u) => u.status === 'completed' || u.status === 'error')) {
+    emit('complete', completed);
+  }
+});
+
+function getStatusColor(status: string): 'error' | 'neutral' | 'success' | 'warning' {
+  switch (status) {
+    case 'completed':
+      return 'success';
+    case 'error':
+      return 'error';
+    case 'paused':
+      return 'warning';
+    default:
+      return 'neutral';
+  }
+}
+
+function getStatusLabel(status: string): string {
+  switch (status) {
+    case 'completed':
+      return 'Fertig';
+    case 'error':
+      return 'Fehler';
+    case 'paused':
+      return 'Pausiert';
+    case 'uploading':
+      return 'Hochladen';
+    default:
+      return 'Wartend';
+  }
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+function getUploadForFile(file: File, index: number): undefined | UploadItem {
+  // Versuche ueber Index zu matchen (funktioniert wenn Reihenfolge gleich)
+  const upload = uploads.value[index];
+  if (upload?.file.name === file.name && upload?.file.size === file.size) {
+    return upload;
+  }
+  // Fallback: Suche ueber Name und Groesse
+  return uploads.value.find((u) => u.file.name === file.name && u.file.size === file.size);
+}
+
+// ============================================================================
+// Expose fuer Parent-Zugriff
+// ============================================================================
+defineExpose({
+  cancelAll,
+  clearCompleted,
+  isUploading,
+  pauseAll,
+  resumeAll,
+  totalProgress,
+  uploads,
+});
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Nuxt UI FileUpload -->
+    <UFileUpload
+      v-model="files"
+      :accept="accept"
+      :description="description"
+      :disabled="disabled || isUploading"
+      :dropzone="!disabled"
+      :label="label"
+      :layout="layout"
+      :multiple="multiple"
+      class="w-full"
+    >
+      <!-- Custom File Slot mit TUS Progress -->
+      <template #file="{ file, index }">
+        <div class="flex w-full items-center gap-3 rounded-lg border border-default bg-default p-3">
+          <UIcon name="i-lucide-file" class="size-6 shrink-0 text-muted" />
+
+          <div class="min-w-0 flex-1">
+            <p class="truncate text-sm font-medium">{{ file.name }}</p>
+
+            <template v-if="getUploadForFile(file, index)">
+              <div class="mt-0.5 flex items-center gap-2 text-xs text-muted">
+                <span>{{ formatFileSize(file.size) }}</span>
+
+                <template v-if="getUploadForFile(file, index)?.status === 'uploading'">
+                  <span>-</span>
+                  <span>{{ getUploadForFile(file, index)?.progress.percentage }}%</span>
+                  <span>-</span>
+                  <span>{{ formatFileSize(getUploadForFile(file, index)?.progress.speed || 0) }}/s</span>
+                  <span>-</span>
+                  <span>{{ formatDuration(getUploadForFile(file, index)?.progress.remainingTime || 0) }}</span>
+                </template>
+
+                <template v-else>
+                  <span>-</span>
+                  <UBadge :color="getStatusColor(getUploadForFile(file, index)?.status || 'idle')" size="xs" variant="subtle">
+                    {{ getStatusLabel(getUploadForFile(file, index)?.status || 'idle') }}
+                  </UBadge>
+                </template>
+              </div>
+
+              <UProgress
+                v-if="getUploadForFile(file, index)?.status === 'uploading' || getUploadForFile(file, index)?.status === 'paused'"
+                :color="getUploadForFile(file, index)?.status === 'paused' ? 'warning' : 'primary'"
+                :value="getUploadForFile(file, index)?.progress.percentage || 0"
+                class="mt-2"
+                size="xs"
+              />
+            </template>
+
+            <template v-else>
+              <p class="text-xs text-muted">{{ formatFileSize(file.size) }}</p>
+            </template>
+          </div>
+
+          <!-- Actions -->
+          <div class="flex shrink-0 gap-0.5">
+            <UButton
+              v-if="getUploadForFile(file, index)?.status === 'uploading'"
+              color="neutral"
+              icon="i-lucide-pause"
+              size="xs"
+              variant="ghost"
+              @click.stop="pauseUpload(getUploadForFile(file, index)!.id)"
+            />
+            <UButton
+              v-if="getUploadForFile(file, index)?.status === 'paused'"
+              color="primary"
+              icon="i-lucide-play"
+              size="xs"
+              variant="ghost"
+              @click.stop="resumeUpload(getUploadForFile(file, index)!.id)"
+            />
+            <UButton
+              v-if="getUploadForFile(file, index)?.status === 'error'"
+              color="warning"
+              icon="i-lucide-refresh-cw"
+              size="xs"
+              variant="ghost"
+              @click.stop="retryUpload(getUploadForFile(file, index)!.id)"
+            />
+            <UButton
+              v-if="getUploadForFile(file, index)?.status !== 'completed'"
+              color="error"
+              icon="i-lucide-x"
+              size="xs"
+              variant="ghost"
+              @click.stop="cancelUpload(getUploadForFile(file, index)!.id)"
+            />
+          </div>
+        </div>
+      </template>
+
+      <!-- Actions Slot fuer Bulk-Actions -->
+      <template #files-bottom="{ files: fileList }">
+        <div v-if="fileList && Array.isArray(fileList) && fileList.length > 1 && uploads.length > 0" class="flex items-center justify-between border-t border-default pt-2">
+          <div class="text-xs text-muted">
+            <template v-if="isUploading"> {{ totalProgress.percentage }}% - {{ formatFileSize(totalProgress.speed) }}/s </template>
+            <template v-else> {{ uploads.filter((u) => u.status === 'completed').length }}/{{ uploads.length }} abgeschlossen </template>
+          </div>
+
+          <div class="flex gap-1">
+            <UButton v-if="isUploading" color="neutral" size="xs" variant="ghost" @click="pauseAll"> Alle pausieren </UButton>
+            <UButton v-if="uploads.some((u) => u.status === 'paused')" color="primary" size="xs" variant="ghost" @click="resumeAll"> Alle fortsetzen </UButton>
+            <UButton v-if="uploads.some((u) => u.status === 'completed')" color="neutral" size="xs" variant="ghost" @click="clearCompleted"> Fertige entfernen </UButton>
+            <UButton v-if="uploads.length > 0" color="error" size="xs" variant="ghost" @click="cancelAll"> Alle abbrechen </UButton>
+          </div>
+        </div>
+      </template>
+    </UFileUpload>
+  </div>
+</template>

package/nuxt-base-template/app/composables/use-better-auth.ts

@@ -0,0 +1,25 @@
+import { authClient } from '~/lib/auth-client';
+
+export function useBetterAuth() {
+  const session = authClient.useSession();
+
+  const user = computed<null | User>(() => (session.value.data?.user as User) ?? null);
+  const isAuthenticated = computed<boolean>(() => !!user.value);
+  const isAdmin = computed<boolean>(() => user.value?.role === 'admin');
+  const is2FAEnabled = computed<boolean>(() => user.value?.twoFactorEnabled ?? false);
+  const isLoading = computed<boolean>(() => session.value.isPending);
+
+  return {
+    is2FAEnabled,
+    isAdmin,
+    isAuthenticated,
+    isLoading,
+    passkey: authClient.passkey,
+    session,
+    signIn: authClient.signIn,
+    signOut: authClient.signOut,
+    signUp: authClient.signUp,
+    twoFactor: authClient.twoFactor,
+    user,
+  };
+}

package/nuxt-base-template/app/composables/use-file.ts

@@ -8,11 +8,13 @@ interface FileInfo {
 }
 
 export function useFile() {
-  const { isValidMongoID } = useHelper();
+  const config = useRuntimeConfig();
 
-  async function getFileInfo(id: string | undefined): Promise<FileInfo | null | string> {
-    const config = useRuntimeConfig();
+  function isValidMongoID(id: string): boolean {
+    return /^[a-f\d]{24}$/i.test(id);
+  }
 
+  async function getFileInfo(id: string | undefined): Promise<FileInfo | null | string> {
     if (!id) {
       return null;
     }
@@ -23,6 +25,7 @@ export function useFile() {
 
     try {
       const response = await $fetch<FileInfo>(config.public.host + '/files/info/' + id, {
+        credentials: 'include',
         method: 'GET',
       });
       return response;
@@ -32,5 +35,37 @@ export function useFile() {
     }
   }
 
-  return { getFileInfo };
+  function getFileUrl(id: string): string {
+    return `${config.public.host}/files/${id}`;
+  }
+
+  function getDownloadUrl(id: string, filename?: string): string {
+    const base = `${config.public.host}/files/download/${id}`;
+    return filename ? `${base}?filename=${encodeURIComponent(filename)}` : base;
+  }
+
+  function formatFileSize(bytes: number): string {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+  }
+
+  function formatDuration(seconds: number): string {
+    if (seconds < 60) return `${seconds}s`;
+    if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    return `${hours}h ${minutes}m`;
+  }
+
+  return {
+    formatDuration,
+    formatFileSize,
+    getDownloadUrl,
+    getFileInfo,
+    getFileUrl,
+    isValidMongoID,
+  };
 }

package/nuxt-base-template/app/composables/use-share.ts

@@ -2,7 +2,7 @@ export function useShare() {
   const route = useRoute();
 
   async function share(title?: string, text?: string, url?: string) {
-    if (!process.client) {
+    if (!import.meta.client) {
       return;
     }
 

package/nuxt-base-template/app/composables/use-tus-upload.ts

@@ -0,0 +1,278 @@
+import * as tus from 'tus-js-client';
+
+import type { UploadItem, UploadOptions, UploadProgress, UseTusUploadReturn } from '~/interfaces/upload.interface';
+
+export function useTusUpload(defaultOptions: UploadOptions = {}): UseTusUploadReturn {
+  const config = useRuntimeConfig();
+
+  // State
+  const uploadItems = ref<Map<string, UploadItem>>(new Map());
+  const tusUploads = ref<Map<string, tus.Upload>>(new Map());
+
+  // Default config
+  const defaultConfig: UploadOptions = {
+    autoStart: true,
+    chunkSize: 5 * 1024 * 1024, // 5MB chunks
+    endpoint: `${config.public.host}/files/upload`,
+    parallelUploads: 3,
+    retryDelays: [0, 1000, 3000, 5000, 10000],
+    ...defaultOptions,
+  };
+
+  // Computed
+  const uploads = computed(() => Array.from(uploadItems.value.values()));
+  const isUploading = computed(() => uploads.value.some((u) => u.status === 'uploading'));
+  const totalProgress = computed<UploadProgress>(() => {
+    const items = uploads.value;
+    if (items.length === 0) {
+      return { bytesTotal: 0, bytesUploaded: 0, percentage: 0, remainingTime: 0, speed: 0 };
+    }
+
+    const bytesUploaded = items.reduce((acc, i) => acc + i.progress.bytesUploaded, 0);
+    const bytesTotal = items.reduce((acc, i) => acc + i.progress.bytesTotal, 0);
+    const speed = items.reduce((acc, i) => acc + i.progress.speed, 0);
+
+    return {
+      bytesTotal,
+      bytesUploaded,
+      percentage: bytesTotal > 0 ? Math.round((bytesUploaded / bytesTotal) * 100) : 0,
+      remainingTime: speed > 0 ? Math.ceil((bytesTotal - bytesUploaded) / speed) : 0,
+      speed,
+    };
+  });
+
+  // Helper: Generate unique ID
+  function generateId(): string {
+    return `upload_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+  }
+
+  // Helper: Calculate speed with smoothing
+  function createSpeedTracker() {
+    let lastBytes = 0;
+    let lastTime = Date.now();
+    let smoothedSpeed = 0;
+
+    return (bytesUploaded: number): number => {
+      const now = Date.now();
+      const timeDiff = (now - lastTime) / 1000;
+      const bytesDiff = bytesUploaded - lastBytes;
+
+      if (timeDiff > 0) {
+        const currentSpeed = bytesDiff / timeDiff;
+        // Exponential moving average for smoother display
+        smoothedSpeed = smoothedSpeed === 0 ? currentSpeed : smoothedSpeed * 0.7 + currentSpeed * 0.3;
+      }
+
+      lastBytes = bytesUploaded;
+      lastTime = now;
+
+      return Math.round(smoothedSpeed);
+    };
+  }
+
+  // Update item in map (triggers reactivity)
+  function updateItem(id: string, updates: Partial<UploadItem>): void {
+    const item = uploadItems.value.get(id);
+    if (item) {
+      const newMap = new Map(uploadItems.value);
+      newMap.set(id, { ...item, ...updates });
+      uploadItems.value = newMap;
+    }
+  }
+
+  // Create TUS upload instance
+  function createTusUpload(item: UploadItem, options: UploadOptions): tus.Upload {
+    const speedTracker = createSpeedTracker();
+
+    return new tus.Upload(item.file, {
+      chunkSize: options.chunkSize || defaultConfig.chunkSize,
+      endpoint: options.endpoint || defaultConfig.endpoint,
+      headers: options.headers,
+      metadata: {
+        filename: item.file.name,
+        filetype: item.file.type,
+        ...options.metadata,
+        ...item.metadata,
+      },
+      onBeforeRequest: (req) => {
+        const xhr = req.getUnderlyingObject() as XMLHttpRequest;
+        xhr.withCredentials = true;
+      },
+      onError: (error) => {
+        updateItem(item.id, {
+          error: error.message,
+          status: 'error',
+        });
+        options.onError?.(uploadItems.value.get(item.id)!, error);
+      },
+
+      onProgress: (bytesUploaded, bytesTotal) => {
+        const speed = speedTracker(bytesUploaded);
+        const percentage = Math.round((bytesUploaded / bytesTotal) * 100);
+        const remainingTime = speed > 0 ? Math.ceil((bytesTotal - bytesUploaded) / speed) : 0;
+
+        updateItem(item.id, {
+          progress: { bytesTotal, bytesUploaded, percentage, remainingTime, speed },
+        });
+
+        options.onProgress?.(uploadItems.value.get(item.id)!);
+      },
+
+      onShouldRetry: (err) => {
+        const status = (err as { originalResponse?: { getStatus?: () => number } }).originalResponse?.getStatus?.();
+        // Don't retry on 4xx errors (except 429 Too Many Requests)
+        if (status && status >= 400 && status < 500 && status !== 429) {
+          return false;
+        }
+        return true;
+      },
+
+      onSuccess: () => {
+        const tusUpload = tusUploads.value.get(item.id);
+        const currentItem = uploadItems.value.get(item.id);
+        updateItem(item.id, {
+          completedAt: new Date(),
+          progress: { ...currentItem!.progress, percentage: 100 },
+          status: 'completed',
+          url: tusUpload?.url ?? undefined,
+        });
+        options.onSuccess?.(uploadItems.value.get(item.id)!);
+      },
+
+      retryDelays: options.retryDelays || defaultConfig.retryDelays,
+    });
+  }
+
+  // Actions
+  function addFiles(files: File | File[]): string[] {
+    const fileArray = Array.isArray(files) ? files : [files];
+    const ids: string[] = [];
+
+    for (const file of fileArray) {
+      const id = generateId();
+      const item: UploadItem = {
+        file,
+        id,
+        metadata: defaultConfig.metadata,
+        progress: { bytesTotal: file.size, bytesUploaded: 0, percentage: 0, remainingTime: 0, speed: 0 },
+        status: 'idle',
+      };
+
+      const newMap = new Map(uploadItems.value);
+      newMap.set(id, item);
+      uploadItems.value = newMap;
+
+      const tusUpload = createTusUpload(item, defaultConfig);
+      tusUploads.value.set(id, tusUpload);
+
+      ids.push(id);
+    }
+
+    if (defaultConfig.autoStart) {
+      startAll();
+    }
+
+    return ids;
+  }
+
+  function startUpload(id: string): void {
+    const item = uploadItems.value.get(id);
+    const tusUpload = tusUploads.value.get(id);
+
+    if (item && tusUpload && item.status !== 'uploading') {
+      updateItem(id, { startedAt: new Date(), status: 'uploading' });
+
+      // Check for previous uploads to resume
+      tusUpload.findPreviousUploads().then((previousUploads) => {
+        const previousUpload = previousUploads[0];
+        if (previousUpload) {
+          tusUpload.resumeFromPreviousUpload(previousUpload);
+        }
+        tusUpload.start();
+      });
+    }
+  }
+
+  function startAll(): void {
+    const pending = uploads.value.filter((u) => u.status === 'idle' || u.status === 'paused');
+    const currentlyUploading = uploads.value.filter((u) => u.status === 'uploading').length;
+    const limit = (defaultConfig.parallelUploads || 3) - currentlyUploading;
+
+    pending.slice(0, Math.max(0, limit)).forEach((item) => startUpload(item.id));
+  }
+
+  function pauseUpload(id: string): void {
+    const tusUpload = tusUploads.value.get(id);
+    if (tusUpload) {
+      tusUpload.abort();
+      updateItem(id, { status: 'paused' });
+    }
+  }
+
+  function pauseAll(): void {
+    uploads.value.filter((u) => u.status === 'uploading').forEach((item) => pauseUpload(item.id));
+  }
+
+  function resumeUpload(id: string): void {
+    startUpload(id);
+  }
+
+  function resumeAll(): void {
+    uploads.value.filter((u) => u.status === 'paused').forEach((item) => resumeUpload(item.id));
+  }
+
+  function cancelUpload(id: string): void {
+    const tusUpload = tusUploads.value.get(id);
+    if (tusUpload) {
+      tusUpload.abort();
+    }
+    tusUploads.value.delete(id);
+
+    const newMap = new Map(uploadItems.value);
+    newMap.delete(id);
+    uploadItems.value = newMap;
+  }
+
+  function cancelAll(): void {
+    uploads.value.forEach((item) => cancelUpload(item.id));
+  }
+
+  function removeUpload(id: string): void {
+    cancelUpload(id);
+  }
+
+  function clearCompleted(): void {
+    uploads.value.filter((u) => u.status === 'completed').forEach((item) => removeUpload(item.id));
+  }
+
+  function retryUpload(id: string): void {
+    const item = uploadItems.value.get(id);
+    if (item && item.status === 'error') {
+      updateItem(id, { error: undefined, status: 'idle' });
+      startUpload(id);
+    }
+  }
+
+  function getUpload(id: string): undefined | UploadItem {
+    return uploadItems.value.get(id);
+  }
+
+  return {
+    addFiles,
+    cancelAll,
+    cancelUpload,
+    clearCompleted,
+    getUpload,
+    isUploading,
+    pauseAll,
+    pauseUpload,
+    removeUpload,
+    resumeAll,
+    resumeUpload,
+    retryUpload,
+    startAll,
+    startUpload,
+    totalProgress,
+    uploads,
+  };
+}