@lobb-js/studio 0.24.1 → 0.26.0

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 (39) hide show
  1. package/dist/components/Studio.svelte +10 -0
  2. package/dist/components/dataTable/dataTable.svelte +8 -6
  3. package/dist/components/dataTable/dataTable.svelte.d.ts +1 -0
  4. package/dist/components/dataTable/listViewChildren.svelte +99 -0
  5. package/dist/components/dataTable/listViewChildren.svelte.d.ts +9 -0
  6. package/dist/components/detailView/create/createManyView.svelte +2 -2
  7. package/dist/components/detailView/update/detailViewChildren.svelte +77 -0
  8. package/dist/components/detailView/update/detailViewChildren.svelte.d.ts +7 -0
  9. package/dist/components/detailView/update/updateDetailView.svelte +2 -2
  10. package/dist/components/routes/collections/collections.svelte +44 -23
  11. package/dist/components/routes/data_model/dataModel.svelte +2 -8
  12. package/dist/components/routes/workflows/workflows.svelte +24 -11
  13. package/dist/components/sidebar/sidebar.svelte +12 -5
  14. package/dist/components/sidebar/sidebar.svelte.d.ts +1 -2
  15. package/dist/components/sidebar/sidebarElements.svelte +50 -75
  16. package/dist/components/sidebar/sidebarElements.svelte.d.ts +10 -3
  17. package/dist/extensions/extension.types.d.ts +1 -0
  18. package/dist/extensions/extensionUtils.d.ts +1 -0
  19. package/dist/extensions/extensionUtils.js +10 -0
  20. package/package.json +2 -2
  21. package/src/lib/components/Studio.svelte +10 -0
  22. package/src/lib/components/dataTable/dataTable.svelte +8 -6
  23. package/src/lib/components/dataTable/listViewChildren.svelte +99 -0
  24. package/src/lib/components/detailView/create/createManyView.svelte +2 -2
  25. package/src/lib/components/detailView/update/detailViewChildren.svelte +77 -0
  26. package/src/lib/components/detailView/update/updateDetailView.svelte +2 -2
  27. package/src/lib/components/routes/collections/collections.svelte +44 -23
  28. package/src/lib/components/routes/data_model/dataModel.svelte +2 -8
  29. package/src/lib/components/routes/workflows/workflows.svelte +24 -11
  30. package/src/lib/components/sidebar/sidebar.svelte +12 -5
  31. package/src/lib/components/sidebar/sidebarElements.svelte +50 -75
  32. package/src/lib/extensions/extension.types.ts +1 -0
  33. package/src/lib/extensions/extensionUtils.ts +11 -0
  34. package/dist/components/dataTable/childRecords.svelte +0 -142
  35. package/dist/components/dataTable/childRecords.svelte.d.ts +0 -9
  36. package/dist/components/detailView/update/children.svelte +0 -96
  37. package/dist/components/detailView/update/children.svelte.d.ts +0 -7
  38. package/src/lib/components/dataTable/childRecords.svelte +0 -142
  39. package/src/lib/components/detailView/update/children.svelte +0 -96
