improve visual

Author: larbish

src/app/src/components/content/ContentEditorForm.vue

@@ -100,7 +100,7 @@ async function setJSON(document: DatabasePageItem) {
 </script>
 
 <template>
-  <div class="p-4">
+  <div class="pt-2 pb-4 px-4">
     <FormSchemaBased
       v-model="contentJSON"
       :collection-name="collection!.name"

src/app/src/components/shared/form/FormPanelInput.vue

@@ -1,23 +1,3 @@
-<template>
-  <UFormField
-    :name="formItem.id"
-    :label="label"
-    :ui="{
-      root: 'w-full',
-      label: 'text-xs font-semibold tracking-tight',
-      container: 'mt-1',
-    }"
-  >
-    <UInput
-      :id="formItem.id"
-      v-model="model"
-      :placeholder="placeholder"
-      :type="inputType"
-      class="w-full"
-    />
-  </UFormField>
-</template>
-
 <script setup lang="ts">
 import { titleCase } from 'scule'
 import type { FormItem, FormTree } from '../../../types'
@@ -111,3 +91,22 @@ function applyValueById(tree: FormTree, id: string, value: unknown): FormTree {
   return result
 }
 </script>
+
+<template>
+  <UFormField
+    :name="formItem.id"
+    :label="label"
+    :ui="{
+      root: 'w-full mt-2',
+      label: 'text-xs font-semibold tracking-tight',
+    }"
+  >
+    <UInput
+      :id="formItem.id"
+      v-model="model"
+      :placeholder="placeholder"
+      :type="inputType"
+      class="w-full"
+    />
+  </UFormField>
+</template>

src/app/src/components/shared/form/FormPanelSection.vue

@@ -1,3 +1,23 @@
+<script lang="ts" setup>
+import type { FormItem, FormTree } from '../../../types'
+import type { PropType } from 'vue'
+import { computed } from 'vue'
+
+const props = defineProps({
+  formItem: {
+    type: Object as PropType<FormItem>,
+    required: true,
+  },
+})
+
+const form = defineModel({ type: Object as PropType<FormTree>, default: () => ({}) })
+
+const childrenCount = computed(() => {
+  if (!props.formItem.children) return 0
+  return Object.keys(props.formItem.children).length
+})
+</script>
+
 <template>
   <UCollapsible
     v-if="formItem.children"
@@ -46,23 +66,3 @@
     :form-item="formItem"
   />
 </template>
-
-<script lang="ts" setup>
-import type { FormItem, FormTree } from '../../../types'
-import type { PropType } from 'vue'
-import { computed } from 'vue'
-
-const props = defineProps({
-  formItem: {
-    type: Object as PropType<FormItem>,
-    required: true,
-  },
-})
-
-const form = defineModel({ type: Object as PropType<FormTree>, default: () => ({}) })
-
-const childrenCount = computed(() => {
-  if (!props.formItem.children) return 0
-  return Object.keys(props.formItem.children).length
-})
-</script>