@hyvor/design 2.0.8-beta.4 → 2.0.9
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/cloud/ResourceCreator/Accordian.svelte +2 -4
- package/dist/components/Checkbox/Checkbox.svelte +17 -11
- package/dist/components/Select/Select.svelte +174 -0
- package/dist/components/Select/Select.svelte.d.ts +20 -0
- package/dist/components/Table/Table.svelte +11 -2
- package/dist/components/Table/Table.svelte.d.ts +1 -0
- package/dist/components/Table/TableRow.svelte +31 -4
- package/dist/components/Table/TableRow.svelte.d.ts +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/package.json +1 -1
|
@@ -94,10 +94,8 @@
|
|
|
94
94
|
{#if loading}
|
|
95
95
|
<Loader size="small" />
|
|
96
96
|
{/if}
|
|
97
|
-
<Button
|
|
98
|
-
|
|
99
|
-
onclick={onButtonClick}
|
|
100
|
-
disabled={loading || buttonDisabled}>{buttonText}</Button
|
|
97
|
+
<Button size="large" onclick={onButtonClick} disabled={loading || buttonDisabled}
|
|
98
|
+
>{buttonText}</Button
|
|
101
99
|
>
|
|
102
100
|
</div>
|
|
103
101
|
</div>
|
|
@@ -106,6 +106,9 @@
|
|
|
106
106
|
border-radius: 2px;
|
|
107
107
|
outline: 1px solid var(--accent);
|
|
108
108
|
position: relative;
|
|
109
|
+
transition:
|
|
110
|
+
0.2s background-color,
|
|
111
|
+
0.2s box-shadow;
|
|
109
112
|
}
|
|
110
113
|
|
|
111
114
|
span.placeholder:focus-visible {
|
|
@@ -113,10 +116,10 @@
|
|
|
113
116
|
}
|
|
114
117
|
|
|
115
118
|
/* the check icon */
|
|
116
|
-
span.placeholder
|
|
119
|
+
span.placeholder::after {
|
|
117
120
|
content: '';
|
|
118
121
|
position: absolute;
|
|
119
|
-
display: none;
|
|
122
|
+
/* display: none; */
|
|
120
123
|
|
|
121
124
|
/* check icon */
|
|
122
125
|
left: 4.5px;
|
|
@@ -127,6 +130,7 @@
|
|
|
127
130
|
border-width: 0 3px 3px 0;
|
|
128
131
|
transform: rotate(45deg);
|
|
129
132
|
transition: 0.2s box-shadow;
|
|
133
|
+
opacity: 0;
|
|
130
134
|
}
|
|
131
135
|
|
|
132
136
|
.checkbox-wrap:hover span.placeholder {
|
|
@@ -142,20 +146,22 @@
|
|
|
142
146
|
}
|
|
143
147
|
|
|
144
148
|
input:checked ~ span.placeholder:after {
|
|
145
|
-
|
|
149
|
+
opacity: 1;
|
|
146
150
|
}
|
|
147
|
-
|
|
148
|
-
/* disabled styles */
|
|
149
151
|
input:disabled ~ span.placeholder {
|
|
150
152
|
background-color: var(--accent-light);
|
|
151
|
-
border: none !important;
|
|
152
|
-
opacity: 0.2;
|
|
153
|
-
cursor: not-allowed;
|
|
154
153
|
box-shadow: none !important;
|
|
154
|
+
outline: rgba(0, 0, 0, 0.1);
|
|
155
155
|
}
|
|
156
156
|
|
|
157
|
-
input:disabled
|
|
158
|
-
|
|
159
|
-
|
|
157
|
+
input:disabled ~ span.placeholder::after {
|
|
158
|
+
opacity: 0.6;
|
|
159
|
+
border-color: var(--accent-text);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* If the wrapper contains a disabled input, cursor changes to not-allowed */
|
|
163
|
+
.checkbox-wrap:has(input:disabled),
|
|
164
|
+
.checkbox-wrap:has(input:disabled) label {
|
|
165
|
+
cursor: not-allowed;
|
|
160
166
|
}
|
|
161
167
|
</style>
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
|
|
4
|
+
interface Props {
|
|
5
|
+
value?: string;
|
|
6
|
+
options?: Option[];
|
|
7
|
+
state?: 'default' | 'error' | 'success' | 'warning';
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
size?: 'small' | 'medium' | 'large' | 'x-small';
|
|
10
|
+
children?: Snippet;
|
|
11
|
+
start?: import('svelte').Snippet;
|
|
12
|
+
end?: import('svelte').Snippet;
|
|
13
|
+
block?: boolean;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export interface Option {
|
|
18
|
+
value: string;
|
|
19
|
+
label: string;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
let {
|
|
23
|
+
value = $bindable(''),
|
|
24
|
+
options = [],
|
|
25
|
+
state = 'default',
|
|
26
|
+
placeholder,
|
|
27
|
+
size = 'medium',
|
|
28
|
+
children,
|
|
29
|
+
start,
|
|
30
|
+
end,
|
|
31
|
+
block = true,
|
|
32
|
+
disabled = false,
|
|
33
|
+
...rest
|
|
34
|
+
}: Props = $props();
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<div class="input-wrap state-{state} size-{size}" class:block class:disabled>
|
|
38
|
+
{#if start}
|
|
39
|
+
<span class="slot start">
|
|
40
|
+
{@render start?.()}
|
|
41
|
+
</span>
|
|
42
|
+
{/if}
|
|
43
|
+
<select bind:value {disabled} {...rest}>
|
|
44
|
+
{#if children}
|
|
45
|
+
{@render children()}
|
|
46
|
+
{:else}
|
|
47
|
+
{#if placeholder}
|
|
48
|
+
<option value="" disabled selected={!value}>{placeholder}</option>
|
|
49
|
+
{/if}
|
|
50
|
+
|
|
51
|
+
{#each options as option}
|
|
52
|
+
<option value={option.value}>{option.label}</option>
|
|
53
|
+
{/each}
|
|
54
|
+
{/if}
|
|
55
|
+
</select>
|
|
56
|
+
{#if end}
|
|
57
|
+
<span class="slot end">
|
|
58
|
+
{@render end?.()}
|
|
59
|
+
</span>
|
|
60
|
+
{/if}
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<style>
|
|
64
|
+
.input-wrap {
|
|
65
|
+
display: inline-flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
height: 30px;
|
|
68
|
+
padding: 0 15px;
|
|
69
|
+
border-radius: 20px;
|
|
70
|
+
background: var(--input);
|
|
71
|
+
transition: 0.2s box-shadow;
|
|
72
|
+
font-size: 14px;
|
|
73
|
+
--local-shadow-size: 2px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.input-wrap:focus-within {
|
|
77
|
+
outline: 0;
|
|
78
|
+
box-shadow: 0 0 0 var(--local-shadow-size) var(--accent-light);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
select {
|
|
82
|
+
flex: 1;
|
|
83
|
+
width: 100%;
|
|
84
|
+
border: none;
|
|
85
|
+
font-family: inherit;
|
|
86
|
+
font-size: inherit;
|
|
87
|
+
background: transparent;
|
|
88
|
+
padding: 0;
|
|
89
|
+
margin: 0;
|
|
90
|
+
color: inherit;
|
|
91
|
+
height: 100%;
|
|
92
|
+
cursor: pointer;
|
|
93
|
+
}
|
|
94
|
+
select:focus {
|
|
95
|
+
outline: none;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* Sizes for Select */
|
|
99
|
+
.input-wrap.size-small {
|
|
100
|
+
height: 26px;
|
|
101
|
+
font-size: 12px;
|
|
102
|
+
--local-shadow-size: 1px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.input-wrap.size-large {
|
|
106
|
+
height: 36px;
|
|
107
|
+
font-size: 16px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.input-wrap.size-x-small {
|
|
111
|
+
height: 20px;
|
|
112
|
+
font-size: 12px;
|
|
113
|
+
--local-shadow-size: 1px;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.input-wrap.size-medium {
|
|
117
|
+
height: 30px;
|
|
118
|
+
font-size: 14px;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* styles for states */
|
|
122
|
+
.input-wrap.state-error {
|
|
123
|
+
box-shadow: 0 0 0 var(--local-shadow-size) var(--red-light);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.input-wrap.state-error:focus-within {
|
|
127
|
+
box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--red-light);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.input-wrap.state-success {
|
|
131
|
+
box-shadow: 0 0 0 2px var(--green-light);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.input-wrap.state-success:focus-within {
|
|
135
|
+
box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--green-light);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.input-wrap.state-warning {
|
|
139
|
+
box-shadow: 0 0 0 2px var(--orange-light);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.input-wrap.state-warning:focus-within {
|
|
143
|
+
box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--orange-light);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.input-wrap.block {
|
|
147
|
+
display: flex;
|
|
148
|
+
width: 100%;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.slot {
|
|
152
|
+
display: inline-flex;
|
|
153
|
+
align-items: center;
|
|
154
|
+
color: var(--text-light);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.slot.start {
|
|
158
|
+
margin-right: 8px;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.slot.end {
|
|
162
|
+
margin-left: 8px;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.input-wrap.disabled {
|
|
166
|
+
opacity: 0.5;
|
|
167
|
+
cursor: not-allowed;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.input-wrap.disabled select {
|
|
171
|
+
cursor: not-allowed;
|
|
172
|
+
/* pointer-events: none; */
|
|
173
|
+
}
|
|
174
|
+
</style>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
export interface Option {
|
|
3
|
+
value: string;
|
|
4
|
+
label: string;
|
|
5
|
+
}
|
|
6
|
+
interface Props {
|
|
7
|
+
value?: string;
|
|
8
|
+
options?: Option[];
|
|
9
|
+
state?: 'default' | 'error' | 'success' | 'warning';
|
|
10
|
+
placeholder?: string;
|
|
11
|
+
size?: 'small' | 'medium' | 'large' | 'x-small';
|
|
12
|
+
children?: Snippet;
|
|
13
|
+
start?: import('svelte').Snippet;
|
|
14
|
+
end?: import('svelte').Snippet;
|
|
15
|
+
block?: boolean;
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
}
|
|
18
|
+
declare const Select: import("svelte").Component<Props, {}, "value">;
|
|
19
|
+
type Select = ReturnType<typeof Select>;
|
|
20
|
+
export default Select;
|
|
@@ -2,14 +2,23 @@
|
|
|
2
2
|
interface Props {
|
|
3
3
|
columns: string;
|
|
4
4
|
hover?: boolean;
|
|
5
|
+
style?: 'default' | 'bordered';
|
|
5
6
|
children?: import('svelte').Snippet;
|
|
6
7
|
}
|
|
7
8
|
|
|
8
|
-
let { columns, hover = false, children }: Props = $props();
|
|
9
|
+
let { columns, hover = false, style = 'default', children }: Props = $props();
|
|
9
10
|
|
|
10
11
|
const hoverCss = hover ? '--local-hover-color: var(--hover);' : '';
|
|
11
12
|
</script>
|
|
12
13
|
|
|
13
|
-
<div class="table" style="--local-columns: {columns};{hoverCss}" role="table">
|
|
14
|
+
<div class="table {style}" style="--local-columns: {columns};{hoverCss}" role="table">
|
|
14
15
|
{@render children?.()}
|
|
15
16
|
</div>
|
|
17
|
+
|
|
18
|
+
<style>
|
|
19
|
+
.table.bordered {
|
|
20
|
+
border-radius: 20px;
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
border: 1px solid var(--border);
|
|
23
|
+
}
|
|
24
|
+
</style>
|
|
@@ -3,15 +3,16 @@
|
|
|
3
3
|
|
|
4
4
|
interface Props {
|
|
5
5
|
head?: boolean;
|
|
6
|
+
section?: boolean;
|
|
6
7
|
children: Snippet;
|
|
7
8
|
}
|
|
8
9
|
|
|
9
|
-
const { head = false, children, ...rest }: Props = $props();
|
|
10
|
+
const { head = false, section = false, children, ...rest }: Props = $props();
|
|
10
11
|
|
|
11
|
-
setContext('table-row', { head });
|
|
12
|
+
setContext('table-row', { head, section });
|
|
12
13
|
</script>
|
|
13
14
|
|
|
14
|
-
<div class:head {...rest} role="row">
|
|
15
|
+
<div class:head class:section {...rest} role="row">
|
|
15
16
|
{@render children()}
|
|
16
17
|
</div>
|
|
17
18
|
|
|
@@ -28,11 +29,37 @@
|
|
|
28
29
|
background: var(--accent-lightest);
|
|
29
30
|
margin-bottom: 5px;
|
|
30
31
|
}
|
|
31
|
-
|
|
32
|
+
|
|
33
|
+
:global(.table.bordered) div {
|
|
34
|
+
border-radius: 0;
|
|
35
|
+
padding: 13px 20px;
|
|
36
|
+
border-top: 1px solid var(--border);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
:global(.table.bordered) div.head {
|
|
40
|
+
background: var(--box-background);
|
|
41
|
+
font-weight: 600;
|
|
42
|
+
font-size: 13px;
|
|
43
|
+
padding: 12px 20px;
|
|
44
|
+
margin-bottom: 0;
|
|
45
|
+
border-top: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
div:hover:not(.head, .section) {
|
|
32
49
|
background-color: var(--local-hover-color);
|
|
33
50
|
}
|
|
34
51
|
div > :global(*) {
|
|
35
52
|
padding-right: 5px;
|
|
36
53
|
word-wrap: break-word;
|
|
37
54
|
}
|
|
55
|
+
|
|
56
|
+
div.section {
|
|
57
|
+
background: var(--box-background);
|
|
58
|
+
font-size: 11px;
|
|
59
|
+
font-weight: 600;
|
|
60
|
+
letter-spacing: 0.06em;
|
|
61
|
+
text-transform: uppercase;
|
|
62
|
+
color: var(--text-light);
|
|
63
|
+
padding: 8px 20px;
|
|
64
|
+
}
|
|
38
65
|
</style>
|
|
@@ -40,6 +40,7 @@ export { default as Radio } from './Radio/Radio.svelte';
|
|
|
40
40
|
export { default as Slider } from './Slider/Slider.svelte';
|
|
41
41
|
export { default as SplitControl } from './SplitControl/SplitControl.svelte';
|
|
42
42
|
export { default as Switch } from './Switch/Switch.svelte';
|
|
43
|
+
export { default as Select } from './Select/Select.svelte';
|
|
43
44
|
export { default as Table } from './Table/Table.svelte';
|
|
44
45
|
export { default as TableRow } from './Table/TableRow.svelte';
|
|
45
46
|
export { default as TableCell } from './Table/TableCell.svelte';
|
package/dist/components/index.js
CHANGED
|
@@ -40,6 +40,7 @@ export { default as Radio } from './Radio/Radio.svelte';
|
|
|
40
40
|
export { default as Slider } from './Slider/Slider.svelte';
|
|
41
41
|
export { default as SplitControl } from './SplitControl/SplitControl.svelte';
|
|
42
42
|
export { default as Switch } from './Switch/Switch.svelte';
|
|
43
|
+
export { default as Select } from './Select/Select.svelte';
|
|
43
44
|
export { default as Table } from './Table/Table.svelte';
|
|
44
45
|
export { default as TableRow } from './Table/TableRow.svelte';
|
|
45
46
|
export { default as TableCell } from './Table/TableCell.svelte';
|