@suphark/ui 0.59.1 → 0.61.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.59.1",
+  "version": "0.61.0",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",

package/src/components/data-table/data-table-filter-sections.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { Checkbox } from "@suphark/ui/components/ui/checkbox";
+import { cn } from "@suphark/ui/lib/utils";
+import type { Table } from "@tanstack/react-table";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+import type { FacetedFilterConfig } from "./types";
+
+/**
+ * `variant="quiet"`: ตัวกรองแบบรายการติ๊กในแผ่นตัวกรอง — หัวข้อเปิดไว้ตั้งแต่แรก แถวสูง 44px
+ * แต่ละค่ามีจำนวนแถวกำกับ (แทนปุ่ม popover ต่อคอลัมน์ของตัวกรองปกติ)
+ */
+export function DataTableFilterSections<TData>({
+  table,
+  filters,
+}: {
+  table: Table<TData>;
+  filters: FacetedFilterConfig[];
+}) {
+  return (
+    <div className="flex flex-col">
+      {filters.map((filter) => (
+        <FilterSection key={filter.columnId} table={table} filter={filter} />
+      ))}
+    </div>
+  );
+}
+
+function FilterSection<TData>({
+  table,
+  filter,
+}: {
+  table: Table<TData>;
+  filter: FacetedFilterConfig;
+}) {
+  const [open, setOpen] = React.useState(true);
+  const id = React.useId();
+  const column = table.getColumn(filter.columnId);
+  if (!column) return null;
+  // จำนวนต่อค่า: ใช้ที่แอปส่งมา (`getFacetedUniqueValues`) ถ้ามี ไม่งั้นนับเองจากแถวที่ผ่านตัวกรองคอลัมน์อื่น
+  const provided = column.getFacetedUniqueValues();
+  const counted = new Map<unknown, number>();
+  if (!provided || provided.size === 0) {
+    for (const row of column.getFacetedRowModel().rows) {
+      const key = String(row.getValue(filter.columnId));
+      counted.set(key, (counted.get(key) ?? 0) + 1);
+    }
+  }
+  const facets = provided && provided.size > 0 ? provided : counted;
+  const current = column.getFilterValue();
+  const selected = new Set(Array.isArray(current) ? current.map(String) : []);
+
+  const toggle = (value: string) => {
+    const next = new Set(selected);
+    if (next.has(value)) next.delete(value);
+    else next.add(value);
+    column.setFilterValue(next.size ? Array.from(next) : undefined);
+  };
+
+  return (
+    <section className="border-b last:border-b-0">
+      <button
+        type="button"
+        aria-expanded={open}
+        aria-controls={id}
+        onClick={() => setOpen((value) => !value)}
+        className="flex h-11 w-full items-center justify-between text-muted-foreground text-sm outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+      >
+        <span>
+          {filter.title}
+          {selected.size > 0 && (
+            <span className="ms-1.5 font-semibold text-foreground tabular-nums">
+              {selected.size}
+            </span>
+          )}
+        </span>
+        <ChevronDown
+          aria-hidden="true"
+          className={cn("size-4 transition-transform", open && "rotate-180")}
+        />
+      </button>
+      <div id={id} hidden={!open}>
+        {filter.options.map((option) => {
+          const value = String(option.value);
+          const count = facets?.get(option.value) ?? facets?.get(value);
+          return (
+            <label
+              key={value}
+              className="flex h-11 cursor-pointer items-center gap-3 border-t text-sm first:border-t-0"
+            >
+              <Checkbox
+                aria-label={option.label}
+                checked={selected.has(value)}
+                onCheckedChange={() => toggle(value)}
+              />
+              {option.icon && <option.icon className="size-4 text-muted-foreground" />}
+              <span className="min-w-0 flex-1 truncate">{option.label}</span>
+              {count !== undefined && (
+                <span className="text-muted-foreground text-xs tabular-nums">{count}</span>
+              )}
+            </label>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

package/src/components/data-table/data-table-states.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { cn } from "@suphark/ui/lib/utils";
+import type { Table } from "@tanstack/react-table";
+import { Inbox, SearchX, TriangleAlert } from "lucide-react";
+import type React from "react";
+
+/**
+ * กล่องสถานะกลางตาราง (ไม่พบ / ว่าง / ผิดพลาด) — บนมือถือจำกัดความกว้างเท่าจอ
+ * เพื่อไม่ให้ไปอยู่กลางตารางที่เลื่อนแนวนอน (sticky ที่ขอบซ้ายของกล่องเลื่อน)
+ */
+function StateBox({
+  icon,
+  title,
+  hint,
+  tone,
+  children,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  hint?: string;
+  tone?: "danger";
+  children?: React.ReactNode;
+}) {
+  return (
+    <div
+      role={tone === "danger" ? "alert" : "status"}
+      className="sticky left-0 mx-auto flex w-[calc(100vw-3rem)] max-w-full flex-col items-center gap-1.5 px-4 py-8 text-center sm:w-auto"
+    >
+      <div
+        aria-hidden="true"
+        className={cn(
+          "flex size-10 items-center justify-center rounded-full [&_svg]:size-5",
+          tone === "danger"
+            ? "bg-destructive-subtle text-destructive-subtle-foreground"
+            : "bg-muted text-muted-foreground",
+        )}
+      >
+        {icon}
+      </div>
+      <h3 className="mt-1.5 font-semibold text-sm">{title}</h3>
+      {hint && <p className="max-w-[34ch] text-muted-foreground text-xs">{hint}</p>}
+      {children && (
+        <div className="mt-2 flex flex-wrap justify-center gap-2 [&_button]:pointer-coarse:h-11">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** ไม่พบรายการ: มีตัวกรอง/คำค้นอยู่ → ล้างได้ทันที · ไม่มีเลย → ว่างจริง (+ปุ่มที่แอปส่งมา) */
+export function DataTableEmptyState<TData>({
+  table,
+  preservedFilterIds = [],
+  resourceName,
+  emptyAction,
+}: {
+  table: Table<TData>;
+  preservedFilterIds?: string[];
+  resourceName?: string;
+  emptyAction?: React.ReactNode;
+}) {
+  const text = useUiText();
+  const keep = new Set(preservedFilterIds);
+  const query = String(table.getState().globalFilter ?? "").trim();
+  const hasColumnFilters = table.getState().columnFilters.some((filter) => !keep.has(filter.id));
+  if (!query && !hasColumnFilters) {
+    return (
+      <StateBox
+        icon={<Inbox />}
+        title={
+          resourceName
+            ? (text.table?.emptyTitleOf ?? "ยังไม่มี{resource}").replace("{resource}", resourceName)
+            : (text.table?.emptyTitle ?? "ยังไม่มีรายการ")
+        }
+        hint={text.table?.emptyHint ?? "เมื่อสร้างแล้วจะแสดงที่นี่"}
+      >
+        {emptyAction}
+      </StateBox>
+    );
+  }
+  const clearQuery = () => table.setGlobalFilter("");
+  const clearAll = () => {
+    table.setColumnFilters((filters) => filters.filter((filter) => keep.has(filter.id)));
+    table.setGlobalFilter("");
+  };
+  return (
+    <StateBox
+      icon={<SearchX />}
+      title={
+        query
+          ? (text.table?.noMatchQuery ?? 'ไม่พบรายการที่ตรงกับ "{query}"').replace("{query}", query)
+          : (text.table?.noMatch ?? "ไม่พบรายการที่ตรงกัน")
+      }
+      hint={text.table?.noMatchHint ?? "ลองคำค้นอื่น หรือเอาตัวกรองออกบางตัว"}
+    >
+      <Button size="sm" onClick={clearAll}>
+        {text.table?.clearAllFilters ?? "ล้างตัวกรองทั้งหมด"}
+      </Button>
+      {query && hasColumnFilters && (
+        <Button size="sm" variant="outline" onClick={clearQuery}>
+          {text.table?.clearQuery ?? "ล้างคำค้น"}
+        </Button>
+      )}
+    </StateBox>
+  );
+}
+
+/** โหลดไม่สำเร็จ: ข้อความกลาง ๆ (ไม่แสดงข้อความดิบของระบบ) + ปุ่มลองใหม่เมื่อส่ง `onRetry` */
+export function DataTableErrorState({ onRetry }: { onRetry?: () => void }) {
+  const text = useUiText();
+  return (
+    <StateBox
+      tone="danger"
+      icon={<TriangleAlert />}
+      title={text.table?.errorTitle ?? "โหลดรายการไม่สำเร็จ"}
+      hint={text.table?.errorHint ?? "การเชื่อมต่อขัดข้อง ลองใหม่อีกครั้ง"}
+    >
+      {onRetry && (
+        <Button size="sm" onClick={onRetry}>
+          {text.table?.retry ?? "ลองใหม่"}
+        </Button>
+      )}
+    </StateBox>
+  );
+}
+
+/** skeleton ของรายการมือถือ (แถวละ 3 บรรทัด) ระหว่างโหลด */
+export function QuietMobileSkeleton({ rows }: { rows: number }) {
+  const text = useUiText();
+  return (
+    <ul
+      aria-busy="true"
+      aria-label={text.table?.loading ?? "กำลังโหลด…"}
+      className="divide-y overflow-hidden rounded-xl border bg-card sm:hidden"
+    >
+      {Array.from({ length: Math.min(rows, 5) }).map((_, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: แถว skeleton ไม่มีตัวตน ใช้ตำแหน่งเป็น key ได้
+        <li key={i} className="flex flex-col gap-2 px-4 py-3">
+          <div className="h-3 w-1/2 animate-pulse rounded bg-muted" />
+          <div className="h-3 w-4/5 animate-pulse rounded bg-muted" />
+          <div className="h-3 w-1/3 animate-pulse rounded bg-muted" />
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/components/data-table/data-table-toolbar.tsx

@@ -26,6 +26,7 @@ import type React from "react";
 import { useEffect, useRef, useState } from "react";
 import type { FacetedFilterConfig } from ".";
 import { DataTableFacetedFilter } from "./data-table-faceted-filter";
+import { DataTableFilterSections } from "./data-table-filter-sections";
 import { DataTableViewOptions } from "./data-table-view-option";
 
 interface DataTableToolbarProps<TData> {
@@ -39,6 +40,8 @@ interface DataTableToolbarProps<TData> {
   variant?: "default" | "quiet";
   density?: "comfortable" | "compact";
   onDensityChange?: (density: "comfortable" | "compact") => void;
+  /** `quiet`: ตัวนับแสดง "กำลังโหลด…" */
+  isLoading?: boolean;
 }
 
 export function DataTableToolbar<TData>({
@@ -51,6 +54,7 @@ export function DataTableToolbar<TData>({
   variant = "default",
   density = "comfortable",
   onDensityChange,
+  isLoading,
 }: DataTableToolbarProps<TData>) {
   const text = useUiText();
   const isMobile = useIsMobile();
@@ -159,23 +163,47 @@ export function DataTableToolbar<TData>({
             {text.table?.filtersDescription ?? "เลือกได้หลายเงื่อนไข ผลลัพธ์จะอัปเดตทันที"}
           </SheetDescription>
           <SheetClose
-            render={<Button variant="ghost" size="icon-sm" className="absolute top-3 right-3" />}
+            render={
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className="absolute top-3 right-3 pointer-coarse:h-11 pointer-coarse:w-11"
+              />
+            }
           >
             <X />
             <span className="sr-only">{text.table?.closeFilters ?? "ปิดตัวกรอง"}</span>
           </SheetClose>
         </SheetHeader>
         <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto px-4">
-          {renderFilterControls(true)}
+          {variant === "quiet" && facetedFilters ? (
+            <DataTableFilterSections table={table} filters={facetedFilters} />
+          ) : (
+            renderFilterControls(true)
+          )}
           {toolbarFilters}
         </div>
-        {isFiltered && (
-          <SheetFooter className="border-t">
-            <Button variant="secondary" onClick={resetUserFilters}>
-              <X />
-              ล้างตัวกรองทั้งหมด
+        {variant === "quiet" ? (
+          <SheetFooter className="grid grid-cols-2 gap-2 border-t">
+            <Button variant="outline" className="pointer-coarse:h-11" onClick={resetUserFilters}>
+              {text.table?.clearFilters ?? "ล้าง"}
             </Button>
+            <SheetClose render={<Button className="pointer-coarse:h-11" />}>
+              {(text.table?.showResults ?? "ดู {count} รายการ").replace(
+                "{count}",
+                String(table.getFilteredRowModel().rows.length),
+              )}
+            </SheetClose>
           </SheetFooter>
+        ) : (
+          isFiltered && (
+            <SheetFooter className="border-t">
+              <Button variant="secondary" onClick={resetUserFilters}>
+                <X />
+                ล้างตัวกรองทั้งหมด
+              </Button>
+            </SheetFooter>
+          )
         )}
       </SheetContent>
     </Sheet>
@@ -255,9 +283,11 @@ export function DataTableToolbar<TData>({
         })}
         <div className="ml-auto flex items-center gap-1">
           <span className="me-1 text-muted-foreground text-xs tabular-nums">
-            {(text.table?.shownOf ?? "{shown} จาก {total} รายการ")
-              .replace("{shown}", String(shown))
-              .replace("{total}", String(total))}
+            {isLoading
+              ? (text.table?.loading ?? "กำลังโหลด…")
+              : (text.table?.shownOf ?? "{shown} จาก {total} รายการ")
+                  .replace("{shown}", String(shown))
+                  .replace("{total}", String(total))}
           </span>
           {actionsComponent}
           {onDensityChange && (