@lobb-js/studio 0.23.0 → 0.24.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 (8) hide show
  1. package/dist/components/dataTable/fieldCell.svelte +64 -51
  2. package/dist/components/dataTable/table.svelte +1 -1
  3. package/dist/components/importButton.svelte +15 -8
  4. package/package.json +2 -2
  5. package/src/app.css +0 -1
  6. package/src/lib/components/dataTable/fieldCell.svelte +64 -51
  7. package/src/lib/components/dataTable/table.svelte +1 -1
  8. package/src/lib/components/importButton.svelte +15 -8
package/dist/components/dataTable/fieldCell.svelte CHANGED
@@ -6,8 +6,10 @@
6
6
  import EnumBadge from "./enumBadge.svelte";
7
7
  import PolymorphicFieldCell from "./polymorphicFieldCell.svelte";
8
8
  import { getStudioContext } from "../../context";
9
+ import ExtensionsComponents from "../extensionsComponents.svelte";
10
+ import { getExtensionUtils } from "../../extensions/extensionUtils";
9
11
 
10
- const { ctx } = getStudioContext();
12
+ const { ctx, lobb } = getStudioContext();
11
13
 
12
14
  interface Props {
13
15
  collectionName: string;
@@ -32,55 +34,66 @@
32
34
  const isPasswordField = ctx.meta.collections[collectionName].fields[fieldName]?.ui?.input?.type === "password";
33
35
  </script>
34
36
 
35
- {#if polymorphicRelation}
36
- <PolymorphicFieldCell
37
- collectionField={polymorphicRelation.from.collection_field}
38
- idField={polymorphicRelation.from.id_field}
39
- {entry}
40
- bind:tableParams
41
- />
42
- {:else if isRefrenceField}
43
- {#if value?.id && value.id !== 0}
44
- <div class="flex items-center gap-2">
45
- <div>{value.id}</div>
46
- {#if Object.values(value)[1]}
47
- <div class="border bg-muted px-3 py-1 rounded-full">
48
- {Object.values(value)[1]}
37
+ <ExtensionsComponents
38
+ name="dataTable.cell"
39
+ utils={getExtensionUtils(lobb, ctx)}
40
+ {collectionName}
41
+ {fieldName}
42
+ {value}
43
+ {entry}
44
+ >
45
+ {#snippet children()}
46
+ {#if polymorphicRelation}
47
+ <PolymorphicFieldCell
48
+ collectionField={polymorphicRelation.from.collection_field}
49
+ idField={polymorphicRelation.from.id_field}
50
+ {entry}
51
+ bind:tableParams
52
+ />
53
+ {:else if isRefrenceField}
54
+ {#if value?.id && value.id !== 0}
55
+ <div class="flex items-center gap-2">
56
+ <div>{value.id}</div>
57
+ {#if Object.values(value)[1]}
58
+ <div class="border bg-muted px-3 py-1 rounded-full">
59
+ {Object.values(value)[1]}
60
+ </div>
61
+ {/if}
62
+ <UpdateDetailViewButton
63
+ collectionName={relationTarget!}
64
+ recordId={value.id}
65
+ variant="ghost"
66
+ class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
67
+ Icon={ExternalLink}
68
+ onSuccessfullSave={async () => {
69
+ tableParams = { ...tableParams };
70
+ }}
71
+ />
49
72
  </div>
73
+ {:else if value?.id === 0}
74
+ <div class="text-muted-foreground">PARENT ID</div>
75
+ {:else}
76
+ <div class="text-muted-foreground">NULL</div>
50
77
  {/if}
51
- <UpdateDetailViewButton
52
- collectionName={relationTarget!}
53
- recordId={value.id}
54
- variant="ghost"
55
- class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
56
- Icon={ExternalLink}
57
- onSuccessfullSave={async () => {
58
- tableParams = { ...tableParams };
59
- }}
60
- />
61
- </div>
62
- {:else if value?.id === 0}
63
- <div class="text-muted-foreground">PARENT ID</div>
64
- {:else}
65
- <div class="text-muted-foreground">NULL</div>
66
- {/if}
67
- {:else if isPasswordField}
68
- <div class="text-muted-foreground tracking-widest">••••••</div>
69
- {:else if value === ""}
70
- <div class="text-muted-foreground">EMPTY STRING</div>
71
- {:else if value === null || value === undefined}
72
- <div class="text-muted-foreground">NULL</div>
73
- {:else if field?.enum}
74
- <EnumBadge {value} enum={field.enum} />
75
- {:else if field.type === "datetime"}
76
- {@const date = new Date(value).toLocaleDateString()}
77
- {@const time = new Date(value).toLocaleTimeString()}
78
- <div>{date}, {time}</div>
79
- {:else if field.type === "date"}
80
- {@const date = new Date(value).toLocaleDateString()}
81
- <div>{date}</div>
82
- {:else if field.type === "time"}
83
- <div>{value}</div>
84
- {:else}
85
- {value}
86
- {/if}
78
+ {:else if isPasswordField}
79
+ <div class="text-muted-foreground tracking-widest">••••••</div>
80
+ {:else if value === ""}
81
+ <div class="text-muted-foreground">EMPTY STRING</div>
82
+ {:else if value === null || value === undefined}
83
+ <div class="text-muted-foreground">NULL</div>
84
+ {:else if field?.enum}
85
+ <EnumBadge {value} enum={field.enum} />
86
+ {:else if field.type === "datetime"}
87
+ {@const date = new Date(value).toLocaleDateString()}
88
+ {@const time = new Date(value).toLocaleTimeString()}
89
+ <div>{date}, {time}</div>
90
+ {:else if field.type === "date"}
91
+ {@const date = new Date(value).toLocaleDateString()}
92
+ <div>{date}</div>
93
+ {:else if field.type === "time"}
94
+ <div>{value}</div>
95
+ {:else}
96
+ {value}
97
+ {/if}
98
+ {/snippet}
99
+ </ExtensionsComponents>
package/dist/components/dataTable/table.svelte CHANGED
@@ -209,7 +209,7 @@
209
209
  class="
210
210
  sticky top-0 z-10
211
211
  flex items-center p-2.5 text-xs h-10
212
- {unifiedBgColor ? unifiedBgColor : 'bg-muted/30'}
212
+ {unifiedBgColor ? unifiedBgColor : 'bg-muted'}
213
213
  {lastColumn && !showLastColumnBorder ? '' : 'border-r'}
214
214
  border-b gap-2
215
215
  {headerBorderTop ? 'border-t' : ''}
package/dist/components/importButton.svelte CHANGED
@@ -8,6 +8,8 @@
8
8
  import Table from "./dataTable/table.svelte";
9
9
  import Fuse from "fuse.js";
10
10
  import { emitEvent } from "../eventSystem";
11
+ import ExtensionsComponents from "./extensionsComponents.svelte";
12
+ import { getExtensionUtils } from "../extensions/extensionUtils";
11
13
 
12
14
  const { lobb, ctx } = getStudioContext();
13
15
 
@@ -127,24 +129,23 @@
127
129
  });
128
130
  const finalRows = eventResult.rows ?? transformedRows;
129
131
 
130
- const results: { row: any; error: string | null }[] = [];
132
+ importResults = [];
133
+ let hasSuccess = false;
131
134
  for (const row of finalRows) {
132
135
  const response = await lobb.createOne(collectionName, row);
133
136
  if (response.ok) {
134
- results.push({ row, error: null });
137
+ importResults.push({ row, error: null });
138
+ hasSuccess = true;
135
139
  } else {
136
140
  const body = await response.json().catch(() => null);
137
141
  const message = body?.details
138
142
  ? Object.entries(body.details).map(([f, msgs]) => `${f}: ${(msgs as string[]).join(", ")}`).join(" | ")
139
143
  : (body?.message ?? `HTTP ${response.status}`);
140
- results.push({ row, error: message });
144
+ importResults.push({ row, error: message });
141
145
  }
142
146
  }
147
+ if (hasSuccess && onSuccessfullSave) await onSuccessfullSave();
143
148
 
144
- importResults = results;
145
- const succeeded = results.filter((r) => r.error === null);
146
-
147
- if (succeeded.length > 0 && onSuccessfullSave) await onSuccessfullSave();
148
149
  step = "results";
149
150
  } catch (e: any) {
150
151
  step = "preview";
@@ -180,7 +181,7 @@
180
181
  onOpenChange={(open) => { if (!open) hideDrawer(); }}
181
182
  >
182
183
  <Dialog.Content
183
- class="flex flex-col gap-0 p-0 overflow-clip {step === 'preview' || (step === 'results' && importResults.some((r) => r.error !== null)) ? 'max-w-5xl h-[80vh]' : 'max-w-lg'}"
184
+ class="flex flex-col gap-0 p-0 overflow-clip {step === 'preview' || (step === 'results' && importResults.some((r) => r.error !== null)) ? 'max-w-7xl h-[80vh]' : 'max-w-lg'}"
184
185
  >
185
186
  <!-- Header -->
186
187
  <div class="flex h-12 shrink-0 items-center justify-between border-b px-4">
@@ -212,6 +213,12 @@
212
213
  </button>
213
214
  </div>
214
215
 
216
+ <ExtensionsComponents
217
+ name="collections.import.info"
218
+ utils={getExtensionUtils(lobb, ctx)}
219
+ {collectionName}
220
+ />
221
+
215
222
  <div class="p-4">
216
223
  {#if activeTab === "upload"}
217
224
  <div
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@lobb-js/studio",
3
3
  "license": "UNLICENSED",
4
- "version": "0.23.0",
4
+ "version": "0.24.1",
5
5
  "type": "module",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -42,7 +42,7 @@
42
42
  "postpublish": "./scripts/postpublish.sh"
43
43
  },
44
44
  "devDependencies": {
45
- "@lobb-js/core": "^0.26.0",
45
+ "@lobb-js/core": "^0.26.2",
46
46
  "@chromatic-com/storybook": "^4.1.2",
47
47
  "@storybook/addon-a11y": "^10.0.1",
48
48
  "@storybook/addon-docs": "^10.0.1",
package/src/app.css CHANGED
@@ -3,7 +3,6 @@
3
3
  @import "tw-animate-css";
4
4
 
5
5
  @source "../../../packages";
6
- @source "../node_modules/@lobb-js";
7
6
 
8
7
  @custom-variant dark (&:is(.dark *));
9
8
 
package/src/lib/components/dataTable/fieldCell.svelte CHANGED
@@ -6,8 +6,10 @@
6
6
  import EnumBadge from "./enumBadge.svelte";
7
7
  import PolymorphicFieldCell from "./polymorphicFieldCell.svelte";
8
8
  import { getStudioContext } from "../../context";
9
+ import ExtensionsComponents from "../extensionsComponents.svelte";
10
+ import { getExtensionUtils } from "../../extensions/extensionUtils";
9
11
 
10
- const { ctx } = getStudioContext();
12
+ const { ctx, lobb } = getStudioContext();
11
13
 
12
14
  interface Props {
13
15
  collectionName: string;
@@ -32,55 +34,66 @@
32
34
  const isPasswordField = ctx.meta.collections[collectionName].fields[fieldName]?.ui?.input?.type === "password";
33
35
  </script>
34
36
 
35
- {#if polymorphicRelation}
36
- <PolymorphicFieldCell
37
- collectionField={polymorphicRelation.from.collection_field}
38
- idField={polymorphicRelation.from.id_field}
39
- {entry}
40
- bind:tableParams
41
- />
42
- {:else if isRefrenceField}
43
- {#if value?.id && value.id !== 0}
44
- <div class="flex items-center gap-2">
45
- <div>{value.id}</div>
46
- {#if Object.values(value)[1]}
47
- <div class="border bg-muted px-3 py-1 rounded-full">
48
- {Object.values(value)[1]}
37
+ <ExtensionsComponents
38
+ name="dataTable.cell"
39
+ utils={getExtensionUtils(lobb, ctx)}
40
+ {collectionName}
41
+ {fieldName}
42
+ {value}
43
+ {entry}
44
+ >
45
+ {#snippet children()}
46
+ {#if polymorphicRelation}
47
+ <PolymorphicFieldCell
48
+ collectionField={polymorphicRelation.from.collection_field}
49
+ idField={polymorphicRelation.from.id_field}
50
+ {entry}
51
+ bind:tableParams
52
+ />
53
+ {:else if isRefrenceField}
54
+ {#if value?.id && value.id !== 0}
55
+ <div class="flex items-center gap-2">
56
+ <div>{value.id}</div>
57
+ {#if Object.values(value)[1]}
58
+ <div class="border bg-muted px-3 py-1 rounded-full">
59
+ {Object.values(value)[1]}
60
+ </div>
61
+ {/if}
62
+ <UpdateDetailViewButton
63
+ collectionName={relationTarget!}
64
+ recordId={value.id}
65
+ variant="ghost"
66
+ class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
67
+ Icon={ExternalLink}
68
+ onSuccessfullSave={async () => {
69
+ tableParams = { ...tableParams };
70
+ }}
71
+ />
49
72
  </div>
73
+ {:else if value?.id === 0}
74
+ <div class="text-muted-foreground">PARENT ID</div>
75
+ {:else}
76
+ <div class="text-muted-foreground">NULL</div>
50
77
  {/if}
51
- <UpdateDetailViewButton
52
- collectionName={relationTarget!}
53
- recordId={value.id}
54
- variant="ghost"
55
- class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
56
- Icon={ExternalLink}
57
- onSuccessfullSave={async () => {
58
- tableParams = { ...tableParams };
59
- }}
60
- />
61
- </div>
62
- {:else if value?.id === 0}
63
- <div class="text-muted-foreground">PARENT ID</div>
64
- {:else}
65
- <div class="text-muted-foreground">NULL</div>
66
- {/if}
67
- {:else if isPasswordField}
68
- <div class="text-muted-foreground tracking-widest">••••••</div>
69
- {:else if value === ""}
70
- <div class="text-muted-foreground">EMPTY STRING</div>
71
- {:else if value === null || value === undefined}
72
- <div class="text-muted-foreground">NULL</div>
73
- {:else if field?.enum}
74
- <EnumBadge {value} enum={field.enum} />
75
- {:else if field.type === "datetime"}
76
- {@const date = new Date(value).toLocaleDateString()}
77
- {@const time = new Date(value).toLocaleTimeString()}
78
- <div>{date}, {time}</div>
79
- {:else if field.type === "date"}
80
- {@const date = new Date(value).toLocaleDateString()}
81
- <div>{date}</div>
82
- {:else if field.type === "time"}
83
- <div>{value}</div>
84
- {:else}
85
- {value}
86
- {/if}
78
+ {:else if isPasswordField}
79
+ <div class="text-muted-foreground tracking-widest">••••••</div>
80
+ {:else if value === ""}
81
+ <div class="text-muted-foreground">EMPTY STRING</div>
82
+ {:else if value === null || value === undefined}
83
+ <div class="text-muted-foreground">NULL</div>
84
+ {:else if field?.enum}
85
+ <EnumBadge {value} enum={field.enum} />
86
+ {:else if field.type === "datetime"}
87
+ {@const date = new Date(value).toLocaleDateString()}
88
+ {@const time = new Date(value).toLocaleTimeString()}
89
+ <div>{date}, {time}</div>
90
+ {:else if field.type === "date"}
91
+ {@const date = new Date(value).toLocaleDateString()}
92
+ <div>{date}</div>
93
+ {:else if field.type === "time"}
94
+ <div>{value}</div>
95
+ {:else}
96
+ {value}
97
+ {/if}
98
+ {/snippet}
99
+ </ExtensionsComponents>
package/src/lib/components/dataTable/table.svelte CHANGED
@@ -209,7 +209,7 @@
209
209
  class="
210
210
  sticky top-0 z-10
211
211
  flex items-center p-2.5 text-xs h-10
212
- {unifiedBgColor ? unifiedBgColor : 'bg-muted/30'}
212
+ {unifiedBgColor ? unifiedBgColor : 'bg-muted'}
213
213
  {lastColumn && !showLastColumnBorder ? '' : 'border-r'}
214
214
  border-b gap-2
215
215
  {headerBorderTop ? 'border-t' : ''}
package/src/lib/components/importButton.svelte CHANGED
@@ -8,6 +8,8 @@
8
8
  import Table from "./dataTable/table.svelte";
9
9
  import Fuse from "fuse.js";
10
10
  import { emitEvent } from "../eventSystem";
11
+ import ExtensionsComponents from "./extensionsComponents.svelte";
12
+ import { getExtensionUtils } from "../extensions/extensionUtils";
11
13
 
12
14
  const { lobb, ctx } = getStudioContext();
13
15
 
@@ -127,24 +129,23 @@
127
129
  });
128
130
  const finalRows = eventResult.rows ?? transformedRows;
129
131
 
130
- const results: { row: any; error: string | null }[] = [];
132
+ importResults = [];
133
+ let hasSuccess = false;
131
134
  for (const row of finalRows) {
132
135
  const response = await lobb.createOne(collectionName, row);
133
136
  if (response.ok) {
134
- results.push({ row, error: null });
137
+ importResults.push({ row, error: null });
138
+ hasSuccess = true;
135
139
  } else {
136
140
  const body = await response.json().catch(() => null);
137
141
  const message = body?.details
138
142
  ? Object.entries(body.details).map(([f, msgs]) => `${f}: ${(msgs as string[]).join(", ")}`).join(" | ")
139
143
  : (body?.message ?? `HTTP ${response.status}`);
140
- results.push({ row, error: message });
144
+ importResults.push({ row, error: message });
141
145
  }
142
146
  }
147
+ if (hasSuccess && onSuccessfullSave) await onSuccessfullSave();
143
148
 
144
- importResults = results;
145
- const succeeded = results.filter((r) => r.error === null);
146
-
147
- if (succeeded.length > 0 && onSuccessfullSave) await onSuccessfullSave();
148
149
  step = "results";
149
150
  } catch (e: any) {
150
151
  step = "preview";
@@ -180,7 +181,7 @@
180
181
  onOpenChange={(open) => { if (!open) hideDrawer(); }}
181
182
  >
182
183
  <Dialog.Content
183
- class="flex flex-col gap-0 p-0 overflow-clip {step === 'preview' || (step === 'results' && importResults.some((r) => r.error !== null)) ? 'max-w-5xl h-[80vh]' : 'max-w-lg'}"
184
+ class="flex flex-col gap-0 p-0 overflow-clip {step === 'preview' || (step === 'results' && importResults.some((r) => r.error !== null)) ? 'max-w-7xl h-[80vh]' : 'max-w-lg'}"
184
185
  >
185
186
  <!-- Header -->
186
187
  <div class="flex h-12 shrink-0 items-center justify-between border-b px-4">
@@ -212,6 +213,12 @@
212
213
  </button>
213
214
  </div>
214
215
 
216
+ <ExtensionsComponents
217
+ name="collections.import.info"
218
+ utils={getExtensionUtils(lobb, ctx)}
219
+ {collectionName}
220
+ />
221
+
215
222
  <div class="p-4">
216
223
  {#if activeTab === "upload"}
217
224
  <div