@fy-/fws-vue 2.2.67 → 2.2.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/fws/DataTable.vue +3 -53
- package/package.json +1 -1
|
@@ -4,8 +4,6 @@ import {
|
|
|
4
4
|
ArrowDownTrayIcon,
|
|
5
5
|
ArrowsUpDownIcon,
|
|
6
6
|
ArrowUpIcon,
|
|
7
|
-
MagnifyingGlassIcon,
|
|
8
|
-
XCircleIcon,
|
|
9
7
|
} from '@heroicons/vue/24/solid'
|
|
10
8
|
import { useStorage } from '@vueuse/core'
|
|
11
9
|
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
|
@@ -33,7 +31,6 @@ const currentPage = ref<number>(1)
|
|
|
33
31
|
const route = useRoute()
|
|
34
32
|
const data = ref<any[]>([])
|
|
35
33
|
const paging = ref<any>(undefined)
|
|
36
|
-
const searchTerm = ref<string>('')
|
|
37
34
|
const isLoading = ref<boolean>(false)
|
|
38
35
|
const perPageOptions = [
|
|
39
36
|
['10', '10'],
|
|
@@ -90,7 +87,6 @@ async function getData(page: number = 1) {
|
|
|
90
87
|
sort,
|
|
91
88
|
results_per_page: perPage.value,
|
|
92
89
|
page_no: page,
|
|
93
|
-
search: searchTerm.value || undefined, // Only include if not empty
|
|
94
90
|
}
|
|
95
91
|
try {
|
|
96
92
|
const r = await restFunction(props.apiPath, 'GET', requestParams, {
|
|
@@ -175,26 +171,6 @@ function exportToCsv() {
|
|
|
175
171
|
document.body.removeChild(link)
|
|
176
172
|
}
|
|
177
173
|
|
|
178
|
-
function handleSearch() {
|
|
179
|
-
getData(1) // Reset to page 1 when searching
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
function clearSearch() {
|
|
183
|
-
searchTerm.value = ''
|
|
184
|
-
getData(1)
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
// Debounced search
|
|
188
|
-
let searchTimeout: number | null = null
|
|
189
|
-
function debouncedSearch() {
|
|
190
|
-
if (searchTimeout) {
|
|
191
|
-
clearTimeout(searchTimeout)
|
|
192
|
-
}
|
|
193
|
-
searchTimeout = window.setTimeout(() => {
|
|
194
|
-
handleSearch()
|
|
195
|
-
}, 400)
|
|
196
|
-
}
|
|
197
|
-
|
|
198
174
|
watch(perPage, () => {
|
|
199
175
|
getData()
|
|
200
176
|
})
|
|
@@ -231,31 +207,8 @@ onUnmounted(() => {
|
|
|
231
207
|
<!-- Table header with controls -->
|
|
232
208
|
<div class="table-controls p-4 border-b border-fv-neutral-200 dark:border-fv-neutral-800">
|
|
233
209
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
|
234
|
-
<!--
|
|
235
|
-
<div
|
|
236
|
-
<div class="relative">
|
|
237
|
-
<input
|
|
238
|
-
v-model="searchTerm"
|
|
239
|
-
type="search"
|
|
240
|
-
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"
|
|
241
|
-
:placeholder="$t('search_placeholder')"
|
|
242
|
-
@input="debouncedSearch"
|
|
243
|
-
@keyup.enter="handleSearch"
|
|
244
|
-
>
|
|
245
|
-
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
|
246
|
-
<MagnifyingGlassIcon class="w-4 h-4 text-fv-neutral-500 dark:text-fv-neutral-400" aria-hidden="true" />
|
|
247
|
-
</div>
|
|
248
|
-
<button
|
|
249
|
-
v-if="searchTerm"
|
|
250
|
-
type="button"
|
|
251
|
-
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"
|
|
252
|
-
aria-label="Clear search"
|
|
253
|
-
@click="clearSearch"
|
|
254
|
-
>
|
|
255
|
-
<XCircleIcon class="w-5 h-5" aria-hidden="true" />
|
|
256
|
-
</button>
|
|
257
|
-
</div>
|
|
258
|
-
</div>
|
|
210
|
+
<!-- Left side spacer -->
|
|
211
|
+
<div />
|
|
259
212
|
|
|
260
213
|
<!-- Export and per page settings -->
|
|
261
214
|
<div class="flex items-center gap-2">
|
|
@@ -268,10 +221,7 @@ onUnmounted(() => {
|
|
|
268
221
|
<span class="hidden sm:inline">{{ $t("global_table_export") }}</span>
|
|
269
222
|
</button>
|
|
270
223
|
|
|
271
|
-
<div class="flex items-center
|
|
272
|
-
<label for="perPageSelect" class="text-sm font-medium text-fv-neutral-600 dark:text-fv-neutral-400 whitespace-nowrap hidden sm:block">
|
|
273
|
-
{{ $t("per_page") }}:
|
|
274
|
-
</label>
|
|
224
|
+
<div class="flex items-center">
|
|
275
225
|
<DefaultInput
|
|
276
226
|
id="perPageSelect"
|
|
277
227
|
v-model="perPage"
|