From 9508dbb89b051171e8bfa1c7b0156909c4b8d2c2 Mon Sep 17 00:00:00 2001
From: Vitalii Kulyk <vitaliy.kulik2313@gmail.com>
Date: Tue, 18 Mar 2025 11:50:43 +0200
Subject: [PATCH 1/5] feat: Enhance GroupsTable with ColumnValueInputWrapper
 for Input Handling

---
 .../components/ColumnValueInputWrapper.vue    | 72 +++++++++++++++++++
 adminforth/spa/src/components/GroupsTable.vue | 50 +++----------
 plugins/install-plugins.sh                    |  3 +-
 3 files changed, 83 insertions(+), 42 deletions(-)
 create mode 100644 adminforth/spa/src/components/ColumnValueInputWrapper.vue

diff --git a/adminforth/spa/src/components/ColumnValueInputWrapper.vue b/adminforth/spa/src/components/ColumnValueInputWrapper.vue
new file mode 100644
index 000000000..d28b25f2c
--- /dev/null
+++ b/adminforth/spa/src/components/ColumnValueInputWrapper.vue
@@ -0,0 +1,72 @@
+<template>
+  <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"
+      :type="column.isArray.itemType"
+      :value="arrayItemValue"
+      :currentValues="currentValues"
+      :mode="mode"
+      :columnOptions="columnOptions"
+      :deletable="!column.editReadonly"
+      @update:modelValue="setCurrentValue(column.name, $event, arrayItemIndex)"
+      @update:unmasked="$emit('update:unmasked', column.name)"
+      @update:inValidity="$emit('update:inValidity', { name: column.name, value: $event })"
+      @update:emptiness="$emit('update:emptiness', { name: column.name, value: $event })"
+      @delete="setCurrentValue(column.name, currentValues[column.name].filter((_, index) => index !== arrayItemIndex))"
+    />
+    <button
+      v-if="!column.editReadonly"
+      type="button"
+      @click="addArrayItem"
+      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}"
+    >
+      <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="$emit('update:unmasked', column.name)"
+    @update:inValidity="$emit('update:inValidity', { name: column.name, value: $event })"
+    @update:emptiness="$emit('update:emptiness', { name: column.name, value: $event })"
+  />
+</template>
+  
+<script setup lang="ts">
+  import { IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
+  import ColumnValueInput from "./ColumnValueInput.vue";
+  import { ref } from 'vue';
+  
+  const props = defineProps<{
+    source: 'create' | 'edit',
+    column: any,
+    currentValues: any,
+    mode: string,
+    columnOptions: any,
+    unmasked: any,
+    setCurrentValue: Function
+  }>();
+  
+  const emit = defineEmits(['update:unmasked', 'update:inValidity', 'update:emptiness', 'focus-last-input']);
+  
+  const arrayItemRefs = ref([]);
+  
+  function addArrayItem() {
+    props.setCurrentValue(props.column.name, props.currentValues[props.column.name], props.currentValues[props.column.name].length);
+    emit('focus-last-input', props.column.name);
+  }
+</script> 
\ No newline at end of file
diff --git a/adminforth/spa/src/components/GroupsTable.vue b/adminforth/spa/src/components/GroupsTable.vue
index b3c561a3a..c25f81589 100644
--- a/adminforth/spa/src/components/GroupsTable.vue
+++ b/adminforth/spa/src/components/GroupsTable.vue
@@ -42,50 +42,18 @@
             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"
-                :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))"
-              />
-              <button
-                v-if="!column.editReadonly"
-                type="button"
-                @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}"
-              >
-                <IconPlusOutline class="w-4 h-4 me-2"/>
-                {{ $t('Add') }}
-              </button>
-            </template>
-            <ColumnValueInput
-              v-else
+            <ColumnValueInputWrapper
               :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"
