adminforth 1.8.0 → 1.9.1-next.1

package/dist/spa/src/App.vue

@@ -100,7 +100,7 @@
 
                 <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 class="text-ellipsis overflow-hidden flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}
 
                   <span v-if="item.badge" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
                     fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">

package/dist/spa/src/afcl/Dialog.vue

@@ -0,0 +1,99 @@
+<template>
+  <div
+    v-if="$slots.trigger"
+    @click="modal?.show()" class="inline-flex items-center cursor-pointer"
+  >
+    <slot name="trigger"></slot>
+  </div>
+  <div ref="modalEl" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
+    <div v-bind="$attrs" class="relative p-4 max-w-2xl max-h-full" :class="$attrs.class?.includes('w-') ? '' : 'w-full'">
+      <!-- Modal content -->
+      <div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
+        <!-- Modal header -->
+        <div
+          v-if="header"
+          class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200"
+        >
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+            {{ header }}
+          </h3>
+          <button
+            v-if="headerCloseButton"
+            type="button"
+            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+            @click="modal?.hide()"
+          >
+            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+            </svg>
+            <span class="sr-only">Close modal</span>
+          </button>
+        </div>
+        <!-- Modal body -->
+        <div class="p-4 md:p-5 space-y-4 text-gray-700 dark:text-gray-400">
+          <slot></slot>
+        </div>
+        <!-- Modal footer -->
+        <div
+          v-if="buttons.length"
+          class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600"
+        >
+          <Button
+            v-for="(button, buttonIndex) in buttons"
+            :key="buttonIndex"
+            v-bind="button.options"
+            :class="{ 'ms-3': buttonIndex > 0 }"
+            @click="button.onclick(modal)"
+          >
+            {{ button.label }}
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from "./Button.vue";
+import { ref, onMounted, nextTick, onUnmounted, type Ref } from 'vue';
+import { Modal } from 'flowbite';
+
+const modalEl = ref(null);
+const modal: Ref<Modal|null> = ref(null);
+
+const props = defineProps({
+  header: {
+    type: String,
+    default: '',
+  },
+  headerCloseButton: {
+    type: Boolean,
+    default: true,
+  },
+  buttons: {
+    type: Array,
+    default: () => [{ label: 'Close', onclick: (dialog) => dialog.hide(), type: '' }],
+  },
+  clickToCloseOutside: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+onMounted(async () => {
+  //await one tick when all is mounted
+  await nextTick();
+  modal.value = new Modal(
+    modalEl.value,
+    {
+      backdrop: props.clickToCloseOutside ? 'dynamic' : 'static',
+    },
+  );
+})
+
+onUnmounted(() => {
+  //destroy tooltip
+  modal.value?.destroy();
+})
+
+</script>

package/dist/spa/src/afcl/Input.vue

@@ -2,13 +2,14 @@
 
   <div class="flex z-0">
     <span
-        v-if="$slots.prefix"
-        class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-s-0 border-gray-300 rounded-e-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
-      <slot name="prefix"></slot>
+        v-if="$slots.prefix || prefix"
+        class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-s-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
+      <slot name="prefix">{{ prefix }}</slot>
     </span>
 
     <!-- translate needed for bumping ring above prefix without z-index -->
     <input
+      ref="input"
       v-bind="$attrs"
       :type="type"
       @input="$emit('update:modelValue', $event.target?.value)"
@@ -16,14 +17,14 @@
       aria-describedby="helper-text-explanation"
       class="inline-flex bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-0 focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary 
       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 translate-y-0"
-      :class="{'rounded-l-md': !$slots.prefix, 'rounded-r-md': !$slots.suffix, 'w-full': fullWidth}"
+      :class="{'rounded-l-md': !$slots.prefix && !prefix, 'rounded-r-md': !$slots.suffix && !suffix, 'w-full': fullWidth}"
     >
 
 
     <span
-        v-if="$slots.suffix"
+        v-if="$slots.suffix || suffix"
         class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-s-0 border-gray-300 rounded-e-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600 ">
-      <slot name="suffix"></slot>
+      <slot name="suffix">{{ suffix }}</slot>
     </span>
     
   </div>
@@ -31,12 +32,21 @@
 
 <script setup lang="ts">
 
+import { ref } from 'vue';
+
 const props = defineProps({
   type: String,
   fullWidth: Boolean,
   modelValue: String,
+  suffix: String,
+  prefix: String,
 })
 
+const input = ref<HTMLInputElement | null>(null)
+
+defineExpose({
+  focus: () => input.value?.focus(),
+});
 
 </script>
   

package/dist/spa/src/afcl/Select.vue

@@ -213,7 +213,7 @@ const removeClickListener = () => {
 
 const toogleItem = (item) => {
   if (selectedItems.value.includes(item)) {
-    selectedItems.value = selectedItems.value.filter(i => i !== item);
+    selectedItems.value = selectedItems.value.filter(i => i.value !== item.value);
   } else {
     if (!props.multiple) {
       selectedItems.value = [item];
@@ -228,8 +228,7 @@ const toogleItem = (item) => {
     search.value = '';
   }
 
-  const list = selectedItems.value.map(item => item.value);
-  const updValue = list.length ? list : null;
+  const updValue = selectedItems.value.map(item => item.value);
   let emitValue;
   if (!props.multiple) {
     emitValue = updValue ? updValue[0] : null;

package/dist/spa/src/afcl/index.ts

@@ -16,5 +16,6 @@ export { default as Table } from './Table.vue';
 export { default as ProgressBar } from './ProgressBar.vue';
 export { default as Spinner } from './Spinner.vue';
 export { default as Skeleton } from './Skeleton.vue';
+export { default as Dialog } from './Dialog.vue';
 
 

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

@@ -8,6 +8,8 @@
       @update:value="$emit('update:modelValue', $event)"
       :meta="column.components[props.source].meta"
       :record="currentValues"
+      :resource="coreStore.resource"
+      :adminUser="coreStore.adminUser"
       @update:inValidity="$emit('update:inValidity', $event)"
       @update:emptiness="$emit('update:emptiness', $event)"
     />
@@ -39,17 +41,19 @@
       :readonly="column.editReadonly && source === 'edit'"
       @update:modelValue="$emit('update:modelValue', $event)"
     />
-    <input 
+    <Input
       v-else-if="['integer'].includes(type || column.type)"
       ref="input"
-      type="number" 
+      type="number"
       step="1"
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-40 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+      class="w-40"
       placeholder="0"
+      :prefix="column.inputPrefix"
+      :suffix="column.inputSuffix"
       :readonly="column.editReadonly && source === 'edit'"
-      :value="value"
-      @input="$emit('update:modelValue', $event.target.value)"
-    >
+      :modelValue="value"
+      @update:modelValue="$emit('update:modelValue', $event)"
+    />
     <CustomDatePicker
       v-else-if="['datetime'].includes(type || column.type)"
       ref="input"
@@ -59,15 +63,17 @@
       @update:valueStart="$emit('update:modelValue', $event)"
       :readonly="column.editReadonly && source === 'edit'"
     />
-    <input
+    <Input
       v-else-if="['decimal', 'float'].includes(type || column.type)"
       ref="input"
       type="number"
       step="0.1"
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-40 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+      class="w-40"
       placeholder="0.0"
-      :value="value"
-      @input="$emit('update:modelValue', $event.target.value)"
+      :prefix="column.inputPrefix"
+      :suffix="column.inputSuffix"
+      :modelValue="value"
+      @update:modelValue="$emit('update:modelValue', $event)"
       :readonly="column.editReadonly && source === 'edit'"
     />
     <textarea
@@ -87,19 +93,21 @@
       :value="value"
       @input="$emit('update:modelValue', $event.target.value)"
     />
-    <input
+    <Input
       v-else
       ref="input"
       :type="!column.masked || unmasked[column.name] ? 'text' : 'password'"
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+      class="w-full"
       :placeholder="$t('Text')"
-      :value="value"
-      @input="$emit('update:modelValue', $event.target.value)"
+      :prefix="column.inputPrefix"
+      :suffix="column.inputSuffix"
+      :modelValue="value"
+      @update:modelValue="$emit('update:modelValue', $event)"
       autocomplete="false"
       data-lpignore="true"
       readonly
       @focus="onFocusHandler($event, column, source)"
-    >
+    />
 
     <button
       v-if="deletable"
@@ -125,23 +133,33 @@
   import { IconEyeSlashSolid, IconEyeSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite';
   import CustomDatePicker from "@/components/CustomDatePicker.vue";
   import Select from '@/afcl/Select.vue';
+  import Input from '@/afcl/Input.vue';
   import { ref } from 'vue';
   import { getCustomComponent } from '@/utils';
   import { useI18n } from 'vue-i18n';
+  import { useCoreStore } from '@/stores/core';
+
+  const coreStore = useCoreStore();
 
   const { t } = useI18n();
 
-  const props = defineProps<{
-    source: 'create' | 'edit',
-    column: any,
-    type: string,
-    value: any,
-    currentValues: any,
-    mode: string,
-    columnOptions: any,
-    unmasked: any,
-    deletable: boolean,
-  }>();
+  const props = withDefaults(
+    defineProps<{
+      source: 'create' | 'edit',
+      column: any,
+      type?: string,
+      value: any,
+      currentValues: any,
+      mode: string,
+      columnOptions: any,
+      unmasked: any,
+      deletable?: boolean,
+    }>(),
+    {
+      type: undefined,
+      deletable: false,
+    }
+  );
 
   const input = ref(null);
 

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

@@ -129,7 +129,8 @@ watch(start, () => {
 })
 
 function initDatepickers() {
-  const options = {format: 'dd M yyyy'};
+  const LS_LANG_KEY = `afLanguage`;
+  const options = {format: 'dd M yyyy', language: localStorage.getItem(LS_LANG_KEY)};
 
   if (props.autoHide) {
     options.autohide = true;

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

@@ -184,10 +184,9 @@ watch(end, () => {
 })
 
 function initDatepickers() {
-
-  datepickerStartObject.value = new Datepicker(datepickerStartEl.value, {format: 'dd M yyyy'});
-
-  datepickerEndObject.value = new Datepicker(datepickerEndEl.value, {format: 'dd M yyyy'});
+  const LS_LANG_KEY = `afLanguage`;
+  datepickerStartObject.value = new Datepicker(datepickerStartEl.value, {format: 'dd M yyyy', language: localStorage.getItem(LS_LANG_KEY)});
+  datepickerEndObject.value = new Datepicker(datepickerEndEl.value, {format: 'dd M yyyy', language: localStorage.getItem(LS_LANG_KEY)});
   addChangeDateListener();
 }
 

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

@@ -27,7 +27,7 @@
               multiple
               class="w-full"
               :options="columnOptions[c.name] || []"
-              @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event || undefined })"
+              @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event.length ? $event : undefined  })"
               :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
             />
             <Select
@@ -40,7 +40,7 @@
                 // if field is not required, undefined might be there, and user might want to filter by it
                 ...(c.required ? [] : [ { label: $t('Unset'), value: undefined } ])
               ]"
-              @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event || undefined })"
+              @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event.length ? $event : undefined  })"
               :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
             />
             
@@ -49,12 +49,12 @@
               class="w-full"
               v-else-if="c.enum"
               :options="c.enum"
-              @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event || undefined })"
+              @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event.length ? $event : undefined })"
               :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
             />
 
             <Input
