From 437be462a2b1f8da3760bff192a1861943a95e0c Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 10 Dec 2021 16:07:46 +0100
Subject: [PATCH] docs: update

---
 docs/app.vue                          |  8 +--
 docs/nuxt.config.ts                   |  8 +++
 docs/pages/components/[component].vue | 82 ++++++++++++++++++++-------
 docs/pages/examples.vue               | 51 +++++++++++++----
 docs/pages/migration.vue              | 31 ++++++----
 5 files changed, 133 insertions(+), 47 deletions(-)

diff --git a/docs/app.vue b/docs/app.vue
index d5def598..6831df29 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -17,8 +17,8 @@
     </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 lg:sticky lg:h-screen">
+      <div class="lg:grid lg:grid-cols-10 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-2 lg:overflow-hidden lg:sticky lg:h-screen">
           <nav class="overflow-y-auto h-auto pt-8 lg:py-12">
             <ul class="space-y-6">
               <li v-for="section of sections" :key="section">
@@ -43,7 +43,7 @@
           </nav>
         </aside>
 
-        <div class="space-y-6 sm:px-6 lg:px-0 lg:col-span-9 lg:py-12">
+        <div class="space-y-6 sm:px-6 lg:px-0 lg:col-span-8 lg:py-12">
           <NuxtPage />
         </div>
       </div>
