jky-component-lib 0.0.9 → 0.0.10
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/dist/es/button/style.css +80 -66
- package/dist/es/index.js +1 -0
- package/dist/es/package.json.js +1 -1
- package/dist/es/say-hello/style.css +1 -1
- package/dist/es/style.css +429 -0
- package/dist/es/styles.css +1 -1
- package/dist/lib/button/style.css +80 -66
- package/dist/lib/index.js +1 -0
- package/dist/lib/package.json.js +1 -1
- package/dist/lib/say-hello/style.css +1 -1
- package/dist/lib/style.css +429 -0
- package/dist/lib/styles.css +1 -1
- package/dist/umd/index.js +2 -2
- package/dist/umd/styles.css +1 -1
- package/package.json +1 -1
package/dist/es/button/style.css
CHANGED
|
@@ -1,113 +1,127 @@
|
|
|
1
|
+
|
|
2
|
+
/* 禁止使用 @apply，所有 TailwindCSS 工具类直接写在 class 中 */
|
|
3
|
+
/* 样式文件仅用于定义组件特定的自定义纯 CSS 样式 */
|
|
1
4
|
/* Button 组件样式 - 使用 TailwindCSS 4.x */
|
|
2
|
-
@reference '../styles.css';
|
|
3
5
|
.jky-button {
|
|
4
|
-
/* 使用 TailwindCSS 工具类 */
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
/* 基础样式 - 使用 TailwindCSS 工具类 */
|
|
7
|
+
display: inline-flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
font-weight: 500;
|
|
11
|
+
border-radius: 0.375rem;
|
|
12
|
+
transition: color 200ms, background-color 200ms;
|
|
11
13
|
cursor: pointer;
|
|
14
|
+
border: 1px solid transparent;
|
|
12
15
|
|
|
13
16
|
/* 默认尺寸 */
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
height: 40px;
|
|
18
|
+
padding: 0 16px;
|
|
19
|
+
font-size: 14px;
|
|
20
|
+
}
|
|
21
|
+
/* 焦点样式 */
|
|
22
|
+
.jky-button:focus-visible {
|
|
23
|
+
outline: 2px solid transparent;
|
|
24
|
+
outline-offset: 2px;
|
|
25
|
+
box-shadow: 0 0 0 2px white, 0 0 0 4px #000;
|
|
26
|
+
}
|
|
27
|
+
/* 禁用状态 */
|
|
28
|
+
.jky-button.is-disabled {
|
|
29
|
+
opacity: 0.5;
|
|
30
|
+
pointer-events: none;
|
|
31
|
+
cursor: not-allowed;
|
|
32
|
+
}
|
|
33
|
+
/* 加载状态 */
|
|
34
|
+
.jky-button.is-loading {
|
|
35
|
+
position: relative;
|
|
36
|
+
pointer-events: none;
|
|
37
|
+
}
|
|
38
|
+
.jky-button__loading {
|
|
39
|
+
position: absolute;
|
|
40
|
+
inset: 0;
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
justify-content: center;
|
|
44
|
+
}
|
|
45
|
+
.loading-spinner {
|
|
46
|
+
width: 1.25rem;
|
|
47
|
+
height: 1.25rem;
|
|
48
|
+
animation: spin 1s linear infinite;
|
|
49
|
+
}
|
|
50
|
+
@keyframes spin {
|
|
51
|
+
from {
|
|
52
|
+
transform: rotate(0deg);
|
|
53
|
+
}
|
|
54
|
+
to {
|
|
55
|
+
transform: rotate(360deg);
|
|
56
|
+
}
|
|
21
57
|
}
|
|
22
|
-
|
|
23
58
|
/* 按钮类型 */
|
|
24
59
|
.jky-button--primary {
|
|
25
|
-
background-color:
|
|
26
|
-
color:
|
|
60
|
+
background-color: #007bff;
|
|
61
|
+
color: #ffffff;
|
|
27
62
|
}
|
|
28
63
|
.jky-button--primary:hover {
|
|
29
|
-
background-color:
|
|
64
|
+
background-color: #0056b3;
|
|
30
65
|
}
|
|
31
66
|
.jky-button--success {
|
|
32
|
-
background-color:
|
|
33
|
-
color:
|
|
67
|
+
background-color: #28a745;
|
|
68
|
+
color: #ffffff;
|
|
34
69
|
}
|
|
35
70
|
.jky-button--success:hover {
|
|
36
|
-
background-color:
|
|
71
|
+
background-color: #1e7e34;
|
|
37
72
|
}
|
|
38
73
|
.jky-button--warning {
|
|
39
|
-
background-color:
|
|
40
|
-
color:
|
|
74
|
+
background-color: #ffc107;
|
|
75
|
+
color: #212529;
|
|
41
76
|
}
|
|
42
77
|
.jky-button--warning:hover {
|
|
43
|
-
background-color:
|
|
78
|
+
background-color: #e0a800;
|
|
44
79
|
}
|
|
45
80
|
.jky-button--danger {
|
|
46
|
-
background-color:
|
|
47
|
-
color:
|
|
81
|
+
background-color: #dc3545;
|
|
82
|
+
color: #ffffff;
|
|
48
83
|
}
|
|
49
84
|
.jky-button--danger:hover {
|
|
50
|
-
background-color:
|
|
85
|
+
background-color: #bd2130;
|
|
51
86
|
}
|
|
52
87
|
.jky-button--info {
|
|
53
|
-
background-color:
|
|
54
|
-
color:
|
|
88
|
+
background-color: #6c757d;
|
|
89
|
+
color: #ffffff;
|
|
55
90
|
}
|
|
56
91
|
.jky-button--info:hover {
|
|
57
|
-
background-color:
|
|
92
|
+
background-color: #545b62;
|
|
58
93
|
}
|
|
59
|
-
|
|
60
94
|
/* 按钮尺寸 */
|
|
61
95
|
.jky-button--large {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
96
|
+
height: 48px;
|
|
97
|
+
padding: 0 24px;
|
|
98
|
+
font-size: 16px;
|
|
65
99
|
}
|
|
66
100
|
.jky-button--default {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
101
|
+
height: 40px;
|
|
102
|
+
padding: 0 16px;
|
|
103
|
+
font-size: 14px;
|
|
70
104
|
}
|
|
71
105
|
.jky-button--small {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
/* 禁用状态 */
|
|
78
|
-
.jky-button.is-disabled {
|
|
79
|
-
opacity: 0.5;
|
|
80
|
-
cursor: not-allowed;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/* 加载状态 */
|
|
84
|
-
.jky-button.is-loading {
|
|
85
|
-
position: relative;
|
|
86
|
-
pointer-events: none;
|
|
106
|
+
height: 32px;
|
|
107
|
+
padding: 0 12px;
|
|
108
|
+
font-size: 12px;
|
|
87
109
|
}
|
|
88
|
-
.jky-button__loading {
|
|
89
|
-
@apply absolute inset-0 flex items-center justify-center;
|
|
90
|
-
}
|
|
91
|
-
.loading-spinner {
|
|
92
|
-
@apply w-5 h-5 animate-spin;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
110
|
/* 边框按钮样式 */
|
|
96
111
|
.jky-button--primary.is-border {
|
|
97
112
|
background-color: transparent;
|
|
98
|
-
border-color:
|
|
99
|
-
color:
|
|
113
|
+
border-color: #007bff;
|
|
114
|
+
color: #007bff;
|
|
100
115
|
}
|
|
101
116
|
.jky-button--primary.is-border:hover {
|
|
102
|
-
background-color:
|
|
117
|
+
background-color: rgba(0, 123, 255, 0.1);
|
|
103
118
|
}
|
|
104
|
-
|
|
105
119
|
/* 文字按钮样式 */
|
|
106
120
|
.jky-button--text {
|
|
107
121
|
background-color: transparent;
|
|
108
|
-
color:
|
|
122
|
+
color: #007bff;
|
|
109
123
|
border-color: transparent;
|
|
110
124
|
}
|
|
111
125
|
.jky-button--text:hover {
|
|
112
|
-
background-color:
|
|
126
|
+
background-color: rgba(0, 123, 255, 0.1);
|
|
113
127
|
}
|
package/dist/es/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { components } from "./components.js";
|
|
2
2
|
import { createInstaller } from "./utils/installer.js";
|
|
3
|
+
/* empty css */
|
|
3
4
|
import { StarterLibVue3Resolver } from "./resolver.js";
|
|
4
5
|
import { JkyButton } from "./button/index.js";
|
|
5
6
|
import { JkySayHello } from "./say-hello/index.js";
|
package/dist/es/package.json.js
CHANGED