+              :setCurrentValue="setCurrentValue"
+              @update:unmasked="unmasked[$event] = !unmasked[$event]"
+              @update:inValidity="customComponentsInValidity[$event.name] = $event.value"
+              @update:emptiness="customComponentsEmptiness[$event.name] = $event.value"
+              @focus-last-input="focusOnLastInput"
             />
             <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>
@@ -98,10 +66,10 @@
 
 <script setup lang="ts">
   import { IconExclamationCircleSolid, IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
-  import ColumnValueInput from "@/components/ColumnValueInput.vue";
   import { Tooltip } from '@/afcl';
   import { ref, computed, watch, nextTick, type Ref } from 'vue';
   import { useI18n } from 'vue-i18n';
+  import ColumnValueInputWrapper from "@/components/ColumnValueInputWrapper.vue";
 
   const { t } = useI18n();
 
@@ -118,7 +86,7 @@
   }>();
 
   const arrayItemRefs = ref([]);
-  
+
   const customComponentsInValidity: Ref<Record<string, boolean>> = ref({});
   const customComponentsEmptiness: Ref<Record<string, boolean>> = ref({});
   const allColumnsHaveCustomComponent = computed(() => {
@@ -144,4 +112,4 @@
     emit('update:customComponentsEmptiness', newVal);
   });
 
-</script>
+</script>
\ No newline at end of file
diff --git a/plugins/install-plugins.sh b/plugins/install-plugins.sh
index 78e0e97b0..b1f6ec6b2 100644
--- a/plugins/install-plugins.sh
+++ b/plugins/install-plugins.sh
@@ -1,6 +1,7 @@
 PLUGINS="adminforth-audit-log adminforth-email-password-reset adminforth-foreign-inline-list \
 adminforth-i18n adminforth-import-export adminforth-text-complete adminforth-open-signup \
-adminforth-rich-editor adminforth-two-factors-auth adminforth-upload adminforth-oauth"
+adminforth-rich-editor adminforth-two-factors-auth adminforth-upload adminforth-oauth \
+adminforth-list-in-place-edit"
 
 # for each plugin
 for plugin in $PLUGINS; do

From 40fe9b946d960329d85cad7e951e79e19ba6a046 Mon Sep 17 00:00:00 2001
From: Vitalii Kulyk <vitaliy.kulik2313@gmail.com>
Date: Tue, 18 Mar 2025 12:19:04 +0200
Subject: [PATCH 2/5] fix: Add teleportToBody prop to ColumnValueInput for
 improved dropdown rendering

---
 adminforth/spa/src/components/ColumnValueInput.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/adminforth/spa/src/components/ColumnValueInput.vue b/adminforth/spa/src/components/ColumnValueInput.vue
index d327e9797..9996ba4cc 100644
--- a/adminforth/spa/src/components/ColumnValueInput.vue
+++ b/adminforth/spa/src/components/ColumnValueInput.vue
@@ -18,6 +18,7 @@
       ref="input"
       class="w-full"
       :options="columnOptions[column.name] || []"
+      teleportToBody
       :placeholder = "columnOptions[column.name]?.length ?$t('Select...'): $t('There are no options available')"
       :modelValue="value"
       :readonly="column.editReadonly && source === 'edit'"
@@ -28,6 +29,7 @@
       ref="input"
       class="w-full"
       :options="column.enum"
+      teleportToBody
       :modelValue="value"
       :readonly="column.editReadonly && source === 'edit'"
       @update:modelValue="$emit('update:modelValue', $event)"
@@ -37,6 +39,7 @@
       ref="input"
       class="w-full"
       :options="getBooleanOptions(column)"
+      teleportToBody
       :modelValue="value"
       :readonly="column.editReadonly && source === 'edit'"
       @update:modelValue="$emit('update:modelValue', $event)"

