@simplysm/solid 13.0.76 → 13.0.77

package/src/components/display/Barcode.types.ts

@@ -0,0 +1,111 @@
+export type BarcodeType =
+  | "auspost"
+  | "azteccode"
+  | "azteccodecompact"
+  | "aztecrune"
+  | "bc412"
+  | "channelcode"
+  | "codablockf"
+  | "code11"
+  | "code128"
+  | "code16k"
+  | "code2of5"
+  | "code32"
+  | "code39"
+  | "code39ext"
+  | "code49"
+  | "code93"
+  | "code93ext"
+  | "codeone"
+  | "coop2of5"
+  | "daft"
+  | "databarexpanded"
+  | "databarexpandedcomposite"
+  | "databarexpandedstacked"
+  | "databarexpandedstackedcomposite"
+  | "databarlimited"
+  | "databarlimitedcomposite"
+  | "databaromni"
+  | "databaromnicomposite"
+  | "databarstacked"
+  | "databarstackedcomposite"
+  | "databarstackedomni"
+  | "databarstackedomnicomposite"
+  | "databartruncated"
+  | "databartruncatedcomposite"
+  | "datalogic2of5"
+  | "datamatrix"
+  | "datamatrixrectangular"
+  | "datamatrixrectangularextension"
+  | "dotcode"
+  | "ean13"
+  | "ean13composite"
+  | "ean14"
+  | "ean2"
+  | "ean5"
+  | "ean8"
+  | "ean8composite"
+  | "flattermarken"
+  | "gs1-128"
+  | "gs1-128composite"
+  | "gs1-cc"
+  | "gs1datamatrix"
+  | "gs1datamatrixrectangular"
+  | "gs1dldatamatrix"
+  | "gs1dlqrcode"
+  | "gs1dotcode"
+  | "gs1northamericancoupon"
+  | "gs1qrcode"
+  | "hanxin"
+  | "hibcazteccode"
+  | "hibccodablockf"
+  | "hibccode128"
+  | "hibccode39"
+  | "hibcdatamatrix"
+  | "hibcdatamatrixrectangular"
+  | "hibcmicropdf417"
+  | "hibcpdf417"
+  | "hibcqrcode"
+  | "iata2of5"
+  | "identcode"
+  | "industrial2of5"
+  | "interleaved2of5"
+  | "isbn"
+  | "ismn"
+  | "issn"
+  | "itf14"
+  | "japanpost"
+  | "kix"
+  | "leitcode"
+  | "mailmark"
+  | "mands"
+  | "matrix2of5"
+  | "maxicode"
+  | "micropdf417"
+  | "microqrcode"
+  | "msi"
+  | "onecode"
+  | "pdf417"
+  | "pdf417compact"
+  | "pharmacode"
+  | "pharmacode2"
+  | "planet"
+  | "plessey"
+  | "posicode"
+  | "postnet"
+  | "pzn"
+  | "qrcode"
+  | "rationalizedCodabar"
+  | "raw"
+  | "rectangularmicroqrcode"
+  | "royalmail"
+  | "sscc18"
+  | "swissqrcode"
+  | "symbol"
+  | "telepen"
+  | "telepennumeric"
+  | "ultracode"
+  | "upca"
+  | "upcacomposite"
+  | "upce"
+  | "upcecomposite";

package/src/components/display/Echarts.tsx

@@ -3,34 +3,33 @@ import {
   createEffect,
   createSignal,
   onCleanup,
+  onMount,
   splitProps,
   type JSX,
 } from "solid-js";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
-import type * as echartsType from "echarts";
+import * as echarts from "echarts";
 import { twMerge } from "tailwind-merge";
 
 export interface EchartsProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  option: echartsType.EChartsOption;
