abckit 0.0.1

package/dist/runtime/components/ui/field/FieldTitle.d.vue.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from "vue";
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/field/FieldTitle.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { cn } from "abckit/utils";
+const props = defineProps({
+  class: { type: null, required: false }
+});
+</script>
+
+<template>
+  <div
+    data-slot="field-label"
+    :class="cn(
+  'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+  props.class
+)"
+  >
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/ui/field/FieldTitle.vue.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from "vue";
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/field/index.d.ts

@@ -0,0 +1,15 @@
+import type { VariantProps } from "class-variance-authority";
+export declare const fieldVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type FieldVariants = VariantProps<typeof fieldVariants>;
+export { default as Field } from "./Field.vue.js";
+export { default as FieldContent } from "./FieldContent.vue.js";
+export { default as FieldDescription } from "./FieldDescription.vue.js";
+export { default as FieldError } from "./FieldError.vue.js";
+export { default as FieldGroup } from "./FieldGroup.vue.js";
+export { default as FieldLabel } from "./FieldLabel.vue.js";
+export { default as FieldLegend } from "./FieldLegend.vue.js";
+export { default as FieldSeparator } from "./FieldSeparator.vue.js";
+export { default as FieldSet } from "./FieldSet.vue.js";
+export { default as FieldTitle } from "./FieldTitle.vue.js";

package/dist/runtime/components/ui/field/index.js

@@ -0,0 +1,34 @@
+import { cva } from "class-variance-authority";
+export const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ],
+        responsive: [
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ]
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  }
+);
+export { default as Field } from "./Field.vue";
+export { default as FieldContent } from "./FieldContent.vue";
+export { default as FieldDescription } from "./FieldDescription.vue";
+export { default as FieldError } from "./FieldError.vue";
+export { default as FieldGroup } from "./FieldGroup.vue";
+export { default as FieldLabel } from "./FieldLabel.vue";
+export { default as FieldLegend } from "./FieldLegend.vue";
+export { default as FieldSeparator } from "./FieldSeparator.vue";
+export { default as FieldSet } from "./FieldSet.vue";
+export { default as FieldTitle } from "./FieldTitle.vue";

package/dist/runtime/components/ui/file/FileEmptyState.d.vue.ts