-              v-else-if="[ 'string', 'text' ].includes(c.type)"
+              v-else-if="['string', 'text', 'json', 'richtext', 'unknown'].includes(c.type)"
               type="text"
               full-width
               :placeholder="$t('Search')"
@@ -72,7 +72,7 @@
            />
 
             <Input
-              v-else-if="[ 'date', 'time' ].includes(c.type)"
+              v-else-if="['date', 'time'].includes(c.type)"
               type="text"
               full-width
               :placeholder="$t('Search datetime')"

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

@@ -129,11 +129,11 @@
     arrayItemRefs.value[arrayItemRefs.value.length - 1].focus();
   }
 
-  watch(customComponentsInValidity, (newVal) => {
+  watch(customComponentsInValidity.value, (newVal) => {
     emit('update:customComponentsInValidity', newVal);
   });
 
-  watch(customComponentsEmptiness, (newVal) => {
+  watch(customComponentsEmptiness.value, (newVal) => {
     emit('update:customComponentsEmptiness', newVal);
   });
 

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

@@ -15,8 +15,8 @@
         :validating="validating"
         :columnError="columnError"
         :setCurrentValue="setCurrentValue"
-        @update:customComponentsInValidity="(data) => customComponentsInValidity.value = { ...customComponentsInValidity.value, ...data }"
-        @update:customComponentsEmptiness="(data) => customComponentsEmptiness.value = { ...customComponentsEmptiness.value, ...data }"
+        @update:customComponentsInValidity="(data) => customComponentsInValidity = { ...customComponentsInValidity, ...data }"
+        @update:customComponentsEmptiness="(data) => customComponentsEmptiness = { ...customComponentsEmptiness, ...data }"
         />
       </div>
       <div v-else class="flex flex-col gap-4">
@@ -32,8 +32,8 @@
           :validating="validating"
           :columnError="columnError"
           :setCurrentValue="setCurrentValue"
-          @update:customComponentsInValidity="(data) => customComponentsInValidity.value = { ...customComponentsInValidity.value, ...data }"
-          @update:customComponentsEmptiness="(data) => customComponentsEmptiness.value = { ...customComponentsEmptiness.value, ...data }"
+          @update:customComponentsInValidity="(data) => customComponentsInValidity = { ...customComponentsInValidity, ...data }"
+          @update:customComponentsEmptiness="(data) => customComponentsEmptiness = { ...customComponentsEmptiness, ...data }"
           />
         </template>
         <div v-if="otherColumns.length > 0">
@@ -48,8 +48,8 @@
           :validating="validating"
           :columnError="columnError"
           :setCurrentValue="setCurrentValue"
-          @update:customComponentsInValidity="(data) => customComponentsInValidity.value = { ...customComponentsInValidity.value, ...data }"
-          @update:customComponentsEmptiness="(data) => customComponentsEmptiness.value = { ...customComponentsEmptiness.value, ...data }"
+          @update:customComponentsInValidity="(data) => customComponentsInValidity = { ...customComponentsInValidity, ...data }"
+          @update:customComponentsEmptiness="(data) => customComponentsEmptiness = { ...customComponentsEmptiness, ...data }"
           />
         </div>
       </div>
@@ -95,19 +95,28 @@ const columnError = (column) => {
     if (!currentValues.value) {
       return null;
     }
-    if (customComponentsInValidity.value[column.name]) {
-      return customComponentsInValidity.value[column.name];
+    if (customComponentsInValidity.value?.[column.name]) {
+      return customComponentsInValidity.value?.[column.name];
     }
+    
+    if ( column.required[mode.value] ) {
+      const naturalEmptiness = currentValues.value[column.name] === undefined ||
+        currentValues.value[column.name] === null ||
+        currentValues.value[column.name] === '' || 
+        (column.isArray?.enabled && !currentValues.value[column.name].length);
 
-    if ( 
-      column.required[mode.value] && 
-      (currentValues.value[column.name] === undefined || currentValues.value[column.name] === null || currentValues.value[column.name] === '' || (column.isArray?.enabled && !currentValues.value[column.name].length)) && 
+      const emitedEmptiness = customComponentsEmptiness.value?.[column.name];
       // if component is custum it might tell other criteria for emptiness by emitting 'update:emptiness'
       // components which do not emit 'update:emptiness' will have undefined value in customComponentsEmptiness
-      (customComponentsEmptiness.value[column.name] !== false)
-    
-    ) {
-      return t('This field is required');
+      let actualEmptiness;
+      if (emitedEmptiness !== undefined) {
+        actualEmptiness = emitedEmptiness;
+      } else {
+        actualEmptiness = naturalEmptiness;
+      }
+      if (actualEmptiness) {
+        return t('This field is required');
+      }
     }
     if (column.type === 'json' && !column.isArray?.enabled && currentValues.value[column.name]) {
       try {
@@ -130,6 +139,7 @@ const columnError = (column) => {
       return validateValue(column.type, currentValues.value[column.name], column);
     }
     
+    return null;
   });
   return val.value;
 };
@@ -252,6 +262,9 @@ const columnOptions = computedAsync(async () => {
             offset: 0,
           },
         });
+
+        if (!column.required[props.source]) list.items.push({ value: null, label: t('Unset') });
+
         return { [column.name]: list.items };
       }
     })

package/dist/spa/src/types/Back.ts

@@ -118,6 +118,14 @@ export interface IAdminForthSort {
 }
 
 export interface IAdminForthDataSourceConnector {
+
+  client: any;
+
+  /**
+   * Function to setup client connection to database.
+   * @param url URL to database. Examples: clickhouse://demo:demo@localhost:8125/demo
+   */
+  setupClient(url: string): Promise<void>;
   
   /**
    * Optional.
@@ -250,7 +258,7 @@ export interface IAdminForthDataSourceConnectorBase extends IAdminForthDataSourc
 
 
 export interface IAdminForthDataSourceConnectorConstructor {
-  new ({ url }: { url: string }): IAdminForthDataSourceConnectorBase;
+  new (): IAdminForthDataSourceConnectorBase;
 }
 
 export interface IAdminForthAuth {
@@ -1324,14 +1332,18 @@ export interface AdminForthForeignResource extends AdminForthForeignResourceComm
   },
 }
 
-/**
- * Object which describes on what pages should column be displayed on.
- */
-export type ShowInInput = {
+export type ShowInModernInput = {
   [key in AdminForthResourcePages]?: AllowedActionValue
 } & {
   all?: AllowedActionValue;
-} & Array<AdminForthResourcePages | keyof typeof AdminForthResourcePages>;
+}
+
+export type ShowInLegacyInput = Array<AdminForthResourcePages | keyof typeof AdminForthResourcePages>;
+
+/**
+ * Object which describes on what pages should column be displayed on.
+ */
+export type ShowInInput = ShowInModernInput | ShowInLegacyInput;
 
 export type ShowIn = {
   [key in AdminForthResourcePages]: AllowedActionValue

package/dist/spa/src/types/Common.ts

@@ -615,6 +615,12 @@ export interface AdminForthResourceColumnInputCommon {
    */
   required?: boolean | { create?: boolean, edit?: boolean },
 
+  /**
+   * Prefix and suffix for input field on create and edit pages.
+   */
+  inputPrefix?: string,
+  inputSuffix?: string,
+
   /**
    * Whether AdminForth will show editing note near the field in edit/create form.
    */
@@ -626,11 +632,41 @@ export interface AdminForthResourceColumnInputCommon {
   editReadonly?: boolean,
 
   /**
-   * On which AdminForth pages this field will be shown. By default all.
+   * Defines on which AdminForth pages this field will be shown. By default all.
    * Example: if you want to show field only in create and edit pages, set it to
    * 
    * ```ts
-   * showIn: { create: true, edit: true}
+   * showIn: { create: true, edit: true }
+   * ```
+   * 
+   * If you wish show only in list view, set it to:
+   * 
+   * ```ts
+   * showIn: { all: false, list: true }
+   * ```
+   * 
+   * If you wish to hide only in list you can use:
+   * 
+   * 
+   * ```ts
+   * showIn: { all: true, list: false }
+   * ```
+   * 
+   * or
+   * 
+   * ```ts
+   * showIn: { list: false } // all: true is by default already
+   * ```
+   * 
+   * Also might have callback which will be called with same syntax as allowedActions.
+   * 
+   * ```ts
+   * showIn: {
+   *  list: ({ resource, adminUser }) => {
+   *    return adminUser.dbUser.role === 'superadmin';
+   *  },
+   *  show: true,
+   * }
    * ```
    * 
    */
@@ -699,7 +735,12 @@ export interface AdminForthResourceColumnInputCommon {
   virtual?: boolean,
 
   /**
-   * Whether AdminForth will show this field in list view.
+   * Allow AdminForth to execute SELECT min(column) and SELECT max(column) queries to get min and max values for this column.
+   * This would improve UX of filters by adding sliders for numeric columns.
+   * 
+   * NOTE: By default is option is `false` to prevent performance issues on large tables.
+   * If you are going to set it to `true`, make sure you have a one-item index on this column (one index for each column which has it) or ensure your table will not have a large number of records.
+   * 
    */
   allowMinMaxQuery?: boolean,
 

package/dist/spa/src/utils.ts

@@ -116,7 +116,8 @@ export function initThreeDotsDropdown() {
     // this resource has three dots dropdown
     const dd = new Dropdown(
       threeDotsDropdown, 
-      document.querySelector('[data-dropdown-toggle="listThreeDotsDropdown"]') as HTMLElement, 
+      document.querySelector('[data-dropdown-toggle="listThreeDotsDropdown"]') as HTMLElement,
+      { placement: 'bottom-end' }
     );
     adminforth.list.closeThreeDotsDropdown = () => {
       dd.hide();