@adminforth/quick-filters 2.2.18 → 3.0.0

package/build.log

@@ -4,12 +4,11 @@
 
 sending incremental file list
 custom/
-custom/FilterDropdown.vue
 custom/FiltersArea.vue
 custom/QickFiltersSelect.vue
 custom/UniversalSearchInput.vue
 custom/tsconfig.json
 custom/types.ts
 
-sent 10,905 bytes  received 134 bytes  22,078.00 bytes/sec
-total size is 10,405  speedup is 0.94
+sent 5,435 bytes  received 115 bytes  11,100.00 bytes/sec
+total size is 5,002  speedup is 0.90

package/custom/FiltersArea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-wrap gap-1">
+  <div class="flex flex-wrap items-center gap-2 gap-y-1">
     <template v-for="filter in meta.options" :key="filter.name" >
       <UniversalSearchInput 
         v-if="filter.hasSearchInput" 
@@ -9,11 +9,10 @@
         }" 
       />
 
-      <div v-else>
-        <QickFiltersSelect 
-          :filter="filter"
-        />
-      </div>
+      <QickFiltersSelect
+        v-else
+        :filter="filter"
+      />
     </template>
   </div>
 

package/custom/QickFiltersSelect.vue

@@ -1,46 +1,45 @@
 <template>
-  <FilterDropdown
-    class="text-sm"
-    :filter="filter as { name: string; enum: any[] }"  
+  <Select
+    class="w-48"
+    classesForInput="af-filter-dropdown-button"
     :options="selectOptions"
+    :placeholder="filter.name"
     v-model="selected"
+    searchDisabled
     teleportToBody
-  ></FilterDropdown>
+  />
 </template>
 
-
-
 <script lang="ts" setup>
-import { ref, onMounted, watch } from 'vue';
-import FilterDropdown from './FilterDropdown.vue'
+import { computed } from 'vue';
+import { Select } from '@/afcl';
 import type { Filter } from './types';
 import { useAdminforth } from '@/adminforth';
+import { useFiltersStore } from '@/stores/filters';
 import { AdminForthFilterOperators } from '@/types/Common';
 
 const { list } = useAdminforth();
+const filtersStore = useFiltersStore();
 
 const props = defineProps<{
   filter: Filter
 }>();
 
-const selected = ref(null);
-const selectOptions = ref<{ label: string, value: any }[]>([]);
-
-onMounted(() => {
-  selectOptions.value = props.filter.enum.map(option => ({
-    label: option.label,
-    value: option.label
-  }));
-});
-
-
-watch(selected, (newValue) => {
-  console.log('Selected value changed:', newValue);
-  list?.updateFilter?.({
-    field: `_qf_${props.filter.name}`,
+const field = `_qf_${props.filter.name}`;
+const selectOptions = props.filter.enum!.map(option => ({
+  label: option.label,
+  value: option.label
+}));
+
+// the filters store is the source of truth: it is restored from the URL and emptied by "clear filters"
+const selected = computed({
+  get: () => filtersStore.filters.find(f => f.field === field)?.value ?? null,
+  // Select emits undefined when the picked option is clicked again, updateFilter then removes the filter
+  set: (value) => list.updateFilter({
+    field,
     operator: AdminForthFilterOperators.EQ,
-    value: newValue,
-  });
-})
+    value,
+  }),
+});
 
-</script>
+</script>

package/custom/UniversalSearchInput.vue

@@ -10,13 +10,11 @@
           :placeholder="props.meta?.placeholder ?? ''"
         >
           <template #rightIcon>
-            <p
+            <IconX
               v-if="localValue"
               @click="clear"
-              class="hover:cursor-pointer hover:text-gray-600 dark:text-white dark:hover:text-gray-400"
-            >
-              ✕
-            </p>
+              class="w-4 h-4 cursor-pointer text-lightInputIconColor hover:text-lightInputText dark:text-darkInputIconColor dark:hover:text-darkInputText transition-colors"
+            />
           </template>
         </Input>
       </div>
