adminforth 1.2.34 → 1.2.36

package/dataConnectors/clickhouse.ts

@@ -190,7 +190,9 @@ class ClickhouseConnector extends AdminForthBaseConnector implements IAdminForth
         let field = f.field;
         let operator = this.OperatorsMap[f.operator];
         if (f.operator == AdminForthFilterOperators.IN || f.operator == AdminForthFilterOperators.NIN) {
-          placeholder = `(${f.value.map((_, j) => `p${i}_${j}`).join(', ')})`;
+          placeholder = `(${f.value.map((_, j) => `{p${i}_${j}:${
+            column._underlineType
+          }}`).join(', ')})`;
         }
 
         return `${field} ${operator} ${placeholder}`

package/dist/dataConnectors/clickhouse.js

@@ -194,7 +194,7 @@ class ClickhouseConnector extends AdminForthBaseConnector {
                 let field = f.field;
                 let operator = this.OperatorsMap[f.operator];
                 if (f.operator == AdminForthFilterOperators.IN || f.operator == AdminForthFilterOperators.NIN) {
-                    placeholder = `(${f.value.map((_, j) => `p${i}_${j}`).join(', ')})`;
+                    placeholder = `(${f.value.map((_, j) => `{p${i}_${j}:${column._underlineType}}`).join(', ')})`;
                 }
                 return `${field} ${operator} ${placeholder}`;
             }).join(' AND ')}` : '';

package/dist/modules/styles.js

@@ -20,7 +20,7 @@ export const styles = () => ({
         lightSidebarHeading: "alias:lightSidebarText opacity:0.3", // sidebar heading
         lightList: "#FFFFFF", // list view background
         lightListTable: "#FFFFFF", // list view table background
-        lightListTableHeading: "rgb(249 250 251)", // list view table heading
+        lightListTableHeading: "alias:lightListTableHeadingText opacity:0.04", // list view table heading
         lightListTableHeadingText: "#333333", // list view table heading text
         lightListTableText: "#333333", // list view table text
         lightListTableRowHover: "rgb(249 250 251)", // list view row hover
@@ -36,7 +36,7 @@ export const styles = () => ({
         // lightListButtonIcon: "#333333", // list view button icon
         lightForm: "#FFFFFF", // show view background
         lightFormBorder: "#F5F5F5", // show view rows border
-        lightFormHeading: "rgb(249 250 251)", // show view heading
+        lightFormHeading: "alias:lightListTableHeading", // show view heading
         lightButtons: "#FFFFFF", // button background
         lightButtonsBorder: "#DDDDDD", // button border
         lightButtonsText: "#111827", // button text
@@ -75,7 +75,7 @@ export const styles = () => ({
         darkListBorder: "#444444",
         darkForm: "#111111",
         darkFormBorder: "#222222",
-        darkFormHeading: "#334155"
+        darkFormHeading: "alias:darkListTableHeading"
     },
     boxShadow: {
         customLight: "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow

package/dist/spa/spa/src/App.vue

@@ -84,7 +84,7 @@
                     :aria-controls="`dropdown-example${i}`"
                     :data-collapse-toggle="`dropdown-example${i}`"
                 >
-                  <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75   dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
+                  <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75    dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
 
                   <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}</span>
                   <svg :class="{'rotate-180':  opened.includes(i) }" class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 10 6">
@@ -262,13 +262,11 @@ async function loadMenu() {
 }
 
 function handleCustomLayout() {
-  console.log(route)
   if (route.meta?.customLayout) {
     defaultLayout.value = false;
   } else {
     defaultLayout.value = true;
   }
-  console.log(defaultLayout.value,route);
 }
 
 

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="mx-auto grid grid-cols-2 gap-4 mb-2">
+    <div class="grid w-40 gap-4 mb-2">
       <div>
         <label for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>
 
@@ -11,13 +11,13 @@
 
           <input ref="datepickerStartEl" type="text"
                  class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                 placeholder="Start date">
+                 placeholder="Select date">
         </div>
       </div>
     </div>
 
     <div>
-      <div class="mx-auto grid grid-cols-2 gap-4 mb-2" :class="{hidden: !showTimeInputs}">
+      <div class="grid w-40 gap-4 mb-2" :class="{hidden: !showTimeInputs}">
         <div>
           <div class="relative">
             <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">

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

@@ -1,6 +1,8 @@
 <template>
   <div class="flex flex-wrap gap-2">
     <input
+      :min="minFormatted"
+      :max="maxFormatted"
       type="number" aria-describedby="helper-text-explanation"
       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
       placeholder="From"
@@ -8,6 +10,8 @@
     >
 
     <input
+      :min="minFormatted"
+      :max="maxFormatted"
       type="number" aria-describedby="helper-text-explanation"
       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
       placeholder="To"
@@ -21,7 +25,7 @@
       @click="clear">Clear
     </button>
 
-    <div class="w-full">
+    <div v-if="min && max" class="w-full px-2.5">
       <vue-slider
         class="custom-slider"
         :dot-size="20"
@@ -47,12 +51,8 @@ const props = defineProps({
   valueEnd: {
     default: '',
   },
-  min: {
-    default: 0,
-  },
-  max: {
-    default: 10,
-  },
+  min: {},
+  max: {},
 });
 
 const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
@@ -108,6 +108,10 @@ watch(end, () => {
   emit('update:valueEnd', end.value);
 })
 
+watch([minFormatted,maxFormatted], () => {
+  setSliderValues(minFormatted.value, maxFormatted.value)
+})
+
 const clear = () => {
   start.value = ''
   end.value = ''

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

@@ -70,8 +70,8 @@
 
            <CustomRangePicker
              v-else-if="['integer', 'decimal', 'float'].includes(c.type) && c.allowMinMaxQuery"
-             :min="c.min"
-             :max="c.max"
+             :min="getFilterMinValue(c.name)"
+             :max="getFilterMaxValue(c.name)"
              :valueStart="getFilterItem({ column: c, operator: 'gte' })"
              @update:valueStart="setFilterItem({ column: c, operator: 'gte', value: $event || undefined })"
              :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
@@ -207,4 +207,16 @@ async function clear() {
   filtersStore.clearFilters();
   emits('update:filters', [...filtersStore.filters]);
 }
+
+function getFilterMinValue(columnName) {
+  if(props.columnsMinMax && props.columnsMinMax[columnName]) {
+    return props.columnsMinMax[columnName]?.min
+  }
+}
+
+function getFilterMaxValue(columnName) {
+  if(props.columnsMinMax && props.columnsMinMax[columnName]) {
+    return props.columnsMinMax[columnName]?.max
+  }
+}
 </script>

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

@@ -5,7 +5,7 @@
       :class="{ 
         'px-4': isChild,
         'px-2': !isChild,
-        'bg-sidebarActive dark:bg-gray-700': item.resourceId ?
+        'bg-lightSidebarItemActive dark:bg-darkSidebarItemActive': item.resourceId ?
         ($route.params.resourceId === item.resourceId && $route.name === 'resource-list') :
         ($route.name === item.path)
       }"

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

@@ -5,7 +5,7 @@
     >
       <form autocomplete="off" @submit.prevent>
         <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 ">
-          <thead class="text-xs text-gray-700 uppercase bg-lightormHeading dark:bg-gray-700 dark:text-gray-400">
+          <thead class="text-xs text-gray-700 uppercase bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400">
               <tr>
                   <th scope="col" class="px-6 py-3">
                       Field

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

@@ -41,7 +41,7 @@
             </div>
             <span
              class="bg-red-100 text-red-800 text-xs font-medium me-1 px-1 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
-             v-if="sort.findIndex((s) => s.field === c.name) !== -1">
+             v-if="sort.findIndex((s) => s.field === c.name) !== -1 && sort?.length > 1">
             {{ sort.findIndex((s) => s.field === c.name) + 1 }}
             </span>
 
@@ -321,9 +321,6 @@ async function selectAll(value) {
 
 const totalPages = computed(() => Math.ceil(props.totalRows / props.pageSize));
 
-
-
-
 const allFromThisPageChecked = computed(() => {
   if (!props.rows) return false;
   return props.rows.every((r) => checkboxesInternal.value.includes(r.id));
@@ -361,14 +358,6 @@ async function onClick(e,row) {
     },
   })}
 }
-  
-
-
-
-
-
-
-
 
 async function deleteRecord(row) {
   const data = await window.adminforth.confirm({
@@ -396,9 +385,5 @@ async function deleteRecord(row) {
       console.error(e);
       };
     }
-
-    
 }
-
-
 </script>

package/dist/spa/spa/src/index.scss

@@ -23,4 +23,5 @@
 //   ::-webkit-scrollbar-thumb:hover {
 //     @apply bg-gray-700
 //   }
-// }
+// }
+

package/dist/spa/spa/src/views/ShowView.vue

@@ -47,7 +47,7 @@
       class="relative overflow-x-auto shadow-resourseFormShadow "
     >
      <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
-        <thead class="text-xs text-gray-700 uppercase bg-lightormHeading dark:bg-gray-700 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400">
             <tr>
                 <th scope="col" class="px-6 py-3">
                     Field

package/modules/styles.ts

@@ -25,7 +25,7 @@ export const styles = () => ({
 
     lightList: "#FFFFFF", // list view background
     lightListTable: "#FFFFFF", // list view table background
-    lightListTableHeading: "rgb(249 250 251)", // list view table heading
+    lightListTableHeading: "alias:lightListTableHeadingText opacity:0.04", // list view table heading
     lightListTableHeadingText: "#333333", // list view table heading text
     lightListTableText: "#333333", // list view table text
     lightListTableRowHover: "rgb(249 250 251)", // list view row hover
@@ -42,7 +42,7 @@ export const styles = () => ({
 
     lightForm: "#FFFFFF", // show view background
     lightFormBorder: "#F5F5F5", // show view rows border
-    lightFormHeading: "rgb(249 250 251)", // show view heading
+    lightFormHeading: "alias:lightListTableHeading", // show view heading
 
     lightButtons: "#FFFFFF", // button background
     lightButtonsBorder: "#DDDDDD", // button border
@@ -90,7 +90,7 @@ export const styles = () => ({
 
     darkForm: "#111111", 
     darkFormBorder: "#222222", 
-    darkFormHeading: "#334155" 
+    darkFormHeading: "alias:darkListTableHeading" 
 
   },
   boxShadow: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.2.34",
+  "version": "1.2.36",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/spa/src/App.vue

@@ -84,7 +84,7 @@
                     :aria-controls="`dropdown-example${i}`"
                     :data-collapse-toggle="`dropdown-example${i}`"
                 >
-                  <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75   dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
+                  <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75    dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
 
                   <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}</span>
                   <svg :class="{'rotate-180':  opened.includes(i) }" class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 10 6">
@@ -262,13 +262,11 @@ async function loadMenu() {
 }
 
 function handleCustomLayout() {
-  console.log(route)
   if (route.meta?.customLayout) {
     defaultLayout.value = false;
   } else {
     defaultLayout.value = true;
   }
-  console.log(defaultLayout.value,route);
 }
 
 

package/spa/src/components/CustomDatePicker.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="mx-auto grid grid-cols-2 gap-4 mb-2">
+    <div class="grid w-40 gap-4 mb-2">
       <div>
         <label for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>
 
@@ -11,13 +11,13 @@
 
           <input ref="datepickerStartEl" type="text"
                  class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                 placeholder="Start date">
+                 placeholder="Select date">
         </div>
       </div>
     </div>
 
     <div>
-      <div class="mx-auto grid grid-cols-2 gap-4 mb-2" :class="{hidden: !showTimeInputs}">
+      <div class="grid w-40 gap-4 mb-2" :class="{hidden: !showTimeInputs}">
         <div>
           <div class="relative">
             <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">

package/spa/src/components/CustomRangePicker.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="flex flex-wrap gap-2">
     <input
+      :min="minFormatted"
+      :max="maxFormatted"
       type="number" aria-describedby="helper-text-explanation"
       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
       placeholder="From"
@@ -8,6 +10,8 @@
     >
 
     <input
+      :min="minFormatted"
+      :max="maxFormatted"
       type="number" aria-describedby="helper-text-explanation"
       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
       placeholder="To"
@@ -21,7 +25,7 @@
       @click="clear">Clear
     </button>
 
-    <div class="w-full">
+    <div v-if="min && max" class="w-full px-2.5">
       <vue-slider
         class="custom-slider"
         :dot-size="20"
@@ -47,12 +51,8 @@ const props = defineProps({
   valueEnd: {
     default: '',
   },
-  min: {
-    default: 0,
-  },
-  max: {
-    default: 10,
-  },
+  min: {},
+  max: {},
 });
 
 const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
@@ -108,6 +108,10 @@ watch(end, () => {
   emit('update:valueEnd', end.value);
 })
 
+watch([minFormatted,maxFormatted], () => {
+  setSliderValues(minFormatted.value, maxFormatted.value)
+})
+
 const clear = () => {
   start.value = ''
   end.value = ''

package/spa/src/components/Filters.vue

@@ -70,8 +70,8 @@
 
            <CustomRangePicker
              v-else-if="['integer', 'decimal', 'float'].includes(c.type) && c.allowMinMaxQuery"
-             :min="c.min"
-             :max="c.max"
+             :min="getFilterMinValue(c.name)"
+             :max="getFilterMaxValue(c.name)"
              :valueStart="getFilterItem({ column: c, operator: 'gte' })"
              @update:valueStart="setFilterItem({ column: c, operator: 'gte', value: $event || undefined })"
              :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
@@ -207,4 +207,16 @@ async function clear() {
   filtersStore.clearFilters();
   emits('update:filters', [...filtersStore.filters]);
 }
+
+function getFilterMinValue(columnName) {
+  if(props.columnsMinMax && props.columnsMinMax[columnName]) {
+    return props.columnsMinMax[columnName]?.min
+  }
+}
+
+function getFilterMaxValue(columnName) {
+  if(props.columnsMinMax && props.columnsMinMax[columnName]) {
+    return props.columnsMinMax[columnName]?.max
+  }
+}
 </script>

package/spa/src/components/MenuLink.vue

@@ -5,7 +5,7 @@
       :class="{ 
         'px-4': isChild,
         'px-2': !isChild,
-        'bg-sidebarActive dark:bg-gray-700': item.resourceId ?
+        'bg-lightSidebarItemActive dark:bg-darkSidebarItemActive': item.resourceId ?
         ($route.params.resourceId === item.resourceId && $route.name === 'resource-list') :
         ($route.name === item.path)
       }"

package/spa/src/components/ResourceForm.vue

@@ -5,7 +5,7 @@
     >
       <form autocomplete="off" @submit.prevent>
         <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 ">
-          <thead class="text-xs text-gray-700 uppercase bg-lightormHeading dark:bg-gray-700 dark:text-gray-400">
+          <thead class="text-xs text-gray-700 uppercase bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400">
               <tr>
                   <th scope="col" class="px-6 py-3">
                       Field

package/spa/src/components/ResourceListTable.vue

@@ -41,7 +41,7 @@
             </div>
             <span
              class="bg-red-100 text-red-800 text-xs font-medium me-1 px-1 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
-             v-if="sort.findIndex((s) => s.field === c.name) !== -1">
+             v-if="sort.findIndex((s) => s.field === c.name) !== -1 && sort?.length > 1">
             {{ sort.findIndex((s) => s.field === c.name) + 1 }}
             </span>
 
@@ -321,9 +321,6 @@ async function selectAll(value) {
 
 const totalPages = computed(() => Math.ceil(props.totalRows / props.pageSize));
 
-
-
-
 const allFromThisPageChecked = computed(() => {
   if (!props.rows) return false;
   return props.rows.every((r) => checkboxesInternal.value.includes(r.id));
@@ -361,14 +358,6 @@ async function onClick(e,row) {
     },
   })}
 }
-  
-
-
-
-
-
-
-
 
 async function deleteRecord(row) {
   const data = await window.adminforth.confirm({
@@ -396,9 +385,5 @@ async function deleteRecord(row) {
       console.error(e);
       };
     }
-
-    
 }
-
-
 </script>

package/spa/src/index.scss

@@ -23,4 +23,5 @@
 //   ::-webkit-scrollbar-thumb:hover {
 //     @apply bg-gray-700
 //   }
-// }
+// }
+

package/spa/src/views/ShowView.vue

@@ -47,7 +47,7 @@
       class="relative overflow-x-auto shadow-resourseFormShadow "
     >
      <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
-        <thead class="text-xs text-gray-700 uppercase bg-lightormHeading dark:bg-gray-700 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400">
             <tr>
                 <th scope="col" class="px-6 py-3">
                     Field