feat: flexible list widget

src/frontend/fields/list-field.vue

@@ -20,12 +20,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { commonProps } from '../shared/helpers';
 import type { FieldSpec } from '../../types';
 import FlatList from './list/flat-list.vue';
 import FoldableList from './list/foldable-list.vue';
-import { useModelStore } from '../store';
+import { useModelStore, useSharedStore } from '../store';
 
 const props = defineProps({
   ...commonProps,
@@ -38,23 +38,112 @@ const fieldPath = computed((): string => {
 });
 
 const model = useModelStore();
+const shared = useSharedStore();
 
+let isAddingFlexibleItem = false;
 const addSet = () => {
+  if (!props.isReadOnly && shared.isTranslation && field.value.isFlexible) {
+    isAddingFlexibleItem = true;
+  }
   model.addListItem(fieldPath.value);
 };
 
+let isRemovingFlexibleItem = false;
+
 const removeSet = (index: number) => {
+  if (!props.isReadOnly && shared.isTranslation && field.value.isFlexible) {
+    isRemovingFlexibleItem = true;
+  }
   model.removeListItem(fieldPath.value, index);
 };
 
+const sourceItems = computed(() => {
+  return model.getSourceField(fieldPath.value, []) as Record<string, unknown>[];
+});
+
+const translationItems = computed(() => {
+  return model.getField(fieldPath.value, []) as Record<string, unknown>[];
+});
+
 const listItems = props.isReadOnly
-  ? ref(model.getSourceField(fieldPath.value, []) as unknown[])
-  : ref(model.getField(fieldPath.value, []) as unknown[]);
+  ? ref(buildReadOnlyListItems())
+  : ref([...translationItems.value]);
+
+function buildReadOnlyListItems(): Record<string, unknown>[] {
+  const baseItems = [...sourceItems.value];
 
-model.$subscribe(() => {
+  if (!props.isReadOnly) return baseItems;
+  if (!shared.isTranslation) return baseItems;
+  if (!field.value.isFlexible) return baseItems;
+
+  const translationLength = translationItems.value.length;
+  const sourceLength = baseItems.length;
+
+  if (translationLength > sourceLength) {
+    const placeholdersToAdd = translationLength - sourceLength;
+    const placeholders = Array.from({ length: placeholdersToAdd }, () => ({}));
+    return [...baseItems, ...placeholders];
+  }
+  if (translationLength < sourceLength) {
+    return baseItems.slice(0, translationLength);
+  }
+
+  return baseItems;
+}
+
+const syncFlexibleListLength = () => {
   if (props.isReadOnly) return;
+  if (!shared.isTranslation) return;
+  if (field.value.isFlexible) return;
+  if (isRemovingFlexibleItem) {
+    isRemovingFlexibleItem = false;
+    return;
+  }
+  if (isAddingFlexibleItem) {
+    isAddingFlexibleItem = false;
+    return;
+  }
 
-  const fresh = model.getField(fieldPath.value, []) as unknown[];
-  listItems.value = fresh;
-});
+  const desiredLength = sourceItems.value.length;
+  const currentItems = model.getField(fieldPath.value, []) as Record<string, unknown>[];
+
+  if (desiredLength === currentItems.length) return;
+
+  const changedItems = [...currentItems];
+
+  if (desiredLength > changedItems.length) {
+    for (let index = changedItems.length; index < desiredLength; index += 1) {
+      changedItems.push({});
+    }
+  } else {
+    changedItems.length = desiredLength;
+  }
+
+  model.setField(fieldPath.value, changedItems);
+};
+
+const refreshListItems = () => {
+  if (props.isReadOnly) {
+    listItems.value = buildReadOnlyListItems();
+    return;
+  }
+  listItems.value = model.getField(fieldPath.value, []) as Record<string, unknown>[];
+};
+
+if (!props.isReadOnly) {
+  syncFlexibleListLength();
+}
+
+refreshListItems();
+
+watch(
+  [sourceItems, translationItems],
+  () => {
+    if (!props.isReadOnly) {
+      syncFlexibleListLength();
+    }
+    refreshListItems();
+  },
+  { deep: true },
+);
 </script>

src/frontend/fields/list/flat-list.vue

@@ -1,28 +1,51 @@
 <template>
-  <div class="ml-8">
+  <div
+    :class="[
+      'ml-8',
+      {
+        subgrid: !isNested,
+        'grid grid-cols-1': isNested,
+      },
+    ]"
+    :style="!isNested ? { gridRow: `span ${containerSpan}` } : undefined"
+  >
     <ul
       v-for="(_listItem, index) in listItems"
       :key="index"
       role="listitem"
-      class="relative my-2 grid gap-y-8 bg-gray-100 p-8"
+      :class="[
+        'subgrid relative my-2 gap-y-8',
+        isEmpty(index) ? '' : 'bg-gray-100 p-8',
+        { 'mr-2': shared.showSourceColumn && field.isFlexible },
+      ]"
+      :style="{ gridRow: `span ${totalSpan}` }"
     >
