@streamscloud/kit 0.10.0 → 0.10.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.
Files changed (6) hide show
  1. package/dist/ui/button/cmp.button.svelte +1 -1
  2. package/dist/ui/icon-text/cmp.icon-text.svelte +5 -2
  3. package/dist/ui/icon-text/cmp.icon-text.svelte.d.ts +1 -1
  4. package/dist/ui/table/cmp.table.svelte +19 -9
  5. package/dist/ui/table/table-group-actions/cmp.table-group-actions.svelte +2 -7
  6. package/package.json +1 -1
package/dist/ui/button/cmp.button.svelte CHANGED
@@ -199,7 +199,7 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
199
199
  --sc-kit--button--padding-inline: var(--sc-kit--space--3);
200
200
  --sc-kit--button--font-size: var(--sc-kit--font-size--sm);
201
201
  --sc-kit--button--gap: var(--sc-kit--space--1);
202
- --sc-kit--icon--size: 1rem;
202
+ --sc-kit--icon--size: 0.875rem;
203
203
  }
204
204
  .btn--md {
205
205
  --sc-kit--button--height: 2rem;
package/dist/ui/icon-text/cmp.icon-text.svelte CHANGED
@@ -9,7 +9,7 @@ let { icon, iconPosition = 'leading', secondaryIcon, trimText = false, hideText
9
9
  class:icon-text--md={size === 'md'}
10
10
  class:icon-text--lg={size === 'lg'}>
11
11
  <span class="icon-text__icon">
12
- <IconSlot icon={icon} size={size} />
12
+ <IconSlot icon={icon} />
13
13
  </span>
14
14
  {#if children && !hideText}
15
15
  <span class="icon-text__text" class:icon-text__text--trim={trimText}>
@@ -18,7 +18,7 @@ let { icon, iconPosition = 'leading', secondaryIcon, trimText = false, hideText
18
18
  {/if}
19
19
  {#if secondaryIcon}
20
20
  <span class="icon-text__secondary">
21
- <IconSlot icon={secondaryIcon} size={size} />
21
+ <IconSlot icon={secondaryIcon} />
22
22
  </span>
23
23
  {/if}
24
24
  </span>
@@ -70,12 +70,15 @@ status" dropdown-trigger patterns. Each icon prop accepts a string SVG source, a
70
70
  }
71
71
  .icon-text--sm {
72
72
  --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--sm);
73
+ --sc-kit--icon-text--icon--font-size: 0.875rem;
73
74
  }
74
75
  .icon-text--md {
75
76
  --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--md);
77
+ --sc-kit--icon-text--icon--font-size: 1rem;
76
78
  }
77
79
  .icon-text--lg {
78
80
  --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--lg);
81
+ --sc-kit--icon-text--icon--font-size: 1.25rem;
79
82
  }
80
83
  .icon-text__text {
81
84
  font-size: var(--_icon-text--text--font-size);
package/dist/ui/icon-text/cmp.icon-text.svelte.d.ts CHANGED
@@ -11,7 +11,7 @@ type Props = {
11
11
  trimText?: boolean;
12
12
  /** Hide text, showing only the icon(s) */
13
13
  hideText?: boolean;
14
- /** Font-size preset — scales icon + text together (em-based). Inherits (`1em`) when unset. */
14
+ /** Size preset matching `Button` of the same size — text/icon px: sm 12/14, md 14/16, lg 16/20. Unset: text + icon follow the inherited font size (`1em`). */
15
15
  size?: 'sm' | 'md' | 'lg';
16
16
  children?: Snippet;
17
17
  };
package/dist/ui/table/cmp.table.svelte CHANGED
@@ -65,15 +65,22 @@ const transformDraggedElement = (draggedRow) => {
65
65
  if (!draggedRow) {
66
66
  return;
67
67
  }
68
- const referenceColumns = tableRef.querySelector('tbody')?.querySelector('tr')?.querySelectorAll('td') || [];
68
+ const referenceRow = tableRef.querySelector('tbody tr:not([data-is-dnd-shadow-item-internal])') ?? tableRef.querySelector('tbody tr');
69
+ const referenceColumns = referenceRow?.querySelectorAll('td') ?? [];
69
70
  const draggedColumns = draggedRow.querySelectorAll('td');
70
- if (referenceColumns.length !== draggedColumns.length) {
71
+ if (!referenceRow || referenceColumns.length !== draggedColumns.length) {
71
72
  console.error('not equal count of model.columns withing table rows');
72
73
  return;
73
74
  }
74
75
  for (let i = 0, length = referenceColumns.length; i < length; i++) {
75
76
  draggedColumns[i].style.width = `${referenceColumns[i].clientWidth}px`;
77
+ draggedColumns[i].style.height = `${referenceColumns[i].clientHeight}px`;
76
78
  }
79
+ // Clone is reparented to <body>, losing the .table-container --_table--* vars; cells collapse without this.
80
+ const cellStyle = window.getComputedStyle(referenceColumns[0]);
81
+ draggedRow.style.setProperty('--_table--cell--font-size', cellStyle.fontSize);
82
+ draggedRow.style.setProperty('--_table--cell--horizontal-padding', cellStyle.paddingInlineStart);
83
+ draggedRow.style.setProperty('--_table--border-color', cellStyle.borderBottomColor);
77
84
  };
78
85
  // endregion Drag and Drop
79
86
  const changeItemPosition = (item, positionChange) => {
@@ -143,7 +150,15 @@ const getEditorColumnOrDefault = (column, editMode) => {
143
150
  </tr>
144
151
  </thead>
145
152
  <tbody
146
- use:dndzone={{ items: model.items, dragDisabled: !rowsDraggable, flipDurationMs, dropTargetStyle: {}, transformDraggedElement, type: 'table' }}
153
+ use:dndzone={{
154
+ items: model.items,
155
+ dragDisabled: !rowsDraggable,
156
+ dropFromOthersDisabled: true,
157
+ flipDurationMs,
158
+ dropTargetStyle: {},
159
+ transformDraggedElement,
160
+ type: 'table'
161
+ }}
147
162
  onconsider={handleConsider}
148
163
  onfinalize={handleFinalize}>
149
164
  {#if showPlaceholder || showNoItemsPlaceholder}
@@ -177,7 +192,7 @@ const getEditorColumnOrDefault = (column, editMode) => {
177
192
  {#each model.itemActions as action (action)}
178
193
  {#if action.visibilityFactory ? action.visibilityFactory(item) : true}
179
194
  <PopoverItem on={{ click: () => action.action(item) }}>
180
- <IconText icon={action.icon}>
195
+ <IconText icon={action.icon} size="md">
181
196
  {action.title}
182
197
  </IconText>
183
198
  </PopoverItem>
@@ -452,11 +467,6 @@ Data table component with support for sorting, selection, drag-and-drop row reor
452
467
  }
453
468
  .table__actions {
454
469
  display: contents;
455
- --sc-kit--popover-item--font-size: var(--sc-kit--font-size--md);
456
- --sc-kit--popover-item--min-width: 8.75rem;
457
- --sc-kit--popover-item--padding: var(--sc-kit--space--3) var(--sc-kit--space--5);
458
- --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--md);
459
- --sc-kit--icon-text--icon--font-size: 1.125rem;
460
470
  }
461
471
  .table__drag-handle {
462
472
  width: 2.25rem;
package/dist/ui/table/table-group-actions/cmp.table-group-actions.svelte CHANGED
@@ -24,7 +24,7 @@ const singleGroupAction = $derived(availableGroupActions[0]);
24
24
  {#each groupActions as action (action)}
25
25
  {#if isActionVisible(action, selection.items)}
26
26
  <PopoverItem on={{ click: () => action.action(selection.items) }}>
27
- <IconText icon={action.icon}>
27
+ <IconText icon={action.icon} size="sm">
28
28
  {action.title}
29
29
  </IconText>
30
30
  </PopoverItem>
@@ -33,7 +33,7 @@ const singleGroupAction = $derived(availableGroupActions[0]);
33
33
  </Popover>
34
34
  {:else if singleGroupAction}
35
35
  <Button type="button" variant="secondary" size="sm" on={{ click: () => singleGroupAction.action(selection.items) }}>
36
- <IconText icon={singleGroupAction.icon}>
36
+ <IconText icon={singleGroupAction.icon} size="sm">
37
37
  {singleGroupAction.title}
38
38
  </IconText>
39
39
  </Button>
@@ -48,9 +48,4 @@ Group actions toolbar for table selections. Shows a single button or popover wit
48
48
 
49
49
  <style>.table-group-actions {
50
50
  display: contents;
51
- --sc-kit--popover-item--font-size: 0.875rem;
52
- --sc-kit--popover-item--min-width: 11.25rem;
53
- --sc-kit--popover-item--padding: 0.75rem 1.25rem;
54
- --sc-kit--icon-text--text--font-size: 0.875rem;
55
- --sc-kit--icon-text--icon--font-size: 1.125rem;
56
51
  }</style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/kit",
3
- "version": "0.10.0",
3
+ "version": "0.10.2",
4
4
  "author": "StreamsCloud",
5
5
  "repository": {
6
6
  "type": "git",