@compill/admin 1.0.102 → 1.0.103

package/dist/lib/json/table/TableView.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@soperio/jsx-runtime";
+import { Table, useTableContext } from "@compill/table";
+import { isFunction, runIfFn } from "@soperio/react";
+import React from "react";
+import { useParams } from "react-router-dom";
+import { InvalidateButton } from "../../buttons/InvalidateButton";
+import { PageContainer } from "../../page/PageContainer";
+import { TableContainer } from "../../table/TableContainer";
+import { TableCreateButton } from "../../table/TableCreateButton";
+import { TableFilterButton } from "../../table/TableFilterButton";
+import { TableTopBar } from "../../table/TableTopBar";
+import { ButtonBar } from "../../layout/ButtonBar";
+import { TableFilters } from "../../table/TableFilters";
+import { TableMassActions } from "../../table/TableMassActions";
+import { DialogRenderer } from "../dialog/DialogRenderer";
+import { RefreshButton } from "./RefreshButton";
+import { TableViewProvider, useTableViewContext } from "./TableViewContext";
+import { useTableProps } from "./useTableProps";
+function useId(queryField) {
+    const params = useParams();
+    if (queryField === undefined)
+        return undefined;
+    const { [queryField]: id } = params;
+    return id;
+}
+export function TableView({ queryField, title, subtitle, screen, ...props }) {
+    const id = useId(queryField);
+    const _screen = runIfFn(screen, id);
+    return (_jsx(PageContainer, { bgColor: "white", ...props, children: _jsx(TableContainer, { columns: _screen.table.columns, initialVisibleColumns: _screen.table.initialVisibleColumns, filtersMethod: _screen.table.filtersMethod, children: _jsx(TT, { id: id, title: title, subtitle: subtitle, screen: _screen }) }) }));
+}
+function TT({ id, title, subtitle, screen }) {
+    const { setRowSelection } = useTableContext();
+    const { api, table, filters, massActions, buttonBar, rowActions, createView, editView, deleteItem, breadcrumbs } = screen;
+    const tableApi = runIfFn(api, id ?? "");
+    return (_jsxs(_Fragment, { children: [_jsx(TableTopBar, { title: title, breadcrumbs: breadcrumbs, children: _jsx(TableButtonBar, { buttonBar: buttonBar, createView: createView, editView: editView, api: tableApi, queryKey: tableApi.queryKey, children: filters && _jsx(TableFilterButton, {}) }) }), filters &&
+                (_jsx(TableFilters, { form: filters.form, initialValues: filters.initialValues, schema: filters.schema, processInput: filters.processInput })), massActions && _jsx(TableMassActions, { actions: massActions.items }), _jsxs(TableViewProvider, { queryKey: tableApi.queryKey, editView: editView, deleteItem: deleteItem, children: [_jsx(TableWrapper, { table: { ...table, onSelectionChange: setRowSelection }, rowActions: rowActions, api: tableApi, subtitle: subtitle, queryParams: screen.queryParams }), _jsx(TableDialogManager, {})] })] }));
+}
+function TableButtonBar({ buttonBar, queryKey, createView, editView, api, children }) {
+    const createDialogFn = React.useCallback((data) => {
+        return (onClose) => {
+            const view = runIfFn(createView, data) ?? runIfFn(editView, null);
+            if (view.type == "customDialog")
+                return view.render({ show: true, onClose });
+            else
+                return _jsx(DialogRenderer, { config: view, onClose: onClose, invalidateQueryKey: api.queryKey });
+        };
+    }, [createView, editView, api]);
+    return (_jsxs(ButtonBar, { children: [_jsx(RefreshButton, { queryKey: queryKey }), buttonBar && buttonBar.map((button, index) => _jsxs(React.Fragment, { children: [button.type === "create" && editView &&
+                        (_jsx(TableCreateButton, { buildDialog: createDialogFn(button.data), icon: button.icon, children: button.label })), button.type === "invalidate" && _jsx(InvalidateButton, { pathOrPermalink: button.pathOrPermalink }), button.type === "custom" && button.render()] }, index)), children] }));
+}
+function TableWrapper({ table, subtitle, rowActions, api, queryParams }) {
+    const tableProps = useTableProps(api, table, rowActions, queryParams);
+    const _subtitle = React.useMemo(() => {
+        if (!subtitle)
+            return undefined;
+        return (data) => {
+            return (_jsx("div", { textSize: "lg", textColor: "#475569", fontWeight: "600", children: isFunction(subtitle) ? subtitle(data) : subtitle }));
+        };
+    }, [subtitle]);
+    return _jsx(Table, { ...tableProps, p: "8", title: _subtitle });
+}
+function TableDialogManager() {
+    const { dialog } = useTableViewContext();
+    return dialog;
+}

package/dist/lib/json/table/{TableViewContext.jsx → TableViewContext.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { useOpenLink } from "@compill/hooks";
 import { createContext, runIfFn } from "@soperio/react";
 import React from "react";
@@ -31,7 +32,7 @@ function TableViewProvider({ editView, deleteItem, queryKey, children }) {
                             setDialog(editConfig.render({ show: true, onClose: onCloseDialog }));
                         }
                         else {
-                            setDialog(<DialogRenderer onClose={onCloseDialog} config={editConfig} queryId={item.id} invalidateQueryKey={queryKey}/>);
+                            setDialog(_jsx(DialogRenderer, { onClose: onCloseDialog, config: editConfig, queryId: item.id, invalidateQueryKey: queryKey }));
                         }
                     }
                     break;
