@hyvor/design 0.0.28 → 0.0.30

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.
Files changed (9) hide show
  1. package/dist/components/Button/Button.svelte +163 -2
  2. package/dist/components/Button/Button.svelte.d.ts +2 -1
  3. package/dist/components/IconButton/IconButton.svelte.d.ts +1 -1
  4. package/dist/components/Loader/Loader.svelte +73 -27
  5. package/dist/components/Loader/Loader.svelte.d.ts +2 -0
  6. package/dist/components/SplitControl/SplitControl.svelte +1 -1
  7. package/dist/components/TextInput/TextInput.svelte +4 -4
  8. package/dist/components/Tooltip/Tooltip.svelte +1 -0
  9. package/package.json +1 -1
package/dist/components/Button/Button.svelte CHANGED
@@ -2,12 +2,13 @@
2
2
  export let size = "medium";
3
3
  export let color = "accent";
4
4
  export let block = false;
5
+ export let variant = "fill";
5
6
  export let align = "center";
6
7
  </script>
7
8
 
8
9
  <svelte:element
9
10
  this={as}
10
- class="button {size} {color} {align}"
11
+ class="button {size} {color} {variant} {align}"
11
12
  class:block={block}
12
13
 
13
14
  on:keyup
@@ -146,12 +147,172 @@ export let align = "center";
146
147
  }
147
148
 
148
149
  /* styles */
