@kws3/ui 4.0.1 → 4.0.2
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/CHANGELOG.mdx +6 -0
- package/controls/ToggleButtons.svelte +32 -4
- package/package.json +2 -2
package/CHANGELOG.mdx
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
# 4.0.2
|
|
2
|
+
- `ToggleButtons` - add support for count tags, and fix css not applying
|
|
3
|
+
|
|
1
4
|
# 4.0.1
|
|
2
5
|
- `ScrollableList` - add support for custom iteration key for keyed each block
|
|
3
6
|
|
|
@@ -5,6 +8,9 @@
|
|
|
5
8
|
- add svelte 4 compatibility
|
|
6
9
|
|
|
7
10
|
--------------
|
|
11
|
+
# 2.2.4
|
|
12
|
+
- `ToggleButtons` - add support for count tags, and fix css not applying
|
|
13
|
+
|
|
8
14
|
# 2.2.3
|
|
9
15
|
- `ScrollableList` - add support for custom iteration key for keyed each block
|
|
10
16
|
|
|
@@ -12,6 +12,7 @@ This property can be bound to, to fetch the current value, Default: `null`
|
|
|
12
12
|
- `value`: Value of the button
|
|
13
13
|
- `subtitle`: Optional subtitle
|
|
14
14
|
- `icon`: Optional Icon to display
|
|
15
|
+
- `count`: Optional number to display on top right
|
|
15
16
|
- `active_class`: Custom class to apply when button is active
|
|
16
17
|
- `inactive_class`: Custom class to apply when button is inactive
|
|
17
18
|
|
|
@@ -50,9 +51,10 @@ This property can be bound to, to fetch the current value, Default: `null`
|
|
|
50
51
|
{/if}
|
|
51
52
|
<span class="is-block">{option.name}</span>
|
|
52
53
|
{#if option.subtitle}
|
|
53
|
-
<span
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
<span class="option-subtitle">{option.subtitle}</span>
|
|
55
|
+
{/if}
|
|
56
|
+
{#if option.count}
|
|
57
|
+
<span class="count">{option.count}</span>
|
|
56
58
|
{/if}
|
|
57
59
|
</span>
|
|
58
60
|
</button>
|
|
@@ -61,7 +63,7 @@ This property can be bound to, to fetch the current value, Default: `null`
|
|
|
61
63
|
</div>
|
|
62
64
|
|
|
63
65
|
<style lang="scss">
|
|
64
|
-
.toggle-buttons {
|
|
66
|
+
.kws-toggle-buttons {
|
|
65
67
|
.button,
|
|
66
68
|
.button:focus {
|
|
67
69
|
:global(.icon) {
|
|
@@ -72,6 +74,31 @@ This property can be bound to, to fetch the current value, Default: `null`
|
|
|
72
74
|
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3) inset !important;
|
|
73
75
|
}
|
|
74
76
|
}
|
|
77
|
+
.button {
|
|
78
|
+
position: relative;
|
|
79
|
+
.option-subtitle {
|
|
80
|
+
font-size: 0.7em;
|
|
81
|
+
display: block;
|
|
82
|
+
margin-top: -0.3em;
|
|
83
|
+
opacity: 0.7;
|
|
84
|
+
}
|
|
85
|
+
.count {
|
|
86
|
+
position: absolute;
|
|
87
|
+
font-weight: 600;
|
|
88
|
+
font-size: 0.8em;
|
|
89
|
+
border-radius: 999px;
|
|
90
|
+
padding: 0.15em 0.2em;
|
|
91
|
+
min-width: 1.8em;
|
|
92
|
+
min-height: 1.5em;
|
|
93
|
+
top: -0.75em;
|
|
94
|
+
right: 0.2em;
|
|
95
|
+
display: inline-flex;
|
|
96
|
+
align-items: center;
|
|
97
|
+
justify-content: center;
|
|
98
|
+
background: #ca0303;
|
|
99
|
+
color: #fff;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
75
102
|
}
|
|
76
103
|
</style>
|
|
77
104
|
|
|
@@ -102,6 +129,7 @@ This property can be bound to, to fetch the current value, Default: `null`
|
|
|
102
129
|
* - `value`: Value of the button
|
|
103
130
|
* - `subtitle`: Optional subtitle
|
|
104
131
|
* - `icon`: Optional Icon to display
|
|
132
|
+
* - `count`: Optional number to display on top right
|
|
105
133
|
* - `active_class`: Custom class to apply when button is active
|
|
106
134
|
* - `inactive_class`: Custom class to apply when button is inactive
|
|
107
135
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kws3/ui",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.2",
|
|
4
4
|
"description": "UI components for use with Svelte v3 applications.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"svelte": "index.js",
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"typescript": "^5.0.4"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "b9f2d8484c24cc6665b3802eb738000b9205ec72"
|
|
39
39
|
}
|