docs: update

2026-01-14 20:19:34 +01:00 · 2021-11-24 11:48:28 +01:00
parent bc72f63270
commit 40cb59e660
4 changed files with 215 additions and 32 deletions
--- 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>
--- 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) {
--- 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>
--- a/docs/pages/migration.vue
+++ 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>