@simplysm/solid 13.0.53 → 13.0.56

package/src/components/layout/topbar/TopbarUser.tsx

@@ -50,16 +50,9 @@ export const TopbarUser: ParentComponent<TopbarUserProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "menus"]);
 
   const [open, setOpen] = createSignal(false);
-  let buttonRef: HTMLButtonElement | undefined;
 
   const hasMenus = () => local.menus !== undefined && local.menus.length > 0;
 
-  const handleClick = () => {
-    if (hasMenus()) {
-      setOpen((v) => !v);
-    }
-  };
-
   const handleMenuClick = (menu: TopbarUserMenu) => {
     setOpen(false);
     menu.onClick();
@@ -67,32 +60,36 @@ export const TopbarUser: ParentComponent<TopbarUserProps> = (props) => {
 
   const getClassName = () => twMerge(wrapperBaseClass, local.class);
 
+  const buttonContent = () => (
+    <Button
+      variant="ghost"
+      class={buttonContentClass}
+      aria-haspopup={hasMenus() ? "menu" : undefined}
+      aria-expanded={hasMenus() ? open() : undefined}
+    >
+      {local.children}
+      <Show when={hasMenus()}>
+        <Icon
+          icon={IconChevronDown}
+          size="1em"
+          class={clsx("transition-transform", open() && "rotate-180")}
+        />
+      </Show>
+    </Button>
+  );
+
   return (
     <div {...rest} data-topbar-user class={getClassName()}>
-      <Button
-        ref={buttonRef}
-        variant="ghost"
-        onClick={handleClick}
-        class={buttonContentClass}
-        aria-haspopup={hasMenus() ? "menu" : undefined}
-        aria-expanded={hasMenus() ? open() : undefined}
-      >
-        {local.children}
-        <Show when={hasMenus()}>
-          <Icon
-            icon={IconChevronDown}
-            size="1em"
-            class={clsx("transition-transform", open() && "rotate-180")}
-          />
-        </Show>
-      </Button>
-      <Show when={hasMenus()}>
-        <Dropdown triggerRef={() => buttonRef} open={open()} onOpenChange={setOpen}>
-          <List inset>
-            <For each={local.menus}>
-              {(menu) => <ListItem onClick={() => handleMenuClick(menu)}>{menu.title}</ListItem>}
-            </For>
-          </List>
+      <Show when={hasMenus()} fallback={buttonContent()}>
+        <Dropdown open={open()} onOpenChange={setOpen}>
+          <Dropdown.Trigger>{buttonContent()}</Dropdown.Trigger>
+          <Dropdown.Content>
+            <List inset>
+              <For each={local.menus}>
+                {(menu) => <ListItem onClick={() => handleMenuClick(menu)}>{menu.title}</ListItem>}
+              </For>
+            </List>
+          </Dropdown.Content>
         </Dropdown>
       </Show>
     </div>

package/src/hooks/createControllableStore.ts

@@ -0,0 +1,47 @@
+import { createEffect } from "solid-js";
+import { createStore, reconcile, unwrap } from "solid-js/store";
+import type { SetStoreFunction } from "solid-js/store";
+import { objClone } from "@simplysm/core-common";
+
+/**
+ * Controlled/Uncontrolled 패턴을 지원하는 store hook
+ *
+ * @remarks
+ * - `onChange`가 제공되면 controlled 모드: setter 호출 시 onChange로 변경 알림
+ * - `onChange`가 없으면 uncontrolled 모드: 내부 store만 사용
+ * - SetStoreFunction의 모든 overload 지원 (path 기반, produce, reconcile 등)
+ *
+ * @example
+ * ```tsx
+ * // Controlled 모드 (onItemsChange 제공)
+ * const [items, setItems] = createControllableStore<Item[]>({
+ *   value: () => props.items ?? [],
+ *   onChange: () => props.onItemsChange,
+ * });
+ *
+ * // Uncontrolled 모드 (onItemsChange 미제공)
+ * const [items, setItems] = createControllableStore<Item[]>({
+ *   value: () => [],
+ *   onChange: () => undefined,
+ * });
+ * ```
+ */
+export function createControllableStore<TValue extends object>(options: {
+  value: () => TValue;
+  onChange: () => ((value: TValue) => void) | undefined;
+}): [TValue, SetStoreFunction<TValue>] {
+  const [store, rawSet] = createStore<TValue>(objClone(options.value()));
+
+  // 외부 value 변경 → 내부 store 동기화
+  createEffect(() => {
+    rawSet(reconcile(options.value()) as any);
+  });
+
+  // 함수 래퍼로 setter 감싸서 onChange 알림 추가
+  const wrappedSet = ((...args: any[]) => {
+    (rawSet as any)(...args);
+    options.onChange()?.(objClone(unwrap(store)));
+  }) as SetStoreFunction<TValue>;
+
+  return [store, wrappedSet];
+}

package/src/index.ts

@@ -43,6 +43,7 @@ export * from "./components/layout/FormTable";
 export * from "./components/layout/sidebar/Sidebar";
 export * from "./components/layout/sidebar/SidebarContext";
 export * from "./components/layout/topbar/Topbar";
+export * from "./components/layout/topbar/TopbarContext";
 
 //#endregion
 
@@ -56,6 +57,10 @@ export * from "./components/data/Pagination";
 export * from "./components/data/sheet/DataSheet";
 export * from "./components/data/sheet/DataSheet.styles";
 export * from "./components/data/sheet/types";
+export * from "./components/data/crud-sheet/CrudSheet";
+export * from "./components/data/crud-sheet/types";
+export * from "./components/data/crud-detail/CrudDetail";
+export * from "./components/data/crud-detail/types";
 export * from "./components/data/calendar/Calendar";
 export * from "./components/data/permission-table/PermissionTable";
 export * from "./components/data/kanban/Kanban";
@@ -154,6 +159,7 @@ export * from "./hooks/useLocalStorage";
 export * from "./hooks/useSyncConfig";
 export * from "./hooks/useLogger";
 export { createControllableSignal } from "./hooks/createControllableSignal";
+export { createControllableStore } from "./hooks/createControllableStore";
 export { createIMEHandler } from "./hooks/createIMEHandler";
 export { createMountTransition } from "./hooks/createMountTransition";
 export { useRouterLink } from "./hooks/useRouterLink";
@@ -176,7 +182,6 @@ export { ripple } from "./directives/ripple";
 //#region ========== Helpers ==========
 
 export { mergeStyles } from "./helpers/mergeStyles";
-export { splitSlots } from "./helpers/splitSlots";
 export { createAppStructure } from "./helpers/createAppStructure";
 export type {
   AppStructureItem,

package/src/styles/patterns.styles.ts

@@ -41,4 +41,10 @@ export const fieldSurface = clsx(
 );
 
 // ── 입력 요소 공통 ──
-export const inputBase = clsx("min-w-0 flex-1", "bg-transparent", "outline-none", textPlaceholder);
+export const inputBase = clsx(
+  "min-w-0 flex-1",
+  "bg-transparent",
+  "outline-none",
+  "[text-decoration:inherit]",
+  textPlaceholder,
+);

package/tailwind.css

@@ -18,6 +18,10 @@
     height: 100%;
   }
 
+  pre {
+    font-family: sans-serif;
+  }
+
   *:focus {
     outline: none;
   }

package/dist/helpers/splitSlots.d.ts

@@ -1,25 +0,0 @@
-import "@simplysm/core-common";
-import { type Accessor } from "solid-js";
-import type { JSX } from "solid-js/jsx-runtime";
-/**
- * children을 slot 키 기준으로 분리하여 반환합니다.
- * SolidJS의 splitProps와 유사한 패턴으로 동작합니다.
- *
- * @param resolved - children(() => props.children)으로 생성된 resolved children
- * @param keys - 분리할 slot 키 배열 (camelCase, data 속성과 매칭)
- * @returns [slots, content] - slots는 각 키별 HTMLElement[], content는 나머지 JSX.Element[]
- *
- * @example
- * ```tsx
- * const resolved = children(() => props.children);
- * const [slots, content] = splitSlots(resolved, ["selectHeader", "selectAction"] as const);
- *
- * // JSX에서 사용
- * <div>{slots().selectHeader.single()}</div>
- * <div>{content()}</div>
- * ```
- */
-export declare function splitSlots<K extends string>(resolved: {
-    toArray: () => unknown[];
-}, keys: readonly K[]): [Accessor<Record<K, HTMLElement[]>>, Accessor<JSX.Element[]>];
-//# sourceMappingURL=splitSlots.d.ts.map

package/dist/helpers/splitSlots.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"splitSlots.d.ts","sourceRoot":"","sources":["..\\..\\src\\helpers\\splitSlots.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,QAAQ,EAAc,MAAM,UAAU,CAAC;AACrD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EACzC,QAAQ,EAAE;IAAE,OAAO,EAAE,MAAM,OAAO,EAAE,CAAA;CAAE,EACtC,IAAI,EAAE,SAAS,CAAC,EAAE,GACjB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,CAyB/D"}

package/dist/helpers/splitSlots.js

@@ -1,25 +0,0 @@
-import "@simplysm/core-common";
-import { createMemo } from "solid-js";
-function splitSlots(resolved, keys) {
-  const memo = createMemo(() => {
-    const arr = resolved.toArray();
-    const result = Object.fromEntries(keys.map((k) => [k, []]));
-    const content = [];
-    for (const c of arr) {
-      if (c instanceof HTMLElement) {
-        const matchedKey = keys.find((k) => k in c.dataset);
-        if (matchedKey !== void 0) {
-          result[matchedKey].push(c);
-          continue;
-        }
-      }
-      content.push(c);
-    }
-    return { result, content };
-  });
-  return [() => memo().result, () => memo().content];
-}
-export {
-  splitSlots
-};
-//# sourceMappingURL=splitSlots.js.map

package/dist/helpers/splitSlots.js.map

@@ -1,6 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/helpers/splitSlots.ts"],
-  "mappings": "AAAA,OAAO;AACP,SAAwB,kBAAkB;AAqBnC,SAAS,WACd,UACA,MAC+D;AAC/D,QAAM,OAAO,WAAW,MAAM;AAC5B,UAAM,MAAM,SAAS,QAAQ;AAC7B,UAAM,SAAS,OAAO,YAAY,KAAK,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAI1D,UAAM,UAAyB,CAAC;AAEhC,eAAW,KAAK,KAAK;AACnB,UAAI,aAAa,aAAa;AAC5B,cAAM,aAAa,KAAK,KAAK,CAAC,MAAM,KAAK,EAAE,OAAO;AAClD,YAAI,eAAe,QAAW;AAC5B,iBAAO,UAAU,EAAE,KAAK,CAAC;AACzB;AAAA,QACF;AAAA,MACF;AACA,cAAQ,KAAK,CAAgB;AAAA,IAC/B;AAEA,WAAO,EAAE,QAAQ,QAAQ;AAAA,EAC3B,CAAC;AAGD,SAAO,CAAC,MAAM,KAAK,EAAE,QAAQ,MAAM,KAAK,EAAE,OAAO;AACnD;",
-  "names": []
-}

package/dist/hooks/createItemTemplate.d.ts

@@ -1,17 +0,0 @@
-import type { JSX } from "solid-js";
-/**
- * WeakMap 기반 템플릿 슬롯 패턴을 생성합니다. SolidJS children을 통해 렌더 함수를 전달할 때 사용합니다.
- *
- * Select와 Combobox의 ItemTemplate 서브 컴포넌트 패턴에서 사용됩니다.
- * TemplateSlot은 WeakMap에 렌더 함수를 ref로 저장하는 숨겨진 span을 렌더링합니다.
- * getTemplate은 resolved 슬롯 엘리먼트에서 렌더 함수를 가져옵니다.
- *
- * @param dataAttr - 숨겨진 span에 사용할 HTML 속성 이름 (예: "data-select-item-template")
- */
-export declare function createItemTemplate<TArgs extends unknown[]>(dataAttr: string): {
-    TemplateSlot: (props: {
-        children(...args: TArgs): JSX.Element;
-    }) => JSX.Element;
-    getTemplate: (slotElements: Element[]) => ((...args: TArgs) => JSX.Element) | undefined;
-};
-//# sourceMappingURL=createItemTemplate.d.ts.map

package/dist/hooks/createItemTemplate.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createItemTemplate.d.ts","sourceRoot":"","sources":["..\\..\\src\\hooks\\createItemTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,SAAS,OAAO,EAAE,EACxD,QAAQ,EAAE,MAAM,GACf;IACD,YAAY,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,CAAC,GAAG,IAAI,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IAChF,WAAW,EAAE,CAAC,YAAY,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,EAAE,KAAK,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;CACzF,CAyBA"}

package/dist/hooks/createItemTemplate.js

@@ -1,40 +0,0 @@
-import { template as _$template } from "solid-js/web";
-import { use as _$use } from "solid-js/web";
-import { spread as _$spread } from "solid-js/web";
-import { mergeProps as _$mergeProps } from "solid-js/web";
-var _tmpl$ = /* @__PURE__ */ _$template(`<span>`);
-function createItemTemplate(dataAttr) {
-  const templateFnMap = /* @__PURE__ */ new WeakMap();
-  function TemplateSlot(props) {
-    return (() => {
-      var _el$ = _tmpl$();
-      _$use((el) => {
-        templateFnMap.set(el, props.children);
-      }, _el$);
-      _$spread(_el$, _$mergeProps({
-        [dataAttr]: true
-      }, {
-        "style": {
-          display: "none"
-        }
-      }), false, false);
-      return _el$;
-    })();
-  }
-  function getTemplate(slotElements) {
-    if (slotElements.length === 0) return void 0;
-    const el = slotElements[0];
-    if (el instanceof HTMLElement) {
-      return templateFnMap.get(el);
-    }
-    return void 0;
-  }
-  return {
-    TemplateSlot,
-    getTemplate
-  };
-}
-export {
-  createItemTemplate
-};
-//# sourceMappingURL=createItemTemplate.js.map

package/dist/hooks/createItemTemplate.js.map

@@ -1,6 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/hooks/createItemTemplate.tsx"],
-  "mappings": ";;;;;AAWO,SAASA,mBACdC,UAIA;AACA,QAAMC,gBAAgB,oBAAIC,QAAsD;AAEhF,WAASC,aAAaC,OAA+D;AACnF,YAAA,MAAA;AAAA,UAAAC,OAAAC,OAAA;AAAAC,YAEUC,QAAO;AACXP,sBAAcQ,IAAID,IAAIJ,MAAMM,QAAQ;MACtC,GAACL,IAAA;AAAAM,eAAAN,MAAAO,aACG;QAAE,CAACZ,QAAQ,GAAG;MAAK,GAAC;QAAA,SACjB;UAAEa,SAAS;QAAO;MAAC,CAAA,GAAA,OAAA,KAAA;AAAA,aAAAR;IAAA,GAAA;EAGhC;AAEA,WAASS,YAAYC,cAAwE;AAC3F,QAAIA,aAAaC,WAAW,EAAG,QAAOC;AACtC,UAAMT,KAAKO,aAAa,CAAC;AACzB,QAAIP,cAAcU,aAAa;AAC7B,aAAOjB,cAAckB,IAAIX,EAAE;IAC7B;AACA,WAAOS;EACT;AAEA,SAAO;IAAEd;IAAcW;EAAY;AACrC;",
-  "names": ["createItemTemplate", "dataAttr", "templateFnMap", "WeakMap", "TemplateSlot", "props", "_el$", "_tmpl$", "_$use", "el", "set", "children", "_$spread", "_$mergeProps", "display", "getTemplate", "slotElements", "length", "undefined", "HTMLElement", "get"]
-}

package/src/helpers/splitSlots.ts

@@ -1,51 +0,0 @@
-import "@simplysm/core-common";
-import { type Accessor, createMemo } from "solid-js";
-import type { JSX } from "solid-js/jsx-runtime";
-
-/**
- * children을 slot 키 기준으로 분리하여 반환합니다.
- * SolidJS의 splitProps와 유사한 패턴으로 동작합니다.
- *
- * @param resolved - children(() => props.children)으로 생성된 resolved children
- * @param keys - 분리할 slot 키 배열 (camelCase, data 속성과 매칭)
- * @returns [slots, content] - slots는 각 키별 HTMLElement[], content는 나머지 JSX.Element[]
- *
- * @example
- * ```tsx
- * const resolved = children(() => props.children);
- * const [slots, content] = splitSlots(resolved, ["selectHeader", "selectAction"] as const);
- *
- * // JSX에서 사용
- * <div>{slots().selectHeader.single()}</div>
- * <div>{content()}</div>
- * ```
- */
-export function splitSlots<K extends string>(
-  resolved: { toArray: () => unknown[] },
-  keys: readonly K[],
-): [Accessor<Record<K, HTMLElement[]>>, Accessor<JSX.Element[]>] {
-  const memo = createMemo(() => {
-    const arr = resolved.toArray();
-    const result = Object.fromEntries(keys.map((k) => [k, []])) as unknown as Record<
-      K,
-      HTMLElement[]
-    >;
-    const content: JSX.Element[] = [];
-
-    for (const c of arr) {
-      if (c instanceof HTMLElement) {
-        const matchedKey = keys.find((k) => k in c.dataset);
-        if (matchedKey !== undefined) {
-          result[matchedKey].push(c);
-          continue;
-        }
-      }
-      content.push(c as JSX.Element);
-    }
-
-    return { result, content };
-  });
-
-  // eslint-disable-next-line solid/reactivity -- 반환된 accessor는 JSX나 tracked scope에서 호출됨
-  return [() => memo().result, () => memo().content];
-}

package/src/hooks/createItemTemplate.tsx

@@ -1,42 +0,0 @@
-import type { JSX } from "solid-js";
-
-/**
- * WeakMap 기반 템플릿 슬롯 패턴을 생성합니다. SolidJS children을 통해 렌더 함수를 전달할 때 사용합니다.
- *
- * Select와 Combobox의 ItemTemplate 서브 컴포넌트 패턴에서 사용됩니다.
- * TemplateSlot은 WeakMap에 렌더 함수를 ref로 저장하는 숨겨진 span을 렌더링합니다.
- * getTemplate은 resolved 슬롯 엘리먼트에서 렌더 함수를 가져옵니다.
- *
- * @param dataAttr - 숨겨진 span에 사용할 HTML 속성 이름 (예: "data-select-item-template")
- */
-export function createItemTemplate<TArgs extends unknown[]>(
-  dataAttr: string,
-): {
-  TemplateSlot: (props: { children(...args: TArgs): JSX.Element }) => JSX.Element;
-  getTemplate: (slotElements: Element[]) => ((...args: TArgs) => JSX.Element) | undefined;
-} {
-  const templateFnMap = new WeakMap<HTMLElement, (...args: TArgs) => JSX.Element>();
-
-  function TemplateSlot(props: { children(...args: TArgs): JSX.Element }): JSX.Element {
-    return (
-      <span
-        ref={(el) => {
-          templateFnMap.set(el, props.children);
-        }}
-        {...{ [dataAttr]: true }}
-        style={{ display: "none" }}
-      />
-    );
-  }
-
-  function getTemplate(slotElements: Element[]): ((...args: TArgs) => JSX.Element) | undefined {
-    if (slotElements.length === 0) return undefined;
-    const el = slotElements[0];
-    if (el instanceof HTMLElement) {
-      return templateFnMap.get(el);
-    }
-    return undefined;
-  }
-
-  return { TemplateSlot, getTemplate };
-}