@simplysm/solid 13.0.74 → 13.0.76

package/src/components/features/crud-detail/CrudDetail.tsx

@@ -1,6 +1,4 @@
 import {
-  children,
-  createMemo,
   createSignal,
   createUniqueId,
   type JSX,
@@ -15,15 +13,15 @@ import { reconcile, unwrap } from "solid-js/store";
 import { createControllableStore } from "../../../hooks/createControllableStore";
 import { objClone, objEqual } from "@simplysm/core-common";
 import { BusyContainer } from "../../feedback/busy/BusyContainer";
-import { useNotification } from "../../feedback/notification/NotificationContext";
+import { useNotification } from "../../feedback/notification/NotificationProvider";
 import { Button } from "../../form-control/Button";
 import { Icon } from "../../display/Icon";
-import { createTopbarActions, TopbarContext } from "../../layout/topbar/TopbarContext";
-import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
+import { createTopbarActions, TopbarContext } from "../../layout/topbar/Topbar";
 import { Dialog } from "../../disclosure/Dialog";
 import { createEventListener } from "@solid-primitives/event-listener";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 import clsx from "clsx";
+import { border, text } from "../../../styles/base.styles";
 import {
   IconCheck,
   IconDeviceFloppy,
@@ -31,16 +29,13 @@ import {
   IconTrash,
   IconTrashOff,
 } from "@tabler/icons-solidjs";
-import { CrudDetailTools, isCrudDetailToolsDef } from "./CrudDetailTools";
-import { CrudDetailBefore, isCrudDetailBeforeDef } from "./CrudDetailBefore";
-import { CrudDetailAfter, isCrudDetailAfterDef } from "./CrudDetailAfter";
+import { CrudDetailTools, createCrudDetailToolsSlotAccessor } from "./CrudDetailTools";
+import { CrudDetailBefore, createCrudDetailBeforeSlotAccessor } from "./CrudDetailBefore";
+import { CrudDetailAfter, createCrudDetailAfterSlotAccessor } from "./CrudDetailAfter";
 import type {
-  CrudDetailAfterDef,
-  CrudDetailBeforeDef,
   CrudDetailContext,
   CrudDetailInfo,
   CrudDetailProps,
-  CrudDetailToolsDef,
 } from "./types";
 
 interface CrudDetailComponent {
@@ -60,15 +55,14 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
     "deletable",
     "data",
     "onDataChange",
+    "close",
     "class",
   ]);
 
   const noti = useNotification();
   const i18n = useI18n();
   const topbarCtx = useContext(TopbarContext);
-  const dialogInstance = useDialogInstance<boolean>();
-
-  const isInDialog = dialogInstance !== undefined;
+  const isInDialog = local.close !== undefined;
 
   const canEdit = () => local.editable ?? true;
 
@@ -87,6 +81,11 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
 
   const crudId = createUniqueId();
 
+  // -- Slot Accessors --
+  const [tools, ToolsProvider] = createCrudDetailToolsSlotAccessor();
+  const [before, BeforeProvider] = createCrudDetailBeforeSlotAccessor();
+  const [after, AfterProvider] = createCrudDetailAfterSlotAccessor();
+
   // -- Load --
   async function doLoad() {
     setBusyCount((c) => c + 1);
@@ -140,8 +139,8 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
       const result = await local.submit(objClone(unwrap(data)));
       if (result) {
         noti.success(i18n.t("crudDetail.saveCompleted"), i18n.t("crudDetail.saveSuccess"));
-        if (dialogInstance) {
-          dialogInstance.close(true);
+        if (local.close) {
+          local.close(true);
         } else {
           await doLoad();
         }
@@ -172,8 +171,8 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
       const result = await local.toggleDelete(del);
       if (result) {
         noti.success(del ? i18n.t("crudDetail.deleteCompleted") : i18n.t("crudDetail.restoreCompleted"), del ? i18n.t("crudDetail.deleteSuccess") : i18n.t("crudDetail.restoreSuccess"));
-        if (dialogInstance) {
-          dialogInstance.close(true);
+        if (local.close) {
+          local.close(true);
         } else {
           await doLoad();
         }
@@ -250,141 +249,129 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
     refresh: handleRefresh,
   };
 
-  // -- Children Resolution --
-  const rendered = children(() => local.children(ctx));
-  const defs = createMemo(() => {
-    const arr = rendered.toArray();
-    return {
-      tools: arr.find(isCrudDetailToolsDef) as CrudDetailToolsDef | undefined,
-      before: arr.find(isCrudDetailBeforeDef) as CrudDetailBeforeDef | undefined,
-      after: arr.find(isCrudDetailAfterDef) as CrudDetailAfterDef | undefined,
-    };
-  });
-
-  const formContent = () =>
-    rendered
-      .toArray()
-      .filter(
-        (el) =>
-          !isCrudDetailToolsDef(el) && !isCrudDetailBeforeDef(el) && !isCrudDetailAfterDef(el),
-      );
-
   // -- Render --
   return (
-    <>
-      {/* Dialog mode: Dialog.Action (refresh button in header) */}
-      <Show when={isInDialog}>
-        <Dialog.Action>
-          <Button size={"sm"} variant={"ghost"} onClick={() => void handleRefresh()}>
-            <Icon icon={IconRefresh} />
-          </Button>
-        </Dialog.Action>
-      </Show>
-
-      <BusyContainer
-        ready={ready()}
-        busy={busyCount() > 0}
-        class={clsx("flex h-full flex-col gap-2", local.class)}
-      >
-        {/* Toolbar */}
-        <Show when={(!isInDialog && !topbarCtx) || defs().tools}>
-          <div class="flex gap-2 pb-0">
-            <Show when={!topbarCtx && !isInDialog}>
-              <Show when={canEdit() && local.submit}>
-                <Button
-                  size="sm"
-                  theme="primary"
-                  variant="ghost"
-                  onClick={() => formRef?.requestSubmit()}
-                >
-                  <Icon icon={IconDeviceFloppy} class="mr-1" />
-                  {i18n.t("crudDetail.save")}
-                </Button>
-              </Show>
-              <Show
-                when={
-                  canEdit() &&
-                  local.toggleDelete &&
-                  info() &&
-                  !info()!.isNew &&
-                  (local.deletable ?? true)
-                }
-              >
-                {(_) => (
-                  <Button
-                    size="sm"
-                    theme="danger"
-                    variant="ghost"
-                    onClick={() => void handleToggleDelete()}
+    <ToolsProvider>
+      <BeforeProvider>
+        <AfterProvider>
+          {/* Dialog mode: Dialog.Action (refresh button in header) */}
+          <Show when={isInDialog}>
+            <Dialog.Action>
+              <Button size={"sm"} variant={"ghost"} onClick={() => void handleRefresh()}>
+                <Icon icon={IconRefresh} />
+              </Button>
+            </Dialog.Action>
+          </Show>
+
+          <BusyContainer
+            ready={ready()}
+            busy={busyCount() > 0}
+            class={clsx("flex h-full flex-col gap-2", local.class)}
+          >
+            {/* Toolbar */}
+            <Show when={(!isInDialog && !topbarCtx) || tools()}>
+              <div class="flex gap-2 pb-0">
+                <Show when={!topbarCtx && !isInDialog}>
+                  <Show when={canEdit() && local.submit}>
+                    <Button
+                      size="sm"
+                      theme="primary"
+                      variant="ghost"
+                      onClick={() => formRef?.requestSubmit()}
+                    >
+                      <Icon icon={IconDeviceFloppy} class="mr-1" />
+                      {i18n.t("crudDetail.save")}
+                    </Button>
+                  </Show>
+                  <Show
+                    when={
+                      canEdit() &&
+                      local.toggleDelete &&
+                      info() &&
+                      !info()!.isNew &&
+                      (local.deletable ?? true)
+                    }
                   >
-                    <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
-                    {info()!.isDeleted ? i18n.t("crudDetail.restore") : i18n.t("crudDetail.delete")}
+                    {(_) => (
+                      <Button
+                        size="sm"
+                        theme="danger"
+                        variant="ghost"
+                        onClick={() => void handleToggleDelete()}
+                      >
+                        <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
+                        {info()!.isDeleted ? i18n.t("crudDetail.restore") : i18n.t("crudDetail.delete")}
+                      </Button>
+                    )}
+                  </Show>
+                  <Button size="sm" theme="info" variant="ghost" onClick={() => void handleRefresh()}>
+                    <Icon icon={IconRefresh} class="mr-1" />
+                    {i18n.t("crudDetail.refresh")}
                   </Button>
-                )}
-              </Show>
-              <Button size="sm" theme="info" variant="ghost" onClick={() => void handleRefresh()}>
-                <Icon icon={IconRefresh} class="mr-1" />
-                {i18n.t("crudDetail.refresh")}
-              </Button>
+                </Show>
+                <Show when={tools()}>{(toolsSlot) => toolsSlot().children}</Show>
+              </div>
             </Show>
-            <Show when={defs().tools}>{(toolsDef) => toolsDef().children}</Show>
-          </div>
-        </Show>
 
-        {/* Before (outside form) */}
-        <Show when={defs().before}>{(beforeDef) => beforeDef().children}</Show>
+            {/* Before (outside form) */}
+            <Show when={before()}>{(beforeSlot) => beforeSlot().children}</Show>
 
-        {/* Form */}
-        <form ref={(el) => { formRef = el; registerCrud(crudId, el); }} class="flex-1 overflow-auto" onSubmit={handleFormSubmit}>
-          {formContent()}
-        </form>
+            {/* Form */}
+            <form ref={(el) => { formRef = el; registerCrud(crudId, el); }} class="flex-1 overflow-auto" onSubmit={handleFormSubmit}>
+              {local.children(ctx)}
+            </form>
 
-        {/* Last modified info */}
-        <Show when={info()?.lastModifiedAt}>
-          {(_) => (
-            <div class="px-2 pb-1 text-xs text-base-400">
-              {i18n.t("crudDetail.lastModified")}: {info()!.lastModifiedAt!.toFormatString("yyyy-MM-dd HH:mm")}
-              <Show when={info()?.lastModifiedBy}> ({info()!.lastModifiedBy})</Show>
-            </div>
-          )}
-        </Show>
-
-        {/* After (outside form) */}
-        <Show when={defs().after}>{(afterDef) => afterDef().children}</Show>
-
-        {/* Dialog mode: bottom bar */}
-        <Show when={isInDialog && canEdit()}>
-          <div class="flex gap-2 border-t border-base-200 px-3 py-1.5">
-            <div class="flex-1" />
-            <Show
-              when={local.toggleDelete && info() && !info()!.isNew && (local.deletable ?? true)}
-            >
+            {/* Last modified info */}
+            <Show when={info()?.lastModifiedAt}>
               {(_) => (
-                <Button variant={"solid"} theme="danger" onClick={() => void handleToggleDelete()}>
-                  <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
-                  {info()!.isDeleted ? i18n.t("crudDetail.restore") : i18n.t("crudDetail.delete")}
-                </Button>
+                <div class={clsx("px-2 pb-1 text-xs", text.muted)}>
+                  {i18n.t("crudDetail.lastModified")}: {info()!.lastModifiedAt!.toFormatString("yyyy-MM-dd HH:mm")}
+                  <Show when={info()?.lastModifiedBy}> ({info()!.lastModifiedBy})</Show>
+                </div>
               )}
             </Show>
-            <Show when={local.submit}>
-              <Button
-                variant={"solid"}
-                theme="primary"
-                onClick={() => formRef?.requestSubmit()}
-                class={"gap-1"}
-              >
-                <Icon icon={IconCheck} />
-                {i18n.t("crudDetail.confirm")}
-              </Button>
+
+            {/* After (outside form) */}
+            <Show when={after()}>{(afterSlot) => afterSlot().children}</Show>
+
+            {/* Dialog mode: bottom bar */}
+            <Show when={isInDialog && canEdit()}>
+              <div class={clsx("flex gap-2 border-t px-3 py-1.5", border.default)}>
+                <div class="flex-1" />
+                <Show
+                  when={local.toggleDelete && info() && !info()!.isNew && (local.deletable ?? true)}
+                >
+                  {(_) => (
+                    <Button variant={"solid"} theme="danger" onClick={() => void handleToggleDelete()}>
+                      <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
+                      {info()!.isDeleted ? i18n.t("crudDetail.restore") : i18n.t("crudDetail.delete")}
+                    </Button>
+                  )}
+                </Show>
+                <Show when={local.submit}>
+                  <Button
+                    variant={"solid"}
+                    theme="primary"
+                    onClick={() => formRef?.requestSubmit()}
+                    class={"gap-1"}
+                  >
+                    <Icon icon={IconCheck} />
+                    {i18n.t("crudDetail.confirm")}
+                  </Button>
+                </Show>
+              </div>
             </Show>
-          </div>
-        </Show>
-      </BusyContainer>
-    </>
+          </BusyContainer>
+        </AfterProvider>
+      </BeforeProvider>
+    </ToolsProvider>
   );
 };
 
-export const CrudDetail = CrudDetailBase as unknown as CrudDetailComponent;
-CrudDetail.Tools = CrudDetailTools;
-CrudDetail.Before = CrudDetailBefore;
-CrudDetail.After = CrudDetailAfter;
+//#region Export
+export const CrudDetail = Object.assign(CrudDetailBase, {
+  Tools: CrudDetailTools,
+  Before: CrudDetailBefore,
+  After: CrudDetailAfter,
+}) as unknown as CrudDetailComponent;
+//#endregion

package/src/components/features/crud-detail/CrudDetailAfter.tsx

@@ -1,19 +1,6 @@
 import type { JSX } from "solid-js";
-import type { CrudDetailAfterDef } from "./types";
+import { createSlot } from "../../../helpers/createSlot";
 
-export function isCrudDetailAfterDef(value: unknown): value is CrudDetailAfterDef {
-  return (
-    value != null &&
-    typeof value === "object" &&
-    (value as Record<string, unknown>)["__type"] === "crud-detail-after"
-  );
-}
+const [CrudDetailAfter, createCrudDetailAfterSlotAccessor] = createSlot<{ children: JSX.Element }>();
 
-/* eslint-disable solid/reactivity -- plain object return pattern does not require reactive context */
-export function CrudDetailAfter(props: { children: JSX.Element }): JSX.Element {
-  return {
-    __type: "crud-detail-after",
-    children: props.children,
-  } as unknown as JSX.Element;
-}
-/* eslint-enable solid/reactivity */
+export { CrudDetailAfter, createCrudDetailAfterSlotAccessor };

package/src/components/features/crud-detail/CrudDetailBefore.tsx

@@ -1,19 +1,6 @@
 import type { JSX } from "solid-js";
-import type { CrudDetailBeforeDef } from "./types";
+import { createSlot } from "../../../helpers/createSlot";
 
-export function isCrudDetailBeforeDef(value: unknown): value is CrudDetailBeforeDef {
-  return (
-    value != null &&
-    typeof value === "object" &&
-    (value as Record<string, unknown>)["__type"] === "crud-detail-before"
-  );
-}
+const [CrudDetailBefore, createCrudDetailBeforeSlotAccessor] = createSlot<{ children: JSX.Element }>();
 
-/* eslint-disable solid/reactivity -- plain object return pattern does not require reactive context */
-export function CrudDetailBefore(props: { children: JSX.Element }): JSX.Element {
-  return {
-    __type: "crud-detail-before",
-    children: props.children,
-  } as unknown as JSX.Element;
-}
-/* eslint-enable solid/reactivity */
+export { CrudDetailBefore, createCrudDetailBeforeSlotAccessor };

package/src/components/features/crud-detail/CrudDetailTools.tsx

@@ -1,19 +1,6 @@
 import type { JSX } from "solid-js";
-import type { CrudDetailToolsDef } from "./types";
+import { createSlot } from "../../../helpers/createSlot";
 
-export function isCrudDetailToolsDef(value: unknown): value is CrudDetailToolsDef {
-  return (
-    value != null &&
-    typeof value === "object" &&
-    (value as Record<string, unknown>)["__type"] === "crud-detail-tools"
-  );
-}
+const [CrudDetailTools, createCrudDetailToolsSlotAccessor] = createSlot<{ children: JSX.Element }>();
 
-/* eslint-disable solid/reactivity -- plain object return pattern does not require reactive context */
-export function CrudDetailTools(props: { children: JSX.Element }): JSX.Element {
-  return {
-    __type: "crud-detail-tools",
-    children: props.children,
-  } as unknown as JSX.Element;
-}
-/* eslint-enable solid/reactivity */
+export { CrudDetailTools, createCrudDetailToolsSlotAccessor };

package/src/components/features/crud-detail/types.ts

@@ -37,22 +37,9 @@ export interface CrudDetailProps<TData extends object> {
   data?: TData;
   onDataChange?: (data: TData) => void;
 
-  class?: string;
-}
+  /** Close dialog with result (injected by DialogProvider when in dialog mode) */
+  close?: (result?: boolean) => void;
 
-// ── Sub-component Defs ──
-
-export interface CrudDetailToolsDef {
-  __type: "crud-detail-tools";
-  children: JSX.Element;
-}
-
-export interface CrudDetailBeforeDef {
-  __type: "crud-detail-before";
-  children: JSX.Element;
+  class?: string;
 }
 
-export interface CrudDetailAfterDef {
-  __type: "crud-detail-after";
-  children: JSX.Element;
-}