@lobb-js/studio 0.29.1 → 0.30.0

package/dist/actions.d.ts

@@ -11,7 +11,16 @@ export interface OpenDataTableDrawerProps {
     position?: "side" | "bottom";
     tabs?: CollectionTab[];
 }
+export interface OpenDataTablePopupProps {
+    collectionName: string;
+    filter?: Record<string, any>;
+    title?: string;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    tabs?: CollectionTab[];
+}
 export declare function showDialog(title: string, description: string): Promise<boolean>;
 export declare function openCreateDetailView(studioContext: StudioContext, props: CreateDetailViewProp): void;
 export declare function openUpdateDetailView(studioContext: StudioContext, props: UpdateDetailViewProp): Promise<void>;
 export declare function openDataTableDrawer(studioContext: StudioContext, props: OpenDataTableDrawerProps): void;
+export declare function openDataTablePopup(studioContext: StudioContext, props: OpenDataTablePopupProps): void;

package/dist/actions.js

@@ -3,6 +3,7 @@ import ConfirmationDialog from "./components/confirmationDialog/confirmationDial
 import CreateDetailView from "./components/detailView/create/createDetailView.svelte";
 import UpdateDetailView from "./components/detailView/update/updateDetailView.svelte";
 import DataTableDrawer from "./components/dataTableDrawer/dataTableDrawer.svelte";
+import DataTablePopup from "./components/dataTablePopup/dataTablePopup.svelte";
 import { createStudioContextMap } from "./context";
 import { getCollectionParamsFields } from "./components/dataTable/utils";
 export function showDialog(title, description) {
@@ -80,3 +81,18 @@ export function openDataTableDrawer(studioContext, props) {
         },
     });
 }
+export function openDataTablePopup(studioContext, props) {
+    const targetElement = document.querySelector("main");
+    if (!targetElement)
+        throw new Error("main html element doesn't exist");
+    const mounted = mount(DataTablePopup, {
+        target: targetElement,
+        context: createStudioContextMap(studioContext),
+        props: {
+            ...props,
+            onClose: async () => {
+                await unmount(mounted, { outro: true });
+            },
+        },
+    });
+}

package/dist/components/dataTablePopup/dataTablePopup.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { X } from "lucide-svelte";
+	import { fade, scale } from "svelte/transition";
+	import { cubicOut } from "svelte/easing";
+	import Portal from "svelte-portal";
+	import Button from "../ui/button/button.svelte";
+	import DataTable from "../dataTable/dataTable.svelte";
+	import type { TableProps } from "../dataTable/table.svelte";
+	import type { CollectionTab } from "../../store.types";
+
+	interface Props {
+		collectionName: string;
+		filter?: Record<string, any>;
+		title?: string;
+		showHeader?: boolean;
+		showFooter?: boolean;
+		tableProps?: Partial<TableProps>;
+		tabs?: CollectionTab[];
+		onClose?: () => void;
+	}
+
+	let {
+		collectionName,
+		filter,
+		title,
+		showHeader = true,
+		showFooter = true,
+		tableProps,
+		tabs,
+		onClose,
+	}: Props = $props();
+</script>
+
+<Portal target="body">
+	<button
+		transition:fade={{ duration: 200 }}
+		onclick={() => onClose?.()}
+		class="fixed left-0 top-0 z-40 h-screen w-screen bg-black/50 cursor-default"
+		aria-label="background used to close the popup"
+	></button>
+
+	<div
+		transition:scale={{ duration: 200, easing: cubicOut, start: 0.95 }}
+		class="fixed left-1/2 top-1/2 z-40 flex h-[85vh] w-[95vw] max-w-7xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border bg-background shadow-2xl"
+	>
+		<div class="flex h-12 shrink-0 items-center justify-between gap-4 border-b px-4">
+			<div class="text-sm font-medium">{title ?? collectionName}</div>
+			<Button
+				variant="ghost"
+				size="icon"
+				onclick={() => onClose?.()}
+				class="h-8 w-8 rounded-full text-muted-foreground"
+				Icon={X}
+			/>
+		</div>
+		<div class="min-h-0 flex-1 overflow-auto">
+			<DataTable
+				{collectionName}
+				{filter}
+				{showHeader}
+				{showFooter}
+				{tableProps}
+				{tabs}
+			/>
+		</div>
+	</div>
+</Portal>

