add nova

nova/resources/js/components/Repeater/RepeaterRow.vue

@@ -0,0 +1,116 @@
+<template>
+  <div
+    class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded divide-y divide-gray-200 dark:divide-gray-700"
+  >
+    <div
+      class="flex items-center bg-gray-50 dark:bg-gray-800 py-2 px-3 rounded-t"
+    >
+      <div class="flex items-center space-x-2">
+        <IconButton
+          v-if="sortable"
+          dusk="row-move-up-button"
+          @click="$emit('move-up', index)"
+          iconType="arrow-up"
+          solid
+          small
+        />
+        <IconButton
+          v-if="sortable"
+          dusk="row-move-down-button"
+          @click="$emit('move-down', index)"
+          iconType="arrow-down"
+          solid
+          small
+        />
+      </div>
+
+      <IconButton
+        dusk="row-delete-button"
+        @click.stop.prevent="beforeRemove"
+        class="ml-auto"
+        iconType="trash"
+        solid
+        small
+      />
+    </div>
+
+    <div
+      class="grid grid-cols-full divide-y divide-gray-100 dark:divide-gray-700"
+    >
+      <div v-for="(field, fieldIndex) in item.fields">
+        <component
+          :ref="fieldRefs[`fields.${field.attribute}`]"
+          :is="'form-' + field.component"
+          :field="field"
+          :index="fieldIndex"
+          :errors="errors"
+          :show-help-text="true"
+          @file-deleted="$emit('file-deleted')"
+          :nested="true"
+          :resource-name="resourceName"
+          :resource-id="resourceId"
+          :shown-via-new-relation-modal="shownViaNewRelationModal"
+          :via-resource="viaResource"
+          :via-resource-id="viaResourceId"
+          :via-relationship="viaRelationship"
+        />
+        <!--        :related-resource-name="relatedResourceName"-->
+        <!--        :related-resource-id="relatedResourceId"-->
+        <!--        syncEndpoint,-->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, provide, computed, inject } from 'vue'
+import fromPairs from 'lodash/fromPairs'
+import first from 'lodash/first'
+import { useLocalization } from '@/composables/useLocalization'
+
+const emit = defineEmits(['click', 'move-up', 'move-down', 'file-deleted'])
+const { __ } = useLocalization()
+
+const props = defineProps({
+  field: { type: Object, required: true },
+  index: { type: Number, required: true },
+  item: { type: Object, required: true },
+  errors: { type: Object, required: true },
+  sortable: { type: Boolean, required: false },
+  viaParent: { type: String },
+})
+
+provide(
+  'viaParent',
+  computed(() => props.viaParent)
+)
+provide(
+  'index',
+  computed(() => props.index)
+)
+
+const fieldKeys = props.item.fields.map(f => f.attribute)
+const fieldRefs = fromPairs(fieldKeys.map(k => [`fields.${k}`, ref(null)]))
+
+const resourceName = inject('resourceName')
+const resourceId = inject('resourceId')
+const shownViaNewRelationModal = inject('shownViaNewRelationModal')
+const viaResource = inject('viaResource')
+const viaResourceId = inject('viaResourceId')
+const viaRelationship = inject('viaRelationship')
+
+const beforeRemove = () =>
+  props.item.confirmBeforeRemoval
+    ? confirm(__('Are you sure you want to remove this item?'))
+      ? remove()
+      : null
+    : remove()
+
+const remove = () => {
+  Object.keys(fieldRefs).forEach(async k => {
+    // await fieldRefs[k]?.value[0]?.beforeRemove?()
+  })
+
+  emit('click', props.index)
+}
+</script>