@poirazis/supercomponents-shared 0.0.1

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 (66) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +66 -0
  3. package/dist/index.js +30635 -0
  4. package/dist/index.umd.cjs +12 -0
  5. package/dist/style.css +1 -0
  6. package/package.json +117 -0
  7. package/src/index.js +29 -0
  8. package/src/index.ts +31 -0
  9. package/src/lib/Actions/autoresize_textarea.js +14 -0
  10. package/src/lib/Actions/click_outside.js +80 -0
  11. package/src/lib/Actions/index.js +4 -0
  12. package/src/lib/Actions/position_dropdown.js +129 -0
  13. package/src/lib/SuperButton/SuperButton.svelte +341 -0
  14. package/src/lib/SuperFieldLabel/SuperFieldLabel.svelte +91 -0
  15. package/src/lib/SuperFieldsCommon.css +54 -0
  16. package/src/lib/SuperList/SuperList.svelte +308 -0
  17. package/src/lib/SuperList/drag-handle.svelte +31 -0
  18. package/src/lib/SuperPopover/SuperPopover.svelte +134 -0
  19. package/src/lib/SuperTable/SuperTable.css +410 -0
  20. package/src/lib/SuperTable/SuperTable.svelte +1332 -0
  21. package/src/lib/SuperTable/constants.js +85 -0
  22. package/src/lib/SuperTable/controls/ColumnsSection.svelte +34 -0
  23. package/src/lib/SuperTable/controls/ControlSection.svelte +3 -0
  24. package/src/lib/SuperTable/controls/RowButtonsColumn.svelte +169 -0
  25. package/src/lib/SuperTable/controls/SelectionColumn.svelte +174 -0
  26. package/src/lib/SuperTable/controls/SuperTableWelcome.svelte +58 -0
  27. package/src/lib/SuperTable/overlays/AddNewRowOverlay.svelte +52 -0
  28. package/src/lib/SuperTable/overlays/EmptyResultSetOverlay.svelte +13 -0
  29. package/src/lib/SuperTable/overlays/LoadingOverlay.svelte +3 -0
  30. package/src/lib/SuperTable/overlays/RowContextMenu copy.svelte +57 -0
  31. package/src/lib/SuperTable/overlays/RowContextMenu.svelte +58 -0
  32. package/src/lib/SuperTable/overlays/ScrollbarsOverlay.svelte +184 -0
  33. package/src/lib/SuperTable/overlays/SelectedActionsOverlay.svelte +64 -0
  34. package/src/lib/SuperTable/state/API.js +0 -0
  35. package/src/lib/SuperTable/state/SuperTableStateMachine.js +0 -0
  36. package/src/lib/SuperTable/types.js +0 -0
  37. package/src/lib/SuperTableCells/CellAttachment.svelte +288 -0
  38. package/src/lib/SuperTableCells/CellBoolean.svelte +158 -0
  39. package/src/lib/SuperTableCells/CellColor.svelte +460 -0
  40. package/src/lib/SuperTableCells/CellCommon.css +319 -0
  41. package/src/lib/SuperTableCells/CellDatetime.svelte +180 -0
  42. package/src/lib/SuperTableCells/CellIcon.svelte +627 -0
  43. package/src/lib/SuperTableCells/CellJSON.svelte +297 -0
  44. package/src/lib/SuperTableCells/CellLink.svelte +274 -0
  45. package/src/lib/SuperTableCells/CellLinkAdvanced.svelte +298 -0
  46. package/src/lib/SuperTableCells/CellLinkPickerSelect.svelte +355 -0
  47. package/src/lib/SuperTableCells/CellLinkPickerTable.svelte +91 -0
  48. package/src/lib/SuperTableCells/CellLinkPickerTree.svelte +226 -0
  49. package/src/lib/SuperTableCells/CellNumber.svelte +179 -0
  50. package/src/lib/SuperTableCells/CellNumberSimple.svelte +56 -0
  51. package/src/lib/SuperTableCells/CellOptions.svelte +631 -0
  52. package/src/lib/SuperTableCells/CellOptionsAdvanced.svelte +684 -0
  53. package/src/lib/SuperTableCells/CellSkeleton.svelte +59 -0
  54. package/src/lib/SuperTableCells/CellString.svelte +178 -0
  55. package/src/lib/SuperTableCells/CellStringSimple.svelte +55 -0
  56. package/src/lib/SuperTableCells/index.js +21 -0
  57. package/src/lib/SuperTableCells/remixIcons.js +6772 -0
  58. package/src/lib/SuperTableColumn/SuperTableColumn.svelte +392 -0
  59. package/src/lib/SuperTableColumn/index.js +9 -0
  60. package/src/lib/SuperTableColumn/parts/SuperColumnBody.svelte +57 -0
  61. package/src/lib/SuperTableColumn/parts/SuperColumnFooter.svelte +14 -0
  62. package/src/lib/SuperTableColumn/parts/SuperColumnHeader.svelte +228 -0
  63. package/src/lib/SuperTableColumn/parts/SuperColumnRow.svelte +142 -0
  64. package/src/lib/SuperTableColumn/parts/SuperColumnRowNew.svelte +34 -0
  65. package/src/lib/SuperTree/SuperTree.svelte +117 -0
  66. package/src/types/svelte-portal.d.ts +1 -0
