feat (soapi): implement soapi entry with form and list

This commit is contained in:
Abizrh
2025-11-02 23:20:38 +07:00
parent da80d1a206
commit 6bb881d248
8 changed files with 189 additions and 107 deletions
@@ -12,14 +12,14 @@ const emit = defineEmits<{
}>()
function changeTab(value: string) {
activeTab.value = value;
emit('changeTab', value);
activeTab.value = value
emit('changeTab', value)
}
</script>
<template>
<!-- Tabs -->
<div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
<div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
<Button
v-for="tab in data"
:key="tab.value"
@@ -34,10 +34,12 @@ function changeTab(value: string) {
<!-- Active Tab Content -->
<div class="mt-4 rounded-md border p-4">
<component
v-if="data.find((t) => t.value === activeTab)?.component"
:is="data.find((t) => t.value === activeTab)?.component"
:label="data.find((t) => t.value === activeTab)?.label"
v-bind="data.find((t) => t.value === activeTab)?.props || {}"
v-bind="data.find((t) => t.value === activeTab)?.props"
/>
<!-- v-if="data.find((t) => t.value === activeTab)?.component" -->
<!-- :is="data.find((t) => t.value === activeTab)?.component" -->
<!-- v-bind="data.find((t) => t.value === activeTab)?.props || {}" -->
<!-- :label="data.find((t) => t.value === activeTab)?.label" -->
</div>
</template>
</template>