@drax/media-vue 2.1.2 → 3.0.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.1.2",
+  "version": "3.0.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,7 +24,9 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/media-front": "^2.0.0"
+    "@drax/crud-share": "^3.0.0",
+    "@drax/crud-vue": "^3.0.0",
+    "@drax/media-front": "^3.0.0"
   },
   "peerDependencies": {
     "vue": "^3.5.28",
@@ -46,5 +48,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "0dfd52ea60e9e9c188581bed9269da568b053604"
+  "gitHead": "63ae718b24ea25ae80b1a9a5dfb84a3abbb95199"
 }

package/src/comboboxes/FileCombobox.vue

@@ -0,0 +1,78 @@
+
+<script setup lang="ts">
+import FileEntityCrud from '../cruds/FileEntityCrud'
+import {CrudAutocomplete} from "@drax/crud-vue";
+import type {IEntityCrudField} from "@drax/crud-share";
+import type {PropType} from "vue";
+
+
+const valueModel = defineModel<any>({type: String})
+
+const entityName = FileEntityCrud.instance.name
+
+const {name, label} = defineProps({
+  name: {type: String as PropType<string>, required: false},
+  label: {type: String as PropType<string>, required: false},
+  itemTitle: {type: [String], default: 'name'},
+  itemValue: {type: [String], default: '_id'},
+  prependIcon: {type: String},
+  prependInnerIcon: {type: String},
+  appendIcon: {type: String},
+  appendInnerIcon: {type: String},
+  multiple: {type: Boolean, default: false},
+  chips: {type: Boolean, default: false},
+  closableChips: {type: Boolean, default: true},
+  readonly: {type: Boolean, default: false},
+  clearable: {type: Boolean, default: true},
+  hint: {type: String},
+  persistentHint: {type: Boolean, default: false},
+  rules: {type: Array as PropType<any>, default: () => []},
+  errorMessages: {type: Array as PropType<string[]>, default: () => []},
+  hideDetails: {type: Boolean, default: false},
+  singleLine: {type: Boolean, default: false},
+  addOnTheFly: {type: Boolean, default: false},
+  density: {type: String as PropType<'comfortable' | 'compact' | 'default'>, default: 'default'},
+  variant: {type: String as PropType<'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'>, default: 'filled'},
+})
+
+
+const field: IEntityCrudField = {
+  default: undefined,
+  label: label || entityName,
+  name: name || entityName,
+  type: 'ref'
+}
+
+
+</script>
+
+<template>
+
+  <crud-autocomplete
+    v-model="valueModel"
+    :field="field"
+    :entity="FileEntityCrud.instance"
+    :hint="hint"
+    :persistent-hint="persistentHint"
+    :error-messages="errorMessages"
+    :rules="rules"
+    :density="density"
+    :variant="variant"
+    :readonly="readonly"
+    :clearable="clearable"
+    :hide-details="hideDetails"
+    :single-line="singleLine"
+    :prepend-icon="prependIcon"
+    :append-icon="appendIcon"
+    :prepend-inner-icon="prependInnerIcon"
+    :append-inner-icon="appendInnerIcon"
+    :add-on-the-fly="addOnTheFly"
+  ></crud-autocomplete>
+
+</template>
+
+<style scoped>
+
+</style>
+
+

package/src/components/MediaFieldView.vue

