Skip to content

Commit e0f8c1b

Browse files
Kamona-WDKamona-WD
committed
wip
1 parent d2eaddd commit e0f8c1b

17 files changed

+393
-191
lines changed

Diff for: ‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,5 @@ dist-ssr
2222
*.njsproj
2323
*.sln
2424
*.sw?
25+
26+
/.out

Diff for: ‎package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
".": {
2222
"import": "./dist/kui-vue.es.js"
2323
},
24-
"./dist/style.css": "./dist/style.css"
24+
"./style": "./dist/style.css"
2525
},
2626
"scripts": {
2727
"dev": "vite",
@@ -40,8 +40,9 @@
4040
"@vitejs/plugin-vue-jsx": "^4.0.1",
4141
"autoprefixer": "^10.4.20",
4242
"postcss": "^8.4.45",
43+
"postcss-import": "^16.1.0",
4344
"prettier": "^3.3.3",
44-
"tailwindcss": "^3.4.10",
45+
"tailwindcss": "^3.4.11",
4546
"vite": "^5.4.1"
4647
}
4748
}

Diff for: ‎postcss.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export default {
22
plugins: {
3+
// 'postcss-import': {},
34
tailwindcss: {},
45
autoprefixer: {},
56
},

Diff for: ‎src/components/button/Button.jsx

+36-10
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { defineComponent, toRefs } from 'vue'
1+
import { computed, defineComponent, toRefs } from 'vue'
22
import { Icon } from '@iconify/vue'
33

44
const baseClasses = [
@@ -8,7 +8,7 @@ const baseClasses = [
88
'gap-2',
99
'transition',
1010
'min-w-max',
11-
'font-semibold',
11+
'font-medium',
1212
'select-none',
1313
'disabled:opacity-50',
1414
'disabled:cursor-not-allowed',
@@ -66,6 +66,11 @@ const colorClasses = {
6666
filled: '',
6767
outline: 'border border-blue-500',
6868
},
69+
transparent: {
70+
default: 'focus:ring-primary',
71+
filled: 'text-gray-800 hover:text-gray-700 dark:text-gray-200 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-dark-eval-0',
72+
outline: 'text-primary hover:text-primary-light',
73+
},
6974
}
7075

7176
const focusOffsetClasses = ['focus:ring-offset-2']
@@ -86,6 +91,7 @@ export const baseButtonProps = {
8691
'white',
8792
'black',
8893
'link',
94+
'transparent',
8995
].includes(value)
9096
},
9197
},
@@ -119,7 +125,8 @@ export default defineComponent({
119125
...baseButtonProps,
120126

121127
as: {
122-
type: String,
128+
// type: String,
129+
required: false,
123130
default: 'a',
124131
},
125132
to: {
@@ -170,6 +177,14 @@ export default defineComponent({
170177
default:
171178
'focus:ring-offset-white dark:focus:ring-offset-dark-eval-2',
172179
},
180+
noPadding: {
181+
type: Boolean,
182+
default: false,
183+
},
184+
active: {
185+
type: Boolean,
186+
default: false,
187+
}
173188
},
174189

175190
emits: ['click'],
@@ -184,28 +199,34 @@ export default defineComponent({
184199
href,
185200
iconOnly,
186201
srText,
187-
text,
188202
external,
189203
outline,
190204
block,
191-
icon,
205+
// icon,
192206
startIcon,
193207
endIcon,
194208
ringOffsetColorClass,
209+
noPadding,
195210
} = props
196211

197-
const { disabled } = toRefs(props)
212+
const { disabled, icon, text } = toRefs(props)
213+
214+
const vClass = computed(() => {
215+
return ''
216+
})
198217

199218
const classes = [
200219
...baseClasses,
201220
colorClasses[variant].default,
221+
props.active && colorClasses[variant].default?.[props.active],
202222
outline
203223
? colorClasses[variant].outline
204224
: colorClasses[variant].filled,
205225
...focusClasses,
206226
ringOffsetColorClass,
207227
focusOffsetClasses,
208228
block ? 'w-full' : null,
229+
noPadding ? null :
209230
iconOnly
210231
? {
211232
'p-1.5': size == 'sm',
@@ -225,6 +246,7 @@ export default defineComponent({
225246
'pointer-events-none opacity-50':
226247
(href || props.to) && disabled.value,
227248
},
249+
// vClasses,
228250
]
229251

230252
const iconSizeClasses = [
@@ -259,12 +281,12 @@ export default defineComponent({
259281
>
260282
{srText && <span class="sr-only">{srText}</span>}
261283
{icon && iconOnly && (
262-
<Icon icon={icon} class={iconSizeClasses} />
284+
<Icon icon={icon.value} class={iconSizeClasses} />
263285
)}
264286
{startIcon && (
265287
<Icon icon={startIcon} class={iconSizeClasses} />
266288
)}
267-
{text ?? slots.default?.({ iconSizeClasses })}
289+
{text.value ?? slots.default?.({ iconSizeClasses })}
268290
{endIcon && <Icon icon={endIcon} class={iconSizeClasses} />}
269291
</Tag>
270292
)
@@ -280,10 +302,14 @@ export default defineComponent({
280302
>
281303
{srText && <span class="sr-only">{srText}</span>}
282304
{icon && iconOnly && (
283-
<Icon icon={icon} class={iconSizeClasses} />
305+
<Icon icon={icon.value} class={[
306+
iconSizeClasses,
307+
// 'fill-current',
308+
// 'stroke-current'
309+
]} />
284310
)}
285311
{startIcon && <Icon icon={startIcon} class={iconSizeClasses} />}
286-
{text ?? slots.default?.({ iconSizeClasses })}
312+
{text.value ?? slots.default?.({ iconSizeClasses })}
287313
{endIcon && <Icon icon={endIcon} class={iconSizeClasses} />}
288314
</button>
289315
)

Diff for: ‎src/components/form/Checkbox.jsx

+45-20
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,67 @@
11
import { defineComponent, ref } from 'vue'
2+
import Label from './Label'
3+
import { baseInputProps } from './Input'
24

35
export default defineComponent({
46
props: {
7+
...baseInputProps,
58
checked: {
69
type: [Array, Boolean],
710
default: false,
811
},
912
value: {
1013
default: null,
1114
},
15+
label: {
16+
type: [String, undefined],
17+
default: undefined
18+
},
1219
},
1320

21+
inheritAttrs: false,
22+
1423
emits: ['update:checked'],
1524

16-
setup(props, { emit }) {
17-
const { value, checked } = props
25+
setup(props, { emit, attrs }) {
26+
const { value, checked, label } = props
1827

1928
const isChecked = ref(checked)
2029

2130
return () => (
22-
<input
23-
type="checkbox"
24-
class={[
25-
'text-primary-500',
26-
'border-gray-400',
27-
'rounded',
28-
'focus:border-primary-300 focus:ring focus:ring-primary-500',
29-
'dark:border-gray-600',
30-
'dark:bg-dark-eval-1',
31-
'dark:focus:ring-offset-dark-eval-1',
32-
'transform scale-125',
33-
]}
34-
value={value}
35-
v-model={isChecked.value}
36-
onChange={() => {
37-
emit('update:checked', isChecked.value)
38-
}}
39-
/>
31+
<Label
32+
class="inline-flex items-center gap-2"
33+
>
34+
<input
35+
{...attrs}
36+
type="checkbox"
37+
class={[
38+
'focus:ring',
39+
'rounded',
40+
'text-primary',
41+
'border-gray-400',
42+
'focus:border-primary-300 focus:ring-primary',
43+
'dark:border-gray-600',
44+
'dark:bg-dark-eval-1',
45+
'dark:focus:ring-offset-dark-eval-1',
46+
{
47+
'transform scale-110': props.size == 'sm',
48+
'transform scale-125': props.size == 'base',
49+
'transform scale-150': props.size == 'lg',
50+
}
51+
]}
52+
value={value}
53+
v-model={isChecked.value}
54+
onChange={() => {
55+
emit('update:checked', isChecked.value)
56+
}}
57+
/>
58+
59+
{label && (
60+
<span class="text-sm">
61+
{label}
62+
</span>
63+
)}
64+
</Label>
4065
)
4166
},
4267
})

0 commit comments

Comments
 (0)