@fy-/fws-vue 2.2.67 → 2.2.69

package/components/fws/DataTable.vue

@@ -4,8 +4,6 @@ import {
   ArrowDownTrayIcon,
   ArrowsUpDownIcon,
   ArrowUpIcon,
-  MagnifyingGlassIcon,
-  XCircleIcon,
 } from '@heroicons/vue/24/solid'
 import { useStorage } from '@vueuse/core'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
@@ -33,7 +31,6 @@ const currentPage = ref<number>(1)
 const route = useRoute()
 const data = ref<any[]>([])
 const paging = ref<any>(undefined)
-const searchTerm = ref<string>('')
 const isLoading = ref<boolean>(false)
 const perPageOptions = [
   ['10', '10'],
@@ -90,7 +87,6 @@ async function getData(page: number = 1) {
     sort,
     results_per_page: perPage.value,
     page_no: page,
-    search: searchTerm.value || undefined, // Only include if not empty
   }
   try {
     const r = await restFunction(props.apiPath, 'GET', requestParams, {
@@ -175,26 +171,6 @@ function exportToCsv() {
   document.body.removeChild(link)
 }
 
-function handleSearch() {
-  getData(1) // Reset to page 1 when searching
-}
-
-function clearSearch() {
-  searchTerm.value = ''
-  getData(1)
-}
-
-// Debounced search
-let searchTimeout: number | null = null
-function debouncedSearch() {
-  if (searchTimeout) {
-    clearTimeout(searchTimeout)
-  }
-  searchTimeout = window.setTimeout(() => {
-    handleSearch()
-  }, 400)
-}
-
 watch(perPage, () => {
   getData()
 })
@@ -230,63 +206,32 @@ onUnmounted(() => {
   <div class="data-table-container bg-white dark:bg-fv-neutral-900 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden">
     <!-- Table header with controls -->
     <div class="table-controls p-4 border-b border-fv-neutral-200 dark:border-fv-neutral-800">
-      <div class="flex flex-wrap items-center justify-between gap-3">
-        <!-- Search input -->
-        <div class="search-container relative flex-grow max-w-md">
-          <div class="relative">
-            <input
-              v-model="searchTerm"
-              type="search"
-              class="w-full pl-10 pr-4 py-2 text-sm rounded-lg border border-fv-neutral-300 dark:border-fv-neutral-700 bg-white dark:bg-fv-neutral-800 text-fv-neutral-900 dark:text-white focus:ring-2 focus:ring-fv-primary-500 dark:focus:ring-fv-primary-600 focus:border-fv-primary-500 dark:focus:border-fv-primary-600 transition-colors duration-200"
-              :placeholder="$t('search_placeholder')"
-              @input="debouncedSearch"
-              @keyup.enter="handleSearch"
-            >
-            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-              <MagnifyingGlassIcon class="w-4 h-4 text-fv-neutral-500 dark:text-fv-neutral-400" aria-hidden="true" />
-            </div>
-            <button
-              v-if="searchTerm"
-              type="button"
-              class="absolute inset-y-0 right-0 flex items-center pr-3 text-fv-neutral-500 hover:text-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:text-fv-neutral-200"
-              aria-label="Clear search"
-              @click="clearSearch"
-            >
-              <XCircleIcon class="w-5 h-5" aria-hidden="true" />
-            </button>
-          </div>
-        </div>
-
-        <!-- Export and per page settings -->
-        <div class="flex items-center gap-2">
+      <div v-if="hasExportableColumns && hasData" class="flex flex-wrap items-center justify-end gap-3">
+        <!-- Export button -->
+        <div class="flex items-center">
           <button
-            v-if="hasExportableColumns && hasData"
             class="export-btn flex items-center justify-center gap-2 px-3 py-2 bg-fv-neutral-100 hover:bg-fv-neutral-200 text-fv-neutral-800 rounded-lg text-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fv-neutral-400 dark:bg-fv-neutral-800 dark:hover:bg-fv-neutral-700 dark:text-fv-neutral-200"
             @click="exportToCsv"
           >
             <ArrowDownTrayIcon class="w-4 h-4" aria-hidden="true" />
             <span class="hidden sm:inline">{{ $t("global_table_export") }}</span>
           </button>
-
-          <div class="flex items-center gap-2">
-            <label for="perPageSelect" class="text-sm font-medium text-fv-neutral-600 dark:text-fv-neutral-400 whitespace-nowrap hidden sm:block">
-              {{ $t("per_page") }}:
-            </label>
-            <DefaultInput
-              id="perPageSelect"
-              v-model="perPage"
-              :options="perPageOptions"
-              :show-label="false"
-              type="select"
-              class="w-20"
-            />
-          </div>
         </div>
       </div>
 
       <!-- Pagination - top -->
-      <div v-if="hasPaging" class="mt-3">
+      <div v-if="hasPaging" class="mt-3 flex flex-wrap justify-between items-center gap-3">
         <DefaultPaging :id="`${props.id}Pages`" :items="paging" />
+        <div class="flex items-center">
+          <DefaultInput
+            id="perPageSelectTop"
+            v-model="perPage"
+            :options="perPageOptions"
+            :show-label="false"
+            type="select"
+            class="w-20"
+          />
+        </div>
       </div>
     </div>
 
@@ -385,7 +330,19 @@ onUnmounted(() => {
 
     <!-- Pagination - bottom -->
     <div v-if="hasPaging" class="px-4 py-3 border-t border-fv-neutral-200 dark:border-fv-neutral-800">
-      <DefaultPaging :id="`${props.id}Pages`" :items="paging" />
+      <div class="flex flex-wrap justify-between items-center gap-3">
+        <DefaultPaging :id="`${props.id}Pages`" :items="paging" />
+        <div class="flex items-center">
+          <DefaultInput
+            id="perPageSelectBottom"
+            v-model="perPage"
+            :options="perPageOptions"
+            :show-label="false"
+            type="select"
+            class="w-20"
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>

package/components/ui/DefaultPaging.vue

@@ -18,7 +18,7 @@ const props = withDefaults(
     showLegend?: boolean
   }>(),
   {
-    showLegend: true,
+    showLegend: false,
     hash: '',
   },
 )
@@ -156,7 +156,7 @@ onMounted(() => {
     class="flex flex-col items-center justify-center"
   >
     <div class="paging-container w-full">
-      <nav aria-label="Pagination" class="mb-2 flex justify-center">
+      <nav aria-label="Pagination" class="mb-1 flex justify-center">
         <ul class="pagination-list">
           <!-- Previous Button -->
           <li v-if="items.page_no >= 2" class="pagination-item md:block">
@@ -167,13 +167,13 @@ onMounted(() => {
               title="Previous page"
               @click="prev()"
             >
-              <ChevronLeftIcon class="w-5 h-5" aria-hidden="true" />
+              <ChevronLeftIcon class="w-4 h-4" aria-hidden="true" />
               <span class="sr-only">{{ $t("previous_paging") }}</span>
             </button>
           </li>
           <li v-else class="pagination-item invisible md:hidden">
             <div class="pagination-placeholder">
-              <ChevronLeftIcon class="w-5 h-5 invisible" aria-hidden="true" />
+              <ChevronLeftIcon class="w-4 h-4 invisible" aria-hidden="true" />
             </div>
           </li>
 
@@ -267,26 +267,26 @@ onMounted(() => {
               title="Next page"
               @click="next()"
             >
-              <ChevronRightIcon class="w-5 h-5" aria-hidden="true" />
+              <ChevronRightIcon class="w-4 h-4" aria-hidden="true" />
               <span class="sr-only">{{ $t("next_paging") }}</span>
             </button>
           </li>
           <li v-else class="pagination-item invisible md:hidden">
             <div class="pagination-placeholder">
-              <ChevronRightIcon class="w-5 h-5 invisible" aria-hidden="true" />
+              <ChevronRightIcon class="w-4 h-4 invisible" aria-hidden="true" />
             </div>
           </li>
         </ul>
       </nav>
 
       <!-- Mobile page indication (x of y) -->
-      <div class="sm:hidden text-center mb-2">
-        <span class="text-sm font-medium text-fv-neutral-700 dark:text-fv-neutral-200">
+      <div class="sm:hidden text-center mb-1">
+        <span class="text-xs font-medium text-fv-neutral-700 dark:text-fv-neutral-200">
           Page {{ items.page_no }} of {{ items.page_max }}
         </span>
       </div>
 
-      <!-- Results summary -->
+      <!-- Results summary - Now defaults to not showing -->
       <p
         v-if="showLegend"
         class="text-xs text-center text-fv-neutral-700 dark:text-fv-neutral-400"
@@ -306,7 +306,7 @@ onMounted(() => {
 
 <style scoped>
 .pagination-list {
-  @apply inline-flex items-center justify-center gap-1 shadow-sm rounded-lg;
+  @apply inline-flex items-center justify-center gap-0.5 shadow-sm rounded-lg;
 }
 
 .pagination-item {
@@ -319,14 +319,14 @@ onMounted(() => {
 .pagination-ellipsis,
 .pagination-placeholder {
   @apply flex items-center justify-center;
-  min-width: 2.25rem;
-  height: 2.25rem;
+  min-width: 1.85rem;
+  height: 1.85rem;
 }
 
 .pagination-link {
-  @apply px-3 py-2 rounded-md text-sm font-medium bg-white border border-fv-neutral-200
+  @apply px-2 py-1 rounded-md text-xs font-medium bg-white border border-fv-neutral-200
     text-fv-neutral-700 hover:bg-fv-neutral-50 hover:text-fv-primary-600
-    focus:z-10 focus:outline-none focus:ring-2 focus:ring-fv-primary-500 focus:ring-offset-1
+    focus:z-10 focus:outline-none focus:ring-1 focus:ring-fv-primary-500 focus:ring-offset-1
     transition-colors duration-200
     dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-200
     dark:hover:bg-fv-neutral-700 dark:hover:text-white
@@ -334,34 +334,34 @@ onMounted(() => {
 }
 
 .pagination-current {
-  @apply px-3 py-2 rounded-md text-sm font-bold
+  @apply px-2 py-1 rounded-md text-xs font-bold
     bg-fv-primary-100 text-fv-primary-700 border border-fv-primary-300
     dark:bg-fv-primary-900 dark:text-fv-primary-100 dark:border-fv-primary-700;
 }
 
 .pagination-nav-button {
-  @apply p-2 rounded-md text-fv-neutral-600 bg-white border border-fv-neutral-200
+  @apply p-1.5 rounded-md text-fv-neutral-600 bg-white border border-fv-neutral-200
     hover:bg-fv-neutral-50 hover:text-fv-primary-600
-    focus:z-10 focus:outline-none focus:ring-2 focus:ring-fv-primary-500 focus:ring-offset-1
+    focus:z-10 focus:outline-none focus:ring-1 focus:ring-fv-primary-500 focus:ring-offset-1
     transition-colors duration-200
     dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-300
     dark:hover:bg-fv-neutral-700 dark:hover:text-white;
 }
 
 .pagination-ellipsis {
-  @apply px-2 py-1 text-fv-neutral-500 dark:text-fv-neutral-400;
+  @apply px-1 py-0.5 text-fv-neutral-500 dark:text-fv-neutral-400;
 }
 
 @media (max-width: 640px) {
   .pagination-list {
-    @apply gap-2;
+    @apply gap-1;
   }
 
   .pagination-link,
   .pagination-button,
   .pagination-current {
-    min-width: 2rem;
-    height: 2rem;
+    min-width: 1.65rem;
+    height: 1.65rem;
   }
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.2.67",
+  "version": "2.2.69",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",