@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,59 @@
1
+ <script>
2
+ export let active = true;
3
+ export let minHeight = "2rem";
4
+ </script>
5
+
6
+ {#if active}
7
+ <div class="skeleton" style:min-height={minHeight}>
8
+ <div class="children"></div>
9
+ </div>
10
+ {:else}
11
+ <slot />
12
+ {/if}
13
+
14
+ <style>
15
+ .skeleton {
16
+ flex: auto;
17
+ width: 100%;
18
+ align-self: stretch;
19
+ opacity: 0;
20
+ display: flex;
21
+ align-items: stretch;
22
+ justify-content: stretch;
23
+ background-color: var(--spectrum-global-color-gray-200) !important;
24
+ overflow: hidden;
25
+ position: relative;
26
+ animation: fadeIn 130ms ease 0s 1 normal forwards;
27
+ }
28
+ .children {
29
+ flex: auto;
30
+ pointer-events: none;
31
+ opacity: 0.65;
32
+ background-image: linear-gradient(
33
+ 90deg,
34
+ rgba(255, 255, 255, 0) 0,
35
+ rgba(255, 255, 255, 0.15) 20%,
36
+ rgba(255, 255, 255, 0.2) 60%,
37
+ rgba(255, 255, 255, 0.15) 80%,
38
+ rgba(255, 255, 255, 0)
39
+ );
40
+ animation: shimmer 2s infinite;
41
+ }
42
+
43
+ @keyframes fadeIn {
44
+ 0% {
45
+ opacity: 0;
46
+ }
47
+ 100% {
48
+ opacity: 0.75;
49
+ }
50
+ }
51
+ @keyframes shimmer {
52
+ 0% {
53
+ transform: translateX(-80%);
54
+ }
55
+ 100% {
56
+ transform: translateX(100%);
57
+ }
58
+ }
59
+ </style>
@@ -0,0 +1,178 @@
1
+ <script>
2
+ import { createEventDispatcher, getContext, onMount } from "svelte";
3
+ import fsm from "svelte-fsm";
4
+ const dispatch = createEventDispatcher();
5
+ const { processStringSync } = getContext("sdk");
6
+
7
+ export let value;
8
+ export let formattedValue;
9
+ export let cellOptions = {
10
+ role: "formInput",
11
+ initialState: "Editing",
12
+ debounce: 250,
13
+ };
14
+ export let autofocus;
15
+
16
+ let timer;
17
+ let originalValue;
18
+
19
+ let editor;
20
+ let lastEdit;
21
+ let localValue = value;
22
+
23
+ export let cellState = fsm(cellOptions?.initialState ?? "View", {
24
+ "*": {
25
+ goTo(state) {
26
+ return state;
27
+ },
28
+ reset() {
29
+ localValue = value;
30
+ lastEdit = undefined;
31
+ },
32
+ },
33
+ View: {
34
+ _enter() {
35
+ localValue = value;
36
+ },
37
+ focus() {
38
+ if (!cellOptions.readonly && !cellOptions.disabled) return "Editing";
39
+ },
40
+ },
41
+ Editing: {
42
+ _enter() {
43
+ originalValue = value;
44
+ dispatch("enteredit");
45
+ },
46
+ _exit() {
47
+ originalValue = undefined;
48
+ dispatch("exitedit");
49
+ dispatch("focusout");
50
+ },
51
+ clear() {
52
+ if (cellOptions.debounce) dispatch("change", null);
53
+ lastEdit = new Date();
54
+ localValue = null;
55
+ },
56
+ focusout(e) {
57
+ this.submit();
58
+ },
59
+ submit() {
60
+ if (isDirty) {
61
+ dispatch("change", localValue);
62
+ }
63
+ return "View";
64
+ },
65
+ cancel() {
66
+ value = originalValue;
67
+ dispatch("cancel");
68
+ return "View";
69
+ },
70
+ debounce(e) {
71
+ localValue = e.target.value;
72
+ lastEdit = new Date();
73
+ if (cellOptions?.debounce) {
74
+ clearTimeout(timer);
75
+ timer = setTimeout(() => {
76
+ dispatch("change", localValue);
77
+ }, cellOptions.debounce ?? 0);
78
+ }
79
+ },
80
+ handleKeyboard(e) {
81
+ if (e.key == "Enter") this.submit();
82
+ if (e.key == "Escape") this.cancel();
83
+ },
84
+ },
85
+ });
86
+
87
+ $: cellState.reset(value);
88
+ $: inEdit = $cellState == "Editing";
89
+ $: isDirty = lastEdit && originalValue != localValue;
90
+ $: formattedValue =
91
+ !formattedValue && cellOptions?.template
92
+ ? processStringSync(cellOptions.template, {
93
+ value,
94
+ })
95
+ : formattedValue;
96
+
97
+ $: placeholder =
98
+ cellOptions.readonly || cellOptions.disabled
99
+ ? ""
100
+ : cellOptions.placeholder || "";
101
+
102
+ const focus = (node) => {
103
+ node?.focus();
104
+ };
105
+
106
+ onMount(() => {
107
+ if (autofocus)
108
+ setTimeout(() => {
109
+ cellState.focus();
110
+ }, 50);
111
+ });
112
+ </script>
113
+
114
+ <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
115
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
116
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
117
+ <div
118
+ class="superCell"
119
+ class:inEdit
120
+ class:isDirty={isDirty && cellOptions.showDirty}
121
+ class:focused={inEdit}
122
+ class:inline={cellOptions.role == "inlineInput"}
123
+ class:tableCell={cellOptions.role == "tableCell"}
124
+ class:formInput={cellOptions.role == "formInput"}
125
+ class:disabled={cellOptions.disabled}
126
+ class:readonly={cellOptions.readonly}
127
+ class:error={cellOptions.error}
128
+ style:color={cellOptions.color}
129
+ style:background={cellOptions.background}
130
+ style:font-weight={cellOptions.fontWeight}
131
+ >
132
+ {#if cellOptions.icon}
133
+ <i class={cellOptions.icon + " icon"}></i>
134
+ {/if}
135
+
136
+ {#if inEdit}
137
+ <input
138
+ bind:this={editor}
139
+ tabindex="0"
140
+ class="editor"
141
+ class:with-icon={cellOptions.icon}
142
+ class:placeholder={!value && !formattedValue && !localValue}
143
+ value={localValue ?? ""}
144
+ placeholder={cellOptions?.placeholder ?? ""}
145
+ style:text-align={cellOptions.align == "center"
146
+ ? "center"
147
+ : cellOptions.align == "flex-end"
148
+ ? "right"
149
+ : "left"}
150
+ style:padding-right={cellOptions.align != "flex-start"
151
+ ? "2rem"
152
+ : "0.75rem"}
153
+ on:input={cellState.debounce}
154
+ on:focusout={cellState.focusout}
155
+ on:keydown={cellState.handleKeyboard}
156
+ use:focus
157
+ />
158
+ {#if localValue && cellOptions?.clearIcon !== false}
159
+ <i
160
+ class="ri-close-line clearIcon"
161
+ on:mousedown|self|preventDefault={cellState.clear}
162
+ />
163
+ {/if}
164
+ {:else}
165
+ <div
166
+ class="value"
167
+ tabindex={cellOptions.readonly || cellOptions.disabled ? "-1" : "0"}
168
+ class:with-icon={cellOptions.icon}
169
+ class:placeholder={!value}
170
+ style:justify-content={cellOptions.align}
171
+ on:focusin={cellState.focus}
172
+ >
173
+ <span>
174
+ {formattedValue || value || placeholder}
175
+ </span>
176
+ </div>
177
+ {/if}
178
+ </div>
@@ -0,0 +1,55 @@
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
+ initialState: "Editing",
10
+ debounce: 250,
11
+ };
12
+
13
+ $: formattedValue =
14
+ !formattedValue && cellOptions?.template
15
+ ? processStringSync(cellOptions.template, {
16
+ value,
17
+ })
18
+ : formattedValue;
19
+
20
+ $: placeholder =
21
+ cellOptions.readonly || cellOptions.disabled
22
+ ? ""
23
+ : cellOptions.placeholder || "";
24
+ </script>
25
+
26
+ <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
27
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
28
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
29
+ <div
30
+ class="superCell"
31
+ class:inline={cellOptions.role == "inlineInput"}
32
+ class:tableCell={cellOptions.role == "tableCell"}
33
+ class:formInput={cellOptions.role == "formInput"}
34
+ class:disabled={cellOptions.disabled}
35
+ class:readonly={cellOptions.readonly}
36
+ class:error={cellOptions.error}
37
+ style:color={cellOptions.color}
38
+ style:background={cellOptions.background}
39
+ style:font-weight={cellOptions.fontWeight}
40
+ >
41
+ {#if cellOptions.icon}
42
+ <i class={cellOptions.icon + " icon"}></i>
43
+ {/if}
44
+
45
+ <div
46
+ class="value"
47
+ class:with-icon={cellOptions.icon}
48
+ class:placeholder={!value}
49
+ style:justify-content={cellOptions.align}
50
+ >
51
+ <span>
52
+ {formattedValue || value || placeholder}
53
+ </span>
54
+ </div>
55
+ </div>
@@ -0,0 +1,21 @@
1
+ // Export all SuperTableCells components for easy importing
2
+ export { default as CellAttachment } from "./CellAttachment.svelte";
3
+ export { default as CellBoolean } from "./CellBoolean.svelte";
4
+ export { default as CellColor } from "./CellColor.svelte";
5
+ export { default as CellDatetime } from "./CellDatetime.svelte";
6
+ export { default as CellIcon } from "./CellIcon.svelte";
7
+ export { default as CellJSON } from "./CellJSON.svelte";
8
+ export { default as CellLink } from "./CellLink.svelte";
9
+ export { default as CellLinkAdvanced } from "./CellLinkAdvanced.svelte";
10
+ export { default as CellLinkPickerSelect } from "./CellLinkPickerSelect.svelte";
11
+ export { default as CellLinkPickerTable } from "./CellLinkPickerTable.svelte";
12
+ export { default as CellLinkPickerTree } from "./CellLinkPickerTree.svelte";
13
+ export { default as CellNumber } from "./CellNumber.svelte";
14
+ export { default as CellOptions } from "./CellOptions.svelte";
15
+ export { default as CellOptionsAdvanced } from "./CellOptionsAdvanced.svelte";
16
+ export { default as CellSkeleton } from "./CellSkeleton.svelte";
17
+ export { default as CellString } from "./CellString.svelte";
18
+ export { default as CellStringSimple } from "./CellStringSimple.svelte";
19
+
20
+ // Export utilities from this directory
21
+ export * as remixIcons from "./remixIcons.js";