feat: migrate to @nuxtjs/tailwindcss (#32)

2026-01-14 20:19:34 +01:00 · 2022-02-11 17:13:09 +01:00
parent 1bec8d163c
commit 702abf7a9f
20 changed files with 934 additions and 1056 deletions
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="antialiased font-sans">
-    <nav class="u-bg-white border-b u-border-gray-200 fixed top-0 inset-x-0 z-50">
+    <nav class="u-bg-white border-b u-border-gray-200 fixed top-0 inset-x-0 z-20">
      <UContainer padded>
        <div class="flex items-center justify-between h-16">
          <div class="flex items-center">
@@ -62,16 +62,9 @@ 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: 'AlertDialog', to: '/components/AlertDialog' }] },
-  { 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: '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: 'Navigation', links: [{ label: 'VerticalNavigation', to: '/components/VerticalNavigation' }] },
+  { 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' }] }
 ]
 </script>
-
-<style>
-html.dark {
-  background-color: black;
-}
-</style>
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -28,17 +28,13 @@ export default defineNuxtConfig({
      primary: 'blue'
    },
    preset: {
-      container: {
-        constrained: 'max-w-8xl'
-      }
    },
-    unocss: {
+    tailwindcss: {
      theme: {
-        fontFamily: {
-          sans: '"Inter var", sans-serif'
-        },
-        maxWidth: {
-          '8xl': '90rem'
+        extend: {
+          fontFamily: {
+            sans: '"Inter var", sans-serif'
+          }
        }
      }
    }
--- a/docs/pages/components/[component].vue
+++ b/docs/pages/components/[component].vue
@@ -100,6 +100,15 @@ const is = `U${params.component}`

 const component = nuxtApp.vueApp.component(is)

+const people = [
+  { id: 1, name: 'Durward Reynolds', disabled: false },
+  { id: 2, name: 'Kenton Towne', disabled: false },
+  { id: 3, name: 'Therese Wunsch', disabled: false },
+  { id: 4, name: 'Benedict Kessler', disabled: true },
+  { id: 5, name: 'Katelyn Rohan', disabled: false }
+]
+
+const selectCustom = ref(people[0])
 const alertDialog = ref(false)
 const toggle = ref(false)
 const modal = ref(false)
@@ -214,6 +223,12 @@ const defaultProps = {
    name: 'select',
    options: ['English', 'Spanish', 'French', 'German', 'Chinese']
  },
+  SelectCustom: {
+    modelValue: selectCustom,
+    'onUpdate:modelValue': (v) => { selectCustom.value = v },
+    textAttribute: 'name',
+    options: people
+  },
  Textarea: {
    name: 'textarea'
  },
@@ -264,6 +279,10 @@ const defaultProps = {
 const componentDefaultProps = defaultProps[params.component] || {}
 const { props: componentProps } = await component.__asyncLoader()

+function lowercaseFirstLetter (string) {
+  return string.charAt(0).toLowerCase() + string.slice(1)
+}
+
 const refProps = Object.entries(componentProps).map(([key, prop]) => {
  const defaultValue = componentDefaultProps[key]
  const propDefault = (typeof prop.default === 'function' ? prop.default() : prop.default)
@@ -281,7 +300,7 @@ const refProps = Object.entries(componentProps).map(([key, prop]) => {
    if (arrayRegex) {
      values = JSON.parse(arrayRegex[0].replace(/'/g, '"')).filter(Boolean)
    } else {
-      const $uiProp = $ui[params.component.toLowerCase()][key]
+      const $uiProp = $ui[lowercaseFirstLetter(params.component)][key]
      if ($uiProp) {
        values = Object.keys($uiProp).filter(Boolean)
      }
@@ -289,7 +308,7 @@ const refProps = Object.entries(componentProps).map(([key, prop]) => {
  }

  if (value) {
-    if (type === 'String') {
+    if (type === 'String' && typeof value === 'string') {
      value = value.replace(/^'(.*)'$/, '$1')
    } else if (type === 'Array') {
      value = JSON.stringify(value)
@@ -307,6 +326,7 @@ const refProps = Object.entries(componentProps).map(([key, prop]) => {

 const eventProps = Object.entries(componentDefaultProps)
  .filter(([key]) => !refProps.find(prop => prop.key === key))
+  .filter(([key]) => !['slots'].includes(key))
  .reduce((acc, [key, value]) => {
    acc[key] = value
    return acc
--- a/docs/pages/examples.vue
+++ b/docs/pages/examples.vue
@@ -178,13 +178,28 @@
      <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 />
+            <UInput v-model="form.email" type="email" name="email" required icon="heroicons-outline:mail" />
          </UFormGroup>

          <UFormGroup label="Description" name="description">
            <UTextarea v-model="form.description" type="description" name="description" autoresize />
          </UFormGroup>

+          <UFormGroup label="Person" name="person" required>
+            <USelect
+              v-model="form.personId"
+              name="person"
+              :options="people"
+              text-attribute="name"
+              value-attribute="id"
+              icon="heroicons-outline:user"
+            />
+          </UFormGroup>
+
+          <UFormGroup label="People" name="people" required>
+            <USelectCustom v-model="form.person" name="people" :options="people" text-attribute="name" />
+          </UFormGroup>
+
          <UFormGroup label="Toggle" name="toggle">
            <UToggle v-model="form.toggle" name="toggle" icon-off="heroicons-solid:x" icon-on="heroicons-solid:check" />
          </UFormGroup>
@@ -223,13 +238,23 @@

 <script setup>
 const isModalOpen = ref(false)
+
+const people = [
+  { id: 1, name: 'Durward Reynolds', disabled: false },
+  { id: 2, name: 'Kenton Towne', disabled: false },
+  { id: 3, name: 'Therese Wunsch', disabled: false },
+  { id: 4, name: 'Benedict Kessler', disabled: true },
+  { id: 5, name: 'Katelyn Rohan', disabled: false }
+]
 const form = reactive({
  email: '',
  description: '',
  toggle: false,
  notification: 'email',
  notifications: [],
-  terms: false
+  terms: false,
+  personId: people[0].id,
+  person: ref(people[0])
 })

 const { $toast } = useNuxtApp()
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -8,7 +8,7 @@
      </div>

      <p class="mt-1 text-lg u-text-gray-500">
-        Components library as a Nuxt3 module using <a href="https://github.com/antfu/unocss" target="_blank" class="underline">UnoCSS</a>.
+        Components library as a Nuxt3 module using <a href="https://tailwindcss.com" target="_blank" class="underline">TailwindCSS</a>.
      </p>
    </div>

@@ -66,23 +66,11 @@

    <p>- `colors.gray`</p>

-    <p>Define the gray variant. Defaults to `zinc`. You can like the `primary` color specify your own object. https://github.com/antfu/unocss/blob/main/packages/preset-uno/src/theme/colors.ts</p>
+    <p>Define the gray variant. Defaults to `zinc`. You can like the `primary` color specify your own object. https://tailwindcss.com/docs/customizing-colors#default-color-palette</p>

-    <p>- `unocss.shortcuts`. Defaults to `[]`.</p>
+    <p>- `tailwindcss.theme`. 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>
+    <p>Define TailwindCSS theme: https://tailwindcss.com/docs/theme.</p>
  </div>
 </template>