cynx-lib 1.3.65 → 1.3.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/ui/components/Button.jsx +31 -2
- package/vue/components/Button.vue +17 -0
package/package.json
CHANGED
package/ui/components/Button.jsx
CHANGED
|
@@ -51,6 +51,33 @@ const VARIANTS = {
|
|
|
51
51
|
hoverBg: 'var(--grey-1,#f5f5f8)',
|
|
52
52
|
hoverBorder: 'var(--grey-2,#ebebee)',
|
|
53
53
|
},
|
|
54
|
+
plain: {
|
|
55
|
+
background: 'transparent',
|
|
56
|
+
color: 'var(--t2,#797b8d)',
|
|
57
|
+
border: '1px solid transparent',
|
|
58
|
+
hoverColor: 'var(--t1,#1a1a2e)',
|
|
59
|
+
hoverBg: 'var(--grey-1,#f5f5f8)',
|
|
60
|
+
hoverBorder: 'transparent',
|
|
61
|
+
boxShadow: 'none',
|
|
62
|
+
},
|
|
63
|
+
flat: {
|
|
64
|
+
background: 'transparent',
|
|
65
|
+
color: 'var(--t2,#797b8d)',
|
|
66
|
+
border: '1px solid transparent',
|
|
67
|
+
hoverColor: 'var(--t1,#1a1a2e)',
|
|
68
|
+
hoverBg: 'var(--grey-1,#f5f5f8)',
|
|
69
|
+
hoverBorder: 'transparent',
|
|
70
|
+
boxShadow: 'none',
|
|
71
|
+
},
|
|
72
|
+
icon: {
|
|
73
|
+
background: 'transparent',
|
|
74
|
+
color: 'var(--t2,#797b8d)',
|
|
75
|
+
border: '1px solid transparent',
|
|
76
|
+
hoverColor: 'var(--t1,#1a1a2e)',
|
|
77
|
+
hoverBg: 'var(--grey-1,#f5f5f8)',
|
|
78
|
+
hoverBorder: 'transparent',
|
|
79
|
+
boxShadow: 'none',
|
|
80
|
+
},
|
|
54
81
|
outline: {
|
|
55
82
|
background: 'transparent',
|
|
56
83
|
color: 'var(--accent,#f99e2c)',
|
|
@@ -102,7 +129,7 @@ export default function Button({
|
|
|
102
129
|
const v = VARIANTS[variant] || VARIANTS.default;
|
|
103
130
|
const s = SIZES[size] || SIZES.md;
|
|
104
131
|
|
|
105
|
-
const isIconOnly = variant === 'icon';
|
|
132
|
+
const isIconOnly = variant === 'icon' || (!children && (Boolean(icon) || Boolean(iconRight)));
|
|
106
133
|
|
|
107
134
|
return (
|
|
108
135
|
<button
|
|
@@ -122,7 +149,7 @@ export default function Button({
|
|
|
122
149
|
transition: 'all .14s',
|
|
123
150
|
letterSpacing: '-.01em',
|
|
124
151
|
outline: 'none',
|
|
125
|
-
boxShadow: 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
|
|
152
|
+
boxShadow: v.boxShadow !== undefined ? v.boxShadow : 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
|
|
126
153
|
opacity: disabled ? 0.45 : 1,
|
|
127
154
|
pointerEvents: disabled ? 'none' : undefined,
|
|
128
155
|
background: v.background,
|
|
@@ -132,6 +159,8 @@ export default function Button({
|
|
|
132
159
|
fontSize: s.fontSize,
|
|
133
160
|
height: s.height,
|
|
134
161
|
width: isIconOnly ? s.height : undefined,
|
|
162
|
+
minWidth: isIconOnly ? s.height : undefined,
|
|
163
|
+
maxWidth: isIconOnly ? s.height : undefined,
|
|
135
164
|
...(v.paddingLeft !== undefined && { paddingLeft: v.paddingLeft }),
|
|
136
165
|
...(v.paddingRight !== undefined && { paddingRight: v.paddingRight }),
|
|
137
166
|
...(v.boxShadow !== undefined && { boxShadow: v.boxShadow }),
|
|
@@ -60,6 +60,23 @@ const VARIANTS: Record<string, any> = {
|
|
|
60
60
|
hoverShadow: "0 2px 8px rgba(249,158,44,.25)",
|
|
61
61
|
},
|
|
62
62
|
ghost: {
|
|
63
|
+
background: "var(--surface, #ffffff)",
|
|
64
|
+
color: "var(--t2, #797b8d)",
|
|
65
|
+
border: "1px solid var(--bd, #d7d8e0)",
|
|
66
|
+
hoverColor: "var(--t1, #1a1a2e)",
|
|
67
|
+
hoverBg: "var(--grey-1, #f5f5f8)",
|
|
68
|
+
hoverBorder: "var(--grey-2, #ebebee)",
|
|
69
|
+
},
|
|
70
|
+
plain: {
|
|
71
|
+
background: "transparent",
|
|
72
|
+
color: "var(--t2, #797b8d)",
|
|
73
|
+
border: "1px solid transparent",
|
|
74
|
+
hoverColor: "var(--t1, #1a1a2e)",
|
|
75
|
+
hoverBg: "var(--grey-1, #f5f5f8)",
|
|
76
|
+
hoverBorder: "transparent",
|
|
77
|
+
boxShadow: "none",
|
|
78
|
+
},
|
|
79
|
+
flat: {
|
|
63
80
|
background: "transparent",
|
|
64
81
|
color: "var(--t2, #797b8d)",
|
|
65
82
|
border: "1px solid transparent",
|