@compill/admin 1.0.73 → 1.0.75

package/index.cjs.js

@@ -8,15 +8,15 @@ var Link = require('next/link');
 var React = require('react');
 var adminApi = require('@compill/admin-api');
 var api = require('@compill/api');
+var formik = require('formik');
 var reactRouterDom = require('react-router-dom');
+var admin = require('@compill/admin');
 var reactToastify = require('react-toastify');
-var form = require('@compill/form');
-var formik = require('formik');
 require('react/jsx-runtime');
 var components = require('@compill/components');
+var form = require('@compill/form');
 var react = require('@soperio/react');
 var editor = require('@compill/editor');
-var admin = require('@compill/admin');
 var reactDom = require('react-dom');
 var router = require('next/router');
 var table = require('@compill/table');
@@ -205,6 +205,43 @@ const ButtonBarButton = /*#__PURE__*/React__default["default"].forwardRef(functi
     }), children]
   }));
 });
+const ButtonBarSubmitButton = /*#__PURE__*/React__default["default"].forwardRef(function (_a, ref) {
+  var _b;
+  var {
+      useDirty,
+      disabled,
+      icon,
+      children
+    } = _a,
+    props = __rest$1(_a, ["useDirty", "disabled", "icon", "children"]);
+  const {
+    dirty,
+    handleSubmit
+  } = (_b = formik.useFormikContext()) !== null && _b !== void 0 ? _b : {
+    dirty: false,
+    handleSubmit: undefined,
+    values: {}
+  };
+  const onSubmit = React__default["default"].useCallback(() => handleSubmit(), [handleSubmit]);
+  return jsxRuntime.jsxs(ui.Button, Object.assign({
+    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 && jsxRuntime.jsx(ui.Icon, {
+      path: icon
+    }), children]
+  }));
+});
 function ButtonBarDialogButton(_a) {
   var {
       icon,
@@ -285,20 +322,12 @@ function PublishButton(_a) {
     mutation.reset();
     mutation.mutateAsync(queryId).then(() => reactToastify.toast.success(isDraft ? "Published!" : "Unpublished!")).catch(error => reactToastify.toast.error(`Error: ${error}`));
   }, [mutation, queryId]);
-  return jsxRuntime.jsxs(ui.Button, Object.assign({
-    scheme: "secondary",
-    variant: "glass",
-    size: "sm",
-    px: "3",
+  return jsxRuntime.jsx(admin.ButtonBarButton, Object.assign({
     disabled: mutation.isLoading,
     onClick: publish,
-    dflex: true,
-    alignItems: "center",
-    gap: "3"
+    icon: isDraft ? mdiEye : mdiEyeOff
   }, props, {
-    children: [jsxRuntime.jsx(ui.Icon, {
-      path: isDraft ? mdiEye : mdiEyeOff
-    }), isDraft ? "Publish" : "Switch to draft"]
+    children: isDraft ? "Publish" : "Switch to draft"
   }));
 }
 
@@ -705,17 +734,10 @@ function UpdateButton(_a) {
   }, {
     preventDefault: true
   }, [dirty, props, handleSubmit]);
-  return jsxRuntime.jsxs(form.SubmitButton, Object.assign({
-    type: "submit",
-    size: "sm",
-    px: "3",
-    dflex: true,
-    alignItems: "center",
-    gap: "3"
+  return jsxRuntime.jsx(admin.ButtonBarSubmitButton, Object.assign({
+    icon: mdiCloudUpload
   }, props, {
-    children: [jsxRuntime.jsx(ui.Icon, {
-      path: mdiCloudUpload
-    }), "Update"]
+    children: "Update"
   }));
 }
 
@@ -1119,13 +1141,15 @@ function Buttons$1({
       }), button.type === "invalidate" && jsxRuntime.jsx(InvalidateButton, {
         pathOrPermalink: button.pathOrPermalink
       }), button.type == "custom" && button.render(item)]
-    }, index)), jsxRuntime.jsx(PublishButton, {
-      api: api,
-      queryId: item.id,
-      status: item.status,
-      disabled: isLoading
-    }), jsxRuntime.jsx(UpdateButton, {
-      disabled: isLoading
+    }, index)), jsxRuntime.jsxs(admin.ButtonBar, {
+      children: [api instanceof adminApi.API && jsxRuntime.jsx(PublishButton, {
+        api: api,
+        queryId: item.id,
+        status: item.status,
+        disabled: isLoading
+      }), jsxRuntime.jsx(UpdateButton, {
+        disabled: isLoading
+      })]
     })]
   });
 }
