@lobb-js/studio 0.9.2 → 0.10.0

package/dist/components/Studio.svelte

@@ -14,7 +14,6 @@
         loadExtensions,
     } from "../extensions/extensionUtils";
     import extensionMap from 'virtual:lobb-studio-extensions';
-    import { STUDIO_VERSION } from "../version.ts";
     import { mediaQueries } from "../utils";
     import Home from "./routes/home.svelte";
     import DataModel from "./routes/data_model/dataModel.svelte";
@@ -33,7 +32,6 @@
         extensions: {},
         meta: null,
         currentUrl: new URL(window.location.href),
-        studioVersion: STUDIO_VERSION,
     });
 
     const lobb = createLobb(lobbUrl ?? "");

package/dist/components/dataTable/fieldCell.svelte

@@ -29,9 +29,12 @@
     const isRefrenceField = Boolean(
         getFieldRelation(ctx, collectionName, fieldName),
     );
+    const isPasswordField = ctx.meta.collections[collectionName].fields[fieldName]?.ui?.input?.type === "password";
 </script>
 
-{#if value === ""}
+{#if isPasswordField}
+    <div class="text-muted-foreground tracking-widest">••••••</div>
+{:else if value === ""}
     <div class="text-muted-foreground">EMPTY STRING</div>
 {:else if value === null || value === undefined}
     <div class="text-muted-foreground">NULL</div>

package/dist/components/detailView/create/createDetailView.svelte

@@ -33,6 +33,7 @@
         parseDetailViewValues,
         serializeEntry,
     } from "../utils";
+    import { getChangedProperties } from "../../../utils";
     import type { Snippet } from "svelte";
     import FieldInput from "../fieldInput.svelte";
     import { emitEvent } from "../../../eventSystem";
@@ -55,6 +56,7 @@
     let entry: Record<string, any> = $state(
         getDefaultEntry(ctx, fieldNames, collectionName, values),
     );
+    const initialEntry = $state.snapshot(entry);
     let fieldsErrors: Record<string, any> = $state({});
     const subCollections = ctx.meta.relations.filter((relation) => relation.to.collection === collectionName).map((relation) => relation.from.collection);
     const subCollectionsValues: Record<string, any> = {};
@@ -66,7 +68,7 @@
     }
 
     async function handleSave() {
-        let localEntry = $state.snapshot(entry);
+        let localEntry = getChangedProperties(initialEntry, $state.snapshot(entry));
 
         await emitEvent({ lobb, ctx }, "studio.collections.preCreate", {
             collectionName,

package/dist/components/detailView/fieldCustomInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import CodeEditor from "../codeEditor.svelte";
 	import RichTextEditor from "../richTextEditor.svelte";
+	import PasswordInput from "./passwordInput.svelte";
 
 	interface Props {
 		value: any;
@@ -23,4 +24,6 @@
 	<CodeEditor name={field.key} {...args} bind:value />
 {:else if type === "richtext"}
 	<RichTextEditor name={field.key} bind:value />
+{:else if type === "password"}
+	<PasswordInput bind:value {destructive} />
 {/if}

package/dist/components/detailView/passwordInput.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import Input from "../ui/input/input.svelte";
+
+    interface Props {
+        value: any;
+        destructive?: boolean;
+    }
+
+    let { value = $bindable(), destructive }: Props = $props();
+
+    const originalValue = value;
+    let displayValue = $state("");
+
+    function onInput(e: Event) {
+        const input = e.target as HTMLInputElement;
+        displayValue = input.value;
+        value = input.value || originalValue;
+    }
+</script>
+
+<Input
+    type="password"
+    placeholder="••••••"
+    class="bg-muted/30 text-xs {destructive ? 'border-destructive bg-destructive/10' : ''}"
+    value={displayValue}
+    oninput={onInput}
+/>

package/dist/components/detailView/passwordInput.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    value: any;
+    destructive?: boolean;
+}
+declare const PasswordInput: import("svelte").Component<Props, {}, "value">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;

package/dist/components/routes/homeFooter.svelte

@@ -9,7 +9,7 @@
 
     const { ctx } = getStudioContext();
 
-    let releaseDates: Record<string, string | null> = $state({});
+    let coreReleaseDate: string | null = $state(null);
 
     async function fetchReleaseDate(pkg: string, version: string): Promise<string | null> {
         try {
@@ -23,28 +23,16 @@
     }
 
     onMount(async () => {
-        const [coreDate, studioDate] = await Promise.all([
-            fetchReleaseDate("@lobb-js/core", ctx.meta.version),
-            ctx.studioVersion ? fetchReleaseDate("@lobb-js/studio", ctx.studioVersion) : Promise.resolve(null),
-        ]);
-        releaseDates = { core: coreDate, studio: studioDate };
+        coreReleaseDate = await fetchReleaseDate("@lobb-js/core", ctx.meta.version);
     });
 </script>
 
 <div class="flex justify-end p-2 text-xs text-muted-foreground/50">
     <div class="flex flex-col text-end gap-0.5">
-        {#if ctx.studioVersion}
-            <div>
-                studio: v{ctx.studioVersion}
-                {#if releaseDates.studio}
-                    <span>({timeAgo.format(new Date(releaseDates.studio!))})</span>
-                {/if}
-            </div>
-        {/if}
         <div>
             core: v{ctx.meta.version}
-            {#if releaseDates.core}
-                <span>({timeAgo.format(new Date(releaseDates.core!))})</span>
+            {#if coreReleaseDate}
+                <span>({timeAgo.format(new Date(coreReleaseDate))})</span>
             {/if}
         </div>
     </div>

package/dist/store.types.d.ts

@@ -17,7 +17,6 @@ interface Meta {
     studio_workflows: any[];
 }
 export interface CTX {
-    studioVersion?: string;
     lobbUrl: string | null;
     extensions: Record<string, Extension>;
     meta: Meta;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobb-js/studio",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/lib/components/Studio.svelte

@@ -14,7 +14,6 @@
         loadExtensions,
     } from "../extensions/extensionUtils";
     import extensionMap from 'virtual:lobb-studio-extensions';
-    import { STUDIO_VERSION } from "../version.ts";
     import { mediaQueries } from "../utils";
     import Home from "./routes/home.svelte";
     import DataModel from "./routes/data_model/dataModel.svelte";
@@ -33,7 +32,6 @@
         extensions: {},
         meta: null,
         currentUrl: new URL(window.location.href),
-        studioVersion: STUDIO_VERSION,
     });
 
     const lobb = createLobb(lobbUrl ?? "");

package/src/lib/components/dataTable/fieldCell.svelte

@@ -29,9 +29,12 @@
     const isRefrenceField = Boolean(
         getFieldRelation(ctx, collectionName, fieldName),
     );
+    const isPasswordField = ctx.meta.collections[collectionName].fields[fieldName]?.ui?.input?.type === "password";
 </script>
 
-{#if value === ""}
+{#if isPasswordField}
+    <div class="text-muted-foreground tracking-widest">••••••</div>
+{:else if value === ""}
     <div class="text-muted-foreground">EMPTY STRING</div>
 {:else if value === null || value === undefined}
     <div class="text-muted-foreground">NULL</div>

package/src/lib/components/detailView/create/createDetailView.svelte

@@ -33,6 +33,7 @@
         parseDetailViewValues,
         serializeEntry,
     } from "../utils";
+    import { getChangedProperties } from "../../../utils";
     import type { Snippet } from "svelte";
     import FieldInput from "../fieldInput.svelte";
     import { emitEvent } from "../../../eventSystem";
@@ -55,6 +56,7 @@
     let entry: Record<string, any> = $state(
         getDefaultEntry(ctx, fieldNames, collectionName, values),
     );
+    const initialEntry = $state.snapshot(entry);
     let fieldsErrors: Record<string, any> = $state({});
     const subCollections = ctx.meta.relations.filter((relation) => relation.to.collection === collectionName).map((relation) => relation.from.collection);
     const subCollectionsValues: Record<string, any> = {};
@@ -66,7 +68,7 @@
     }
 
     async function handleSave() {
-        let localEntry = $state.snapshot(entry);
+        let localEntry = getChangedProperties(initialEntry, $state.snapshot(entry));
 
         await emitEvent({ lobb, ctx }, "studio.collections.preCreate", {
             collectionName,

package/src/lib/components/detailView/fieldCustomInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import CodeEditor from "../codeEditor.svelte";
 	import RichTextEditor from "../richTextEditor.svelte";
+	import PasswordInput from "./passwordInput.svelte";
 
 	interface Props {
 		value: any;
@@ -23,4 +24,6 @@
 	<CodeEditor name={field.key} {...args} bind:value />
 {:else if type === "richtext"}
 	<RichTextEditor name={field.key} bind:value />
+{:else if type === "password"}
+	<PasswordInput bind:value {destructive} />
 {/if}

package/src/lib/components/detailView/passwordInput.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import Input from "../ui/input/input.svelte";
+
+    interface Props {
+        value: any;
+        destructive?: boolean;
+    }
+
+    let { value = $bindable(), destructive }: Props = $props();
+
+    const originalValue = value;
+    let displayValue = $state("");
+
+    function onInput(e: Event) {
+        const input = e.target as HTMLInputElement;
+        displayValue = input.value;
+        value = input.value || originalValue;
+    }
+</script>
+
+<Input
+    type="password"
+    placeholder="••••••"
+    class="bg-muted/30 text-xs {destructive ? 'border-destructive bg-destructive/10' : ''}"
+    value={displayValue}
+    oninput={onInput}
+/>

package/src/lib/components/routes/homeFooter.svelte

@@ -9,7 +9,7 @@
 
     const { ctx } = getStudioContext();
 
-    let releaseDates: Record<string, string | null> = $state({});
+    let coreReleaseDate: string | null = $state(null);
 
     async function fetchReleaseDate(pkg: string, version: string): Promise<string | null> {
         try {
@@ -23,28 +23,16 @@
     }
 
     onMount(async () => {
-        const [coreDate, studioDate] = await Promise.all([
-            fetchReleaseDate("@lobb-js/core", ctx.meta.version),
-            ctx.studioVersion ? fetchReleaseDate("@lobb-js/studio", ctx.studioVersion) : Promise.resolve(null),
-        ]);
-        releaseDates = { core: coreDate, studio: studioDate };
+        coreReleaseDate = await fetchReleaseDate("@lobb-js/core", ctx.meta.version);
     });
 </script>
 
 <div class="flex justify-end p-2 text-xs text-muted-foreground/50">
     <div class="flex flex-col text-end gap-0.5">
-        {#if ctx.studioVersion}
-            <div>
-                studio: v{ctx.studioVersion}
-                {#if releaseDates.studio}
-                    <span>({timeAgo.format(new Date(releaseDates.studio!))})</span>
-                {/if}
-            </div>
-        {/if}
         <div>
             core: v{ctx.meta.version}
-            {#if releaseDates.core}
-                <span>({timeAgo.format(new Date(releaseDates.core!))})</span>
+            {#if coreReleaseDate}
+                <span>({timeAgo.format(new Date(coreReleaseDate))})</span>
             {/if}
         </div>
     </div>

package/src/lib/store.types.ts

@@ -20,7 +20,6 @@ interface Meta {
 }
 
 export interface CTX {
-    studioVersion?: string;
     lobbUrl: string | null;
     extensions: Record<string, Extension>;
     meta: Meta;

package/dist/version.d.ts

@@ -1 +0,0 @@
-export declare const STUDIO_VERSION: string;

package/dist/version.js

@@ -1,2 +0,0 @@
-import pkg from "../../package.json" assert { type: "json" };
-export var STUDIO_VERSION = pkg.version;

package/src/lib/version.ts

@@ -1,2 +0,0 @@
-import pkg from "../../package.json" assert { type: "json" };
-export const STUDIO_VERSION: string = pkg.version;