@@ -24,13 +22,12 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue';
+import { ref, computed, watch } from 'vue';
 import adminforth from '@/adminforth';
 import { Input } from '@/afcl';
+import { IconX } from '@iconify-prerendered/vue-lucide';
 import { AdminForthFilterOperators } from '@/types/Common';
-import { useRoute } from 'vue-router';
-
-const route = useRoute();
+import { useFiltersStore } from '@/stores/filters';
 
 const props = defineProps<{ 
   meta?: {
@@ -39,29 +36,24 @@ const props = defineProps<{
     filterField: string,
   }; 
 }>();
-const localValue = ref('');
+const filtersStore = useFiltersStore();
+const field = `_universal_search_${props.meta?.filterField}`;
+const appliedTerm = computed(() => filtersStore.filters.find(f => f.field === field)?.value ?? '');
+const localValue = ref(appliedTerm.value);
 let t: any = null;
 let blockFilterUpdate = false;
 
-onMounted(() => {
-  const filters = Object.keys(route.query).filter(k => k.startsWith('filter__')).map(k => {
-    const [_, field, operator] = k.split('__');
-    return {
-      field,
-      operator,
-      value: JSON.parse(decodeURIComponent(route.query[k] as string))
-    }
-  });
-  const isUniversalSearchFilterApplied = filters.find(f => f.field === `_universal_search_${props.meta?.filterField}`);
-  if (isUniversalSearchFilterApplied) {
-    localValue.value = isUniversalSearchFilterApplied.value;
+// follow filter changes made outside of the input: restore from the URL, "clear filters"
+watch(appliedTerm, (term) => {
+  if (term !== localValue.value.trim()) {
     blockFilterUpdate = true;
-  };
+    localValue.value = term;
+  }
 });
 
 function send(term?: string) {
   adminforth?.list?.updateFilter?.({
-    field: `_universal_search_${props.meta?.filterField}`,
+    field,
     operator: AdminForthFilterOperators.EQ,
     value: term || '',
   });

package/dist/custom/FiltersArea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-wrap gap-1">
+  <div class="flex flex-wrap items-center gap-2 gap-y-1">
     <template v-for="filter in meta.options" :key="filter.name" >
       <UniversalSearchInput 
         v-if="filter.hasSearchInput" 
@@ -9,11 +9,10 @@
         }" 
       />
 
-      <div v-else>
-        <QickFiltersSelect 
-          :filter="filter"
-        />
-      </div>
+      <QickFiltersSelect
+        v-else
+        :filter="filter"
+      />
     </template>
   </div>
 

package/dist/custom/QickFiltersSelect.vue

@@ -1,46 +1,45 @@
 <template>
-  <FilterDropdown
-    class="text-sm"
-    :filter="filter as { name: string; enum: any[] }"  
+  <Select
+    class="w-48"
+    classesForInput="af-filter-dropdown-button"
     :options="selectOptions"
+    :placeholder="filter.name"
     v-model="selected"
+    searchDisabled
     teleportToBody
-  ></FilterDropdown>
+  />
 </template>
 
-
-
 <script lang="ts" setup>
-import { ref, onMounted, watch } from 'vue';
-import FilterDropdown from './FilterDropdown.vue'
+import { computed } from 'vue';
+import { Select } from '@/afcl';
 import type { Filter } from './types';
 import { useAdminforth } from '@/adminforth';
+import { useFiltersStore } from '@/stores/filters';
 import { AdminForthFilterOperators } from '@/types/Common';
 
 const { list } = useAdminforth();
+const filtersStore = useFiltersStore();
 
 const props = defineProps<{
   filter: Filter
 }>();
 
-const selected = ref(null);
-const selectOptions = ref<{ label: string, value: any }[]>([]);
-
-onMounted(() => {
-  selectOptions.value = props.filter.enum.map(option => ({
-    label: option.label,
-    value: option.label
-  }));
-});
-
-
-watch(selected, (newValue) => {
-  console.log('Selected value changed:', newValue);
-  list?.updateFilter?.({
-    field: `_qf_${props.filter.name}`,
+const field = `_qf_${props.filter.name}`;
+const selectOptions = props.filter.enum!.map(option => ({
+  label: option.label,
+  value: option.label
+}));
+
+// the filters store is the source of truth: it is restored from the URL and emptied by "clear filters"
+const selected = computed({
+  get: () => filtersStore.filters.find(f => f.field === field)?.value ?? null,
+  // Select emits undefined when the picked option is clicked again, updateFilter then removes the filter
+  set: (value) => list.updateFilter({
+    field,
     operator: AdminForthFilterOperators.EQ,
-    value: newValue,
-  });
-})
+    value,
+  }),
+});
 
-</script>
+</script>

package/dist/custom/UniversalSearchInput.vue

@@ -10,13 +10,11 @@
           :placeholder="props.meta?.placeholder ?? ''"
         >
           <template #rightIcon>
-            <p
+            <IconX
               v-if="localValue"
               @click="clear"
-              class="hover:cursor-pointer hover:text-gray-600 dark:text-white dark:hover:text-gray-400"
-            >
-              ✕
-            </p>
+              class="w-4 h-4 cursor-pointer text-lightInputIconColor hover:text-lightInputText dark:text-darkInputIconColor dark:hover:text-darkInputText transition-colors"
+            />
           </template>
         </Input>
       </div>
@@ -24,13 +22,12 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue';
+import { ref, computed, watch } from 'vue';
 import adminforth from '@/adminforth';
 import { Input } from '@/afcl';
+import { IconX } from '@iconify-prerendered/vue-lucide';
 import { AdminForthFilterOperators } from '@/types/Common';
-import { useRoute } from 'vue-router';
-
-const route = useRoute();
+import { useFiltersStore } from '@/stores/filters';
 
 const props = defineProps<{ 
   meta?: {
@@ -39,29 +36,24 @@ const props = defineProps<{
     filterField: string,
   }; 
 }>();
-const localValue = ref('');
+const filtersStore = useFiltersStore();
+const field = `_universal_search_${props.meta?.filterField}`;
+const appliedTerm = computed(() => filtersStore.filters.find(f => f.field === field)?.value ?? '');
+const localValue = ref(appliedTerm.value);
 let t: any = null;
 let blockFilterUpdate = false;
 
-onMounted(() => {
-  const filters = Object.keys(route.query).filter(k => k.startsWith('filter__')).map(k => {
-    const [_, field, operator] = k.split('__');
-    return {
-      field,
-      operator,
-      value: JSON.parse(decodeURIComponent(route.query[k] as string))
-    }
-  });
-  const isUniversalSearchFilterApplied = filters.find(f => f.field === `_universal_search_${props.meta?.filterField}`);
-  if (isUniversalSearchFilterApplied) {
-    localValue.value = isUniversalSearchFilterApplied.value;
+// follow filter changes made outside of the input: restore from the URL, "clear filters"
+watch(appliedTerm, (term) => {
+  if (term !== localValue.value.trim()) {
     blockFilterUpdate = true;
-  };
+    localValue.value = term;
+  }
 });
 
 function send(term?: string) {
   adminforth?.list?.updateFilter?.({
-    field: `_universal_search_${props.meta?.filterField}`,
+    field,
     operator: AdminForthFilterOperators.EQ,
     value: term || '',
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/quick-filters",
-  "version": "2.2.18",
+  "version": "3.0.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -27,7 +27,7 @@
     "typescript": "^5.7.3"
   },
   "peerDependencies": {
-    "adminforth": "^3.7.1"
+    "adminforth": "^4.0.0"
   },
   "release": {
     "plugins": [

package/custom/FilterDropdown.vue

@@ -1,149 +0,0 @@
-<template>
-  <div class="afcl-select afcl-select-wrapper relative inline-block af-button-shadow rounded-default" ref="internalSelect" 
-    :class="{'opacity-50': readonly}"
-  >
-    <div class="relative w-fit">
-      <button 
-        ref="dropdownFilterEl" 
-        type="button" 
-        @click="dropdownClick" 
-        class="af-filter-dropdown-button group h-[34px] inline-flex items-center justify-between min-w-max px-3 py-2 text-left cursor-pointer 
-        text-sm font-medium transition-all border outline-none gap-x-2
-        bg-lightListViewButtonBackground text-lightListViewButtonText border-lightListViewButtonBorder  
-        dark:bg-darkListViewButtonBackground dark:text-darkListViewButtonText dark:border-darkListViewButtonBorder 
-        dark:hover:text-darkListViewButtonTextHover dark:hover:bg-darkListViewButtonBackgroundHover rounded-default
-        hover:bg-lightListViewButtonBackgroundHover hover:text-lightListViewButtonTextHover rounded-default"
-      >
-        <span v-if="displayLabel" class="whitespace-nowrap">
-          {{ displayLabel }}
-        </span>
-        <span 
-          v-else 
-          class="opacity-100 transition-colors whitespace-nowrap"
-        >
-          {{ filter?.name || placeholder || $t('Select...') }}
-        </span>
-
-        <IconCaretDownSolid class="h-4 w-4 text-lightPrimary dark:text-darkPrimary  transition duration-150 ease-in flex-shrink-0 brightness-150"
-          :class="{ 'transform rotate-180': showDropdown }"
-        />
-      </button>
-    </div>
-
-    <teleport to="body" v-if="teleportToBody && showDropdown">
-      <div 
-        ref="dropdownEl" 
-        :style="getDropdownPosition" 
-        class="fixed z-[1000] w-max min-w-fit bg-lightDropdownOptionsBackground shadow-lg dark:shadow-black dark:bg-darkDropdownOptionsBackground
-          dark:border-gray-600 rounded-md text-base ring-1 ring-black ring-opacity-5 overflow-hidden focus:outline-none sm:text-sm max-h-64 flex flex-col"
-      >
-        <div class="py-1 overflow-y-auto grow" @scroll="handleDropdownScroll">
-          <div
-            v-for="item in options"
-            :key="item.value"
-            class="px-4 py-2 cursor-pointer hover:bg-lightDropdownOptionsHoverBackground dark:hover:bg-darkDropdownOptionsHoverBackground text-lightDropdownOptionsText dark:text-darkDropdownOptionsText"
-            :class="{ 'bg-lightDropdownPicked dark:bg-darkDropdownPicked': isItemSelected(item) }"
-            @click="toggleItem(item)"
-          >
-            <slot name="item" :option="item">
-              {{ item.label }}
-            </slot>
-          </div>
-          
-          <div v-if="!options?.length" class="px-4 py-2 text-gray-500 italic text-center">
-            {{ $t('No items here') }}
-          </div>
-
-          <div
-            v-if="modelValue !== null && modelValue !== undefined && modelValue !== ''"
-            class="px-4 py-2 cursor-pointer hover:bg-lightDropdownOptionsHoverBackground dark:hover:bg-darkDropdownOptionsHoverBackground text-lightDropdownOptionsText dark:text-darkDropdownOptionsText"
-            @click="clearSelection"
-          >
-            {{ $t('Clear selection') }}
-          </div>
-        </div>
-      </div>
-    </teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, type PropType } from 'vue';
-import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
-
-const props = defineProps({
-  filter: {
-    type: Object as PropType<{ name: string; enum: any[] }>,
-    default: null,
-  },
-  options: {
-    type: Array as PropType<{label: string, value: any}[]>,
-    default: () => [],
-  },
-  modelValue: [String, Number, Boolean, Array] as PropType<any>,
-  placeholder: String,
-  readonly: Boolean,
-  teleportToBody: Boolean,
-});
-
-const emit = defineEmits(['update:modelValue', 'scroll-near-end']);
-
-const showDropdown = ref(false);
-const dropdownFilterEl = ref<HTMLElement | null>(null);
-const dropdownEl = ref<HTMLElement | null>(null);
-const internalSelect = ref<HTMLElement | null>(null);
-
-const displayLabel = computed(() => {
-  const selected = props.options.find(o => o.value === props.modelValue);
-  return selected ? selected.label : '';
-});
-
-const isItemSelected = (item: any) => props.modelValue === item.value;
-
-const toggleItem = (item: any) => {
-  emit('update:modelValue', item.value);
-  showDropdown.value = false;
-};
-
-const clearSelection = () => {
-  emit('update:modelValue', null);
-  showDropdown.value = false;
-};
-
-const dropdownClick = () => {
-  if (!props.readonly) showDropdown.value = !showDropdown.value;
-};
-
-const getDropdownPosition = computed(() => {
-  if (!dropdownFilterEl.value) return {};
-  const rect = dropdownFilterEl.value.getBoundingClientRect();
-  return {
-    top: `${rect.bottom + window.scrollY + 4}px`,
-    left: `${rect.right + window.scrollX - (dropdownEl.value?.offsetWidth || rect.width)}px`,
-    minWidth: `${rect.width}px`
-  };
-});
-
-const handleDropdownScroll = (event: Event) => {
-  const target = event.target as HTMLElement;
-  if (target.scrollTop + target.clientHeight >= target.scrollHeight - 10) {
-    emit('scroll-near-end');
-  }
-};
-
-const handleClickOutside = (event: MouseEvent) => {
-  const target = event.target as HTMLElement;
-  if (internalSelect.value?.contains(target)) return;
-  if (dropdownEl.value?.contains(target)) return;
-  
-  showDropdown.value = false;
-};
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
-});
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
-});
-</script>

package/dist/custom/FilterDropdown.vue

@@ -1,149 +0,0 @@
-<template>
-  <div class="afcl-select afcl-select-wrapper relative inline-block af-button-shadow rounded-default" ref="internalSelect" 
-    :class="{'opacity-50': readonly}"
-  >
-    <div class="relative w-fit">
-      <button 
-        ref="dropdownFilterEl" 
-        type="button" 
-        @click="dropdownClick" 
-        class="af-filter-dropdown-button group h-[34px] inline-flex items-center justify-between min-w-max px-3 py-2 text-left cursor-pointer 
-        text-sm font-medium transition-all border outline-none gap-x-2
-        bg-lightListViewButtonBackground text-lightListViewButtonText border-lightListViewButtonBorder  
-        dark:bg-darkListViewButtonBackground dark:text-darkListViewButtonText dark:border-darkListViewButtonBorder 
-        dark:hover:text-darkListViewButtonTextHover dark:hover:bg-darkListViewButtonBackgroundHover rounded-default
-        hover:bg-lightListViewButtonBackgroundHover hover:text-lightListViewButtonTextHover rounded-default"
-      >
-        <span v-if="displayLabel" class="whitespace-nowrap">
-          {{ displayLabel }}
-        </span>
-        <span 
-          v-else 
-          class="opacity-100 transition-colors whitespace-nowrap"
-        >
-          {{ filter?.name || placeholder || $t('Select...') }}
-        </span>
-
-        <IconCaretDownSolid class="h-4 w-4 text-lightPrimary dark:text-darkPrimary  transition duration-150 ease-in flex-shrink-0 brightness-150"
-          :class="{ 'transform rotate-180': showDropdown }"
-        />
-      </button>
-    </div>
-
-    <teleport to="body" v-if="teleportToBody && showDropdown">
-      <div 
-        ref="dropdownEl" 
-        :style="getDropdownPosition" 
-        class="fixed z-[1000] w-max min-w-fit bg-lightDropdownOptionsBackground shadow-lg dark:shadow-black dark:bg-darkDropdownOptionsBackground
-          dark:border-gray-600 rounded-md text-base ring-1 ring-black ring-opacity-5 overflow-hidden focus:outline-none sm:text-sm max-h-64 flex flex-col"
-      >
-        <div class="py-1 overflow-y-auto grow" @scroll="handleDropdownScroll">
-          <div
-            v-for="item in options"
-            :key="item.value"
-            class="px-4 py-2 cursor-pointer hover:bg-lightDropdownOptionsHoverBackground dark:hover:bg-darkDropdownOptionsHoverBackground text-lightDropdownOptionsText dark:text-darkDropdownOptionsText"
-            :class="{ 'bg-lightDropdownPicked dark:bg-darkDropdownPicked': isItemSelected(item) }"
-            @click="toggleItem(item)"
-          >
-            <slot name="item" :option="item">
-              {{ item.label }}
-            </slot>
-          </div>
-          
-          <div v-if="!options?.length" class="px-4 py-2 text-gray-500 italic text-center">
-            {{ $t('No items here') }}
-          </div>
-
-          <div
-            v-if="modelValue !== null && modelValue !== undefined && modelValue !== ''"
-            class="px-4 py-2 cursor-pointer hover:bg-lightDropdownOptionsHoverBackground dark:hover:bg-darkDropdownOptionsHoverBackground text-lightDropdownOptionsText dark:text-darkDropdownOptionsText"
-            @click="clearSelection"
-          >
-            {{ $t('Clear selection') }}
-          </div>
-        </div>
-      </div>
-    </teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, type PropType } from 'vue';
-import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
-
-const props = defineProps({
-  filter: {
-    type: Object as PropType<{ name: string; enum: any[] }>,
-    default: null,
-  },
-  options: {
-    type: Array as PropType<{label: string, value: any}[]>,
-    default: () => [],
-  },
-  modelValue: [String, Number, Boolean, Array] as PropType<any>,
-  placeholder: String,
-  readonly: Boolean,
-  teleportToBody: Boolean,
-});
-
-const emit = defineEmits(['update:modelValue', 'scroll-near-end']);
-
-const showDropdown = ref(false);
-const dropdownFilterEl = ref<HTMLElement | null>(null);
-const dropdownEl = ref<HTMLElement | null>(null);
-const internalSelect = ref<HTMLElement | null>(null);
-
-const displayLabel = computed(() => {
-  const selected = props.options.find(o => o.value === props.modelValue);
-  return selected ? selected.label : '';
-});
-
-const isItemSelected = (item: any) => props.modelValue === item.value;
-
-const toggleItem = (item: any) => {
-  emit('update:modelValue', item.value);
-  showDropdown.value = false;
-};
-
-const clearSelection = () => {
-  emit('update:modelValue', null);
-  showDropdown.value = false;
-};
-
-const dropdownClick = () => {
-  if (!props.readonly) showDropdown.value = !showDropdown.value;
-};
-
-const getDropdownPosition = computed(() => {
-  if (!dropdownFilterEl.value) return {};
-  const rect = dropdownFilterEl.value.getBoundingClientRect();
-  return {
-    top: `${rect.bottom + window.scrollY + 4}px`,
-    left: `${rect.right + window.scrollX - (dropdownEl.value?.offsetWidth || rect.width)}px`,
-    minWidth: `${rect.width}px`
-  };
-});
-
-const handleDropdownScroll = (event: Event) => {
-  const target = event.target as HTMLElement;
-  if (target.scrollTop + target.clientHeight >= target.scrollHeight - 10) {
-    emit('scroll-near-end');
-  }
-};
-
-const handleClickOutside = (event: MouseEvent) => {
-  const target = event.target as HTMLElement;
-  if (internalSelect.value?.contains(target)) return;
-  if (dropdownEl.value?.contains(target)) return;
-  
-  showDropdown.value = false;
-};
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
-});
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
-});
-</script>