@kws3/ui 4.0.0 → 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 +11 -0
- package/controls/ToggleButtons.svelte +32 -4
- package/helpers/ScrollableList.svelte +9 -3
- package/package.json +2 -2
package/CHANGELOG.mdx
CHANGED
|
@@ -1,7 +1,18 @@
|
|
|
1
|
+
# 4.0.2
|
|
2
|
+
- `ToggleButtons` - add support for count tags, and fix css not applying
|
|
3
|
+
|
|
4
|
+
# 4.0.1
|
|
5
|
+
- `ScrollableList` - add support for custom iteration key for keyed each block
|
|
6
|
+
|
|
1
7
|
# 4.0.0
|
|
2
8
|
- add svelte 4 compatibility
|
|
3
9
|
|
|
4
10
|
--------------
|
|
11
|
+
# 2.2.4
|
|
12
|
+
- `ToggleButtons` - add support for count tags, and fix css not applying
|
|
13
|
+
|
|
14
|
+
# 2.2.3
|
|
15
|
+
- `ScrollableList` - add support for custom iteration key for keyed each block
|
|
5
16
|
|
|
6
17
|
# 2.2.2
|
|
7
18
|
- `ScrollableList` - fix jumping issue when edge of scrollable regions are reached
|
|
@@ -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
|
*
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
@param {array} [items=[]] - Array of items, Default: `[]`
|
|
6
|
+
@param {object} [iteration_key=null] - Iteration key - by default it uses the index of the array inside the keyed each block, Default: `null`
|
|
6
7
|
@param {string} [height="100%"] - Height of the wrapper, CSS String, Default: `"100%"`
|
|
7
8
|
@param {number | null} [item_height=null] - Height of each list item. If not set, height will be calculated automatically based on each item's offsetHeight, Default: `null`
|
|
8
9
|
@param {number} [start=0] - First item index rendered inside viewport - readonly, Default: `0`
|
|
@@ -89,6 +90,10 @@ while more items are loading
|
|
|
89
90
|
* Array of items
|
|
90
91
|
*/
|
|
91
92
|
export let items = [],
|
|
93
|
+
/**
|
|
94
|
+
* Iteration key - by default it uses the index of the array inside the keyed each block
|
|
95
|
+
*/
|
|
96
|
+
iteration_key = null,
|
|
92
97
|
/**
|
|
93
98
|
* Height of the wrapper, CSS String
|
|
94
99
|
*/
|
|
@@ -140,9 +145,10 @@ while more items are loading
|
|
|
140
145
|
|
|
141
146
|
$: padStart = start > padding_threshold ? start - padding_threshold : start;
|
|
142
147
|
$: padEnd = end + padding_threshold;
|
|
143
|
-
$: visible = items
|
|
144
|
-
|
|
145
|
-
|
|
148
|
+
$: visible = items.slice(padStart, padEnd).map((data, i) => ({
|
|
149
|
+
index: iteration_key ? data[iteration_key] : i + padStart,
|
|
150
|
+
data,
|
|
151
|
+
}));
|
|
146
152
|
|
|
147
153
|
// whenever `items` changes, invalidate the current heightmap
|
|
148
154
|
$: items, viewport_height, item_height, mounted, refresh();
|
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
|
}
|