feat(editor): handle custom inputs based on types

playground/docus/app/pages/authors.vue

@@ -1,46 +1,132 @@
 <script setup lang="ts">
 const { data: page } = await useAsyncData('authors-page', () => queryCollection('pages').first())
 
-const { data: authors } = await useAsyncData('authors-list', () => queryCollection('authors').all())
+const { data: authors } = await useAsyncData('authors-list', () => queryCollection('authors').order('order', 'ASC').all())
+
+const roleConfig: Record<string, { color: 'warning' | 'info' | 'success', icon: string }> = {
+  creator: { color: 'warning', icon: 'i-lucide-crown' },
+  maintainer: { color: 'info', icon: 'i-lucide-shield-check' },
+  contributor: { color: 'success', icon: 'i-lucide-git-pull-request' },
+}
+
+function formatDate(date: string | Date | undefined): string {
+  if (!date) return ''
+  const d = new Date(date)
+  return d.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })
+}
 </script>
 
 <template>
-  <div>
-    <UContainer>
-      <ContentRenderer :value="page" />
-      <div class="flex flex-col gap-2">
-        <UUser
-          v-for="author in authors"
-          :key="author.name"
-          :name="author.name"
-          :description="author.username ? `@${author.username}` : ''"
-          :avatar="author.avatar"
-          :to="author.to"
+  <UContainer>
+    <ContentRenderer
+      v-if="page"
+      :value="page"
+    />
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <UCard
+        v-for="author in authors"
+        :key="author.name"
+        class="group hover:ring-2 hover:ring-primary/50 transition-all duration-200 relative overflow-visible"
+      >
+        <UBadge
+          v-if="author.isOpenSourceLover"
+          color="primary"
+          size="sm"
+          class="absolute -top-2 -right-2 z-10"
+          title="Open Source Lover"
         >
-          <template #name>
-            <div class="flex gap-2">
-              <span class="text-sm font-medium">{{ author.name }}</span>
-              <span class="text-sm text-muted">
-                - {{ author.username ? `@${author.username}` : '' }}
-              </span>
-            </div>
-          </template>
-
-          <template #description>
-            <div class="flex gap-2">
-              <UBadge
-                v-for="module in author.modules"
-                :key="module"
-                variant="soft"
-                size="xs"
-                color="neutral"
-              >
-                {{ module }}
-              </UBadge>
+          <UIcon
+            name="i-lucide-heart"
+            class="size-3"
+          />
+        </UBadge>
+
+        <div class="flex flex-col items-center text-center gap-4">
+          <div class="relative">
+            <UAvatar
+              :src="author.avatar?.src"
+              :alt="author.avatar?.alt || author.name"
+              size="3xl"
+              class="ring-4 ring-muted group-hover:ring-primary/30 transition-all duration-200"
+            />
+            <div
+              v-if="author.icon"
+              class="absolute -bottom-2 -left-2 size-7 flex items-center justify-center bg-elevated rounded-full ring-2 ring-default"
+            >
+              <UIcon
+                :name="author.icon"
+                class="size-4 text-primary"
+              />
             </div>
