adminforth 1.6.4 → 1.7.0-next.10

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,33 +116,18 @@
     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) => {
     emit('update:customComponentsInValidity', 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

@@ -101,7 +101,7 @@ const columnError = (column) => {
 
     if ( 
       column.required[mode.value] && 
-      (currentValues.value[column.name] === undefined || currentValues.value[column.name] === null || currentValues.value[column.name] === '') && 
+      (currentValues.value[column.name] === undefined || currentValues.value[column.name] === null || currentValues.value[column.name] === '' || (column.isArray?.enabled && !currentValues.value[column.name].length)) && 
       // 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)
@@ -109,68 +109,103 @@ const columnError = (column) => {
     ) {
       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 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 +220,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);
@@ -215,7 +261,7 @@ const columnOptions = computedAsync(async () => {
 
 
 const editableColumns = computed(() => {
-  return props.resource?.columns?.filter(column => column.showIn.includes(mode.value));
+  return props.resource?.columns?.filter(column => column.showIn[mode.value]);
 });
 
 const isValid = computed(() => {

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

@@ -62,7 +62,7 @@
         <!-- table header end -->
         <SkeleteLoader 
           v-if="!rows" 
-          :columns="resource?.columns.filter(c => c.showIn.includes('list')).length + 2"
+          :columns="resource?.columns.filter(c => c.showIn.list).length + 2"
           :rows="3"
         />
         <tr v-else-if="rows.length === 0" class="bg-lightListTable dark:bg-darkListTable dark:border-darkListTableBorder">
@@ -356,7 +356,7 @@ function addToCheckedValues(id) {
   checkboxesInternal.value = [ ...checkboxesInternal.value ]
 }
 
-const columnsListed = computed(() => props.resource?.columns?.filter(c => c.showIn.includes('list')));
+const columnsListed = computed(() => props.resource?.columns?.filter(c => c.showIn.list));
 
 async function selectAll(value) {
   if (!allFromThisPageChecked.value) {

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/stores/core.ts

@@ -21,7 +21,7 @@ export const useCoreStore = defineStore('core', () => {
     if (!resource.value) {
       return [];
     }
-    return resource.value.columns.filter((col: AdminForthResourceColumnCommon) => col.showIn?.includes('filter'));
+    return resource.value.columns.filter((col: AdminForthResourceColumnCommon) => col.showIn?.filter);
   })
 
   const resourceOptions: Ref<AdminForthResourceCommon['options'] | null> = ref(null);

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

@@ -11,7 +11,8 @@ import { ActionCheckSource, AdminForthFilterOperators, AdminForthSortDirections,
   AdminForthResourceInputCommon,
   AdminForthComponentDeclarationFull,
   AdminForthConfigMenuItem,
-  AnnouncementBadgeResponse
+  AnnouncementBadgeResponse,
+  AdminForthResourcePages,
 } from './Common.js';
 import { AnyCnameRecord } from 'dns';
 
@@ -117,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.
@@ -249,7 +258,7 @@ export interface IAdminForthDataSourceConnectorBase extends IAdminForthDataSourc
 
 
 export interface IAdminForthDataSourceConnectorConstructor {
-  new ({ url }: { url: string }): IAdminForthDataSourceConnectorBase;
+  new (): IAdminForthDataSourceConnectorBase;
 }
 
 export interface IAdminForthAuth {
@@ -707,6 +716,7 @@ interface AdminForthInputConfigCustomization {
     userMenu?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
     header?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
     sidebar?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+    everyPageBottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
   }
 }
 
@@ -798,7 +808,7 @@ export interface AdminForthResourceInput extends Omit<AdminForthResourceInputCom
 
   options?: ResourceOptionsInput,
 
-  columns: Array<AdminForthResourceColumn>,
+  columns: Array<AdminForthResourceColumnInput>,
 
   dataSourceColumns?: Array<AdminForthResourceColumn>,
 }
@@ -983,6 +993,7 @@ export interface AdminForthConfigCustomization extends Omit<AdminForthInputConfi
     userMenu: Array<AdminForthComponentDeclarationFull>,
     header: Array<AdminForthComponentDeclarationFull>,
     sidebar: Array<AdminForthComponentDeclarationFull>,
+    everyPageBottom: Array<AdminForthComponentDeclarationFull>,
   },
 }
 
@@ -1140,7 +1151,7 @@ export interface ResourceOptions extends Omit<ResourceOptionsInput, 'allowedActi
  * Resource describes one table or collection in database.
  * AdminForth generates set of pages for 'list', 'show', 'edit', 'create', 'filter' operations for each resource.
  */
-export interface AdminForthResource extends Omit<AdminForthResourceInput, 'options'> {
+export interface AdminForthResource extends Omit<AdminForthResourceInput, 'options' | 'columns'> {
   /**
    * Array of plugins which will be used to modify resource configuration.
    * 
@@ -1321,7 +1332,30 @@ export interface AdminForthForeignResource extends AdminForthForeignResourceComm
   },
 }
 
-export interface AdminForthResourceColumn extends AdminForthResourceColumnCommon {
+export type ShowInModernInput = {
+  [key in AdminForthResourcePages]?: AllowedActionValue
+} & {
+  all?: AllowedActionValue;
+}
+
+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
+}
+
+export interface AdminForthResourceColumnInput extends Omit<AdminForthResourceColumnCommon, 'showIn'> {
+  showIn?: ShowInInput,
+  foreignResource?: AdminForthForeignResource,
+}
+
+export interface AdminForthResourceColumn extends Omit<AdminForthResourceColumnInput, 'showIn'> {
+  showIn?: ShowIn,
   foreignResource?: AdminForthForeignResource,
 }