-      <div
-        v-if="canMutate"
-        class="absolute right-0 mr-3 cursor-pointer text-gray-500"
-        @click="emit('removeSet', index)"
-      >
-        <Icon name="trash" class="h-10 w-10" />
-      </div>
+      <template v-if="!isEmpty(index)">
+        <div
+          v-if="canMutate"
+          class="absolute right-0 mr-3 cursor-pointer text-gray-500"
+          @click="emit('removeSet', index)"
+        >
+          <Icon
+            :name="field.isFlexible && canMutate ? 'minus' : 'trash'"
+            :class="field.isFlexible && canMutate ? 'size-5' : 'h-auto w-auto'"
+          />
+        </div>
 
-      <li v-for="(item, i) in fields" :key="item.name + `${i.toString()}`">
-        <component
-          :is="store.picker(item.widget)"
-          :field="item"
-          :is-read-only="props.isReadOnly"
-          :root-path="`${fieldPath}.${index.toString()}`"
-          :is-nested="true"
-        />
-      </li>
+        <li
+          v-for="(item, i) in fields"
+          :key="item.name + `${i.toString()}`"
+          :style="{ gridRow: `span ${getFieldSpan(item)}` }"
+        >
+          <component
+            :is="store.picker(item.widget)"
+            :field="item"
+            :is-read-only="props.isReadOnly"
+            :root-path="`${fieldPath}.${index.toString()}`"
+            :is-nested="true"
+          />
+        </li>
+      </template>
     </ul>
     <div v-if="canMutate" class="mt-8 flex flex-row items-center gap-4">
       <AddItemButton :label="field.label" @add="emit('addSet')" />
@@ -64,6 +87,11 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  isNested: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['addSet', 'removeSet']);
@@ -75,7 +103,8 @@ const shared = useSharedStore();
 const canMutate = computed(() => {
   if (props.isReadOnly) return false;
 
-  return !shared.isTranslation;
+  // Allow mutations if not in translation mode OR if field is flexible
+  return !shared.isTranslation || field.value.isFlexible === true;
 });
 
 const showEmptyListWarning = (): boolean => {
@@ -88,4 +117,25 @@ const showEmptyListWarning = (): boolean => {
   }
   return false;
 };
+
+const isEmpty = (index: number): boolean => {
+  if (!props.isReadOnly) return false;
+  const item = props.listItems[index] as Record<string, unknown>;
+  return Object.keys(item).length === 0;
+};
+
+const getFieldSpan = (field: FieldSpec): number => {
+  if (field.widget === 'object' && field.fields) {
+    return Object.keys(field.fields).length;
+  }
+  return 1;
+};
+
+const totalSpan = computed(() => {
+  return fields.reduce((acc, field) => acc + getFieldSpan(field), 0);
+});
+
+const containerSpan = computed(() => {
+  return props.listItems.length * totalSpan.value + 1;
+});
 </script>