-          </template>
-        </UUser>
-      </div>
-    </UContainer>
-  </div>
+          </div>
+
+          <div class="flex flex-col items-center gap-2">
+            <NuxtLink
+              :to="author.to"
+              target="_blank"
+              class="text-lg font-semibold text-highlighted hover:text-primary transition-colors"
+            >
+              {{ author.name }}
+            </NuxtLink>
+            <span
+              v-if="author.username"
+              class="text-sm text-muted"
+            >
+              @{{ author.username }}
+            </span>
+            <UBadge
+              v-if="author.role"
+              :color="roleConfig[author.role]?.color || 'neutral'"
+              variant="subtle"
+              size="xs"
+              class="capitalize"
+            >
+              <UIcon
+                :name="roleConfig[author.role]?.icon || 'i-lucide-user'"
+                class="size-3 mr-1"
+              />
+              {{ author.role }}
+            </UBadge>
+            <span
+              v-if="author.birthDate"
+              class="text-xs text-dimmed flex items-center gap-1"
+            >
+              <UIcon
+                name="i-lucide-cake"
+                class="size-3"
+              />
+              {{ formatDate(author.birthDate) }}
+            </span>
+          </div>
+
+          <div
+            v-if="author.modules?.length"
+            class="flex flex-wrap justify-center gap-1.5"
+          >
+            <UBadge
+              v-for="module in author.modules"
+              :key="module"
+              variant="outline"
+              size="sm"
+              color="neutral"
+            >
+              {{ module }}
+            </UBadge>
+          </div>
+
+          <UButton
+            :to="author.to"
+            target="_blank"
+            variant="subtle"
+            color="neutral"
+            size="sm"
+            trailing-icon="i-lucide-external-link"
+            class="mt-2"
+          >
+            View Profile
+          </UButton>
+        </div>
+      </UCard>
+    </div>
+  </UContainer>
 </template>

playground/docus/content.config.ts