@@ -2237,6 +2261,7 @@ function ItemDeleteDialog(_a) {
       itemLabel,
       queryId = "",
       api: api$1,
+      apiFn,
       invalidateQueriesOnSuccess = true,
       invalidateQueryKey,
       size = "lg",
@@ -2245,8 +2270,9 @@ function ItemDeleteDialog(_a) {
       show,
       onClose
     } = _a,
-    props = __rest$1(_a, ["itemLabel", "queryId", "api", "invalidateQueriesOnSuccess", "invalidateQueryKey", "size", "md_boxSizing", "msg", "show", "onClose"]);
-  const mutation = invalidateQueriesOnSuccess ? api.useInvalidateParentMutation(api$1.delete, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api$1.queryKey) : api.useApiMutation(api$1.delete, api$1.queryKey);
+    props = __rest$1(_a, ["itemLabel", "queryId", "api", "apiFn", "invalidateQueriesOnSuccess", "invalidateQueryKey", "size", "md_boxSizing", "msg", "show", "onClose"]);
+  const fn = apiFn ? api$1[apiFn] : api$1.delete;
+  const mutation = invalidateQueriesOnSuccess ? api.useInvalidateParentMutation(fn, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api$1.queryKey) : api.useApiMutation(fn, api$1.queryKey);
   const mutate = api.useMutate(mutation, {
     onSuccess: () => onClose === null || onClose === void 0 ? void 0 : onClose()
   });
@@ -3652,6 +3678,7 @@ exports.Breadcrumbs = Breadcrumbs;
 exports.ButtonBar = ButtonBar;
 exports.ButtonBarButton = ButtonBarButton;
 exports.ButtonBarDialogButton = ButtonBarDialogButton;
+exports.ButtonBarSubmitButton = ButtonBarSubmitButton;
 exports.DialogButton = DialogButton;
 exports.FormActionDialog = FormActionDialog;
 exports.InvalidateButton = InvalidateButton;

package/index.esm.js

@@ -2,17 +2,17 @@ import { jsx, jsxs, Fragment } from '@soperio/jsx-runtime';
 import { Icon, Button, IconButton, Container, Tile, Popover, Collapse, Modal, Checkbox, Badge } from '@valerya/ui';
 import Link from 'next/link';
 import React, { useRef, useCallback, useContext as useContext$2, useLayoutEffect, useEffect, createContext } from 'react';
-import { INVALIDATE_API } from '@compill/admin-api';
+import { INVALIDATE_API, API } from '@compill/admin-api';
 import { useApiMutation, useMutate, useInvalidateMutation, useApiQuery, useInvalidateQuery, useInvalidateParentMutation, useApiQueries } from '@compill/api';
+import { useFormikContext, Field, Formik, Form } from 'formik';
 import { useNavigate, useParams, Outlet, useLocation, useMatch, Link as Link$1 } from 'react-router-dom';
+import { ButtonBarButton as ButtonBarButton$1, ButtonBarSubmitButton as ButtonBarSubmitButton$1, PageSectionTitle as PageSectionTitle$1, ButtonBar as ButtonBar$1, ButtonBarDialogButton as ButtonBarDialogButton$1, TableRowActionButton as TableRowActionButton$1, DialogButton as DialogButton$1 } from '@compill/admin';
 import { toast } from 'react-toastify';
-import { SubmitButton, FormProvider, TextArea, FormRenderer, mergeInitialFormValues, FieldLabel } from '@compill/form';
-import { useFormikContext, Field, Formik, Form } from 'formik';
 import 'react/jsx-runtime';
 import { FlexCenter, QueryLoadingState, RetryOnError, TabContainer, ModalLoadingOverlay } from '@compill/components';
+import { FormProvider, TextArea, FormRenderer, mergeInitialFormValues, FieldLabel, SubmitButton } from '@compill/form';
 import { createContext as createContext$1, runIfFn, isFunction } from '@soperio/react';
 import { Editor } from '@compill/editor';
-import { PageSectionTitle as PageSectionTitle$1, ButtonBarDialogButton as ButtonBarDialogButton$1, TableRowActionButton as TableRowActionButton$1, DialogButton as DialogButton$1 } from '@compill/admin';
 import { createPortal } from 'react-dom';
 import { useRouter } from 'next/router';
 import { TableContextProvider, useTableContext, Table } from '@compill/table';
@@ -195,6 +195,43 @@ const ButtonBarButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }), children]
   }));
 });
