From 40cb59e660bcceeb4a99a3ea13bbd35a5ff541fb Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 24 Nov 2021 11:48:28 +0100
Subject: [PATCH] docs: update

---
 docs/app.vue                          |  57 +++++----
 docs/pages/components/[component].vue |   7 +-
 docs/pages/index.vue                  |  18 ++-
 docs/pages/migration.vue              | 165 ++++++++++++++++++++++++++
 4 files changed, 215 insertions(+), 32 deletions(-)
 create mode 100644 docs/pages/migration.vue

diff --git a/docs/app.vue b/docs/app.vue
index e84d236d..93c70732 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -1,39 +1,40 @@
 <template>
   <div>
-    <UContainer class="pt-8 min-h-screen">
-      <div class="lg:grid lg:grid-cols-12 lg:gap-10 lg:relative">
-        <aside class="lg:flex lg:flex-col lg:relative 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 lg:overflow-hidden lg:h-[calc(100vh-2rem)]" style="position: sticky;height: calc(100vh - 0rem);">
-          <div class="flex items-center justify-between mb-6">
+    <nav class="bg-white dark:bg-black border-b border-tw-gray-200 fixed top-0 inset-x-0 z-10">
+      <UContainer padded>
+        <div class="flex items-center justify-between h-16">
+          <div class="flex items-center">
             <NuxtLink to="/" class="block font-bold text-lg text-tw-gray-900">
               @nuxthq/ui
             </NuxtLink>
-
-            <UseDark v-slot="{ isDark, toggleDark }">
-              <UButton variant="transparent" size="sm" :icon="isDark ? 'heroicons-outline:moon' : 'heroicons-outline:sun'" @click="toggleDark()" />
-            </UseDark>
           </div>
 
-          <nav class="overflow-y-auto h-auto pb-12">
+          <UseDark v-slot="{ isDark, toggleDark }">
+            <UButton variant="transparent" :icon="isDark ? 'heroicons-outline:moon' : 'heroicons-outline:sun'" @click="toggleDark()" />
+          </UseDark>
+        </div>
+      </UContainer>
+    </nav>
+
+    <UContainer class="mt-16">
+      <div class="lg:grid lg:grid-cols-12 lg:gap-10 lg:relative">
+        <aside class="lg:flex lg:flex-col lg:relative pb-8 lg:pb-0 lg:sticky lg:top-0 px-4 sm:px-6 lg:px-0 lg:pt-16 lg:-mt-16 lg:self-start lg:col-span-3 lg:overflow-hidden sticky h-screen">
+          <nav class="overflow-y-auto h-auto py-12">
             <ul class="space-y-6">
-              <li>
-                <ULink to="/examples" class="mb-3 uppercase tracking-wide font-semibold text-xs" active-class="text-primary-600" inactive-class="text-tw-gray-700 hover:text-tw-gray-900" exact>
-                  Examples
-                </ULink>
-              </li>
               <li v-for="section of sections" :key="section">
                 <h5 class="mb-3 uppercase tracking-wide font-semibold text-xs text-tw-gray-900">
                   {{ section.label }}
                 </h5>
                 <ul class="space-y-1.5">
-                  <li v-for="component of section.components" :key="component">
+                  <li v-for="(link, index) of section.links" :key="index">
                     <ULink
-                      :to="`/components/${component}`"
+                      :to="link.to"
                       class="relative block text-sm rounded-md"
                       active-class="text-primary-600"
-                      inactive-class="text-tw-gray-500 hover:text-tw-gray-900"
+                      inactive-class="text-tw-gray-500 hover:text-tw-gray-700"
                       exact
                     >
-                      {{ component }}
+                      {{ link.label }}
                     </ULink>
                   </li>
                 </ul>
@@ -42,7 +43,7 @@
           </nav>
         </aside>
 
-        <div class="space-y-6 sm:px-6 lg:px-0 lg:col-span-9 pb-80">
+        <div class="space-y-6 sm:px-6 lg:px-0 lg:col-span-9 py-12">
           <NuxtPage />
         </div>
       </div>