@@ -39,7 +40,7 @@ function TableViewProvider({ editView, deleteItem, queryKey, children }) {
             case "delete":
                 {
                     const deleteConfig = runIfFn(deleteItem, item);
-                    setDialog(<ItemDeleteDialog show onClose={onCloseDialog} queryId={item.id} invalidateQueryKey={queryKey} msg={item.msg} {...deleteConfig} itemLabel={runIfFn(deleteConfig.itemLabel, item)}/>);
+                    setDialog(_jsx(ItemDeleteDialog, { show: true, onClose: onCloseDialog, queryId: item.id, invalidateQueryKey: queryKey, msg: item.msg, ...deleteConfig, itemLabel: runIfFn(deleteConfig.itemLabel, item) }));
                     // TODO
                     // const { initialValues, ...props } = editItem!!
                     // setDialog(<ItemEditDialog {...props} initialValues={runIfFn(initialValues, item)} show queryId={item?.id} onClose={onCloseDialog} />)
@@ -52,6 +53,6 @@ function TableViewProvider({ editView, deleteItem, queryKey, children }) {
         dialog,
         onAction
     };
-    return <Provider value={value}>{children}</Provider>;
+    return _jsx(Provider, { value: value, children: children });
 }
 export { TableViewProvider, useContext as useTableViewContext };

package/dist/lib/json/table/{useTableProps.jsx → useTableProps.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { useOpenLink } from "@compill/hooks";
 import { runIfFn } from "@soperio/react";
 import { createColumnHelper } from "@tanstack/react-table";
@@ -41,7 +42,7 @@ export function useTableProps(api, table, rowActions, queryParams) {
             columns.push(createColumnHelper().display({
                 id: "actions",
                 header: "Actions",
-                cell: props => <TableRowActionsView row={props.row} onAction={onAction} rowActions={rowActions} api={api} queryKey={api.queryKey}/>
+                cell: props => _jsx(TableRowActionsView, { row: props.row, onAction: onAction, rowActions: rowActions, api: api, queryKey: api.queryKey })
             }));
         }
         return columns;

package/dist/lib/layout/AdminLayout.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { useBoolean } from "@compill/hooks";
+import { mdiArrowLeft } from "@mdi/js";
+import { IconButton } from "@valerya/ui";
+import { useHotkeys } from "react-hotkeys-hook";
+import Content from "./Content";
+import { Sidebar } from "./Sidebar";
+export function AdminLayout({ color, darkMode, logo, title, menuConfig, userMenuConfig, userSettingsPath, ...props }) {
+    return (_jsxs("div", { w: "full", h: "screen", dflex: true, flexRow: true, bgColor: `${color}-${darkMode ? "900" : "100"}`, ...props, children: [_jsx(LeftPanel, { color: color, darkMode: darkMode, logo: logo, title: title, menuConfig: menuConfig, userMenuConfig: userMenuConfig, userSettingsPath: userSettingsPath }), _jsx("div", { w: "screen", py: "2", pe: "2", children: _jsx(Content, { bgColor: "white", rounded: "lg", shadow: true }) })] }));
+}
+function LeftPanel({ color, darkMode, logo, title, menuConfig, userMenuConfig, userSettingsPath }) {
+    const [isOpen, __, toggle] = useBoolean(true);
+    useHotkeys('ctrl+t', () => toggle(), [toggle]);
+    return (_jsxs("div", { ms: isOpen ? "0" : "-14.5rem", transition: "all", duration: "500", transform: true, children: [_jsx(Sidebar, { flexShrink: "0", color: color, darkMode: darkMode, logo: logo, title: title, menuConfig: menuConfig, userMenuConfig: userMenuConfig, userSettingsPath: userSettingsPath }), _jsx(IconButton, { icon: mdiArrowLeft, transition: "all", duration: "500", transform: true, rotate: isOpen ? "0" : "180", position: "absolute", bottom: "14", end: "-5", size: "lg", corners: "pill", onClick: toggle, z: "100" })] }));
+}

package/dist/lib/layout/ButtonBar.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { DialogButton } from "../buttons/DialogButton";
+import { Button, Icon } from "@valerya/ui";
+import { useFormikContext } from "formik";
+import React from "react";
+export function ButtonBar({ children, ...props }) {
+    return (_jsx("div", { dflex: true, border: "1px", borderColor: "zinc-200", divideX: "1px", divideColor: "zinc-200", rounded: "lg", overflow: "hidden", ...props, children: children }));
+}
+export const ButtonBarButton = React.forwardRef(function ({ icon, children, ...props }, ref) {
+    return (_jsxs(Button, { scheme: "dark", size: "sm", aspectRatio: icon && !children ? "square" : undefined, variant: "borderless", dflex: true, alignItems: "center", placeContent: "center", corners: "square", gap: "2", ...props, ref: ref, children: [icon && _jsx(Icon, { path: icon }), children] }));
+});
+export const ButtonBarSubmitButton = React.forwardRef(function ({ useDirty, disabled, icon, children, ...props }, ref) {
+    const { dirty, handleSubmit } = useFormikContext() ?? { dirty: false, handleSubmit: undefined, values: {} };
+    const onSubmit = React.useCallback(() => handleSubmit(), [handleSubmit]);
+    return (_jsxs(Button, { scheme: "dark", size: "sm", aspectRatio: icon && !children ? "square" : undefined, variant: "borderless", dflex: true, alignItems: "center", placeContent: "center", corners: "square", gap: "2", disabled: (useDirty && !dirty) || disabled, onClick: onSubmit, ...props, ref: ref, children: [icon && _jsx(Icon, { path: icon }), children] }));
+});
+export function ButtonBarDialogButton({ icon, children, ...props }) {
+    return (_jsxs(DialogButton, { scheme: "dark", size: "sm", aspectRatio: icon && !children ? "square" : undefined, variant: "borderless", dflex: true, alignItems: "center", placeContent: "center", corners: "square", gap: "2", ...props, children: [icon && _jsx(Icon, { path: icon }), children] }));
+}

package/dist/lib/layout/Content.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { Outlet } from "react-router-dom";
+/**
+ *
+ *
+ */
+export default function Content({ ...props }) {
+    return (_jsx("div", { w: "100%", h: "100%", overflowY: "auto", ...props, children: _jsx(Outlet, {}) }));
+}

package/dist/lib/layout/PageTitleBar.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+export function PageTitleBar({ title, children, ...props }) {
+    return (_jsxs("div", { dflex: true, flexRow: true, alignItems: "center", gap: "3", p: "8", ...props, children: [title && _jsx("h2", { textSize: "x2", fontWeight: "600", textColor: "#3f4254", textTransform: "capitalize", children: title }), _jsx("div", { flexGrow: true, children: "\u00A0" }), children] }));
+}

package/dist/lib/layout/Sidebar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { FlexCenter } from "@compill/components";
+import { Menu } from "./menu/Menu";
+import { AppEnv } from "@compill/env";
+import Image from "next/image";
+import { UserBlock } from "./menu/UserBlock";
+export function Sidebar({ show, logo, title, menuConfig, userMenuConfig, userSettingsPath, color, darkMode, ...props }) {
+    return (_jsxs("div", { dflex: true, flexCol: true, w: "full", md_w: "64", minH: "screen", p: "0", textColor: darkMode ? "white" : "slate-800", ...props, children: [_jsxs(FlexCenter, { placeContent: "start", p: "4", font: "title", gap: "3", borderB: "px", borderBColor: "slate-900", borderOpacity: "5", children: [logo ?? _jsx(Logo, { width: 40, height: 40, darkMode: darkMode }), _jsx("h1", { textSize: "md", children: title || AppEnv.appName() })] }), _jsx(Menu, { overflowY: "auto", flexGrow: "1", p: "4", darkMode: darkMode, config: menuConfig }), _jsx("div", { p: "2", children: _jsx(UserBlock, { darkMode: darkMode, color: color, menuConfig: userMenuConfig, path: userSettingsPath }) })] }));
+}
+export default function Logo({ width, height, darkMode, ...props }) {
+    return (_jsx("div", { ...props, children: _jsx(Image, { src: `/logo_${darkMode ? "light" : "dark"}.png`, alt: AppEnv.appName() || "", width: width, height: height, priority: true, unoptimized: true }) }));
+}

package/dist/lib/layout/menu/Menu.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { MenuItem } from "./MenuItem";
+import { NextMenuItem } from "./NextMenuItem";
+/**
+ *
+ *
+ */
+export function Menu({ darkMode, config, useNextRouter, ...props }) {
+    const Comp = useNextRouter ? NextMenuItem : MenuItem;
+    return (_jsx("ul", { ...props, children: config.map((item, index) => {
+            if (item.type == "divider")
+                return _jsx(Divider, { title: item.label }, index);
+            if (item.type == "item") {
+                return (_jsx(Comp, { icon: item.icon, path: item.path, depth: 0, darkMode: darkMode, subMenu: item.children, children: item.label }, index));
+            }
+        }) }));
+}
+function Divider({ title }) {
+    return (_jsx("div", { px: "2", mt: "5", mb: "2", opacity: "75", textTransform: "capitalize", letterSpacing: "widest", fontWeight: "700", textSize: "xs", children: title }));
+}
+function CategoryItem({ children, ...props }) {
+    return (_jsx("li", { ps: "5", py: "2", mt: "5", textSize: "sm", textColor: "white", textOpacity: "80", fontWeight: "600", textTransform: "uppercase", children: children }));
+}

package/dist/lib/layout/menu/MenuButton.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { Button, Icon } from "@valerya/ui";
+export function MenuButton({ depth, darkMode, icon, selected, children, ...props }) {
+    return (_jsxs(Button, { as: "li", minH: "8", ms: `${(depth ?? 0) * 2}`, p: "2", font: "title", textColor: darkMode ? "white" : "black", fontWeight: "600", rounded: "lg", textSize: "sm", variant: "borderless", hover_bgColor: darkMode ? "white" : "black", hover_bgOpacity: "10", hover_textColor: darkMode ? "white" : "zinc-800", cursor: "pointer", dflex: true, alignItems: "center", gap: "3", ...props, children: [icon && _jsx(Icon, { path: icon, opacity: selected ? "100" : "60" }), children] }));
+}

package/dist/lib/layout/menu/MenuItem.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@soperio/jsx-runtime";
+import { SelectedIndicator } from "./SelectedIndicator";
+import { Link, useLocation, useMatch } from "react-router-dom";
+import { MenuButton } from "./MenuButton";
+export function MenuItem({ icon, path, depth, darkMode, subMenu, ...props }) {
+    const location = useLocation();
+    const selected = path == "/" ? location.pathname == "/" : location.pathname.startsWith(path.startsWith("/") ? path : `/${path}`);
+    const match = useMatch("/" + path) != null;
+    // const selected = match != null
+    return (_jsxs(_Fragment, { children: [_jsxs(Link, { to: path, style: { position: "relative" }, children: [_jsx(MenuButton, { depth: depth, darkMode: darkMode, icon: icon, selected: selected, ...props }), match && _jsx(SelectedIndicator, { darkMode: darkMode })] }), subMenu?.map((item, index) => (_jsx(MenuItem, { icon: item.icon, path: item.path, depth: (depth ?? 0) + 1, darkMode: darkMode, subMenu: item.children, children: item.label }, index)))] }));
+}

package/dist/lib/layout/menu/NextMenuItem.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@soperio/jsx-runtime";
+import { MenuButton } from "./MenuButton";
+import { SelectedIndicator } from "./SelectedIndicator";
+import Link from "next/link";
+import { useRouter } from "next/router";
+export function NextMenuItem({ icon, path, depth, darkMode, subMenu, ...props }) {
+    const { pathname } = useRouter();
+    const selected = path == "/" ? pathname == "/" : pathname.startsWith(path.startsWith("/") ? path : `/${path}`);
+    const match = path == "/" ? pathname == "/" : pathname == (path.startsWith("/") ? path : `/${path}`);
+    return (_jsxs(_Fragment, { children: [_jsxs(Link, { href: path, style: { position: "relative" }, children: [_jsx(MenuButton, { depth: depth, darkMode: darkMode, icon: icon, selected: selected, ...props }), match && _jsx(SelectedIndicator, { darkMode: darkMode })] }), subMenu?.map((item, index) => (_jsx(NextMenuItem, { icon: item.icon, path: item.path, depth: (depth ?? 0) + 1, darkMode: darkMode, subMenu: item.children, children: item.label }, index)))] }));
+}

package/dist/lib/layout/menu/SelectedIndicator.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+export function SelectedIndicator({ darkMode }) {
+    return (_jsx("div", { position: "absolute", bgColor: darkMode ? "white" : "black", bgOpacity: "90", w: "0.5", h: "6", top: "1.5", start: "-4" }));
+}

package/dist/lib/layout/menu/UserBlock.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@soperio/jsx-runtime";
+import { useSessionLogout, useSessionUser } from "@compill/auth";
+import { mdiCog, mdiDotsVertical, mdiLogout } from "@mdi/js";
+import { Avatar, Button, Icon, IconButton, Popup } from "@valerya/ui";
+import { capitalize } from "es-toolkit";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+export function UserBlock({ color, darkMode, menuConfig, path }) {
+    const { isLoading, user } = useSessionUser();
+    const navigate = useNavigate();
+    const handleClick = React.useCallback(() => navigate(path), [navigate, path]);
+    if (isLoading)
+        return null;
+    return (_jsxs("div", { dflex: true, alignItems: "center", border: "0.5", borderColor: `${color}-${darkMode ? "800" : "200"}`, ps: "3", py: "1.5", textSize: "md", rounded: "lg", hover_bgColor: `${color}-${darkMode ? "800" : "200"}`, cursor: "pointer", textColor: darkMode ? "white" : "slate-800", onClick: handleClick, children: [_jsx(Avatar, { size: "sm", src: user?.media?.url ?? "", name: `${user?.firstname} ${user?.lastname}` }), _jsx("span", { flexGrow: true, ms: "2", children: `${capitalize(user?.firstname || user?.lastname || "")}` }), _jsx(IconButton, { variant: "borderless", corners: "pill", scheme: "dark", textColor: darkMode ? "white" : "slate-800", hover_textColor: darkMode ? "white" : "slate-800", hover_bgColor: `${color}-${darkMode ? "900" : "200"}`, icon: mdiCog, onClick: handleClick }), _jsx(OverflowMenu, { color: color, darkMode: darkMode, menuConfig: menuConfig })] }));
+}
+function OverflowMenu({ color, darkMode, menuConfig }) {
+    const [showPopup, setShowPopup] = React.useState(false);
+    const navigate = useNavigate();
+    const logout = useSessionLogout(false);
+    return (_jsx(_Fragment, { children: _jsxs(Popup, { show: showPopup, position: "relative", side: "bottom-end", onClick: (e) => { e.preventDefault(); e.stopPropagation(); setShowPopup((show) => !show); }, onHide: () => setShowPopup(false), children: [_jsx(IconButton, { icon: mdiDotsVertical, variant: "borderless", corners: "pill", scheme: "dark", textColor: darkMode ? "white" : "slate-800", hover_textColor: darkMode ? "white" : "slate-800", hover_bgColor: `${color}-${darkMode ? "900" : "200"}` }), _jsxs("div", { bgColor: "white", rounded: "sm", overflow: "hidden", shadow: true, mt: "1", border: "px", borderColor: "gray-200", divideColor: "gray-200", divideY: "px", minW: "40", children: [menuConfig && menuConfig.length > 0 && menuConfig.map((item, index) => {
+                            if (item.type == "item") {
+                                return (_jsx(MenuItem, { icon: item.icon, onClick: () => navigate(item.path), children: item.label }, index));
+                            }
+                            return null;
+                        }), _jsx(MenuItem, { icon: mdiLogout, onClick: logout, children: "Logout" })] })] }) }));
+}
+function MenuItem({ icon, onClick, children, ...props }) {
+    const handleClick = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick?.(e);
+    }, []);
+    return (_jsxs(Button, { variant: "borderless", scheme: "dark", size: "sm", alignItems: "center", dflex: true, gap: "2", px: "2", py: "1.5", w: "full", onClick: handleClick, textColor: "slate-700", ...props, children: [icon && _jsx(Icon, { path: icon, size: "md" }), children] }));
+}

