@hyvor/design 0.0.20 → 0.0.22
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/components/Box/Box.svelte +9 -1
- package/dist/components/NavLink/NavLink.svelte +1 -1
- package/dist/components/Tag/Tag.svelte +110 -0
- package/dist/components/Tag/Tag.svelte.d.ts +23 -0
- package/dist/components/Toast/ToastMessage.svelte +1 -0
- package/dist/components/Toast/ToastProvider.svelte +2 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/variables.scss +5 -0
- package/package.json +1 -1
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
<script>export let size = "medium";
|
|
2
|
+
export let color = "default";
|
|
3
|
+
export let interactive = false;
|
|
4
|
+
export let outline = false;
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<span
|
|
8
|
+
class="color-{color} style-{outline ? 'outline' : 'default'} size-{size}"
|
|
9
|
+
class:interactive
|
|
10
|
+
class:has-start={$$slots.start}
|
|
11
|
+
class:has-end={$$slots.end}
|
|
12
|
+
>
|
|
13
|
+
|
|
14
|
+
{#if $$slots.start}
|
|
15
|
+
<slot name="start" />
|
|
16
|
+
{/if}
|
|
17
|
+
|
|
18
|
+
<slot />
|
|
19
|
+
|
|
20
|
+
{#if $$slots.end}
|
|
21
|
+
<slot name="end" />
|
|
22
|
+
{/if}
|
|
23
|
+
|
|
24
|
+
</span>
|
|
25
|
+
|
|
26
|
+
<style>span {
|
|
27
|
+
vertical-align: middle;
|
|
28
|
+
border-radius: 20px;
|
|
29
|
+
display: inline-flex;
|
|
30
|
+
align-items: center;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
span.has-start :global(> *:first-child) {
|
|
34
|
+
margin-right: 5px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
span.has-end :global(> *:last-child) {
|
|
38
|
+
margin-left: 5px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
span.size-x-small {
|
|
42
|
+
font-size: 10px;
|
|
43
|
+
padding: 2px 7px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
span.size-small {
|
|
47
|
+
font-size: 12px;
|
|
48
|
+
padding: 2px 9px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
span.size-medium {
|
|
52
|
+
font-size: 14px;
|
|
53
|
+
padding: 3px 12px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
span.size-large {
|
|
57
|
+
font-size: 16px;
|
|
58
|
+
padding: 4px 16px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
span.interactive {
|
|
62
|
+
cursor: pointer;
|
|
63
|
+
transition: opacity 0.1s;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
span.interactive:hover {
|
|
67
|
+
opacity: 0.7;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
span.style-default.color-default {
|
|
71
|
+
background-color: var(--gray-light);
|
|
72
|
+
color: var(--gray-dark);
|
|
73
|
+
}
|
|
74
|
+
span.style-default.color-green {
|
|
75
|
+
background-color: var(--green-light);
|
|
76
|
+
color: var(--green-dark);
|
|
77
|
+
}
|
|
78
|
+
span.style-default.color-red {
|
|
79
|
+
background-color: var(--red-light);
|
|
80
|
+
color: var(--red-dark);
|
|
81
|
+
}
|
|
82
|
+
span.style-default.color-blue {
|
|
83
|
+
background-color: var(--blue-light);
|
|
84
|
+
color: var(--blue-dark);
|
|
85
|
+
}
|
|
86
|
+
span.style-default.color-orange {
|
|
87
|
+
background-color: var(--orange-light);
|
|
88
|
+
color: var(--orange-dark);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
span.style-outline.color-default {
|
|
92
|
+
color: var(--gray-dark);
|
|
93
|
+
border: 1px solid var(--gray-dark);
|
|
94
|
+
}
|
|
95
|
+
span.style-outline.color-green {
|
|
96
|
+
color: var(--green-dark);
|
|
97
|
+
border: 1px solid var(--green-dark);
|
|
98
|
+
}
|
|
99
|
+
span.style-outline.color-red {
|
|
100
|
+
color: var(--red-dark);
|
|
101
|
+
border: 1px solid var(--red-dark);
|
|
102
|
+
}
|
|
103
|
+
span.style-outline.color-blue {
|
|
104
|
+
color: var(--blue-dark);
|
|
105
|
+
border: 1px solid var(--blue-dark);
|
|
106
|
+
}
|
|
107
|
+
span.style-outline.color-orange {
|
|
108
|
+
color: var(--orange-dark);
|
|
109
|
+
border: 1px solid var(--orange-dark);
|
|
110
|
+
}</style>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
size?: "small" | "medium" | "large" | "x-small" | undefined;
|
|
5
|
+
color?: "default" | "green" | "red" | "blue" | "orange" | undefined;
|
|
6
|
+
interactive?: boolean | undefined;
|
|
7
|
+
outline?: boolean | undefined;
|
|
8
|
+
};
|
|
9
|
+
events: {
|
|
10
|
+
[evt: string]: CustomEvent<any>;
|
|
11
|
+
};
|
|
12
|
+
slots: {
|
|
13
|
+
start: {};
|
|
14
|
+
default: {};
|
|
15
|
+
end: {};
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
export type TagProps = typeof __propDef.props;
|
|
19
|
+
export type TagEvents = typeof __propDef.events;
|
|
20
|
+
export type TagSlots = typeof __propDef.slots;
|
|
21
|
+
export default class Tag extends SvelteComponent<TagProps, TagEvents, TagSlots> {
|
|
22
|
+
}
|
|
23
|
+
export {};
|
|
@@ -28,6 +28,7 @@ export { default as SplitControl } from './SplitControl/SplitControl.svelte';
|
|
|
28
28
|
export { default as Switch } from './Switch/Switch.svelte';
|
|
29
29
|
export { default as Table } from './Table/Table.svelte';
|
|
30
30
|
export { default as TableRow } from './Table/TableRow.svelte';
|
|
31
|
+
export { default as Tag } from './Tag/Tag.svelte';
|
|
31
32
|
export { default as Textarea } from './Textarea/Textarea.svelte';
|
|
32
33
|
export { default as Text } from './Text/Text.svelte';
|
|
33
34
|
export { default as TextInput } from './TextInput/TextInput.svelte';
|
package/dist/components/index.js
CHANGED
|
@@ -28,6 +28,7 @@ export { default as SplitControl } from './SplitControl/SplitControl.svelte';
|
|
|
28
28
|
export { default as Switch } from './Switch/Switch.svelte';
|
|
29
29
|
export { default as Table } from './Table/Table.svelte';
|
|
30
30
|
export { default as TableRow } from './Table/TableRow.svelte';
|
|
31
|
+
export { default as Tag } from './Tag/Tag.svelte';
|
|
31
32
|
export { default as Textarea } from './Textarea/Textarea.svelte';
|
|
32
33
|
export { default as Text } from './Text/Text.svelte';
|
|
33
34
|
export { default as TextInput } from './TextInput/TextInput.svelte';
|
package/dist/variables.scss
CHANGED