@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,142 @@
1
+ <script>
2
+ import { getContext, createEventDispatcher, onMount, tick } from "svelte";
3
+
4
+ const { Provider, processStringSync, ContextScopes } = getContext("sdk");
5
+
6
+ const dispatch = createEventDispatcher();
7
+ const columnSettings = getContext("stColumnOptions");
8
+ const columnState = getContext("stColumnState");
9
+ const rowCellOptions = getContext("stRowCellOptions");
10
+ const rowMetadata = getContext("stbRowMetadata");
11
+ const stbHovered = getContext("stbHovered");
12
+ const stbSelected = getContext("stbSelected");
13
+ const stbAPI = getContext("stbAPI");
14
+ const stbState = getContext("stbState");
15
+ const stbMenuID = getContext("stbMenuID");
16
+
17
+ export let index;
18
+ export let row;
19
+ export let field;
20
+ export let idField;
21
+ export let isEditing;
22
+ export let isLast;
23
+ export let disabled;
24
+
25
+ // the default height
26
+ export let rowHeight;
27
+ let mounted;
28
+ let viewport;
29
+
30
+ $: meta = $rowMetadata?.[index] ?? {};
31
+ $: id = row?.[idField] ?? index;
32
+ $: value = deepGet(row, field);
33
+ $: isHovered = $stbHovered == index || $stbMenuID == index;
34
+ $: isSelected = $stbSelected.includes(id);
35
+ $: hasChildren = $columnSettings.hasChildren > 0;
36
+
37
+ const getCellValue = (value) => {
38
+ return $columnSettings.template
39
+ ? processStringSync($columnSettings.template, { value })
40
+ : undefined;
41
+ };
42
+
43
+ const patchRow = async (change) => {
44
+ let patch = {
45
+ ...row,
46
+ [field]: change,
47
+ };
48
+ try {
49
+ let patched_row = await stbAPI.patchRow(patch);
50
+ row = patched_row;
51
+ } catch (ex) {
52
+ console.log(ex);
53
+ } finally {
54
+ }
55
+ };
56
+
57
+ const handleSize = async () => {
58
+ if (mounted) {
59
+ await tick();
60
+ if (
61
+ $columnSettings.superColumn &&
62
+ viewport &&
63
+ viewport.scrollHeight > meta.height
64
+ ) {
65
+ dispatch("resize", viewport.scrollHeight);
66
+ } else if (
67
+ $columnSettings.superColumn &&
68
+ viewport &&
69
+ !hasChildren &&
70
+ viewport.scrollHeight > rowHeight
71
+ )
72
+ dispatch("resize", rowHeight);
73
+ }
74
+ };
75
+
76
+ const deepGet = (obj, path) => {
77
+ if (obj && path?.includes(".")) {
78
+ for (var i = 0, path = path.split("."), len = path.length; i < len; i++) {
79
+ if (obj[path[i]])
80
+ if (Array.isArray(obj[path[i]])) obj = obj[path[i]][0];
81
+ else obj = obj[path[i]];
82
+ else {
83
+ obj = null;
84
+ break;
85
+ }
86
+ }
87
+ return obj;
88
+ } else return obj[path] ?? undefined;
89
+ };
90
+ onMount(() => (mounted = $columnSettings.superColumn));
91
+ </script>
92
+
93
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
94
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
95
+ <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
96
+ <div
97
+ bind:this={viewport}
98
+ class="super-row"
99
+ class:is-selected={isSelected}
100
+ class:is-hovered={isHovered}
101
+ class:is-editing={isEditing}
102
+ class:isLast
103
+ style:height={meta.height + "px"}
104
+ style:color={meta.color}
105
+ style:background-color={meta.bgcolor}
106
+ style:justify-content={$columnSettings.align}
107
+ on:mouseenter={() => ($stbHovered = index)}
108
+ on:mouseleave={() => ($stbHovered = undefined)}
109
+ on:click={() =>
110
+ stbState.handleRowClick(index, field, deepGet(row, field), id)}
111
+ on:dblclick={() => stbAPI.executeRowOnDblClickAction(id)}
112
+ on:contextmenu|preventDefault={() => {
113
+ stbAPI.showContextMenu(index, viewport);
114
+ }}
115
+ >
116
+ {#if !hasChildren}
117
+ <svelte:component
118
+ this={$columnSettings.cellComponent}
119
+ cellOptions={{ ...$rowCellOptions, disabled }}
120
+ fieldSchema={$columnSettings.schema}
121
+ {value}
122
+ on:enteredit={() => columnState.enteredit(index)}
123
+ on:exitedit={columnState.exitedit}
124
+ on:change={(e) => patchRow(e.detail)}
125
+ on:linkClick={(e) => {
126
+ stbAPI.executeOnLinkClickAction(field, e.detail);
127
+ }}
128
+ />
129
+ {:else}
130
+ <Provider
131
+ data={{
132
+ id,
133
+ value: row[field],
134
+ row,
135
+ index,
136
+ }}
137
+ scope={ContextScopes.Local}
138
+ >
139
+ <slot />
140
+ </Provider>
141
+ {/if}
142
+ </div>
@@ -0,0 +1,34 @@
1
+ <script>
2
+ import { getContext } from "svelte";
3
+ const columnSettings = getContext("stColumnOptions");
4
+ const rowCellOptions = getContext("stRowCellOptions");
5
+ const stbState = getContext("stbState");
6
+
7
+ export let row = {};
8
+ export let isFirst;
9
+ export let isLast;
10
+ export let color;
11
+ </script>
12
+
13
+ <div
14
+ class="super-row new-row"
15
+ style:min-height={"2rem"}
16
+ style:color
17
+ class:isLast
18
+ >
19
+ <svelte:component
20
+ this={$columnSettings.cellComponent}
21
+ cellOptions={{
22
+ ...$rowCellOptions,
23
+ readonly: false,
24
+ }}
25
+ autofocus={isFirst}
26
+ fieldSchema={$columnSettings.schema}
27
+ value={row.value}
28
+ multi={$columnSettings.schema.type == "array"}
29
+ on:change={(e) => {
30
+ stbState.setValue($columnSettings.name, e.detail);
31
+ row.value = e.detail;
32
+ }}
33
+ />
34
+ </div>
@@ -0,0 +1,117 @@
1
+ <script>
2
+ import { createEventDispatcher } from "svelte";
3
+ const dispatch = createEventDispatcher();
4
+
5
+ export let tree;
6
+ export let open = false;
7
+ export let nodeSelection;
8
+ export let selectedNodes;
9
+
10
+ $: if (tree.disabled) open = false;
11
+ $: selected = $selectedNodes.find((x) => x.id == tree.id);
12
+
13
+ const toggleOpen = (e) => {
14
+ if (tree.disabled) return;
15
+ open = !open;
16
+ dispatch("nodeClick", { id: tree.id, label: tree.label });
17
+ };
18
+
19
+ // Recursion
20
+ const hasChildSelected = (children) => {
21
+ let found = false;
22
+ if (!$selectedNodes.length) return found;
23
+
24
+ if (children.findIndex((x) => x.id == $selectedNodes[0].id) > -1) {
25
+ found = true;
26
+ } else {
27
+ children.forEach((element) => {
28
+ found = hasChildSelected(element.children);
29
+ });
30
+ }
31
+ return found;
32
+ };
33
+
34
+ const toggleNode = (e) => {
35
+ if (!tree.disabled)
36
+ dispatch("nodeSelect", { id: tree.id, label: tree.label });
37
+ };
38
+ </script>
39
+
40
+ <!-- svelte-ignore a11y-missing-attribute -->
41
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
42
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
43
+ <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
44
+ <li
45
+ class="spectrum-TreeView-item"
46
+ class:is-disabled={tree.disabled}
47
+ class:is-open={open}
48
+ >
49
+ <div
50
+ class="spectrum-TreeView-itemLink"
51
+ style:padding-left={tree?.children?.length ? "0.25rem" : "1.5rem"}
52
+ style:padding-right={"0.5rem"}
53
+ >
54
+ {#if tree.children?.length}
55
+ <i
56
+ class={"ri-arrow-right-s-line"}
57
+ class:open
58
+ style:z-index={1}
59
+ style:font-size={"16px"}
60
+ on:mousedown|self|preventDefault={toggleOpen}
61
+ />
62
+ {/if}
63
+ <div
64
+ style:z-index={2}
65
+ style:width={"100%"}
66
+ on:mousedown|preventDefault={toggleNode}
67
+ >
68
+ <span class="spectrum-TreeView-itemLabel" style:padding-left={"0.25rem"}
69
+ >{tree.label || "Not Set"}</span
70
+ >
71
+ </div>
72
+
73
+ {#if selected}
74
+ <i
75
+ class={"ri-checkbox-circle-fill"}
76
+ style:color={"var(--spectrum-global-color-green-500)"}
77
+ style:font-size={"16px"}
78
+ ></i>
79
+ {/if}
80
+ </div>
81
+
82
+ {#if tree.children?.length}
83
+ <ul class="spectrum-TreeView">
84
+ {#each tree.children as node, idx}
85
+ <svelte:self
86
+ tree={node}
87
+ {nodeSelection}
88
+ {selectedNodes}
89
+ open={node.open}
90
+ on:nodeSelect
91
+ on:nodeClick
92
+ ></svelte:self>
93
+ {/each}
94
+ </ul>
95
+ {/if}
96
+ </li>
97
+
98
+ <style>
99
+ .spectrum-TreeView-item {
100
+ transition: all 130ms;
101
+ }
102
+
103
+ .spectrum-TreeView-itemLink {
104
+ display: flex;
105
+ justify-content: space-between;
106
+ align-items: center;
107
+ gap: 0.25rem;
108
+ max-height: 1.75rem;
109
+ }
110
+
111
+ i {
112
+ transition: all 130ms;
113
+ }
114
+ .open {
115
+ transform: rotate(90deg);
116
+ }
117
+ </style>
@@ -0,0 +1 @@
1
+ declare module 'svelte-portal';