From a80e92562fa6c0bb760c43d05b1eb2565cc6a40e Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 19 Nov 2021 12:25:26 +0100
Subject: [PATCH] chore(docs): move from example

---
 {example => docs}/app.vue                     | 22 +++++++++----------
 {example => docs}/nuxt.config.ts              |  0
 .../pages/components}/[component].vue         |  2 +-
 {example => docs}/pages/index.vue             | 21 +++++++++++++++---
 package.json                                  |  3 ++-
 5 files changed, 32 insertions(+), 16 deletions(-)
 rename {example => docs}/app.vue (73%)
 rename {example => docs}/nuxt.config.ts (100%)
 rename {example/pages => docs/pages/components}/[component].vue (97%)
 rename {example => docs}/pages/index.vue (84%)

diff --git a/example/app.vue b/docs/app.vue
similarity index 73%
rename from example/app.vue
rename to docs/app.vue
index 0df35279..9d07a3d4 100644
--- a/example/app.vue
+++ b/docs/app.vue
@@ -11,10 +11,10 @@
             <ULink
               v-for="component in components"
               :key="component.name"
-              :to="component.to"
+              :to="`/components/${component.name}`"
               class="text-sm font-medium block w-full"
               active-class="text-primary-600"
-              inactive-class="text-tw-gray-900"
+              inactive-class="text-tw-gray-500 hover:text-tw-gray-900"
             >
               {{ component.name }}
             </ULink>
@@ -40,14 +40,14 @@ useMeta({
 })
 
 const components = [
-  { name: 'Avatar', to: '/Avatar' },
-  { name: 'Button', to: '/Button' },
-  { name: 'Badge', to: '/Badge' },
-  { name: 'Dropdown', to: '/Dropdown' },
-  { name: 'Icon', to: '/Icon' },
-  { name: 'Toggle', to: '/Toggle' },
-  { name: 'Card', to: '/Card' },
-  { name: 'Modal', to: '/Modal' },
-  { name: 'Select', to: '/Select' }
+  { name: 'Avatar' },
+  { name: 'Button' },
+  { name: 'Badge' },
+  { name: 'Dropdown' },
+  { name: 'Icon' },
+  { name: 'Toggle' },
+  { name: 'Card' },
+  { name: 'Modal' },
+  { name: 'Select' }
 ]
 </script>
diff --git a/example/nuxt.config.ts b/docs/nuxt.config.ts
similarity index 100%
rename from example/nuxt.config.ts
rename to docs/nuxt.config.ts
diff --git a/example/pages/[component].vue b/docs/pages/components/[component].vue
similarity index 97%
rename from example/pages/[component].vue
rename to docs/pages/components/[component].vue
index b71b2a0a..fc577ad9 100644
--- a/example/pages/[component].vue
+++ b/docs/pages/components/[component].vue
@@ -1,5 +1,5 @@
 <template>
-  <UCard background-class="bg-tw-gray-100">
+  <UCard v-if="component" background-class="bg-tw-gray-100">
     <div class="flex justify-center">
       <component :is="is" v-bind="boundProps" />
     </div>
diff --git a/example/pages/index.vue b/docs/pages/index.vue
similarity index 84%
rename from example/pages/index.vue
rename to docs/pages/index.vue
index a34ca401..70184bba 100644
--- a/example/pages/index.vue
+++ b/docs/pages/index.vue
@@ -10,6 +10,16 @@
       <UAvatar src="https://picsum.photos/200/300" />
     </div>
 
+    <div>
+      <UCard @submit.prevent="onSubmit">
+        <UInputGroup label="Email" name="email">
+          <UInput type="email" name="email" />
+        </UInputGroup>
+
+        <UButton type="submit" label="Submit" />
+      </UCard>
+    </div>
+
     <div>
       <UButton @click="toggleModalIsOpen()">
         Toggle modal!
@@ -62,16 +72,21 @@ function toggleModalIsOpen () {
   isModalOpen.value = !isModalOpen.value
 }
 
-function clickItem () {
+function onClick () {
   // eslint-disable-next-line no-console
-  console.warn('clicked')
+  console.warn('click')
+}
+
+function onSubmit () {
+  // eslint-disable-next-line no-console
+  console.warn('submit')
 }
 
 const dropdownItems = [
   [{
     label: 'Edit',
     icon: 'heroicons-solid:pencil',
-    click: () => clickItem()
+    click: () => onClick()
   }, {
     label: 'Duplicate',
     icon: 'heroicons-solid:duplicate'
diff --git a/package.json b/package.json
index fd128a03..0664b315 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
   ],
   "scripts": {
     "build": "unbuild",
-    "dev": "nuxi dev example",
+    "dev": "nuxi dev docs",
+    "build:docs": "nuxi build docs",
     "lint": "eslint --ext .ts,.js,.vue ."
   },
   "dependencies": {