+  option: echarts.EChartsOption;
   busy?: boolean;
 }
 
 export const Echarts: Component<EchartsProps> = (props) => {
   const [local, rest] = splitProps(props, ["option", "busy", "class"]);
   let containerRef!: HTMLDivElement;
-  let chart: echartsType.EChartsType | undefined;
+  let chart: echarts.EChartsType | undefined;
   const [ready, setReady] = createSignal(false);
 
-  // On mount, dynamically load echarts + initialize chart
-  createEffect(() => {
-    void import("echarts").then((echarts) => {
-      chart = echarts.init(containerRef, null, { renderer: "svg" });
-      setReady(true);
-    });
-
-    onCleanup(() => chart?.dispose());
+  // Initialize chart on mount
+  onMount(() => {
+    chart = echarts.init(containerRef, null, { renderer: "svg" });
+    setReady(true);
   });
 
+  onCleanup(() => chart?.dispose());
+
   // Detect option changes
   createEffect(() => {
     if (!ready()) return;

package/src/components/features/address/AddressSearch.tsx

@@ -7,6 +7,21 @@ export interface AddressSearchResult {
   buildingName: string | undefined;
 }
 
+interface DaumPostcodeResult {
+  userSelectedType: "R" | "J";
+  roadAddress: string;
+  jibunAddress: string;
+  zonecode: string;
+  bname: string;
+  buildingName: string;
+  apartment: "Y" | "N";
+}
+
+interface DaumPostcodeSize {
+  width: number;
+  height: number;
+}
+
 export const AddressSearchContent: Component<{
   close?: (result?: AddressSearchResult) => void;
 }> = (props) => {
@@ -15,7 +30,7 @@ export const AddressSearchContent: Component<{
 
   onMount(async () => {
     if (!document.getElementById("daum_address")) {
-      await new Promise<void>((resolve) => {
+      await new Promise<void>((resolve, reject) => {
         const scriptEl = document.createElement("script");
         scriptEl.src = "//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js";
         scriptEl.setAttribute("id", "daum_address");
@@ -26,13 +41,16 @@ export const AddressSearchContent: Component<{
             resolve();
           });
         };
+        scriptEl.onerror = () => {
+          reject(new Error("Failed to load Daum postcode script"));
+        };
         document.head.appendChild(scriptEl);
       });
     }
 
     // @ts-expect-error -- Daum Postcode global API
     new daum.Postcode({
-      oncomplete: (data: any): void => {
+      oncomplete: (data: DaumPostcodeResult): void => {
         const addr = data.userSelectedType === "R" ? data.roadAddress : data.jibunAddress;
 
         let extraAddr = "";
@@ -56,7 +74,7 @@ export const AddressSearchContent: Component<{
           buildingName: data.buildingName,
         });
       },
-      onresize: (size: any): void => {
+      onresize: (size: DaumPostcodeSize): void => {
         contentEl.style.height = size.height + "px";
       },
       width: "100%",

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

@@ -1,7 +1,6 @@
 import {
   createSignal,
   createUniqueId,
-  type JSX,
   onCleanup,
   onMount,
   Show,
@@ -11,12 +10,12 @@ import {
 import { registerCrud, unregisterCrud, activateCrud, isActiveCrud } from "../crudRegistry";
 import { reconcile, unwrap } from "solid-js/store";
 import { createControllableStore } from "../../../hooks/createControllableStore";
-import { objClone, objEqual } from "@simplysm/core-common";
+import { obj } from "@simplysm/core-common";
 import { BusyContainer } from "../../feedback/busy/BusyContainer";
 import { useNotification } from "../../feedback/notification/NotificationProvider";
 import { Button } from "../../form-control/Button";
 import { Icon } from "../../display/Icon";
-import { createTopbarActions, TopbarContext } from "../../layout/topbar/Topbar";
+import { useTopbarActions, TopbarContext } from "../../layout/topbar/Topbar";
 import { Dialog } from "../../disclosure/Dialog";
 import { createEventListener } from "@solid-primitives/event-listener";
 import { useI18n } from "../../../providers/i18n/I18nProvider";
@@ -36,14 +35,7 @@ import type {
   CrudDetailContext,
   CrudDetailInfo,
   CrudDetailProps,
-} from "./types";
-
-interface CrudDetailComponent {
-  <TData extends object>(props: CrudDetailProps<TData>): JSX.Element;
-  Tools: typeof CrudDetailTools;
-  Before: typeof CrudDetailBefore;
-  After: typeof CrudDetailAfter;
-}
+} from "./CrudDetail.types";
 
 const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) => {
   const [local] = splitProps(props, [
@@ -92,13 +84,14 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
     try {
       const result = await local.load();
       setData(reconcile(result.data) as any);
-      originalData = objClone(result.data);
+      originalData = obj.clone(result.data);
       setInfo(result.info);
+      setReady(true);
     } catch (err) {
       noti.error(err, i18n.t("crudDetail.lookupFailed"));
+    } finally {
+      setBusyCount((c) => c - 1);
     }
-    setBusyCount((c) => c - 1);
-    setReady(true);
   }
 
   onMount(() => {
@@ -112,7 +105,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
   // -- Change Detection --
   function hasChanges(): boolean {
     if (originalData == null) return false;
-    return !objEqual(unwrap(data) as unknown, originalData as unknown);
+    return !obj.equal(unwrap(data) as unknown, originalData as unknown);
   }
 
   // -- Refresh --
@@ -136,7 +129,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
 
     setBusyCount((c) => c + 1);
     try {
-      const result = await local.submit(objClone(unwrap(data)));
+      const result = await local.submit(obj.clone(unwrap(data)));
       if (result) {
         noti.success(i18n.t("crudDetail.saveCompleted"), i18n.t("crudDetail.saveSuccess"));
         if (local.close) {
@@ -198,11 +191,15 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
     }
   });
 
+  const showSave = () => canEdit() && local.submit;
+  const showDelete = () =>
+    canEdit() && local.toggleDelete && info() && !info()!.isNew && (local.deletable ?? true);
+
   // -- Topbar Actions (Page mode) --
   if (topbarCtx) {
-    createTopbarActions(() => (
+    useTopbarActions(() => (
       <>
-        <Show when={canEdit() && local.submit}>
+        <Show when={showSave()}>
           <Button
             size="lg"
             variant="ghost"
@@ -213,11 +210,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
             {i18n.t("crudDetail.save")}
           </Button>
         </Show>
-        <Show
-          when={
-            canEdit() && local.toggleDelete && info() && !info()!.isNew && (local.deletable ?? true)
-          }
-        >
+        <Show when={showDelete()}>
           {(_) => (
             <Button
               size="lg"
@@ -272,7 +265,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
             <Show when={(!isInDialog && !topbarCtx) || tools()}>
               <div class="flex gap-2 pb-0">
                 <Show when={!topbarCtx && !isInDialog}>
-                  <Show when={canEdit() && local.submit}>
+                  <Show when={showSave()}>
                     <Button
                       size="sm"
                       theme="primary"
@@ -283,15 +276,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
                       {i18n.t("crudDetail.save")}
                     </Button>
                   </Show>
-                  <Show
-                    when={
-                      canEdit() &&
-                      local.toggleDelete &&
-                      info() &&
-                      !info()!.isNew &&
-                      (local.deletable ?? true)
-                    }
-                  >
+                  <Show when={showDelete()}>
                     {(_) => (
                       <Button
                         size="sm"
@@ -338,9 +323,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
             <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)}
-                >
+                <Show when={showDelete()}>
                   {(_) => (
                     <Button variant={"solid"} theme="danger" onClick={() => void handleToggleDelete()}>
                       <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
@@ -348,7 +331,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
                     </Button>
                   )}
                 </Show>
-                <Show when={local.submit}>
+                <Show when={showSave()}>
                   <Button
                     variant={"solid"}
                     theme="primary"
@@ -373,5 +356,5 @@ export const CrudDetail = Object.assign(CrudDetailBase, {
   Tools: CrudDetailTools,
   Before: CrudDetailBefore,
   After: CrudDetailAfter,
-}) as unknown as CrudDetailComponent;
+});
 //#endregion