@fy-/fws-vue 2.2.66 → 2.2.68

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()
 })
@@ -231,31 +207,8 @@ onUnmounted(() => {
     <!-- 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>
+        <!-- Left side spacer -->
+        <div />
 
         <!-- Export and per page settings -->
         <div class="flex items-center gap-2">
@@ -268,10 +221,7 @@ onUnmounted(() => {
             <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>
+          <div class="flex items-center">
             <DefaultInput
               id="perPageSelect"
               v-model="perPage"
@@ -314,7 +264,7 @@ onUnmounted(() => {
               scope="col"
               class="px-6 py-4 whitespace-nowrap font-semibold"
               :class="{
-                'cursor-pointer hover:bg-fv-neutral-100 dark:hover:bg-fv-neutral-750 transition-colors duration-200': sortables[key],
+                'cursor-pointer hover:bg-fv-neutral-100 dark:hover:bg-fv-neutral-700 transition-colors duration-200': sortables[key],
               }"
               @click="
                 () => {
@@ -347,7 +297,7 @@ onUnmounted(() => {
           <tr
             v-for="(row, index) in data"
             :key="index"
-            class="bg-white border-b dark:bg-fv-neutral-900 dark:border-fv-neutral-800 hover:bg-fv-neutral-50 dark:hover:bg-fv-neutral-850 transition-colors duration-200"
+            class="bg-white border-b dark:bg-fv-neutral-900 dark:border-fv-neutral-800 hover:bg-fv-neutral-50 dark:hover:bg-fv-neutral-900 transition-colors duration-200"
           >
             <td
               v-for="(header, key) in headers"
@@ -435,7 +385,7 @@ th, td {
 /* Zebra striping for better readability */
 @media (prefers-reduced-motion: no-preference) {
   tbody tr:nth-child(odd) {
-    @apply bg-fv-neutral-50 dark:bg-fv-neutral-850;
+    @apply bg-fv-neutral-50 dark:bg-fv-neutral-900;
   }
 
   tbody tr:nth-child(odd):hover {
@@ -469,7 +419,7 @@ a:focus-visible {
 }
 
 .dark tbody tr:nth-child(odd) {
-  @apply bg-fv-neutral-850;
+  @apply bg-fv-neutral-900;
 }
 
 .dark tbody tr:hover {

package/package.json

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