fix(app): button theme

This pull request is intended to fix the button theme

packages/windi/package.json

@@ -48,7 +48,9 @@
   },
   "dependencies": {
     "@heroicons/vue": "^2.0.18",
-    "tailwind-merge": "^1.14.0"
+    "classnames": "^2.3.2",
+    "tailwind-merge": "^1.14.0",
+    "vue-router": "^4.2.4"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.39.8",

packages/windi/src/App.vue

@@ -1,10 +1,40 @@
 <script setup lang='ts'>
+function handle() {
+  // eslint-disable-next-line no-console
+  return console.log('Hello there')
+}
 </script>
 
 <template>
   <div class="grid place-items-center w-full min-h-screen">
-    <WKbd>M</WKbd>
-    <WKbd>M</WKbd>
+    <!-- <div class="w-96">
+      <WAlert
+        :is-visible="true" :variant="['warning-light']" transition="fade" title="Alert" closable
+      >
+        <template #leading>
+          <WIcon name="ph:sun" size="2xl" />
+        </template>
+        <WAlertDescription>
+          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis, sint!
+        </WAlertDescription>
+      </WAlert>
+    </div> -->
+    <WButton
+      :variants="{
+        'my-variant': {
+          root: 'bg-black hover:bg-gray-800 disabled:hover:bg-black',
+          buttonLoading: '!bg-red-500',
+        },
+      }" :variant="['danger-ghost']" @click="handle()"
+    >
+      Button
+    </WButton>
+
+    <!-- <button @click="handle()">
+      Button
+    </button> -->
+    <!-- <WKbd>M</WKbd>
+    <WKbd>M</WKbd> -->
     <!-- <WBadge position="top-right" value="100" :max-value="99" color="lime">
       <WIcon name="ph:bell" size="3xl" />
     </WBadge> -->

packages/windi/src/Types/componentsTypes/components.ts

