adminforth 1.7.0 → 1.9.0

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

@@ -38,115 +38,54 @@
               </Tooltip>
             </span>
           </td>
-          <td class="px-6 py-4  whitespace-pre-wrap relative block md:table-cell rounded-br-lg " 
-              :class="{'rounded-br-lg': i === group.columns.length - 1}">
-            <template v-if="column?.components?.[props.source]?.file">
-              <component
-                :is="getCustomComponent(column.components[props.source])"
+          <td
+            class="px-6 py-4  whitespace-pre-wrap relative block md:table-cell"
+            :class="{'rounded-br-lg': i === group.columns.length - 1}"
+          >
+            <template v-if="column.isArray?.enabled">
+              <ColumnValueInput
+                v-for="(arrayItemValue, arrayItemIndex) in currentValues[column.name]"
+                :key="`${column.name}-${arrayItemIndex}`"
+                ref="arrayItemRefs"
+                :class="{'mt-2': arrayItemIndex}"
+                :source="source"
                 :column="column"
-                :value="currentValues[column.name]"
-                @update:value="setCurrentValue(column.name, $event)"
-                :meta="column.components[props.source].meta"
-                :record="currentValues"
+                :type="column.isArray.itemType"
+                :value="arrayItemValue"
+                :currentValues="currentValues"
+                :mode="mode"
+                :columnOptions="columnOptions"
+                :deletable="!column.editReadonly"
+                @update:modelValue="setCurrentValue(column.name, $event, arrayItemIndex)"
+                @update:unmasked="unmasked[column.name] = !unmasked[column.name]"
                 @update:inValidity="customComponentsInValidity[column.name] = $event"
                 @update:emptiness="customComponentsEmptiness[column.name] = $event"
+                @delete="setCurrentValue(column.name, currentValues[column.name].filter((_, index) => index !== arrayItemIndex))"
               />
-            </template>
-            <template v-else>
-              <Select
-                class="w-full"
-                v-if="column.foreignResource"
-                :options="columnOptions[column.name] || []"
-                :placeholder = "columnOptions[column.name]?.length ?$t('Select...'): $t('There are no options available')"
-                :modelValue="currentValues[column.name]"
-                :readonly="column.editReadonly && source === 'edit'"
-                @update:modelValue="setCurrentValue(column.name, $event)"
-              ></Select>
-              <Select
-                class="w-full"
-                v-else-if="column.enum"
-                :options="column.enum"
-                :modelValue="currentValues[column.name]"
-                :readonly="column.editReadonly && source === 'edit'"
-                @update:modelValue="setCurrentValue(column.name, $event)"
-              ></Select>
-              <Select
-                class="w-full"
-                v-else-if="column.type === 'boolean'"
-                :options="getBooleanOptions(column)"
-                :modelValue="currentValues[column.name]"
-                :readonly="column.editReadonly && source === 'edit'"
-                @update:modelValue="setCurrentValue(column.name, $event)"
-              ></Select>
-              <input 
-                  v-else-if="['integer'].includes(column.type)"
-                  type="number" 
-                  step="1"
-                  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-40 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="0"
-                  :readonly="column.editReadonly && source === 'edit'"
-                  :value="currentValues[column.name]"
-                  @input="setCurrentValue(column.name, $event.target.value)"
-              >
-              <CustomDatePicker
-                  v-else-if="['datetime'].includes(column.type)"
-                  :column="column"
-                  :valueStart="currentValues[column.name]"
-                  auto-hide
-                  @update:valueStart="setCurrentValue(column.name, $event)"
-                  :readonly="column.editReadonly && source === 'edit'"
-              />
-              <input
-                  v-else-if="['decimal', 'float'].includes(column.type)"
-                  type="number"
-                  step="0.1"
-                  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-40 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="0.0"
-                  :value="currentValues[column.name]"
-                  @input="setCurrentValue(column.name, $event.target.value)"
-                  :readonly="column.editReadonly && source === 'edit'"
-              />
-              <textarea
-                  v-else-if="['text', 'richtext'].includes(column.type)"
-                  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-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="$t('Text')"
-                  :value="currentValues[column.name]"
-                  @input="setCurrentValue(column.name, $event.target.value)"
-                  :readonly="column.editReadonly && source === 'edit'"
-              >
-              </textarea>
-              <textarea
-                  v-else-if="['json'].includes(column.type)"
-                  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-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="$t('Text')"
-                  :value="currentValues[column.name]"
-                  @input="setCurrentValue(column.name, $event.target.value)"
-              >
-              </textarea>
-              <input
-                  v-else
-                  :type="!column.masked || unmasked[column.name] ? 'text' : 'password'"
-                  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-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="$t('Text')"
-                  :value="currentValues[column.name]"
-                  @input="setCurrentValue(column.name, $event.target.value)"
-                  autocomplete="false"
-                  data-lpignore="true"
-                  readonly
-                  ref="readonlyInputs"
-                  @focus="onFocusHandler($event, column, source)"
-              >
-
               <button