package/dist/lib/modal/{AttachDialog.jsx → AttachDialog.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@soperio/jsx-runtime";
 import { useApiMutation, useApiQuery } from "@compill/api";
 import { ModalLoadingOverlay, QueryLoadingState, RetryOnError } from "@compill/components";
 import { useQueryClient } from "@tanstack/react-query";
@@ -64,46 +65,9 @@ export function AttachDialog({ queryId, queryKey, queryFetchFn, queryFetchAllKey
         }
         return r;
     }, [attached, data]);
-    return (<Modal size={size} show={show} onClose={onClose} scheme="light" transition 
-    // closeOnMaskClick={false}
-    {...props}>
-            <Modal.Header>
-                {`Add ${itemLabel}`}
-            </Modal.Header>
-
-            {isLoading && (<Modal.Body>
-                    <QueryLoadingState minW="72"/>
-                </Modal.Body>)}
-
-            {isError && (<Modal.Body>
-                    <RetryOnError label={`${fetchErrorMsg} ${error}`} onClick={retry}/>
-                </Modal.Body>)}
-
-            {!isLoading && !isError &&
-            (<>
-                        <Modal.Body px="0" pb="6" maxH="750px" overflow="auto">
-                            <div dflex flexCol overflow="auto">
-
-                                {resources.map(item => (<ListItem key={item.id} label={item.name} value={item.id} data-id={item.id} checked={selectedResources.includes(`${item.id}`)} onClick={handleClick}/>))}
-                            </div>
-                        </Modal.Body>
-
-                        <Modal.Footer dflex placeContent="end" spaceX="3">
-                            <Button disabled={mutation.isLoading} onClick={onClose} variant="borderless" me="2">
-                                {cancelLabel}
-                            </Button>
-                            <Button type="submit" disabled={selectedResources.length == 0 || mutation.isLoading /* || !isValid*/} onClick={saveItem}>
-                                {saveLabel ? saveLabel : (queryId ? "Update" : "Create")}
-                            </Button>
-                        </Modal.Footer>
-                    </>)}
-
-            {mutation.isLoading && <ModalLoadingOverlay />}
-        </Modal>);
+    return (_jsxs(Modal, { size: size, show: show, onClose: onClose, scheme: "light", transition: true, ...props, children: [_jsx(Modal.Header, { children: `Add ${itemLabel}` }), isLoading && (_jsx(Modal.Body, { children: _jsx(QueryLoadingState, { minW: "72" }) })), isError && (_jsx(Modal.Body, { children: _jsx(RetryOnError, { label: `${fetchErrorMsg} ${error}`, onClick: retry }) })), !isLoading && !isError &&
+                (_jsxs(_Fragment, { children: [_jsx(Modal.Body, { px: "0", pb: "6", maxH: "750px", overflow: "auto", children: _jsx("div", { dflex: true, flexCol: true, overflow: "auto", children: resources.map(item => (_jsx(ListItem, { label: item.name, value: item.id, "data-id": item.id, checked: selectedResources.includes(`${item.id}`), onClick: handleClick }, item.id))) }) }), _jsxs(Modal.Footer, { dflex: true, placeContent: "end", spaceX: "3", children: [_jsx(Button, { disabled: mutation.isLoading, onClick: onClose, variant: "borderless", me: "2", children: cancelLabel }), _jsx(Button, { type: "submit", disabled: selectedResources.length == 0 || mutation.isLoading /* || !isValid*/, onClick: saveItem, children: saveLabel ? saveLabel : (queryId ? "Update" : "Create") })] })] })), mutation.isLoading && _jsx(ModalLoadingOverlay, {})] }));
 }
 function ListItem({ label, value, checked, ...props }) {
-    return (<div dflex alignItems="center" hover_bgColor="slate-100" px="5" py="2" cursor="pointer" {...props}>
-            <span flexGrow>{label}</span>
-            <Checkbox name={`resources.${value}`} value={value} checked={checked}/>
-        </div>);
+    return (_jsxs("div", { dflex: true, alignItems: "center", hover_bgColor: "slate-100", px: "5", py: "2", cursor: "pointer", ...props, children: [_jsx("span", { flexGrow: true, children: label }), _jsx(Checkbox, { name: `resources.${value}`, value: value, checked: checked })] }));
 }

