feat: support presets (#14)

docs/app.vue

@@ -55,7 +55,7 @@
 import { UseDark } from '@vueuse/components'
 
 const sections = [
-  { label: 'Getting Started', links: [{ label: 'Installation', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }, { label: 'Dark mode', to: '/dark' }] },
+  { 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: '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' }] },

docs/pages/components/[component].vue

@@ -54,6 +54,8 @@
 </template>
 
 <script setup>
+import $ui from '#build/ui'
+
 const nuxtApp = useNuxtApp()
 const { params } = useRoute()
 
@@ -74,8 +76,15 @@ 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, '"')).filter(Boolean)
+    const arrayRegex = prop.validator.toString().match(/\[.*\]/g, '')
+    if (arrayRegex) {
+      values = JSON.parse(arrayRegex[0].replace(/'/g, '"')).filter(Boolean)
+    } else {
+      const $uiProp = $ui[params.component.toLowerCase()][key]
+      if ($uiProp) {
+        values = Object.keys($uiProp).filter(Boolean)
+      }
+    }
   }
 
   if (value) {

docs/pages/index.vue

@@ -49,6 +49,10 @@ export default defineNuxtConfig({
       Options
     </h2>
 
+    <p>- `preset`</p>
+
+    <p>Choose preset. Defaults to `tailwindui`. An object can also be used to override some parts of the default preset.</p>
+
     <p>- `prefix`</p>
 
     <p>Define the prefix of the imported components. Defaults to `u`.</p>

docs/pages/migration.vue

@@ -20,7 +20,10 @@
               Component
             </th>
             <th scope="col" class="px-6 py-3 text-left text-xs font-medium u-text-gray-500 uppercase tracking-wider">
-              Ready?
+              Composition API
+            </th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium u-text-gray-500 uppercase tracking-wider">
+              Preset system
             </th>
           </tr>
         </thead>
@@ -32,7 +35,11 @@
               </NuxtLink>
             </td>
             <td class="px-6 py-4 whitespace-nowrap text-sm u-text-gray-500">
-              <span v-if="component.ready">✅</span>
+              <span v-if="component.capi">✅</span>
+              <span v-else>❌</span>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm u-text-gray-500">
+              <span v-if="component.preset">✅</span>
               <span v-else>❌</span>
             </td>
           </tr>
@@ -63,12 +70,12 @@ const components = [
   {
     label: 'Dropdown',
     to: '/components/Dropdown',
-    ready: true
+    capi: true
   },
   {
     label: 'Icon',
     to: '/components/Icon',
-    ready: true
+    capi: true
   },
   {
     label: 'Link',
@@ -89,7 +96,8 @@ const components = [
   {
     label: 'Input',
     to: '/components/Input',
-    ready: true
+    capi: true,
+    preset: true
   },
   {
     label: 'InputGroup',
@@ -105,7 +113,9 @@ const components = [
   },
   {
     label: 'Select',
-    to: '/components/Select'
+    to: '/components/Select',
+    capi: true,
+    preset: true
   },
   {
     label: 'SelectCustom',
@@ -114,17 +124,18 @@ const components = [
   {
     label: 'Textarea',
     to: '/components/Textarea',
-    ready: true
+    capi: true,
+    preset: true
   },
   {
     label: 'Card',
     to: '/components/Card',
-    ready: true
+    capi: true
   },
   {
     label: 'Container',
     to: '/components/Container',
-    ready: true
+    capi: true
   },
   {
     label: 'Pills',
@@ -141,7 +152,7 @@ const components = [
   {
     label: 'Modal',
     to: '/components/Modal',
-    ready: true
+    capi: true
   },
   {
     label: 'Notification',
@@ -150,7 +161,7 @@ const components = [
   {
     label: 'Popover',
     to: '/components/Popover',
-    ready: true
+    capi: true
   },
   {
     label: 'Slideover',