@simplysm/solid 13.0.76 → 13.0.77

package/src/components/form-control/select/Select.tsx

@@ -144,10 +144,6 @@ export interface SelectItemProps<TValue = unknown> extends Omit<
   disabled?: boolean;
 }
 
-interface SelectItemComponent<TValue = unknown> extends ParentComponent<SelectItemProps<TValue>> {
-  Children: typeof SelectItemChildren;
-}
-
 /**
  * Selectable item within Select dropdown
  *
@@ -164,12 +160,12 @@ interface SelectItemComponent<TValue = unknown> extends ParentComponent<SelectIt
  * </Select.Item>
  * ```
  */
-const SelectItem: SelectItemComponent = <T,>(
-  props: SelectItemProps<T> & { children?: JSX.Element },
+const SelectItemInner = <TValue,>(
+  props: SelectItemProps<TValue> & { children?: JSX.Element },
 ) => {
   const [local, rest] = splitProps(props, ["children", "class", "value", "disabled"]);
 
-  const context = useSelectContext<T>();
+  const context = useSelectContext<TValue>();
 
   const [childrenSlot, ItemChildrenProvider] = createItemChildrenSlotAccessor();
   const hasChildren = () => childrenSlot() !== undefined;
@@ -231,7 +227,9 @@ const SelectItem: SelectItemComponent = <T,>(
   );
 };
 
-SelectItem.Children = SelectItemChildren;
+const SelectItem = Object.assign(SelectItemInner, {
+  Children: SelectItemChildren,
+});
 
 //#endregion
 
@@ -257,8 +255,8 @@ interface SelectCommonProps<TValue = unknown> {
   /** Custom validation function */
   validate?: (value: unknown) => string | undefined;
 
-  /** touchMode: Show error only after blur */
-  touchMode?: boolean;
+  /** lazyValidation: Show error only after blur */
+  lazyValidation?: boolean;
 
   /** Search text extraction function (shows search input when set) */
   itemSearchText?: (item: TValue) => string;
@@ -282,10 +280,10 @@ interface SelectSingleBaseProps<TValue> extends SelectCommonProps<TValue> {
   value?: TValue;
 
   /** Value change callback */
-  onValueChange?: (value: TValue) => void;
+  onValueChange?: (value: TValue | undefined) => void;
 
   /** Display direction for multiple select (not used in single select) */
-  multiDisplayDirection?: never;
+  tagDirection?: never;
 
   /** Hide select all button (not used in single select) */
   hideSelectAll?: never;
@@ -303,7 +301,7 @@ interface SelectMultipleBaseProps<TValue> extends SelectCommonProps<TValue> {
   onValueChange?: (value: TValue[]) => void;
 
   /** Display direction for multiple select */
-  multiDisplayDirection?: "horizontal" | "vertical";
+  tagDirection?: "horizontal" | "vertical";
 
   /** Hide select all button */
   hideSelectAll?: boolean;
@@ -331,13 +329,6 @@ export type SelectProps<TValue = unknown> =
   | (SelectMultipleBaseProps<TValue> & SelectWithItemsPropsBase<TValue>)
   | (SelectMultipleBaseProps<TValue> & SelectWithChildrenPropsBase<TValue>);
 
-interface SelectComponent {
-  <TValue = unknown>(props: SelectProps<TValue>): JSX.Element;
-  Item: typeof SelectItem;
-  Action: typeof SelectAction;
-  Header: typeof SelectHeader;
-  ItemTemplate: typeof SelectItemTemplate;
-}
 
 /**
  * Select component
@@ -358,8 +349,8 @@ interface SelectComponent {
  * </Select>
  * ```
  */
-const SelectInnerComponent = <T,>(props: SelectProps<T>) => {
-  const [local, rest] = splitProps(props as SelectProps<T> & { children?: JSX.Element }, [
+const SelectInnerComponent = <TValue,>(props: SelectProps<TValue>) => {
+  const [local, rest] = splitProps(props as SelectProps<TValue> & { children?: JSX.Element }, [
     "children",
     "class",
     "style",
@@ -371,13 +362,13 @@ const SelectInnerComponent = <T,>(props: SelectProps<T>) => {
     "placeholder",
     "size",
     "inset",
-    "multiDisplayDirection",
+    "tagDirection",
     "hideSelectAll",
     "items",
     "itemChildren",
     "renderValue",
     "validate",
-    "touchMode",
+    "lazyValidation",
     "itemSearchText",
     "isItemHidden",
   ]);
@@ -396,14 +387,14 @@ const SelectInnerComponent = <T,>(props: SelectProps<T>) => {
   });
 
   // Manage selected value (controlled/uncontrolled pattern)
-  type ValueType = T | T[] | undefined;
+  type ValueType = TValue | TValue[] | undefined;
   const [value, setValue] = createControllableSignal<ValueType>({
     value: () => local.value,
     onChange: () => local.onValueChange as ((v: ValueType) => void) | undefined,
   } as Parameters<typeof createControllableSignal<ValueType>>[0]);
 
   // Check if value is selected
-  const isSelected = (itemValue: T): boolean => {
+  const isSelected = (itemValue: TValue): boolean => {
     const current = value();
     if (current === undefined) return false;
 
@@ -414,9 +405,9 @@ const SelectInnerComponent = <T,>(props: SelectProps<T>) => {
   };
 
   // Toggle value
-  const toggleValue = (itemValue: T) => {
+  const toggleValue = (itemValue: TValue) => {
     if (local.multiple) {
-      const current = (value() as T[] | undefined) ?? [];
+      const current = (value() as TValue[] | undefined) ?? [];
       const idx = current.indexOf(itemValue);
       if (idx >= 0) {
         setValue([...current.slice(0, idx), ...current.slice(idx + 1)]);
@@ -443,7 +434,7 @@ const SelectInnerComponent = <T,>(props: SelectProps<T>) => {
     _setItemTemplate(() => fn);
 
   // Context value
-  const contextValue: SelectContextValue<T> = {
+  const contextValue: SelectContextValue<TValue> = {
     multiple: () => local.multiple ?? false,
     isSelected,
     toggleValue,
@@ -479,7 +470,7 @@ const SelectInnerComponent = <T,>(props: SelectProps<T>) => {
     });
 
   // Search filtering (supports hierarchical structure)
-  const filteredItems = createMemo((): T[] | undefined => {
+  const filteredItems = createMemo((): TValue[] | undefined => {
     if (!local.items) return undefined;
     if (!local.itemSearchText || !searchText()) return local.items;
 
@@ -487,7 +478,7 @@ const SelectInnerComponent = <T,>(props: SelectProps<T>) => {
     if (terms.length === 0) return local.items;
 
     // Include parent when child matches in hierarchical structure
-    const matchesSearch = (item: T): boolean => {
+    const matchesSearch = (item: TValue): boolean => {
       const itemText = local.itemSearchText!(item).toLowerCase();
       if (terms.every((t) => itemText.includes(t.toLowerCase()))) return true;
 
@@ -504,7 +495,7 @@ const SelectInnerComponent = <T,>(props: SelectProps<T>) => {
   });
 
   // Items with hidden filter applied
-  const visibleItems = createMemo((): T[] | undefined => {
+  const visibleItems = createMemo((): TValue[] | undefined => {
     const items = filteredItems();
     if (!items || !local.isItemHidden) return items;
 
@@ -526,7 +517,7 @@ const SelectInnerComponent = <T,>(props: SelectProps<T>) => {
 
   // Deselect all
   const handleDeselectAll = () => {
-    setValue([] as unknown as T[]);
+    setValue([] as TValue[]);
   };
 
   // Inner component: resolve children inside Provider to trigger slot registration
@@ -536,13 +527,13 @@ const SelectInnerComponent = <T,>(props: SelectProps<T>) => {
 
     // Extract itemTemplate function
     const getItemTemplate = ():
-      | ((item: T, index: number, depth: number) => JSX.Element)
+      | ((item: TValue, index: number, depth: number) => JSX.Element)
       | undefined => {
-      return itemTemplate() as ((item: T, index: number, depth: number) => JSX.Element) | undefined;
+      return itemTemplate() as ((item: TValue, index: number, depth: number) => JSX.Element) | undefined;
     };
 
     // Render items recursively
-    const renderItems = (itemList: T[], depth: number): JSX.Element => {
+    const renderItems = (itemList: TValue[], depth: number): JSX.Element => {
       const tpl = getItemTemplate();
       return (
         <For each={itemList}>
@@ -578,7 +569,7 @@ const SelectInnerComponent = <T,>(props: SelectProps<T>) => {
     };
 
     // Render selected value (reuse itemTemplate when in items mode)
-    const renderValue = (renderVal: T): JSX.Element => {
+    const renderValue = (renderVal: TValue): JSX.Element => {
       if (local.renderValue) {
         return local.renderValue(renderVal);
       }
@@ -598,7 +589,7 @@ const SelectInnerComponent = <T,>(props: SelectProps<T>) => {
       }
 
       if (local.multiple && Array.isArray(current)) {
-        const direction = local.multiDisplayDirection ?? "horizontal";
+        const direction = local.tagDirection ?? "horizontal";
         return (
           <div class={clsx("flex gap-1", direction === "vertical" ? "flex-col" : "flex-wrap")}>
             <For each={current}>{(v) => <span class={clsx("rounded px-1", bg.subtle)}>{renderValue(v)}</span>}</For>
@@ -606,7 +597,7 @@ const SelectInnerComponent = <T,>(props: SelectProps<T>) => {
         );
       }
 
-      return renderValue(current as T);
+      return renderValue(current as TValue);
     };
 
     // Show unset item: single select + not required + items mode
@@ -681,7 +672,7 @@ const SelectInnerComponent = <T,>(props: SelectProps<T>) => {
               <Show when={local.items} fallback={resolved()}>
                 {/* Unset item */}
                 <Show when={showUnsetItem()}>
-                  <SelectItem value={undefined as T}>
+                  <SelectItem value={undefined as TValue}>
                     <span class={text.muted}>{i18n.t("select.unset")}</span>
                   </SelectItem>
                 </Show>
@@ -706,7 +697,7 @@ const SelectInnerComponent = <T,>(props: SelectProps<T>) => {
   };
 
   return (
-    <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
+    <Invalid message={errorMsg()} variant="border" lazyValidation={local.lazyValidation}>
       <SelectCtx.Provider value={contextValue as SelectContextValue}>
         <HeaderProvider>
           <ActionProvider>
@@ -724,5 +715,5 @@ export const Select = Object.assign(SelectInnerComponent, {
   Header: SelectHeader,
   Action: SelectAction,
   ItemTemplate: SelectItemTemplate,
-}) as SelectComponent;
+});
 //#endregion

package/src/components/form-control/state-preset/StatePreset.tsx

@@ -3,7 +3,7 @@ import type { JSX } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import clsx from "clsx";
 import { IconDeviceFloppy, IconStar, IconX } from "@tabler/icons-solidjs";
-import { objClone, objEqual } from "@simplysm/core-common";
+import { obj } from "@simplysm/core-common";
 import { useSyncConfig } from "../../../hooks/useSyncConfig";
 import { useNotification } from "../../feedback/notification/NotificationProvider";
 import { Icon } from "../../display/Icon";
@@ -119,7 +119,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
 
     const newPreset: StatePresetItem<TValue> = {
       name,
-      state: objClone(local.value),
+      state: obj.clone(local.value),
     };
     setPresets([...presets(), newPreset]);
     notification.info(i18n.t("statePreset.saved"), i18n.t("statePreset.savedMessage", { name }));
@@ -128,8 +128,8 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
   }
 
   function handleRestore(preset: StatePresetItem<TValue>): void {
-    if (!objEqual(local.value, preset.state)) {
-      local.onValueChange(objClone(preset.state));
+    if (!obj.equal(local.value, preset.state)) {
+      local.onValueChange(obj.clone(preset.state));
     }
   }
 
@@ -138,7 +138,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
     const presetName = snapshot[index].name;
 
     const updated = snapshot.map((p, i) =>
-      i === index ? { ...p, state: objClone(local.value) } : p,
+      i === index ? { ...p, state: obj.clone(local.value) } : p,
     );
     setPresets(updated);
 

package/src/components/layout/sidebar/Sidebar.tsx

@@ -466,12 +466,6 @@ export interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {
  * </Sidebar>
  * ```
  */
-interface SidebarComponent extends ParentComponent<SidebarProps> {
-  Container: typeof SidebarContainer;
-  Menu: typeof SidebarMenu;
-  User: typeof SidebarUser;
-}
-
 const SidebarInner: ParentComponent<SidebarProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "style"]);
 
@@ -518,6 +512,6 @@ export const Sidebar = Object.assign(SidebarInner, {
   Container: SidebarContainer,
   Menu: SidebarMenu,
   User: SidebarUser,
-}) as unknown as SidebarComponent;
+});
 
 //#endregion

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

@@ -43,10 +43,10 @@ export function useTopbarActionsAccessor(): Accessor<JSX.Element | undefined> {
   return context.actions;
 }
 
-export function createTopbarActions(accessor: () => JSX.Element): void {
+export function useTopbarActions(accessor: () => JSX.Element): void {
   const context = useContext(TopbarContext);
   if (!context) {
-    throw new Error("createTopbarActions can only be used inside Topbar.Container");
+    throw new Error("useTopbarActions can only be used inside Topbar.Container");
   }
 
   context.setActions(() => accessor());
@@ -450,7 +450,7 @@ const TopbarUser: ParentComponent<TopbarUserProps> = (props) => {
  *
  * @remarks
  * - Used inside TopbarContainer
- * - Displays actions set by createTopbarActions()
+ * - Displays actions set by useTopbarActions()
  */
 const TopbarActions: Component = () => {
   const context = useContext(TopbarContext);

package/src/helpers/createAppStructure.ts

@@ -2,6 +2,7 @@ import type { Component, ParentComponent } from "solid-js";
 import { type Accessor, createContext, createMemo, createRoot, useContext } from "solid-js";
 import type { IconProps } from "@tabler/icons-solidjs";
 
+//#region Types
 // ── Input Types ──
 
 export interface AppStructureGroupItem<TModule> {
@@ -80,7 +81,9 @@ export interface AppStructure<TModule> {
   allFlatPerms: AppFlatPerm<TModule>[];
   getTitleChainByHref(href: string): string[];
 }
+//#endregion
 
+//#region Type Inference
 // ── Perms Type Inference ──
 
 type PermKey<TItem> = TItem extends { code: infer C extends string }
@@ -113,7 +116,9 @@ type InferPerms<TItems extends any[]> = {
     ? InferPerms<C>
     : InferLeafPerms<Item>;
 };
+//#endregion
 
+//#region Internal Helpers
 // ── Internal Helpers ──
 
 function isGroupItem<TModule>(
@@ -139,7 +144,9 @@ function checkModules<TModule>(
 
   return true;
 }
+//#endregion
 
+//#region Routes
 // ── Routes ──
 
 function buildUsableRoutes<TModule>(
@@ -170,7 +177,9 @@ function buildUsableRoutes<TModule>(
 
   return result;
 }
+//#endregion
 
+//#region Menus
 // ── Menus ──
 
 function buildMenus<TModule>(
@@ -217,7 +226,9 @@ function flattenMenus(menus: AppMenu[], titleChain: string[] = []): AppFlatMenu[
 
   return result;
 }
+//#endregion
 
+//#region Perms
 // ── Perms ──
 
 function buildPerms<TModule>(
@@ -396,7 +407,9 @@ function buildPermsObject<TModule>(
 
   return obj;
 }
+//#endregion
 
+//#region Info
 // ── Info ──
 
 function findItemChainByCodes<TModule>(
@@ -415,7 +428,9 @@ function findItemChainByCodes<TModule>(
 
   return result;
 }
+//#endregion
 
+//#region createAppStructure
 // ── Main Function ──
 
 function buildAppStructure<TModule, const TItems extends AppStructureItem<TModule>[]>(opts: {
@@ -517,3 +532,4 @@ export function createAppStructure<TModule, const TItems extends AppStructureIte
 
   return { AppStructureProvider, useAppStructure };
 }
+//#endregion

package/src/hooks/createControllableStore.ts

@@ -1,7 +1,7 @@
 import { createEffect } from "solid-js";
 import { createStore, reconcile, unwrap } from "solid-js/store";
 import type { SetStoreFunction } from "solid-js/store";
-import { objClone, objEqual } from "@simplysm/core-common";
+import { obj } from "@simplysm/core-common";
 
 /**
  * Store hook that supports the controlled/uncontrolled pattern.
@@ -30,7 +30,7 @@ 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()));
+  const [store, rawSet] = createStore<TValue>(obj.clone(options.value()));
 
   // Sync internal store when external value changes
   createEffect(() => {
@@ -39,10 +39,10 @@ export function createControllableStore<TValue extends object>(options: {
 
   // Wrap setter with a function wrapper to add onChange notification
   const wrappedSet = ((...args: any[]) => {
-    const before = objClone(unwrap(store));
+    const before = obj.clone(unwrap(store));
     (rawSet as any)(...args);
-    if (!objEqual(before, unwrap(store))) {
-      options.onChange()?.(objClone(unwrap(store)));
+    if (!obj.equal(before, unwrap(store))) {
+      options.onChange()?.(obj.clone(unwrap(store)));
     }
   }) as SetStoreFunction<TValue>;
 

package/src/index.ts

@@ -54,7 +54,7 @@ export * from "./components/data/list/ListItem.styles";
 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/sheet/DataSheet.types";
 export * from "./components/data/calendar/Calendar";
 export * from "./components/data/kanban/Kanban";
 
@@ -63,6 +63,7 @@ export * from "./components/data/kanban/Kanban";
 //#region ========== Display ==========
 
 export * from "./components/display/Barcode";
+export * from "./components/display/Barcode.types";
 export * from "./components/display/Card";
 export * from "./components/display/Echarts";
 export * from "./components/display/Icon";
@@ -181,11 +182,11 @@ export * from "./components/features/data-select-button/DataSelectButton";
 
 // CrudSheet
 export * from "./components/features/crud-sheet/CrudSheet";
-export * from "./components/features/crud-sheet/types";
+export * from "./components/features/crud-sheet/CrudSheet.types";
 
 // CrudDetail
 export * from "./components/features/crud-detail/CrudDetail";
-export * from "./components/features/crud-detail/types";
+export * from "./components/features/crud-detail/CrudDetail.types";
 
 // PermissionTable
 export * from "./components/features/permission-table/PermissionTable";

package/src/providers/ServiceClientProvider.tsx

@@ -2,7 +2,7 @@ import { createContext, type ParentComponent, onCleanup, useContext } from "soli
 import {
   createServiceClient,
   type ServiceClient,
-  type ServiceConnectionConfig,
+  type ServiceConnectionOptions,
 } from "@simplysm/service-client";
 import { useConfig } from "./ConfigContext";
 import { useNotification } from "../components/feedback/notification/NotificationProvider";
@@ -12,7 +12,7 @@ import { useNotification } from "../components/feedback/notification/Notificatio
  */
 export interface ServiceClientContextValue {
   /** Open a WebSocket connection (defaults to "default" if key is omitted) */
-  connect: (key?: string, options?: Partial<ServiceConnectionConfig>) => Promise<void>;
+  connect: (key?: string, options?: Partial<ServiceConnectionOptions>) => Promise<void>;
   /** Close a connection */
   close: (key?: string) => Promise<void>;
   /** Get a connected client instance (throws if the key is not connected) */
@@ -100,7 +100,7 @@ export const ServiceClientProvider: ParentComponent = (props) => {
 
   const connect = async (
     key?: string,
-    options?: Partial<ServiceConnectionConfig>,
+    options?: Partial<ServiceConnectionOptions>,
   ): Promise<void> => {
     const resolvedKey = key ?? "default";
 
@@ -113,7 +113,7 @@ export const ServiceClientProvider: ParentComponent = (props) => {
       }
     }
 
-    const defaultConfig: ServiceConnectionConfig = {
+    const defaultConfig: ServiceConnectionOptions = {
       host: location.hostname,
       port: Number(location.port) || (location.protocol.startsWith("https") ? 443 : 80),
       ssl: location.protocol.startsWith("https"),