-                  v-if="column.masked"
-                  type="button"
-                  @click="unmasked[column.name] = !unmasked[column.name]"
-                  class="h-6 absolute inset-y-2 top-6 right-6 flex items-center pr-2 z-index-100 focus:outline-none"
+                v-if="!column.editReadonly"
+                @click="setCurrentValue(column.name, currentValues[column.name], currentValues[column.name].length); focusOnLastInput(column.name)"
+                class="flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+                :class="{'mt-2': currentValues[column.name].length}"
               >
-                  <IconEyeSolid class="w-6 h-6 text-gray-400"  v-if="!unmasked[column.name]" />
-                  <IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
+                <IconPlusOutline class="w-4 h-4 me-2"/>
+                {{ $t('Add') }}
               </button>
             </template>
+            <ColumnValueInput
+              v-else
+              :source="source"
+              :column="column"
+              :value="currentValues[column.name]"
+              :currentValues="currentValues"
+              :mode="mode"
+              :columnOptions="columnOptions"
+              :unmasked="unmasked"
+              @update:modelValue="setCurrentValue(column.name, $event)"
+              @update:unmasked="unmasked[column.name] = !unmasked[column.name]"
+              @update:inValidity="customComponentsInValidity[column.name] = $event"
+              @update:emptiness="customComponentsEmptiness[column.name] = $event"
+            />
             <div v-if="columnError(column) && validating" class="mt-1 text-xs text-red-500 dark:text-red-400">{{ columnError(column) }}</div>
             <div v-if="column.editingNote && column.editingNote[mode]" class="mt-1 text-xs text-gray-400 dark:text-gray-500">{{ column.editingNote[mode] }}</div>
           </td>
@@ -157,12 +96,10 @@
 </template>
 
 <script setup lang="ts">
-  import { IconExclamationCircleSolid, IconEyeSlashSolid, IconEyeSolid } from '@iconify-prerendered/vue-flowbite';
-  import CustomDatePicker from "@/components/CustomDatePicker.vue";
-  import Select from '@/afcl/Select.vue';
-  import { getCustomComponent } from '@/utils';
+  import { IconExclamationCircleSolid, IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
+  import ColumnValueInput from "@/components/ColumnValueInput.vue";
   import { Tooltip } from '@/afcl';
-  import { ref, computed, watch, type Ref } from 'vue';
+  import { ref, computed, watch, nextTick, type Ref } from 'vue';
   import { useI18n } from 'vue-i18n';
 
   const { t } = useI18n();
@@ -179,39 +116,24 @@
     columnOptions: any,
   }>();
 
+  const arrayItemRefs = ref([]);
+
   const customComponentsInValidity: Ref<Record<string, boolean>> = ref({});
   const customComponentsEmptiness: Ref<Record<string, boolean>> = ref({});
 