@@ -0,0 +1,303 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { formatDateTime } from '@drax/common-front';
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  },
+});
+
+const tab = ref('details');
+
+const file = computed(() => props.modelValue);
+
+function formatFileSize(bytes: number) {
+  if (!bytes) return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  let i = 0;
+  let size = bytes;
+  while (size >= 1024 && i < units.length - 1) {
+    size /= 1024;
+    i++;
+  }
+  return `${size.toFixed(2)} ${units[i]}`;
+}
+
+const isImage = computed(() => file.value?.mimetype?.startsWith('image/'));
+const isPdf = computed(() => file.value?.mimetype === 'application/pdf');
+
+const fileIcon = computed(() => {
+  if (isImage.value) return 'mdi-image';
+  if (isPdf.value) return 'mdi-file-pdf-box';
+  if (file.value?.mimetype?.includes('video')) return 'mdi-video';
+  if (file.value?.mimetype?.includes('audio')) return 'mdi-music-box';
+  if (file.value?.mimetype?.includes('zip') || file.value?.mimetype?.includes('compressed')) return 'mdi-folder-zip';
+  return 'mdi-file';
+});
+</script>
+
+<template>
+  <v-card class="media-field-card mx-auto rounded-xl elevation-4" max-width="800">
+    <div class="glass-header bg-primary pa-6 d-flex align-center">
+      <v-avatar size="64" color="surface" class="mr-4 elevation-2 text-primary">
+        <v-icon size="36">{{ fileIcon }}</v-icon>
+      </v-avatar>
+      <div>
+        <h2 class="text-h5 font-weight-bold mb-1 header-title text-truncate" style="max-width: 600px;">
+          {{ file?.filename || 'Unknown File' }}
+        </h2>
+        <div class="text-subtitle-2 opacity-80 d-flex align-center">
+          <v-chip size="small" color="surface" variant="outlined" class="mr-2 font-weight-medium">
+            {{ file?.extension?.toUpperCase() || 'FILE' }}
+          </v-chip>
+          {{ formatFileSize(file?.size) }}
+        </div>
+      </div>
+    </div>
+
+    <v-tabs
+      v-model="tab"
+      color="primary"
+      align-tabs="center"
+      class="border-b"
+    >
+      <v-tab value="details">
+        <v-icon start>mdi-information-outline</v-icon>
+        Detalles
+      </v-tab>
+      <v-tab value="preview" :disabled="!isImage && !isPdf && !file?.url">
+        <v-icon start>mdi-eye-outline</v-icon>
+        Vista Previa
+      </v-tab>
+    </v-tabs>
+
+    <v-card-text class="pa-0">
+      <v-window v-model="tab">
+        <v-window-item value="details">
+          <v-container class="pa-6">
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-list class="bg-transparent" lines="two">
+                  <v-list-item>
+                    <template v-slot:prepend>
+                      <v-icon color="primary" class="mr-3">mdi-file-document-outline</v-icon>
+                    </template>
+                    <v-list-item-title class="font-weight-medium">Nombre de Archivo</v-list-item-title>
+                    <v-list-item-subtitle class="text-wrap">{{ file?.filename }}</v-list-item-subtitle>
+                  </v-list-item>
+
+                  <v-divider inset></v-divider>
+
+                  <v-list-item>
+                    <template v-slot:prepend>
+                      <v-icon color="primary" class="mr-3">mdi-shape-outline</v-icon>
+                    </template>
+                    <v-list-item-title class="font-weight-medium">Tipo MIME</v-list-item-title>
+                    <v-list-item-subtitle>{{ file?.mimetype || 'Desconocido' }}</v-list-item-subtitle>
+                  </v-list-item>
+
+                  <v-divider inset></v-divider>
+
+                  <v-list-item>
+                    <template v-slot:prepend>
+                      <v-icon color="primary" class="mr-3">mdi-weight</v-icon>
+                    </template>
+                    <v-list-item-title class="font-weight-medium">Tamaño</v-list-item-title>
+                    <v-list-item-subtitle>{{ formatFileSize(file?.size) }}</v-list-item-subtitle>
+                  </v-list-item>
+
+                  <v-divider inset></v-divider>
+
+                  <v-list-item>
+                    <template v-slot:prepend>
+                      <v-icon color="primary" class="mr-3">mdi-eye-circle-outline</v-icon>
+                    </template>
+                    <v-list-item-title class="font-weight-medium">Visualizaciones / Hits</v-list-item-title>
+                    <v-list-item-subtitle>{{ file?.hits || 0 }}</v-list-item-subtitle>
+                  </v-list-item>
+                </v-list>
+              </v-col>
+
+              <v-col cols="12" md="6">
+                <v-list class="bg-transparent" lines="two">
+                  <v-list-item>
+                    <template v-slot:prepend>
+                      <v-icon color="primary" class="mr-3">mdi-calendar-plus</v-icon>
+                    </template>
+                    <v-list-item-title class="font-weight-medium">Fecha de Creación</v-list-item-title>
+                    <v-list-item-subtitle>{{ file?.createdAt ? formatDateTime(file.createdAt) : '-' }}</v-list-item-subtitle>
+                  </v-list-item>
+
+                  <v-divider inset></v-divider>
+
+                   <v-list-item>
+                    <template v-slot:prepend>
+                      <v-icon color="primary" class="mr-3">mdi-eye-check-outline</v-icon>
+                    </template>
+                    <v-list-item-title class="font-weight-medium">Último Acceso</v-list-item-title>
+                    <v-list-item-subtitle>{{ file?.lastAccess ? formatDateTime(file.lastAccess) : '-' }}</v-list-item-subtitle>
+                  </v-list-item>
+
+                  <v-divider inset></v-divider>
+
+                  <v-list-item>
+                    <template v-slot:prepend>
+                      <v-icon color="primary" class="mr-3">mdi-clock-alert-outline</v-icon>
+                    </template>
+                    <v-list-item-title class="font-weight-medium">Fecha de Expiración</v-list-item-title>
+                    <v-list-item-subtitle :class="{'text-error': file?.expiresAt && new Date(file.expiresAt) < new Date(), 'text-warning': file?.expiresAt && new Date(file.expiresAt) >= new Date()}">
+                      {{ file?.expiresAt ? formatDateTime(file.expiresAt) : 'Sin expiración' }}
+                    </v-list-item-subtitle>
+                  </v-list-item>
+
+                  <v-divider inset></v-divider>
+
+                  <v-list-item>
+                    <template v-slot:prepend>
+                      <v-icon color="primary" class="mr-3">mdi-tag-multiple-outline</v-icon>
+                    </template>
+                    <v-list-item-title class="font-weight-medium mb-1">Etiquetas</v-list-item-title>
+                    <v-list-item-subtitle>
+                      <template v-if="file?.tags && file.tags.length > 0">
+                        <v-chip
+                          v-for="(tag, index) in file.tags"
+                          :key="index"
+                          color="primary"
+                          size="small"
+                          class="mr-1 mb-1"
+                          variant="tonal"
+                        >
+                          {{ tag }}
+                        </v-chip>
+                      </template>
+                      <template v-else>
+                        <span class="text-grey">Sin etiquetas</span>
+                      </template>
+                    </v-list-item-subtitle>
+                  </v-list-item>
+                </v-list>
+              </v-col>
+            </v-row>
+            <v-row v-if="file?.description">
+                <v-col cols="12">
+                     <v-card class="bg-surface-variant rounded-lg pa-4" variant="tonal">
+                        <div class="text-subtitle-2 font-weight-bold mb-2 d-flex align-center text-primary">
+                            <v-icon size="small" class="mr-2">mdi-text-box-outline</v-icon>
+                            Descripción
+                        </div>
+                        <p class="text-body-2">{{ file.description }}</p>
+                    </v-card>
+                </v-col>
+            </v-row>
+          </v-container>
+        </v-window-item>
+
+        <v-window-item value="preview">
+          <div class="preview-container bg-black d-flex align-center justify-center relative">
+            <template v-if="isImage">
+              <v-img
+                :src="file?.url"
+                max-height="600"
+                contain
+              >
+                <template v-slot:placeholder>
+                  <div class="d-flex align-center justify-center fill-height">
+                    <v-progress-circular color="primary" indeterminate></v-progress-circular>
+                  </div>
+                </template>
+              </v-img>
+            </template>
+            <template v-else-if="isPdf">
+              <iframe
+                :src="file?.url"
+                width="100%"
+                height="600"
+                style="border: none;"
+                title="Vista previa del PDF"
+              ></iframe>
+            </template>
+            <template v-else>
+              <div class="pa-10 text-center text-white">
+                <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-file-hidden</v-icon>
+                <div class="text-h6">Vista previa no disponible</div>
+                <div class="text-body-2 text-grey-lighten-1 mt-2">
+                  No se puede generar una vista previa para este tipo de archivo.
+                </div>
+                <v-btn
+                  v-if="file?.url"
+                  :href="file?.url"
+                  target="_blank"
+                  color="primary"
+                  variant="flat"
+                  class="mt-6"
+                  prepend-icon="mdi-download"
+                >
+                  Descargar Archivo
+                </v-btn>
+              </div>
+            </template>
+          </div>
+        </v-window-item>
+      </v-window>
+    </v-card-text>
+    
+    <v-divider></v-divider>
+    
+    <v-card-actions class="pa-4 d-flex justify-space-between bg-surface">
+        <div class="d-flex align-center text-caption text-medium-emphasis">
+            <v-icon size="small" class="mr-1">mdi-account-outline</v-icon>
+            Creado por: <span class="font-weight-bold ml-1">{{ file?.createdBy?.username || 'Sistema' }}</span>
+        </div>
+        <div>
+            <v-btn
+                v-if="file?.url"
+                :href="file?.url"
+                target="_blank"
+                color="primary"
+                variant="tonal"
+                prepend-icon="mdi-open-in-new"
+            >
+                Abrir Externo
+            </v-btn>
+        </div>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<style scoped>
+.media-field-card {
+  overflow: hidden;
+  border: 1px solid rgba(0,0,0,0.05);
+}
+
+.glass-header {
+  position: relative;
+  overflow: hidden;
+}
+
+.glass-header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(circle at top right, rgba(255,255,255,0.2) 0%, transparent 60%);
+  pointer-events: none;
+}
+
+.header-title {
+  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+
+.preview-container {
+  min-height: 400px;
+  width: 100%;
+}
+
+.v-list-item {
+  padding-left: 0;
+}
+</style>

package/src/components/MediaFullField.vue

@@ -48,7 +48,7 @@ function onFileClick() {
 }
 
 const valueModelUrl = computed(() =>
-    valueModel.value.url || '')
+    valueModel.value?.url || '')
 
 async function onFileChanged(e: Event) {
   if (e.target && (e.target as HTMLInputElement).files) {
@@ -101,12 +101,12 @@ defineEmits(['updateValue'])
 
 const isImage = computed(() => {
 
-  if (typeof valueModel.value.url !== 'string' || !valueModel.value.url.trim()) return false;
+  if (valueModel.value && (typeof valueModel.value?.url !== 'string' || !valueModel.value?.url.trim())) return false;
 
   // supports optional query/hash: ".../file.jpg?x=1#y"
   const imageExtRegex = /\.(?:jpe?g|png|gif|webp|bmp|svg|tiff?|avif|ico)(?:[?#].*)?$/i;
 
-  return imageExtRegex.test(valueModel.value.url);
+  return imageExtRegex.test(valueModel.value?.url);
 });
 
 </script>
@@ -157,7 +157,7 @@ const isImage = computed(() => {
     <v-btn @click="onFileClick" :loading="loading" density="compact" color="grey" variant="text">Click | Drag & Drop</v-btn>
 
     <template v-if="preview && isImage">
-      <v-img :src="valueModel.url" alt="Preview" :height="previewHeight" class="mt-4"></v-img>
+      <v-img :src="valueModel?.url" alt="Preview" :height="previewHeight" class="mt-4"></v-img>
     </template>
 
   </div>

package/src/components/cruds/FileCrud.vue

@@ -0,0 +1,47 @@
+
+<script setup lang="ts">
+import FileEntityCrud from '../../cruds/FileEntityCrud'
+import {Crud, useCrudStore} from "@drax/crud-vue";
+import {formatDateTime} from "@drax/common-front"
+import MediaFieldView from "../MediaFieldView.vue";
+
+function formatFileSize(bytes: number) {
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+
+  let i = 0;
+  let size = bytes;
+
+  while (size >= 1024 && i < units.length - 1) {
+    size /= 1024;
+    i++;
+  }
+
+  return `${size.toFixed(2)} ${units[i]}`;
+}
+
+const store = useCrudStore(FileEntityCrud.instance.name)
+
+</script>formatDateTime
+
+<template>
+  <crud :entity="FileEntityCrud.instance">
+    <template v-slot:item.tags="{value}"><v-chip v-for="v in value">{{v}}</v-chip></template>
+    <template v-slot:item.size="{value}">{{formatFileSize(value)}}</template>
+    <template v-slot:item.lastAccess="{value}">{{formatDateTime(value)}}</template>
+    <template v-slot:item.createdAt="{value}">{{formatDateTime(value)}}</template>
+    <template v-slot:item.updatedAt="{value}">{{formatDateTime(value)}}</template>
+    <template v-slot:item.expiresAt="{value}">{{formatDateTime(value)}}</template>
+
+    <template v-if="store.operation === 'view' "
+    v-slot:form>
+      <media-field-view v-model="store.form" />
+    </template>
+
+
+  </crud>
+</template>
+
+<style scoped>
+
+</style>
+

package/src/cruds/FileEntityCrud.ts

@@ -0,0 +1,227 @@
+import {EntityCrud} from "@drax/crud-vue";
+import type {
+    IDraxCrudProvider,
+    IEntityCrud,
+    IEntityCrudField,
+    IEntityCrudFilter,
+    IEntityCrudHeader,
+    IEntityCrudPermissions,
+    IEntityCrudRefs,
+    IEntityCrudRules
+} from "@drax/crud-share";
+import {FileSystemFactory} from "@drax/media-front";
+
+//Import EntityCrud Refs
+
+
+class FileEntityCrud extends EntityCrud implements IEntityCrud {
+
+    static singleton: FileEntityCrud
+
+    constructor() {
+        super();
+        this.name = 'File'
+    }
+
+    static get instance(): FileEntityCrud {
+        if (!FileEntityCrud.singleton) {
+            FileEntityCrud.singleton = new FileEntityCrud()
+        }
+        return FileEntityCrud.singleton
+    }
+
+    get permissions(): IEntityCrudPermissions {
+        return {
+            manage: 'file:manage',
+            view: 'file:view',
+            create: 'file:create',
+            update: 'file:update',
+            delete: 'file:delete'
+        }
+    }
+
+    get headers(): IEntityCrudHeader[] {
+        return [
+            {title: 'filename', key: 'filename', align: 'start'},
+            {title: 'url', key: 'url', align: 'start'},
+            {title: 'mimetype', key: 'mimetype', align: 'start'},
+            {title: 'extension', key: 'extension', align: 'start'},
+            {title: 'size', key: 'size', align: 'start'},
+            {title: 'type', key: 'type', align: 'start'},
+            {title: 'createdAt', key: 'createdAt', align: 'start'},
+            {title: 'createdBy', key: 'createdBy.username', align: 'start'},
+            {title: 'lastAccess', key: 'lastAccess', align: 'start'},
+            {title: 'ttlSeconds', key: 'ttlSeconds', align: 'start'},
+            {title: 'expiresAt', key: 'expiresAt', align: 'start'},
+            // {title: 'isPublic', key: 'isPublic', align: 'start'},
+            {title: 'hits', key: 'hits', align: 'start'},
+            {title: 'updatedAt', key: 'updatedAt', align: 'start'},
+            {title: 'updatedBy', key: 'updatedBy.username', align: 'start'},
+        ]
+    }
+
+    get selectedHeaders(): string[] {
+        return ['filename', 'mimetype', 'extension', 'size', 'createdAt','createdBy.username','lastAccess','hits'];
+    }
+
+    get actionHeaders(): IEntityCrudHeader[] {
+        return [
+            {
+                title: 'action.actions',
+                key: 'actions',
+                sortable: false,
+                align: 'center',
+                minWidth: '190px',
+                fixed: 'end'
+            },
+        ]
+    }
+
+    get provider(): IDraxCrudProvider<any, any, any> {
+        return FileSystemFactory.getInstance()
+    }
+
+    get refs(): IEntityCrudRefs {
+        return {}
+    }
+
+    get rules(): IEntityCrudRules {
+        return {
+        }
+    }
+
+    get fields(): IEntityCrudField[] {
+        return [
+
+
+
+
+            {name: 'filename', type: 'string', label: 'filename', default: '', readonly: true},
+            {name: 'url', type: 'string', label: 'url', default: '', readonly: true},
+            {name: 'mimetype', type: 'string', label: 'mimetype', default: '', readonly: true},
+            {name: 'encoding', type: 'string', label: 'encoding', default: '', readonly: true},
+            {name: 'extension', type: 'string', label: 'extension', default: '', readonly: true},
+            {name: 'size', type: 'number', label: 'size', default: null, readonly: true},
+            {name: 'type', type: 'string', label: 'type', default: '', readonly: true},
+
+            {name: 'description', type: 'longString', label: 'description', default: ''},
+            {name: 'tags', type: 'array.string', label: 'tags', default: []},
+            {name: 'createdFor', type: 'string', label: 'createdFor', default: ''},
+            {name: 'isPublic', type: 'boolean', label: 'isPublic', default: true},
+
+            {name: 'ttlSeconds', type: 'number', label: 'ttlSeconds', default: null},
+            {name: 'expiresAt', type: 'date', label: 'expiresAt', default: null},
+
+            {name: 'lastAccess', type: 'date', label: 'lastAccess', default: null, readonly: true},
+            {name: 'createdAt', type: 'date', label: 'createdAt', default: null, readonly: true},
+            {name: 'updatedAt', type: 'date', label: 'updatedAt', default: null, readonly: true},
+            {
+                name: 'createdBy',
+                type: 'object',
+                label: 'createdBy',
+                default: {"id": "''", "username": "''"},
+                objectFields: [
+                    {name: 'id', type: 'string', label: 'id', default: '', readonly: true},
+                    {name: 'username', type: 'string', label: 'username', default: '', readonly: true}
+                ]
+            },
+            {
+                name: 'updatedBy',
+                type: 'object',
+                label: 'updatedBy',
+                default: {"id": "''", "username": "''"},
+                objectFields: [
+                    {name: 'id', type: 'string', label: 'id', default: '', readonly: true},
+                    {name: 'username', type: 'string', label: 'username', default: '', readonly: true}
+                ]
+            },
+
+
+
+            {name: 'hits', type: 'number', label: 'hits', default: 0, readonly: true}
+        ]
+    }
+
+    get filters(): IEntityCrudFilter[] {
+        return [
+            //{name: '_id', type: 'string', label: 'ID', default: '', operator: 'eq' },
+        ]
+    }
+
+    get isViewable() {
+        return true
+    }
+
+    get isEditable() {
+        return false
+    }
+
+    get isCreatable() {
+        return false
+    }
+
+    get isDeletable() {
+        return true
+    }
+
+    get isExportable() {
+        return true
+    }
+
+    get exportFormats() {
+        return ['CSV', 'JSON']
+    }
+
+    get exportHeaders() {
+        return ['filename', 'mimetype', 'extension', 'size', 'createdAt','createdBy.username','lastAccess','hits']
+    }
+
+    get isImportable() {
+        return false
+    }
+
+    get isColumnSelectable() {
+        return true
+    }
+
+    get isGroupable() {
+        return true
+    }
+
+    get importFormats() {
+        return ['CSV', 'JSON']
+    }
+
+    get dialogFullscreen() {
+        return false
+    }
+
+    get tabs() {
+        return []
+    }
+
+    get menus() {
+        return []
+    }
+
+    get searchEnable() {
+        return true
+    }
+
+    get filtersEnable() {
+        return true
+    }
+
+    get dynamicFiltersEnable() {
+        return true
+    }
+
+    get containerFluid(){
+        return true
+    }
+
+
+}
+
+export default FileEntityCrud
+

package/src/index.ts

@@ -1,7 +1,19 @@
 import MediaField from "./components/MediaField.vue";
 import MediaFullField from "./components/MediaFullField.vue";
+import FileCombobox from "./comboboxes/FileCombobox.vue";
+import FileCrud from "./components/cruds/FileCrud.vue";
+import FileEntityCrud from "./cruds/FileEntityCrud";
+import FileCrudPage from "./pages/crud/FileCrudPage.vue";
+import { FileCrudRoute } from "./routes/FileCrudRoute";
+import MediaRoutes from "./routes/index";
 
 export {
     MediaField,
-    MediaFullField
+    MediaFullField,
+    FileCombobox,
+    FileCrud,
+    FileEntityCrud,
+    FileCrudPage,
+    FileCrudRoute,
+    MediaRoutes
 }

package/src/pages/crud/FileCrudPage.vue

@@ -0,0 +1,14 @@
+
+<script setup lang="ts">
+import FileCrud from '../../components/cruds/FileCrud.vue'
+
+</script>
+
+<template>
+  <FileCrud />
+</template>
+
+<style scoped>
+
+</style>
+

package/src/routes/FileCrudRoute.ts

@@ -0,0 +1,18 @@
+
+import FileCrudPage from "../pages/crud/FileCrudPage.vue";
+
+
+const FileCrudRoute = [
+  {
+    name: 'FileCrudPage',
+    path: '/crud/file',
+    component: FileCrudPage,
+    meta: {
+      auth: true,
+      permission: 'file:manage',
+    }
+  },
+]
+
+export default FileCrudRoute
+export { FileCrudRoute }

package/src/routes/index.ts

@@ -0,0 +1,8 @@
+
+import FileCrudRoute from "./FileCrudRoute"
+
+export const routes = [
+    ...FileCrudRoute
+]
+
+export default routes