@simplysm/solid 13.0.76 → 13.0.78

package/src/components/data/sheet/{types.ts → DataSheet.types.ts}

@@ -25,8 +25,14 @@ export interface DataSheetProps<TItem> {
   selectionMode?: "single" | "multiple";
   selection?: TItem[];
   onSelectionChange?: (items: TItem[]) => void;
-  autoSelect?: "click";
-  itemSelectable?: (item: TItem) => boolean | string;
+  autoSelect?: boolean;
+  /**
+   * Determines if an item can be selected.
+   * - `true` → selectable
+   * - `false` → not selectable
+   * - `string` → not selectable, string shown as tooltip explaining why
+   */
+  isItemSelectable?: (item: TItem) => boolean | string;
 
   // Tree expansion
   expandedItems?: TItem[];

package/src/components/data/sheet/{sheetUtils.ts → DataSheet.utils.ts}

@@ -1,5 +1,5 @@
-import type { DataSheetColumnDef, FlatItem, HeaderDef, SortingDef } from "./types";
-import { objGetChainValue } from "@simplysm/core-common";
+import type { DataSheetColumnDef, FlatItem, HeaderDef, SortingDef } from "./DataSheet.types";
+import { obj } from "@simplysm/core-common";
 
 export function normalizeHeader(header?: string | string[]): string[] {
   if (header == null) return [""];
@@ -166,7 +166,7 @@ export function applySorting<TItem>(items: TItem[], sorts: SortingDef[]): TItem[
   let result = [...items];
   for (const sort of [...sorts].reverse()) {
     const selector = (item: TItem) =>
-      objGetChainValue(item, sort.key) as string | number | undefined;
+      obj.getChainValue(item, sort.key) as string | number | undefined;
     result = sort.desc ? result.orderByDesc(selector) : result.orderBy(selector);
   }
   return result;

package/src/components/data/sheet/DataSheetColumn.tsx

@@ -1,6 +1,6 @@
 import type { JSX } from "solid-js";
 import { createSlots } from "../../../helpers/createSlots";
-import type { DataSheetColumnProps } from "./types";
+import type { DataSheetColumnProps } from "./DataSheet.types";
 
 const [SlotComponent, createColumnSlotsAccessor] = createSlots<DataSheetColumnProps<any>>();
 

package/src/components/data/sheet/DataSheetConfigDialog.tsx

@@ -6,7 +6,7 @@ import type {
   DataSheetConfigColumn,
   DataSheetConfigColumnInfo,
   DataSheetReorderEvent,
-} from "./types";
+} from "./DataSheet.types";
 import { DataSheet } from "./DataSheet";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { TextInput } from "../../form-control/field/TextInput";

package/src/components/data/sheet/hooks/useDataSheetExpansion.ts

@@ -1,6 +1,6 @@
 import { createMemo, type Accessor } from "solid-js";
-import type { FlatItem } from "../types";
-import { collectAllExpandable, flattenTree } from "../sheetUtils";
+import type { FlatItem } from "../DataSheet.types";
+import { collectAllExpandable, flattenTree } from "../DataSheet.utils";
 import { createControllableSignal } from "../../../../hooks/createControllableSignal";
 
 export interface UseDataSheetExpansionProps<TItem> {

package/src/components/data/sheet/hooks/useDataSheetFixedColumns.ts

@@ -1,11 +1,11 @@
 import { createMemo, createSignal, type Accessor } from "solid-js";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
-import type { DataSheetColumnDef } from "../types";
+import type { DataSheetColumnDef, DataSheetReorderEvent } from "../DataSheet.types";
 
 export interface UseDataSheetFixedColumnsProps<TItem> {
   itemChildren?: (item: TItem, index: number) => TItem[] | undefined;
   selectionMode?: "single" | "multiple";
-  onItemsReorder?: (event: any) => void;
+  onItemsReorder?: (event: DataSheetReorderEvent<TItem>) => void;
 }
 
 export function useDataSheetFixedColumns<TItem>(

package/src/components/data/sheet/hooks/useDataSheetHeaderCell.tsx

@@ -0,0 +1,168 @@
+import type { JSX } from "solid-js";
+import { Show } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { Icon } from "../../../display/Icon";
+import { IconArrowsSort, IconSortAscending, IconSortDescending } from "@tabler/icons-solidjs";
+import type { HeaderDef, DataSheetColumnDef } from "../DataSheet.types";
+
+export interface UseDataSheetHeaderCellProps<TItem> {
+  effectiveColumns: () => DataSheetColumnDef<TItem>[];
+  headerRowTops: () => number[];
+  getFixedStyle: (colIndex: number) => string | undefined;
+  isLastFixed: (colIndex: number) => boolean;
+  registerColumnRef: (colIndex: number, el: HTMLElement) => void;
+  toggleSort: (key: string, multi: boolean) => void;
+  getSortDef: (key: string) => { desc: boolean } | undefined;
+  sortIndex: (key: string) => number | undefined;
+  onResizerPointerdown: (e: PointerEvent, key: string) => void;
+  onResizerDoubleClick: (key: string) => void;
+  thClass: string;
+  fixedClass: string;
+  sortableThClass: string;
+  fixedLastClass: string;
+  thContentClass: string;
+  resizerClass: string;
+  sortIconClass: string;
+}
+
+export function useDataSheetHeaderCell<TItem>(props: UseDataSheetHeaderCellProps<TItem>) {
+  function renderHeaderCell(header: HeaderDef, colIndex: number, rowIndex: number): JSX.Element {
+    const isSortable = () =>
+      header.isLastRow &&
+      header.colIndex != null &&
+      props.effectiveColumns()[header.colIndex].sortable;
+    const colKey = () =>
+      header.colIndex != null
+        ? props.effectiveColumns()[header.colIndex].key
+        : undefined;
+
+    const isGroupFixed = (): boolean => {
+      if (header.isLastRow) return false;
+      const start = colIndex;
+      const span = header.colspan;
+      const cols = props.effectiveColumns();
+      for (let i = start; i < start + span && i < cols.length; i++) {
+        if (!cols[i].fixed) return false;
+      }
+      return true;
+    };
+
+    const isCellFixed = () =>
+      (header.isLastRow &&
+        header.colIndex != null &&
+        props.effectiveColumns()[header.colIndex].fixed) ||
+      isGroupFixed();
+
+    const isCellLastFixed = () => {
+      if (header.isLastRow && header.colIndex != null)
+        return props.isLastFixed(header.colIndex);
+      if (isGroupFixed()) {
+        const lastCol = colIndex + header.colspan - 1;
+        return props.isLastFixed(lastCol);
+      }
+      return false;
+    };
+
+    const cellStyle = (): string | undefined => {
+      const parts: string[] = [];
+      const top = props.headerRowTops()[rowIndex];
+      parts.push(`top: ${top}px`);
+      if (header.isLastRow && header.colIndex != null) {
+        const left = props.getFixedStyle(header.colIndex);
+        if (left != null) parts.push(left);
+        const col = props.effectiveColumns()[header.colIndex];
+        if (col.width != null) parts.push(`max-width: ${col.width.replace(/;/g, "")}`);
+      } else if (isGroupFixed()) {
+        const left = props.getFixedStyle(colIndex);
+        if (left != null) parts.push(left);
+      }
+      return parts.length > 0 ? parts.join("; ") : undefined;
+    };
+
+    return (
+      <th
+        class={twMerge(
+          props.thClass,
+          props.fixedClass,
+          isSortable() ? props.sortableThClass : undefined,
+          isCellFixed() ? "z-[5]" : "z-[3]",
+          isCellLastFixed() ? props.fixedLastClass : undefined,
+        )}
+        colspan={header.colspan > 1 ? header.colspan : undefined}
+        rowspan={header.rowspan > 1 ? header.rowspan : undefined}
+        style={cellStyle()}
+        title={
+          header.isLastRow && header.colIndex != null
+            ? (props.effectiveColumns()[header.colIndex].tooltip ?? header.text)
+            : header.text
+        }
+        ref={(el: HTMLElement) => {
+          if (
+            header.isLastRow &&
+            header.colIndex != null &&
+            props.effectiveColumns()[header.colIndex].fixed
+          ) {
+            props.registerColumnRef(header.colIndex, el);
+          }
+        }}
+        onClick={(e) => {
+          if (!isSortable()) return;
+          const key = colKey();
+          if (key == null) return;
+          props.toggleSort(key, e.shiftKey || e.ctrlKey);
+        }}
+      >
+        <div class={clsx("flex items-center gap-2", props.thContentClass)}>
+          <div class="flex-1">{header.headerContent?.() ?? header.text}</div>
+          <Show when={isSortable() && colKey()}>
+            {(key) => {
+              const sortDef = () => props.getSortDef(key());
+              const sortIdx = () => props.sortIndex(key());
+              return (
+                <div class={props.sortIconClass}>
+                  <Show when={sortDef()?.desc === false}>
+                    <Icon icon={IconSortAscending} />
+                  </Show>
+                  <Show when={sortDef()?.desc === true}>
+                    <Icon icon={IconSortDescending} />
+                  </Show>
+                  <Show when={sortDef() == null}>
+                    <Icon
+                      icon={IconArrowsSort}
+                      class="opacity-30"
+                    />
+                  </Show>
+                  <Show when={sortIdx()}>
+                    {(idx) => <sub>{idx()}</sub>}
+                  </Show>
+                </div>
+              );
+            }}
+          </Show>
+        </div>
+        <Show
+          when={
+            header.isLastRow &&
+            header.colIndex != null &&
+            props.effectiveColumns()[header.colIndex].resizable
+          }
+        >
+          <div
+            class={props.resizerClass}
+            onClick={(e) => e.stopPropagation()}
+            onPointerDown={(e) =>
+              props.onResizerPointerdown(e, props.effectiveColumns()[header.colIndex!].key)
+            }
+            onDblClick={(e) => {
+              e.stopPropagation();
+              props.onResizerDoubleClick(props.effectiveColumns()[header.colIndex!].key);
+            }}
+          />
+        </Show>
+      </th>
+    );
+  }
+
+  return { renderHeaderCell };
+}

package/src/components/data/sheet/hooks/useDataSheetReorder.ts

@@ -1,7 +1,6 @@
 import { createSignal, type Accessor } from "solid-js";
 import { startPointerDrag } from "../../../../helpers/startPointerDrag";
-import type { DataSheetReorderEvent } from "../types";
-import type { FlatItem } from "../types";
+import type { DataSheetReorderEvent, FlatItem } from "../DataSheet.types";
 
 export interface UseDataSheetReorderProps<TItem> {
   onItemsReorder?: (event: DataSheetReorderEvent<TItem>) => void;

package/src/components/data/sheet/hooks/useDataSheetSelection.ts

@@ -1,12 +1,12 @@
 import { createSignal, type Accessor } from "solid-js";
-import type { FlatItem } from "../types";
+import type { FlatItem } from "../DataSheet.types";
 import { createControllableSignal } from "../../../../hooks/createControllableSignal";
 
 export interface UseDataSheetSelectionProps<TItem> {
   selectionMode?: "single" | "multiple";
   selection?: TItem[];
   onSelectionChange?: (items: TItem[]) => void;
-  itemSelectable?: (item: TItem) => boolean | string;
+  isItemSelectable?: (item: TItem) => boolean | string;
 }
 
 export interface UseDataSheetSelectionReturn<TItem> {
@@ -35,8 +35,8 @@ export function useDataSheetSelection<TItem>(
   const [lastClickAction, setLastClickAction] = createSignal<"select" | "deselect">("select");
 
   function getItemSelectable(item: TItem): boolean | string {
-    if (!props.itemSelectable) return true;
-    return props.itemSelectable(item);
+    if (!props.isItemSelectable) return true;
+    return props.isItemSelectable(item);
   }
 
   function toggleSelect(item: TItem): void {

package/src/components/data/sheet/hooks/useDataSheetSorting.ts

@@ -1,7 +1,7 @@
 import { createMemo, type Accessor } from "solid-js";
 import { createControllableSignal } from "../../../../hooks/createControllableSignal";
-import { applySorting } from "../sheetUtils";
-import type { SortingDef } from "../types";
+import { applySorting } from "../DataSheet.utils";
+import type { SortingDef } from "../DataSheet.types";
 
 export interface UseDataSheetSortingOptions<TItem> {
   sorts: Accessor<SortingDef[] | undefined>;

package/src/components/disclosure/Dialog.tsx

@@ -55,10 +55,8 @@ export interface DialogShowOptions {
   resizable?: boolean;
   /** Draggable */
   draggable?: boolean;
-  /** Floating mode (fixed to bottom-right) */
-  float?: boolean;
-  /** Fill full screen */
-  fill?: boolean;
+  /** Display mode */
+  mode?: "float" | "fill";
   /** Initial width (px) */
   width?: number;
   /** Initial height (px) */
@@ -72,7 +70,7 @@ export interface DialogShowOptions {
   /** Custom header style */
   headerStyle?: JSX.CSSProperties | string;
   /** Confirmation function before closing (return false to cancel) */
-  canDeactivate?: () => boolean;
+  beforeClose?: () => boolean;
 }
 
 /** Extract result type from component's close prop */
@@ -123,10 +121,8 @@ export interface DialogProps {
   resizable?: boolean;
   /** Draggable (default: true) */
   draggable?: boolean;
-  /** Floating mode (no backdrop) */
-  float?: boolean;
-  /** Full-screen mode */
-  fill?: boolean;
+  /** Display mode */
+  mode?: "float" | "fill";
   /** Width */
   width?: number;
   /** Height */
@@ -140,7 +136,7 @@ export interface DialogProps {
   /** Header style */
   headerStyle?: JSX.CSSProperties | string;
   /** Confirmation function before closing */
-  canDeactivate?: () => boolean;
+  beforeClose?: () => boolean;
   /** Callback after close animation completes */
   onCloseComplete?: () => void;
   /** Additional CSS class */
@@ -219,15 +215,14 @@ const DialogInner: ParentComponent<DialogProps> = (props) => {
     "closeOnEscape",
     "resizable",
     "draggable",
-    "float",
-    "fill",
+    "mode",
     "width",
     "height",
     "minWidth",
     "minHeight",
     "position",
     "headerStyle",
-    "canDeactivate",
+    "beforeClose",
     "onCloseComplete",
     "class",
     "children",
@@ -311,9 +306,9 @@ const DialogInner: ParentComponent<DialogProps> = (props) => {
     onCleanup(() => unregisterDialog(el));
   });
 
-  // Attempt to close (check canDeactivate)
+  // Attempt to close (check beforeClose)
   const tryClose = () => {
-    if (local.canDeactivate && !local.canDeactivate()) return;
+    if (local.beforeClose && !local.beforeClose()) return;
     setOpen(false);
   };
 
@@ -450,7 +445,7 @@ const DialogInner: ParentComponent<DialogProps> = (props) => {
   const dialogStyle = (): JSX.CSSProperties => {
     const style: JSX.CSSProperties = {};
 
-    if (local.fill) {
+    if (local.mode === "fill") {
       style.width = "100%";
       style.height = "100%";
     } else {
@@ -499,8 +494,8 @@ const DialogInner: ParentComponent<DialogProps> = (props) => {
     clsx(
       "fixed bottom-0 left-0 right-0 top-0",
       "flex flex-col items-center",
-      !local.fill && "pt-[calc(3rem+0.5rem)]",
-      local.float && "pointer-events-none",
+      local.mode !== "fill" && "pt-[calc(3rem+0.5rem)]",
+      local.mode === "float" && "pointer-events-none",
     );
 
   // Backdrop class
@@ -523,14 +518,14 @@ const DialogInner: ParentComponent<DialogProps> = (props) => {
       "mx-auto",
       "w-fit min-w-[200px]",
       bg.surface,
-      local.float
+      local.mode === "float"
         ? clsx("shadow-md dark:shadow-black/30", "border", border.subtle)
         : "shadow-2xl dark:shadow-black/40",
-      local.fill ? "rounded-none border-none" : "rounded-lg",
+      local.mode === "fill" ? "rounded-none border-none" : "rounded-lg",
       "overflow-hidden",
       "flex flex-col",
       "focus:outline-none",
-      local.float && "pointer-events-auto",
+      local.mode === "float" && "pointer-events-auto",
       animationClass(),
     );
 
@@ -545,7 +540,7 @@ const DialogInner: ParentComponent<DialogProps> = (props) => {
           <ActionProvider>
           <div ref={setWrapperRef} data-dialog class={wrapperClass()}>
             {/* Backdrop */}
-            <Show when={!local.float}>
+            <Show when={local.mode !== "float"}>
               <div data-dialog-backdrop class={backdropClass()} onClick={handleBackdropClick} />
             </Show>
 
@@ -556,7 +551,7 @@ const DialogInner: ParentComponent<DialogProps> = (props) => {
               }}
               data-dialog-panel
               role="dialog"
-              aria-modal={local.float ? undefined : true}
+              aria-modal={local.mode === "float" ? undefined : true}
               aria-labelledby={hasHeader() ? headerId : undefined}
               tabIndex={0}
               class={twMerge(dialogBaseClass(), local.class)}
@@ -637,7 +632,7 @@ export const Dialog = Object.assign(DialogInner, {
 interface DialogEntry {
   id: string;
   component: Component<any>;
-  props: Record<string, any>;
+  props: Record<string, unknown>;
   options: DialogShowOptions;
   resolve: (result: unknown) => void;
   open: Accessor<boolean>;
@@ -736,15 +731,14 @@ export const DialogProvider: ParentComponent<DialogProviderProps> = (props) => {
               closeOnEscape={entry.options.closeOnEscape}
               resizable={entry.options.resizable}
               draggable={entry.options.draggable}
-              float={entry.options.float}
-              fill={entry.options.fill}
+              mode={entry.options.mode}
               width={entry.options.width}
               height={entry.options.height}
               minWidth={entry.options.minWidth}
               minHeight={entry.options.minHeight}
               position={entry.options.position}
               headerStyle={entry.options.headerStyle}
-              canDeactivate={entry.options.canDeactivate}
+              beforeClose={entry.options.beforeClose}
             >
               <Show when={entry.options.header !== undefined}>
                 <Dialog.Header>{entry.options.header}</Dialog.Header>

package/src/components/disclosure/Dropdown.tsx

@@ -85,11 +85,6 @@ export interface DropdownProps {
   children: JSX.Element;
 }
 
-interface DropdownComponent extends ParentComponent<DropdownProps> {
-  Trigger: typeof DropdownTrigger;
-  Content: typeof DropdownContent;
-}
-
 /**
  * Dropdown popup component
  *
@@ -480,5 +475,5 @@ const DropdownInner: ParentComponent<DropdownProps> = (props: DropdownProps) =>
 export const Dropdown = Object.assign(DropdownInner, {
   Trigger: DropdownTrigger,
   Content: DropdownContent,
-}) as unknown as DropdownComponent;
+});
 //#endregion

package/src/components/disclosure/Tabs.tsx

@@ -98,11 +98,6 @@ interface TabsProps {
   children?: JSX.Element;
 }
 
-interface TabsComponent {
-  (props: TabsProps): JSX.Element;
-  Tab: typeof TabsTabInner;
-}
-
 const TabsInner: ParentComponent<TabsProps> = (props) => {
   const [local, rest] = splitProps(props, [
     "value",
@@ -138,5 +133,5 @@ const TabsInner: ParentComponent<TabsProps> = (props) => {
 //#region Export
 export const Tabs = Object.assign(TabsInner, {
   Tab: TabsTabInner,
-}) as unknown as TabsComponent;
+});
 //#endregion

package/src/components/display/Barcode.tsx

@@ -1,118 +1,7 @@
 import { type Component, createEffect, splitProps, type JSX } from "solid-js";
 import { twMerge } from "tailwind-merge";
 import bwipjs from "bwip-js/browser";
-
-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";
+import type { BarcodeType } from "./Barcode.types";
 
 export interface BarcodeProps extends JSX.HTMLAttributes<HTMLDivElement> {
   type: BarcodeType;
@@ -146,7 +35,9 @@ export const Barcode: Component<BarcodeProps> = (props) => {
           svgEl.setAttribute("height", parts[3]);
         }
       }
-    } catch {
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.warn("Barcode render failed:", err);
       containerRef.innerHTML = "";
     }
   });