Merge pull request #88 from selemondev/fix-button-variants

selemondev · web-flow · commit 020cf0c590df · 2023-08-16T23:13:36.000+03:00
fix: button variants
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,162 @@
 # Changelog
 
 
+## v0.0.3
+
+
+### 🚀 Enhancements
+
+- **app:** #1 Icon ([#1](https://github.com/selemondev/nuxtlabs-ui-vue/issues/1))
+- **app:** #9 Link ([#9](https://github.com/selemondev/nuxtlabs-ui-vue/issues/9))
+- **app:** #6 Button ([#6](https://github.com/selemondev/nuxtlabs-ui-vue/issues/6))
+- **app:** #36 This pull request is intended to close issue #36 ([#36](https://github.com/selemondev/nuxtlabs-ui-vue/issues/36))
+- **app:** #4 Avatar ([#4](https://github.com/selemondev/nuxtlabs-ui-vue/issues/4))
+- **app:** #39 AvatarGroup ([#39](https://github.com/selemondev/nuxtlabs-ui-vue/issues/39))
+- **app:** #2 Accordion ([#2](https://github.com/selemondev/nuxtlabs-ui-vue/issues/2))
+- **app:** #3 Alert ([#3](https://github.com/selemondev/nuxtlabs-ui-vue/issues/3))
+- **app:** #5 Badge ([#5](https://github.com/selemondev/nuxtlabs-ui-vue/issues/5))
+- **app:** #7 Dropdown ([#7](https://github.com/selemondev/nuxtlabs-ui-vue/issues/7))
+- **app:** #10 Input ([#10](https://github.com/selemondev/nuxtlabs-ui-vue/issues/10))
+- **app:** #11 Textarea ([#11](https://github.com/selemondev/nuxtlabs-ui-vue/issues/11))
+- **app:** #12 Select ([#12](https://github.com/selemondev/nuxtlabs-ui-vue/issues/12))
+- **app:** #13 Select Menu ([#13](https://github.com/selemondev/nuxtlabs-ui-vue/issues/13))
+- **app:** #14 Checkbox ([#14](https://github.com/selemondev/nuxtlabs-ui-vue/issues/14))
+- **app:** #15 Radio ([#15](https://github.com/selemondev/nuxtlabs-ui-vue/issues/15))
+- **app:** #16 Toggle ([#16](https://github.com/selemondev/nuxtlabs-ui-vue/issues/16))
+- **app:** #17 Range ([#17](https://github.com/selemondev/nuxtlabs-ui-vue/issues/17))
+- **app:** #18 FormGroup ([#18](https://github.com/selemondev/nuxtlabs-ui-vue/issues/18))
+- **app:** #19 Table ([#19](https://github.com/selemondev/nuxtlabs-ui-vue/issues/19))
+- **app:** #20 Vertical Navigation ([#20](https://github.com/selemondev/nuxtlabs-ui-vue/issues/20))
+- **app:** #21 Command Palette ([#21](https://github.com/selemondev/nuxtlabs-ui-vue/issues/21))
+- **app:** #22 Pagination ([#22](https://github.com/selemondev/nuxtlabs-ui-vue/issues/22))
+- **app:** #22 Pagination ([#22](https://github.com/selemondev/nuxtlabs-ui-vue/issues/22))
+- **app:** #23 Tabs ([#23](https://github.com/selemondev/nuxtlabs-ui-vue/issues/23))
+- **app:** #24 Modal ([#24](https://github.com/selemondev/nuxtlabs-ui-vue/issues/24))
+- **app:** #25 Slideover ([#25](https://github.com/selemondev/nuxtlabs-ui-vue/issues/25))
+- **app:** #26 Popover ([#26](https://github.com/selemondev/nuxtlabs-ui-vue/issues/26))
+- **app:** #27 Tooltip ([#27](https://github.com/selemondev/nuxtlabs-ui-vue/issues/27))
+- **app:** #28 Context Menu ([#28](https://github.com/selemondev/nuxtlabs-ui-vue/issues/28))
+- **app:** #29 Notification ([#29](https://github.com/selemondev/nuxtlabs-ui-vue/issues/29))
+- **app:** #30 Card ([#30](https://github.com/selemondev/nuxtlabs-ui-vue/issues/30))
+- **app:** #31 Container ([#31](https://github.com/selemondev/nuxtlabs-ui-vue/issues/31))
+- **app:** #32 Skeleton ([#32](https://github.com/selemondev/nuxtlabs-ui-vue/issues/32))
+- **app:** Auto imports ([2fd26ea](https://github.com/selemondev/nuxtlabs-ui-vue/commit/2fd26ea))
+
+### 🩹 Fixes
+
+- **app:** Fix Link component ([f26f487](https://github.com/selemondev/nuxtlabs-ui-vue/commit/f26f487))
+- **app:** Form inputs' borders ([391918e](https://github.com/selemondev/nuxtlabs-ui-vue/commit/391918e))
+- **app:** Remove redundant code ([52f0f18](https://github.com/selemondev/nuxtlabs-ui-vue/commit/52f0f18))
+- **app:** Component variants ([b28aca1](https://github.com/selemondev/nuxtlabs-ui-vue/commit/b28aca1))
+- **app:** Components' variant ([774600d](https://github.com/selemondev/nuxtlabs-ui-vue/commit/774600d))
+- Github actions ([091650f](https://github.com/selemondev/nuxtlabs-ui-vue/commit/091650f))
+- Slideover transitions ([7bd3ba4](https://github.com/selemondev/nuxtlabs-ui-vue/commit/7bd3ba4))
+- Import paths ([329bf20](https://github.com/selemondev/nuxtlabs-ui-vue/commit/329bf20))
+
+### 📖 Documentation
+
+- README ([a41e3b9](https://github.com/selemondev/nuxtlabs-ui-vue/commit/a41e3b9))
+
+### 🏡 Chore
+
+- Update workflow ([bec49af](https://github.com/selemondev/nuxtlabs-ui-vue/commit/bec49af))
+- Update workflow ([4257469](https://github.com/selemondev/nuxtlabs-ui-vue/commit/4257469))
+- Remove logs ([16ae9ee](https://github.com/selemondev/nuxtlabs-ui-vue/commit/16ae9ee))
+- Update eslint rules ([81fcc20](https://github.com/selemondev/nuxtlabs-ui-vue/commit/81fcc20))
+- Update .gitignore ([05aa79e](https://github.com/selemondev/nuxtlabs-ui-vue/commit/05aa79e))
+- Update files ([4512065](https://github.com/selemondev/nuxtlabs-ui-vue/commit/4512065))
+- Update workspace ([ace6a33](https://github.com/selemondev/nuxtlabs-ui-vue/commit/ace6a33))
+- **release:** V0.0.1 ([6988c92](https://github.com/selemondev/nuxtlabs-ui-vue/commit/6988c92))
+- Release v0.0.1 ([0e247e7](https://github.com/selemondev/nuxtlabs-ui-vue/commit/0e247e7))
+- Release v0.0.2 ([4ab699d](https://github.com/selemondev/nuxtlabs-ui-vue/commit/4ab699d))
+- Release v0.1.0 ([43f011a](https://github.com/selemondev/nuxtlabs-ui-vue/commit/43f011a))
+- Release v0.1.1 ([0c92c7b](https://github.com/selemondev/nuxtlabs-ui-vue/commit/0c92c7b))
+- Release v0.1.2 ([62eec9b](https://github.com/selemondev/nuxtlabs-ui-vue/commit/62eec9b))
+- Release v0.1.3 ([da1a768](https://github.com/selemondev/nuxtlabs-ui-vue/commit/da1a768))
+
+### ❤️  Contributors
+
+- Selemondev <selemondev@Selemondevs-MacBook-Pro.local>
+- System Administrator <root@Selemondevs-MacBook-Pro.local>
+
+## v0.0.2
+
+
+### 🚀 Enhancements
+
+- **app:** #1 Icon ([#1](https://github.com/selemondev/nuxtlabs-ui-vue/issues/1))
+- **app:** #9 Link ([#9](https://github.com/selemondev/nuxtlabs-ui-vue/issues/9))
+- **app:** #6 Button ([#6](https://github.com/selemondev/nuxtlabs-ui-vue/issues/6))
+- **app:** #36 This pull request is intended to close issue #36 ([#36](https://github.com/selemondev/nuxtlabs-ui-vue/issues/36))
+- **app:** #4 Avatar ([#4](https://github.com/selemondev/nuxtlabs-ui-vue/issues/4))
+- **app:** #39 AvatarGroup ([#39](https://github.com/selemondev/nuxtlabs-ui-vue/issues/39))
+- **app:** #2 Accordion ([#2](https://github.com/selemondev/nuxtlabs-ui-vue/issues/2))
+- **app:** #3 Alert ([#3](https://github.com/selemondev/nuxtlabs-ui-vue/issues/3))
+- **app:** #5 Badge ([#5](https://github.com/selemondev/nuxtlabs-ui-vue/issues/5))
+- **app:** #7 Dropdown ([#7](https://github.com/selemondev/nuxtlabs-ui-vue/issues/7))
+- **app:** #10 Input ([#10](https://github.com/selemondev/nuxtlabs-ui-vue/issues/10))
+- **app:** #11 Textarea ([#11](https://github.com/selemondev/nuxtlabs-ui-vue/issues/11))
+- **app:** #12 Select ([#12](https://github.com/selemondev/nuxtlabs-ui-vue/issues/12))
+- **app:** #13 Select Menu ([#13](https://github.com/selemondev/nuxtlabs-ui-vue/issues/13))
+- **app:** #14 Checkbox ([#14](https://github.com/selemondev/nuxtlabs-ui-vue/issues/14))
+- **app:** #15 Radio ([#15](https://github.com/selemondev/nuxtlabs-ui-vue/issues/15))
+- **app:** #16 Toggle ([#16](https://github.com/selemondev/nuxtlabs-ui-vue/issues/16))
+- **app:** #17 Range ([#17](https://github.com/selemondev/nuxtlabs-ui-vue/issues/17))
+- **app:** #18 FormGroup ([#18](https://github.com/selemondev/nuxtlabs-ui-vue/issues/18))
+- **app:** #19 Table ([#19](https://github.com/selemondev/nuxtlabs-ui-vue/issues/19))
+- **app:** #20 Vertical Navigation ([#20](https://github.com/selemondev/nuxtlabs-ui-vue/issues/20))
+- **app:** #21 Command Palette ([#21](https://github.com/selemondev/nuxtlabs-ui-vue/issues/21))
+- **app:** #22 Pagination ([#22](https://github.com/selemondev/nuxtlabs-ui-vue/issues/22))
+- **app:** #22 Pagination ([#22](https://github.com/selemondev/nuxtlabs-ui-vue/issues/22))
+- **app:** #23 Tabs ([#23](https://github.com/selemondev/nuxtlabs-ui-vue/issues/23))
+- **app:** #24 Modal ([#24](https://github.com/selemondev/nuxtlabs-ui-vue/issues/24))
+- **app:** #25 Slideover ([#25](https://github.com/selemondev/nuxtlabs-ui-vue/issues/25))
+- **app:** #26 Popover ([#26](https://github.com/selemondev/nuxtlabs-ui-vue/issues/26))
+- **app:** #27 Tooltip ([#27](https://github.com/selemondev/nuxtlabs-ui-vue/issues/27))
+- **app:** #28 Context Menu ([#28](https://github.com/selemondev/nuxtlabs-ui-vue/issues/28))
+- **app:** #29 Notification ([#29](https://github.com/selemondev/nuxtlabs-ui-vue/issues/29))
+- **app:** #30 Card ([#30](https://github.com/selemondev/nuxtlabs-ui-vue/issues/30))
+- **app:** #31 Container ([#31](https://github.com/selemondev/nuxtlabs-ui-vue/issues/31))
+- **app:** #32 Skeleton ([#32](https://github.com/selemondev/nuxtlabs-ui-vue/issues/32))
+- **app:** Auto imports ([2fd26ea](https://github.com/selemondev/nuxtlabs-ui-vue/commit/2fd26ea))
+
+### 🩹 Fixes
+
+- **app:** Fix Link component ([f26f487](https://github.com/selemondev/nuxtlabs-ui-vue/commit/f26f487))
+- **app:** Form inputs' borders ([391918e](https://github.com/selemondev/nuxtlabs-ui-vue/commit/391918e))
+- **app:** Remove redundant code ([52f0f18](https://github.com/selemondev/nuxtlabs-ui-vue/commit/52f0f18))
+- **app:** Component variants ([b28aca1](https://github.com/selemondev/nuxtlabs-ui-vue/commit/b28aca1))
+- **app:** Components' variant ([774600d](https://github.com/selemondev/nuxtlabs-ui-vue/commit/774600d))
+- Github actions ([091650f](https://github.com/selemondev/nuxtlabs-ui-vue/commit/091650f))
+- Slideover transitions ([7bd3ba4](https://github.com/selemondev/nuxtlabs-ui-vue/commit/7bd3ba4))
+- Import paths ([329bf20](https://github.com/selemondev/nuxtlabs-ui-vue/commit/329bf20))
+
+### 📖 Documentation
+
+- README ([a41e3b9](https://github.com/selemondev/nuxtlabs-ui-vue/commit/a41e3b9))
+
+### 🏡 Chore
+
+- Update workflow ([bec49af](https://github.com/selemondev/nuxtlabs-ui-vue/commit/bec49af))
+- Update workflow ([4257469](https://github.com/selemondev/nuxtlabs-ui-vue/commit/4257469))
+- Remove logs ([16ae9ee](https://github.com/selemondev/nuxtlabs-ui-vue/commit/16ae9ee))
+- Update eslint rules ([81fcc20](https://github.com/selemondev/nuxtlabs-ui-vue/commit/81fcc20))
+- Update .gitignore ([05aa79e](https://github.com/selemondev/nuxtlabs-ui-vue/commit/05aa79e))
+- Update files ([4512065](https://github.com/selemondev/nuxtlabs-ui-vue/commit/4512065))
+- Update workspace ([ace6a33](https://github.com/selemondev/nuxtlabs-ui-vue/commit/ace6a33))
+- **release:** V0.0.1 ([6988c92](https://github.com/selemondev/nuxtlabs-ui-vue/commit/6988c92))
+- Release v0.0.1 ([0e247e7](https://github.com/selemondev/nuxtlabs-ui-vue/commit/0e247e7))
+- Release v0.0.2 ([4ab699d](https://github.com/selemondev/nuxtlabs-ui-vue/commit/4ab699d))
+- Release v0.1.0 ([43f011a](https://github.com/selemondev/nuxtlabs-ui-vue/commit/43f011a))
+- Release v0.1.1 ([0c92c7b](https://github.com/selemondev/nuxtlabs-ui-vue/commit/0c92c7b))
+- Release v0.1.2 ([62eec9b](https://github.com/selemondev/nuxtlabs-ui-vue/commit/62eec9b))
+- Release v0.1.3 ([da1a768](https://github.com/selemondev/nuxtlabs-ui-vue/commit/da1a768))
+
+### ❤️  Contributors
+
+- Selemondev <selemondev@Selemondevs-MacBook-Pro.local>
+- System Administrator <root@Selemondevs-MacBook-Pro.local>
+
 ## v0.0.1
 
 
diff --git a/README.md b/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>
 ```
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nuxtlabsui/vue-monorepo",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "private": false,
   "scripts": {
     "build": "rimraf packages/*/{dist,es,lib} && nr -r -F \"./packages/nuxtlabs-ui-vue\" build",
@@ -44,4 +44,4 @@
       "pnpm lint:fix"
     ]
   }
-}
+}
diff --git a/packages/nuxtlabs-ui-vue/src/components/elements/Button/UButton.vue b/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,
   )
 })
diff --git a/packages/nuxtlabs-ui-vue/src/theme/nuxtLabsTheme.ts b/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',

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@nuxtlabsui/vue-monorepo",`
`3`		`- "version": "0.0.1",`
	`3`	`+ "version": "0.0.3",`
`4`	`4`	`"private": false,`
`5`	`5`	`"scripts": {`
`6`	`6`	`"build": "rimraf packages/*/{dist,es,lib} && nr -r -F \"./packages/nuxtlabs-ui-vue\" build",`
`@@ -44,4 +44,4 @@`
`44`	`44`	`"pnpm lint:fix"`
`45`	`45`	`]`
`46`	`46`	`}`
`47`		`-}`
	`47`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -160,6 +160,8 @@ const buttonClass = computed(() => {`
`160`	`160`	`nuxtLabsTheme.UButton.base.gap[props.size],`
`161`	`161`	`props.padded && nuxtLabsTheme.UButton.base[isSquare.value ? 'square' : 'padding'][props.size],`
`162`	`162`	`variants.replaceAll('{color}', props.color),`
	`163`	`+ props.disabled && variant.value.buttonDisabled,`
	`164`	`+ (props.loading) && variant.value.buttonLoading,`
`163`	`165`	`props.block ? variant.value.block : variant.value.normal,`
`164`	`166`	`)`
`165`	`167`	`})`