-  const getBooleanOptions = (column: any) => {
-    const options: Array<{ label: string; value: boolean | null }> = [
-      { label: t('Yes'), value: true },
-      { label: t('No'), value: false },
-    ];
-    if (!column.required[props.mode]) {
-      options.push({ label: t('Unset'), value: null });
-    }
-    return options;
-  };
-  function onFocusHandler(event:FocusEvent, column:any, source:string, ) {
-    const focusedInput = event.target as HTMLInputElement; 
-    if(!focusedInput) return;  
-    if (column.editReadonly && source === 'edit') return;  
-    else {
-      focusedInput.removeAttribute('readonly'); 
-    }
-  }
-
-
   const emit = defineEmits(['update:customComponentsInValidity', 'update:customComponentsEmptiness']);
 
+  async function focusOnLastInput(column) {
+    // wait for element to register
+    await nextTick();
+    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/MenuLink.vue

@@ -11,7 +11,7 @@
       }"
   >
     <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons dark:text-darkSidebarIcons  transition duration-75  group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover" ></component>
-    <span class="ms-3">{{ item.label }}</span>
+    <span class="text-ellipsis overflow-hidden ms-3">{{ item.label }}</span>
     <span v-if="item.badge" class="inline-flex items-center justify-center h-3 py-3 px-1 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
           fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent min-w-[1.5rem] max-w-[3rem]"
     >

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,82 +95,127 @@ 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] === '') && 
+      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' && currentValues.value[column.name]) {
+    if (column.type === 'json' && !column.isArray?.enabled && currentValues.value[column.name]) {
       try {
         JSON.parse(currentValues.value[column.name]);
       } catch (e) {
         return t('Invalid JSON');
       }
-    }
-    if ( column.type === 'string' || column.type === 'text' ) {
-      if ( column.maxLength && currentValues.value[column.name]?.length > column.maxLength ) {
-        return t('This field must be shorter than {maxLength} characters', { maxLength: column.maxLength });
-      }
-      
-      if ( column.minLength && currentValues.value[column.name]?.length < column.minLength ) {
-        // if column.required[mode.value] is false, then we check if the field is empty
-        let needToCheckEmpty = column.required[mode.value] || currentValues.value[column.name]?.length > 0;
-        if (!needToCheckEmpty) {
-          return null;
+    } else if (column.isArray?.enabled) {
+      if (!column.isArray.allowDuplicateItems) {
+        if (currentValues.value[column.name].filter((value, index, self) => self.indexOf(value) !== index).length > 0) {
+          return t('Array cannot contain duplicate items');
         }
-        return t('This field must be longer than {minLength} characters', { minLength: column.minLength });
       }
+
+      return currentValues.value[column.name] && currentValues.value[column.name].reduce((error, item) => {
+        return error || validateValue(column.isArray.itemType, item, column) ||
+          (item === null || !item.toString() ? t('Array cannot contain empty items') : null);
+      }, null);
+    } else {
+      return validateValue(column.type, currentValues.value[column.name], column);
     }
-    if ( ['integer', 'decimal', 'float'].includes(column.type) ) {
-      if ( column.minValue !== undefined 
-        && currentValues.value[column.name] !== null 
-        && currentValues.value[column.name] < column.minValue 
-      ) {
-        return t('This field must be greater than {minValue}', { minValue: column.minValue });
-      }
-      if ( column.maxValue !== undefined && currentValues.value[column.name] > column.maxValue ) {
-        return t('This field must be less than {maxValue}', { maxValue: column.maxValue });
-      }
+    
+    return null;
+  });
+  return val.value;
+};
+
+const validateValue = (type, value, column) => {
+  if (type === 'string' || type === 'text') {
+    if (column.maxLength && value?.length > column.maxLength) {
+      return t('This field must be shorter than {maxLength} characters', { maxLength: column.maxLength });
     }
-    if (currentValues.value[column.name] && column.validation) {
-      const error = applyRegexValidation(currentValues.value[column.name], column.validation);
-      if (error) {
-        return error;
+    
+    if (column.minLength && value?.length < column.minLength) {
+      // if column.required[mode.value] is false, then we check if the field is empty
+      let needToCheckEmpty = column.required[mode.value] || value?.length > 0;
+      if (!needToCheckEmpty) {
+        return null;
       }
+      return t('This field must be longer than {minLength} characters', { minLength: column.minLength });
+    }
+  }
+  if (['integer', 'decimal', 'float'].includes(type)) {
+    if (column.minValue !== undefined 
+      && value !== null 
+      && value < column.minValue
+    ) {
+      return t('This field must be greater than {minValue}', { minValue: column.minValue });
+    }
+    if (column.maxValue !== undefined && value > column.maxValue) {
+      return t('This field must be less than {maxValue}', { maxValue: column.maxValue });
     }
+  }
+  if (value && column.validation) {
+    const error = applyRegexValidation(value, column.validation);
+    if (error) {
+      return error;
+    }
+  }
 
-    return null;
-  });
-  return val.value;
+  return null;
 };
 
 