@@ -14,11 +14,16 @@ const createDocsSchema = () => z.object({
 const createAuthorsSchema = () => z.object({
   name: z.string(),
   avatar: z.object({
-    src: z.string(),
+    src: z.string().editor({ input: 'media' }),
     alt: z.string(),
   }),
   to: z.string(),
   username: z.string(),
+  role: z.enum(['creator', 'maintainer', 'contributor']).default('contributor'),
+  order: z.number().default(0),
+  birthDate: z.date(),
+  icon: z.string().editor({ input: 'icon', iconLibraries: ['lucide'] }),
+  isOpenSourceLover: z.boolean().default(true),
   modules: z.array(z.string()),
 })
 

playground/docus/content/authors/atinux.yml

@@ -1,8 +1,13 @@
 name: Sébastien Chopin
 avatar:
-  src: https://avatars.githubusercontent.com/u/904724?v=4
+  src: /atinux.jpeg
 to: https://x.com/atinux
 username: atinux
+role: creator
+order: 1
+birthDate: 1992-11-23
+icon: i-lucide-rocket
+isOpenSourceLover: true
 modules:
   - hub
   - ui

playground/docus/content/authors/farnabaz.md

@@ -1,9 +1,14 @@
 ---
 name: Ahad Birang
 avatar:
-  src: https://avatars.githubusercontent.com/u/2047945?v=4
+  src: /farnabaz.jpeg
 to: https://x.com/farnabaz
 username: farnabaz
+role: maintainer
+order: 2
+birthDate: 1990-08-10
+icon: i-lucide-code
+isOpenSourceLover: true
 modules:
   - studio
   - content

playground/docus/content/authors/larbish.json

@@ -1,10 +1,15 @@
 {
   "name": "Baptiste Leproux",
   "avatar": {
-    "src": "https://avatars.githubusercontent.com/u/7290030?v=4"
+    "src": "/larbish.jpeg"
   },
   "to": "https://x.com/_larbish",
   "username": "larbish",
+  "role": "contributor",
+  "order": 3,
+  "birthDate": "1993-09-03",
+  "icon": "i-lucide-palette",
+  "isOpenSourceLover": true,
   "modules": [
     "studio",
     "content",

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

@@ -1,9 +1,16 @@
 <script setup lang="ts">
 import { titleCase } from 'scule'
-import type { FormItem, FormTree } from '../../types'
-import type { PropType } from 'vue'
+import type { FormItem, FormTree, FormInputsTypes } from '../../types'
+import type { Component, PropType } from 'vue'
 import { computed, ref, watch } from 'vue'
 import { applyValueById } from '../../utils/form'
+import FormInputArray from './input/FormInputArray.vue'
+import InputBoolean from './input/InputBoolean.vue'
+import InputDate from './input/InputDate.vue'
+import InputIcon from './input/InputIcon.vue'
+import InputMedia from './input/InputMedia.vue'
+import InputNumber from './input/InputNumber.vue'
+import InputText from './input/InputText.vue'
 
 const props = defineProps({
   formItem: {
@@ -16,27 +23,21 @@ const form = defineModel({ type: Object as PropType<FormTree>, default: () => ({
 
 const label = computed(() => titleCase(props.formItem.title))
 
-const placeholder = computed(() => {
-  switch (props.formItem.type) {
-    case 'string':
-      return `Enter ${props.formItem.title.toLowerCase()}...`
-    case 'number':
-      return '0'
-    default:
-      return ''
-  }
-})
+const typeComponentMap: Partial<Record<FormInputsTypes, Component>> = {
+  array: FormInputArray,
+  boolean: InputBoolean,
+  date: InputDate,
+  icon: InputIcon,
+  media: InputMedia,
+  number: InputNumber,
+  string: InputText,
+}
 
-const inputType = computed(() => {
-  switch (props.formItem.type) {
-    case 'number':
-      return 'number'
-    default:
-      return 'text'
-  }
-})
+const inputComponentName = computed(() => typeComponentMap[props.formItem.type] ?? InputText)
 
-const isArrayType = computed(() => props.formItem.type === 'array')
+const inputFormItem = computed(() => {
+  return props.formItem.type === 'array' ? props.formItem.arrayItemForm : props.formItem
+})
 
 // Initialize model value
 const model = ref(computeValue(props.formItem))
@@ -56,27 +57,25 @@ watch(() => props.formItem, (newFormItem) => {
 }, { deep: true })
 
 function computeValue(formItem: FormItem): unknown {
-  if (formItem.value !== undefined) {
-    return formItem.value
-  }
+  const value = formItem.value
 
   switch (formItem.type) {
     case 'string':
     case 'date':
     case 'icon':
     case 'media':
     case 'file':
-      return ''
+      return typeof value === 'string' ? value : ''
     case 'boolean':
-      return false
+      return typeof value === 'boolean' ? value : false
     case 'number':
-      return 0
+      return typeof value === 'number' ? value : 0
     case 'array':
-      return []
+      return Array.isArray(value) ? value : []
     case 'object':
-      return {}
+      return value && typeof value === 'object' && !Array.isArray(value) ? value : {}
     default:
-      return null
+      return value ?? null
   }
 }
 </script>
@@ -87,22 +86,13 @@ function computeValue(formItem: FormItem): unknown {
     :label="label"
     :ui="{
       root: 'w-full mt-2',
-      label: 'text-xs font-medium tracking-tight',
+      label: 'text-xs font-semibold tracking-tight',
     }"
   >
-    <FormInputArray
-      v-if="isArrayType"
-      v-model="(model as unknown[])"
-      :form-item="formItem.arrayItemForm"
-    />
-    <UInput
-      v-else
-      :id="formItem.id"
-      v-model="(model as string | number)"
-      :placeholder="placeholder"
-      :type="inputType"
-      size="xs"
-      class="w-full"
+    <component
+      :is="inputComponentName"
+      v-model="model"
+      :form-item="inputFormItem"
     />
   </UFormField>
 </template>

src/app/src/components/form/input/FormInputArray.vue

@@ -111,8 +111,8 @@ function updateObjectItem(index: number, value: Record<string, unknown>) {
           :key="item.label"
           variant="subtle"
           color="neutral"
-          size="sm"
-          class="group/badge flex items-center gap-3 px-2 py-1 min-w-0"
+          size="xs"
+          class="min-w-0"
         >
           <UInput
             v-if="activeIndex === item.index"

src/app/src/components/form/input/InputBoolean.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const model = defineModel({ type: Boolean, default: false })
+</script>
+
+<template>
+  <USwitch
+    v-model="model"
+    size="xs"
+  />
+</template>