-
M
-
M
+
+
+ Button
+
+
+
+
diff --git a/packages/windi/src/Types/componentsTypes/components.ts b/packages/windi/src/Types/componentsTypes/components.ts
index d71a092..a05479a 100644
--- a/packages/windi/src/Types/componentsTypes/components.ts
+++ b/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
diff --git a/packages/windi/src/components/Button/WButton.vue b/packages/windi/src/components/Button/WButton.vue
index baa456e..088bebe 100644
--- a/packages/windi/src/components/Button/WButton.vue
+++ b/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
(),
- to: {
+ type: {
type: String,
+ default: 'button',
+ },
+
+ to: {
+ type: [String, Object] as PropType,
default: null,
},
size: {
@@ -109,11 +115,12 @@ 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],
@@ -121,8 +128,8 @@ const buttonWrapperClass = computed(() => {
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({
-
+
{{ label }}
diff --git a/packages/windi/src/components/Input/WInput.vue b/packages/windi/src/components/Input/WInput.vue
new file mode 100644
index 0000000..c3229b3
--- /dev/null
+++ b/packages/windi/src/components/Input/WInput.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
diff --git a/packages/windi/src/components/Input/index.ts b/packages/windi/src/components/Input/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/packages/windi/src/theme/windiTheme.ts b/packages/windi/src/theme/windiTheme.ts
index 5a23165..adf9132 100644
--- a/packages/windi/src/theme/windiTheme.ts
+++ b/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',
- },
},
},
diff --git a/packages/windi/tailwind.config.cjs b/packages/windi/tailwind.config.cjs
index 34fae17..07df9f4 100644
--- a/packages/windi/tailwind.config.cjs
+++ b/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')],
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5797723..4a7f520 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -162,9 +162,15 @@ importers:
'@heroicons/vue':
specifier: ^2.0.18
version: 2.0.18(vue@3.3.4)
+ classnames:
+ specifier: ^2.3.2
+ version: 2.3.2
tailwind-merge:
specifier: ^1.14.0
version: 1.14.0
+ vue-router:
+ specifier: ^4.2.4
+ version: 4.2.4(vue@3.3.4)
devDependencies:
'@antfu/eslint-config':
specifier: ^0.39.8
@@ -2258,7 +2264,6 @@ packages:
/@vue/devtools-api@6.5.0:
resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
- dev: true
/@vue/language-core@1.8.8(typescript@5.1.6):
resolution: {integrity: sha512-i4KMTuPazf48yMdYoebTkgSOJdFraE4pQf0B+FTOFkbB+6hAfjrSou/UmYWRsWyZV6r4Rc6DDZdI39CJwL0rWw==}
@@ -2902,6 +2907,10 @@ packages:
consola: 3.2.3
dev: true
+ /classnames@2.3.2:
+ resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
+ dev: false
+
/clean-regexp@1.0.0:
resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
engines: {node: '>=4'}
@@ -7453,6 +7462,15 @@ packages:
- supports-color
dev: true
+ /vue-router@4.2.4(vue@3.3.4):
+ resolution: {integrity: sha512-9PISkmaCO02OzPVOMq2w82ilty6+xJmQrarYZDkjZBfl4RvYAlt4PKnEX21oW4KTtWfa9OuO/b3qk1Od3AEdCQ==}
+ peerDependencies:
+ vue: ^3.2.0
+ dependencies:
+ '@vue/devtools-api': 6.5.0
+ vue: 3.3.4
+ dev: false
+
/vue-template-compiler@2.7.14:
resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
dependencies: