@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.
- package/LICENSE +21 -0
- package/README.md +66 -0
- package/dist/index.js +30635 -0
- package/dist/index.umd.cjs +12 -0
- package/dist/style.css +1 -0
- package/package.json +117 -0
- package/src/index.js +29 -0
- package/src/index.ts +31 -0
- package/src/lib/Actions/autoresize_textarea.js +14 -0
- package/src/lib/Actions/click_outside.js +80 -0
- package/src/lib/Actions/index.js +4 -0
- package/src/lib/Actions/position_dropdown.js +129 -0
- package/src/lib/SuperButton/SuperButton.svelte +341 -0
- package/src/lib/SuperFieldLabel/SuperFieldLabel.svelte +91 -0
- package/src/lib/SuperFieldsCommon.css +54 -0
- package/src/lib/SuperList/SuperList.svelte +308 -0
- package/src/lib/SuperList/drag-handle.svelte +31 -0
- package/src/lib/SuperPopover/SuperPopover.svelte +134 -0
- package/src/lib/SuperTable/SuperTable.css +410 -0
- package/src/lib/SuperTable/SuperTable.svelte +1332 -0
- package/src/lib/SuperTable/constants.js +85 -0
- package/src/lib/SuperTable/controls/ColumnsSection.svelte +34 -0
- package/src/lib/SuperTable/controls/ControlSection.svelte +3 -0
- package/src/lib/SuperTable/controls/RowButtonsColumn.svelte +169 -0
- package/src/lib/SuperTable/controls/SelectionColumn.svelte +174 -0
- package/src/lib/SuperTable/controls/SuperTableWelcome.svelte +58 -0
- package/src/lib/SuperTable/overlays/AddNewRowOverlay.svelte +52 -0
- package/src/lib/SuperTable/overlays/EmptyResultSetOverlay.svelte +13 -0
- package/src/lib/SuperTable/overlays/LoadingOverlay.svelte +3 -0
- package/src/lib/SuperTable/overlays/RowContextMenu copy.svelte +57 -0
- package/src/lib/SuperTable/overlays/RowContextMenu.svelte +58 -0
- package/src/lib/SuperTable/overlays/ScrollbarsOverlay.svelte +184 -0
- package/src/lib/SuperTable/overlays/SelectedActionsOverlay.svelte +64 -0
- package/src/lib/SuperTable/state/API.js +0 -0
- package/src/lib/SuperTable/state/SuperTableStateMachine.js +0 -0
- package/src/lib/SuperTable/types.js +0 -0
- package/src/lib/SuperTableCells/CellAttachment.svelte +288 -0
- package/src/lib/SuperTableCells/CellBoolean.svelte +158 -0
- package/src/lib/SuperTableCells/CellColor.svelte +460 -0
- package/src/lib/SuperTableCells/CellCommon.css +319 -0
- package/src/lib/SuperTableCells/CellDatetime.svelte +180 -0
- package/src/lib/SuperTableCells/CellIcon.svelte +627 -0
- package/src/lib/SuperTableCells/CellJSON.svelte +297 -0
- package/src/lib/SuperTableCells/CellLink.svelte +274 -0
- package/src/lib/SuperTableCells/CellLinkAdvanced.svelte +298 -0
- package/src/lib/SuperTableCells/CellLinkPickerSelect.svelte +355 -0
- package/src/lib/SuperTableCells/CellLinkPickerTable.svelte +91 -0
- package/src/lib/SuperTableCells/CellLinkPickerTree.svelte +226 -0
- package/src/lib/SuperTableCells/CellNumber.svelte +179 -0
- package/src/lib/SuperTableCells/CellNumberSimple.svelte +56 -0
- package/src/lib/SuperTableCells/CellOptions.svelte +631 -0
- package/src/lib/SuperTableCells/CellOptionsAdvanced.svelte +684 -0
- package/src/lib/SuperTableCells/CellSkeleton.svelte +59 -0
- package/src/lib/SuperTableCells/CellString.svelte +178 -0
- package/src/lib/SuperTableCells/CellStringSimple.svelte +55 -0
- package/src/lib/SuperTableCells/index.js +21 -0
- package/src/lib/SuperTableCells/remixIcons.js +6772 -0
- package/src/lib/SuperTableColumn/SuperTableColumn.svelte +392 -0
- package/src/lib/SuperTableColumn/index.js +9 -0
- package/src/lib/SuperTableColumn/parts/SuperColumnBody.svelte +57 -0
- package/src/lib/SuperTableColumn/parts/SuperColumnFooter.svelte +14 -0
- package/src/lib/SuperTableColumn/parts/SuperColumnHeader.svelte +228 -0
- package/src/lib/SuperTableColumn/parts/SuperColumnRow.svelte +142 -0
- package/src/lib/SuperTableColumn/parts/SuperColumnRowNew.svelte +34 -0
- package/src/lib/SuperTree/SuperTree.svelte +117 -0
- 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';
|