fix: button variants

Author: Selemondev

README.md

@@ -145,7 +145,7 @@ app.mount('#app')
 
 2. Now you can use the component as shown below:
 
-```js
+```vue
 <script setup lang='ts'>
 const items = [
   [{
@@ -158,6 +158,7 @@ const items = [
     icon: 'heroicons:pencil-square-20-solid',
     shortcuts: ['E'],
     click: () => {
+      // eslint-disable-next-line no-console
       console.log('Edit')
     }
   }, {
@@ -258,7 +259,7 @@ export default defineConfig({
 
 4. Now you can simply use any component that you want and it will be auto imported on demand ✨
 
-```js
+```vue
 <script setup lang='ts'>
 const items = [
   [{
@@ -271,6 +272,7 @@ const items = [
     icon: 'heroicons:pencil-square-20-solid',
     shortcuts: ['E'],
     click: () => {
+      // eslint-disable-next-line no-console
       console.log('Edit')
     }
   }, {
@@ -324,15 +326,17 @@ In regards to customization, NuxtLabs UI Vue offers two ways of customizing your
 
 Here is an example of customizing a `UButton` component through the `variants` property: 
 
-```js
+```vue
 <template>
-    <div>
-        <UButton :variants="{
-          'my-variant': {
-            rounded: 'rounded-full'
-          }
-        }" :variant="['my-variant']" color="red" label="Button" />
-    </div>
+  <div>
+    <UButton
+      :variants="{
+        'my-variant': {
+          rounded: 'rounded-full',
+        },
+      }" :variant="['my-variant']" color="red" label="Button"
+    />
+  </div>
 </template>
 ```
 

packages/nuxtlabs-ui-vue/src/components/elements/Button/UButton.vue

@@ -160,6 +160,8 @@ const buttonClass = computed(() => {
     nuxtLabsTheme.UButton.base.gap[props.size],
     props.padded && nuxtLabsTheme.UButton.base[isSquare.value ? 'square' : 'padding'][props.size],
     variants.replaceAll('{color}', props.color),
+    props.disabled && variant.value.buttonDisabled,
+    (props.loading) && variant.value.buttonLoading,
     props.block ? variant.value.block : variant.value.normal,
   )
 })

packages/nuxtlabs-ui-vue/src/theme/nuxtLabsTheme.ts

@@ -196,11 +196,13 @@ export default {
 
   UButton: {
     base: {
-      root: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0',
+      root: 'focus:outline-none text-white dark:text-white block font-medium focus-visible:outline-0 rounded-md disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 transition-all duration-200 ease-in',
       font: 'font-medium',
       rounded: 'rounded-md',
       block: 'w-full flex justify-center items-center',
       normal: 'inline-flex items-center',
+      buttonLoading: '!bg-opacity-50 opacity-50 pointer-events-none !cursor-not-allowed !hover:bg-opacity-50 inline-flex items-center',
+      buttonDisabled: '!shadow-none !cursor-not-allowed pointer-events-none opacity-50',
       truncate: 'text-left break-all line-clamp-1',
       size: {
         '2xs': 'text-xs',
@@ -272,7 +274,7 @@ export default {
         size: 'sm',
         intent: 'solid',
         color: 'green',
-        loadingIcon: 'svg-spinners:bars-rotate-fade',
+        loadingIcon: 'heroicons:arrow-path-20-solid',
       },
     },
 
@@ -282,7 +284,7 @@ export default {
         size: 'sm',
         intent: 'solid',
         color: 'green',
-        loadingIcon: 'svg-spinners:bars-rotate-fade',
+        loadingIcon: 'heroicons:arrow-path-20-solid',
       },
       intent: {
         solid: 'shadow-sm text-white dark:text-gray-900 bg-{color}-500 hover:enabled:bg-{color}-600 disabled:bg-{color}-500 dark:bg-{color}-400 dark:hover:enabled:bg-{color}-500 dark:disabled:bg-{color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-{color}-400',