@@ -58,17 +59,21 @@ useMeta({
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
   ],
+  htmlAttrs: {
+    class: 'bg-tw-white'
+  },
   bodyAttrs: {
-    class: 'bg-tw-gray-50'
+    class: 'bg-tw-gray-50 text-tw-gray-700'
   }
 })
 
 const sections = [
-  { label: 'Elements', components: ['Avatar', 'AvatarGroup', 'Badge', 'Button', 'Dropdown', 'Icon', 'Link', 'Toggle'] },
-  { label: 'Feedback', components: ['Alert'] },
-  { label: 'Forms', components: ['Checkbox', 'Input', 'InputGroup', 'Radio', 'RadioGroup', 'Select', 'SelectCustom', 'Textarea'] },
-  { label: 'Layout', components: ['Card', 'Container'] },
-  { label: 'Navigation', components: ['Pills', 'Tabs', 'VerticalNavigation'] },
-  { label: 'Overlays', components: ['Modal', 'Notification', 'Popover', 'Slideover', 'Tooltip'] }
+  { label: 'Getting Started', links: [{ label: 'Installation', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }] },
+  { label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }, { label: 'Icon', to: '/components/Icon' }, { label: 'Link', to: '/components/Link' }, { label: 'Toggle', to: '/components/Toggle' }] },
+  { label: 'Feedback', links: [{ label: 'Alert', to: '/components/Alert' }] },
+  { label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'InputGroup', to: '/components/InputGroup' }, { label: 'Radio', to: '/components/Radio' }, { label: 'RadioGroup', to: '/components/RadioGroup' }, { label: 'Select', to: '/components/Select' }, { label: 'SelectCustom', to: '/components/SelectCustom' }, { label: 'Textarea', to: '/components/Textarea' }] },
+  { label: 'Layout', links: [{ label: 'Card', to: '/components/Card' }, { label: 'Container', to: '/components/Container' }] },
+  { label: 'Navigation', links: [{ label: 'Pills', to: '/components/Pills' }, { label: 'Tabs', to: '/components/Tabs' }, { label: 'VerticalNavigation', to: '/components/VerticalNavigation' }] },
+  { label: 'Overlays', links: [{ label: 'Modal', to: '/components/Modal' }, { label: 'Notification', to: '/components/Notification' }, { label: 'Popover', to: '/components/Popover' }, { label: 'Slideover', to: '/components/Slideover' }, { label: 'Tooltip', to: '/components/Tooltip' }] }
 ]
 </script>
diff --git a/docs/pages/components/[component].vue b/docs/pages/components/[component].vue
index 755c4268..040e5480 100644
--- a/docs/pages/components/[component].vue
+++ b/docs/pages/components/[component].vue
@@ -1,6 +1,6 @@
 <template>
-  <UCard v-if="component" footer-class="px-4 py-4 sm:px-6">
-    <div class="flex justify-center">
+  <UCard v-if="component" class="relative flex flex-col" body-class="px-4 py-5 sm:p-6 relative" footer-class="px-4 py-4 sm:px-6 flex-1 lg:overflow-y-auto" style="max-height: calc(100vh - 10rem);">
+    <div class="flex justify-center sticky top-0">
       <component :is="is" v-bind="boundProps" />
     </div>
 
@@ -9,6 +9,7 @@
         <UInputGroup
           v-for="prop of props"
           :key="prop.key"
+          class="capitalize"
           :name="prop.key"
           :label="prop.key"
         >
