@fy-/fws-vue 2.2.64 → 2.2.66

package/components/fws/DataTable.vue

@@ -2,10 +2,13 @@
 import {
   ArrowDownIcon,
   ArrowDownTrayIcon,
+  ArrowsUpDownIcon,
   ArrowUpIcon,
+  MagnifyingGlassIcon,
+  XCircleIcon,
 } from '@heroicons/vue/24/solid'
 import { useStorage } from '@vueuse/core'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useEventBus } from '../../composables/event-bus'
 import { useRest } from '../../composables/rest'
@@ -30,6 +33,8 @@ 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'],
   ['25', '25'],
@@ -68,7 +73,14 @@ const currentSort = useStorage<SortingField>(
   `${props.id}CurrentSort`,
   props.defaultSort,
 )
+
+// Computed properties for better reactivity
+const hasData = computed(() => data.value && data.value.length > 0)
+const hasExportableColumns = computed(() => props.exportableColumns.length > 0)
+const hasPaging = computed(() => paging.value && paging.value.page_max > 1 && paging.value.page_no)
+
 async function getData(page: number = 1) {
+  isLoading.value = true
   eventBus.emit('main-loading', true)
   if (route.query.page) page = Number.parseInt(route.query.page.toString())
   const sort: any = {}
@@ -78,20 +90,30 @@ 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, {
+      getBody: true,
+    })
+    currentPage.value = page
+    data.value = []
+    paging.value = undefined
+    if (r && r.result === 'success') {
+      data.value = r.data
+      paging.value = r.paging
+      eventBus.emit(`${props.id}NewData`, data.value)
+    }
   }
-  const r = await restFunction(props.apiPath, 'GET', requestParams, {
-    getBody: true,
-  })
-  currentPage.value = page
-  data.value = []
-  paging.value = undefined
-  if (r && r.result === 'success') {
-    data.value = r.data
-    paging.value = r.paging
-    eventBus.emit(`${props.id}NewData`, data.value)
+  catch (error) {
+    console.error('Error fetching data:', error)
+  }
+  finally {
+    isLoading.value = false
+    eventBus.emit('main-loading', false)
   }
-  eventBus.emit('main-loading', false)
 }
