adminforth 1.7.0 → 1.8.0

package/dist/spa/src/App.vue

@@ -209,9 +209,12 @@
          drawer-backdrop="" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-20">
     </div>
 
-
+    <component
+      v-for="c in coreStore?.config?.globalInjections?.everyPageBottom || []"
+      :is="getCustomComponent(c)"
+      :meta="c.meta"
+    />
   </div>
-
 </template>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,175 @@
+<template>
+  <div class="flex">
+    <component
+      v-if="column?.components?.[props.source]?.file"
+      :is="getCustomComponent(column.components[props.source])"
+      :column="column"
+      :value="value"
+      @update:value="$emit('update:modelValue', $event)"
+      :meta="column.components[props.source].meta"
+      :record="currentValues"
+      @update:inValidity="$emit('update:inValidity', $event)"
+      @update:emptiness="$emit('update:emptiness', $event)"
+    />
+    <Select
+      v-else-if="column.foreignResource"
+      ref="input"
+      class="w-full"
+      :options="columnOptions[column.name] || []"
+      :placeholder = "columnOptions[column.name]?.length ?$t('Select...'): $t('There are no options available')"
+      :modelValue="value"
+      :readonly="column.editReadonly && source === 'edit'"
+      @update:modelValue="$emit('update:modelValue', $event)"
+    />
+    <Select
+      v-else-if="column.enum"
+      ref="input"
+      class="w-full"
+      :options="column.enum"
+      :modelValue="value"
+      :readonly="column.editReadonly && source === 'edit'"
+      @update:modelValue="$emit('update:modelValue', $event)"
+    />
+    <Select
+      v-else-if="(type || column.type) === 'boolean'"
+      ref="input"
+      class="w-full"
+      :options="getBooleanOptions(column)"
+      :modelValue="value"
+      :readonly="column.editReadonly && source === 'edit'"
+      @update:modelValue="$emit('update:modelValue', $event)"
+    />
+    <input 
+      v-else-if="['integer'].includes(type || column.type)"
+      ref="input"
+      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"
+      placeholder="0"
+      :readonly="column.editReadonly && source === 'edit'"
+      :value="value"
+      @input="$emit('update:modelValue', $event.target.value)"
+    >
+    <CustomDatePicker
+      v-else-if="['datetime'].includes(type || column.type)"
+      ref="input"
+      :column="column"
+      :valueStart="value"
+      auto-hide
+      @update:valueStart="$emit('update:modelValue', $event)"
+      :readonly="column.editReadonly && source === 'edit'"
+    />
+    <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"
+      placeholder="0.0"
+      :value="value"
+      @input="$emit('update:modelValue', $event.target.value)"
+      :readonly="column.editReadonly && source === 'edit'"
+    />
+    <textarea
+      v-else-if="['text', 'richtext'].includes(type || column.type)"
+      ref="input"
+      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"
+      :placeholder="$t('Text')"
+      :value="value"
+      @input="$emit('update:modelValue', $event.target.value)"
+      :readonly="column.editReadonly && source === 'edit'"
+    />
+    <textarea
+      v-else-if="['json'].includes(type || column.type)"
+      ref="input"
+      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"
+      :placeholder="$t('Text')"
+      :value="value"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+    <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"
+      :placeholder="$t('Text')"
+      :value="value"
+      @input="$emit('update:modelValue', $event.target.value)"
+      autocomplete="false"
+      data-lpignore="true"
+      readonly
+      @focus="onFocusHandler($event, column, source)"
+    >
+
+    <button
+      v-if="deletable"
+      type="button"
+      class="h-6 inset-y-2 right-0 flex items-center px-2 pt-4 z-index-100 focus:outline-none"
+      @click="$emit('delete')"
+    >
+      <IconTrashBinSolid class="w-6 h-6 text-gray-400"/>
+    </button>
+    <button
+      v-else-if="column.masked"
+      type="button"
+      @click="$emit('update:unmasked')"
+      class="h-6 inset-y-2 right-0 flex items-center px-2 pt-4 z-index-100 focus:outline-none"
+    >
+      <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 />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { IconEyeSlashSolid, IconEyeSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite';
+  import CustomDatePicker from "@/components/CustomDatePicker.vue";
+  import Select from '@/afcl/Select.vue';
+  import { ref } from 'vue';
+  import { getCustomComponent } from '@/utils';
+  import { useI18n } from 'vue-i18n';
+
+  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 input = ref(null);
+
+  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'); 
+    }
+  }
+
+  function focus() {
+    if (input.value?.focus) input.value?.focus();
+  }
+
+  defineExpose({
+    focus,
+  });
+</script>

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

@@ -2,7 +2,7 @@
   <div>
     <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>
+        <label v-if="label" for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>
 
         <div class="relative">
           <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
@@ -10,7 +10,7 @@
           </div>
 
           <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"
+                 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"
                 :placeholder="$t('Select date')" :disabled="readonly" />
           
         </div>
@@ -26,7 +26,7 @@
             </div>
 
             <input v-model="startTime" type="time" id="start-time" onfocus="this.showPicker()" onclick="this.showPicker()" step="1"
-                   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"
+                   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"
                    value="00:00" :disabled="readonly" required/>
           </div>
         </div>
@@ -177,4 +177,12 @@ onBeforeUnmount(() => {
   removeChangeDateListener();
   destroyDatepickerElement();
 });
+
+function focus() {
+  datepickerStartEl.value?.focus();
+}
+
+defineExpose({
+  focus,
+});
 </script>

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