@@ -0,0 +1,341 @@
1
+ <script>
2
+ import { createEventDispatcher, onDestroy, onMount } from "svelte";
3
+ const dispatch = createEventDispatcher();
4
+
5
+ export let size = "M";
6
+ export let menuItem = false;
7
+ export let menuAlign = "right";
8
+ export let icon = undefined;
9
+ export let iconAfterText = undefined;
10
+ export let text = "";
11
+ export let quiet = undefined;
12
+ export let selected = undefined;
13
+ export let disabled = undefined;
14
+ export let onClick = undefined;
15
+ export let buttonClass = "actionButton";
16
+ export let type = "primary";
17
+
18
+ export let actionsMode = "normal";
19
+ export let condition = undefined; // For backward compatibility
20
+ export let loopSource = undefined;
21
+ export let loopDelay = 0;
22
+ export let loopEvent = undefined;
23
+ export let timerDuration = 60;
24
+
25
+ export let fullWidth = undefined;
26
+ export let iconOnly = undefined;
27
+
28
+ // Events
29
+ export let onTimer = undefined;
30
+ export let onLoopStart = undefined;
31
+ export let onLoopEnd = undefined;
32
+ export let onTrueCondition = undefined;
33
+ export let onFalseCondition = undefined;
34
+
35
+ $: loop = safeParse(loopSource);
36
+
37
+ let working = false;
38
+ let ui_timer = undefined;
39
+ let elapsed = 0;
40
+
41
+ async function handleClick() {
42
+ working = true;
43
+ if (actionsMode == "loop") {
44
+ if (onLoopStart) await onLoopStart({ iterations: loopSource?.length });
45
+ if (Array.isArray(loop) && loopEvent) {
46
+ for (var i = 0; i < loop.length; i++) {
47
+ await loopEvent({ idx: i, value: loop[i] });
48
+ await sleep(loopDelay);
49
+ }
50
+ }
51
+ if (onLoopEnd) await onLoopEnd();
52
+ } else if (actionsMode == "conditional") {
53
+ if (condition == true) await onTrueCondition?.();
54
+ else await onFalseCondition?.();
55
+ } else if (onClick) {
56
+ await onClick?.();
57
+ }
58
+
59
+ working = false;
60
+ }
61
+
62
+ function sleep(ms) {
63
+ return new Promise((resolve) => setTimeout(resolve, ms));
64
+ }
65
+
66
+ const safeParse = (input) => {
67
+ if (!input) return undefined;
68
+
69
+ let res = [];
70
+ try {
71
+ res = JSON.parse(input);
72
+ if (!Array.isArray(res)) res = [input];
73
+ } catch (ex) {
74
+ res = input?.split(",") ?? [input];
75
+ }
76
+
77
+ return res;
78
+ };
79
+
80
+ onMount(() => {
81
+ if (actionsMode == "timer") {
82
+ text = timerDuration;
83
+ ui_timer = setInterval(() => {
84
+ elapsed += 1;
85
+ if (elapsed == timerDuration) {
86
+ elapsed = 0;
87
+ onTimer?.();
88
+ }
89
+ text = timerDuration - elapsed;
90
+ }, 1000);
91
+ }
92
+ });
93
+
94
+ onDestroy(() => {
95
+ if (ui_timer) clearInterval(ui_timer);
96
+ });
97
+ </script>
98
+
99
+ <button
100
+ tabindex={disabled ? "-1" : "0"}
101
+ on:click={(e) => {
102
+ if (!disabled) {
103
+ dispatch("click", e.target);
104
+ handleClick();
105
+ }
106
+ }}
107
+ class:super-button={true}
108
+ class:small={size == "S"}
109
+ class:is-selected={selected}
110
+ class:cta={type == "cta" && !disabled}
111
+ class:warning={type == "warning"}
112
+ class:primary={type == "primary" && !menuItem}
113
+ class:secondary={type == "secondary"}
114
+ class:overBackground={type == "overBackground"}
115
+ class:ink={type == "ink"}
116
+ class:menu={type == "menu"}
117
+ class:quiet
118
+ class:icon
119
+ class:iconOnly={iconOnly || !text}
120
+ class:full-width={fullWidth}
121
+ class:menu-item={menuItem}
122
+ class:menu-item-right={menuItem && menuAlign == "right"}
123
+ class={buttonClass == "actionButton"
124
+ ? "spectrum-ActionButton spectrum-ActionButton--size" + size
125
+ : "spectrum-Button spectrum-Button--size" + size}
126
+ class:disabled={disabled || working}
127
+ >
128
+ {#if !iconAfterText}
129
+ <i class={icon} />
130
+ <span>{text}</span>
131
+ {:else}
132
+ <span>{text}</span>
133
+ <i class={icon} />
134
+ {/if}
135
+ </button>
136
+
137
+ <style>
138
+ .super-button {
139
+ border: 1px solid var(--spectrum-global-color-gray-400);
140
+ background-color: var(--spectrum-global-color-gray-75);
141
+ color: var(--spectrum-global-color-gray-800);
142
+ display: flex;
143
+ align-items: center;
144
+ font-weight: 600;
145
+ min-width: 5rem;
146
+ padding: 0rem 0.75rem;
147
+ gap: 0.5rem;
148
+
149
+ &.small {
150
+ min-width: 4rem;
151
+ padding: 0rem 0.5rem;
152
+ gap: 0.5rem;
153
+ font-size: smaller;
154
+ }
155
+
156
+ & > span {
157
+ white-space: nowrap;
158
+ }
159
+
160
+ &.icon {
161
+ & > i {
162
+ display: block;
163
+ }
164
+ }
165
+
166
+ &.iconOnly {
167
+ min-width: unset;
168
+ & > span {
169
+ display: none;
170
+ }
171
+ }
172
+ & > i {
173
+ display: none;
174
+ opacity: 0.9;
175
+ }
176
+ }
177
+
178
+ .full-width {
179
+ width: 100%;
180
+ }
181
+ .menu-item {
182
+ width: 100%;
183
+ justify-content: flex-start;
184
+ border: unset !important;
185
+ border-radius: 0;
186
+ background-color: transparent !important;
187
+ font-weight: 500;
188
+
189
+ &:hover {
190
+ background-color: var(--spectrum-global-color-gray-200);
191
+ color: var(--spectrum-global-color-gray-900);
192
+ }
193
+ }
194
+ .menu-item-right {
195
+ width: 100%;
196
+ justify-content: flex-end !important;
197
+ }
198
+ i {
199
+ color: var(--iconColor);
200
+ transition: all 230ms ease-in-out;
201
+ }
202
+
203
+ .cta {
204
+ background-color: var(--spectrum-global-color-blue-400);
205
+ border: 1px solid transparent;
206
+ color: white;
207
+
208
+ &.quiet {
209
+ border-color: transparent !important;
210
+ background-color: transparent;
211
+ color: var(--spectrum-global-color-gray-800);
212
+ &:hover,
213
+ &:focus {
214
+ background-color: var(--spectrum-global-color-blue-400);
215
+ color: white;
216
+ }
217
+ }
218
+ &:hover,
219
+ &:focus {
220
+ background-color: var(--spectrum-global-color-blue-600);
221
+ border-color: var(--spectrum-global-color-blue-600);
222
+ }
223
+
224
+ &:active {
225
+ border: 1px solid var(--spectrum-global-color-blue-700);
226
+ }
227
+ }
228
+ .ink {
229
+ background-color: var(--spectrum-global-color-gray-700);
230
+ border: 1px solid var(--spectrum-global-color-gray-700);
231
+ color: var(--spectrum-global-color-gray-50);
232
+ font-weight: 700;
233
+ opacity: 0.9;
234
+
235
+ &.quiet {
236
+ border-color: transparent !important;
237
+ background-color: transparent;
238
+ color: var(--spectrum-global-color-gray-800);
239
+ &:hover,
240
+ &:focus {
241
+ color: var(--spectrum-global-color-gray-50);
242
+ background-color: var(--spectrum-global-color-gray-600);
243
+ }
244
+ }
245
+ &:hover,
246
+ &:focus {
247
+ background-color: var(--spectrum-global-color-gray-800);
248
+ }
249
+
250
+ &:active {
251
+ border: 1px solid var(--spectrum-global-color-blue-700);
252
+ }
253
+ }
254
+ .primary {
255
+ &:hover,
256
+ &:focus {
257
+ border: 1px solid var(--spectrum-global-color-gray-500);
258
+ color: var(--spectrum-global-color-gray-900);
259
+ }
260
+ &:active {
261
+ background-color: var(--spectrum-global-color-gray-100);
262
+ border: 1px solid var(--spectrum-global-color-gray-600);
263
+ }
264
+
265
+ &.quiet {
266
+ border-color: transparent;
267
+ background-color: transparent;
268
+ &:hover {
269
+ background-color: var(--spectrum-global-color-gray-200);
270
+ color: var(--spectrum-global-color-gray-900);
271
+ }
272
+ }
273
+ }
274
+
275
+ .secondary {
276
+ background-color: var(--spectrum-global-color-gray-200);
277
+ border-color: transparent;
278
+ color: var(--spectrum-global-color-gray-700);
279
+ font-weight: 500;
280
+
281
+ &.quiet {
282
+ border-color: transparent;
283
+ background-color: transparent;
284
+
285
+ &:hover {
286
+ background-color: var(--spectrum-global-color-gray-200);
287
+ border-color: transparent;
288
+ }
289
+ }
290
+
291
+ &:hover,
292
+ &:focus {
293
+ background-color: var(--spectrum-global-color-gray-300);
294
+ color: var(--spectrum-global-color-gray-900);
295
+ }
296
+ }
297
+
298
+ .warning {
299
+ color: var(--spectrum-global-color-red-400);
300
+ &.quiet {
301
+ border-color: transparent !important;
302
+ background-color: transparent;
303
+ color: var(--spectrum-global-color-red-400);
304
+
305
+ &:hover {
306
+ background-color: var(--spectrum-global-color-red-400);
307
+ }
308
+ }
309
+ &:hover,
310
+ &:focus {
311
+ background-color: var(--spectrum-global-color-red-400);
312
+ color: var(--spectrum-global-color-gray-50);
313
+ }
314
+ }
315
+
316
+ .overBackground {
317
+ background-color: transparent;
318
+
319
+ &.quiet {
320
+ border: unset;
321
+ }
322
+ }
323
+
324
+ .menu {
325
+ border: unset;
326
+ background: transparent;
327
+ padding-right: 0rem;
328
+ color: var(--spectrum-global-color-gray-700);
329
+ }
330
+
331
+ .disabled {
332
+ background-color: var(--spectrum-global-color-gray-200) !important;
333
+ color: var(--spectrum-global-color-gray-400) !important;
334
+ cursor: not-allowed;
335
+ border-color: var(--spectrum-global-color-gray-300);
336
+ &.quiet {
337
+ background-color: unset !important;
338
+ border: unset !important;
339
+ }
340
+ }
341
+ </style>
@@ -0,0 +1,91 @@
1
+ <script>
2
+ export let labelPos;
3
+ export let labelWidth;
4
+ export let label;
5
+ export let helpText;
6
+ export let error;
7
+ export let fieldState;
8
+
9
+ let showHelp;
10
+ $: width = labelPos == "left" ? (labelWidth ? labelWidth : "5rem") : "auto";
11
+ $: error = fieldState?.error;
12
+ </script>
13
+
14
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
15
+ {#if labelPos}
16
+ <div
17
+ class="superlabel"
18
+ class:notForm={!fieldState}
19
+ class:left={labelPos == "left"}
20
+ class:error
21
+ style:--label-width={width}
22
+ >
23
+ <div
24
+ class="label"
25
+ on:mouseenter={() => (showHelp = true)}
26
+ on:mouseleave={() => (showHelp = false)}
27
+ >
28
+ {#if showHelp && helpText}
29
+ {helpText}
30
+ {:else}
31
+ {label}
32
+ {/if}
33
+ </div>
34
+ {#if error}
35
+ <div class="error-message">
36
+ {error}
37
+ </div>
38
+ {/if}
39
+ </div>
40
+ {/if}
41
+
42
+ <style>
43
+ .superlabel {
44
+ flex: 0 0 auto;
45
+ width: var(--label-width);
46
+ overflow: hidden;
47
+ display: flex;
48
+ align-items: center;
49
+ justify-content: space-between;
50
+ font-size: 12px;
51
+ font-weight: 400;
52
+ line-height: 1.65rem;
53
+ color: var(--spectrum-global-color-gray-700);
54
+ padding-left: 2px;
55
+ gap: 1rem;
56
+ transition: 130ms;
57
+
58
+ &.notForm {
59
+ font-size: 14px;
60
+ padding-left: unset;
61
+ padding-bottom: 4px;
62
+ }
63
+
64
+ &.left {
65
+ flex-direction: column;
66
+ align-items: flex-start;
67
+ justify-content: center;
68
+ line-height: 1rem;
69
+ gap: 0px;
70
+
71
+ & > .label {
72
+ width: var(--label-width);
73
+ white-space: nowrap;
74
+ overflow: hidden;
75
+ text-overflow: ellipsis;
76
+ }
77
+ }
78
+
79
+ & > .label {
80
+ min-width: 0;
81
+ white-space: nowrap;
82
+ overflow: hidden;
83
+ text-overflow: ellipsis;
84
+ }
85
+
86
+ & > .error-message {
87
+ color: var(--spectrum-global-color-red-400);
88
+ font-size: 11px;
89
+ }
90
+ }
91
+ </style>
@@ -0,0 +1,54 @@
1
+ .superField {
2
+ width: 100%;
3
+ display: flex;
4
+ align-self: flex-start;
5
+ justify-content: stretch;
6
+ flex-direction: column;
7
+
8
+ &.left-label {
9
+ flex-direction: row;
10
+ align-items: center;
11
+ gap: 1rem;
12
+ }
13
+ &.multirow {
14
+ align-items: stretch;
15
+
16
+ & > .superlabel {
17
+ align-self: start;
18
+
19
+ &.left {
20
+ padding-top: 0.5rem;
21
+ }
22
+ }
23
+ }
24
+
25
+ &:focus-within {
26
+ & > .superlabel {
27
+ color: var(--spectrum-global-golor-gray-700);
28
+ font-weight: 500;
29
+ }
30
+ }
31
+ }
32
+
33
+ .inline-cells {
34
+ flex: auto;
35
+ display: flex;
36
+ justify-content: stretch;
37
+ height: 2rem;
38
+ overflow: hidden;
39
+
40
+ &.multirow {
41
+ height: unset;
42
+ }
43
+ }
44
+
45
+ .inline-buttons {
46
+ display: flex;
47
+ gap: 0.25rem;
48
+ align-items: center;
49
+ padding-left: 0.5rem;
50
+
51
+ &.vertical {
52
+ flex-direction: column;
53
+ }
54
+ }