@@ -74,7 +75,7 @@ const refProps = Object.entries(componentProps).map(([key, prop]) => {
   let values
   if (prop.validator) {
     const result = prop.validator.toString().match(/\[.*\]/g, '')[0]
-    values = JSON.parse(result.replace(/'/g, '"'))
+    values = JSON.parse(result.replace(/'/g, '"')).filter(Boolean)
   }
 
   if (value) {
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index 61d0c97d..83002108 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -93,8 +93,20 @@ export default defineNuxtConfig({
 })</code>
     </pre>
 
-    <NuxtLink to="/examples" class="font-bold text-2xl text-tw-gray-900 hover:underline block">
-      Examples
-    </NuxtLink>
+    <p>- `unocss.shortcuts`. Defaults to `[]`.</p>
+
+    <p>Define UnoCSS shortcuts: https://github.com/antfu/unocss#shortcuts.</p>
+
+    <p>- `unocss.rules`. Defaults to `[]`.</p>
+
+    <p>Customize UnoCSS rules: https://github.com/antfu/unocss#custom-rules.</p>
+
+    <p>- `unocss.variants`. Defaults to `[]`.</p>
+
+    <p>Customize UnoCSS variants: https://github.com/antfu/unocss#custom-variants.</p>
+
+    <p>- `unocss.theme`. Defaults to `{}`.</p>
+
+    <p>Extend UnoCSS theme: https://github.com/antfu/unocss#extend-theme.</p>
   </div>
 </template>
diff --git a/docs/pages/migration.vue b/docs/pages/migration.vue
new file mode 100644
index 00000000..76348e30
--- /dev/null
+++ b/docs/pages/migration.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="space-y-4">
+    <div class="pb-10 border-b border-tw-gray-200 mb-10">
+      <div>
+        <h1 class="inline-block text-3xl font-extrabold text-tw-gray-900 tracking-tight">
+          Migration
+        </h1>
+      </div>
+
+      <p class="mt-1 text-lg text-tw-gray-500">
+        Check out the components that have been migrated to Vue3 coming from `@nuxthq/volta-ui`.
+      </p>
+    </div>
+
+    <UCard body-class>
+      <table class="min-w-full divide-y divide-tw-gray-200">
+        <thead class="bg-tw-gray-50">
+          <tr>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-tw-gray-500 uppercase tracking-wider">
+              Component
+            </th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-tw-gray-500 uppercase tracking-wider">
+              Ready?
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(component, index) of components" :key="index" :class="index % 2 === 0 ? 'bg-tw-white' : 'bg-tw-gray-50'">
+            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-tw-gray-900">
+              <NuxtLink :to="component.to" class="hover:underline">
+                {{ component.label }}
+              </NuxtLink>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-tw-gray-500">
+              <span v-if="component.ready">✅</span>
+              <span v-else>❌</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </UCard>
+  </div>
+</template>
+
+<script setup>
+const components = [
+  {
+    label: 'Avatar',
+    to: '/components/Avatar'
+  },
+  {
+    label: 'AvatarGroup',
+    to: '/components/AvatarGroup'
+  },
+  {
+    label: 'Badge',
+    to: '/components/Badge'
+  },
+  {
+    label: 'Button',
+    to: '/components/Button',
+    ready: true
+  },
+  {
+    label: 'Dropdown',
+    to: '/components/Dropdown',
+    ready: true
+  },
+  {
+    label: 'Icon',
+    to: '/components/Icon',
+    ready: true
+  },
+  {
+    label: 'Link',
+    to: '/components/Link'
+  },
+  {
+    label: 'Toggle',
+    to: '/components/Toggle'
+  },
+  {
+    label: 'Alert',
+    to: '/components/Alert'
+  },
+  {
+    label: 'Checkbox',
+    to: '/components/Checkbox'
+  },
+  {
+    label: 'Input',
+    to: '/components/Input',
+    ready: true
+  },
+  {
+    label: 'InputGroup',
+    to: '/components/InputGroup'
+  },
+  {
+    label: 'Radio',
+    to: '/components/Radio'
+  },
+  {
+    label: 'RadioGroup',
+    to: '/components/RadioGroup'
+  },
+  {
+    label: 'Select',
+    to: '/components/Select'
+  },
+  {
+    label: 'SelectCustom',
+    to: '/components/SelectCustom'
+  },
+  {
+    label: 'Textarea',
+    to: '/components/Textarea',
+    ready: true
+  },
+  {
+    label: 'Card',
+    to: '/components/Card',
+    ready: true
+  },
+  {
+    label: 'Container',
+    to: '/components/Container',
+    ready: true
+  },
+  {
+    label: 'Pills',
+    to: '/components/Pills'
+  },
+  {
+    label: 'Tabs',
+    to: '/components/Tabs'
+  },
+  {
+    label: 'VerticalNavigation',
+    to: '/components/VerticalNavigation'
+  },
+  {
+    label: 'Modal',
+    to: '/components/Modal',
+    ready: true
+  },
+  {
+    label: 'Notification',
+    to: '/components/Notification'
+  },
+  {
+    label: 'Popover',
+    to: '/components/Popover',
+    ready: true
+  },
+  {
+    label: 'Slideover',
+    to: '/components/Slideover'
+  },
+  {
+    label: 'Tooltip',
+    to: '/components/Tooltip'
+  }
+]
+</script>