-const setCurrentValue = (key, value) => {
+const setCurrentValue = (key, value, index=null) => {
   const col = props.resource.columns.find((column) => column.name === key);
-  if (['integer', 'float'].includes(col.type) && (value || value === 0)) {
-    currentValues.value[key] = +value;
+  // if field is an array, we need to update the array or individual element
+  if (col.type === 'json' && col.isArray?.enabled) {
+    if (index === null) {
+      currentValues.value[key] = value;
+    } else if (index === currentValues.value[key].length) {
+      currentValues.value[key].push(null);
+    } else {
+      if (['integer', 'float'].includes(col.isArray.itemType) && (value || value === 0)) {
+        currentValues.value[key][index] = +value;
+      } else {
+        currentValues.value[key][index] = value;
+      }
+      if (['text', 'richtext', 'string'].includes(col.isArray.itemType) && col.enforceLowerCase) {
+        currentValues.value[key][index] = currentValues.value[key][index].toLowerCase();
+      }
+    }
   } else {
-    currentValues.value[key] = value;
-  }
-  if (['text', 'richtext', 'string'].includes(col.type) && col.enforceLowerCase) {
-    currentValues.value[key] = currentValues.value[key].toLowerCase();
+    if (['integer', 'float'].includes(col.type) && (value || value === 0)) {
+      currentValues.value[key] = +value;
+    } else {
+      currentValues.value[key] = value;
+    }
+    if (['text', 'richtext', 'string'].includes(col.type) && col.enforceLowerCase) {
+      currentValues.value[key] = currentValues.value[key].toLowerCase();
+    }
   }
 
   currentValues.value = { ...currentValues.value };
 
-  //json fields should transform to object
+  // json fields should transform to object
   const up = {...currentValues.value};
   props.resource.columns.forEach((column) => {
-    if (column.type === 'json' && up[column.name]) {
+    if (column.type === 'json' && !column.isArray?.enabled && up[column.name]) {
       try {
         up[column.name] = JSON.parse(up[column.name]);
       } catch (e) {
@@ -185,8 +230,19 @@ onMounted(() => {
   currentValues.value = Object.assign({}, props.record);
   // json values should transform to string
   props.resource.columns.forEach((column) => {
-    if (column.type === 'json' && currentValues.value[column.name]) {
-      currentValues.value[column.name] = JSON.stringify(currentValues.value[column.name], null, 2);
+    if (column.type === 'json') {
+      if (column.isArray?.enabled) {
+        // if value is null or undefined, we should set it to empty array
+        if (!currentValues.value[column.name]) {
+          currentValues.value[column.name] = [];
+        } else {
+          // else copy array to prevent mutation
+          currentValues.value[column.name] = [...currentValues.value[column.name]];
+        }
+      } else if (currentValues.value[column.name]) {
+        currentValues.value[column.name] = JSON.stringify(currentValues.value[column.name], null, 2);
+      }
+
     }
   });
   emit('update:isValid', isValid.value);
@@ -206,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/components/ValueRenderer.vue

@@ -14,6 +14,32 @@
       <span v-if="record[column.name]" class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">{{ $t('Yes') }}</span>
       <span v-else class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">{{ $t('No') }}</span>
     </span>
+    <span
+      v-else-if="column.type === 'json' && column.isArray?.enabled"
+      class="flex flex-wrap"
+    >
+      <template v-for="(arrayItem, arrayItemIndex) in record[column.name]">
+        <span
+          v-if="column.isArray.itemType === 'boolean' && arrayItem"
+          :key="`${column.name}-${arrayItemIndex}`"
+          class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">
+          {{ $t('Yes') }}
+        </span>
+        <span
+          v-else-if="column.isArray.itemType === 'boolean'"
+          :key="`${column.name}-${arrayItemIndex}`"
+          class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">
+          {{ $t('No') }}
+        </span>
+        <span
+          v-else
+          :key="`${column.name}-${arrayItemIndex}`"
+          class="rounded-md m-0.5 bg-lightAnnouncementBG dark:bg-darkAnnouncementBG text-lightAnnouncementText dark:text-darkAnnouncementText py-0.5 px-2.5 text-sm"
+        >
+          {{ checkEmptyValues(getArrayItemDisplayValue(arrayItem, column), route.meta.type) }}
+        </span>
+      </template>
+    </span>
     <span v-else-if="column.enum">
       {{ checkEmptyValues(column.enum.find(e => e.value === record[column.name])?.label || record[column.name], route.meta.type) }}
     </span>
@@ -102,6 +128,20 @@ function formatTime(time: string) {
   if (!time) return '';
   return dayjs(`0000-00-00 ${time}`).format(coreStore.config?.timeFormat || 'HH:mm:ss');
 }
+
+function getArrayItemDisplayValue(value, column) {
+  if (column.isArray?.itemType === 'datetime') {
+    return formatDateTime(value);
+  } else if (column.isArray?.itemType === 'date') {
+    return formatDate(value);
+  } else if (column.isArray?.itemType === 'time') {
+    return formatTime(value);
+  } else if (column.enum) {
+    return column.enum.find(e => e.value === value)?.label || value;
+  }
+
+  return value;
+}
 </script>
 
 <style lang="scss">

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 {
@@ -708,6 +716,7 @@ interface AdminForthInputConfigCustomization {
     userMenu?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
     header?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
     sidebar?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+    everyPageBottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
   }
 }
 
@@ -984,6 +993,7 @@ export interface AdminForthConfigCustomization extends Omit<AdminForthInputConfi
     userMenu: Array<AdminForthComponentDeclarationFull>,
     header: Array<AdminForthComponentDeclarationFull>,
     sidebar: Array<AdminForthComponentDeclarationFull>,
+    everyPageBottom: Array<AdminForthComponentDeclarationFull>,
   },
 }
 
@@ -1322,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

@@ -568,6 +568,24 @@ export interface AdminForthResourceColumnInputCommon {
    */
   type?: AdminForthDataTypes,
 
+  /**
+   * Defines whether column is array and what type of items it contains.
+   * AdminForth will use this information to render proper input fields in the admin panel with control buttons to add and remove items.
+   * If enabled, requires column type to be JSON.
+   * Cannot be used with masked columns, columns with foreignResource or primary key columns.
+   */
+  isArray?: {
+    enabled: boolean,
+    /**
+     * Type of items in array. Cannot be JSON or RICHTEXT.
+     */
+    itemType: AdminForthDataTypes,
+    /**
+     * If enabled, AdminForth will allow to add items with the same value.
+     */
+    allowDuplicateItems?: boolean,
+  },
+
   /**
    * An optional configuration object for extra settings.
    */
@@ -597,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.
    */
@@ -948,6 +972,7 @@ export interface AdminForthConfigForFrontend {
     userMenu: Array<AdminForthComponentDeclarationFull>,
     header: Array<AdminForthComponentDeclarationFull>,
     sidebar: Array<AdminForthComponentDeclarationFull>,
+    everyPageBottom: Array<AdminForthComponentDeclarationFull>,
   }
 }
 

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

@@ -38,7 +38,7 @@ export interface FrontendAPIInterface {
      * @param params - The parameters of the dialog
      * @returns A promise that resolves when the user confirms the dialog
      */   
-    confirm(params:ConfirmParams ): Promise<void>;
+    confirm(params: ConfirmParams): Promise<boolean>;
     
     /**
      * Show an alert

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();