refac: split useSchemaBuilder & SchemaDeleteControls

web/src/components/SchemaDeleteControls.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { nextTick, ref, watch } from 'vue'
+import BuilderMoreMenu from '@/components/BuilderMoreMenu.vue'
+import DeleteTypeDialog from '@/components/DeleteTypeDialog.vue'
+import type { useSchemaDelete } from '@/composables/useSchemaDelete'
+import { TOPBAR_ACTION_ID } from '@/lib/uiSlots'
+
+const props = defineProps<{
+	remove: ReturnType<typeof useSchemaDelete>
+	disabled: boolean
+	mobile: boolean
+}>()
+
+const moreMenu = ref<InstanceType<typeof BuilderMoreMenu> | null>(null)
+
+watch(
+	() => props.remove.stage.value,
+	async (stage) => {
+		if (stage === 'closed') {
+			await nextTick()
+			moreMenu.value?.focus()
+		}
+	},
+)
+</script>
+
+<template>
+	<Teleport v-if="mobile" :to="`#${TOPBAR_ACTION_ID}`" defer>
+		<BuilderMoreMenu ref="moreMenu" :disabled="disabled" @delete="remove.open" />
+	</Teleport>
+	<BuilderMoreMenu v-else ref="moreMenu" :disabled="disabled" @delete="remove.open" />
+	<DeleteTypeDialog
+		v-if="remove.stage.value !== 'closed'"
+		:stage="remove.stage.value"
+		:name="remove.type.value.name"
+		:key-value="remove.type.value.key"
+		:total="remove.total.value"
+		:pending="remove.pending.value"
+		:offline="remove.offline.value"
+		@confirm="remove.confirm"
+		@close="remove.close"
+		@view-entries="remove.viewEntries"
+	/>
+</template>