@kws3/ui 4.2.0 → 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.
Files changed (4) hide show
  1. package/CHANGELOG.mdx +8 -0
  2. package/helpers/InfiniteList.svelte +45 -15
  3. package/package.json +2 -2
  4. package/styles/Grid.scss +39 -13
package/CHANGELOG.mdx CHANGED
@@ -1,3 +1,11 @@
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
+
6
+ ## 4.2.1
7
+ - Fix grid row hover state colors for sticky columns
8
+
1
9
  ## 4.2.0
2
10
  - Fix grid row transitions to be global
3
11
  - Add `createScaler` and `scale` functions to utils
package/helpers/InfiniteList.svelte CHANGED
@@ -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 scroller container, Default: `""`
10
- @param {string} [class=""] - CSS classes for scroller container, Default: `""`
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: -1px;
116
+ top: 0;
112
117
  width: 100%;
113
- height: 1px;
114
- box-shadow:
115
- 0 0 6px 0 #000,
116
- 0 0 12px 0 #000,
117
- 0 0 18px 0 #000,
118
- 0 0 20px 0 #000;
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: -1px;
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 scroller container
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
- style = "";
187
+ linear_scroll_shadow = false;
158
188
 
159
189
  /**
160
- * CSS classes for scroller container
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.0",
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": "cc7a86edeb6099b9ac018c0bf73a4134ebf287a3"
38
+ "gitHead": "7d10812e05c4c494448396ff158fb3b70512cca8"
39
39
  }
package/styles/Grid.scss CHANGED
@@ -14,6 +14,9 @@ $kws-gridview-background: $table-background-color !default;
14
14
  $kws-gridview-striped-row-background: $table-striped-row-even-background-color !default;
15
15
  $kws-gridview-sticky-column-border-color: $border !default;
16
16
 
17
+ $kws-gridview-hover-background-color: $table-row-hover-background-color !default;
18
+ $kws-gridview-even-row-hover-background-color: $table-striped-row-even-hover-background-color !default;
19
+
17
20
  .table.kws-grid-view {
18
21
  box-shadow: $kws-gridview-box-shadow;
19
22
  th {
@@ -92,18 +95,43 @@ $kws-gridview-sticky-column-border-color: $border !default;
92
95
  }
93
96
 
94
97
  .data-table .table {
95
- &.is-striped tbody {
96
- tr:not(.is-selected):nth-child(odd) td.is-sticky-column {
97
- background: $kws-gridview-background;
98
+ &.is-hoverable {
99
+ tbody {
100
+ tr:not(.is-selected):not(.is-checked):hover {
101
+ td.is-sticky-column {
102
+ background-color: $kws-gridview-hover-background-color;
103
+ }
104
+ }
98
105
  }
99
- tr:not(.is-selected):nth-child(even) td.is-sticky-column {
100
- background: $kws-gridview-striped-row-background;
106
+ }
107
+ &.is-striped {
108
+ tbody {
109
+ tr:not(.is-selected):nth-child(odd) td.is-sticky-column {
110
+ background: $kws-gridview-background;
111
+ }
112
+ tr:not(.is-selected):nth-child(even) td.is-sticky-column {
113
+ background: $kws-gridview-striped-row-background;
114
+ }
115
+ tr.is-selected {
116
+ background-color: transparent;
117
+ td {
118
+ background: $kws-gridview-active-row-background;
119
+ color: $kws-gridview-active-row-color;
120
+ }
121
+ }
101
122
  }
102
- tr.is-selected {
103
- background-color: transparent;
104
- td {
105
- background: $kws-gridview-active-row-background;
106
- color: $kws-gridview-active-row-color;
123
+ &.is-hoverable {
124
+ tbody {
125
+ tr:not(.is-selected):not(.is-checked):hover {
126
+ td.is-sticky-column {
127
+ background-color: $kws-gridview-hover-background-color;
128
+ }
129
+ &:nth-child(even) {
130
+ td.is-sticky-column {
131
+ background-color: $kws-gridview-even-row-hover-background-color;
132
+ }
133
+ }
134
+ }
107
135
  }
108
136
  }
109
137
  }
@@ -111,6 +139,7 @@ $kws-gridview-sticky-column-border-color: $border !default;
111
139
  th {
112
140
  &.is-sticky-column {
113
141
  position: sticky;
142
+ z-index: 2;
114
143
  &:first-child {
115
144
  left: 0;
116
145
  }
@@ -124,9 +153,6 @@ $kws-gridview-sticky-column-border-color: $border !default;
124
153
  border-right-width: 0;
125
154
  }
126
155
  }
127
- &.has-sticky-columns {
128
- margin-bottom: 0px;
129
- }
130
156
  }
131
157
 
132
158
  .fake-shadow-contraint {