149
- .button.accent {
150
+ /* .button.accent {
151
+ background-color: var(--accent);
152
+ color: var(--accent-text);
153
+ transition: .2s box-shadow;
154
+ --local-hover-shadow-color: var(--accent-light);
155
+ } */
156
+ .button.fill.accent {
150
157
  background-color: var(--accent);
151
158
  color: var(--accent-text);
152
159
  transition: 0.2s box-shadow;
153
160
  --local-hover-shadow-color: var(--accent-light);
154
161
  }
162
+ .button.fill.gray {
163
+ background-color: var(--gray-light);
164
+ color: var(--gray-dark);
165
+ transition: 0.2s box-shadow;
166
+ --local-hover-shadow-color: color-mix(in srgb, var(--gray-light) 40%, transparent);
167
+ }
168
+ .button.fill.green {
169
+ background-color: var(--green-light);
170
+ color: var(--green-dark);
171
+ transition: 0.2s box-shadow;
172
+ --local-hover-shadow-color: color-mix(in srgb, var(--green-light) 40%, transparent);
173
+ }
174
+ .button.fill.red {
175
+ background-color: var(--red-light);
176
+ color: var(--red-dark);
177
+ transition: 0.2s box-shadow;
178
+ --local-hover-shadow-color: color-mix(in srgb, var(--red-light) 40%, transparent);
179
+ }
180
+ .button.fill.blue {
181
+ background-color: var(--blue-light);
182
+ color: var(--blue-dark);
183
+ transition: 0.2s box-shadow;
184
+ --local-hover-shadow-color: color-mix(in srgb, var(--blue-light) 40%, transparent);
185
+ }
186
+ .button.fill.orange {
187
+ background-color: var(--orange-light);
188
+ color: var(--orange-dark);
189
+ transition: 0.2s box-shadow;
190
+ --local-hover-shadow-color: color-mix(in srgb, var(--orange-light) 40%, transparent);
191
+ }
192
+ .button.outline {
193
+ border: 1px solid;
194
+ }
195
+ .button.outline.accent {
196
+ background-color: transparent;
197
+ border-color: var(--accent);
198
+ color: var(--accent);
199
+ transition: 0.2s box-shadow;
200
+ --local-hover-shadow-color: var(--accent-light);
201
+ }
202
+ .button.outline.gray {
203
+ background-color: transparent;
204
+ border-color: var(--gray-dark);
205
+ color: var(--gray-dark);
206
+ transition: 0.2s box-shadow;
207
+ --local-hover-shadow-color: var(--gray-light);
208
+ }
209
+ .button.outline.green {
210
+ background-color: transparent;
211
+ border-color: var(--green-dark);
212
+ color: var(--green-dark);
213
+ transition: 0.2s box-shadow;
214
+ --local-hover-shadow-color: var(--green-light);
215
+ }
216
+ .button.outline.red {
217
+ background-color: transparent;
218
+ border-color: var(--red-dark);
219
+ color: var(--red-dark);
220
+ transition: 0.2s box-shadow;
221
+ --local-hover-shadow-color: var(--red-light);
222
+ }
223
+ .button.outline.blue {
224
+ background-color: transparent;
225
+ border-color: var(--blue-dark);
226
+ color: var(--blue-dark);
227
+ transition: 0.2s box-shadow;
228
+ --local-hover-shadow-color: var(--blue-light);
229
+ }
230
+ .button.outline.orange {
231
+ background-color: transparent;
232
+ border-color: var(--orange-dark);
233
+ color: var(--orange-dark);
234
+ transition: 0.2s box-shadow;
235
+ --local-hover-shadow-color: var(--orange-light);
236
+ }
237
+ .button.outline-fill {
238
+ border: 1px solid;
239
+ }
240
+ .button.outline-fill.accent {
241
+ background-color: var(--accent-light);
242
+ border-color: var(--accent);
243
+ color: var(--accent);
244
+ transition: 0.2s box-shadow;
245
+ --local-hover-shadow-color: color-mix(in srgb, var(--accent-light) 40%, transparent);
246
+ }
247
+ .button.outline-fill.gray {
248
+ background-color: var(--gray-light);
249
+ border-color: var(--gray-dark);
250
+ color: var(--gray-dark);
251
+ transition: 0.2s box-shadow;
252
+ --local-hover-shadow-color: var(--gray-light);
253
+ }
254
+ .button.outline-fill.green {
255
+ background-color: var(--green-light);
256
+ border-color: var(--green-dark);
257
+ color: var(--green-dark);
258
+ transition: 0.2s box-shadow;
259
+ --local-hover-shadow-color: var(--green-light);
260
+ }
261
+ .button.outline-fill.red {
262
+ background-color: var(--red-light);
263
+ border-color: var(--red-dark);
264
+ color: var(--red-dark);
265
+ transition: 0.2s box-shadow;
266
+ --local-hover-shadow-color: var(--red-light);
267
+ }
268
+ .button.outline-fill.blue {
269
+ background-color: var(--blue-light);
270
+ border-color: var(--blue-dark);
271
+ color: var(--blue-dark);
272
+ transition: 0.2s box-shadow;
273
+ --local-hover-shadow-color: var(--blue-light);
274
+ }
275
+ .button.outline-fill.orange {
276
+ background-color: var(--orange-light);
277
+ border-color: var(--orange-dark);
278
+ color: var(--orange-dark);
279
+ transition: 0.2s box-shadow;
280
+ --local-hover-shadow-color: var(--orange-light);
281
+ }
282
+ .button.invisible {
283
+ background-color: transparent;
284
+ transition: 0.2s background-color;
285
+ }
286
+ .button.invisible.accent:hover {
287
+ background-color: var(--accent-light);
288
+ box-shadow: none !important;
289
+ color: var(--text-light);
290
+ }
291
+ .button.invisible.gray:hover {
292
+ background-color: var(--gray-light);
293
+ box-shadow: none !important;
294
+ color: var(--gray-dark);
295
+ }
296
+ .button.invisible.green:hover {
297
+ background-color: var(--green-light);
298
+ box-shadow: none !important;
299
+ color: var(--green-dark);
300
+ }
301
+ .button.invisible.red:hover {
302
+ background-color: var(--red-light);
303
+ box-shadow: none !important;
304
+ color: var(--red-dark);
305
+ }
306
+ .button.invisible.blue:hover {
307
+ background-color: var(--blue-light);
308
+ box-shadow: none !important;
309
+ color: var(--blue-dark);
310
+ }
311
+ .button.invisible.orange:hover {
312
+ background-color: var(--orange-light);
313
+ box-shadow: none !important;
314
+ color: var(--orange-dark);
315
+ }
155
316
 
156
317
  .button.soft {
157
318
  background-color: var(--accent-light);
package/dist/components/Button/Button.svelte.d.ts CHANGED
@@ -4,8 +4,9 @@ declare const __propDef: {
4
4
  [x: string]: any;
5
5
  as?: "button" | "a" | undefined;
6
6
  size?: "small" | "medium" | "large" | "x-small" | undefined;
7
- color?: "danger" | "accent" | "soft" | "light" | "invisible" | undefined;
7
+ color?: "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
8
8
  block?: boolean | undefined;
9
+ variant?: "fill" | "outline" | "invisible" | "outline-fill" | undefined;
9
10
  align?: "start" | "center" | undefined;
10
11
  };
11
12
  events: {
package/dist/components/IconButton/IconButton.svelte.d.ts CHANGED
@@ -4,7 +4,7 @@ declare const __propDef: {
4
4
  [x: string]: any;
5
5
  size?: number | "small" | "medium" | "large" | undefined;
6
6
  color?: "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
7
- variant?: "invisible" | "fill" | "outline" | "outline-fill" | undefined;
7
+ variant?: "fill" | "outline" | "invisible" | "outline-fill" | undefined;
8
8
  as?: "button" | "a" | undefined;
9
9
  };
10
10
  events: {
package/dist/components/Loader/Loader.svelte CHANGED
@@ -1,7 +1,20 @@
1
- <script>export let block = false;
1
+ <script>import {
2
+ IconCheckCircleFill,
3
+ IconXCircleFill
4
+ } from "@hyvor/icons";
5
+ export let block = false;
2
6
  export let full = false;
3
7
  export let padding = "medium";
4
8
  export let size = "medium";
9
+ export let state = "loading";
10
+ export let duration = 2e3;
11
+ $: {
12
+ if (duration && (state === "success" || state === "error")) {
13
+ setTimeout(() => {
14
+ state = "none";
15
+ }, duration);
16
+ }
17
+ }
5
18
  export let color = "var(--accent)";
6
19
  export let colorTrack = "var(--accent-lightest)";
7
20
  export let invert = false;
@@ -33,6 +46,9 @@ padding = typeof padding === "number" ? padding : paddings[padding];
33
46
  class="loader"
34
47
  class:block
35
48
  class:full
49
+ class:success={state === 'success'}
50
+ class:error={state === 'error'}
51
+
36
52
 
37
53
  style:--local-size={size + "px"}
38
54
  style:padding={block ? padding + "px" : undefined}
@@ -40,38 +56,54 @@ padding = typeof padding === "number" ? padding : paddings[padding];
40
56
  >
41
57
 
42
58
 
43
- <span class="loader-wrap">
44
- <svg>
45
- <circle
46
- class="track"
47
- cx="50%"
48
- cy="50%"
49
- r={r + "px"}
50
- fill="none"
51
- stroke-width={strokeWidth}
52
- stroke={colorTrack}
53
- ></circle>
54
- <circle
55
- class="progress"
56
- cx="50%"
57
- cy="50%"
58
- r={r + "px"}
59
- fill="none"
60
- stroke-width={strokeWidth}
61
- stroke={color}
62
- stroke-linecap="round"
63
- stroke-dasharray={strokeDashArray}
64
- stroke-dashoffset={strokeDashOffset}
65
- ></circle>
66
- </svg>
67
- </span>
59
+ {#if state !== 'none'}
60
+ <span class="loader-wrap">
61
+
62
+ {#if state === 'loading'}
63
+ <svg>
64
+ <circle
65
+ class="track"
66
+ cx="50%"
67
+ cy="50%"
68
+ r={r + "px"}
69
+ fill="none"
70
+ stroke-width={strokeWidth}
71
+ stroke={colorTrack}
72
+ ></circle>
73
+ <circle
74
+ class="progress"
75
+ cx="50%"
76
+ cy="50%"
77
+ r={r + "px"}
78
+ fill="none"
79
+ stroke-width={strokeWidth}
80
+ stroke={color}
81
+ stroke-linecap="round"
82
+ stroke-dasharray={strokeDashArray}
83
+ stroke-dashoffset={strokeDashOffset}
84
+ ></circle>
85
+ </svg>
86
+ {:else if state === 'success'}
87
+ <span class="success-icon">
88
+ <IconCheckCircleFill color="var(--green)" width={size} height={size} />
89
+ </span>
90
+ {:else if state === 'error'}
91
+ <span class="error-icon">
92
+ <IconXCircleFill color="var(--red)" width={size} height={size} />
93
+ </span>
94
+ {/if}
95
+
96
+ </span>
97
+
98
+ {/if}
99
+
68
100
 
69
101
  {#if $$slots.default}
70
102
  <div class="message">
71
103
  <slot></slot>
72
104
  </div>
73
105
  {/if}
74
-
106
+
75
107
  </div>
76
108
 
77
109
 
@@ -115,6 +147,10 @@ padding = typeof padding === "number" ? padding : paddings[padding];
115
147
  position: relative;
116
148
  }
117
149
 
150
+ .success-icon, .error-icon {
151
+ animation: scale 0.2s ease-in-out;
152
+ }
153
+
118
154
  svg {
119
155
  width: inherit;
120
156
  height: inherit;
@@ -138,4 +174,14 @@ circle.progress {
138
174
  100% {
139
175
  transform: rotate(270deg);
140
176
  }
177
+ }
178
+ @keyframes scale {
179
+ 0% {
180
+ transform: scale(0.5);
181
+ opacity: 0.4;
182
+ }
183
+ 100% {
184
+ transform: scale(1);
185
+ opacity: 1;
186
+ }
141
187
  }</style>
package/dist/components/Loader/Loader.svelte.d.ts CHANGED
@@ -6,6 +6,8 @@ declare const __propDef: {
6
6
  full?: boolean | undefined;
7
7
  padding?: number | "none" | "small" | "medium" | "large" | undefined;
8
8
  size?: number | "small" | "medium" | "large" | undefined;
9
+ state?: "none" | "error" | "success" | "loading" | undefined;
10
+ duration?: number | null | undefined;
9
11
  color?: string | undefined;
10
12
  colorTrack?: string | undefined;
11
13
  invert?: boolean | undefined;
package/dist/components/SplitControl/SplitControl.svelte CHANGED
@@ -62,12 +62,12 @@ export let caption = "";
62
62
  .left {
63
63
  padding: 15px;
64
64
  flex: 1;
65
- min-width: 200px;
66
65
  }
67
66
 
68
67
  .right {
69
68
  padding: 15px;
70
69
  flex: 3;
70
+ min-width: 0;
71
71
  }
72
72
 
73
73
  .caption-wrap {
package/dist/components/TextInput/TextInput.svelte CHANGED
@@ -65,7 +65,7 @@ let input;
65
65
  .input-wrap {
66
66
  display: inline-flex;
67
67
  align-items: center;
68
- height: 32px;
68
+ height: 30px;
69
69
  padding: 0 15px;
70
70
  border-radius: 20px;
71
71
  background: var(--input);
@@ -100,21 +100,21 @@ input:focus {
100
100
 
101
101
  .input-wrap.size-x-small {
102
102
  padding: 0 15px;
103
- height: 26px;
103
+ height: 20px;
104
104
  font-size: 12px;
105
105
  --local-shadow-size: 1px;
106
106
  }
107
107
 
108
108
  .input-wrap.size-small {
109
109
  padding: 0 15px;
110
- height: 30px;
110
+ height: 26px;
111
111
  font-size: 12px;
112
112
  --local-shadow-size: 1px;
113
113
  }
114
114
 
115
115
  .input-wrap.size-large {
116
116
  padding: 0 20px;
117
- height: 40px;
117
+ height: 36px;
118
118
  font-size: 16px;
119
119
  }
120
120
 
package/dist/components/Tooltip/Tooltip.svelte CHANGED
@@ -107,6 +107,7 @@ onMount(() => {
107
107
  padding: 8px 20px;
108
108
  border-radius: 20px;
109
109
  font-size: 14px;
110
+ z-index: 10000;
110
111
  }
111
112
 
112
113
  .tooltip:after {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyvor/design",
3
- "version": "0.0.28",
3
+ "version": "0.0.30",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "scripts": {