From d4887d7db2e0d0658d7d17b9ad48092fd1973a6b Mon Sep 17 00:00:00 2001
From: Vitalii Kulyk <vitaliy.kulik2313@gmail.com>
Date: Tue, 18 Mar 2025 12:45:26 +0200
Subject: [PATCH 3/5] fix: Update ColumnValueInputWrapper to focus on the last
 input after adding an array item

---
 .../spa/src/components/ColumnValueInputWrapper.vue       | 7 ++++---
 adminforth/spa/src/components/GroupsTable.vue            | 9 ---------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/adminforth/spa/src/components/ColumnValueInputWrapper.vue b/adminforth/spa/src/components/ColumnValueInputWrapper.vue
index d28b25f2c..a735f9e6a 100644
--- a/adminforth/spa/src/components/ColumnValueInputWrapper.vue
+++ b/adminforth/spa/src/components/ColumnValueInputWrapper.vue
@@ -49,7 +49,7 @@
 <script setup lang="ts">
   import { IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
   import ColumnValueInput from "./ColumnValueInput.vue";
-  import { ref } from 'vue';
+  import { ref, nextTick } from 'vue';
   
   const props = defineProps<{
     source: 'create' | 'edit',
@@ -65,8 +65,9 @@
   
   const arrayItemRefs = ref([]);
   
-  function addArrayItem() {
+  async function addArrayItem() {
     props.setCurrentValue(props.column.name, props.currentValues[props.column.name], props.currentValues[props.column.name].length);
-    emit('focus-last-input', props.column.name);
+    await nextTick();
+    arrayItemRefs.value[arrayItemRefs.value.length - 1].focus();
   }
 </script> 
\ No newline at end of file
diff --git a/adminforth/spa/src/components/GroupsTable.vue b/adminforth/spa/src/components/GroupsTable.vue
index c25f81589..252725bed 100644
--- a/adminforth/spa/src/components/GroupsTable.vue
+++ b/adminforth/spa/src/components/GroupsTable.vue
@@ -53,7 +53,6 @@
               @update:unmasked="unmasked[$event] = !unmasked[$event]"
               @update:inValidity="customComponentsInValidity[$event.name] = $event.value"
               @update:emptiness="customComponentsEmptiness[$event.name] = $event.value"
-              @focus-last-input="focusOnLastInput"
             />
             <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>
@@ -85,8 +84,6 @@
     columnOptions: any,
   }>();
 
-  const arrayItemRefs = ref([]);
-
   const customComponentsInValidity: Ref<Record<string, boolean>> = ref({});
   const customComponentsEmptiness: Ref<Record<string, boolean>> = ref({});
   const allColumnsHaveCustomComponent = computed(() => {
@@ -98,12 +95,6 @@
 
   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.value, (newVal) => {
     emit('update:customComponentsInValidity', newVal);
   });

From dbc216042829b6f4297a0fe70ccad746ebb07c42 Mon Sep 17 00:00:00 2001
From: Vitalii Kulyk <vitaliy.kulik2313@gmail.com>
Date: Tue, 18 Mar 2025 16:44:39 +0200
Subject: [PATCH 4/5] fix: Implement scroll handling for dropdown positioning
 when teleportToBody is enabled

---
 adminforth/spa/src/afcl/Select.vue | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/adminforth/spa/src/afcl/Select.vue b/adminforth/spa/src/afcl/Select.vue
index 7ab2998d6..c247f4c28 100644
--- a/adminforth/spa/src/afcl/Select.vue
+++ b/adminforth/spa/src/afcl/Select.vue
@@ -34,7 +34,7 @@
     </div>
     <teleport to="body" v-if="teleportToBody && showDropdown">
       <div ref="dropdownEl" :style="getDropdownPosition" :class="{'shadow-none': isTop}"
-        class="fixed z-50 w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700 
+        class="fixed z-[5] w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700 
           dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48">
         <div
           v-for="item in filteredItems"
@@ -202,6 +202,23 @@ watch(
   }
 );
 
+const handleScroll = () => {
+  if (showDropdown.value && inputEl.value) {
+    const rect = inputEl.value.getBoundingClientRect();
+    const style = {
+      left: `${rect.left}px`,
+      top: isTop.value && dropdownHeight.value 
+        ? `${rect.top - dropdownHeight.value - 8}px`
+        : `${rect.bottom + 8}px`,
+      width: `${rect.width}px`
+    };
+    
+    if (dropdownEl.value) {
+      Object.assign(dropdownEl.value.style, style);
+    }
+  }
+};
+
 onMounted(() => {
   updateFromProps();
 
@@ -214,7 +231,11 @@ onMounted(() => {
   });
 
   addClickListener();
-
+  
+  // Add scroll listeners if teleportToBody is true
+  if (props.teleportToBody) {
+    window.addEventListener('scroll', handleScroll, true);
+  }
 });
 
 const filteredItems = computed(() => {
@@ -268,6 +289,10 @@ const toogleItem = (item) => {
 
 onUnmounted(() => {
   removeClickListener();
+  // Remove scroll listeners if teleportToBody is true
+  if (props.teleportToBody) {
+    window.removeEventListener('scroll', handleScroll, true);
+  }
 });
 
 const getDropdownPosition = computed(() => {

From bf837ee4c03e4fcd15c4f2cf60bf4a05c93ab241 Mon Sep 17 00:00:00 2001
From: Vitalii Kulyk <vitaliy.kulik2313@gmail.com>
Date: Wed, 19 Mar 2025 10:58:26 +0200
Subject: [PATCH 5/5] fix: improve layout in ColumnValueInputWrapper component

---
 .../components/ColumnValueInputWrapper.vue    | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/adminforth/spa/src/components/ColumnValueInputWrapper.vue b/adminforth/spa/src/components/ColumnValueInputWrapper.vue
index a735f9e6a..15f20d0c1 100644
--- a/adminforth/spa/src/components/ColumnValueInputWrapper.vue
+++ b/adminforth/spa/src/components/ColumnValueInputWrapper.vue
@@ -1,24 +1,26 @@
 <template>
   <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"
-      :type="column.isArray.itemType"
-      :value="arrayItemValue"
-      :currentValues="currentValues"
-      :mode="mode"
-      :columnOptions="columnOptions"
-      :deletable="!column.editReadonly"
-      @update:modelValue="setCurrentValue(column.name, $event, arrayItemIndex)"
-      @update:unmasked="$emit('update:unmasked', column.name)"
-      @update:inValidity="$emit('update:inValidity', { name: column.name, value: $event })"
-      @update:emptiness="$emit('update:emptiness', { name: column.name, value: $event })"
-      @delete="setCurrentValue(column.name, currentValues[column.name].filter((_, index) => index !== arrayItemIndex))"
-    />
+    <div class="flex flex-col">
+      <ColumnValueInput
+        v-for="(arrayItemValue, arrayItemIndex) in currentValues[column.name]"
+        :key="`${column.name}-${arrayItemIndex}`"
+        ref="arrayItemRefs"
+        :class="{'mt-2': arrayItemIndex}"
+        :source="source"
+        :column="column"
+        :type="column.isArray.itemType"
+        :value="arrayItemValue"
+        :currentValues="currentValues"
+        :mode="mode"
+        :columnOptions="columnOptions"
+        :deletable="!column.editReadonly"
+        @update:modelValue="setCurrentValue(column.name, $event, arrayItemIndex)"
+        @update:unmasked="$emit('update:unmasked', column.name)"
+        @update:inValidity="$emit('update:inValidity', { name: column.name, value: $event })"
+        @update:emptiness="$emit('update:emptiness', { name: column.name, value: $event })"
+        @delete="setCurrentValue(column.name, currentValues[column.name].filter((_, index) => index !== arrayItemIndex))"
+      />
+    </div>
     <button
       v-if="!column.editReadonly"
       type="button"