package/dist/lib/modal/FormActionDialog.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { useMutate } from "@compill/api";
+import { ModalLoadingOverlay } from "@compill/components";
+import { SubmitButton, FormRenderer, FormProvider } from "@compill/form";
+import { useApiMutation, useInvalidateParentMutation } from "@compill/api";
+import { Button, Modal } from "@valerya/ui";
+import React from "react";
+export function FormActionDialog({ initialValues, itemLabel, queryId = "", queryKey, queryFn, queryOptions, onSuccess, successMsg, showSuccessMsg, onError, errorMsg, showErrorMsg, processInput, invalidateQueriesOnSuccess = true, cancelLabel = "Cancel", saveLabel = "Send", size = "lg", title, form, show, onClose, formikProps, ...props }) {
+    const mutation = invalidateQueriesOnSuccess ? useInvalidateParentMutation(queryFn, queryKey, queryOptions) : useApiMutation(queryFn, queryKey, queryId, queryOptions);
+    const mutate = useMutate(mutation, {
+        onSuccess,
+        successMsg,
+        showSuccessMsg,
+        onError,
+        errorMsg,
+        showErrorMsg,
+        processInput,
+    });
+    return (_jsxs(Modal, { size: size, show: show, onClose: onClose, scheme: "light", transition: true, ...props, children: [_jsx(Modal.Header, { children: title }), _jsxs(FormProvider, { initialValues: initialValues ?? {}, onSubmit: mutate, ...formikProps, children: [_jsxs(Modal.Body, { pb: "6", children: [React.isValidElement(form) && form, Array.isArray(form) && _jsx(FormRenderer, { form: form })] }), _jsxs(Modal.Footer, { dflex: true, placeContent: "end", spaceX: "3", children: [_jsx(Button, { disabled: mutation.isLoading, onClick: onClose, variant: "borderless", me: "2", children: cancelLabel }), _jsx(SubmitButton, { disabled: mutation.isLoading, children: saveLabel })] })] }), mutation.isLoading && _jsx(ModalLoadingOverlay, {})] }));
+}