+
 function sortData(key: string) {
   if (!props.sortables[key]) return
   const newSort: SortingField = {
@@ -112,7 +134,10 @@ function sortData(key: string) {
   }
   currentSort.value = { ...newSort }
 }
+
 function exportToCsv() {
+  if (!hasData.value || !hasExportableColumns.value) return
+
   const header = props.exportableColumns
     .map(column => props.headers[column] ?? column)
     .join(',')
@@ -149,6 +174,27 @@ function exportToCsv() {
   link.click()
   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()
 })
@@ -181,47 +227,94 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div>
-    <div
-      class="flex gap-2 justify-between items-center border-b border-fv-primary-600 mb-2 pb-2"
-    >
-      <DefaultPaging v-if="paging" :id="`${props.id}Pages`" :items="paging" />
-      <button
-        v-if="exportableColumns.length && data.length"
-        class="btn primary small"
-        @click="exportToCsv"
-      >
-        <ArrowDownTrayIcon class="w-4 h-4 mr-2" />{{ $t("global_table_export") }}
-      </button>
-      <DefaultInput
-        :id="`${id}PerPage`"
-        v-model="perPage"
-        :options="perPageOptions"
-        :show-label="false"
-        type="select"
-        class="w-20"
-      />
+  <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">
+          <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">
+        <DefaultPaging :id="`${props.id}Pages`" :items="paging" />
+      </div>
+    </div>
+
+    <!-- Loading state -->
+    <div v-if="isLoading" class="flex justify-center items-center py-12">
+      <div class="loading-spinner w-8 h-8 border-4 border-fv-neutral-200 dark:border-fv-neutral-700 border-t-fv-primary-600 dark:border-t-fv-primary-500 rounded-full animate-spin" />
     </div>
 
+    <!-- Table view -->
     <div
-      v-if="data.length"
-      class="relative overflow-x-auto border-fv-primary-600 sm:rounded-lg"
+      v-else-if="hasData"
+      class="overflow-x-auto"
     >
       <table
-        class="w-full text-sm text-left text-fv-neutral-500 dark:text-fv-neutral-400"
+        class="w-full text-sm text-left"
       >
         <thead
           v-if="showHeaders"
-          class="text-xs text-fv-neutral-700 uppercase bg-fv-neutral-50 dark:bg-fv-neutral-800 dark:text-fv-neutral-400"
+          class="text-xs uppercase bg-fv-neutral-50 dark:bg-fv-neutral-800 text-fv-neutral-700 dark:text-fv-neutral-300"
         >
           <tr>
             <th
               v-for="(header, key) in headers"
               :key="key"
               scope="col"
-              class="px-6 py-3 whitespace-nowrap"
+              class="px-6 py-4 whitespace-nowrap font-semibold"
               :class="{
-                'cursor-pointer': sortables[key],
+                'cursor-pointer hover:bg-fv-neutral-100 dark:hover:bg-fv-neutral-750 transition-colors duration-200': sortables[key],
               }"
               @click="
                 () => {
@@ -231,14 +324,22 @@ onUnmounted(() => {
                 }
               "
             >
-              {{ header }}
-              <template v-if="sortables[key] && currentSort.field === key">
-                <ArrowUpIcon
-                  v-if="currentSort.direction === 'desc'"
-                  class="inline w-3 h-3 align-top mt-0.5"
-                />
-                <ArrowDownIcon v-else class="inline w-3 h-3 align-top mt-0.5" />
-              </template>
+              <div class="flex items-center gap-1">
+                {{ header }}
+                <span v-if="sortables[key]" class="inline-flex">
+                  <ArrowsUpDownIcon v-if="currentSort.field !== key" class="w-4 h-4 text-fv-neutral-400 dark:text-fv-neutral-500" aria-hidden="true" />
+                  <ArrowUpIcon
+                    v-else-if="currentSort.direction === 'asc'"
+                    class="w-4 h-4 text-fv-primary-600 dark:text-fv-primary-400"
+                    aria-hidden="true"
+                  />
+                  <ArrowDownIcon
+                    v-else
+                    class="w-4 h-4 text-fv-primary-600 dark:text-fv-primary-400"
+                    aria-hidden="true"
+                  />
+                </span>
+              </div>
             </th>
           </tr>
         </thead>
@@ -246,15 +347,19 @@ 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-950"
+            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"
           >
-            <td v-for="(header, key) in headers" :key="key" class="px-6 py-4">
+            <td
+              v-for="(header, key) in headers"
+              :key="key"
+              class="px-6 py-4 align-middle"
+            >
               <slot :name="key" :value="row">
                 <template v-if="row[key]">
                   {{ row[key] }}
                 </template>
                 <template v-else>
-                  {{ $t("global_table_empty_cell") }}
+                  <span class="text-fv-neutral-400 dark:text-fv-neutral-600">{{ $t("global_table_empty_cell") }}</span>
                 </template>
               </slot>
             </td>
@@ -262,5 +367,112 @@ onUnmounted(() => {
         </tbody>
       </table>
     </div>
+
+    <!-- Empty state -->
+    <div v-else class="py-12 px-4 text-center">
+      <div class="empty-state flex flex-col items-center justify-center">
+        <svg class="w-16 h-16 text-fv-neutral-300 dark:text-fv-neutral-700 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+        </svg>
+        <p class="text-lg font-medium text-fv-neutral-700 dark:text-fv-neutral-300">
+          {{ $t("no_data_found") }}
+        </p>
+        <p class="text-sm text-fv-neutral-500 dark:text-fv-neutral-400 max-w-md mt-1">
+          {{ $t("try_another_search") }}
+        </p>
+      </div>
+    </div>
+
+    <!-- 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>
   </div>
 </template>
+
+<style scoped>
+.data-table-container {
+  @apply transition-all duration-300;
+}
+
+/* Responsive styles */
+@media (max-width: 640px) {
+  .table-controls {
+    @apply p-3;
+  }
+
+  td, th {
+    @apply px-3 py-3;
+  }
+}
+
+/* Loading spinner animation */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-spinner {
+  animation: spin 1s linear infinite;
+}
+
+/* Fade in animation for rows */
+tbody tr {
+  animation: fadeIn 0.2s ease-out forwards;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0.5; }
+  to { opacity: 1; }
+}
+
+/* Improved hover states for better interactivity */
+th, td {
+  @apply transition-colors duration-200;
+}
+
+/* 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;
+  }
+
+  tbody tr:nth-child(odd):hover {
+    @apply bg-fv-neutral-100 dark:bg-fv-neutral-800;
+  }
+}
+
+/* Accessible focus styles */
+button:focus-visible,
+a:focus-visible {
+  @apply outline-none ring-2 ring-fv-primary-500 ring-offset-2 dark:ring-offset-fv-neutral-900;
+}
+
+/* Export button hover effect */
+.export-btn {
+  @apply relative overflow-hidden;
+}
+
+.export-btn::after {
+  content: '';
+  @apply absolute inset-0 opacity-0 transition-opacity duration-200;
+}
+
+.export-btn:hover::after {
+  @apply opacity-10 bg-black dark:bg-white;
+}
+
+/* Additional dark mode color for better contrast */
+.dark .data-table-container {
+  @apply bg-fv-neutral-900;
+}
+
+.dark tbody tr:nth-child(odd) {
+  @apply bg-fv-neutral-850;
+}
+
+.dark tbody tr:hover {
+  @apply bg-fv-neutral-800;
+}
+</style>

package/components/fws/FilterData.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { FilterDataItems } from '../../types'
+import { AdjustmentsHorizontalIcon, ArrowPathIcon, FunnelIcon, XMarkIcon } from '@heroicons/vue/24/solid'
 import useVuelidate from '@vuelidate/core'
 import { onMounted, onUnmounted, reactive, ref } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
@@ -125,115 +126,187 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <form v-if="!hidden" @submit.prevent="() => submitForm()">
-    <div :class="css">
-      <div v-for="(g, i) in data" :key="`index_${i}`" class="relative">
-        <template v-for="f in g" :key="f.uid">
-          <template v-if="!f.isHidden">
-            <DefaultInput
-              v-if="
-                ['text', 'select', 'date', 'email', 'autocomplete'].includes(
-                  f.type,
-                )
-              "
-              :id="f.uid"
-              v-model="state.formData[f.uid]"
-              :type="f.type === 'autocomplete' ? 'text' : f.type"
-              :label="f.label"
-              :options="f.options ? f.options : [[]]"
-              :error-vuelidate="v$.formData[f.uid].$errors"
-              class="mb-2"
-              @focus="
-                () => {
-                  f.focused = true;
-                  $eventBus.emit('focusInput', true);
-                }
-              "
-              @blur="
-                () => {
-                  f.focused = false;
-                  $eventBus.emit('focusInput', false);
-                }
-              "
-              @change="
-                (ev: any) => {
-                  if (f.onChangeValue) {
-                    f.onChangeValue(state.formData, ev);
+  <div class="filter-data-wrapper mb-6">
+    <form v-if="!hidden" class="filter-data-form bg-white dark:bg-fv-neutral-900 rounded-lg border border-fv-neutral-200 dark:border-fv-neutral-800 shadow-sm hover:shadow-md transition-all duration-300 p-4" @submit.prevent="() => submitForm()">
+      <div class="flex items-center justify-between mb-4 border-b border-fv-neutral-200 dark:border-fv-neutral-800 pb-3">
+        <h3 class="text-lg font-medium text-fv-neutral-900 dark:text-white flex items-center">
+          <FunnelIcon class="w-5 h-5 mr-2 text-fv-primary-600 dark:text-fv-primary-400" aria-hidden="true" />
+          {{ $t("filters_title") }}
+        </h3>
+      </div>
+
+      <div :class="`${css} grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4`">
+        <div v-for="(g, i) in data" :key="`index_${i}`" class="relative">
+          <template v-for="f in g" :key="f.uid">
+            <template v-if="!f.isHidden">
+              <DefaultInput
+                v-if="
+                  ['text', 'select', 'date', 'email', 'autocomplete'].includes(
+                    f.type,
+                  )
+                "
+                :id="f.uid"
+                v-model="state.formData[f.uid]"
+                :type="f.type === 'autocomplete' ? 'text' : f.type"
+                :label="f.label"
+                :options="f.options ? f.options : [[]]"
+                :error-vuelidate="v$.formData[f.uid].$errors"
+                @focus="
+                  () => {
+                    f.focused = true;
+                    $eventBus.emit('focusInput', true);
                   }
-                }
-              "
-              @update:model-value="
-                (v:any) => {
-                  if (f.autocomplete && v.length >= 2) {
-                    fDynamicOptions = [];
-                    f.autocomplete(v).then((r:any) => {
-                      fDynamicOptions = r;
-                    });
+                "
+                @blur="
+                  () => {
+                    f.focused = false;
+                    $eventBus.emit('focusInput', false);
                   }
-                }
-              "
-            >
-              <div
-                v-if="f.type === 'autocomplete' && f.focused"
-                class="absolute flex flex-col gap-2 p-2 bottom-0 translate-y-full inset-x-0 bg-fv-neutral-200 dark:bg-fv-neutral-800 border border-fv-neutral-700 z-10"
-              >
-                <button
-                  v-for="o in fDynamicOptions"
-                  :key="o[0]"
-                  class="flex items-center justify-between btn defaults neutral"
-                  type="button"
-                  @click.prevent="
-                    () => {
-                      f.focused = false;
-                      state.formData[f.uid] = o[0];
+                "
+                @change="
+                  (ev: any) => {
+                    if (f.onChangeValue) {
+                      f.onChangeValue(state.formData, ev);
+                    }
+                  }
+                "
+                @update:model-value="
+                  (v:any) => {
+                    if (f.autocomplete && v.length >= 2) {
+                      fDynamicOptions = [];
+                      f.autocomplete(v).then((r:any) => {
+                        fDynamicOptions = r;
+                      });
                     }
-                  "
+                  }
+                "
+              >
+                <div
+                  v-if="f.type === 'autocomplete' && f.focused && fDynamicOptions.length > 0"
+                  class="absolute flex flex-col gap-2 p-2 bottom-0 translate-y-full inset-x-0 bg-white dark:bg-fv-neutral-800 border border-fv-neutral-200 dark:border-fv-neutral-700 z-10 rounded-lg shadow-lg max-h-60 overflow-y-auto"
                 >
-                  {{ o[1] }} <small v-if="o[0] !== ''">({{ o[0] }})</small>
-                </button>
-              </div>
-            </DefaultInput>
-
-            <DefaultDateSelection
-              v-if="f.type === 'range'"
-              :id="f.uid"
-              v-model="state.formData[f.uid]"
-              :label="f.label"
-              mode="interval"
-              class="mb-2"
-            />
+                  <button
+                    v-for="o in fDynamicOptions"
+                    :key="o[0]"
+                    class="flex items-center justify-between p-2 text-fv-neutral-800 dark:text-fv-neutral-200 hover:bg-fv-neutral-100 dark:hover:bg-fv-neutral-700 rounded transition-colors duration-200"
+                    type="button"
+                    @click.prevent="
+                      () => {
+                        f.focused = false;
+                        state.formData[f.uid] = o[0];
+                      }
+                    "
+                  >
+                    <span class="font-medium">{{ o[1] }}</span>
+                    <small v-if="o[0] !== ''" class="text-fv-neutral-500 dark:text-fv-neutral-400 ml-2">({{ o[0] }})</small>
+                  </button>
+                </div>
+              </DefaultInput>
+
+              <DefaultDateSelection
+                v-if="f.type === 'range'"
+                :id="f.uid"
+                v-model="state.formData[f.uid]"
+                :label="f.label"
+                mode="interval"
+              />
+            </template>
           </template>
-        </template>
+        </div>
       </div>
-    </div>
 
-    <div class="flex justify-between mt-2 gap-x-2">
-      <button type="submit" class="btn defaults primary">
-        {{ $t("filters_search_cta") }}
-      </button>
-      <button type="button" class="btn defaults primary" @click="hidden = true">
-        {{ $t("hide_filters_cta") }}
-      </button>
+      <div class="flex flex-wrap justify-between items-center mt-6 gap-2">
+        <div class="flex flex-wrap gap-2">
+          <button
+            type="submit"
+            class="btn-filter flex items-center justify-center gap-2 px-4 py-2 bg-fv-primary-600 hover:bg-fv-primary-700 text-white font-medium rounded-lg text-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fv-primary-500 focus:ring-offset-2 dark:focus:ring-offset-fv-neutral-900"
+          >
+            <AdjustmentsHorizontalIcon class="w-4 h-4" aria-hidden="true" />
+            {{ $t("filters_search_cta") }}
+          </button>
+
+          <button
+            type="reset"
+            class="btn-reset flex items-center justify-center gap-2 px-4 py-2 bg-fv-neutral-100 hover:bg-fv-neutral-200 text-fv-neutral-800 font-medium rounded-lg text-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fv-neutral-400 focus:ring-offset-2 dark:bg-fv-neutral-800 dark:hover:bg-fv-neutral-700 dark:text-fv-neutral-200 dark:focus:ring-offset-fv-neutral-900"
+            @click.prevent="() => { resetForm(); }"
+          >
+            <ArrowPathIcon class="w-4 h-4" aria-hidden="true" />
+            {{ $t("filters_clear_cta") }}
+          </button>
+        </div>
+
+        <button
+          type="button"
+          class="btn-hide flex items-center justify-center gap-2 px-4 py-2 border border-fv-neutral-300 dark:border-fv-neutral-700 bg-white hover:bg-fv-neutral-50 text-fv-neutral-700 font-medium rounded-lg text-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fv-neutral-400 focus:ring-offset-2 dark:bg-fv-neutral-900 dark:hover:bg-fv-neutral-800 dark:text-fv-neutral-300 dark:focus:ring-offset-fv-neutral-900"
+          @click="hidden = true"
+        >
+          <XMarkIcon class="w-4 h-4" aria-hidden="true" />
+          {{ $t("hide_filters_cta") }}
+        </button>
+      </div>
+    </form>
+
+    <div v-else class="text-center">
       <button
-        type="reset"
-        class="btn defaults neutral"
-        @click.prevent="
-          () => {
-            resetForm();
-          }
-        "
+        type="button"
+        class="inline-flex items-center justify-center gap-2 px-4 py-2 bg-fv-primary-100 hover:bg-fv-primary-200 text-fv-primary-800 font-medium rounded-lg text-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fv-primary-500 focus:ring-offset-2 dark:bg-fv-primary-900 dark:hover:bg-fv-primary-800 dark:text-fv-primary-200 dark:focus:ring-offset-fv-neutral-900"
+        @click="hidden = false"
       >
-        {{ $t("filters_clear_cta") }}
+        <FunnelIcon class="w-4 h-4" aria-hidden="true" />
+        {{ $t("show_filters_cta") }}
       </button>
     </div>
-  </form>
-  <div v-else class="flex justify-between mt-2 gap-x-2">
-    <button
-      type="button"
-      class="btn defaults primary !w-full flex-1 !text-center !items-center"
-      @click="hidden = false"
-    >
-      {{ $t("show_filters_cta") }}
-    </button>
   </div>
 </template>
+
+<style scoped>
+.filter-data-wrapper {
+  @apply transition-all duration-300;
+}
+
+.filter-data-form {
+  @apply animate-fadeIn;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.3s ease-out forwards;
+}
+
+/* Responsive styles */
+@media (max-width: 640px) {
+  .filter-data-form {
+    @apply p-3;
+  }
+}
+
+/* Button hover effects */
+.btn-filter, .btn-reset, .btn-hide {
+  @apply relative overflow-hidden;
+}
+
+.btn-filter::after,
+.btn-reset::after,
+.btn-hide::after {
+  content: '';
+  @apply absolute inset-0 opacity-0 transition-opacity duration-200;
+}
+
+.btn-filter:hover::after {
+  @apply opacity-10 bg-white;
+}
+
+.btn-reset:hover::after,
+.btn-hide:hover::after {
+  @apply opacity-10 bg-black;
+}
+
+/* Improved focus styles for accessibility */
+button:focus-visible {
+  @apply outline-none ring-2 ring-fv-primary-500 ring-offset-2 dark:ring-offset-fv-neutral-900;
+}
+</style>

package/components/fws/UserFlow.vue

@@ -237,25 +237,19 @@ onMounted(async () => {
 
       <!-- OAuth providers section -->
       <div v-if="hasOauth && !showEmail" class="fws-login__oauth space-y-3">
-        <div
-          v-for="field of responseFields"
-          v-show="field.type && field.type === 'oauth2' && field.button"
-          :key="field.id"
-        >
-          <button
-            type="button"
+        <template v-for="field of responseFields" :key="field.id">
+          <a
+            v-if="field.type && field.type === 'oauth2' && field.button"
+            href="javascript:void(0);"
             class="flex w-full items-center justify-start gap-3 px-4 py-2.5 rounded-lg border border-fv-neutral-200 dark:border-fv-neutral-700
                    transition-all duration-200 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-fv-neutral-800
                    focus:ring-fv-primary-500 dark:focus:ring-fv-primary-600"
-            :style="`background: ${
-              field.button['background-color']
-            }; color: ${$getContrastingTextColor(
-              field.button['background-color'],
-            )}`"
-            :aria-label="`${$t('user_flow_signin_with', { provider: field.name })}`"
+            :style="field.button && field.button['background-color']
+              ? `background: ${field.button['background-color']}; color: ${$getContrastingTextColor(field.button['background-color'])}`
+              : ''"
             @click="
               () => {
-                if (field.info.Button_Extra?.trigger) {
+                if (field.info && field.info.Button_Extra && field.info.Button_Extra.trigger) {
                   doTrigger(field);
                 }
                 else {
@@ -265,16 +259,17 @@ onMounted(async () => {
             "
           >
             <img
+              v-if="field.button && field.button.logo"
               :key="`${field.label}oauth`"
               class="h-6 w-6 flex-shrink-0"
-              :alt="field.info.Name"
+              :alt="field.info && field.info.Name ? field.info.Name : ''"
               :src="field.button.logo"
             >
             <span class="text-base font-medium">
               {{ $t("user_flow_signin_with", { provider: field.name }) }}
             </span>
-          </button>
-        </div>
+          </a>
+        </template>
 
         <div class="relative my-6">
           <div class="absolute inset-0 flex items-center">
@@ -429,6 +424,7 @@ onMounted(async () => {
   @apply transition-all duration-300;
 }
 
+.fws-login__oauth a,
 .fws-login__oauth button,
 .fws-login__form button[type="submit"] {
   @apply transition-all duration-200;

package/package.json

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