nuxt-ui-tools 0.1.2 → 1.0.0

package/dist/runtime/form/fields/array-list/component.vue

@@ -1,213 +1,137 @@
 <script setup>
 import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
 import USelect from "@nuxt/ui/components/Select.vue";
 import { computed, defineAsyncComponent, ref, watch } from "vue";
-import FormFieldRenderer from "../../components/renderer/FormFieldRenderer.vue";
+import FormFieldRenderer from "../../components/renderer/form-field-renderer.vue";
+import FormFieldStatus from "../../components/renderer/form-field-status.vue";
+import { useResolvedFieldProps } from "../../composables/use-field-control";
 import { useFormContainerLayout } from "../../composables/use-form-layout";
-import { useFormRuntimeContext } from "../../composables/use-form-runtime";
-import { useFormUi } from "../../composables/use-form-ui";
-import { syncFormArrayItems } from "../../utils/array";
-import { buildInitialFormFieldsState } from "../../utils/state";
+import { invokeFormFunction } from "../../utils/predicate";
 import { resolveFormText } from "../../utils/text";
 import { mergeFormUiClass } from "../../utils/ui";
+import { useFormArrayItems } from "./use-array-items";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
 });
-const VueDraggable = defineAsyncComponent(
-  () => import("vue-draggable-plus").then(({ VueDraggable: draggableComponent }) => draggableComponent)
+const fieldProps = useResolvedFieldProps(
+  () => props.field,
+  () => props.path
 );
-const form = useFormRuntimeContext();
-const formUi = useFormUi();
-const activeIndex = ref(0);
-const itemKeys = /* @__PURE__ */ new WeakMap();
-let nextItemKey = 0;
-const items = computed(() => {
-  const value = form.getValue(props.path);
-  return Array.isArray(value) ? value.filter(isFormObject) : [];
+const VueDraggable = defineAsyncComponent(async () => {
+  const { VueDraggable: draggableComponent } = await import("vue-draggable-plus");
+  return draggableComponent;
 });
+const array = useFormArrayItems(
+  () => props.field,
+  () => props.path
+);
+const {
+  addItemLabel,
+  canAdd,
+  canDelete,
+  customActionVisible,
+  description,
+  emptyLabel,
+  fieldsForItem,
+  form,
+  formUi,
+  isDraggable,
+  itemHeading,
+  itemLabel,
+  itemPath,
+  itemRenderKey,
+  items,
+  runCustomAction,
+  t,
+  title,
+  updateItems,
+  updateVariant,
+  variantItems,
+  variantValue
+} = array;
+const activeIndex = ref(0);
+const tabTransitionDirection = ref("forward");
 const dragItems = computed({
   get: () => [...items.value],
-  set: updateItems
+  set: updateDraggedItems
 });
 const containerLayout = useFormContainerLayout({
-  layout: () => props.field.layout,
-  formLayout: form.currentLayout
+  formLayout: form.currentLayout,
+  layout: () => props.field.layout
 });
-const title = computed(() => resolveFormText(props.field.label));
-const description = computed(() => resolveFormText(props.field.description));
-const addItemLabel = computed(() => resolveFormText(props.field.addItemLabel) ?? "Add item");
-const emptyLabel = computed(() => resolveFormText(props.field.emptyLabel) ?? "No items yet");
-const itemLabel = computed(() => resolveFormText(props.field.itemLabel) ?? "Item");
-const canAdd = computed(() => resolveAction(props.field.actions?.addItem, -1));
-const isDraggable = computed(
-  () => props.field.type === "array-tabs" ? false : props.field.draggable === true
-);
 const isTabsMode = computed(
-  () => props.field.type === "array-tabs" || props.field.type === "array-variant" && props.field.displayMode === "tabs"
-);
-const variantItems = computed(
-  () => props.field.type === "array-variant" ? props.field.variants.map((variant) => ({
-    label: resolveFormText(variant.label) ?? String(variant.key),
-    value: variant.key
-  })) : []
+  () => props.field.type === "array-tabs" || props.field.type === "array-variant" && fieldProps.value.displayMode === "tabs"
 );
+const ui = computed(() => formUi.ui.value.arrayList?.ui);
 watch(items, (value) => {
-  if (activeIndex.value >= value.length) activeIndex.value = Math.max(0, value.length - 1);
+  if (activeIndex.value >= value.length) {
+    activeIndex.value = Math.max(0, value.length - 1);
+  }
 });
 function addItem() {
-  const index = items.value.length;
-  const variant = props.field.type === "array-variant" ? props.field.variants[0] : void 0;
-  const fields = variant?.fields ?? fieldsForItem({});
-  let item = buildInitialFormFieldsState(fields, form.context);
-  if (variant && props.field.type === "array-variant") item[props.field.variantKey] = variant.key;
-  item = applyVirtualFields(item, index);
-  if (props.field.transformOnCreate)
-    item = props.field.transformOnCreate(item, index, actionParams(index).deps);
-  updateItems([...items.value, item]);
-  activeIndex.value = index;
+  tabTransitionDirection.value = "forward";
+  activeIndex.value = array.addItem();
 }
 function removeItem(index) {
-  const message = typeof props.field.confirmDelete === "string" || typeof props.field.confirmDelete === "function" ? resolveFormText(props.field.confirmDelete) : "Remove this item?";
-  if (props.field.confirmDelete && !window.confirm(message)) return;
-  updateItems(items.value.filter((_, itemIndex) => itemIndex !== index));
-  if (activeIndex.value >= index) activeIndex.value = Math.max(0, activeIndex.value - 1);
-}
-function fieldsForItem(item) {
-  const field = props.field;
-  if (field.type !== "array-variant") return field.fields;
-  const variant = field.variants.find((candidate) => candidate.key === item[field.variantKey]);
-  return variant?.fields ?? [];
-}
-function applyVirtualFields(item, index) {
-  const field = props.field;
-  const fields = field.type === "array-variant" ? field.variants.find((variant) => variant.key === item[field.variantKey])?.virtualFields : field.virtualFields;
-  if (!fields) return item;
-  for (const [key, resolver] of Object.entries(fields)) item[key] = resolver(index);
-  return item;
-}
-function itemHeading(item, index) {
-  return resolveFormText(props.field.headerTemplate?.(item, index, actionParams(index).deps)) ?? `${itemLabel.value} ${index + 1}`;
+  const currentActiveIndex = activeIndex.value;
+  const hasNextItem = index + 1 < items.value.length;
+  if (currentActiveIndex === index) {
+    tabTransitionDirection.value = hasNextItem ? "forward" : "backward";
+  }
+  if (!array.removeItem(index)) {
+    return;
+  }
+  if (currentActiveIndex < index) {
+    return;
+  }
+  if (currentActiveIndex > index) {
+    activeIndex.value = currentActiveIndex - 1;
+    return;
+  }
+  activeIndex.value = hasNextItem ? index : Math.max(0, index - 1);
 }
 function selectTab(index) {
+  if (index === activeIndex.value) {
+    return;
+  }
+  tabTransitionDirection.value = index > activeIndex.value ? "forward" : "backward";
   activeIndex.value = index;
 }
-function resolveAction(condition, index) {
-  if (typeof condition === "boolean") return condition;
-  if (typeof condition !== "function") return true;
-  const item = items.value[index] ?? {};
-  return condition(actionParams(index));
-}
-function updateVariant(item, index, value) {
-  if (props.field.type !== "array-variant") return;
-  const variant = props.field.variants.find((candidate) => candidate.key === value);
-  if (!variant) return;
-  let next = buildInitialFormFieldsState(variant.fields, form.context);
-  next[props.field.variantKey] = variant.key;
-  next = applyVirtualFields(next, index);
-  if (props.field.transformOnCreate)
-    next = props.field.transformOnCreate(next, index, actionParams(index).deps);
-  const nextItems = [...items.value];
-  nextItems[index] = next;
-  updateItems(nextItems);
-}
-function variantValue(item) {
-  const field = props.field;
-  if (field.type !== "array-variant" || !item) return void 0;
-  const value = item[field.variantKey];
-  return typeof value === "string" || typeof value === "number" ? value : void 0;
-}
-async function runCustomAction(index, actionIndex) {
-  const action = props.field.actions?.custom?.[actionIndex];
-  const item = items.value[index];
-  if (!action || !item) return;
-  await action.action(actionParams(index));
-}
-function customActionVisible(index, actionIndex) {
-  const action = props.field.actions?.custom?.[actionIndex];
-  const item = items.value[index];
-  if (!action || !item) return false;
-  return action.condition?.(actionParams(index)) ?? true;
-}
-function moveItem(index, direction) {
-  const nextIndex = index + direction;
-  if (nextIndex < 0 || nextIndex >= items.value.length) return;
-  const nextItems = [...items.value];
-  const current = nextItems[index];
-  const next = nextItems[nextIndex];
-  if (!current || !next) return;
-  nextItems[index] = next;
-  nextItems[nextIndex] = current;
-  updateItems(nextItems);
+function tabActionRenderer(item, index) {
+  if (props.field.type !== "array-tabs" || !props.field.tabAction) {
+    return null;
+  }
+  const content = props.field.tabAction(item, index, {
+    ...array.actionParams(index),
+    setActiveTab: selectTab
+  });
+  if (content === void 0 || content === null) {
+    return null;
+  }
+  return () => invokeFormFunction(content) ?? content;
 }
-function updateItems(value) {
-  const current = form.getValue(props.path);
-  if (!syncFormArrayItems(current, value)) {
-    form.setValue(
-      props.path,
-      value.map((item, index) => applyVirtualFields(item, index))
-    );
+function updateDraggedItems(value) {
+  const activeItem = items.value[activeIndex.value];
+  updateItems(value);
+  if (!activeItem) {
     return;
   }
-  if (Array.isArray(current))
-    current.forEach((item, index) => {
-      if (isFormObject(item)) applyVirtualFields(item, index);
-    });
-}
-function itemPath(index) {
-  return [...props.path, String(index)];
-}
-function itemKey(item) {
-  const existing = itemKeys.get(item);
-  if (existing) return existing;
-  nextItemKey += 1;
-  const key = `array-item-${nextItemKey}`;
-  itemKeys.set(item, key);
-  return key;
-}
-function itemRenderKey(item, index) {
-  return `${itemKey(item)}:${index}`;
-}
-function actionParams(index) {
-  const item = items.value[index] ?? {};
-  const callback = form.getFieldCallbackParams(props.path, props.field);
-  return {
-    index,
-    item,
-    items: items.value,
-    ctx: callback.ctx,
-    deps: callback.deps,
-    getValue: (key) => form.getValue([...itemPath(index), ...key.split(".")]),
-    setValue: (key, value) => form.setValue([...itemPath(index), ...key.split(".")], value),
-    getOptions: (key) => form.getFieldApi([...itemPath(index), ...key.split(".")]).options.get()
-  };
-}
-function isFormObject(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
+  const nextActiveIndex = value.indexOf(activeItem);
+  if (nextActiveIndex !== -1) {
+    activeIndex.value = nextActiveIndex;
+  }
 }
 </script>
 
 <template>
-  <section :class="mergeFormUiClass('grid gap-3', formUi.ui.value.arrayList?.ui?.root)">
-    <div
-      v-if="title || description"
-      :class="mergeFormUiClass('grid gap-1', formUi.ui.value.arrayList?.ui?.header)"
-    >
-      <h3
-        v-if="title"
-        :class="
-  mergeFormUiClass(
-    'text-sm font-medium text-highlighted',
-    formUi.ui.value.arrayList?.ui?.title
-  )
-"
-      >
+  <section :class="mergeFormUiClass('grid gap-3', ui?.root)">
+    <div v-if="title || description" :class="mergeFormUiClass('grid gap-1', ui?.header)">
+      <h3 v-if="title" :class="mergeFormUiClass('text-sm font-medium text-highlighted', ui?.title)">
         {{ title }}
       </h3>
-      <p
-        v-if="description"
-        :class="mergeFormUiClass('text-sm text-muted', formUi.ui.value.arrayList?.ui?.description)"
-      >
+      <p v-if="description" :class="mergeFormUiClass('text-sm text-muted', ui?.description)">
         {{ description }}
       </p>
     </div>
@@ -217,118 +141,137 @@ function isFormObject(value) {
       :class="
   mergeFormUiClass(
     'rounded-lg border border-dashed border-default bg-elevated/35 p-5 text-center text-sm text-muted',
-    formUi.ui.value.arrayList?.ui?.empty
+    ui?.empty
   )
 "
     >
       {{ emptyLabel }}
     </div>
 
-    <div v-else-if="isTabsMode" class="grid gap-3">
-      <div
-        :class="
-  mergeFormUiClass(
-    'flex gap-1 overflow-x-auto rounded-lg bg-elevated p-1',
-    formUi.ui.value.arrayList?.ui?.tabs
-  )
-"
-      >
-        <UButton
-          v-for="(item, index) in items"
-          :key="itemRenderKey(item, index)"
-          size="xs"
-          :color="activeIndex === index ? 'primary' : 'neutral'"
-          :variant="activeIndex === index ? 'solid' : 'ghost'"
-          :class="mergeFormUiClass('shrink-0', formUi.ui.value.arrayList?.ui?.tab)"
-          @click="selectTab(index)"
-        >
-          {{ itemHeading(items[index] ?? {}, index) }}
-        </UButton>
-      </div>
-
-      <div
-        :class="[
-  mergeFormUiClass(
-    'grid rounded-lg border border-default bg-default',
-    formUi.ui.value.arrayList?.ui?.item
-  ),
-  field.compact ? 'gap-3 p-3' : 'gap-4 p-4'
-]"
-      >
-        <div
-          :class="
-  mergeFormUiClass(
-    'flex items-center justify-between gap-3',
-    formUi.ui.value.arrayList?.ui?.itemHeader
-  )
+    <div
+      v-else-if="isTabsMode"
+      :class="
+  mergeFormUiClass('overflow-hidden rounded-lg border border-default bg-default', ui?.item)
 "
+    >
+      <div class="flex min-w-0 items-stretch border-b border-default bg-elevated/25">
+        <VueDraggable
+          v-model="dragItems"
+          tag="div"
+          role="tablist"
+          :aria-label="title ?? itemLabel"
+          :disabled="!isDraggable"
+          handle=".array-tab-drag-handle"
+          :animation="150"
+          :class="mergeFormUiClass('flex min-w-0 flex-1 items-stretch overflow-x-auto', ui?.tabs)"
         >
-          <span
-            :class="
-  mergeFormUiClass(
-    'text-sm font-medium text-highlighted',
-    formUi.ui.value.arrayList?.ui?.itemTitle
-  )
-"
+          <FormFieldStatus
+            v-for="(item, index) in items"
+            :key="itemRenderKey(item, index)"
+            v-slot="{ invalid }"
+            :path="itemPath(index)"
           >
-            {{ itemHeading(items[activeIndex] ?? {}, activeIndex) }}
-          </span>
-          <div
-            :class="
+            <div
+              :class="
   mergeFormUiClass(
-    'flex items-center gap-1',
-    formUi.ui.value.arrayList?.ui?.itemActions
+    [
+      'relative flex min-h-11 shrink-0 items-stretch transition-colors',
+      activeIndex === index ? 'bg-default text-highlighted' : 'text-muted hover:bg-elevated/60 hover:text-default'
+    ].join(' '),
+    ui?.tab
   )
 "
-          >
-            <UButton
-              v-if="resolveAction(field.actions?.moveUp, activeIndex)"
-              icon="i-lucide-arrow-up"
-              color="neutral"
-              variant="ghost"
-              size="xs"
-              :class="formUi.ui.value.arrayList?.ui?.action"
-              :disabled="activeIndex === 0"
-              aria-label="Move item up"
-              @click="moveItem(activeIndex, -1)"
-            />
-            <UButton
-              v-if="resolveAction(field.actions?.moveDown, activeIndex)"
-              icon="i-lucide-arrow-down"
-              color="neutral"
-              variant="ghost"
-              size="xs"
-              :class="formUi.ui.value.arrayList?.ui?.action"
-              :disabled="activeIndex === items.length - 1"
-              aria-label="Move item down"
-              @click="moveItem(activeIndex, 1)"
-            />
-            <UButton
-              v-if="resolveAction(field.actions?.deleteItem, activeIndex)"
-              icon="i-lucide-trash-2"
-              color="neutral"
-              variant="ghost"
-              size="xs"
-              :class="formUi.ui.value.arrayList?.ui?.action"
-              aria-label="Remove item"
-              @click="removeItem(activeIndex)"
-            />
-          </div>
+            >
+              <button
+                type="button"
+                role="tab"
+                :aria-selected="activeIndex === index"
+                class="array-tab-drag-handle flex min-w-0 items-center gap-2 px-3 py-2.5 text-sm font-medium"
+                :class="[
+  isDraggable ? 'cursor-grab active:cursor-grabbing' : 'cursor-pointer',
+  invalid ? 'text-error' : ''
+]"
+                @click="selectTab(index)"
+              >
+                <UIcon
+                  v-if="isDraggable"
+                  name="i-lucide-grip-vertical"
+                  class="size-3.5 shrink-0 text-dimmed"
+                  aria-hidden="true"
+                />
+                <span class="max-w-48 truncate">{{ itemHeading(item, index) }}</span>
+              </button>
+
+              <div class="flex items-center gap-0.5 pr-1">
+                <component
+                  :is="tabActionRenderer(item, index)"
+                  v-if="activeIndex === index && tabActionRenderer(item, index)"
+                  data-form-array-tab-action=""
+                />
+                <UButton
+                  v-for="(action, actionIndex) in field.actions?.custom ?? []"
+                  v-show="customActionVisible(index, actionIndex)"
+                  :key="actionIndex"
+                  type="button"
+                  :icon="action.icon"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  :class="ui?.action"
+                  @click.stop="runCustomAction(index, actionIndex)"
+                >
+                  {{ action.icon ? void 0 : resolveFormText(action.label) }}
+                </UButton>
+                <UButton
+                  v-if="canDelete(index)"
+                  type="button"
+                  icon="i-lucide-trash-2"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  :class="ui?.action"
+                  :aria-label="t('form.fields.array.removeItem')"
+                  @click.stop="removeItem(index)"
+                />
+              </div>
+
+              <span
+                class="absolute inset-x-2 bottom-0 h-0.5 rounded-full transition-opacity"
+                :class="activeIndex === index ? 'bg-primary opacity-100' : 'opacity-0'"
+                aria-hidden="true"
+              />
+            </div>
+          </FormFieldStatus>
+        </VueDraggable>
+        <div v-if="canAdd" class="flex shrink-0 items-center border-l border-default px-1.5">
+          <UButton
+            type="button"
+            icon="i-lucide-plus"
+            color="neutral"
+            variant="ghost"
+            :size="formUi.controlSize.value"
+            :aria-label="addItemLabel"
+            :title="addItemLabel"
+            @click="addItem"
+          />
         </div>
+      </div>
 
+      <div :class="fieldProps.compact ? 'grid gap-3 p-3' : 'grid gap-4 p-4'">
         <USelect
           v-if="field.type === 'array-variant'"
           :model-value="variantValue(items[activeIndex])"
           :items="variantItems"
           value-key="value"
           :size="formUi.controlSize.value"
-          :class="mergeFormUiClass('w-full max-w-xs', formUi.ui.value.arrayList?.ui?.variant)"
-          @update:model-value="updateVariant(items[activeIndex] ?? {}, activeIndex, $event)"
+          :class="mergeFormUiClass('w-full max-w-xs', ui?.variant)"
+          @update:model-value="updateVariant(activeIndex, $event)"
         />
 
         <div
-          :class="mergeFormUiClass('grid', formUi.ui.value.arrayList?.ui?.fields)"
+          :class="mergeFormUiClass('grid', ui?.fields)"
           :style="containerLayout.style.value"
+          :data-form-array-panel="activeIndex"
         >
           <FormFieldRenderer
             v-for="child in fieldsForItem(items[activeIndex] ?? {})"
@@ -344,7 +287,7 @@ function isFormObject(value) {
       :is="isDraggable ? VueDraggable : 'div'"
       v-else
       v-model="dragItems"
-      :class="mergeFormUiClass('grid gap-3', formUi.ui.value.arrayList?.ui?.list)"
+      :class="mergeFormUiClass('grid gap-3', ui?.list)"
       handle=".array-drag-handle"
       :animation="150"
     >
@@ -352,83 +295,35 @@ function isFormObject(value) {
         v-for="(item, index) in items"
         :key="itemRenderKey(item, index)"
         :class="[
-  mergeFormUiClass(
-    'grid rounded-lg border border-default bg-default',
-    formUi.ui.value.arrayList?.ui?.item
-  ),
-  field.compact ? 'gap-3 p-3' : 'gap-4 p-4'
+  mergeFormUiClass('grid rounded-lg border border-default bg-default', ui?.item),
+  fieldProps.compact ? 'gap-3 p-3' : 'gap-4 p-4'
 ]"
       >
-        <div
-          :class="
-  mergeFormUiClass(
-    'flex items-center justify-between gap-3',
-    formUi.ui.value.arrayList?.ui?.itemHeader
-  )
-"
-        >
+        <div :class="mergeFormUiClass('flex items-center justify-between gap-3', ui?.itemHeader)">
           <span
-            :class="
-  mergeFormUiClass(
-    'text-sm font-medium text-highlighted',
-    formUi.ui.value.arrayList?.ui?.itemTitle
-  )
-"
+            :class="mergeFormUiClass('text-sm font-medium text-highlighted', ui?.itemTitle)"
+            :data-form-array-heading="index"
           >
             {{ itemHeading(items[index] ?? {}, index) }}
           </span>
-          <div
-            :class="
-  mergeFormUiClass(
-    'flex items-center gap-1',
-    formUi.ui.value.arrayList?.ui?.itemActions
-  )
-"
-          >
+          <div :class="mergeFormUiClass('flex items-center gap-1', ui?.itemActions)">
             <UButton
               v-if="isDraggable"
               icon="i-lucide-grip-vertical"
               color="neutral"
               variant="ghost"
               size="xs"
-              :class="
-  mergeFormUiClass(
-    'array-drag-handle cursor-grab',
-    formUi.ui.value.arrayList?.ui?.action
-  )
-"
-              aria-label="Drag item"
-            />
-            <UButton
-              v-if="resolveAction(field.actions?.moveUp, index)"
-              icon="i-lucide-arrow-up"
-              color="neutral"
-              variant="ghost"
-              size="xs"
-              :class="formUi.ui.value.arrayList?.ui?.action"
-              :disabled="index === 0"
-              aria-label="Move item up"
-              @click="moveItem(index, -1)"
-            />
-            <UButton
-              v-if="resolveAction(field.actions?.moveDown, index)"
-              icon="i-lucide-arrow-down"
-              color="neutral"
-              variant="ghost"
-              size="xs"
-              :class="formUi.ui.value.arrayList?.ui?.action"
-              :disabled="index === items.length - 1"
-              aria-label="Move item down"
-              @click="moveItem(index, 1)"
+              :class="mergeFormUiClass('array-drag-handle cursor-grab', ui?.action)"
+              :aria-label="t('form.fields.array.dragItem')"
             />
             <UButton
-              v-if="resolveAction(field.actions?.deleteItem, index)"
+              v-if="canDelete(index)"
               icon="i-lucide-trash-2"
               color="neutral"
               variant="ghost"
               size="xs"
-              :class="formUi.ui.value.arrayList?.ui?.action"
-              aria-label="Remove item"
+              :class="ui?.action"
+              :aria-label="t('form.fields.array.removeItem')"
               @click="removeItem(index)"
             />
             <UButton
@@ -439,7 +334,7 @@ function isFormObject(value) {
               color="neutral"
               variant="ghost"
               size="xs"
-              :class="formUi.ui.value.arrayList?.ui?.action"
+              :class="ui?.action"
               @click="runCustomAction(index, actionIndex)"
             >
               {{ resolveFormText(action.label) }}
@@ -453,14 +348,11 @@ function isFormObject(value) {
           :items="variantItems"
           value-key="value"
           :size="formUi.controlSize.value"
-          :class="mergeFormUiClass('w-full max-w-xs', formUi.ui.value.arrayList?.ui?.variant)"
-          @update:model-value="updateVariant(items[index] ?? {}, index, $event)"
+          :class="mergeFormUiClass('w-full max-w-xs', ui?.variant)"
+          @update:model-value="updateVariant(index, $event)"
         />
 
-        <div
-          :class="mergeFormUiClass('grid', formUi.ui.value.arrayList?.ui?.fields)"
-          :style="containerLayout.style.value"
-        >
+        <div :class="mergeFormUiClass('grid', ui?.fields)" :style="containerLayout.style.value">
           <FormFieldRenderer
             v-for="child in fieldsForItem(items[index] ?? {})"
             :key="child.key"
@@ -472,11 +364,12 @@ function isFormObject(value) {
     </component>
 
     <UButton
-      v-if="canAdd"
+      v-if="canAdd && (!isTabsMode || items.length === 0)"
       icon="i-lucide-plus"
-      variant="soft"
+      color="neutral"
+      variant="outline"
       :size="formUi.controlSize.value"
-      :class="mergeFormUiClass('justify-self-start', formUi.ui.value.arrayList?.ui?.add)"
+      :class="mergeFormUiClass('justify-self-start', ui?.add)"
       @click="addItem"
     >
       {{ addItemLabel }}