@@ -0,0 +1,12 @@
+interface Props {
+    searchQuery?: string;
+    isTrash?: boolean;
+    onUploadClick?: () => void;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    uploadClick: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onUploadClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/file/FileEmptyState.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { Cloud, Trash2 } from "lucide-vue-next";
+const props = defineProps({
+  searchQuery: { type: String, required: false, default: "" },
+  isTrash: { type: Boolean, required: false, default: false },
+  onUploadClick: { type: Function, required: false }
+});
+const emit = defineEmits(["uploadClick"]);
+function handleUploadClick() {
+  if (props.onUploadClick) {
+    props.onUploadClick();
+  } else {
+    emit("uploadClick");
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center py-12 text-center">
+    <div
+      v-if="!isTrash && !searchQuery"
+      class="relative rounded-full bg-muted p-8 mb-4 cursor-pointer transition-transform hover:scale-105"
+      @click="handleUploadClick"
+    >
+      <Cloud class="h-16 w-16 text-muted-foreground" />
+      <input
+        v-if="!onUploadClick"
+        type="file"
+        multiple
+        class="absolute inset-0 cursor-pointer opacity-0"
+        @change="$emit('uploadClick')"
+      />
+    </div>
+    <div v-else-if="!searchQuery" class="rounded-full bg-muted p-8 mb-4">
+      <Trash2 class="h-16 w-16 text-muted-foreground" />
+    </div>
+    <div v-else class="rounded-full bg-muted p-8 mb-4">
+      <Icon name="lucide:search-x" class="h-16 w-16 text-muted-foreground" />
+    </div>
+
+    <h3 class="text-lg font-semibold">
+      <template v-if="searchQuery">
+        Sonuç bulunamadı
+      </template>
+      <template v-else-if="!isTrash">
+        Henüz dosya yok
+      </template>
+      <template v-else>
+        Çöp kutusu boş
+      </template>
+    </h3>
+
+    <p class="text-muted-foreground mt-1">
+      <template v-if="searchQuery">
+        Farklı bir arama terimi deneyin
+      </template>
+      <template v-else-if="!isTrash">
+        Dosyaları sürükleyip bırakın veya yükle butonunu kullanın
+      </template>
+      <template v-else>
+        Silinen dosyalar burada görünecek
+      </template>
+    </p>
+  </div>
+</template>

package/dist/runtime/components/ui/file/FileEmptyState.vue.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    searchQuery?: string;
+    isTrash?: boolean;
+    onUploadClick?: () => void;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    uploadClick: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onUploadClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/file/FileGrid.d.vue.ts

@@ -0,0 +1,36 @@
+import type { FileType } from 'abckit/types/client';
+interface FileItem {
+    id: string;
+    filename: string;
+    originalName: string;
+    mimeType: string;
+    size: number;
+    r2Key: string;
+    type: FileType;
+    parentId?: string | null;
+    isFolder?: boolean;
+    path?: string;
+    createdAt: string;
+    updatedAt: string;
+    deletedAt?: string | null;
+    user?: {
+        id: string;
+        email: string;
+    } | null;
+}
+interface Props {
+    files: FileItem[];
+    selectedFiles?: Set<string>;
+    showSelection?: boolean;
+    onFileClick?: (file: FileItem) => void;
+    onFolderClick?: (file: FileItem) => void;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (file: FileItem) => any;
+    folderClick: (file: FileItem) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSelect?: ((file: FileItem) => any) | undefined;
+    onFolderClick?: ((file: FileItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/file/FileGrid.vue

@@ -0,0 +1,92 @@
+<script setup>
+import { Cloud, FileText, Film, Folder, Image } from "lucide-vue-next";
+import { bytesToSize } from "abckit/shared/constants/r2";
+import { AppImage } from "abckit/components/app";
+const props = defineProps({
+  files: { type: Array, required: true },
+  selectedFiles: { type: Set, required: false },
+  showSelection: { type: Boolean, required: false, default: true },
+  onFileClick: { type: Function, required: false },
+  onFolderClick: { type: Function, required: false }
+});
+const emit = defineEmits(["select", "folderClick"]);
+const FILE_TYPE_ICONS = {
+  IMAGE: Image,
+  VIDEO: Film,
+  DOCUMENT: FileText,
+  OTHER: Cloud,
+  FOLDER: Folder
+};
+function getFileIcon(file) {
+  if (file.isFolder)
+    return FILE_TYPE_ICONS.FOLDER;
+  return FILE_TYPE_ICONS[file.type];
+}
+function handleClick(file) {
+  if (file.isFolder && props.onFolderClick) {
+    props.onFolderClick(file);
+  } else if (props.onFileClick) {
+    props.onFileClick(file);
+  } else {
+    emit("select", file);
+  }
+}
+function isSelected(fileId) {
+  return props.selectedFiles?.has(fileId) || false;
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+    <div
+      v-for="file in files"
+      :key="file.id"
+      class="group relative cursor-pointer rounded-lg border bg-card transition-all hover:shadow-md"
+      :class="{ 'ring-2 ring-primary': showSelection && isSelected(file.id) }"
+      @click="handleClick(file)"
+    >
+      <!-- Selection checkbox -->
+      <div
+        v-if="showSelection && isSelected(file.id)"
+        class="absolute left-2 top-2 z-10"
+        @click.stop
+      >
+        <Checkbox
+          :model-value="isSelected(file.id)"
+          @update:model-value="() => handleClick(file)"
+        />
+      </div>
+
+      <!-- File preview -->
+      <div class="aspect-square overflow-hidden rounded-t-lg bg-muted">
+        <AppImage
+          v-if="!file.isFolder && file.type === 'IMAGE'"
+          :src="file.r2Key"
+          :alt="file.originalName"
+          size="md"
+          class="h-full w-full"
+          fallback=""
+        />
+        <div v-else class="flex h-full items-center justify-center">
+          <component
+            :is="getFileIcon(file)"
+            class="h-12 w-12 text-muted-foreground"
+          />
+        </div>
+      </div>
+
+      <!-- File info -->
+      <div class="p-3">
+        <p class="truncate text-sm font-medium">{{ file.originalName }}</p>
+        <p class="text-xs text-muted-foreground">
+          <template v-if="file.isFolder">
+            Klasör
+          </template>
+          <template v-else>
+            {{ bytesToSize(file.size) }}
+          </template>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/ui/file/FileGrid.vue.d.ts

@@ -0,0 +1,36 @@
+import type { FileType } from 'abckit/types/client';
+interface FileItem {
+    id: string;
+    filename: string;
+    originalName: string;
+    mimeType: string;
+    size: number;
+    r2Key: string;
+    type: FileType;
+    parentId?: string | null;
+    isFolder?: boolean;
+    path?: string;
+    createdAt: string;
+    updatedAt: string;
+    deletedAt?: string | null;
+    user?: {
+        id: string;
+        email: string;
+    } | null;
+}
+interface Props {
+    files: FileItem[];
+    selectedFiles?: Set<string>;
+    showSelection?: boolean;
+    onFileClick?: (file: FileItem) => void;
+    onFolderClick?: (file: FileItem) => void;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (file: FileItem) => any;
+    folderClick: (file: FileItem) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSelect?: ((file: FileItem) => any) | undefined;
+    onFolderClick?: ((file: FileItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/file/FileTable.d.vue.ts

@@ -0,0 +1,41 @@
+import type { FileType } from 'abckit/types/client';
+interface FileItem {
+    id: string;
+    filename: string;
+    originalName: string;
+    mimeType: string;
+    size: number;
+    r2Key: string;
+    type: FileType;
+    parentId?: string | null;
+    isFolder?: boolean;
+    path?: string;
+    createdAt: string;
+    updatedAt: string;
+    deletedAt?: string | null;
+    user?: {
+        id: string;
+        email: string;
+    } | null;
+}
+interface Props {
+    files: FileItem[];
+    selectedFiles?: Set<string>;
+    showSelection?: boolean;
+    showActions?: boolean;
+    isTrash?: boolean;
+    onFileClick?: (file: FileItem) => void;
+    onFolderClick?: (file: FileItem) => void;
+    onSelectAll?: (selected: boolean) => void;
+    onToggleSelection?: (file: FileItem) => void;
+    onView?: (file: FileItem) => void;
+    onDownload?: (file: FileItem) => void;
+    onRename?: (file: FileItem) => void;
+    onMove?: (file: FileItem) => void;
+    onDelete?: (file: FileItem) => void;
+    onRestore?: (file: FileItem) => void;
+    onPermanentDelete?: (file: FileItem) => void;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/file/FileTable.vue

@@ -0,0 +1,234 @@
+<script setup>
+import { Cloud, Download, Eye, FileText, Film, Folder, Image, MoreVertical, RotateCcw, Trash2 } from "lucide-vue-next";
+import { bytesToSize } from "abckit/shared/constants/r2";
+import { Badge } from "abckit/shadcn/badge";
+import { Button } from "abckit/shadcn/button";
+import { Checkbox } from "abckit/shadcn/checkbox";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "abckit/shadcn/dropdown-menu";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "abckit/shadcn/table";
+import { AppImage } from "abckit/components/app";
+import { Icon } from "#components";
+import { computed } from "vue";
+const props = defineProps({
+  files: { type: Array, required: true },
+  selectedFiles: { type: Set, required: false },
+  showSelection: { type: Boolean, required: false, default: true },
+  showActions: { type: Boolean, required: false, default: false },
+  isTrash: { type: Boolean, required: false, default: false },
+  onFileClick: { type: Function, required: false },
+  onFolderClick: { type: Function, required: false },
+  onSelectAll: { type: Function, required: false },
+  onToggleSelection: { type: Function, required: false },
+  onView: { type: Function, required: false },
+  onDownload: { type: Function, required: false },
+  onRename: { type: Function, required: false },
+  onMove: { type: Function, required: false },
+  onDelete: { type: Function, required: false },
+  onRestore: { type: Function, required: false },
+  onPermanentDelete: { type: Function, required: false }
+});
+const FILE_TYPE_ICONS = {
+  IMAGE: Image,
+  VIDEO: Film,
+  DOCUMENT: FileText,
+  OTHER: Cloud,
+  FOLDER: Folder
+};
+const FILE_TYPE_LABELS = {
+  IMAGE: "Resim",
+  VIDEO: "Video",
+  DOCUMENT: "Belge",
+  OTHER: "Di\u011Fer"
+};
+function getFileIcon(file) {
+  if (file.isFolder)
+    return FILE_TYPE_ICONS.FOLDER;
+  return FILE_TYPE_ICONS[file.type];
+}
+function getFileTypeLabel(file) {
+  if (file.isFolder)
+    return "Klas\xF6r";
+  return FILE_TYPE_LABELS[file.type];
+}
+function formatDate(date) {
+  return new Date(date).toLocaleDateString("tr-TR", {
+    day: "numeric",
+    month: "short",
+    year: "numeric"
+  });
+}
+function handleRowClick(file) {
+  if (file.isFolder && props.onFolderClick) {
+    props.onFolderClick(file);
+  } else if (props.onFileClick) {
+    props.onFileClick(file);
+  } else if (props.onToggleSelection) {
+    props.onToggleSelection(file);
+  }
+}
+function isSelected(fileId) {
+  return props.selectedFiles?.has(fileId) || false;
+}
+const allSelected = computed(
+  () => props.files.length > 0 && props.files.every((file) => isSelected(file.id))
+);
+const someSelected = computed(
+  () => props.files.some((file) => isSelected(file.id)) && !allSelected.value
+);
+</script>
+
+<template>
+  <div class="rounded-lg border bg-card">
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead v-if="showSelection" class="w-[50px]">
+            <Checkbox
+              :model-value="allSelected"
+              :indeterminate="someSelected"
+              @update:model-value="(value) => onSelectAll?.(value)"
+            />
+          </TableHead>
+          <TableHead>Dosya Adı</TableHead>
+          <TableHead>Tür</TableHead>
+          <TableHead>Boyut</TableHead>
+          <TableHead>{{ isTrash ? "Silinme Tarihi" : "Y\xFCklenme Tarihi" }}</TableHead>
+          <TableHead v-if="showActions" class="text-right">İşlemler</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow
+          v-for="file in files"
+          :key="file.id"
+          class="cursor-pointer"
+          :class="{ 'bg-muted/50': showSelection && isSelected(file.id) }"
+          @click="handleRowClick(file)"
+        >
+          <TableCell v-if="showSelection" @click.stop>
+            <Checkbox
+              :model-value="isSelected(file.id)"
+              @update:model-value="() => onToggleSelection?.(file)"
+            />
+          </TableCell>
+          <TableCell>
+            <div class="flex items-center gap-3">
+              <div class="h-10 w-10 rounded bg-muted flex items-center justify-center overflow-hidden">
+                <AppImage
+                  v-if="!file.isFolder && file.type === 'IMAGE'"
+                  :src="file.r2Key"
+                  :alt="file.originalName"
+                  size="xs"
+                  class="h-full w-full"
+                  fallback=""
+                />
+                <component
+                  :is="getFileIcon(file)"
+                  v-else
+                  class="h-5 w-5 text-muted-foreground"
+                />
+              </div>
+              <div>
+                <p class="font-medium">{{ file.originalName }}</p>
+                <p class="text-xs text-muted-foreground">{{ file.isFolder ? "Klas\xF6r" : file.mimeType }}</p>
+              </div>
+            </div>
+          </TableCell>
+          <TableCell>
+            <Badge variant="outline">
+              {{ getFileTypeLabel(file) }}
+            </Badge>
+          </TableCell>
+          <TableCell class="text-muted-foreground">
+            {{ file.isFolder ? "-" : bytesToSize(file.size) }}
+          </TableCell>
+          <TableCell class="text-muted-foreground">
+            {{ formatDate(isTrash && file.deletedAt ? file.deletedAt : file.createdAt) }}
+          </TableCell>
+          <TableCell v-if="showActions" class="text-right">
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  class="h-8 w-8"
+                  @click.stop
+                >
+                  <MoreVertical class="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <template v-if="!isTrash">
+                  <template v-if="file.isFolder">
+                    <DropdownMenuItem v-if="onView" @click.stop="onView(file)">
+                      <Icon name="lucide:folder-open" class="mr-2 h-4 w-4" />
+                      Aç
+                    </DropdownMenuItem>
+                    <DropdownMenuItem v-if="onRename" @click.stop="onRename(file)">
+                      <Icon name="lucide:pencil" class="mr-2 h-4 w-4" />
+                      Yeniden Adlandır
+                    </DropdownMenuItem>
+                    <DropdownMenuItem v-if="onMove" @click.stop="onMove(file)">
+                      <Icon name="lucide:folder-input" class="mr-2 h-4 w-4" />
+                      Taşı
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                      v-if="onDelete"
+                      class="text-destructive focus:text-destructive"
+                      @click.stop="onDelete(file)"
+                    >
+                      <Trash2 class="mr-2 h-4 w-4" />
+                      Sil
+                    </DropdownMenuItem>
+                  </template>
+                  <template v-else>
+                    <DropdownMenuItem v-if="onView" @click.stop="onView(file)">
+                      <Eye class="mr-2 h-4 w-4" />
+                      Görüntüle
+                    </DropdownMenuItem>
+                    <DropdownMenuItem v-if="onDownload" @click.stop="onDownload(file)">
+                      <Download class="mr-2 h-4 w-4" />
+                      İndir
+                    </DropdownMenuItem>
+                    <DropdownMenuItem v-if="onRename" @click.stop="onRename(file)">
+                      <Icon name="lucide:pencil" class="mr-2 h-4 w-4" />
+                      Yeniden Adlandır
+                    </DropdownMenuItem>
+                    <DropdownMenuItem v-if="onMove" @click.stop="onMove(file)">
+                      <Icon name="lucide:folder-input" class="mr-2 h-4 w-4" />
+                      Taşı
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                      v-if="onDelete"
+                      class="text-destructive focus:text-destructive"
+                      @click.stop="onDelete(file)"
+                    >
+                      <Trash2 class="mr-2 h-4 w-4" />
+                      Çöp Kutusuna Taşı
+                    </DropdownMenuItem>
+                  </template>
+                </template>
+                <template v-else>
+                  <DropdownMenuItem v-if="onRestore" @click.stop="onRestore(file)">
+                    <RotateCcw class="mr-2 h-4 w-4" />
+                    Geri Yükle
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    v-if="onDelete"
+                    class="text-destructive focus:text-destructive"
+                    @click.stop="onDelete(file)"
+                  >
+                    <Trash2 class="mr-2 h-4 w-4" />
+                    Kalıcı Olarak Sil
+                  </DropdownMenuItem>
+                </template>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </div>
+</template>