@adminforth/universal-search 1.3.0 → 1.4.1

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.
Files changed (4) hide show
  1. package/build.log +2 -2
  2. package/custom/UniversalSearchInput.vue +42 -17
  3. package/dist/custom/UniversalSearchInput.vue +42 -17
  4. package/package.json +1 -1
package/build.log CHANGED
@@ -7,5 +7,5 @@ custom/
7
7
  custom/UniversalSearchInput.vue
8
8
  custom/tsconfig.json
9
9
 
10
- sent 2,519 bytes received 58 bytes 5,154.00 bytes/sec
11
- total size is 2,295 speedup is 0.89
10
+ sent 2,846 bytes received 58 bytes 5,808.00 bytes/sec
11
+ total size is 2,625 speedup is 0.90
package/custom/UniversalSearchInput.vue CHANGED
@@ -1,32 +1,53 @@
1
1
  <template>
2
2
  <div class="af-universal-search flex items-center gap-1">
3
3
  <slot name="prefix" />
4
- <input
5
- v-model="localValue"
6
- type="text"
7
- :placeholder="props.meta?.placeholder ?? ''"
8
- class="border rounded px-2 py-1 text-sm w-64 dark:bg-gray-800 dark:border-gray-600"
9
- @keyup.enter="applyImmediate"
10
- />
11
- <button
12
- v-if="localValue"
13
- @click="clear"
14
- class="flex items-center py-1 px-2 text-sm font-medium text-lightListViewButtonText focus:outline-none bg-lightListViewButtonBackground rounded border border-lightListViewButtonBorder hover:bg-lightListViewButtonBackgroundHover hover:text-lightListViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightListViewButtonFocusRing dark:focus:ring-darkListViewButtonFocusRing dark:bg-darkListViewButtonBackground dark:text-darkListViewButtonText dark:border-darkListViewButtonBorder dark:hover:text-darkListViewButtonTextHover dark:hover:bg-darkListViewButtonBackgroundHover rounded-default"
15
- type="button"
16
- >
17
- ✕
18
- </button>
4
+ <div class="relative w-64">
5
+ <input
6
+ v-model="localValue"
7
+ type="text"
8
+ :placeholder="props.meta?.placeholder ?? ''"
9
+ class="w-full border rounded text-sm dark:bg-gray-800 dark:border-gray-600 dark:text-white px-2 py-1 pr-6"
10
+ @keyup.enter="applyImmediate"
11
+ >
12
+ <p
13
+ v-if="localValue"
14
+ @click="clear"
15
+ class="absolute right-2 top-1/2 -translate-y-1/2 hover:cursor-pointer hover:text-gray-600 dark:text-white dark:hover:text-gray-400 "
16
+ >
17
+ ✕
18
+ </p>
19
+ </div>
19
20
  <slot name="suffix" />
20
21
  </div>
21
22
  </template>
22
23
  <script setup lang="ts">
23
- import { ref, watch } from 'vue';
24
+ import { ref, watch, onMounted } from 'vue';
24
25
  import adminforth from '@/adminforth';
25
26
  import { AdminForthFilterOperators } from '@/types/Common';
27
+ import { useRoute } from 'vue-router';
28
+
29
+ const route = useRoute();
26
30
 
27
31
  const props = defineProps<{ meta?: any; resource?: any; adminUser?: any }>();
28
32
  const localValue = ref('');
29
33
  let t: any = null;
34
+ let blockFilterUpdate = false;
35
+
36
+ onMounted(() => {
37
+ const filters = Object.keys(route.query).filter(k => k.startsWith('filter__')).map(k => {
38
+ const [_, field, operator] = k.split('__');
39
+ return {
40
+ field,
41
+ operator,
42
+ value: JSON.parse(decodeURIComponent(route.query[k] as string))
43
+ }
44
+ });
45
+ const isUniversalSearchFilterApplied = filters.find(f => f.field === '_universal_search');
46
+ if (isUniversalSearchFilterApplied) {
47
+ localValue.value = isUniversalSearchFilterApplied.value;
48
+ blockFilterUpdate = true;
49
+ };
50
+ });
30
51
 
