adminforth 2.4.0-next.317 → 2.4.0-next.319

package/dist/spa/src/afcl/Dropzone.vue

@@ -46,7 +46,7 @@
 
           <div
             v-else
-            class="flex items-center justify-center  py-1 flex-wrap gap-2 w-full gap-2 mt-1 mb-4 px-4"
+            class="flex items-center justify-center py-1 flex-wrap gap-2 w-full mt-1 mb-4 px-4"
           >
             <template v-for="(file, index) in selectedFiles" :key="index">
               <div
@@ -54,7 +54,12 @@
                       flex items-center gap-1 px-2 py-1 group"
               >
                 <IconFileSolid class="w-4 h-4 flex-shrink-0" />
-                <span class="truncate max-w-[200px]">{{ file.name }}</span>
+                <span
+                  class="truncate max-w-[200px]"
+                  :title="file.name"
+                >
+                  {{ shortenFileName(file.name) }}
+                </span>
                 <span class="text-xs">({{ humanifySize(file.size) }})</span>
                 <button
                   type="button"
@@ -123,6 +128,19 @@ const selectedFiles: Ref<{
 
 const storedFiles: Ref<File[]> = ref([]);
 
+function shortenFileName(name: string, maxLength = 24) {
+  if (name.length <= maxLength) return name;
+
+  const lastDotIndex = name.lastIndexOf('.');
+  const hasExtension = lastDotIndex > 0 && lastDotIndex < name.length - 1;
+  const extension = hasExtension ? name.slice(lastDotIndex + 1) : '';
+  const baseName = hasExtension ? name.slice(0, lastDotIndex) : name;
+
+  const startName = baseName.slice(0, 12);
+  const endName = baseName.split('').reverse().slice(0, 4).reverse().join('');
+  return hasExtension ? `${startName}...${endName}.${extension}` : `${startName}...${endName}`;
+}
+
 watch(() => props.modelValue, (files) => {
   if (files && files.length > 0) {
     selectedFiles.value = Array.from(files).map(file => ({

package/dist/spa/src/afcl/Table.vue

@@ -110,15 +110,15 @@
             <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
             1
           </button>
-          <div
-            :contenteditable="!isLoading && !props.isLoading"
+          <input
+            type="text"
+            v-model="pageInput"
+            :style="{ width: `${Math.max(1, pageInput.length+4)}ch` }"
             class="min-w-10 outline-none inline-block w-auto py-1.5 px-3 text-sm text-center text-lightTablePaginationInputText border border-lightTablePaginationInputBorder bg-lightTablePaginationInputBackground dark:border-darkTablePaginationInputBorder dark:text-darkTablePaginationInputText dark:bg-darkTablePaginationInputBackground z-10"
             @keydown="onPageKeydown($event)"
-            @input="onPageInput($event)"
             @blur="validatePageInput()"
           >
-            {{ pageInput }}
-          </div>
+          </input>
 
           <button
             class="flex items-center py-1 px-3 text-sm font-medium text-lightUnactivePaginationButtonText focus:outline-none bg-lightUnactivePaginationButtonBackground border-l-0  border border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:text-darkUnactivePaginationButtonText dark:border-darkUnactivePaginationButtonBorder dark:hover:text-darkUnactivePaginationButtonHoverText dark:hover:bg-darkUnactivePaginationButtonHoverBackground disabled:opacity-50"
@@ -245,10 +245,6 @@
     'sort-change',
     'clickTableRow'
   ]);
-  
-  function onPageInput(event: any) {
-    pageInput.value = event.target.innerText;
-  }
 
   function validatePageInput() {
     const newPage = parseInt(pageInput.value) || 1;

package/dist/spa/src/components/ResourceListTable.vue

@@ -241,15 +241,14 @@
           <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
           1
         </button>
-        <div
-          contenteditable="true" 
-          class="af-pagination-input min-w-10 outline-none inline-block w-auto py-1.5 px-3 text-sm text-center text-lightListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround z-10"
+        <input
+          type="text"
+          v-model="pageInput"
+          :style="{ width: `${Math.max(1, pageInput.length+4)}ch` }"
+          class="af-pagination-input min-w-10 outline-none inline-block py-1.5 px-3 text-sm text-center text-lightListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround z-10"
           @keydown="onPageKeydown($event)"
-          @input="onPageInput($event)"
           @blur="validatePageInput()"
-        >
-          {{ pageInput }}
-        </div>
+        />
 
         <button
           class="af-pagination-last-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
@@ -599,10 +598,6 @@ async function startCustomAction(actionId: string, row: any) {
   }
 }
 
-function onPageInput(event: any) {
-  pageInput.value = event.target.innerText;
-}
-
 function validatePageInput() {
   const newPage = parseInt(pageInput.value) || 1;
   const validPage = Math.max(1, Math.min(newPage, totalPages.value));

package/dist/spa/src/components/ResourceListTableVirtual.vue

@@ -262,15 +262,15 @@
           <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
           1
         </button>
-        <div
-          contenteditable="true" 
+        <input
+          type="text"
+          v-model="pageInput"
+          :style="{ width: `${Math.max(1, pageInput.length+4)}ch` }"
           class="af-pagination-input min-w-10 outline-none inline-block w-auto py-1.5 px-3 text-sm text-center text-lightListTablePaginationCurrentPageText border border-lightListTablePaginationBorder dark:border-darkListTablePaginationBorder dark:text-darkListTablePaginationCurrentPageText dark:bg-darkListTablePaginationBackgoround z-10"
           @keydown="onPageKeydown($event)"
-          @input="onPageInput($event)"
           @blur="validatePageInput()"
         >
-          {{ pageInput }}
-        </div>
+        </input>
 
         <button
           class="af-pagination-last-page-button flex items-center py-1 px-3 text-sm font-medium text-lightListTablePaginationText focus:outline-none bg-lightListTablePaginationBackgoround border-l-0  border border-lightListTablePaginationBorder hover:bg-lightListTablePaginationBackgoroundHover hover:text-lightListTablePaginationTextHover focus:z-10 focus:ring-4 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing dark:bg-darkListTablePaginationBackgoround dark:text-darkListTablePaginationText dark:border-darkListTablePaginationBorder dark:hover:text-white dark:hover:bg-darkListTablePaginationBackgoroundHover disabled:opacity-50"
@@ -623,9 +623,6 @@ async function startCustomAction(actionId: string, row: any) {
   }
 }
 
-function onPageInput(event: any) {
-  pageInput.value = event.target.innerText;
-}
 
 function validatePageInput() {
   const newPage = parseInt(pageInput.value) || 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "2.4.0-next.317",
+  "version": "2.4.0-next.319",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",