@@ -45,10 +45,9 @@ export interface WBadge extends WComponentRoot {
 }
 
 export interface WButton extends WComponentRoot {
-  full?: string
-  buttonLabel?: string
-  disabled?: string
-  loading?: string
+  buttonFull?: string
+  buttonDisabled?: string
+  buttonLoading?: string
   buttonSize?: string
   buttonPill?: string
   buttonGap?: string

packages/windi/src/components/Button/WButton.vue

@@ -2,6 +2,7 @@
 import { computed, defineComponent, useAttrs } from 'vue'
 import type { PropType } from 'vue'
 import classNames from 'classnames'
+import type { RouteLocationRaw } from 'vue-router'
 import { Icon } from '@iconify/vue'
 import type { VariantJSWithClassesListProps } from '../../utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '../../utils/getVariantProps'
@@ -14,8 +15,13 @@ export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
 const props = defineProps({
   ...getVariantPropsWithClassesList<WButton>(),
 
-  to: {
+  type: {
     type: String,
+    default: 'button',
+  },
+
+  to: {
+    type: [String, Object] as PropType<string | RouteLocationRaw>,
     default: null,
   },
   size: {
@@ -109,20 +115,21 @@ const isTrailing = computed(() => {
 })
 
 const buttonBlock = computed(() => {
-  return props.full && variant.value.full
+  return props.full && variant.value.buttonFull
 })
 
 const buttonWrapperClass = computed(() => {
   return classNames(
+    (props.to) && 'hover:underline',
     variant.value.root,
     variant.value.buttonFlex,
     windiTheme.WButton.base.buttonSize[props.size],
     windiTheme.WButton.base.buttonGap[props.size],
     windiTheme.WButton.base.buttonPadding[props.size],
     buttonBlock.value,
     props.pill && variant.value.buttonPill,
-    props.disabled && variant.value.disabled,
-    (props.loading) && variant.value.loading,
+    props.disabled && variant.value.buttonDisabled,
+    (props.loading) && variant.value.buttonLoading,
   )
 })
 
@@ -145,7 +152,7 @@ export default defineComponent({
     </slot>
 
     <slot>
-      <span v-if="label" :class="variant.buttonLabel">
+      <span v-if="label">
         {{ label }}
       </span>
     </slot>

packages/windi/src/components/Input/WInput.vue

@@ -0,0 +1,7 @@
+<script setup lang='ts'>
+
+</script>
+
+<template>
+  <div />
+</template>

packages/windi/src/theme/windiTheme.ts

@@ -243,14 +243,13 @@ export default {
 
   WButton: {
     base: {
-      root: 'focus:outline-none focus-visible:outline-0 rounded-md text-white disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 transition-all duration-200 ease-in',
-      buttonLabel: 'block font-medium',
+      root: 'focus:outline-none 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',
       buttonFlex: 'flex items-center',
       buttonLoadingIcon: 'svg-spinners:bars-rotate-fade',
       buttonPill: '!rounded-full',
-      loading: '!bg-opacity-50 !hover:bg-opacity-50 inline-flex items-center',
-      full: 'w-full flex justify-center items-center',
-      disabled: '!shadow-none !cursor-not-allowed bg-transparent',
+      buttonLoading: '!bg-opacity-50 pointer-events-none !cursor-not-allowed !hover:bg-opacity-50 inline-flex items-center',
+      buttonFull: 'w-full flex justify-center items-center',
+      buttonDisabled: '!shadow-none !cursor-not-allowed bg-opacity-100',
       buttonSize: {
         'xs': 'text-xs',
         'sm': 'text-sm',
@@ -279,39 +278,34 @@ export default {
 
     variants: {
       'default': {
-        root: 'bg-yellow-500 hover:bg-yellow-600',
+        root: 'bg-yellow-500 not:disabled:hover:bg-yellow-600',
       },
       'default-outline': {
         root: [
-          'border border-yellow-500 text-yellow-800 hover:bg-yellow-800 hover:text-white duration-200 ease-in',
+          'border border-yellow-500 text-yellow-800 not:disabled:hover:bg-yellow-800 not:disabled:hover:text-white duration-200 ease-in',
         ],
       },
       'default-light': {
         root: [
-          'border border-yellow-500 bg-yellow-100 text-yellow-800 hover:bg-yellow-800 hover:text-white duration-200 ease-in',
+          'border border-yellow-500 bg-yellow-100 text-yellow-800 not:disabled:hover:bg-yellow-800 not:disabled:hover:text-white duration-200 ease-in',
         ],
       },
       'default-dashed': {
         root: [
-          'border border-dashed border-yellow-500 text-yellow-800 hover:bg-yellow-800 hover:text-white duration-200 ease-in',
+          'border border-dashed border-yellow-500 text-yellow-800 not:disabled:hover:bg-yellow-800 not:disabled:hover:text-white duration-200 ease-in',
         ],
       },
       'default-ghost': {
         root: [
-          'text-yellow-500 hover:bg-yellow-100',
-        ],
-      },
-      'default-disabled': {
-        root: [
-          '!shadow-none !cursor-not-allowed !border-yellow-300 !text-gray-300 !bg-yellow-100 dark:!text-white dark:!border-neutral-700 active:!border-yellow-300 active:!bg-yellow-300 peer-checked:!border-yellow-300 hover:!border-yellow-300 !bg-yellow-300',
+          'text-yellow-500 not:disabled:hover:bg-yellow-100',
         ],
       },
       'primary': {
-        root: 'bg-blue-500 hover:bg-blue-600 !disabled:hover:bg-blue-100',
+        root: 'bg-blue-500 hover:enabled:bg-red-600 !disabled:hover:bg-blue-100',
       },
       'primary-light': {
         root: [
-          'border border-blue-500 bg-blue-100 text-blue-800 hover:bg-blue-800 hover:text-white duration-200 ease-in',
+          'border border-blue-500 bg-blue-100 text-blue-800 hover:enabled:bg-blue-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'primary-loading': {
@@ -322,104 +316,92 @@ export default {
 
       'primary-outline': {
         root: [
-          'border border-blue-500 text-blue-800 hover:bg-blue-800 hover:text-white duration-200 ease-in',
+          'border border-blue-500 text-blue-800 hover:enabled:bg-blue-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
 
       'primary-dashed': {
         root: [
-          'border border-dashed border-blue-500 text-blue-800 hover:bg-blue-800 hover:text-white duration-200 ease-in',
+          'border border-dashed border-blue-500 text-blue-800 hover:enabled:bg-blue-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'primary-ghost': {
         root: [
-          'text-blue-500 hover:bg-blue-100',
+          'text-blue-500 hover:enabled:bg-blue-100',
         ],
       },
-      'primary-disabled': {
-        root: '!shadow-none !cursor-not-allowed !border-blue-300 !text-gray-300 !bg-blue-100 dark:!text-white dark:!border-neutral-700 active:!border-blue-300 active:!bg-blue-300 peer-checked:!border-blue-300 hover:!border-blue-300 !bg-blue-300',
-      },
       'success': {
-        root: 'bg-green-500 hover:bg-green-600',
+        root: 'bg-green-500 hover:enabled:bg-green-600',
       },
 
       'success-light': {
         root: [
-          'border border-green-500 bg-green-100 text-green-800 hover:bg-green-800 hover:text-white duration-200 ease-in',
+          'border border-green-500 bg-green-100 text-green-800 hover:enabled:bg-green-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
 
       'success-outline': {
         root: [
-          'border border-green-500 text-green-800 hover:bg-green-800 hover:text-white duration-200 ease-in',
+          'border border-green-500 text-green-800 hover:enabled:bg-green-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
 
       'success-dashed': {
         root: [
-          'border border-dashed border-green-500 text-green-800 hover:bg-green-800 hover:text-white duration-200 ease-in',
+          'border border-dashed border-green-500 text-green-800 hover:enabled:bg-green-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'success-ghost': {
         root: [
-          'text-green-500 hover:bg-green-100',
+          'text-green-500 hover:enabled:bg-green-100',
         ],
       },
-      'success-disabled': {
-        root: '!shadow-none !cursor-not-allowed !border-green-300 !text-gray-300 !bg-green-100 dark:!text-white dark:!border-neutral-700 active:!border-green-300 active:!bg-green-300 peer-checked:!border-green-300 hover:!border-green-300 !bg-green-300',
-      },
       'warning': {
-        root: 'bg-orange-500 hover:bg-orange-600',
+        root: 'bg-orange-500 hover:enabled:bg-orange-600',
       },
       'warning-light': {
         root: [
-          'border border-orange-500 bg-orange-100 text-orange-800 hover:bg-orange-800 hover:text-white duration-200 ease-in',
+          'border border-orange-500 bg-orange-100 text-orange-800 hover:enabled:bg-orange-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'warning-outline': {
         root: [
-          'border border-orange-500 text-orange-800 hover:bg-orange-800 hover:text-white duration-200 ease-in',
+          'border border-orange-500 text-orange-800 hover:enabled:bg-orange-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'warning-dashed': {
         root: [
-          'border border-dashed border-orange-500 text-orange-800 hover:bg-orange-800 hover:text-white duration-200 ease-in',
+          'border border-dashed border-orange-500 text-orange-800 hover:enabled:bg-orange-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'warning-ghost': {
         root: [
-          'text-orange-500 hover:bg-orange-100',
+          'text-orange-500 hover:enabled:bg-orange-100',
         ],
       },
-      'warning-disabled': {
-        root: '!shadow-none !cursor-not-allowed !border-orange-300 !text-gray-300 !bg-orange-100 dark:!text-white dark:!border-neutral-700 active:!border-orange-300 active:!bg-orange-300 peer-checked:!border-orange-300 hover:!border-orange-300 !bg-orange-300',
-      },
       'danger': {
-        root: 'bg-red-500 hover:bg-red-600',
+        root: 'bg-red-500 hover:enabled:bg-red-600',
       },
       'danger-light': {
         root: [
-          'border border-red-500 bg-red-100 text-red-800 hover:bg-red-800 hover:text-white duration-200 ease-in',
+          'border border-red-500 bg-red-100 text-red-800 hover:enabled:bg-red-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'danger-outline': {
         root: [
-          'border border-red-500 text-red-800 hover:bg-red-800 hover:text-white duration-200 ease-in',
+          'border border-red-500 text-red-800 hover:enabled:bg-red-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'danger-ghost': {
         root: [
-          'text-red-500 hover:bg-red-100',
+          'text-red-500 hover:enabled:bg-red-100',
         ],
       },
       'danger-dashed': {
         root: [
-          'border border-dashed border-red-500 text-red-800 hover:bg-red-800 hover:text-white duration-200 ease-in',
+          'border border-dashed border-red-500 text-red-800 hover:enabled:bg-red-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
-      'danger-disabled': {
-        root: '!shadow-none !cursor-not-allowed !border-red-300 !text-gray-300 !bg-red-100 dark:!text-white dark:!border-neutral-700 active:!border-red-300 active:!bg-red-300 peer-checked:!border-red-300 hover:!border-red-300 !bg-red-300',
-      },
     },
   },
 

packages/windi/tailwind.config.cjs

@@ -1 +1,12 @@
-module.exports = require('@windi-ui/tailwind-config/tailwind.config')
+// module.exports = require('@windi-ui/tailwind-config/tailwind.config')
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', 'node_modules/windi-ui/dist/theme/*.{js,ts,json}'],
+  theme: {
+    extend: {
+      backgroundColor: ['disabled'],
+      textColor: ['disabled'],
+    },
+  },
+  plugins: [require('@windi-ui/tailwind-config/tailwind.config')],
+}