chore: update components

2026-01-14 12:14:41 +01:00 · 2021-11-26 17:20:43 +01:00
parent 804575a53e
commit 689c01a442
4 changed files with 199 additions and 212 deletions
--- a/docs/pages/migration.vue
+++ b/docs/pages/migration.vue
@@ -19,6 +19,9 @@
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium u-text-gray-500 uppercase tracking-wider">
              Component
            </th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium u-text-gray-500 uppercase tracking-wider">
+              Nuxt3 ready
+            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium u-text-gray-500 uppercase tracking-wider">
              Composition API
            </th>
@@ -34,6 +37,10 @@
                {{ component.label }}
              </NuxtLink>
            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm u-text-gray-500">
+              <span v-if="component.nuxt3 || 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.capi">✅</span>
              <span v-else>❌</span>
@@ -53,7 +60,8 @@
 const components = [
  {
    label: 'Avatar',
-    to: '/components/Avatar'
+    to: '/components/Avatar',
+    nuxt3: true
  },
  {
    label: 'AvatarGroup',
@@ -61,20 +69,26 @@ const components = [
  },
  {
    label: 'Badge',
-    to: '/components/Badge'
+    to: '/components/Badge',
+    nuxt3: true
  },
  {
    label: 'Button',
-    to: '/components/Button'
+    to: '/components/Button',
+    nuxt3: true,
+    capi: true,
+    preset: true
  },
  {
    label: 'Dropdown',
    to: '/components/Dropdown',
+    nuxt3: true,
    capi: true
  },
  {
    label: 'Icon',
    to: '/components/Icon',
+    nuxt3: true,
    capi: true
  },
  {
@@ -83,7 +97,9 @@ const components = [
  },
  {
    label: 'Toggle',
-    to: '/components/Toggle'
+    to: '/components/Toggle',
+    nuxt3: true,
+    capi: true
  },
  {
    label: 'Alert',
@@ -114,6 +130,7 @@ const components = [
  {
    label: 'Select',
    to: '/components/Select',
+    nuxt3: true,
    capi: true,
    preset: true
  },
@@ -124,17 +141,20 @@ const components = [
  {
    label: 'Textarea',
    to: '/components/Textarea',
+    nuxt3: true,
    capi: true,
    preset: true
  },
  {
    label: 'Card',
    to: '/components/Card',
+    nuxt3: true,
    capi: true
  },
  {
    label: 'Container',
    to: '/components/Container',
+    nuxt3: true,
    capi: true
  },
  {
@@ -152,6 +172,7 @@ const components = [
  {
    label: 'Modal',
    to: '/components/Modal',
+    nuxt3: true,
    capi: true
  },
  {
@@ -161,6 +182,7 @@ const components = [
  {
    label: 'Popover',
    to: '/components/Popover',
+    nuxt3: true,
    capi: true
  },
  {
--- a/src/components/elements/Button.vue
+++ b/src/components/elements/Button.vue
@@ -1,18 +1,22 @@
 <template>
  <component
-    :is="is"
+    :is="buttonIs"
+    ref="button"
    :class="buttonClass"
    :aria-label="ariaLabel"
-    v-bind="props"
+    v-bind="buttonProps"
  >
-    <Icon v-if="isLeading" :name="iconName" :class="leadingIconClass" aria-hidden="true" />
+    <Icon v-if="isLeading" :name="iconName" :class="iconClass" aria-hidden="true" />
    <slot><span :class="truncate ? 'text-left break-all line-clamp-1' : ''">{{ label }}</span></slot>
-    <Icon v-if="isTrailing" :name="iconName" :class="trailingIconClass" aria-hidden="true" />
+    <Icon v-if="isTrailing" :name="iconName" :class="iconClass" aria-hidden="true" />
  </component>
 </template>

 <script>
-import Icon from './Icon'
+import { ref, computed } from 'vue'
+import Icon from '../elements/Icon'
+import { classNames } from '../../utils'
+import $ui from '#build/ui'

 export default {
  components: {
@@ -43,14 +47,14 @@ export default {
      type: String,
      default: 'md',
      validator (value) {
-        return ['', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+        return Object.keys($ui.button.size).includes(value)
      }
    },
    variant: {
      type: String,
      default: 'primary',
      validator (value) {
-        return ['primary', 'secondary', 'danger', 'white', 'gray', 'gray-hover', 'white-hover', 'black', 'black-hover', 'transparent', 'link', 'gradient', 'custom'].includes(value)
+        return Object.keys($ui.button.variant).includes(value)
      }
    },
    icon: {
@@ -59,7 +63,7 @@ export default {
    },
    loadingIcon: {
      type: String,
-      default: null
+      default: () => $ui.button.icon.loading
    },
    trailing: {
      type: Boolean,
@@ -89,13 +93,13 @@ export default {
      type: Boolean,
      default: false
    },
-    iconClass: {
-      type: String,
-      default: ''
-    },
    baseClass: {
      type: String,
-      default: 'font-medium focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
+      default: () => $ui.button.base
+    },
+    iconBaseClass: {
+      type: String,
+      default: () => $ui.button.icon.base
    },
    customClass: {
      type: String,
@@ -108,211 +112,78 @@ export default {
    truncate: {
      type: Boolean,
      default: false
-    },
-    noFocusBorder: {
-      type: Boolean,
-      default: false
-    },
-    noPadding: {
-      type: Boolean,
-      default: false
    }
  },
-  computed: {
-    is () {
-      if (this.href) {
+  setup (props, { slots }) {
+    const button = ref(null)
+
+    const buttonIs = computed(() => {
+      if (props.href) {
        return 'a'
-      } else if (this.to) {
+      } else if (props.to) {
        return 'NuxtLink'
      }

      return 'button'
-    },
-    props () {
-      switch (this.is) {
-        case 'a':
-          return {
-            href: this.href,
-            target: this.target
-          }
-        case 'NuxtLink': {
-          return {
-            to: this.to
-          }
-        }
-        default: {
-          return {
-            disabled: this.disabled || this.loading,
-            type: this.type
-          }
-        }
+    })
+
+    const buttonProps = computed(() => {
+      switch (buttonIs.value) {
+        case 'a': return { href: props.href, target: props.target }
+        case 'NuxtLink': return { to: props.to }
+        default: return { disabled: props.disabled || props.loading, type: props.type }
      }
-    },
-    isLeading () {
-      return (this.leading && this.icon) || (this.icon && !this.trailing) || (this.loading && !this.trailing)
-    },
-    isTrailing () {
-      return (this.trailing && this.icon) || (this.loading && this.trailing)
-    },
-    sizeClass () {
-      return ({
-        xxs: 'text-xs',
-        xs: 'text-xs',
-        sm: 'text-sm leading-4',
-        md: 'text-sm',
-        lg: 'text-base',
-        xl: 'text-base'
-      })[this.size]
-    },
-    paddingClass () {
-      if (this.noPadding) {
-        return ''
+    })
+
+    const isLeading = computed(() => {
+      return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing)
+    })
+
+    const isTrailing = computed(() => {
+      return (props.icon && props.trailing) || (props.loading && props.trailing)
+    })
+
+    const isSquare = computed(() => props.square || (!slots.default && !props.label))
+
+    const buttonClass = computed(() => {
+      return classNames(
+        props.baseClass,
+        $ui.button.size[props.size],
+        $ui.button[isSquare.value ? 'square' : 'spacing'][props.size],
+        $ui.button.variant[props.variant],
+        props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center',
+        props.rounded ? 'rounded-full' : 'rounded-md',
+        props.customClass
+      )
+    })
+
+    const iconName = computed(() => {
+      if (props.loading) {
+        return props.loadingIcon
      }

-      const isSquare = this.square || (!this.$slots.default && !this.label)
+      return props.icon
+    })

-      return ({
-        true: {
-          xxs: 'px-2 py-1',
-          xs: 'px-2.5 py-1.5',
-          sm: 'px-3 py-2',
-          md: 'px-4 py-2',
-          lg: 'px-4 py-2',
-          xl: 'px-6 py-3'
-        },
-        false: {
-          xxs: 'p-1',
-          xs: 'p-1.5',
-          sm: 'p-2',
-          md: 'p-2',
-          lg: 'p-2',
-          xl: 'p-3'
-        }
-      })[!isSquare][this.size]
-    },
-    variantClass () {
-      return ({
-        primary: 'shadow-sm border border-transparent text-white bg-primary-600 hover:bg-primary-700 disabled:bg-primary-600',
-        secondary: 'border border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 disabled:bg-primary-100',
-        danger: 'shadow-sm border border-transparent text-white bg-red-500 dark:bg-red-600 hover:bg-red-600 dark:hover:bg-red-500 disabled:bg-red-500 dark:disabled:bg-red-600',
-        white: 'shadow-sm border u-border-gray-300 u-text-gray-700 u-bg-white hover:u-bg-gray-50 disabled:u-bg-white',
-        'white-hover': 'border border-transparent u-text-gray-500 hover:u-text-gray-700 focus:u-text-gray-700 bg-transparent hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900 disabled:u-text-gray-500',
-        gray: 'shadow-sm border u-border-gray-300 u-text-gray-500 hover:u-text-gray-700 focus:u-text-gray-700 bg-gray-50 dark:bg-gray-800 disabled:u-text-gray-500',
-        'gray-hover': 'border border-transparent u-text-gray-500 hover:u-text-gray-700 focus:u-text-gray-700 bg-transparent hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-800 dark:focus:bg-gray-800 disabled:u-text-gray-500',
-        black: 'border border-transparent u-text-white u-bg-gray-800 hover:u-bg-gray-900 focus:u-bg-gray-900',
-        'black-hover': 'border border-transparent u-text-gray-500 hover:u-text-gray-900 focus:u-text-gray-700 bg-transparent hover:bg-white dark:hover:bg-black focus:bg-white dark:focus:bg-black',
-        transparent: 'border border-transparent u-text-gray-500 hover:u-text-gray-700 focus:u-text-gray-700 disabled:hover:u-text-gray-500',
-        link: 'border border-transparent text-primary-500 hover:text-primary-700 focus:text-primary-700',
-        gradient: 'shadow-sm text-white border border-transparent bg-gradient-to-r from-indigo-600 to-blue-600 hover:from-indigo-700 hover:to-blue-700',
-        custom: ''
-      })[this.variant]
-    },
-    variantFocusBorderClass () {
-      if (this.noFocusBorder) {
-        return ''
-      }
+    const iconClass = computed(() => {
+      return classNames(
+        props.iconBaseClass,
+        $ui.input.icon.size[props.size],
+        isLeading.value && (!!slots.default || !!props.label?.length) && $ui.button.icon.leading.spacing[props.size],
+        isTrailing.value && (!!slots.default || !!props.label?.length) && $ui.button.icon.trailing.spacing[props.size],
+        props.loading && 'animate-spin'
+      )
+    })

-      return ({
-        primary: 'focus:ring-2 focus:ring-primary-200',
-        secondary: 'focus:ring-2 focus:ring-primary-500',
-        white: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:focus:border-primary-500',
-        'white-hover': '',
-        gray: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:focus:border-primary-500',
-        'gray-hover': '',
-        link: '',
-        transparent: '',
-        custom: ''
-      })[this.variant]
-    },
-    blockClass () {
-      return ({
-        true: 'w-full flex justify-center items-center',
-        false: 'inline-flex items-center'
-      })[this.block]
-    },
-    roundedClass () {
-      return ({
-        true: 'rounded-full',
-        false: 'rounded-md'
-      })[this.rounded]
-    },
-    iconName () {
-      if (this.loading) {
-        return this.loadingIcon || 'heroicons-outline:refresh'
-      }
-
-      return this.icon
-    },
-    loadingIconClass () {
-      return [
-        ({
-          true: 'animate-spin'
-        })[this.loading]
-      ]
-    },
-    leadingIconClass () {
-      return [
-        this.iconClass,
-        'flex-shrink-0',
-        ...this.loadingIconClass,
-        ({
-          xxs: 'h-3.5 w-3.5',
-          xs: 'h-4 w-4',
-          sm: 'h-4 w-4',
-          md: 'h-5 w-5',
-          lg: 'h-5 w-5',
-          xl: 'h-5 w-5'
-        })[this.size || 'sm'],
-        ({
-          true: {
-            xxs: '-ml-0.5 mr-1',
-            xs: '-ml-0.5 mr-1.5',
-            sm: '-ml-0.5 mr-2',
-            md: '-ml-1 mr-2',
-            lg: '-ml-1 mr-3',
-            xl: '-ml-1 mr-3'
-          },
-          false: {}
-        })[!!this.$slots.default || !!(this.label?.length)][this.size]
-      ].join(' ')
-    },
-    trailingIconClass () {
-      return [
-        this.iconClass,
-        'flex-shrink-0',
-        ...this.loadingIconClass,
-        ({
-          xxs: 'h-3.5 w-3.5',
-          xs: 'h-4 w-4',
-          sm: 'h-4 w-4',
-          md: 'h-5 w-5',
-          lg: 'h-5 w-5',
-          xl: 'h-5 w-5'
-        })[this.size || 'sm'],
-        ({
-          true: {
-            xxs: 'ml-1 -mr-0.5',
-            xs: 'ml-1.5 -mr-0.5',
-            sm: 'ml-2 -mr-0.5',
-            md: 'ml-2 -mr-1',
-            lg: 'ml-3 -mr-1',
-            xl: 'ml-3 -mr-1'
-          },
-          false: {}
-        })[!!this.$slots.default || !!(this.label?.length)][this.size]
-      ].join(' ')
-    },
-    buttonClass () {
-      return [
-        this.baseClass,
-        this.roundedClass,
-        this.sizeClass,
-        this.paddingClass,
-        this.variantClass,
-        this.variantFocusBorderClass,
-        this.blockClass,
-        this.customClass
-      ].filter(Boolean).join(' ')
+    return {
+      button,
+      buttonIs,
+      buttonProps,
+      buttonClass,
+      isLeading,
+      isTrailing,
+      iconName,
+      iconClass
    }
  }
 }
--- a/src/components/forms/Input.vue
+++ b/src/components/forms/Input.vue
@@ -84,7 +84,7 @@ export default {
    },
    loadingIcon: {
      type: String,
-      default: 'heroicons-outline:refresh'
+      default: () => $ui.input.icon.loading
    },
    trailing: {
      type: Boolean,
--- a/src/presets/tailwindui.ts
+++ b/src/presets/tailwindui.ts
@@ -1,3 +1,24 @@
+const colors = [
+  'primary',
+  'rose',
+  'pink',
+  'fuchsia',
+  'purple',
+  'violet',
+  'indigo',
+  'blue',
+  'sky',
+  'cyan',
+  'teal',
+  'emerald',
+  'green',
+  'lime',
+  'yellow',
+  'amber',
+  'orange',
+  'red'
+]
+
 const input = {
  wrapper: 'relative',
  base: 'block w-full u-bg-white u-text-gray-700 disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none',
@@ -43,6 +64,7 @@ const input = {
  },
  icon: {
    base: 'u-text-gray-400',
+    loading: 'heroicons-outline:refresh',
    size: {
      xxs: 'h-3 w-3',
      xs: 'h-4 w-4',
@@ -85,7 +107,79 @@ const select = {
 }

 const button = {
-  base: ''
+  base: 'font-medium focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
+  size: {
+    xxs: 'text-xs',
+    xs: 'text-xs',
+    sm: 'text-sm leading-4',
+    md: 'text-sm',
+    lg: 'text-base',
+    xl: 'text-base'
+  },
+  spacing: {
+    xxs: 'px-2 py-1',
+    xs: 'px-2.5 py-1.5',
+    sm: 'px-3 py-2',
+    md: 'px-4 py-2',
+    lg: 'px-4 py-2',
+    xl: 'px-6 py-3'
+  },
+  square: {
+    xxs: 'p-1',
+    xs: 'p-1.5',
+    sm: 'p-2',
+    md: 'p-2',
+    lg: 'p-2',
+    xl: 'p-3'
+  },
+  variant: {
+    ...colors.reduce((acc: any, color) => {
+      acc[color] = `shadow-sm border border-transparent text-white bg-${color}-600 hover:bg-${color}-700 disabled:bg-${color}-600 focus:ring-2 focus:ring-${color}-200`
+      return acc
+    }, {}),
+    primary: 'shadow-sm border border-transparent text-white bg-primary-600 hover:bg-primary-700 disabled:bg-primary-600 focus:ring-2 focus:ring-primary-200',
+    secondary: 'border border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 disabled:bg-primary-100 focus:ring-2 focus:ring-primary-500',
+    white: 'shadow-sm border u-border-gray-300 u-text-gray-700 u-bg-white hover:u-bg-gray-50 disabled:u-bg-white focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:focus:border-primary-500',
+    'white-hover': 'border border-transparent u-text-gray-500 hover:u-text-gray-700 focus:u-text-gray-700 bg-transparent hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900 disabled:u-text-gray-500',
+    gray: 'shadow-sm border u-border-gray-300 u-text-gray-500 hover:u-text-gray-700 focus:u-text-gray-700 bg-gray-50 dark:bg-gray-800 disabled:u-text-gray-500 focus:ring-primary-500 focus:border-primary-500 dark:focus:border-primary-500',
+    'gray-hover': 'border border-transparent u-text-gray-500 hover:u-text-gray-700 focus:u-text-gray-700 bg-transparent hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-800 dark:focus:bg-gray-800 disabled:u-text-gray-500',
+    black: 'border border-transparent u-text-white u-bg-gray-800 hover:u-bg-gray-900 focus:u-bg-gray-900',
+    'black-hover': 'border border-transparent u-text-gray-500 hover:u-text-gray-900 focus:u-text-gray-700 bg-transparent hover:bg-white dark:hover:bg-black focus:bg-white dark:focus:bg-black',
+    transparent: 'border border-transparent u-text-gray-500 hover:u-text-gray-700 focus:u-text-gray-700 disabled:hover:u-text-gray-500',
+    link: 'border border-transparent text-primary-500 hover:text-primary-700 focus:text-primary-700'
+  },
+  icon: {
+    base: 'flex-shrink-0',
+    loading: 'heroicons-outline:refresh',
+    size: {
+      xxs: 'h-3.5 w-3.5',
+      xs: 'h-4 w-4',
+      sm: 'h-4 w-4',
+      md: 'h-5 w-5',
+      lg: 'h-5 w-5',
+      xl: 'h-5 w-5'
+    },
+    leading: {
+      spacing: {
+        xxs: '-ml-0.5 mr-1',
+        xs: '-ml-0.5 mr-1.5',
+        sm: '-ml-0.5 mr-2',
+        md: '-ml-1 mr-2',
+        lg: '-ml-1 mr-3',
+        xl: '-ml-1 mr-3'
+      }
+    },
+    trailing: {
+      spacing: {
+        xxs: 'ml-1 -mr-0.5',
+        xs: 'ml-1.5 -mr-0.5',
+        sm: 'ml-2 -mr-0.5',
+        md: 'ml-2 -mr-1',
+        lg: 'ml-3 -mr-1',
+        xl: 'ml-3 -mr-1'
+      }
+    }
+  }
 }

 export default {