@adminforth/quick-filters 3.0.0 → 4.0.1

package/build.log

@@ -10,5 +10,5 @@ custom/UniversalSearchInput.vue
 custom/tsconfig.json
 custom/types.ts
 
-sent 5,435 bytes  received 115 bytes  11,100.00 bytes/sec
-total size is 5,002  speedup is 0.90
+sent 5,754 bytes  received 115 bytes  11,738.00 bytes/sec
+total size is 5,327  speedup is 0.91

package/custom/FiltersArea.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="flex flex-wrap items-center gap-2 gap-y-1">
+  <!-- a narrow list header gives the filters a full row and fills it, a wide one keeps them in its single row -->
+  <div class="grid w-full grid-cols-[repeat(auto-fit,minmax(min(15rem,100%),1fr))] gap-2 @4xl/header:flex @4xl/header:w-auto @4xl/header:flex-wrap @4xl/header:items-center">
     <template v-for="filter in meta.options" :key="filter.name" >
       <UniversalSearchInput 
         v-if="filter.hasSearchInput" 

package/custom/QickFiltersSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <Select
-    class="w-48"
+    class="w-full @4xl/header:w-48"
     classesForInput="af-filter-dropdown-button"
     :options="selectOptions"
     :placeholder="filter.name"

package/custom/UniversalSearchInput.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="af-universal-search flex items-center gap-1">
+  <div class="af-universal-search flex w-full items-center gap-1 @4xl/header:w-auto">
     <slot name="prefix" />
       <!-- enter is handled on the wrapper so it fires once: Input spreads attrs on both its root and the input -->
-      <div class="w-64" @keyup.enter="applyImmediate">
+      <div class="min-w-0 flex-1 @4xl/header:w-64 @4xl/header:flex-none" @keyup.enter="applyImmediate">
         <Input
           v-model="localValue"
           type="text"

package/dist/custom/FiltersArea.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="flex flex-wrap items-center gap-2 gap-y-1">
+  <!-- a narrow list header gives the filters a full row and fills it, a wide one keeps them in its single row -->
+  <div class="grid w-full grid-cols-[repeat(auto-fit,minmax(min(15rem,100%),1fr))] gap-2 @4xl/header:flex @4xl/header:w-auto @4xl/header:flex-wrap @4xl/header:items-center">
     <template v-for="filter in meta.options" :key="filter.name" >
       <UniversalSearchInput 
         v-if="filter.hasSearchInput" 

package/dist/custom/QickFiltersSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <Select
-    class="w-48"
+    class="w-full @4xl/header:w-48"
     classesForInput="af-filter-dropdown-button"
     :options="selectOptions"
     :placeholder="filter.name"

package/dist/custom/UniversalSearchInput.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="af-universal-search flex items-center gap-1">
+  <div class="af-universal-search flex w-full items-center gap-1 @4xl/header:w-auto">
     <slot name="prefix" />
       <!-- enter is handled on the wrapper so it fires once: Input spreads attrs on both its root and the input -->
-      <div class="w-64" @keyup.enter="applyImmediate">
+      <div class="min-w-0 flex-1 @4xl/header:w-64 @4xl/header:flex-none" @keyup.enter="applyImmediate">
         <Input
           v-model="localValue"
           type="text"

package/dist/index.js

@@ -47,6 +47,7 @@ export default class extends AdminForthPlugin {
             resourceConfig.options.pageInjections.list.beforeActionButtons.push({
                 file: this.componentPath('FiltersArea.vue'),
                 meta: {
+                    thinEnoughToShrinkTable: true,
                     pluginInstanceId: this.pluginInstanceId,
                     resourceId: this.resourceConfig.resourceId,
                     options: frontendOptions

package/index.ts

@@ -42,7 +42,8 @@ export default class  extends AdminForthPlugin {
       { 
         file: this.componentPath('FiltersArea.vue'), 
         meta: {
-          pluginInstanceId: this.pluginInstanceId, 
+          thinEnoughToShrinkTable: true,
+          pluginInstanceId: this.pluginInstanceId,
           resourceId: this.resourceConfig.resourceId, 
           options: frontendOptions
         } 

package/package.json

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