docs: update

docs/app.vue

@@ -3,11 +3,11 @@
     <UContainer class="py-8">
       <div class="lg:grid lg:grid-cols-12 lg:gap-10 lg:relative">
         <aside class="pb-8 lg:pb-0 lg:sticky lg:top-0 px-4 sm:px-6 lg:px-0 lg:pt-8 lg:-mt-8 lg:self-start lg:col-span-3" style="position: sticky;">
-          <nav class="space-y-3">
-            <div class="font-bold text-lg pb-6">
-              @nuxthq/ui
-            </div>
+          <NuxtLink to="/" class="block font-bold text-lg mb-6">
+            @nuxthq/ui
+          </NuxtLink>
 
+          <nav class="space-y-2.5">
             <ULink
               v-for="component in components"
               :key="component.name"

docs/pages/components/[component].vue

@@ -1,5 +1,5 @@
 <template>
-  <UCard v-if="component" background-class="bg-tw-gray-100">
+  <UCard v-if="component" footer-class="px-4 py-4 sm:px-6 bg-tw-gray-100">
     <div class="flex justify-center">
       <component :is="is" v-bind="boundProps" />
     </div>
@@ -22,6 +22,7 @@
             v-else-if="prop.values"
             v-model="prop.value"
             :name="prop.key"
+            placeholder="Choose one..."
             :options="prop.values"
             size="sm"
           />
@@ -34,16 +35,17 @@
           />
           <UInput
             v-else-if="prop.type === 'Number'"
+            v-model="prop.value"
             type="number"
-            :value="prop.value"
             :name="prop.key"
             size="sm"
-            autocomplete="off"
-            @input="(value) => inputProp(prop.key, value)"
           />
-          <p v-else class="text-sm text-tw-gray-400">
-            This prop of type <span class="p-0.5 rounded bg-gray-100 dark:bg-gray-900">{{ prop.type }}</span> is not yet supported.
-          </p>
+          <UTextarea
+            v-else
+            v-model="prop.value"
+            :name="prop.key"
+            size="sm"
+          />
         </UInputGroup>
       </div>
     </template>
@@ -61,7 +63,7 @@ const component = nuxtApp.vueApp.component(is)
 const { props: componentProps } = await component.__asyncLoader()
 
 const refProps = Object.entries(componentProps).map(([key, prop]) => {
-  let value = prop.default
+  let value = typeof prop.default === 'function' ? prop.default() : prop.default
   let type = prop.type
   if (Array.isArray(type)) {
     type = type[0].name
@@ -75,12 +77,14 @@ const refProps = Object.entries(componentProps).map(([key, prop]) => {
     values = JSON.parse(result.replace(/'/g, '"'))
   }
 
-  if (type === 'Boolean') {
-    value = value === 'true'
-  } else if (type === 'String') {
-    value = value === 'undefined' ? '' : value
-    value = value === 'null' ? '' : value
-    value = (value || '').replace(/^'(.*)'$/, '$1')
+  if (value) {
+    if (type === 'Boolean') {
+      value = value === 'true'
+    } else if (type === 'String') {
+      value = value.replace(/^'(.*)'$/, '$1')
+    } else if (type === 'Array') {
+      value = JSON.stringify(value)
+    }
   }
 
   return {
@@ -95,7 +99,11 @@ const props = ref(refProps)
 const boundProps = computed(() => {
   const bound = {}
   for (const prop of props.value) {
-    bound[prop.key] = prop.value
+    try {
+      bound[prop.key] = prop.type === 'Array' ? JSON.parse(prop.value) : prop.value
+    } catch (e) {
+      continue
+    }
   }
   return bound
 })

docs/pages/index.vue

@@ -1,7 +1,11 @@
 <template>
-  <div class="mx-auto max-w-5xl py-12 space-y-4">
+  <div class="space-y-4">
+    <h1 class="font-medium text-xl">
+      Nuxt3 UI module documentation by NuxtLabs:
+    </h1>
+
     <div>
-      <UButton variant="primary" icon="heroicons-outline:bell">
+      <UButton variant="primary" loading icon="heroicons-outline:bell">
         toto
       </UButton>
     </div>