package/dist/components/dataTablePopup/dataTablePopup.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { TableProps } from "../dataTable/table.svelte";
+import type { CollectionTab } from "../../store.types";
+interface Props {
+    collectionName: string;
+    filter?: Record<string, any>;
+    title?: string;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    tableProps?: Partial<TableProps>;
+    tabs?: CollectionTab[];
+    onClose?: () => void;
+}
+declare const DataTablePopup: import("svelte").Component<Props, {}, "">;
+type DataTablePopup = ReturnType<typeof DataTablePopup>;
+export default DataTablePopup;

package/dist/extensions/extension.types.d.ts

@@ -23,7 +23,7 @@ import * as Icons from "lucide-svelte";
 import { ContextMenu } from "bits-ui";
 import * as Tooltip from "../components/ui/tooltip";
 import * as Breadcrumb from "../components/ui/breadcrumb";
-import { showDialog, type OpenDataTableDrawerProps } from "../actions";
+import { showDialog, type OpenDataTableDrawerProps, type OpenDataTablePopupProps } from "../actions";
 import { toast } from "svelte-sonner";
 import { Switch } from "../components/ui/switch";
 export interface Components {
@@ -67,6 +67,7 @@ export interface ExtensionUtils {
     toast: typeof toast;
     showDialog: typeof showDialog;
     openDataTableDrawer: (props: OpenDataTableDrawerProps) => void;
+    openDataTablePopup: (props: OpenDataTablePopupProps) => void;
     emitEvent: (eventName: string, input: any) => Promise<any>;
     components: Components;
     mediaQueries: typeof mediaQueries;

package/dist/extensions/extensionUtils.js

@@ -1,5 +1,5 @@
 import { toast } from "svelte-sonner";
-import { showDialog, openDataTableDrawer } from "../actions";
+import { showDialog, openDataTableDrawer, openDataTablePopup } from "../actions";
 import { emitEvent } from "../eventSystem";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
@@ -58,6 +58,7 @@ export function getExtensionUtils(lobb, ctx) {
         toast: toast,
         showDialog: showDialog,
         openDataTableDrawer: (props) => openDataTableDrawer({ lobb, ctx }, props),
+        openDataTablePopup: (props) => openDataTablePopup({ lobb, ctx }, props),
         emitEvent: (eventName, input) => emitEvent({ lobb, ctx }, eventName, input),
         components: getComponents(),
         mediaQueries: mediaQueries,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.29.1",
+  "version": "0.30.0",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/lib/actions.ts

@@ -3,6 +3,7 @@ import ConfirmationDialog from "./components/confirmationDialog/confirmationDial
 import CreateDetailView from "./components/detailView/create/createDetailView.svelte";
 import UpdateDetailView from "./components/detailView/update/updateDetailView.svelte";
 import DataTableDrawer from "./components/dataTableDrawer/dataTableDrawer.svelte";
+import DataTablePopup from "./components/dataTablePopup/dataTablePopup.svelte";
 import type { CreateDetailViewProp } from "./components/detailView/create/createDetailView.svelte";
 import type { UpdateDetailViewProp } from "./components/detailView/update/updateDetailView.svelte";
 import type { StudioContext } from "./context";
@@ -20,6 +21,15 @@ export interface OpenDataTableDrawerProps {
     tabs?: CollectionTab[];
 }
 
+export interface OpenDataTablePopupProps {
+    collectionName: string;
+    filter?: Record<string, any>;
+    title?: string;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    tabs?: CollectionTab[];
+}
+
 export function showDialog(title: string, description: string): Promise<boolean> {
     return new Promise((resolve) => {
         const targetElement = document.querySelector("main");
@@ -99,3 +109,19 @@ export function openDataTableDrawer(studioContext: StudioContext, props: OpenDat
         },
     });
 }
+
+export function openDataTablePopup(studioContext: StudioContext, props: OpenDataTablePopupProps) {
+    const targetElement = document.querySelector("main");
+    if (!targetElement) throw new Error("main html element doesn't exist");
+
+    const mounted = mount(DataTablePopup, {
+        target: targetElement,
+        context: createStudioContextMap(studioContext),
+        props: {
+            ...props,
+            onClose: async () => {
+                await unmount(mounted, { outro: true });
+            },
+        },
+    });
+}

package/src/lib/components/dataTablePopup/dataTablePopup.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { X } from "lucide-svelte";
+	import { fade, scale } from "svelte/transition";
+	import { cubicOut } from "svelte/easing";
+	import Portal from "svelte-portal";
+	import Button from "../ui/button/button.svelte";
+	import DataTable from "../dataTable/dataTable.svelte";
+	import type { TableProps } from "../dataTable/table.svelte";
+	import type { CollectionTab } from "../../store.types";
+
+	interface Props {
+		collectionName: string;
+		filter?: Record<string, any>;
+		title?: string;
+		showHeader?: boolean;
+		showFooter?: boolean;
+		tableProps?: Partial<TableProps>;
+		tabs?: CollectionTab[];
+		onClose?: () => void;
+	}
+
+	let {
+		collectionName,
+		filter,
+		title,
+		showHeader = true,
+		showFooter = true,
+		tableProps,
+		tabs,
+		onClose,
+	}: Props = $props();
+</script>
+
+<Portal target="body">
+	<button
+		transition:fade={{ duration: 200 }}
+		onclick={() => onClose?.()}
+		class="fixed left-0 top-0 z-40 h-screen w-screen bg-black/50 cursor-default"
+		aria-label="background used to close the popup"
+	></button>
+
+	<div
+		transition:scale={{ duration: 200, easing: cubicOut, start: 0.95 }}
+		class="fixed left-1/2 top-1/2 z-40 flex h-[85vh] w-[95vw] max-w-7xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border bg-background shadow-2xl"
+	>
+		<div class="flex h-12 shrink-0 items-center justify-between gap-4 border-b px-4">
+			<div class="text-sm font-medium">{title ?? collectionName}</div>
+			<Button
+				variant="ghost"
+				size="icon"
+				onclick={() => onClose?.()}
+				class="h-8 w-8 rounded-full text-muted-foreground"
+				Icon={X}
+			/>
+		</div>
+		<div class="min-h-0 flex-1 overflow-auto">
+			<DataTable
+				{collectionName}
+				{filter}
+				{showHeader}
+				{showFooter}
+				{tableProps}
+				{tabs}
+			/>
+		</div>
+	</div>
+</Portal>

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

@@ -23,7 +23,7 @@ import * as Icons from "lucide-svelte"
 import { ContextMenu } from "bits-ui";
 import * as Tooltip from "../components/ui/tooltip";
 import * as Breadcrumb from "../components/ui/breadcrumb";
-import { showDialog, type OpenDataTableDrawerProps } from "../actions";
+import { showDialog, type OpenDataTableDrawerProps, type OpenDataTablePopupProps } from "../actions";
 import { toast } from "svelte-sonner";
 import type Drawer from "../components/drawer.svelte";
 import { Switch } from "../components/ui/switch";
@@ -71,6 +71,7 @@ export interface ExtensionUtils {
     toast: typeof toast;
     showDialog: typeof showDialog;
     openDataTableDrawer: (props: OpenDataTableDrawerProps) => void;
+    openDataTablePopup: (props: OpenDataTablePopupProps) => void;
     emitEvent: (eventName: string, input: any) => Promise<any>;
     components: Components;
     mediaQueries: typeof mediaQueries;

package/src/lib/extensions/extensionUtils.ts

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