@asgard-js/react 0.0.43-canary.22 → 0.0.43-canary.23
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/index.js +3780 -3782
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/components/chatbot/api-key-input/api-key-input.module.scss +27 -47
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@asgard-js/react",
|
|
3
|
-
"version": "0.0.43-canary.
|
|
3
|
+
"version": "0.0.43-canary.23",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"vitest": "^1.6.0"
|
|
55
55
|
},
|
|
56
56
|
"peerDependencies": {
|
|
57
|
-
"@asgard-js/core": "^0.0.42-canary.
|
|
57
|
+
"@asgard-js/core": "^0.0.42-canary.23",
|
|
58
58
|
"react": "^18.0.0",
|
|
59
59
|
"react-dom": "^18.0.0"
|
|
60
60
|
},
|
|
@@ -1,27 +1,35 @@
|
|
|
1
1
|
.api_key_input {
|
|
2
|
-
width:
|
|
2
|
+
width: 360px;
|
|
3
|
+
max-width: calc(100vw - 32px);
|
|
3
4
|
background-color: var(--asg-color-bg);
|
|
4
5
|
border-radius: 12px;
|
|
5
|
-
padding:
|
|
6
|
+
padding: 24px;
|
|
6
7
|
border: 0.5px solid var(--asg-color-border);
|
|
8
|
+
|
|
9
|
+
@media (max-width: 480px) {
|
|
10
|
+
width: 100%;
|
|
11
|
+
max-width: none;
|
|
12
|
+
padding: 20px;
|
|
13
|
+
margin: 0 16px;
|
|
14
|
+
}
|
|
7
15
|
}
|
|
8
16
|
|
|
9
17
|
.api_key_input__header {
|
|
10
18
|
display: flex;
|
|
11
19
|
flex-direction: column;
|
|
12
|
-
gap:
|
|
20
|
+
gap: 8px;
|
|
13
21
|
align-items: center;
|
|
14
|
-
margin-bottom:
|
|
22
|
+
margin-bottom: 20px;
|
|
15
23
|
}
|
|
16
24
|
|
|
17
25
|
.api_key_input__icon {
|
|
18
|
-
width:
|
|
19
|
-
height:
|
|
26
|
+
width: 40px;
|
|
27
|
+
height: 40px;
|
|
20
28
|
}
|
|
21
29
|
|
|
22
30
|
.api_key_input__title {
|
|
23
31
|
margin: 0;
|
|
24
|
-
font-size:
|
|
32
|
+
font-size: 20px;
|
|
25
33
|
font-weight: 500;
|
|
26
34
|
color: white;
|
|
27
35
|
}
|
|
@@ -47,7 +55,7 @@
|
|
|
47
55
|
|
|
48
56
|
.api_key_input__input {
|
|
49
57
|
width: 100%;
|
|
50
|
-
height:
|
|
58
|
+
height: 48px;
|
|
51
59
|
padding: 0 40px 0 12px;
|
|
52
60
|
font-size: 14px;
|
|
53
61
|
font-weight: 400;
|
|
@@ -59,6 +67,11 @@
|
|
|
59
67
|
transition: all 0.2s ease;
|
|
60
68
|
box-sizing: border-box;
|
|
61
69
|
|
|
70
|
+
@media (max-width: 480px) {
|
|
71
|
+
height: 44px;
|
|
72
|
+
font-size: 16px;
|
|
73
|
+
}
|
|
74
|
+
|
|
62
75
|
&::placeholder {
|
|
63
76
|
color: rgba(255, 255, 255, 0.4);
|
|
64
77
|
}
|
|
@@ -114,12 +127,12 @@
|
|
|
114
127
|
.api_key_input__error_message {
|
|
115
128
|
margin-top: 6px;
|
|
116
129
|
font-size: 12px;
|
|
117
|
-
color:
|
|
130
|
+
color: #FF4D4F;
|
|
118
131
|
}
|
|
119
132
|
|
|
120
133
|
.api_key_input__submit_button {
|
|
121
134
|
width: 100%;
|
|
122
|
-
height:
|
|
135
|
+
height: 48px;
|
|
123
136
|
border: none;
|
|
124
137
|
border-radius: 6px;
|
|
125
138
|
background-color: #5856d6;
|
|
@@ -130,47 +143,14 @@
|
|
|
130
143
|
transition: all 0.2s ease;
|
|
131
144
|
outline: none;
|
|
132
145
|
|
|
146
|
+
@media (max-width: 480px) {
|
|
147
|
+
height: 44px;
|
|
148
|
+
font-size: 16px;
|
|
149
|
+
}
|
|
133
150
|
|
|
134
151
|
&:disabled {
|
|
135
152
|
opacity: 0.5;
|
|
136
153
|
cursor: not-allowed;
|
|
137
154
|
transform: none;
|
|
138
155
|
}
|
|
139
|
-
|
|
140
|
-
&--loading {
|
|
141
|
-
position: relative;
|
|
142
|
-
color: transparent;
|
|
143
|
-
|
|
144
|
-
&::after {
|
|
145
|
-
content: '';
|
|
146
|
-
position: absolute;
|
|
147
|
-
top: 50%;
|
|
148
|
-
left: 50%;
|
|
149
|
-
width: 16px;
|
|
150
|
-
height: 16px;
|
|
151
|
-
margin-left: -8px;
|
|
152
|
-
margin-top: -8px;
|
|
153
|
-
border: 2px solid transparent;
|
|
154
|
-
border-top: 2px solid white;
|
|
155
|
-
border-radius: 50%;
|
|
156
|
-
animation: spin 1s linear infinite;
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
@keyframes spin {
|
|
162
|
-
0% {
|
|
163
|
-
transform: rotate(0deg);
|
|
164
|
-
}
|
|
165
|
-
100% {
|
|
166
|
-
transform: rotate(360deg);
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
// 響應式設計
|
|
171
|
-
@media (max-width: 280px) {
|
|
172
|
-
.api_key_input {
|
|
173
|
-
width: 100%;
|
|
174
|
-
min-width: 200px;
|
|
175
|
-
}
|
|
176
156
|
}
|