@lobb-js/studio 0.9.3 → 0.10.0

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/package.json

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

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}
+/>