@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,91 @@
1
+ <script>
2
+ import { createEventDispatcher, getContext } from "svelte";
3
+
4
+ const dispatch = createEventDispatcher();
5
+
6
+ const { fetchData, API } = getContext("sdk");
7
+
8
+ export let value = [];
9
+ export let datasource;
10
+ export let sortColumn;
11
+ export let sortOrder;
12
+ export let filter;
13
+ export let searchTerm;
14
+ export let pickerColumns;
15
+ export let searchColumns = [];
16
+ export let multi;
17
+
18
+ export let picker;
19
+
20
+ $: fetch = fetchData({
21
+ API,
22
+ datasource,
23
+ options: {
24
+ paginate: false,
25
+ limit: 1,
26
+ },
27
+ });
28
+
29
+ $: primaryDisplay = $fetch?.definition?.primaryDisplay || "_id";
30
+
31
+ $: tableOptions = {
32
+ idColumn: "_id",
33
+ superColumnsPos: "first",
34
+ columnSizing: "flexible",
35
+ columnMaxWidth: "auto",
36
+ debounce: 500,
37
+ visibleRowCount: 7,
38
+ rowSelectMode: multi ? "multi" : "single",
39
+ selectionColumn: false,
40
+ dividers: "horizontal",
41
+ dividersColor: null,
42
+ baseFontSize: 12,
43
+ rowHeight: 32,
44
+ showFooter: false,
45
+ showHeader: true,
46
+ canFilter: true,
47
+ canSort: true,
48
+ canEdit: false,
49
+ canDelete: false,
50
+ canInsert: false,
51
+ canResize: false,
52
+ datasource,
53
+ filter: {},
54
+ sortColumn: null,
55
+ sortOrder: null,
56
+ limit: 10,
57
+ paginate: false,
58
+ autoRefresh: false,
59
+ autoRefreshRate: 10,
60
+ columnList: pickerColumns,
61
+ size: "S",
62
+ cellPadding: "0.5rem",
63
+ useOptionColors: true,
64
+ optionsViewMode: "text",
65
+ relViewMode: "text",
66
+ onRowSelect: (arr) => {
67
+ var val = arr.selectedRows.map((x) => {
68
+ return { _id: x["_id"], primaryDisplay: x[primaryDisplay] };
69
+ });
70
+ dispatch("change", val);
71
+ },
72
+ };
73
+
74
+ // <SuperTable on:change {...tableOptions}></SuperTable>
75
+ </script>
76
+
77
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
78
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
79
+ <div bind:this={picker} class="control"></div>
80
+
81
+ <style>
82
+ .control {
83
+ flex: auto;
84
+ flex-direction: column;
85
+ display: flex;
86
+ align-items: stretch;
87
+ justify-content: stretch;
88
+ overflow-x: hidden;
89
+ padding: 0.25rem;
90
+ }
91
+ </style>
@@ -0,0 +1,226 @@
1
+ <script>
2
+ import { createEventDispatcher, getContext } from "svelte";
3
+ import { writable } from "svelte/store";
4
+ import SuperTree from "../SuperTree/SuperTree.svelte";
5
+ import CellString from "./CellString.svelte";
6
+ const { API, fetchData, notificationStore } = getContext("sdk");
7
+
8
+ const dispatch = createEventDispatcher();
9
+
10
+ export let value = [];
11
+ export let ownId;
12
+
13
+ export let fieldSchema;
14
+ export let joinColumn;
15
+
16
+ export let sortColumn;
17
+ export let sortOrder;
18
+ export let filter = [];
19
+ export let limit = 250;
20
+ export let multi = false;
21
+ export let quiet;
22
+ export let search;
23
+
24
+ let selectedNodes = new writable([]);
25
+ let maxNodeSelection = 10;
26
+ let name = joinColumn || fieldSchema.name;
27
+ let treeLoaded = false;
28
+ let appliedFilter = [];
29
+
30
+ let tree = {
31
+ root: true,
32
+ id: "root",
33
+ label: "Super Tree",
34
+ children: [],
35
+ };
36
+
37
+ $: fetch = fetchData({
38
+ API,
39
+ datasource: {
40
+ type: "table",
41
+ tableId: fieldSchema.tableId,
42
+ },
43
+ options: {
44
+ sortOrder,
45
+ sortColumn,
46
+ filter,
47
+ limit,
48
+ },
49
+ });
50
+
51
+ $: primaryDisplay = $fetch?.definition?.primaryDisplay;
52
+ $: idColumn = $fetch?.definition?.primary?.[0] ?? "_id";
53
+ $: buildRootTree($fetch.rows);
54
+ $: setSelections(value);
55
+
56
+ // Recursion
57
+ const getChildren = (rows, parent) => {
58
+ let children = [];
59
+ rows?.forEach((row) => {
60
+ if (row[name] == parent[idColumn]) {
61
+ children.push({
62
+ id: row[idColumn],
63
+ disabled: row[idColumn] == ownId,
64
+ disableChildren: true,
65
+ label: row[$fetch.definition.primaryDisplay],
66
+ children: getChildren(rows, row),
67
+ });
68
+ }
69
+ });
70
+ return children;
71
+ };
72
+
73
+ // Build Tree Structure
74
+ const buildRootTree = (rows) => {
75
+ treeLoaded = false;
76
+ tree.children = [];
77
+ if (rows?.length) {
78
+ rows?.forEach((row) => {
79
+ if (row[name]) {
80
+ // Skip if it has a parent set
81
+ } else {
82
+ tree.children.push({
83
+ id: row[idColumn],
84
+ disabled: row[idColumn] == ownId,
85
+ disableChildren: true,
86
+ label: row[$fetch.definition.primaryDisplay],
87
+ children: getChildren(rows, row),
88
+ });
89
+ }
90
+ });
91
+ tree = tree;
92
+ treeLoaded = true;
93
+ }
94
+ };
95
+
96
+ // Handle Node Selection
97
+ const handleNodeSelect = (e) => {
98
+ if (e.detail.id == ownId) return;
99
+
100
+ if (multi) {
101
+ let index = $selectedNodes.findIndex((x) => x.id == e.detail.id);
102
+ if (index > -1) {
103
+ $selectedNodes.splice(index, 1);
104
+ $selectedNodes = $selectedNodes;
105
+ } else if ($selectedNodes.length < maxNodeSelection) {
106
+ $selectedNodes = [...$selectedNodes, e.detail];
107
+ } else if (maxNodeSelection == 1) {
108
+ $selectedNodes = [e.detail];
109
+ } else {
110
+ notificationStore.actions.warning(
111
+ "Cannot select more than " + maxNodeSelection + " items"
112
+ );
113
+ }
114
+ } else {
115
+ $selectedNodes =
116
+ $selectedNodes[0]?.id !== e.detail.id
117
+ ? [{ id: e.detail.id, label: e.detail.label }]
118
+ : [];
119
+ }
120
+
121
+ if (cellOptions.debounce)
122
+ dispatch(
123
+ "change",
124
+ $selectedNodes.map((x) => {
125
+ return { _id: x.id, primaryDisplay: x.label };
126
+ })
127
+ );
128
+ };
129
+
130
+ const setSelections = () => {
131
+ if (value && value.length) {
132
+ $selectedNodes = [];
133
+ $selectedNodes = value.map((x) => {
134
+ return { id: x["_id"], label: x["primaryDisplay"] };
135
+ });
136
+ }
137
+ };
138
+
139
+ const handleSearch = (e) => {
140
+ if (e.detail && e.detail != "") {
141
+ appliedFilter = [
142
+ ...filter,
143
+ {
144
+ field: primaryDisplay,
145
+ type: "string",
146
+ operator: "fuzzy",
147
+ value: e.detail,
148
+ valueType: "Value",
149
+ },
150
+ ];
151
+ } else {
152
+ appliedFilter = filter ?? [];
153
+ }
154
+
155
+ fetch?.update({
156
+ filter: appliedFilter,
157
+ });
158
+ };
159
+
160
+ let cellOptions = {
161
+ icon: "ri-search-line",
162
+ initialState: "Editing",
163
+ role: "inlineInput",
164
+ debounce: 50,
165
+ };
166
+ </script>
167
+
168
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
169
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
170
+ <div class="control">
171
+ {#if search}
172
+ <div class="search">
173
+ <CellString
174
+ on:change={handleSearch}
175
+ autofocus
176
+ {cellOptions}
177
+ on:exitedit={() => dispatch("focusout", {})}
178
+ />
179
+ </div>
180
+ {/if}
181
+ <ul
182
+ class="spectrum-TreeView"
183
+ style="margin: unset;"
184
+ class:spectrum-TreeView--quiet={quiet}
185
+ >
186
+ {#if $fetch.loaded && $fetch.rows?.length}
187
+ {#each tree?.children as node, idx (idx)}
188
+ <SuperTree
189
+ tree={node}
190
+ nodeSelection
191
+ {selectedNodes}
192
+ on:nodeSelect={handleNodeSelect}
193
+ />
194
+ {/each}
195
+ {:else if $fetch.loading}
196
+ <li class="spectrum-TreeView-item" class:is-open={true}>
197
+ <div class="spectrum-TreeView-itemLink">Loading</div>
198
+ </li>
199
+ {:else}
200
+ <li class="spectrum-TreeView-item" class:is-open={true}>
201
+ <div class="spectrum-TreeView-itemLink">No Matches</div>
202
+ </li>
203
+ {/if}
204
+ </ul>
205
+ </div>
206
+
207
+ <style>
208
+ .control {
209
+ flex: auto;
210
+ flex-direction: column;
211
+ display: flex;
212
+ align-items: stretch;
213
+ justify-content: stretch;
214
+ overflow-x: hidden;
215
+ gap: 0.25rem;
216
+ min-height: 260px;
217
+ max-height: 260px;
218
+ }
219
+
220
+ .search {
221
+ height: 2rem;
222
+ border-bottom: 1px solid var(--spectrum-global-color-gray-300);
223
+ display: flex;
224
+ align-items: stretch;
225
+ }
226
+ </style>
@@ -0,0 +1,179 @@
1
+ <script>
2
+ import { createEventDispatcher, getContext, onMount } from "svelte";
3
+ import fsm from "svelte-fsm";
4
+
5
+ const { processStringSync } = getContext("sdk");
6
+ const context = getContext("context");
7
+ const dispatch = createEventDispatcher();
8
+
9
+ export let value;
10
+ export let formattedValue;
11
+ export let cellOptions;
12
+ export let autofocus;
13
+
14
+ let originalValue = value;
15
+ let inEdit;
16
+ let localValue = value;
17
+ let editor;
18
+
19
+ $: inEdit = $cellState == "Editing";
20
+ $: inline = cellOptions.role == "inlineInput";
21
+ $: isDirty = inEdit && originalValue != localValue;
22
+ $: formattedValue = cellOptions.template
23
+ ? processStringSync(cellOptions.template, {
24
+ ...$context,
25
+ value: localValue,
26
+ })
27
+ : undefined;
28
+
29
+ $: placeholder =
30
+ cellOptions.readonly || cellOptions.disabled
31
+ ? ""
32
+ : cellOptions.placeholder || "";
33
+
34
+ export let cellState = fsm(cellOptions.initialState ?? "View", {
35
+ "*": {
36
+ goTo(state) {
37
+ return state;
38
+ },
39
+ },
40
+ View: {
41
+ focus() {
42
+ if (!cellOptions.readonly && !cellOptions.disabled) return "Editing";
43
+ },
44
+ },
45
+ Hovered: {
46
+ cancel: () => {
47
+ return "View";
48
+ },
49
+ },
50
+ Focused: {
51
+ unfocus() {
52
+ return "View";
53
+ },
54
+ },
55
+ Error: { check: "View" },
56
+ Editing: {
57
+ _enter() {
58
+ originalValue = localValue;
59
+ editor?.focus();
60
+ dispatch("enteredit");
61
+ },
62
+ _exit() {
63
+ dispatch("exitedit");
64
+ },
65
+ focusout() {
66
+ if (isDirty && !cellOptions.debounce) dispatch("change", localValue);
67
+
68
+ dispatch("focusout");
69
+ return "View";
70
+ },
71
+ clear() {
72
+ if (cellOptions.debounce) dispatch("change", null);
73
+ localValue = null;
74
+ },
75
+ cancel() {
76
+ value = originalValue;
77
+ },
78
+ },
79
+ });
80
+
81
+ let timer;
82
+ const debounce = (e) => {
83
+ // Abort Invalid Keys
84
+ if (
85
+ (e.key.length === 1 && e.key !== "." && isNaN(e.key) && !e.ctrlKey) ||
86
+ e.keyCode == 32 ||
87
+ (e.key === "." && e.target.value.toString().indexOf(".") > -1)
88
+ ) {
89
+ e.preventDefault();
90
+ return;
91
+ }
92
+ if (cellOptions.debounce) {
93
+ clearTimeout(timer);
94
+ timer = setTimeout(() => {
95
+ dispatch("change", localValue);
96
+ }, cellOptions.debounce ?? 0);
97
+ }
98
+ };
99
+
100
+ function focus(element) {
101
+ setTimeout(element?.focus(), 10);
102
+ }
103
+
104
+ onMount(() => {
105
+ if (autofocus)
106
+ setTimeout(() => {
107
+ cellState.focus();
108
+ editor?.focus();
109
+ }, 30);
110
+ });
111
+ </script>
112
+
113
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
114
+ <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
115
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
116
+ <div
117
+ class="superCell"
118
+ class:error={cellOptions.error}
119
+ class:readonly={cellOptions.readonly}
120
+ class:disabled={cellOptions.disabled}
121
+ class:inEdit
122
+ class:isDirty
123
+ class:inline
124
+ class:tableCell={cellOptions?.role == "tableCell"}
125
+ class:formInput={cellOptions?.role == "formInput"}
126
+ style:color={cellOptions?.color}
127
+ style:background={inEdit
128
+ ? "var(--spectrum-global-color-gray-50)"
129
+ : cellOptions?.background}
130
+ style:font-weight={cellOptions?.fontWeight}
131
+ tabIndex={cellOptions.disabled ? "-1" : 0}
132
+ on:focusin={cellState.focus}
133
+ >
134
+ {#if cellOptions?.icon}
135
+ <i class={cellOptions.icon + " icon"}></i>
136
+ {/if}
137
+
138
+ {#if $cellState == "Editing"}
139
+ <input
140
+ class="editor"
141
+ class:placeholder={!localValue}
142
+ type="text"
143
+ style:padding-right={"32px"}
144
+ style:text-align={cellOptions.align == "flex-start"
145
+ ? "left"
146
+ : cellOptions.align == "center"
147
+ ? "center"
148
+ : "right "}
149
+ placeholder={cellOptions?.placeholder}
150
+ bind:value={localValue}
151
+ on:keydown={(e) => debounce(e)}
152
+ on:focusout={cellState.focusout}
153
+ use:focus
154
+ />
155
+ <i class="ri-close-line clearIcon" on:mousedown|self={cellState.clear}> </i>
156
+ {:else}
157
+ <div
158
+ class="value"
159
+ style:padding-right={"12px"}
160
+ class:placeholder={!value && !formattedValue}
161
+ style:justify-content={cellOptions.align}
162
+ >
163
+ {formattedValue || value || placeholder}
164
+ </div>
165
+ {/if}
166
+ </div>
167
+
168
+ <style>
169
+ .value {
170
+ flex: auto;
171
+ display: flex;
172
+ align-items: center;
173
+ justify-content: flex-end;
174
+ box-sizing: border-box;
175
+ white-space: nowrap;
176
+ text-overflow: ellipsis;
177
+ overflow: hidden;
178
+ }
179
+ </style>
@@ -0,0 +1,56 @@
1
+ <script>
2
+ import { getContext } from "svelte";
3
+ const { processStringSync } = getContext("sdk");
4
+
5
+ export let value = null;
6
+ export let formattedValue;
7
+ export let cellOptions = {
8
+ role: "formInput",
9
+ };
10
+
11
+ $: formattedValue =
12
+ !formattedValue && cellOptions?.template
13
+ ? processStringSync(cellOptions.template, {
14
+ value,
15
+ })
16
+ : formattedValue;
17
+
18
+ $: placeholder =
19
+ cellOptions.readonly || cellOptions.disabled
20
+ ? ""
21
+ : cellOptions.placeholder || "";
22
+ </script>
23
+
24
+ <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
25
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
26
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
27
+ <div
28
+ class="superCell"
29
+ class:inline={cellOptions.role == "inlineInput"}
30
+ class:tableCell={cellOptions.role == "tableCell"}
31
+ class:formInput={cellOptions.role == "formInput"}
32
+ class:disabled={cellOptions.disabled}
33
+ class:readonly={cellOptions.readonly}
34
+ class:error={cellOptions.error}
35
+ style:color={cellOptions.color}
36
+ style:background={cellOptions.background}
37
+ style:font-weight={cellOptions.fontWeight}
38
+ >
39
+ {#if cellOptions.icon}
40
+ <i class="{cellOptions.icon} icon"></i>
41
+ {/if}
42
+
43
+ <div
44
+ class="value"
45
+ class:with-icon={cellOptions.icon}
46
+ class:placeholder={!value && !formattedValue}
47
+ style:justify-content={cellOptions.align}
48
+ style:text-align={cellOptions.align == "flex-start"
49
+ ? "left"
50
+ : cellOptions.align == "center"
51
+ ? "center"
52
+ : "right"}
53
+ >
54
+ {formattedValue || value || placeholder}
55
+ </div>
56
+ </div>