+const ButtonBarSubmitButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _b;
+  var {
+      useDirty,
+      disabled,
+      icon,
+      children
+    } = _a,
+    props = __rest$1(_a, ["useDirty", "disabled", "icon", "children"]);
+  const {
+    dirty,
+    handleSubmit
+  } = (_b = useFormikContext()) !== null && _b !== void 0 ? _b : {
+    dirty: false,
+    handleSubmit: undefined,
+    values: {}
+  };
+  const onSubmit = React.useCallback(() => handleSubmit(), [handleSubmit]);
+  return jsxs(Button, Object.assign({
+    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]
+  }));
+});
 function ButtonBarDialogButton(_a) {
   var {
       icon,
@@ -275,20 +312,12 @@ function PublishButton(_a) {
     mutation.reset();
     mutation.mutateAsync(queryId).then(() => toast.success(isDraft ? "Published!" : "Unpublished!")).catch(error => toast.error(`Error: ${error}`));
   }, [mutation, queryId]);
-  return jsxs(Button, Object.assign({
-    scheme: "secondary",
-    variant: "glass",
-    size: "sm",
-    px: "3",
+  return jsx(ButtonBarButton$1, Object.assign({
     disabled: mutation.isLoading,
     onClick: publish,
-    dflex: true,
-    alignItems: "center",
-    gap: "3"
+    icon: isDraft ? mdiEye : mdiEyeOff
   }, props, {
-    children: [jsx(Icon, {
-      path: isDraft ? mdiEye : mdiEyeOff
-    }), isDraft ? "Publish" : "Switch to draft"]
+    children: isDraft ? "Publish" : "Switch to draft"
   }));
 }
 
@@ -695,17 +724,10 @@ function UpdateButton(_a) {
   }, {
     preventDefault: true
   }, [dirty, props, handleSubmit]);
-  return jsxs(SubmitButton, Object.assign({
-    type: "submit",
-    size: "sm",
-    px: "3",
-    dflex: true,
-    alignItems: "center",
-    gap: "3"
+  return jsx(ButtonBarSubmitButton$1, Object.assign({
+    icon: mdiCloudUpload
   }, props, {
-    children: [jsx(Icon, {
-      path: mdiCloudUpload
-    }), "Update"]
+    children: "Update"
   }));
 }
 
@@ -1109,13 +1131,15 @@ function Buttons$1({
       }), button.type === "invalidate" && jsx(InvalidateButton, {
         pathOrPermalink: button.pathOrPermalink
       }), button.type == "custom" && button.render(item)]
-    }, index)), jsx(PublishButton, {
-      api: api,
-      queryId: item.id,
-      status: item.status,
-      disabled: isLoading
-    }), jsx(UpdateButton, {
-      disabled: isLoading
+    }, index)), jsxs(ButtonBar$1, {
+      children: [api instanceof API && jsx(PublishButton, {
+        api: api,
+        queryId: item.id,
+        status: item.status,
+        disabled: isLoading
+      }), jsx(UpdateButton, {
+        disabled: isLoading
+      })]
     })]
   });
 }
@@ -2227,6 +2251,7 @@ function ItemDeleteDialog(_a) {
       itemLabel,
       queryId = "",
       api,
+      apiFn,
       invalidateQueriesOnSuccess = true,
       invalidateQueryKey,
       size = "lg",
@@ -2235,8 +2260,9 @@ function ItemDeleteDialog(_a) {
       show,
       onClose
     } = _a,
-    props = __rest$1(_a, ["itemLabel", "queryId", "api", "invalidateQueriesOnSuccess", "invalidateQueryKey", "size", "md_boxSizing", "msg", "show", "onClose"]);
-  const mutation = invalidateQueriesOnSuccess ? useInvalidateParentMutation(api.delete, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api.queryKey) : useApiMutation(api.delete, api.queryKey);
+    props = __rest$1(_a, ["itemLabel", "queryId", "api", "apiFn", "invalidateQueriesOnSuccess", "invalidateQueryKey", "size", "md_boxSizing", "msg", "show", "onClose"]);
+  const fn = apiFn ? api[apiFn] : api.delete;
+  const mutation = invalidateQueriesOnSuccess ? useInvalidateParentMutation(fn, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api.queryKey) : useApiMutation(fn, api.queryKey);
   const mutate = useMutate(mutation, {
     onSuccess: () => onClose === null || onClose === void 0 ? void 0 : onClose()
   });
@@ -3636,4 +3662,4 @@ function TableRowPublishPostButton(_a) {
   }, props));
 }
 
