adminforth 2.27.0-next.11 → 2.27.0-next.13

package/dist/modules/styles.js

@@ -72,7 +72,7 @@ export const styles = () => ({
         lightShowTableUnderHeadingText: "#374151",
         lightShowTablesBodyBackground: "alias:lightForm",
         lightShowTableBodyText: "#6B7280",
-        lightShowTableBodyBorder: "#F3F4F6",
+        lightShowTableBodyBorder: "#E5E7EB",
         /* Show View buttons*/
         lightShowViewButtonBackground: "#FFFFFF",
         lightShowViewButtonBackgroundHover: "#F3F4F6",

package/dist/spa/src/components/Filters.vue

@@ -123,9 +123,9 @@
                 :min="getFilterMinValue(c.name)"
                 :max="getFilterMaxValue(c.name)"
                 :valueStart="getFilterItem({ column: c, operator: 'gte' })"
-                @update:valueStart="onFilterInput[c.name]({ column: c, operator: 'gte', value: ($event !== '' && $event !== null) ? (c.type === 'decimal' ? String($event) : $event) : undefined })"
+                @update:valueStart="(val) => rangeChangeHandler((val !== '' && val !== null) ? (c.type === 'decimal' ? String(val) : val) : undefined, c, 'gte')"
                 :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
-                @update:valueEnd="onFilterInput[c.name]({ column: c, operator: 'lte', value: ($event !== '' && $event !== null) ? (c.type === 'decimal' ? String($event) : $event) : undefined })"
+                @update:valueEnd="(val) => rangeChangeHandler((val !== '' && val !== null) ? (c.type === 'decimal' ? String(val) : val) : undefined, c, 'lte')"
               />
 
               <div v-else-if="['integer', 'decimal', 'float'].includes(c.type)" class="flex gap-2">
@@ -275,6 +275,27 @@ const onFilterInput = computed(() => {
   }, {});
 });
 
+// rangeState is used for cutom range picker, because if we change two values very quickly
+// in filters writes only the last one, because of debounce
+const rangeState = reactive({});
+
+const updateRange = (column) => {
+  debounce(() => {
+    const { gte, lte } = rangeState[column.name];
+
+    setFilterItem({ column, operator: 'gte', value: gte });
+    setFilterItem({ column, operator: 'lte', value: lte });
+  }, column?.filterOptions?.debounceTimeMs || 10)();
+}
+
+function rangeChangeHandler(value, column, operator) {
+  if (!rangeState[column.name]) {
+    rangeState[column.name] = { gte: null, lte: null };
+  }
+  rangeState[column.name][operator] = value;
+  updateRange(column);
+}
+
 const onSearchInput = computed(() => {
   return createSearchInputHandlers(
     props.columns,

package/dist/spa/src/components/GroupsTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg shadow-resourseFormShadow dark:shadow-darkResourseFormShadow dark:shadow-2xl">
+  <div class="rounded-lg shadow-resourseFormShadow dark:shadow-darkResourseFormShadow dark:shadow-2xl border dark:border-darkFormBorder">
     <div v-if="group.groupName && !group.noTitle" class="text-md font-semibold px-6 py-3 flex flex-1 items-center dark:border-darkFormBorder text-lightListTableHeadingText bg-lightFormHeading dark:bg-darkFormHeading dark:text-darkListTableHeadingText rounded-t-lg">
       {{ group.groupName }}
     </div>

package/dist/spa/src/components/ShowTable.vue

@@ -1,5 +1,5 @@
 <template>
-      <div class="overflow-x-auto shadow-resourseFormShadow dark:shadow-darkResourseFormShadow"
+      <div class="overflow-x-auto shadow-resourseFormShadow dark:shadow-darkResourseFormShadow border dark:border-gray-700"
         :class="{'rounded-default' : isRounded}"
       >
         <div v-if="groupName && !noTitle"  class="text-md font-semibold px-6 py-3 flex flex-1 items-center text-lightShowTableHeadingText bg-lightShowTableHeadingBackground dark:bg-darkShowTableHeadingBackground  dark:text-darkShowTableHeadingText rounded-t-lg">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "2.27.0-next.11",
+  "version": "2.27.0-next.13",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",