@lobb-js/studio 0.18.1 → 0.19.1

package/dist/actions.d.ts

@@ -0,0 +1,14 @@
+import type { CreateDetailViewProp } from "./components/detailView/create/createDetailView.svelte";
+import type { UpdateDetailViewProp } from "./components/detailView/update/updateDetailView.svelte";
+import type { StudioContext } from "./context";
+export interface OpenDataTableDrawerProps {
+    collectionName: string;
+    filter?: Record<string, any>;
+    title?: string;
+    showHeader?: boolean;
+    showFooter?: boolean;
+}
+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;

package/dist/{components/detailView/store.svelte.js → actions.js}

@@ -45,18 +45,46 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import CreateDetailView from "./create/createDetailView.svelte";
-import UpdateDetailView from "./update/updateDetailView.svelte";
-import { getCollectionParamsFields } from "../dataTable/utils";
-import { createStudioContextMap } from "../../context";
 import { mount, unmount } from "svelte";
+import ConfirmationDialog from "./components/confirmationDialog/confirmationDialog.svelte";
+import CreateDetailView from "./components/detailView/create/createDetailView.svelte";
+import UpdateDetailView from "./components/detailView/update/updateDetailView.svelte";
+import DataTableDrawer from "./components/dataTableDrawer/dataTableDrawer.svelte";
+import { createStudioContextMap } from "./context";
+import { getCollectionParamsFields } from "./components/dataTable/utils";
+export function showDialog(title, description) {
+    var _this = this;
+    return new Promise(function (resolve) {
+        var targetElement = document.querySelector("main");
+        if (!targetElement)
+            throw new Error("main html element doesn't exist");
+        var mounted = mount(ConfirmationDialog, {
+            target: targetElement,
+            props: {
+                title: title,
+                description: description,
+                onDecision: function (result) { return __awaiter(_this, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                resolve(result);
+                                return [4 /*yield*/, unmount(mounted, { outro: true })];
+                            case 1:
+                                _a.sent();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); },
+            },
+        });
+    });
+}
 export function openCreateDetailView(studioContext, props) {
     var _this = this;
-    var targetElement = document.querySelector('main');
-    if (!targetElement) {
-        throw new Error("main html element doesn't exist for some reason");
-    }
-    var mountedCreateDetailView = mount(CreateDetailView, {
+    var targetElement = document.querySelector("main");
+    if (!targetElement)
+        throw new Error("main html element doesn't exist");
+    var mounted = mount(CreateDetailView, {
         target: targetElement,
         context: createStudioContextMap(studioContext),
         props: __assign(__assign({}, props), { onCancel: function () { return __awaiter(_this, void 0, void 0, function () {
@@ -65,7 +93,7 @@ export function openCreateDetailView(studioContext, props) {
                     switch (_b.label) {
                         case 0:
                             (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
-                            return [4 /*yield*/, unmount(mountedCreateDetailView, { outro: true })];
+                            return [4 /*yield*/, unmount(mounted, { outro: true })];
                         case 1:
                             _b.sent();
                             return [2 /*return*/];
@@ -76,7 +104,7 @@ export function openCreateDetailView(studioContext, props) {
 }
 export function openUpdateDetailView(studioContext, props) {
     return __awaiter(this, void 0, void 0, function () {
-        var lobb, ctx, params, response, result, entry, targetElement, mountedUpdateDetailView;
+        var lobb, ctx, params, response, result, entry, targetElement, mounted;
         var _this = this;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -94,11 +122,10 @@ export function openUpdateDetailView(studioContext, props) {
                 case 2:
                     result = _a.sent();
                     entry = result.data[0];
-                    targetElement = document.querySelector('main');
-                    if (!targetElement) {
-                        throw new Error("main html element doesn't exist for some reason");
-                    }
-                    mountedUpdateDetailView = mount(UpdateDetailView, {
+                    targetElement = document.querySelector("main");
+                    if (!targetElement)
+                        throw new Error("main html element doesn't exist");
+                    mounted = mount(UpdateDetailView, {
                         target: targetElement,
                         context: createStudioContextMap(studioContext),
                         props: __assign(__assign({}, props), { onCancel: function () { return __awaiter(_this, void 0, void 0, function () {
@@ -107,7 +134,7 @@ export function openUpdateDetailView(studioContext, props) {
                                     switch (_b.label) {
                                         case 0:
                                             (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
-                                            return [4 /*yield*/, unmount(mountedUpdateDetailView, { outro: true })];
+                                            return [4 /*yield*/, unmount(mounted, { outro: true })];
                                         case 1:
                                             _b.sent();
                                             return [2 /*return*/];
@@ -120,3 +147,23 @@ export function openUpdateDetailView(studioContext, props) {
         });
     });
 }
+export function openDataTableDrawer(studioContext, props) {
+    var _this = this;
+    var targetElement = document.querySelector("main");
+    if (!targetElement)
+        throw new Error("main html element doesn't exist");
+    var mounted = mount(DataTableDrawer, {
+        target: targetElement,
+        context: createStudioContextMap(studioContext),
+        props: __assign(__assign({}, props), { onClose: function () { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, unmount(mounted, { outro: true })];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); } }),
+    });
+}

package/dist/components/dataTable/dataTable.svelte

@@ -11,7 +11,7 @@
     import FieldCell from "./fieldCell.svelte";
     import Skeleton from "../ui/skeleton/skeleton.svelte";
     import Button from "../ui/button/button.svelte";
-    import { showDialog } from "../confirmationDialog/store.svelte";
+    import { showDialog } from "../../actions";
     import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
     import { emitEvent } from "../../eventSystem";
     import type { Snippet } from "svelte";

package/dist/components/dataTable/header.svelte

@@ -9,7 +9,7 @@
     import SortButton from "./sortButton.svelte";
     import Button from "../ui/button/button.svelte";
     import ImportButton from "../importButton.svelte";
-    import { showDialog } from "../confirmationDialog/store.svelte";
+    import { showDialog } from "../../actions";
     import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../extensions/extensionUtils";

package/dist/components/dataTableDrawer/dataTableDrawer.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { ArrowLeft } from "lucide-svelte";
+    import Button from "../ui/button/button.svelte";
+    import DataTable from "../dataTable/dataTable.svelte";
+    import Drawer from "../drawer.svelte";
+    import type { TableProps } from "../dataTable/table.svelte";
+
+    interface Props {
+        collectionName: string;
+        filter?: Record<string, any>;
+        title?: string;
+        showHeader?: boolean;
+        showFooter?: boolean;
+        tableProps?: Partial<TableProps>;
+        onClose?: () => void;
+    }
+
+    let {
+        collectionName,
+        filter,
+        title,
+        showHeader = true,
+        showFooter = true,
+        tableProps,
+        onClose,
+    }: Props = $props();
+</script>
+
+<Drawer onHide={async () => onClose?.()}>
+    <div class="flex h-12 shrink-0 items-center gap-4 border-b px-4">
+        <Button
+            variant="outline"
+            onclick={() => onClose?.()}
+            class="h-8 w-8 rounded-full text-xs font-normal"
+            Icon={ArrowLeft}
+        />
+        <div class="text-sm font-medium">{title ?? collectionName}</div>
+    </div>
+    <div class="min-h-0 flex-1 overflow-auto">
+        <DataTable
+            {collectionName}
+            {filter}
+            {showHeader}
+            {showFooter}
+            {tableProps}
+            unifiedBgColor="bg-background"
+        />
+    </div>
+</Drawer>

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

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

package/dist/components/routes/workflows/workflows.svelte

@@ -11,7 +11,7 @@
     import { location } from "@wjfe/n-savant";
     import { CircleSlash2, Plus, Trash2 } from "lucide-svelte";
     import { onMount } from "svelte";
-    import { showDialog } from "../../../components/confirmationDialog/store.svelte";
+    import { showDialog } from "../../../actions";
     import SidebarTrigger from "../../../components/sidebar/sidebarTrigger.svelte";
 
     let { workflowName } = $props();

package/dist/components/ui/checkbox/checkbox.svelte.d.ts

@@ -1,4 +1,4 @@
 import { Checkbox as CheckboxPrimitive } from "bits-ui";
-declare const Checkbox: import("svelte").Component<Omit<Omit<CheckboxPrimitive.RootProps, "child">, "children">, {}, "checked" | "indeterminate" | "ref">;
+declare const Checkbox: import("svelte").Component<Omit<Omit<CheckboxPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/ui/input/input.svelte.d.ts

@@ -8,6 +8,6 @@ type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
     type?: InputType;
     files?: undefined;
 })>;
-declare const Input: import("svelte").Component<Props, {}, "value" | "files" | "ref">;
+declare const Input: import("svelte").Component<Props, {}, "value" | "ref" | "files">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/ui/range-calendar/range-calendar.svelte.d.ts

@@ -1,5 +1,5 @@
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 import * as RangeCalendar from "./index.js";
-declare const RangeCalendar: import("svelte").Component<Omit<Omit<RangeCalendarPrimitive.RootProps, "child">, "children">, {}, "value" | "placeholder" | "ref">;
+declare const RangeCalendar: import("svelte").Component<Omit<Omit<RangeCalendarPrimitive.RootProps, "child">, "children">, {}, "value" | "ref" | "placeholder">;
 type RangeCalendar = ReturnType<typeof RangeCalendar>;
 export default RangeCalendar;

package/dist/components/ui/switch/switch.svelte.d.ts

@@ -1,4 +1,4 @@
 import { Switch as SwitchPrimitive } from "bits-ui";
-declare const Switch: import("svelte").Component<Omit<Omit<SwitchPrimitive.RootProps, "child">, "children">, {}, "checked" | "ref">;
+declare const Switch: import("svelte").Component<Omit<Omit<SwitchPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/eventSystem.js

@@ -35,7 +35,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { toast } from "svelte-sonner";
-import { openCreateDetailView, openUpdateDetailView } from "./components/detailView/store.svelte";
+import { openCreateDetailView, openUpdateDetailView } from "./actions";
 export function emitEvent(studioContext, eventName, input) {
     return __awaiter(this, void 0, void 0, function () {
         var ctx, workflows, index, workflow, localOutput, _a, _b, _c, error_1;

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

@@ -22,7 +22,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 } from "../components/confirmationDialog/store.svelte";
+import { showDialog } from "../actions";
 import { toast } from "svelte-sonner";
 import { Switch } from "../components/ui/switch";
 export interface Components {
@@ -53,6 +53,13 @@ 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;
     components: Components;
     mediaQueries: typeof mediaQueries;
     intlDate: typeof intlDate;
@@ -73,7 +80,7 @@ export interface ExtensionProps {
     utils: ExtensionUtils;
     [key: string]: any;
 }
-export type ExtensionComponentKey = `pages.${string}` | "studio.listView" | `dvFields.topRight.${string}.${string}` | `detailView.update.subRecords.${string}` | `detailView.create.subRecords.${string}` | `detailView.fields.topRight.${string}.${string}` | `detailView.fields.foreignKey.${string}` | `listView.entry.children.${string}` | `listView.entry.actions` | `listView.header.actions`;
+export type ExtensionComponentKey = `pages.${string}` | "studio.listView" | `dvFields.topRight.${string}.${string}` | `detailView.update.subRecords.${string}` | `detailView.create.subRecords.${string}` | `detailView.fields.topRight.${string}.${string}` | `detailView.fields.foreignKey.${string}` | `listView.entry.children.${string}` | `listView.entry.actions` | `listView.header.actions` | (string & {});
 export type ExtensionComponent = any | {
     component: any;
     when: (props: Record<string, any>) => boolean;

package/dist/extensions/extensionUtils.js

@@ -44,7 +44,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { toast } from "svelte-sonner";
-import { showDialog } from "../components/confirmationDialog/store.svelte";
+import { showDialog, openDataTableDrawer } from "../actions";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Separator } from "../components/ui/separator";
@@ -99,6 +99,7 @@ export function getExtensionUtils(lobb, ctx) {
         location: location,
         toast: toast,
         showDialog: showDialog,
+        openDataTableDrawer: function (props) { return openDataTableDrawer({ lobb: lobb, ctx: ctx }, props); },
         components: getComponents(),
         mediaQueries: mediaQueries,
         intlDate: intlDate,

package/package.json

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

package/src/lib/actions.ts

@@ -0,0 +1,98 @@
+import { mount, unmount } from "svelte";
+import ConfirmationDialog from "./components/confirmationDialog/confirmationDialog.svelte";
+import CreateDetailView from "./components/detailView/create/createDetailView.svelte";
+import UpdateDetailView from "./components/detailView/update/updateDetailView.svelte";
+import DataTableDrawer from "./components/dataTableDrawer/dataTableDrawer.svelte";
+import type { CreateDetailViewProp } from "./components/detailView/create/createDetailView.svelte";
+import type { UpdateDetailViewProp } from "./components/detailView/update/updateDetailView.svelte";
+import type { StudioContext } from "./context";
+import { createStudioContextMap } from "./context";
+import { getCollectionParamsFields } from "./components/dataTable/utils";
+
+export interface OpenDataTableDrawerProps {
+    collectionName: string;
+    filter?: Record<string, any>;
+    title?: string;
+    showHeader?: boolean;
+    showFooter?: boolean;
+}
+
+export function showDialog(title: string, description: string): Promise<boolean> {
+    return new Promise((resolve) => {
+        const targetElement = document.querySelector("main");
+        if (!targetElement) throw new Error("main html element doesn't exist");
+
+        const mounted = mount(ConfirmationDialog, {
+            target: targetElement,
+            props: {
+                title,
+                description,
+                onDecision: async (result: boolean) => {
+                    resolve(result);
+                    await unmount(mounted, { outro: true });
+                },
+            },
+        });
+    });
+}
+
+export function openCreateDetailView(studioContext: StudioContext, props: CreateDetailViewProp) {
+    const targetElement = document.querySelector("main");
+    if (!targetElement) throw new Error("main html element doesn't exist");
+
+    const mounted = mount(CreateDetailView, {
+        target: targetElement,
+        context: createStudioContextMap(studioContext),
+        props: {
+            ...props,
+            onCancel: async () => {
+                props.onCancel?.();
+                await unmount(mounted, { outro: true });
+            },
+        },
+    });
+}
+
+export async function openUpdateDetailView(studioContext: StudioContext, props: UpdateDetailViewProp) {
+    const { lobb, ctx } = studioContext;
+    const params = {
+        fields: getCollectionParamsFields(ctx, props.collectionName, true),
+        filter: { id: props.recordId },
+        limit: 1,
+    };
+    const response = await lobb.findAll(props.collectionName, params);
+    const result = await response.json();
+    const entry = result.data[0];
+
+    const targetElement = document.querySelector("main");
+    if (!targetElement) throw new Error("main html element doesn't exist");
+
+    const mounted = mount(UpdateDetailView, {
+        target: targetElement,
+        context: createStudioContextMap(studioContext),
+        props: {
+            ...props,
+            onCancel: async () => {
+                props.onCancel?.();
+                await unmount(mounted, { outro: true });
+            },
+            values: entry,
+        },
+    });
+}
+
+export function openDataTableDrawer(studioContext: StudioContext, props: OpenDataTableDrawerProps) {
+    const targetElement = document.querySelector("main");
+    if (!targetElement) throw new Error("main html element doesn't exist");
+
+    const mounted = mount(DataTableDrawer, {
+        target: targetElement,
+        context: createStudioContextMap(studioContext),
+        props: {
+            ...props,
+            onClose: async () => {
+                await unmount(mounted, { outro: true });
+            },
+        },
+    });
+}

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

@@ -11,7 +11,7 @@
     import FieldCell from "./fieldCell.svelte";
     import Skeleton from "../ui/skeleton/skeleton.svelte";
     import Button from "../ui/button/button.svelte";
-    import { showDialog } from "../confirmationDialog/store.svelte";
+    import { showDialog } from "../../actions";
     import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
     import { emitEvent } from "../../eventSystem";
     import type { Snippet } from "svelte";

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

@@ -9,7 +9,7 @@
     import SortButton from "./sortButton.svelte";
     import Button from "../ui/button/button.svelte";
     import ImportButton from "../importButton.svelte";
-    import { showDialog } from "../confirmationDialog/store.svelte";
+    import { showDialog } from "../../actions";
     import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../extensions/extensionUtils";

package/src/lib/components/dataTableDrawer/dataTableDrawer.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { ArrowLeft } from "lucide-svelte";
+    import Button from "../ui/button/button.svelte";
+    import DataTable from "../dataTable/dataTable.svelte";
+    import Drawer from "../drawer.svelte";
+    import type { TableProps } from "../dataTable/table.svelte";
+
+    interface Props {
+        collectionName: string;
+        filter?: Record<string, any>;
+        title?: string;
+        showHeader?: boolean;
+        showFooter?: boolean;
+        tableProps?: Partial<TableProps>;
+        onClose?: () => void;
+    }
+
+    let {
+        collectionName,
+        filter,
+        title,
+        showHeader = true,
+        showFooter = true,
+        tableProps,
+        onClose,
+    }: Props = $props();
+</script>
+
+<Drawer onHide={async () => onClose?.()}>
+    <div class="flex h-12 shrink-0 items-center gap-4 border-b px-4">
+        <Button
+            variant="outline"
+            onclick={() => onClose?.()}
+            class="h-8 w-8 rounded-full text-xs font-normal"
+            Icon={ArrowLeft}
+        />
+        <div class="text-sm font-medium">{title ?? collectionName}</div>
+    </div>
+    <div class="min-h-0 flex-1 overflow-auto">
+        <DataTable
+            {collectionName}
+            {filter}
+            {showHeader}
+            {showFooter}
+            {tableProps}
+            unifiedBgColor="bg-background"
+        />
+    </div>
+</Drawer>

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

@@ -11,7 +11,7 @@
     import { location } from "@wjfe/n-savant";
     import { CircleSlash2, Plus, Trash2 } from "lucide-svelte";
     import { onMount } from "svelte";
-    import { showDialog } from "../../../components/confirmationDialog/store.svelte";
+    import { showDialog } from "../../../actions";
     import SidebarTrigger from "../../../components/sidebar/sidebarTrigger.svelte";
 
     let { workflowName } = $props();

package/src/lib/eventSystem.ts

@@ -1,6 +1,6 @@
 import { toast } from "svelte-sonner";
 import type { StudioContext } from "./context";
-import { openCreateDetailView, openUpdateDetailView } from "./components/detailView/store.svelte";
+import { openCreateDetailView, openUpdateDetailView } from "./actions";
 import type { UpdateDetailViewProp } from "./components/detailView/update/updateDetailView.svelte";
 
 export async function emitEvent(studioContext: StudioContext, eventName: string, input: Record<string, any>) {

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

@@ -22,7 +22,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 } from "../components/confirmationDialog/store.svelte";
+import { showDialog } from "../actions";
 import { toast } from "svelte-sonner";
 import type Drawer from "../components/drawer.svelte";
 import { Switch } from "../components/ui/switch";
@@ -57,6 +57,7 @@ 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;
     components: Components;
     mediaQueries: typeof mediaQueries;
     intlDate: typeof intlDate;
@@ -94,7 +95,8 @@ export type ExtensionComponentKey =
     | `detailView.fields.foreignKey.${string}`
     | `listView.entry.children.${string}`
     | `listView.entry.actions`
-    | `listView.header.actions`;
+    | `listView.header.actions`
+    | (string & {});
 
 export type ExtensionComponent =
     | any

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 } from "../components/confirmationDialog/store.svelte";
+import { showDialog, openDataTableDrawer } from "../actions";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Separator } from "../components/ui/separator";
@@ -64,6 +64,7 @@ export function getExtensionUtils(lobb: LobbClient, ctx: CTX): ExtensionUtils {
     location: location,
     toast: toast,
     showDialog: showDialog,
+    openDataTableDrawer: (props) => openDataTableDrawer({ lobb, ctx }, props),
     components: getComponents(),
     mediaQueries: mediaQueries,
     intlDate: intlDate,

package/dist/components/confirmationDialog/store.svelte.d.ts

@@ -1 +0,0 @@
-export declare function showDialog(title: string, description: string): Promise<boolean>;

package/dist/components/confirmationDialog/store.svelte.js

@@ -1,69 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { mount, unmount } from "svelte";
-import ConfirmationDialog from "./confirmationDialog.svelte";
-export function showDialog(title, description) {
-    var _this = this;
-    return new Promise(function (resolve) {
-        var targetElement = document.querySelector('main');
-        if (!targetElement) {
-            throw new Error("main html element doesn't exist for some reason");
-        }
-        var mountedElement = mount(ConfirmationDialog, {
-            target: targetElement,
-            props: {
-                title: title,
-                description: description,
-                onDecision: function (result) { return __awaiter(_this, void 0, void 0, function () {
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                resolve(result);
-                                return [4 /*yield*/, unmount(mountedElement, {
-                                        outro: true
-                                    })];
-                            case 1:
-                                _a.sent();
-                                return [2 /*return*/];
-                        }
-                    });
-                }); }
-            },
-        });
-        console.log("the dialog is mounted man");
-    });
-}

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

@@ -1,5 +0,0 @@
-import type { CreateDetailViewProp } from "./create/createDetailView.svelte";
-import type { UpdateDetailViewProp } from "./update/updateDetailView.svelte";
-import type { StudioContext } from "../../context";
-export declare function openCreateDetailView(studioContext: StudioContext, props: CreateDetailViewProp): void;
-export declare function openUpdateDetailView(studioContext: StudioContext, props: UpdateDetailViewProp): Promise<void>;

package/src/lib/components/confirmationDialog/store.svelte.ts

@@ -1,28 +0,0 @@
-import { mount, unmount } from "svelte";
-import ConfirmationDialog from "./confirmationDialog.svelte";
-
-export function showDialog(title: string, description: string): Promise<boolean> {
-    return new Promise((resolve) => {
-        const targetElement = document.querySelector('main');
-
-        if (!targetElement) {
-            throw new Error("main html element doesn't exist for some reason");
-        }
-
-        const mountedElement = mount(ConfirmationDialog, {
-            target: targetElement,
-            props: {
-                title,
-                description,
-                onDecision: async (result: boolean) => {
-                    resolve(result);
-                    await unmount(mountedElement, {
-                        outro: true
-                    });
-                }
-            },
-        });
-
-        console.log("the dialog is mounted man")
-    });
-}

package/src/lib/components/detailView/store.svelte.ts

@@ -1,59 +0,0 @@
-import type { CreateDetailViewProp } from "./create/createDetailView.svelte";
-import type { UpdateDetailViewProp } from "./update/updateDetailView.svelte";
-import CreateDetailView from "./create/createDetailView.svelte";
-import UpdateDetailView from "./update/updateDetailView.svelte";
-import type { StudioContext } from "../../context";
-import { getCollectionParamsFields } from "../dataTable/utils";
-import { createStudioContextMap } from "../../context";
-import { mount, unmount } from "svelte";
-
-export function openCreateDetailView(studioContext: StudioContext, props: CreateDetailViewProp) {
-    const targetElement = document.querySelector('main');
-
-    if (!targetElement) {
-        throw new Error("main html element doesn't exist for some reason")
-    }
-
-    const mountedCreateDetailView = mount(CreateDetailView, {
-        target: targetElement,
-        context: createStudioContextMap(studioContext),
-        props: {
-            ...props,
-            onCancel: async () => {
-                props.onCancel?.()
-                await unmount(mountedCreateDetailView, { outro: true });
-            }
-        },
-    })
-}
-
-export async function openUpdateDetailView(studioContext: StudioContext, props: UpdateDetailViewProp) {
-    const { lobb, ctx } = studioContext;
-    const params = {
-        fields: getCollectionParamsFields(ctx, props.collectionName, true),
-        filter: { id: props.recordId },
-        limit: 1,
-    };
-    const response = await lobb.findAll(props.collectionName, params);
-    const result = await response.json();
-    const entry = result.data[0];
-
-    const targetElement = document.querySelector('main');
-
-    if (!targetElement) {
-        throw new Error("main html element doesn't exist for some reason")
-    }
-
-    const mountedUpdateDetailView = mount(UpdateDetailView, {
-        target: targetElement,
-        context: createStudioContextMap(studioContext),
-        props: {
-            ...props,
-            onCancel: async () => {
-                props.onCancel?.()
-                await unmount(mountedUpdateDetailView, { outro: true });
-            },
-            values: entry,
-        },
-    })
-}