@lobb-js/studio 0.20.0 → 0.22.0

package/src/lib/components/drawer.svelte

@@ -1,30 +1,46 @@
 <script lang="ts">
     import { calculateDrawerWidth } from "../utils";
     import type { Snippet } from "svelte";
-    import { fade, fly } from "svelte/transition";
+    import { fade } from "svelte/transition";
+    import { cubicOut } from "svelte/easing";
     import Portal from "svelte-portal";
 
     interface Props {
         children?: Snippet<[]>;
         onHide?: () => Promise<void>;
+        position?: "side" | "bottom";
     }
 
-    let { onHide, children }: Props = $props();
+    let { onHide, children, position = "side" }: Props = $props();
+
+    function slide(_node: Element, { duration = 250, axis }: { duration?: number; axis: "x" | "y" }) {
+        return {
+            duration,
+            easing: cubicOut,
+            css: (t: number) => {
+                const offset = (1 - t) * 100;
+                return axis === "y"
+                    ? `transform: translateY(${offset}%)`
+                    : `transform: translateX(${offset}%)`;
+            },
+        };
+    }
 </script>
 
 <Portal target="body">
     <button
-        transition:fade={{ duration: 250 }}
+        transition:fade={{ duration: 200 }}
         onclick={() => onHide?.()}
-        class="backgroundDrawerButton fixed left-0 top-0 z-40 h-screen w-screen bg-background opacity-50 cursor-default"
+        class="backgroundDrawerButton fixed left-0 top-0 z-40 h-screen w-screen bg-black/50 cursor-default"
         aria-label="background used to hide the background"
     ></button>
 
-    <!-- the drawer -->
     <div
-        transition:fly={{ x: "100%", duration: 250 }}
-        class="fixed right-0 top-0 z-40 flex h-full w-full flex-col border-l bg-background"
-        style="max-width: {calculateDrawerWidth()}px;"
+        transition:slide={{ axis: position === "bottom" ? "y" : "x" }}
+        class={position === "bottom"
+            ? "fixed bottom-0 left-0 z-40 flex h-[60vh] w-full flex-col border-t bg-background"
+            : "fixed right-0 top-0 z-40 flex h-full w-full flex-col border-l bg-background"}
+        style={position === "side" ? `max-width: ${calculateDrawerWidth()}px;` : ""}
     >
         {@render children?.()}
     </div>

package/src/lib/extensions/extension.types.ts

@@ -57,7 +57,8 @@ export interface ExtensionUtils {
     location: Location;
     toast: typeof toast;
     showDialog: typeof showDialog;
-    openDataTableDrawer: (props: { collectionName: string; filter?: Record<string, any>; title?: string; showHeader?: boolean; showFooter?: boolean }) => void;
+    openDataTableDrawer: (props: { collectionName: string; filter?: Record<string, any>; title?: string; showHeader?: boolean; showFooter?: boolean; position?: "side" | "bottom" }) => void;
+    emitEvent: (eventName: string, input: Record<string, any>) => Promise<Record<string, any>>;
     components: Components;
     mediaQueries: typeof mediaQueries;
     intlDate: typeof intlDate;

package/src/lib/extensions/extensionUtils.ts

@@ -8,6 +8,7 @@ import type { LobbClient } from "@lobb-js/sdk";
 import type { CTX } from "../store.types";
 import { toast } from "svelte-sonner";
 import { showDialog, openDataTableDrawer } from "../actions";
+import { emitEvent } from "../eventSystem";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Separator } from "../components/ui/separator";
@@ -65,6 +66,7 @@ export function getExtensionUtils(lobb: LobbClient, ctx: CTX): ExtensionUtils {
     toast: toast,
     showDialog: showDialog,
     openDataTableDrawer: (props) => openDataTableDrawer({ lobb, ctx }, props),
+    emitEvent: (eventName, input) => emitEvent({ lobb, ctx }, eventName, input),
     components: getComponents(),
     mediaQueries: mediaQueries,
     intlDate: intlDate,

package/src/lib/store.types.ts

@@ -7,12 +7,19 @@ interface CollectionTab {
     default?: boolean;
 }
 
+type CollectionChild =
+    | { type: "fk"; collection: string; field: string }
+    | { type: "m2m"; collection: string }
+    | { type: "polymorphic"; collection: string };
+
 interface Collection {
     category: string;
     owner: string;
     fields: Record<string, any>;
     singleton: boolean;
     virtual?: boolean;
+    junction?: boolean;
+    children?: CollectionChild[];
     ui?: {
         icon?: string;
         tabs?: CollectionTab[];