@@ -62,7 +62,7 @@ const sections = [
   { label: 'Getting Started', links: [{ label: 'Usage', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }, { label: 'Dark mode', to: '/dark' }] },
   { 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: 'Feedback', links: [{ label: 'Alert', to: '/components/Alert' }] },
-  { label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'FormGroup', to: '/components/FormGroup' }, { 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: 'Toggle', to: '/components/Toggle' }] },
+  { label: 'Forms', links: [{ label: 'Checkbox', to: '/components/Checkbox' }, { label: 'Input', to: '/components/Input' }, { label: 'FormGroup', to: '/components/FormGroup' }, { label: 'Radio', to: '/components/Radio' }, { label: 'Select', to: '/components/Select' }, { label: 'SelectCustom', to: '/components/SelectCustom' }, { label: 'Textarea', to: '/components/Textarea' }, { label: 'Toggle', to: '/components/Toggle' }] },
   { 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: 'Tooltip', to: '/components/Tooltip' }] }
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 288abf03..0bba850d 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -26,10 +26,18 @@ export default defineNuxtConfig({
     colors: {
       primary: 'blue'
     },
+    preset: {
+      container: {
+        constrained: 'max-w-8xl'
+      }
+    },
     unocss: {
       theme: {
         fontFamily: {
           sans: '"Inter var", sans-serif'
+        },
+        maxWidth: {
+          '8xl': '90rem'
         }
       }
     }
diff --git a/docs/pages/components/[component].vue b/docs/pages/components/[component].vue
index fad9b07b..f20df4da 100644
--- a/docs/pages/components/[component].vue
+++ b/docs/pages/components/[component].vue
@@ -1,6 +1,8 @@
 <template>
-  <UCard v-if="component" class="relative flex flex-col lg:max-h-[calc(100vh-10rem)]" 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">
+  <UCard v-if="component" class="relative flex flex-col lg:h-[calc(100vh-10rem)]" body-class="px-4 py-5 sm:p-6 relative" footer-class="flex flex-col flex-1 overflow-hidden">
     <div class="flex justify-center">
+      <component :is="`U${defaultProps[params.component].component.name}`" v-if="defaultProps[params.component] && defaultProps[params.component].component" v-bind="defaultProps[params.component].component.props" />
+
       <component :is="is" v-bind="{ ...boundProps, ...eventProps }">
         <template v-for="[key, slot] of Object.entries(defaultProps[params.component]?.slots || {}) || []" #[key]>
           <template v-if="Array.isArray(slot)">
@@ -23,7 +25,7 @@
     </div>
 
     <template v-if="props.length" #footer>
-      <div class="space-y-3">
+      <div class="flex-1 px-4 py-5 sm:p-6 space-y-3 lg:overflow-y-auto">
         <UFormGroup
           v-for="prop of props"
           :key="prop.key"
@@ -69,6 +71,21 @@
           />
         </UFormGroup>
       </div>
+
+      <div class="border-t u-border-gray-200 u-bg-gray-50">
+        <pre class="text-sm leading-6 u-text-gray-900 flex-1 relative flex ligatures-none lg:overflow-y-auto overflow-x-hidden px-4 sm:px-6 py-5 sm:py-6">
+          <code class="flex-none min-w-full whitespace-pre-wrap break-all">{{ code }}</code>
+
+          <UButton
+            class="absolute top-0 right-0"
+            :icon="copied ? 'heroicons-outline:clipboard-check' : 'heroicons-outline:clipboard'"
+            variant="transparent"
+            size="sm"
+            :custom-class="copied && '!text-green-500'"
+            @click="onCopy"
+          />
+        </pre>
+      </div>
     </template>
   </UCard>
 </template>
@@ -154,20 +171,6 @@ const defaultProps = {
   Radio: {
     name: 'radio'
   },
-  RadioGroup: {
-    name: 'radio',
-    label: 'Radio group',
-    options: [
-      {
-        label: 'Option 1',
-        value: 'option-1'
-      },
-      {
-        label: 'Option 2',
-        value: 'option-2'
-      }
-    ]
-  },
   Select: {
     name: 'select',
     options: ['English', 'Spanish', 'French', 'German', 'Chinese']
@@ -186,6 +189,14 @@ const defaultProps = {
   Modal: {
     modelValue: modal,
     'onUpdate:modelValue': (v) => { modal.value = v },
+    component: {
+      name: 'Button',
+      props: {
+        variant: 'secondary',
+        label: 'Open modal',
+        onClick: () => { modal.value = true }
+      }
+    },
     slots: {
       default: {
         tag: 'div',
@@ -216,7 +227,8 @@ const { props: componentProps } = await component.__asyncLoader()
 
 const refProps = Object.entries(componentProps).map(([key, prop]) => {
   const defaultValue = componentDefaultProps[key]
-  let value = defaultValue || (typeof prop.default === 'function' ? prop.default() : prop.default)
+  const propDefault = (typeof prop.default === 'function' ? prop.default() : prop.default)
+  let value = defaultValue || propDefault
   let type = prop.type
   if (Array.isArray(type)) {
     type = type[0].name
@@ -249,7 +261,8 @@ const refProps = Object.entries(componentProps).map(([key, prop]) => {
     key,
     type,
     value,
-    values
+    values,
+    default: propDefault
   }
 })
 
@@ -265,7 +278,7 @@ const boundProps = computed(() => {
   const bound = {}
   for (const prop of props.value) {
     let value = prop.value
-    if (!value) {
+    if (value === null) {
       continue
     }
 
@@ -286,4 +299,35 @@ const boundProps = computed(() => {
   }
   return bound
 })
+
+function toKebabCase (str) {
+  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+const copied = ref(false)
+const onCopy = () => {
+  navigator.clipboard.writeText(code.value).then(() => {
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 2000)
+  })
+}
+
+const code = computed(() => {
+  let code = `<U${params.component}`
+  for (const prop of props.value) {
+    if (prop.value === null) {
+      continue
+    }
+    if (prop.value === prop.default) {
+      continue
+    }
+
+    const key = toKebabCase(prop.key)
+    code += `\n  ${prop.type === 'Boolean' ? ':' : ''}${key === 'model-value' ? 'v-model' : key}="${prop.value}"`
+  }
+  code += '\n/>'
+  return code
+})
 </script>
diff --git a/docs/pages/examples.vue b/docs/pages/examples.vue
index ea2102a5..a0c7c8b1 100644
--- a/docs/pages/examples.vue
+++ b/docs/pages/examples.vue
@@ -175,20 +175,47 @@
         Card:
       </div>
 
-      <UCard @submit.prevent="onSubmit">
-        <UFormGroup label="Email" name="email" class="mb-3" required>
-          <UInput type="email" name="email" required />
-        </UFormGroup>
+      <UCard body-class="flex" @submit.prevent="onSubmit">
+        <div class="flex-1 px-4 py-5 sm:p-6 space-y-3">
+          <UFormGroup label="Email" name="email" required>
+            <UInput v-model="form.email" type="email" name="email" required />
+          </UFormGroup>
 
-        <UFormGroup label="Description" name="description" class="mb-3">
-          <UTextarea type="description" name="description" autoresize />
-        </UFormGroup>
+          <UFormGroup label="Description" name="description">
+            <UTextarea v-model="form.description" type="description" name="description" autoresize />
+          </UFormGroup>
 
-        <UFormGroup label="Toggle" name="toggle" class="mb-3">
-          <UToggle v-model="isSwitchEnabled" name="toggle" icon-off="heroicons-solid:x" icon-on="heroicons-solid:check" />
-        </UFormGroup>
+          <UFormGroup label="Toggle" name="toggle">
+            <UToggle v-model="form.toggle" name="toggle" icon-off="heroicons-solid:x" icon-on="heroicons-solid:check" />
+          </UFormGroup>
 
-        <UButton type="submit" label="Submit" />
+          <UFormGroup label="Notifications" label-class="text-base font-medium u-text-gray-900" description="How do you prefer to receive notifications?">
+            <div class="space-y-4 mt-3">
+              <URadio v-model="form.notification" value="email" label="Email" help="Email" />
+              <URadio v-model="form.notification" value="phone" label="Phone (SMS)" help="Phone (SMS)" />
+              <URadio v-model="form.notification" value="push" label="Push notification" help="Push notification" />
+            </div>
+          </UFormGroup>
+
+          <UCard body-class="px-4 py-5 space-y-5">
+            <UCheckbox v-model="form.notifications" name="comments" value="comments" label="Comments" help="Get notified when someones posts a comment on a posting." />
+            <UCheckbox v-model="form.notifications" name="candidates" value="candidates" label="Candidates" help="Get notified when a candidate applies for a job." />
+            <UCheckbox v-model="form.notifications" name="offers" value="offers" label="Offers" help="Get notified when a candidate accepts or rejects an offer." />
+          </UCard>
+
+          <div>
+            <UCheckbox v-model="form.terms" label="I agree to the terms and conditions" name="terms" />
+          </div>
+
+          <div class="flex justify-end">
+            <UButton type="submit" label="Submit" class="ml-auto" />
+          </div>
+        </div>
+        <div class="w-1/3 px-4 py-5 sm:p-6 border-l u-border-gray-200 u-bg-gray-50">
+          <pre>
+{{ form }}
+          </pre>
+        </div>
       </UCard>
     </div>
   </div>
@@ -196,7 +223,7 @@
 
 <script setup>
 const isModalOpen = ref(false)
-const isSwitchEnabled = ref(false)
+const form = reactive({ email: '', description: '', toggle: false, notification: 'email', notifications: [], terms: false })
 
 const { $toast } = useNuxtApp()
 
diff --git a/docs/pages/migration.vue b/docs/pages/migration.vue
index 3e662b83..1087be4b 100644
--- a/docs/pages/migration.vue
+++ b/docs/pages/migration.vue
@@ -65,7 +65,8 @@ const components = [
   },
   {
     label: 'AvatarGroup',
-    to: '/components/AvatarGroup'
+    to: '/components/AvatarGroup',
+    nuxt3: true
   },
   {
     label: 'Badge',
@@ -105,10 +106,6 @@ const components = [
     label: 'Alert',
     to: '/components/Alert'
   },
-  {
-    label: 'Checkbox',
-    to: '/components/Checkbox'
-  },
   {
     label: 'Input',
     to: '/components/Input',
@@ -123,12 +120,18 @@ const components = [
     preset: true
   },
   {
-    label: 'Radio',
-    to: '/components/Radio'
+    label: 'Checkbox',
+    to: '/components/Checkbox',
+    nuxt3: true,
+    capi: true,
+    preset: true
   },
   {
-    label: 'RadioGroup',
-    to: '/components/RadioGroup'
+    label: 'Radio',
+    to: '/components/Radio',
+    nuxt3: true,
+    capi: true,
+    preset: true
   },
   {
     label: 'Select',
@@ -152,12 +155,14 @@ const components = [
     label: 'Card',
     to: '/components/Card',
     nuxt3: true,
-    capi: true
+    capi: true,
+    preset: true
   },
   {
     label: 'Container',
     to: '/components/Container',
     nuxt3: true,
+    preset: true,
     capi: true
   },
   {
@@ -186,7 +191,8 @@ const components = [
   {
     label: 'Notifications',
     to: '/components/Notifications',
-    nuxt3: true
+    nuxt3: true,
+    capi: true
   },
   {
     label: 'Popover',
@@ -197,7 +203,8 @@ const components = [
   {
     label: 'Tooltip',
     to: '/components/Tooltip',
-    nuxt3: true
+    nuxt3: true,
+    capi: true
   }
 ]
 </script>