@kws3/ui 4.2.1 → 4.2.5
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 -1
- package/helpers/InfiniteList.svelte +45 -15
- package/package.json +2 -2
- package/styles/Grid.scss +1 -0
package/CHANGELOG.mdx
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
|
+
## 4.2.5
|
|
2
|
+
- Fix z-index for sticky columns
|
|
3
|
+
- Allow `inner_class` in `InfiniteList` component
|
|
4
|
+
- Configurable scroll shadows on `InfiniteList` defaulting to a radial scroll shadow
|
|
5
|
+
|
|
1
6
|
## 4.2.1
|
|
2
|
-
- Fix grid row hover
|
|
7
|
+
- Fix grid row hover state colors for sticky columns
|
|
3
8
|
|
|
4
9
|
## 4.2.0
|
|
5
10
|
- Fix grid row transitions to be global
|
|
@@ -6,8 +6,11 @@
|
|
|
6
6
|
@param {object} [iteration_key=null] - Iteration key - by default it uses the index of the array inside the keyed each block, Default: `null`
|
|
7
7
|
@param {string} [height="100%"] - Height of the wrapper, CSS String, Default: `"100%"`
|
|
8
8
|
@param {number} [end_offset=400] - `end` event will be fired when the scroll position reaches this many pixels from the end of the list., Default: `400`
|
|
9
|
-
@param {string} [style=""] - Inline CSS for
|
|
10
|
-
@param {string} [
|
|
9
|
+
@param {string} [style=""] - Inline CSS for component container, Default: `""`
|
|
10
|
+
@param {string} [inner_class=""] - CSS classes for inner scroller container, Default: `""`
|
|
11
|
+
@param {boolean} [linear_scroll_shadow=false] - Modify the look of scroll shadows from radial to linear, Default: `false`
|
|
12
|
+
@param {string} [class=""] - CSS classes for component container, Default: `""`
|
|
13
|
+
@method `relayout()` - Relayout method
|
|
11
14
|
|
|
12
15
|
### Events
|
|
13
16
|
- `end` - Fired when the scroll position reaches `end_offset` pixels from the end of the list.
|
|
@@ -22,11 +25,12 @@ while more items are loading
|
|
|
22
25
|
<div
|
|
23
26
|
bind:this={viewport}
|
|
24
27
|
class="kws-infinite-list with-resize-observer {klass}"
|
|
28
|
+
class:linear_scroll_shadow
|
|
25
29
|
style="height:{height};{style}"
|
|
26
30
|
use:resizeObserver
|
|
27
31
|
on:resize={resize}>
|
|
28
32
|
<div
|
|
29
|
-
class="kws-infinite-list-inner"
|
|
33
|
+
class="kws-infinite-list-inner {inner_class}"
|
|
30
34
|
on:scroll={handle_scroll}
|
|
31
35
|
bind:this={contents}>
|
|
32
36
|
{#each visible as item (item.index)}
|
|
@@ -54,10 +58,11 @@ while more items are loading
|
|
|
54
58
|
<div
|
|
55
59
|
bind:this={viewport}
|
|
56
60
|
class="kws-infinite-list {klass}"
|
|
61
|
+
class:linear_scroll_shadow
|
|
57
62
|
style="height:{height};{style}"
|
|
58
63
|
bind:offsetHeight={viewportHeight}>
|
|
59
64
|
<div
|
|
60
|
-
class="kws-infinite-list-inner"
|
|
65
|
+
class="kws-infinite-list-inner {inner_class}"
|
|
61
66
|
on:scroll={handle_scroll}
|
|
62
67
|
bind:this={contents}>
|
|
63
68
|
{#each visible as item (item.index)}
|
|
@@ -108,14 +113,15 @@ while more items are loading
|
|
|
108
113
|
.fake-shadow-contraint .fake-inner-shadow {
|
|
109
114
|
position: absolute;
|
|
110
115
|
left: 0;
|
|
111
|
-
top:
|
|
116
|
+
top: 0;
|
|
112
117
|
width: 100%;
|
|
113
|
-
height:
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
118
|
+
height: 100%;
|
|
119
|
+
background: radial-gradient(
|
|
120
|
+
farthest-side at 50% 0,
|
|
121
|
+
rgba(0, 0, 0, 0.2),
|
|
122
|
+
rgba(0, 0, 0, 0)
|
|
123
|
+
)
|
|
124
|
+
center top;
|
|
119
125
|
}
|
|
120
126
|
|
|
121
127
|
.fake-shadow-contraint.bottom {
|
|
@@ -125,7 +131,23 @@ while more items are loading
|
|
|
125
131
|
|
|
126
132
|
.fake-shadow-contraint.bottom .fake-inner-shadow {
|
|
127
133
|
top: auto;
|
|
128
|
-
bottom:
|
|
134
|
+
bottom: 0;
|
|
135
|
+
background: radial-gradient(
|
|
136
|
+
farthest-side at 50% 100%,
|
|
137
|
+
rgba(0, 0, 0, 0.2),
|
|
138
|
+
rgba(0, 0, 0, 0)
|
|
139
|
+
)
|
|
140
|
+
center bottom;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.linear_scroll_shadow .fake-shadow-contraint .fake-inner-shadow {
|
|
144
|
+
height: 1px;
|
|
145
|
+
box-shadow:
|
|
146
|
+
0 0 6px 0 #000,
|
|
147
|
+
0 0 12px 0 #000,
|
|
148
|
+
0 0 18px 0 #000,
|
|
149
|
+
0 0 20px 0 #000;
|
|
150
|
+
background: none;
|
|
129
151
|
}
|
|
130
152
|
</style>
|
|
131
153
|
|
|
@@ -152,12 +174,20 @@ while more items are loading
|
|
|
152
174
|
*/
|
|
153
175
|
end_offset = 400,
|
|
154
176
|
/**
|
|
155
|
-
* Inline CSS for
|
|
177
|
+
* Inline CSS for component container
|
|
178
|
+
*/
|
|
179
|
+
style = "",
|
|
180
|
+
/**
|
|
181
|
+
* CSS classes for inner scroller container
|
|
182
|
+
*/
|
|
183
|
+
inner_class = "",
|
|
184
|
+
/**
|
|
185
|
+
* Modify the look of scroll shadows from radial to linear
|
|
156
186
|
*/
|
|
157
|
-
|
|
187
|
+
linear_scroll_shadow = false;
|
|
158
188
|
|
|
159
189
|
/**
|
|
160
|
-
* CSS classes for
|
|
190
|
+
* CSS classes for component container
|
|
161
191
|
*/
|
|
162
192
|
let klass = "";
|
|
163
193
|
export { klass as class };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kws3/ui",
|
|
3
|
-
"version": "4.2.
|
|
3
|
+
"version": "4.2.5",
|
|
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.2.2"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "7d10812e05c4c494448396ff158fb3b70512cca8"
|
|
39
39
|
}
|