@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,319 @@
1
+ .superCell {
2
+ flex: auto;
3
+ display: flex;
4
+ align-items: center;
5
+ position: relative;
6
+ overflow: hidden;
7
+ transition: all 130ms;
8
+
9
+ &.multirow {
10
+ align-items: stretch;
11
+ }
12
+
13
+ &:focus {
14
+ outline: none;
15
+ }
16
+
17
+ &:hover {
18
+ .icon {
19
+ color: var(--spectrum-global-color-blue-500);
20
+ }
21
+
22
+ .value.controlIcon {
23
+ color: var(--spectrum-global-color-gray-700);
24
+ }
25
+ }
26
+
27
+ &.isDirty {
28
+ border-left: 2px solid var(--spectrum-global-color-orange-400) !important;
29
+ }
30
+
31
+ .icon {
32
+ position: absolute;
33
+ left: 0.5rem;
34
+ font-size: 16px;
35
+ color: var(--spectrum-global-color-gray-500);
36
+ }
37
+
38
+ .clearIcon {
39
+ position: absolute;
40
+ right: 8px;
41
+ color: var(--spectrum-global-color-red-500);
42
+ cursor: pointer;
43
+ }
44
+
45
+ .value {
46
+ flex: auto;
47
+ align-self: stretch;
48
+ display: flex;
49
+ align-items: center;
50
+ min-width: 0;
51
+ overflow: hidden;
52
+ padding: 0.25rem 0.5rem;
53
+ gap: 0.5rem;
54
+
55
+ &:focus {
56
+ outline: none;
57
+ }
58
+
59
+ &.placeholder {
60
+ font-style: italic;
61
+ font-weight: 400;
62
+ color: var(--spectrum-global-color-gray-500);
63
+ justify-content: space-between;
64
+ overflow: hidden;
65
+ text-overflow: ellipsis;
66
+ white-space: nowrap;
67
+ }
68
+
69
+ &.with-icon {
70
+ padding-left: 2rem !important;
71
+ }
72
+
73
+ span {
74
+ overflow: hidden;
75
+ text-overflow: ellipsis;
76
+ white-space: nowrap;
77
+
78
+ &.multiline {
79
+ overflow: auto;
80
+ white-space: normal;
81
+ text-overflow: unset;
82
+ }
83
+ }
84
+
85
+ .clearIcon,
86
+ .endIcon {
87
+ color: var(--spectrum-global-color-red-500);
88
+ cursor: pointer;
89
+ z-index: 1;
90
+ }
91
+
92
+ .controlIcon {
93
+ color: var(--spectrum-global-color-gray-600);
94
+ cursor: pointer;
95
+ }
96
+
97
+ .items {
98
+ flex: auto;
99
+ display: flex;
100
+ overflow: hidden;
101
+ align-items: stretch;
102
+ align-self: stretch;
103
+ gap: 0.5rem;
104
+
105
+ .item {
106
+ display: flex;
107
+ align-items: center;
108
+ overflow: hidden;
109
+ i {
110
+ display: none;
111
+ }
112
+
113
+ span {
114
+ overflow: hidden;
115
+ text-overflow: ellipsis;
116
+ white-space: nowrap;
117
+ }
118
+ }
119
+ }
120
+
121
+ .items.pills {
122
+ .item {
123
+ background-color: var(
124
+ --option-color,
125
+ var(--spectrum-global-color-gray-300)
126
+ );
127
+ gap: 0.5rem;
128
+ border-radius: 4px;
129
+ padding-left: 0.75rem;
130
+ padding-right: 0.75rem;
131
+ i {
132
+ display: none;
133
+ }
134
+ }
135
+ }
136
+
137
+ .items.links {
138
+ .item {
139
+ gap: 0.5rem;
140
+ border-radius: 4px;
141
+ padding-left: 0.75rem;
142
+ padding-right: 0.75rem;
143
+ background-color: var(
144
+ --option-color,
145
+ var(--spectrum-global-color-gray-300)
146
+ );
147
+ transition: 130ms;
148
+ &:hover {
149
+ cursor: pointer;
150
+ background-color: var(
151
+ --option-color,
152
+ var(--spectrum-global-color-blue-400)
153
+ );
154
+ i {
155
+ display: none;
156
+ }
157
+ }
158
+ }
159
+ }
160
+ .items.colorText {
161
+ .item {
162
+ gap: 0.5rem;
163
+ margin-top: 4px;
164
+ margin-bottom: 4px;
165
+
166
+ i {
167
+ font-size: larger;
168
+ color: var(--option-color);
169
+ display: block;
170
+ }
171
+ }
172
+ }
173
+
174
+ .items.isUser {
175
+ .item {
176
+ background-color: var(
177
+ --option-color,
178
+ var(--spectrum-global-color-blue-100)
179
+ );
180
+ gap: 0.5rem;
181
+ border-radius: 4px;
182
+ padding-left: 0.5rem;
183
+ padding-right: 0.75rem;
184
+ i {
185
+ display: block;
186
+ }
187
+ }
188
+ }
189
+
190
+ .item-count {
191
+ border-radius: 50%;
192
+ background-color: var(--spectrum-global-color-gray-200);
193
+ width: 1.7rem;
194
+ aspect-ratio: 1;
195
+ display: flex;
196
+ align-items: center;
197
+ justify-content: center;
198
+ }
199
+ }
200
+ }
201
+
202
+ .superCell.formInput {
203
+ border-radius: 2px;
204
+ color: var(--spectrum-global-color-gray-800);
205
+ border: 1px solid var(--spectrum-global-color-gray-300);
206
+ background: var(--spectrum-global-color-gray-50);
207
+
208
+ &:focus-within {
209
+ border: 1px solid var(--spectrum-global-color-blue-400) !important;
210
+ }
211
+
212
+ &.inEdit {
213
+ border: 1px solid var(--spectrum-global-color-blue-400) !important;
214
+ }
215
+
216
+ &:hover:not(.disabled):not(.readonly) {
217
+ cursor: pointer;
218
+ border: 1px solid var(--spectrum-global-color-gray-400);
219
+ }
220
+
221
+ &.disabled {
222
+ background-color: var(--spectrum-global-color-gray-200) !important;
223
+ color: var(--spectrum-global-color-gray-600) !important;
224
+ cursor: not-allowed !important;
225
+ }
226
+
227
+ &.readonly:not(.disabled) {
228
+ background-color: var(--spectrum-global-color-gray-50);
229
+ border: 1px solid var(--spectrum-global-color-gray-50);
230
+ color: var(--spectrum-global-color-gray-700);
231
+ opacity: 0.9;
232
+
233
+ &:focus-within {
234
+ border: 1px solid var(--spectrum-global-color-gray-200) !important;
235
+ opacity: 1;
236
+ }
237
+ }
238
+
239
+ &.error {
240
+ border-color: var(--spectrum-global-color-red-400) !important;
241
+ }
242
+ }
243
+
244
+ .superCell.tableCell {
245
+ min-height: unset;
246
+ border: 1px solid transparent;
247
+
248
+ &.inEdit {
249
+ border-color: var(--spectrum-global-color-blue-500);
250
+ }
251
+ }
252
+
253
+ .superCell > .editor {
254
+ width: 100%;
255
+ height: 100%;
256
+ display: flex;
257
+ align-items: center;
258
+ justify-content: space-between;
259
+ white-space: nowrap;
260
+ overflow: hidden;
261
+ gap: 0.25rem;
262
+ padding-left: 0.5rem;
263
+ padding-right: 0.5rem;
264
+ background-color: transparent;
265
+ outline: none;
266
+ border: none;
267
+ color: inherit;
268
+
269
+ &:focus {
270
+ outline: none;
271
+ border: none;
272
+ }
273
+ &:hover {
274
+ cursor: pointer;
275
+ }
276
+
277
+ &.placeholder {
278
+ font-style: italic;
279
+ }
280
+
281
+ &.with-icon {
282
+ padding-left: 2rem;
283
+ }
284
+
285
+ i {
286
+ font-size: 18px;
287
+ }
288
+ }
289
+
290
+ .superCell.formInput.multirow {
291
+ min-height: 2rem;
292
+ max-height: unset;
293
+ }
294
+
295
+ .superCell.formInput.large {
296
+ max-height: unset !important;
297
+ }
298
+
299
+ .superCell.formInput.error.inEdit:focus-within {
300
+ border: 1px solid var(--spectrum-global-color-red-500);
301
+ }
302
+
303
+ .superCell.inline {
304
+ position: relative;
305
+ border: unset;
306
+ border-radius: 2px;
307
+ min-height: 1.8rem;
308
+ min-width: unset;
309
+ }
310
+ .superCell.inline.disabled {
311
+ background-color: var(--spectrum-global-color-gray-100) !important;
312
+ color: var(--spectrum-global-color-gray-600);
313
+ cursor: not-allowed;
314
+ }
315
+ .superCell.inline.readonly {
316
+ background-color: var(--spectrum-global-color-gray-100);
317
+ color: var(--spectrum-global-color-gray-600);
318
+ cursor: not-allowed;
319
+ }
@@ -0,0 +1,180 @@
1
+ <script>
2
+ import { createEventDispatcher, getContext, onMount } from "svelte";
3
+ import SuperPopover from "../SuperPopover/SuperPopover.svelte";
4
+ import { DatePicker } from "date-picker-svelte";
5
+ const dispatch = new createEventDispatcher();
6
+ const { processStringSync } = getContext("sdk");
7
+ import fsm from "svelte-fsm";
8
+
9
+ const context = getContext("context");
10
+
11
+ export let value;
12
+ export let formattedValue;
13
+ export let cellOptions;
14
+ export let autofocus;
15
+
16
+ let originalValue;
17
+
18
+ export let cellState = fsm("View", {
19
+ "*": {
20
+ goTo(state) {
21
+ return state;
22
+ },
23
+ },
24
+ View: {
25
+ focus() {
26
+ if (!cellOptions.readonly) return "Editing";
27
+ },
28
+ },
29
+ Hovered: {
30
+ cancel: () => {
31
+ return "View";
32
+ },
33
+ },
34
+ Focused: {
35
+ unfocus() {
36
+ return "View";
37
+ },
38
+ },
39
+ Error: { check: "View" },
40
+ Editing: {
41
+ _enter() {
42
+ originalValue = value;
43
+ open = true;
44
+ dispatch("enteredit");
45
+ },
46
+ _exit() {
47
+ dispatch("exitedit");
48
+ },
49
+ handleKeyboard(e) {
50
+ if (e.keyCode == 32) {
51
+ e.stopPropagation();
52
+ e.preventDefault();
53
+ open = !open;
54
+ }
55
+ },
56
+ focusout(e) {
57
+ if (!picker?.contains(e.relatedTarget)) {
58
+ open = false;
59
+ if (value != originalValue) {
60
+ dispatch("change", value);
61
+ }
62
+ return "View";
63
+ }
64
+ },
65
+ cancel() {
66
+ value = Array.isArray(originalValue)
67
+ ? [...originalValue]
68
+ : originalValue;
69
+ return "View";
70
+ },
71
+ },
72
+ });
73
+
74
+ let anchor;
75
+ let picker;
76
+ let open;
77
+
78
+ $: innerDate = value ? new Date(value) : new Date();
79
+
80
+ $: formattedValue =
81
+ cellOptions.template && value
82
+ ? processStringSync(cellOptions.template, { value })
83
+ : undefined;
84
+
85
+ $: placeholder =
86
+ cellOptions.readonly || cellOptions.disabled
87
+ ? ""
88
+ : cellOptions.placeholder || "";
89
+
90
+ $: inEdit = $cellState == "Editing";
91
+ $: inline = cellOptions.role == "inlineInpur";
92
+ $: isDirty = inEdit && originalValue != value;
93
+
94
+ onMount(() => {
95
+ if (autofocus)
96
+ setTimeout(() => {
97
+ cellState.focus();
98
+ editor?.focus();
99
+ }, 30);
100
+ });
101
+ </script>
102
+
103
+ <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
104
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
105
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
106
+ <div
107
+ bind:this={anchor}
108
+ class="superCell"
109
+ tabindex={cellOptions.readonly || cellOptions.disabled ? "-1" : "0"}
110
+ class:inEdit
111
+ class:isDirty={isDirty && cellOptions.showDirty}
112
+ class:inline
113
+ class:tableCell={cellOptions.role == "tableCell"}
114
+ class:formInput={cellOptions.role == "formInput"}
115
+ class:disabled={cellOptions.disabled}
116
+ class:readonly={cellOptions.readonly}
117
+ class:error={cellOptions.error}
118
+ style:color={cellOptions.color}
119
+ style:background={cellOptions.background}
120
+ style:font-weight={cellOptions.fontWeight}
121
+ on:focus={cellState.focus}
122
+ on:keypress={cellState.handleKeyboard}
123
+ on:focusout={cellState.focusout}
124
+ >
125
+ {#if cellOptions.icon}
126
+ <i class={cellOptions.icon + " icon"}></i>
127
+ {/if}
128
+
129
+ {#if inEdit}
130
+ <div
131
+ class="editor"
132
+ class:with-icon={cellOptions.icon}
133
+ class:placeholder={!value && !formattedValue}
134
+ {value}
135
+ placeholder={cellOptions?.placeholder ?? ""}
136
+ on:click={() => (open = !open)}
137
+ >
138
+ {formattedValue || innerDate?.toDateString() || cellOptions?.placeholder}
139
+ <i
140
+ class="ri-calendar-line"
141
+ style="font-size: 16px; justify-self: flex-end"
142
+ ></i>
143
+ </div>
144
+ {:else}
145
+ <div
146
+ class="value"
147
+ class:with-icon={cellOptions.icon}
148
+ class:placeholder={!value}
149
+ style:justify-content={cellOptions.align}
150
+ >
151
+ <span>
152
+ {formattedValue
153
+ ? formattedValue
154
+ : value
155
+ ? innerDate?.toDateString()
156
+ : placeholder}
157
+ </span>
158
+ </div>
159
+ {/if}
160
+ </div>
161
+
162
+ {#if inEdit}
163
+ <SuperPopover {anchor} dismissible={false} {open} align="right">
164
+ <div
165
+ bind:this={picker}
166
+ style:--date-picker-background="var(--spectrum-alias-background-color-default)"
167
+ style:--date-picker-foreground="var(--spectrum-global-color-gray-800)"
168
+ style:--date-picker-selected-background="var(--accent-color)"
169
+ >
170
+ <DatePicker
171
+ bind:value={innerDate}
172
+ on:select={(e) => {
173
+ value = e.detail;
174
+ anchor?.focus();
175
+ open = false;
176
+ }}
177
+ />
178
+ </div>
179
+ </SuperPopover>
180
+ {/if}