-export { AdminLayout, AttachDialog, Breadcrumbs, ButtonBar, ButtonBarButton, ButtonBarDialogButton, DialogButton, FormActionDialog, InvalidateButton, ItemDeleteDialog, ItemEditDialog, Menu, NavigateButton, OrderCell, PageContainer, PageContentEditor, PageMain, PageQueryStateContainer, PageSectionTitle, PageSidebar, PageSidebarSection, PageStateContainer, PageSubSectionTitle, PageTabbedTopBar, PageTabbedTopBarProvider, PageTitle, PageTopBar, PageTopBarToolbar, PublishButton, ScreenRenderer, SectionTitle, StatusBadge, TableContainer, TableCreateButton, TableFilterButton, TableRowActionBar, TableRowActionButton, TableRowActionDialogButton, TableRowDeleteButton, TableRowEditButton, TableRowNavigateButton, TableRowPublishPostButton, TableRowViewButton, TableTopBar, UpdateButton, ViewButton };
+export { AdminLayout, AttachDialog, Breadcrumbs, ButtonBar, ButtonBarButton, ButtonBarDialogButton, ButtonBarSubmitButton, DialogButton, FormActionDialog, InvalidateButton, ItemDeleteDialog, ItemEditDialog, Menu, NavigateButton, OrderCell, PageContainer, PageContentEditor, PageMain, PageQueryStateContainer, PageSectionTitle, PageSidebar, PageSidebarSection, PageStateContainer, PageSubSectionTitle, PageTabbedTopBar, PageTabbedTopBarProvider, PageTitle, PageTopBar, PageTopBarToolbar, PublishButton, ScreenRenderer, SectionTitle, StatusBadge, TableContainer, TableCreateButton, TableFilterButton, TableRowActionBar, TableRowActionButton, TableRowActionDialogButton, TableRowDeleteButton, TableRowEditButton, TableRowNavigateButton, TableRowPublishPostButton, TableRowViewButton, TableTopBar, UpdateButton, ViewButton };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@compill/admin",
-    "version": "1.0.73",
+    "version": "1.0.75",
     "module": "./index.esm.js",
     "main": "./index.cjs.js"
 }

package/src/lib/json/ScreenTopBar.d.ts

@@ -2,11 +2,12 @@
 import { API } from "@compill/admin-api";
 import { Breadcrumb } from "../breadcrumbs/BreadCrumbs";
 import { DetailViewButton } from "./types/DetailsView";
+import { CRUDAPI } from "@compill/api";
 interface ScreenTopBarProps {
     tabbed?: boolean;
     breadcrumbs?: Breadcrumb[];
     buttonBar?: DetailViewButton[];
-    api: API<any>;
+    api: CRUDAPI<any> | API<any>;
     item: any;
     isLoading: boolean;
     trackingRef?: Element | null;

package/src/lib/json/dialog/ItemDeleteDialog.d.ts

@@ -5,8 +5,9 @@ export interface ItemDeleteDialogProps extends ModalProps {
     itemLabel: string;
     queryId: string;
     api: CRUDAPI<any>;
+    apiFn?: string;
     invalidateQueriesOnSuccess?: boolean;
     invalidateQueryKey?: string[];
     msg?: (itemLabel: string) => string | React.ReactNode;
 }
-export declare function ItemDeleteDialog({ itemLabel, queryId, api, invalidateQueriesOnSuccess, invalidateQueryKey, size, md_boxSizing, msg, show, onClose, ...props }: ItemDeleteDialogProps): JSX.Element;
+export declare function ItemDeleteDialog({ itemLabel, queryId, api, apiFn, invalidateQueriesOnSuccess, invalidateQueryKey, size, md_boxSizing, msg, show, onClose, ...props }: ItemDeleteDialogProps): JSX.Element;

package/src/lib/json/types/DetailsView.d.ts

@@ -3,9 +3,10 @@ import { API } from "@compill/admin-api";
 import * as Yup from "yup";
 import { Breadcrumb } from "../../breadcrumbs/BreadCrumbs";
 import { FormRendererConfig } from "@compill/form";
+import { CRUDAPI } from "@compill/api";
 export type DetailsViewConfig<T = any> = {
     type: "details";
-    api: API<T>;
+    api: CRUDAPI<T> | API<T>;
     queryField: string;
     useNextRouter?: boolean;
     processInput?: (input: T) => any;

package/src/lib/layout/ButtonBar.d.ts

@@ -9,6 +9,10 @@ export type ButtonBarButtonProps = {
 export declare const ButtonBarButton: React.ForwardRefExoticComponent<{
     icon?: string | undefined;
 } & ButtonProps & React.RefAttributes<HTMLDivElement>>;
+export interface ButtonBarSubmitButtonProps extends ButtonBarButtonProps {
+    useDirty?: boolean;
+}
+export declare const ButtonBarSubmitButton: React.ForwardRefExoticComponent<ButtonBarSubmitButtonProps & React.RefAttributes<HTMLDivElement>>;
 export type ButtonBarDialogButtonProps = {
     icon?: string;
 } & DialogButtonProps;