31
52
  function send(term?: string) {
32
53
  adminforth?.list?.updateFilter?.({
@@ -34,7 +55,6 @@ function send(term?: string) {
34
55
  operator: AdminForthFilterOperators.EQ,
35
56
  value: term || '',
36
57
  });
37
- adminforth?.list?.refresh?.();
38
58
  }
39
59
 
40
60
  function apply() {
@@ -49,12 +69,17 @@ function applyImmediate() {
49
69
  }
50
70
 
51
71
  watch(localValue, () => {
72
+ if (blockFilterUpdate) {
73
+ blockFilterUpdate = false;
74
+ return;
75
+ }
52
76
  const delay = props.meta?.debounceMs ?? 500;
53
77
  if (t) clearTimeout(t);
54
78
  t = setTimeout(apply, delay);
55
79
  });
56
80
 
57
81
  function clear() {
82
+ blockFilterUpdate = true;
58
83
  localValue.value = '';
59
84
  applyImmediate();
60
85
  }
package/dist/custom/UniversalSearchInput.vue CHANGED
@@ -1,32 +1,53 @@
1
1
  <template>
2
2
  <div class="af-universal-search flex items-center gap-1">
3
3
  <slot name="prefix" />
4
- <input
5
- v-model="localValue"
6
- type="text"
7
- :placeholder="props.meta?.placeholder ?? ''"
8
- class="border rounded px-2 py-1 text-sm w-64 dark:bg-gray-800 dark:border-gray-600"
9
- @keyup.enter="applyImmediate"
10
- />
11
- <button
12
- v-if="localValue"
13
- @click="clear"
14
- class="flex items-center py-1 px-2 text-sm font-medium text-lightListViewButtonText focus:outline-none bg-lightListViewButtonBackground rounded border border-lightListViewButtonBorder hover:bg-lightListViewButtonBackgroundHover hover:text-lightListViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightListViewButtonFocusRing dark:focus:ring-darkListViewButtonFocusRing dark:bg-darkListViewButtonBackground dark:text-darkListViewButtonText dark:border-darkListViewButtonBorder dark:hover:text-darkListViewButtonTextHover dark:hover:bg-darkListViewButtonBackgroundHover rounded-default"
15
- type="button"
16
- >
17
- ✕
18
- </button>
4
+ <div class="relative w-64">
5
+ <input
6
+ v-model="localValue"
7
+ type="text"
8
+ :placeholder="props.meta?.placeholder ?? ''"
9
+ class="w-full border rounded text-sm dark:bg-gray-800 dark:border-gray-600 dark:text-white px-2 py-1 pr-6"
10
+ @keyup.enter="applyImmediate"
11
+ >
12
+ <p
13
+ v-if="localValue"
14
+ @click="clear"
15
+ class="absolute right-2 top-1/2 -translate-y-1/2 hover:cursor-pointer hover:text-gray-600 dark:text-white dark:hover:text-gray-400 "
16
+ >
17
+ ✕
18
+ </p>
19
+ </div>
19
20
  <slot name="suffix" />
20
21
  </div>
21
22
  </template>
22
23
  <script setup lang="ts">
23
- import { ref, watch } from 'vue';
24
+ import { ref, watch, onMounted } from 'vue';
24
25
  import adminforth from '@/adminforth';
25
26
  import { AdminForthFilterOperators } from '@/types/Common';
27
+ import { useRoute } from 'vue-router';
28
+
29
+ const route = useRoute();
26
30
 
27
31
  const props = defineProps<{ meta?: any; resource?: any; adminUser?: any }>();
28
32
  const localValue = ref('');
29
33
  let t: any = null;
34
+ let blockFilterUpdate = false;
35
+
36
+ onMounted(() => {
37
+ const filters = Object.keys(route.query).filter(k => k.startsWith('filter__')).map(k => {
38
+ const [_, field, operator] = k.split('__');
39
+ return {
40
+ field,
41
+ operator,
42
+ value: JSON.parse(decodeURIComponent(route.query[k] as string))
43
+ }
44
+ });
45
+ const isUniversalSearchFilterApplied = filters.find(f => f.field === '_universal_search');
46
+ if (isUniversalSearchFilterApplied) {
47
+ localValue.value = isUniversalSearchFilterApplied.value;
48
+ blockFilterUpdate = true;
49
+ };
50
+ });
30
51
 
31
52
  function send(term?: string) {
32
53
  adminforth?.list?.updateFilter?.({
@@ -34,7 +55,6 @@ function send(term?: string) {
34
55
  operator: AdminForthFilterOperators.EQ,
35
56
  value: term || '',
36
57
  });
37
- adminforth?.list?.refresh?.();
38
58
  }
39
59
 
40
60
  function apply() {
@@ -49,12 +69,17 @@ function applyImmediate() {
49
69
  }
50
70
 
51
71
  watch(localValue, () => {
72
+ if (blockFilterUpdate) {
73
+ blockFilterUpdate = false;
74
+ return;
75
+ }
52
76
  const delay = props.meta?.debounceMs ?? 500;
53
77
  if (t) clearTimeout(t);
54
78
  t = setTimeout(apply, delay);
55
79
  });
56
80
 
57
81
  function clear() {
82
+ blockFilterUpdate = true;
58
83
  localValue.value = '';
59
84
  applyImmediate();
60
85
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adminforth/universal-search",
3
- "version": "1.3.0",
3
+ "version": "1.4.1",
4
4
  "description": "Universal quick search input plugin for AdminForth (injected before action buttons)",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",