package/src/lib/components/dataTable/childRecords.svelte DELETED
@@ -1,142 +0,0 @@
1
- <script lang="ts">
2
- import { getStudioContext } from "../../context";
3
- import { ChevronRight, Plus, Smartphone, Table } from "lucide-svelte";
4
- import DataTable from "./dataTable.svelte";
5
- import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
6
- import ExtensionsComponents from "../extensionsComponents.svelte";
7
- import { getExtensionUtils } from "../../extensions/extensionUtils";
8
-
9
- const { ctx, lobb } = getStudioContext();
10
-
11
- interface Props {
12
- collectionName: string;
13
- recordId: string;
14
- width: number;
15
- unifiedBgColor?: "bg-muted/30" | "bg-background";
16
- }
17
-
18
- let { collectionName, recordId, width, unifiedBgColor }: Props = $props();
19
-
20
- const relations = ctx.meta.relations.filter(
21
- (relation) => relation.to.collection === collectionName,
22
- );
23
- let expandedRows: boolean[] = $state(
24
- new Array(relations.length).fill(false),
25
- );
26
- let refreshDataTable = $state(true);
27
- let tableHeaderWidth = $state(0);
28
- </script>
29
-
30
- <div class="flex" style="width: {width}px;">
31
- <div
32
- class="
33
- flex justify-center border-r
34
- {unifiedBgColor ? unifiedBgColor : 'bg-background'}
35
- "
36
- style="width: 40px"
37
- ></div>
38
- <div class="flex-1 flex flex-col">
39
- {#each relations as relation, index}
40
- {@const lastRow = relations.length - 1 === index}
41
- {@const fromCollection = relation.from.collection}
42
- {@const fromField = relation.from.field}
43
- <div
44
- class="
45
- overflow-hidden
46
- {unifiedBgColor ? unifiedBgColor : 'bg-background'}
47
- "
48
- >
49
- <div
50
- bind:clientWidth={tableHeaderWidth}
51
- class="
52
- flex justify-between items-center gap-2 text-sm h-10
53
- {expandedRows[index] || !lastRow ? 'border-b' : ''}
54
- "
55
- >
56
- <button
57
- class="flex gap-2 px-2 flex-1 h-full items-center"
58
- onclick={() => {
59
- expandedRows[index] = !expandedRows[index];
60
- }}
61
- >
62
- <ChevronRight
63
- size="17.5"
64
- class="text-muted-foreground transition-transform"
65
- style={expandedRows[index]
66
- ? "transform: rotate(90deg);"
67
- : "transform: rotate(0deg);"}
68
- />
69
- <Table size="17.5" class="text-muted-foreground" />
70
- <div class="text-muted-foreground">
71
- {relation.from.collection}
72
- </div>
73
- </button>
74
- <div class="flex items-center px-2">
75
- <CreateDetailViewButton
76
- collectionName={relation.from.collection}
77
- variant="ghost"
78
- class="h-7 px-3 text-xs font-normal"
79
- Icon={Plus}
80
- values={{
81
- [fromField]: {
82
- id: recordId,
83
- },
84
- }}
85
- onSuccessfullSave={async () => {
86
- refreshDataTable = !refreshDataTable;
87
- }}
88
- >
89
- Create
90
- </CreateDetailViewButton>
91
- </div>
92
- </div>
93
- {#if expandedRows[index]}
94
- <div
95
- class="
96
- flex max-h-96 overflow-auto
97
- {lastRow ? '' : 'border-b'}
98
- "
99
- >
100
- <div
101
- class="border-r {unifiedBgColor
102
- ? unifiedBgColor
103
- : ''}"
104
- style="width: 100vw; max-width: 40px"
105
- ></div>
106
- <div
107
- class="flex-1"
108
- style="width: {tableHeaderWidth - 40}px;"
109
- >
110
- {#key refreshDataTable}
111
- <ExtensionsComponents
112
- name="listView.entry.children.{fromCollection}"
113
- collectionName={fromCollection}
114
- filter={{
115
- [fromField]: recordId,
116
- }}
117
- utils={getExtensionUtils(lobb, ctx)}
118
- >
119
- <DataTable
120
- collectionName={fromCollection}
121
- filter={{
122
- [fromField]: recordId,
123
- }}
124
- showHeader={false}
125
- showFooter={false}
126
- showDelete={true}
127
- {unifiedBgColor}
128
- tableProps={{
129
- showLastRowBorder: false,
130
- showLastColumnBorder: false,
131
- showCheckboxes: false,
132
- }}
133
- />
134
- </ExtensionsComponents>
135
- {/key}
136
- </div>
137
- </div>
138
- {/if}
139
- </div>
140
- {/each}
141
- </div>
142
- </div>
package/src/lib/components/detailView/update/children.svelte DELETED
@@ -1,96 +0,0 @@
1
- <script lang="ts">
2
- import DataTable from "../../../components/dataTable/dataTable.svelte";
3
- import { getStudioContext } from "../../../context";
4
- import { Link, Plus, TableIcon } from "lucide-svelte";
5
- import CreateDetailViewButton from "../create/createDetailViewButton.svelte";
6
- import ExtensionsComponents from "../../../components/extensionsComponents.svelte";
7
- import { getExtensionUtils } from "../../../extensions/extensionUtils";
8
-
9
- const { ctx, lobb } = getStudioContext();
10
-
11
- interface LocalProp {
12
- collectionName: string;
13
- entry: any;
14
- }
15
-
16
- let { collectionName, entry }: LocalProp = $props();
17
-
18
- const childrenRelations = ctx.meta.relations.filter(
19
- (relation) => relation.to.collection === collectionName,
20
- );
21
- const refresh: boolean[] = $state(
22
- new Array(childrenRelations.length).fill(true),
23
- );
24
- </script>
25
-
26
- {#if childrenRelations.length}
27
- <div class="flex flex-col gap-4 border-t p-4">
28
- <div class="flex items-center gap-2">
29
- <Link size="17.5" />
30
- <div>Sub Records</div>
31
- </div>
32
- <div class="flex flex-col gap-4">
33
- {#each childrenRelations as relation, index}
34
- {@const childCollection = relation.from.collection}
35
- {@const childField = relation.from.field}
36
- <ExtensionsComponents
37
- name="detailView.update.subRecords.{childCollection}"
38
- utils={getExtensionUtils(lobb, ctx)}
39
- collectionName={childCollection}
40
- filter={{
41
- [childField]: entry.id,
42
- }}
43
- class="bg-muted/30 border rounded-md overflow-hidden"
44
- >
45
- <div class="border rounded-md overflow-clip">
46
- <div
47
- class="flex items-center justify-between px-2 h-10 bg-muted/30 border-b"
48
- >
49
- <div class="flex-1 flex h-full items-center gap-2">
50
- <TableIcon
51
- class="text-muted-foreground"
52
- size="17.5"
53
- />
54
- <div class="text-sm text-muted-foreground">
55
- {childCollection}
56
- </div>
57
- </div>
58
- <div class="flex gap-2">
59
- <CreateDetailViewButton
60
- variant="ghost"
61
- class="h-7 px-2 font-normal text-xs"
62
- Icon={Plus}
63
- collectionName={childCollection}
64
- onSuccessfullSave={async () => {
65
- refresh[index] = !refresh[index];
66
- }}
67
- >
68
- Create
69
- </CreateDetailViewButton>
70
- </div>
71
- </div>
72
- <div class="max-h-72 overflow-auto rounded-md">
73
- {#key refresh[index]}
74
- <DataTable
75
- collectionName={childCollection}
76
- filter={{
77
- [childField]: entry.id,
78
- }}
79
- unifiedBgColor="bg-muted/30"
80
- showHeader={false}
81
- showFooter={false}
82
- showDelete={true}
83
- tableProps={{
84
- showLastColumnBorder: false,
85
- showLastRowBorder: false,
86
- showCheckboxes: false,
87
- }}
88
- />
89
- {/key}
90
- </div>
91
- </div>
92
- </ExtensionsComponents>
93
- {/each}
94
- </div>
95
- </div>
96
- {/if}