package/dist/lib/page/PageContainer.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { Container } from "@valerya/ui";
+export function PageContainer({ children, ...props }) {
+    return _jsx(Container, { center: true, dflex: true, flexCol: true, gap: "8", ...props, children: children });
+}

package/dist/lib/page/PageContentEditor.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { FormEditor } from "@compill/form-editor";
+import { PageMain } from "./PageMain";
+import { ImageExtension } from "@compill/editor";
+export function PageContentEditor({ name, ...props }) {
+    const extensions = [ImageExtension];
+    return (_jsx(PageMain, { h: "min", ...props, children: _jsx(FormEditor, { minH: "128", minW: "144", maxW: props.maxW, 
+            // w={props.w}
+            name: name, placeHolder: "Write here...", extensions: extensions }) }));
+}

package/dist/lib/page/PageMain.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { Tile } from "@valerya/ui";
+export function PageMain({ children, ...props }) {
+    return _jsx(Tile, { scheme: "light", p: "5", ...props, children: children });
+}

package/dist/lib/page/{PageQueryStateContainer.jsx → PageQueryStateContainer.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { QueryLoadingState, RetryOnError } from "@compill/components";
 import { useApiQuery, useInvalidateQuery } from "@compill/api";
 import React from "react";
@@ -7,9 +8,9 @@ function PageQueryStateContainerInner({ queryId, api, apiFn, loadingStyles, erro
     const { data, isLoading, isError } = apiFn == "getAll" ? useApiQuery(api.queryKey, api.getAll, props.apiParams) : useApiQuery(api.queryKey, api.get, queryId);
     const invalidate = useInvalidateQuery(api.queryKey, queryId);
     if (isLoading)
-        return <QueryLoadingState w="full" h="100%" {...loadingStyles}/>;
+        return _jsx(QueryLoadingState, { w: "full", h: "100%", ...loadingStyles });
     if (isError)
-        return <RetryOnError p="0" onClick={invalidate} {...errorStyles}/>;
-    return <PageContainer {...props}>{apiFn == "get" ? children(data) : children(data)}</PageContainer>;
+        return _jsx(RetryOnError, { p: "0", onClick: invalidate, ...errorStyles });
+    return _jsx(PageContainer, { ...props, children: apiFn == "get" ? children(data) : children(data) });
 }
 export const PageQueryStateContainer = React.forwardRef(PageQueryStateContainerInner);

package/dist/lib/page/PageSectionTitle.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+export function PageSectionTitle({ children, ...props }) {
+    return _jsx("div", { trait: "typo.h6", mb: "5", ...props, children: children });
+}

package/dist/lib/page/PageSidebar.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+export function PageSidebar({ children, ...props }) {
+    return _jsx("div", { w: "112", minW: "112", minH: "100%", gap: "8", dflex: true, flexCol: true, ...props, children: children });
+}

package/dist/lib/page/PageSidebarSection.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { PageSectionTitle } from "./PageSectionTitle";
+export function PageSidebarSection({ title, children, ...props }) {
+    return (_jsxs("div", { w: "full", ...props, children: [title && _jsx(PageSectionTitle, { children: title }), children] }));
+}

package/dist/lib/page/PageStateContainer.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { QueryLoadingState } from "@compill/components";
+import { Container } from "@valerya/ui";
+import React from "react";
+export const PageStateContainer = React.forwardRef(({ loading = false, children, ...props }, ref) => {
+    return (_jsxs(_Fragment, { children: [loading && _jsx(QueryLoadingState, { w: "full", h: "100%" }), !loading && _jsx(Container, { ref: ref, center: true, size: "x2", dflex: true, flexCol: true, gap: "8", ...props, children: children })] }));
+});

package/dist/lib/page/PageSubSectionTitle.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+export function PageSubSectionTitle({ children, ...props }) {
+    return _jsx("div", { trait: "typo.h6", mb: "3", ...props, children: children });
+}

package/dist/lib/page/PageTitle.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+export function PageTitle({ children, ...props }) {
+    return _jsx("div", { trait: "typo.h5", ...props, children: children });
+}

package/dist/lib/page/{PageTopBar.jsx → PageTopBar.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@soperio/jsx-runtime";
 import { createContext } from "@soperio/react";
 import { PageTitle } from "./PageTitle";
 import React from "react";
@@ -5,20 +6,13 @@ import { createPortal } from "react-dom";
 import { FlexCenter } from "@compill/components";
 import { Breadcrumbs } from "../breadcrumbs/BreadCrumbs";
 export function PageTopBar({ title, breadcrumbs, children, ...props }) {
-    return (<FlexCenter gap="3" minH="9" {...props}>
-            {title && <PageTitle>{title}</PageTitle>}
-            {breadcrumbs && <Breadcrumbs breadcrumbs={breadcrumbs}/>}
-            <div flexGrow/>
-            {children}
-        </FlexCenter>);
+    return (_jsxs(FlexCenter, { gap: "3", minH: "9", ...props, children: [title && _jsx(PageTitle, { children: title }), breadcrumbs && _jsx(Breadcrumbs, { breadcrumbs: breadcrumbs }), _jsx("div", { flexGrow: true }), children] }));
 }
 const [CP, usePageTabbedTopBarContext] = createContext();
 export function PageTabbedTopBarProvider({ children }) {
     const [containerEl, setContainerEl] = React.useState(null);
     const r = React.createRef();
-    return (<CP value={{ containerEl, setContainerEl }}>
-            {children}
-        </CP>);
+    return (_jsx(CP, { value: { containerEl, setContainerEl }, children: children }));
 }
 export function PageTabbedTopBar({ title, breadcrumbs, children, ...props }) {
     const ref = React.createRef();
@@ -31,15 +25,7 @@ export function PageTabbedTopBar({ title, breadcrumbs, children, ...props }) {
         }
         return () => setContainerEl(null);
     }, []);
-    return (<FlexCenter gap="3" minH="9" {...props}>
-            <>
-                {title && <PageTitle>{title}</PageTitle>}
-                {breadcrumbs && <Breadcrumbs breadcrumbs={breadcrumbs}/>}
-                <div flexGrow/>
-                <div ref={ref} dflex flexRow gap="3"/>
-                {children}
-            </>
-        </FlexCenter>);
+    return (_jsx(FlexCenter, { gap: "3", minH: "9", ...props, children: _jsxs(_Fragment, { children: [title && _jsx(PageTitle, { children: title }), breadcrumbs && _jsx(Breadcrumbs, { breadcrumbs: breadcrumbs }), _jsx("div", { flexGrow: true }), _jsx("div", { ref: ref, dflex: true, flexRow: true, gap: "3" }), children] }) }));
 }
 export function PageTopBarToolbar({ trackingRef, children }) {
     const { containerEl } = usePageTabbedTopBarContext();

package/dist/lib/status/{StatusBadge.jsx → StatusBadge.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { Badge } from "@valerya/ui";
 const labels = {
     draft: "Draft",
@@ -16,5 +17,5 @@ const schemes = {
     rejected: "danger",
 };
 export function StatusBadge({ status, ...props }) {
-    return (<Badge size="sm" variant="glass" whiteSpace="nowrap" rounded="full" px="3" scheme={schemes[status]} {...props}>{labels[status]}</Badge>);
+    return (_jsx(Badge, { size: "sm", variant: "glass", whiteSpace: "nowrap", rounded: "full", px: "3", scheme: schemes[status], ...props, children: labels[status] }));
 }

package/dist/lib/table/TableContainer.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { TableContextProvider } from "@compill/table";
+import { TableContainerContextProvider } from "./TableContainerContext";
+export function TableContainer({ initialPageSize, initialVisibleColumns, columns, filtersMethod = "reactRouter", children, ...props }) {
+    return (_jsx("div", { w: "full", dflex: true, flexCol: true, ...props, children: _jsx(TableContextProvider, { initialPageSize: initialPageSize, filtersMethod: filtersMethod, children: _jsx(TableContainerContextProvider, { columns: columns, initialVisibleColumns: initialVisibleColumns, children: children }) }) }));
+}

package/dist/lib/table/{TableContainerContext.jsx → TableContainerContext.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import React from "react";
 import { createContext } from "@soperio/react";
 const [provider, useContext] = createContext();
@@ -34,6 +35,6 @@ function TableContainerContextProvider({ initialVisibleColumns, columns, childre
         toggleColumnVisibility,
         isColumnVisible
     };
-    return <Provider value={value}>{children}</Provider>;
+    return _jsx(Provider, { value: value, children: children });
 }
 export { TableContainerContextProvider, useContext as useTableContainerContext };

package/dist/lib/table/{TableCreateButton.jsx → TableCreateButton.js}

@@ -1,9 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
 import { mdiPlusThick } from "@mdi/js";
 import { Icon } from "@valerya/ui";
 import { ButtonBarDialogButton } from "../layout/ButtonBar";
 export function TableCreateButton({ icon, children, ...props }) {
-    return (<ButtonBarDialogButton {...props}>
-            <Icon path={icon ?? mdiPlusThick}/>
-            {children}
-        </ButtonBarDialogButton>);
+    return (_jsxs(ButtonBarDialogButton, { ...props, children: [_jsx(Icon, { path: icon ?? mdiPlusThick }), children] }));
 }

package/dist/lib/table/TableFilterButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { Icon } from "@valerya/ui";
+import { Button, Popover } from "@valerya/ui";
+import { mdiFilter } from "@mdi/js";
+export function TableFilterButton({ ...props }) {
+    // return <Button scheme="secondary" {...props}><Icon path={mdiFilter} /></Button>
+    return (_jsxs(Popover, { side: "bottom-end", modal: true, children: [_jsx(Button, { scheme: "dark", size: "sm", aspectRatio: "square", variant: "borderless", corners: "square", ...props, children: _jsx(Icon, { path: mdiFilter }) }), _jsxs("div", { bgColor: "white", rounded: true, shadow: true, children: [_jsx("div", { py: "3", hover_bgColor: "#ff0000", px: "5", hover_textColor: "white", children: "First Item" }), _jsx("div", { py: "3", hover_bgColor: "#ff0000", px: "5", hover_textColor: "white", children: "Second Item" }), _jsx("div", { py: "3", hover_bgColor: "#ff0000", px: "5", hover_textColor: "white", children: "Third Item" })] })] }));
+}

package/dist/lib/table/{TableFilters.jsx → TableFilters.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
 import { useTableContext } from "@compill/table";
 import React from "react";
 import { useTableContainerContext } from "./TableContainerContext";
@@ -19,28 +20,8 @@ export function TableFilters({ form, initialValues, schema, processInput }) {
         resetForm();
     }, [setFilters, initialValues]);
     React.useEffect(() => setFilters(initialValues), []);
-    return (<Collapse in={showFilters} style={{ overflow: showFilters ? "initial" : "hidden" }}>
-            <div p="8" borderT="px" borderB="px" borderColor="slate-100">
-                <FormProvider initialValues={mergeInitialFormValues(getFilters(), initialValues)} onSubmit={handleSubmit} validationSchema={schema} enableReinitialize>
-                    {(props) => (<div dflex gap="3" placeContent="start">
-                            <FormRenderer flexRow w="auto" form={form}/>
-                            <Buttons handleReset={() => handleReset(props.resetForm)}/>
-                        </div>)}
-
-                </FormProvider>
-            </div>
-        </Collapse>);
+    return (_jsx(Collapse, { in: showFilters, style: { overflow: showFilters ? "initial" : "hidden" }, children: _jsx("div", { p: "8", borderT: "px", borderB: "px", borderColor: "slate-100", children: _jsx(FormProvider, { initialValues: mergeInitialFormValues(getFilters(), initialValues), onSubmit: handleSubmit, validationSchema: schema, enableReinitialize: true, children: (props) => (_jsxs("div", { dflex: true, gap: "3", placeContent: "start", children: [_jsx(FormRenderer, { flexRow: true, w: "auto", form: form }), _jsx(Buttons, { handleReset: () => handleReset(props.resetForm) })] })) }) }) }));
 }
 function Buttons({ handleReset }) {
-    return (<div dflex gap="3">
-            <div dflex flexCol>
-                <FieldLabel name="" label="&nbsp;"/>
-                <SubmitButton>Filter</SubmitButton>
-            </div>
-
-            <div dflex flexCol>
-                <FieldLabel name="" label="&nbsp;"/>
-                <Button scheme="neutral" onClick={handleReset}>Reset</Button>
-            </div>
-        </div>);
+    return (_jsxs("div", { dflex: true, gap: "3", children: [_jsxs("div", { dflex: true, flexCol: true, children: [_jsx(FieldLabel, { name: "", label: "\u00A0" }), _jsx(SubmitButton, { children: "Filter" })] }), _jsxs("div", { dflex: true, flexCol: true, children: [_jsx(FieldLabel, { name: "", label: "\u00A0" }), _jsx(Button, { scheme: "neutral", onClick: handleReset, children: "Reset" })] })] }));
 }

package/dist/lib/table/TableMassActions.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { useTableContext } from "@compill/table";
+import { Collapse } from "@valerya/ui";
+import { ActionButton } from "../json/buttons/ActionButton";
+export function TableMassActions({ actions }) {
+    const { ids } = useTableContext();
+    const showMassActions = ids && ids.length > 0;
+    return (_jsx(Collapse, { in: showMassActions, style: { overflow: showMassActions ? "initial" : "hidden" }, children: _jsx("div", { dflex: true, gap: "3", flexWrap: true, alignItems: "center", px: "8", pt: "5", children: actions.map((action, index) => (_jsx("div", { children: action.type == "button" && !action.showConfirmationDialog && (_jsx(ActionButton, { label: action.label, queryFn: action.queryFn, queryKey: action.queryKey, buttonProps: action.buttonProps })) }, index))) }) }));
+}