npm - @goplusvn/core - Versions diffs - 0.1.11 → 0.1.13 - Mend

@goplusvn/core 0.1.11 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/CHANGELOG.md +61 -0
package/package.json +1 -1
package/src/crud/components/crud-card-view.tsx +44 -13
package/src/crud/components/crud-detail-dialog.tsx +355 -0
package/src/crud/components/crud-dialog.tsx +2 -2
package/src/crud/components/crud-form.tsx +2 -2
package/src/crud/components/crud-page.tsx +80 -0
package/src/crud/components/crud-provider.tsx +3 -0
package/src/crud/components/crud-sheet.tsx +2 -2
package/src/crud/components/crud-table.tsx +12 -0
package/src/crud/components/index.tsx +1 -0
package/src/crud/lib/crud-utils.ts +81 -0
package/src/providers/index.tsx +19 -0
package/src/styles/base.css +41 -0
package/src/types/index.ts +14 -0
package/src/ui/data-display/data-table/data-table.tsx +18 -1
package/src/ui/feedback/index.tsx +2 -0
package/src/ui/layout/customizer.tsx +12 -42
package/src/ui/layout/sidebar.tsx +7 -5
package/src/ui/primitives/body-lock-guard.tsx +64 -0
package/src/ui/primitives/body-lock.ts +68 -0
package/src/ui/primitives/client.ts +2 -0
package/src/ui/primitives/sidebar.tsx +25 -4
package/src/ui/primitives/use-release-stuck-body-lock.ts +9 -16

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,66 @@
 # Changelog
+## 0.1.13 — Customizer: make radius, density & inset/floating actually apply
+The Customizer exposed controls that stored a value but changed nothing on
+screen. Wired them up at the source so every app using core gets them working:
+- **Radius ("Bo góc") now applies.** `SettingsProvider` drives the real
+  `--radius` token from `settings.radius`; Tailwind's `@theme inline` derives
+  `rounded-sm/md/lg/xl` from it, so the whole UI re-rounds live (0 → square,
+  1rem → fully rounded). Previously nothing read `settings.radius`.
+- **Density ("Mật độ") now applies.** `SettingsProvider` sets
+  `data-density="compact"` on `<html>`; `base.css` tightens the global
+  `--spacing` scale (0.25rem → 0.215rem) so every spacing utility packs in
+  compact mode. Previously `useDensity()` was read nowhere.
+- **Inset / floating sidebar no longer renders a harsh frame.** Core's default
+  sidebar is deep navy, and shadcn's inset/floating paints the page frame with
+  that sidebar colour — reading as a broken-looking block. The frame is now the
+  soft `--muted` neutral, so the content floats as a card on a calm page
+  (adapts to dark mode; the rounded-xl + shadow core already applies stay).
+- **Inset / floating collapsed rail no longer looks squeezed.** In icon mode the
+  floating/inset content box is `--sidebar-width-icon + 8px` (56px) but had
+  `px-2.5` padding, leaving the pill only 36px — narrower than the default 48px
+  rail. Reduced to `px-1` so the pill is a comfortable 48px with a 4px floating
+  gutter.
+- **Inset / floating sidebar corners are softened.** The floating panel was
+  `rounded-lg` and the inset panel had NO radius (a sharp navy block whose
+  top-right corner met the header as a hard 90°). Both now use `rounded-xl`
+  (matching the inset content card) so the sidebar reads as a soft floating
+  panel — the header/sidebar junction is a gentle curve, not a rough corner.
+  The floating content area also rounds both left corners
+  (`rounded-l-xl`, clipping the sticky header + footer via overflow-hidden) so
+  its whole left edge hugs the floating sidebar with soft curves; the right
+  edge stays flush to the viewport (inset already rounds via its `rounded-xl`
+  card). Finally, the header's own BOTTOM-left corner is rounded in both
+  variants (base.css: `[data-variant=floating|inset] ~ main > header`), so its
+  divider curves into the left edge instead of ending in a hard inner corner.
+  And the content no longer touches the sidebar: inset drops its `ml-0` (so the
+  uniform `m-2` leaves a left gap) and floating gains `ml-2`, giving a small
+  gap between the sidebar and the content/header.
+- **"Ẩn ngoài" (`collapsible="offcanvas"`) can finally hide the sidebar.**
+  `AppSidebar` force-remapped `offcanvas → icon`, so the option collapsed to an
+  icon rail instead of hiding — identical to "Biểu tượng" and impossible to fully
+  hide the sidebar. The choice is now honoured as-is: offcanvas slides the
+  sidebar off-screen (reopen via the header toggle), icon → rail.
+- **Dropped the "none" (Tắt) collapsible option from the Customizer.** Locking
+  the sidebar expanded made the header collapse-toggle a no-op — a
+  conflicting/dead control. The picker now offers only offcanvas + icon, both of
+  which the toggle actually drives. (`none` remains a valid type for any code
+  that sets it directly; it's just no longer offered in the UI.)
+- **Dropped the "Bố cục" (layout: horizontal/vertical) control from the
+  Customizer.** The horizontal layout swaps the whole nav for a top menubar,
+  which turns every sidebar option ("Kiểu thanh bên", "Thu gọn thanh bên") into
+  a no-op — the same dead-control problem. The customizer now locks to the
+  vertical sidebar the apps are designed around (`defaultSettings.layout` stays
+  `vertical`; `HorizontalLayout` is untouched for code that sets it directly).
+- **Non-collapsing sidebar (`collapsible="none"`) is now readable.** It rendered
+  `bg-sidebar text-sidebar-foreground` (the deep navy), but the group labels +
+  active item are `text-primary`, giving ~1.9:1 contrast (unreadable) on that
+  navy. A non-collapsing sidebar is permanently *expanded*, so it now uses the
+  expanded surface (`bg-background` / `text-foreground`), matching the rest of
+  the design (labels-on-light) — contrast jumps to ~9:1.
 ## 0.1.11 — print: force light colours on the print surface
 - **Fix faded print output in dark mode.** Print pages render under the app's

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@goplusvn/core",
   "description": "GoPlusVN Platform Kit - ERP kernel: layout, RBAC, CRUD, multi-tenant, system pages",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

package/src/crud/components/crud-card-view.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 "use client";
 import { useState } from "react";
+import type { ReactNode } from "react";
 import {
   getCoreRowModel,
   getPaginationRowModel,
@@ -9,7 +10,11 @@ import {
 import type { CrudPermissions, CrudResponse, EntityConfig } from "../../types";
-import { isFieldVisibleInTable, sortFieldsByOrder } from "../lib/crud-utils";
+import {
+  getRowDisplay,
+  isFieldVisibleInTable,
+  sortFieldsByOrder,
+} from "../lib/crud-utils";
 import { formatFieldValue } from "../lib/field-formatter";
 import { Badge } from "../../ui";
@@ -34,6 +39,7 @@ interface CrudCardViewProps<TData = Record<string, unknown>> {
     rowId: string,
     rowData: Record<string, unknown>,
   ) => void | Promise<void>;
+  onRowClick?: (rowId: string, rowData: Record<string, unknown>) => void;
   onEmptyStateAction?: {
     onCreate?: () => void;
     onClearSearch?: () => void;
@@ -49,6 +55,7 @@ export function CrudCardView<TData extends Record<string, unknown>>({
   onEdit,
   onDelete,
   onCustomAction,
+  onRowClick,
   onEmptyStateAction,
 }: CrudCardViewProps<TData>) {
   // ✅ All hooks must be called before any early returns
@@ -91,9 +98,12 @@ export function CrudCardView<TData extends Record<string, unknown>>({
   const primaryField = config.fields.find(
     (f) => f.name === config.displayField,
   );
-  const secondaryFields = visibleFields
-    .filter((f) => f.name !== config.displayField)
-    .slice(0, 3); // Show max 3 secondary fields
+  // Show EVERY table-visible field in the card (mirrors the table columns), not
+  // just a 3-field preview. The resolved title field is skipped per-row at render
+  // time to avoid duplicating it.
+  const secondaryFields = visibleFields.filter(
+    (f) => f.name !== config.displayField,
+  );
   if (loading) {
     return (
@@ -145,15 +155,37 @@ export function CrudCardView<TData extends Record<string, unknown>>({
         {data.data.map((row) => {
           const rowId = String(row[config.idField]);
           const isSelected = selectedRows.has(rowId);
-          const primaryValue = row[config.displayField];
-          const primaryLabel = primaryField?.label || config.displayField;
+          // Friendly title — falls back when displayField is the id field.
+          const display = getRowDisplay(config, row as Record<string, unknown>);
+          const primaryContent = display.field?.renderCell
+            ? (display.field.renderCell(display.value, row) as ReactNode)
+            : display.field
+              ? formatFieldValue(display.value, display.field) ||
+                String(display.value ?? "")
+              : String(display.value ?? "");
           return (
             <Card
               key={rowId}
               className={`transition-all duration-150 hover:shadow-md ${
                 isSelected ? "ring-2 ring-primary" : ""
-              }`}
+              } ${onRowClick ? "cursor-pointer" : ""}`}
+              onClick={
+                onRowClick
+                  ? (e) => {
+                      // Skip clicks on interactive controls (checkbox, actions menu)
+                      const target = e.target as HTMLElement;
+                      if (
+                        target.closest(
+                          'button, a, input, label, [role="checkbox"], [role="menuitem"], [data-no-row-click]',
+                        )
+                      ) {
+                        return;
+                      }
+                      onRowClick(rowId, row as Record<string, unknown>);
+                    }
+                  : undefined
+              }
             >
               <CardHeader className="pb-3">
                 <div className="flex items-start justify-between gap-2">
@@ -163,16 +195,12 @@ export function CrudCardView<TData extends Record<string, unknown>>({
                         checked={isSelected}
                         onCheckedChange={() => toggleRowSelection(rowId)}
                         className="mt-0.5 shrink-0"
-                        aria-label={`Select ${primaryValue}`}
+                        aria-label={`Select ${String(display.value ?? "")}`}
                       />
                     )}
                     <div className="flex-1 min-w-0">
                       <h3 className="font-semibold text-sm truncate">
-                        {primaryField?.renderCell
-                          ? (primaryField.renderCell(primaryValue, row) as any)
-                          : primaryField
-                            ? formatFieldValue(primaryValue, primaryField)
-                            : String(primaryValue ?? "")}
+                        {primaryContent}
                       </h3>
                       {primaryField?.description && (
                         <p className="text-xs text-muted-foreground mt-0.5">
@@ -199,6 +227,9 @@ export function CrudCardView<TData extends Record<string, unknown>>({
               <CardContent className="pt-0">
                 <div className="space-y-2">
                   {secondaryFields.map((field) => {
+                    // Skip the field already used as the card title (avoid dupes,
+                    // e.g. when displayField falls back to a name/code field).
+                    if (field.name === display.field?.name) return null;
                     const value = row[field.name];
                     if (value === null || value === undefined || value === "") {
                       return null;

package/src/crud/components/crud-detail-dialog.tsx ADDED Viewed

@@ -0,0 +1,355 @@
+"use client";
+import { useEffect, useMemo, useState } from "react";
+import type { ReactNode } from "react";
+import { Pencil, Trash2 } from "lucide-react";
+import type {
+  CrudPermissions,
+  DynamicIconNameType,
+  EntityConfig,
+  FieldConfig,
+} from "../../types";
+import {
+  Badge,
+  Button,
+  DialogClose,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DynamicIcon,
+  ScrollArea,
+  StatusBadge,
+} from "../../ui";
+import {
+  getRowDisplay,
+  isFieldVisibleInDetail,
+  sortFieldsByOrder,
+} from "../lib/crud-utils";
+import { formatFieldValue } from "../lib/field-formatter";
+import { dataLoader } from "../lib/data-loader";
+interface CrudDetailDialogTranslations {
+  detail?: string;
+  edit?: string;
+  delete?: string;
+  close?: string;
+}
+interface CrudDetailDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  config: EntityConfig;
+  data?: Record<string, unknown>;
+  permissions: CrudPermissions;
+  translations?: CrudDetailDialogTranslations;
+  onEdit?: (rowId: string, rowData: Record<string, unknown>) => void;
+  onDelete?: (rowId: string, rowData: Record<string, unknown>) => void;
+}
+/**
+ * Resolve a relation FK column's label from the relation object the server already
+ * included on the row (e.g. `branchId` → `row.branch.name`). Mirrors the same helper
+ * in `crud-table.tsx` so detail values match table cells exactly.
+ */
+function resolveIncludedRelationLabel(
+  field: { name?: string; dataSource?: { labelField?: string } },
+  row: Record<string, unknown> | undefined,
+): string | undefined {
+  const name = field?.name;
+  if (!field?.dataSource || !row || !name || !name.endsWith("Id")) {
+    return undefined;
+  }
+  const relationKey = name.slice(0, -2);
+  if (!relationKey) return undefined;
+  const rel = row[relationKey];
+  if (!rel || typeof rel !== "object" || Array.isArray(rel)) return undefined;
+  const labelField = field.dataSource.labelField || "name";
+  const label = (rel as Record<string, unknown>)[labelField];
+  return label != null && label !== "" ? String(label) : undefined;
+}
+type OptionsMap = Map<
+  string,
+  Array<{ label: string; value: string | number | boolean }>
+>;
+/**
+ * Render a single field's value read-only, mirroring the table cell logic so the
+ * detail view stays consistent with the list. Note `renderCell` is only available
+ * on the non-serialized (client-config) path; through `EntityCrudPage` it is
+ * stripped, so the dataSource / relation / formatter fallbacks carry the load.
+ */
+function renderFieldValue(
+  field: FieldConfig,
+  row: Record<string, unknown>,
+  options: OptionsMap,
+): ReactNode {
+  const value = row[field.name];
+  if (field.renderCell) {
+    return field.renderCell(value, row) as ReactNode;
+  }
+  const isEmpty =
+    value === null ||
+    value === undefined ||
+    value === "" ||
+    (Array.isArray(value) && value.length === 0);
+  if (field.type === "switch" || field.type === "boolean") {
+    if (typeof value === "boolean" && !field.options) {
+      return (
+        <StatusBadge
+          status={value ? "active" : "inactive"}
+          label={value ? "Có" : "Không"}
+        />
+      );
+    }
+    const option = field.options?.find((opt) => {
+      const optValue = typeof opt === "object" ? opt.value : opt;
+      return optValue === value;
+    });
+    const label =
+      (typeof option === "object" ? option.label : option) ?? String(value);
+    if (isEmpty) return <span className="text-muted-foreground">—</span>;
+    return <StatusBadge status={value} label={String(label)} />;
+  }
+  if (isEmpty) {
+    return <span className="text-muted-foreground">—</span>;
+  }
+  if (
+    field.dataSource &&
+    (field.type === "select" || field.type === "multiselect")
+  ) {
+    const loaded = options.get(field.name) || [];
+    if (field.type === "multiselect" && Array.isArray(value)) {
+      const labels = value.map((val) => {
+        const opt = loaded.find((o) => String(o.value) === String(val));
+        return opt ? opt.label : String(val);
+      });
+      return (
+        <div className="flex flex-wrap gap-1">
+          {labels.map((l, i) => (
+            <Badge key={`${l}-${i}`} variant="secondary" className="font-normal">
+              {l}
+            </Badge>
+          ))}
+        </div>
+      );
+    }
+    const opt = loaded.find((o) => String(o.value) === String(value));
+    return (
+      opt?.label ??
+      resolveIncludedRelationLabel(field, row) ??
+      formatFieldValue(value, field)
+    );
+  }
+  if (field.type === "image" && typeof value === "string") {
+    // eslint-disable-next-line @next/next/no-img-element
+    return (
+      <img
+        src={value}
+        alt={field.label}
+        className="h-16 w-16 rounded-md border border-border object-cover"
+      />
+    );
+  }
+  if (field.type === "url" && typeof value === "string") {
+    return (
+      <a
+        href={value}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-primary underline-offset-2 hover:underline break-all"
+      >
+        {value}
+      </a>
+    );
+  }
+  if (field.type === "email" && typeof value === "string") {
+    return (
+      <a
+        href={`mailto:${value}`}
+        className="text-primary underline-offset-2 hover:underline break-all"
+      >
+        {value}
+      </a>
+    );
+  }
+  if (field.type === "textarea" || field.type === "json") {
+    const text =
+      field.type === "json" && typeof value === "object"
+        ? JSON.stringify(value, null, 2)
+        : formatFieldValue(value, field) || String(value);
+    return (
+      <span className="whitespace-pre-wrap break-words">{text}</span>
+    );
+  }
+  return formatFieldValue(value, field) || String(value);
+}
+export function CrudDetailDialog({
+  open,
+  onOpenChange,
+  config,
+  data,
+  permissions,
+  translations,
+  onEdit,
+  onDelete,
+}: CrudDetailDialogProps) {
+  // Load options for select/multiselect fields (same source as the table) so
+  // relation/enum values resolve to labels instead of raw ids.
+  const [dataSourceOptions, setDataSourceOptions] = useState<OptionsMap>(
+    new Map(),
+  );
+  useEffect(() => {
+    if (!config || !open) return;
+    const fieldsWithDataSource = config.fields.filter(
+      (field) =>
+        field.dataSource &&
+        (field.type === "select" || field.type === "multiselect"),
+    );
+    if (fieldsWithDataSource.length === 0) return;
+    let cancelled = false;
+    (async () => {
+      const optionsMap: OptionsMap = new Map();
+      await Promise.all(
+        fieldsWithDataSource.map(async (field) => {
+          if (!field.dataSource) return;
+          try {
+            const opts = await dataLoader.loadOptions(field.dataSource);
+            optionsMap.set(field.name, opts);
+          } catch (error) {
+            console.error(`Failed to load options for ${field.name}:`, error);
+            optionsMap.set(field.name, []);
+          }
+        }),
+      );
+      if (!cancelled) setDataSourceOptions(optionsMap);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [config, open]);
+  const fields = useMemo(
+    () =>
+      sortFieldsByOrder(config.fields).filter((f) =>
+        isFieldVisibleInDetail(f, config),
+      ),
+    [config],
+  );
+  const rowId = data ? String(data[config.idField]) : "";
+  // Resolve a friendly title (falls back when displayField is the id field).
+  const display = data ? getRowDisplay(config, data) : undefined;
+  const title = display
+    ? display.field
+      ? formatFieldValue(display.value, display.field) || String(display.value)
+      : String(display.value)
+    : config.label;
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange} modal={true}>
+      <DialogContent className="max-w-2xl max-h-[90vh] sm:max-h-[90vh] h-[100vh] sm:h-auto rounded-none sm:rounded-lg overflow-hidden flex flex-col p-0 gap-0">
+        {/* Header */}
+        <DialogHeader className="bg-background border-b px-4 sm:px-6 pt-4 sm:pt-6 pb-3 sm:pb-4 text-left space-y-0 shrink-0">
+          <div className="flex items-center gap-2 sm:gap-3 min-w-0">
+            {config.iconName && (
+              <div className="p-1.5 rounded-lg bg-primary/10 shrink-0">
+                <DynamicIcon
+                  name={config.iconName as DynamicIconNameType}
+                  className="h-4 w-4 sm:h-5 sm:w-5 text-primary"
+                />
+              </div>
+            )}
+            <div className="min-w-0 flex-1">
+              <DialogTitle className="text-lg sm:text-xl font-bold truncate">
+                {title}
+              </DialogTitle>
+              <DialogDescription className="mt-0.5 text-xs text-muted-foreground">
+                {translations?.detail || "Chi tiết"} · {config.label}
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+        {/* Body */}
+        <ScrollArea className="flex-1 min-h-0">
+          {data ? (
+            <dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4 px-4 sm:px-6 py-4">
+              {fields.map((field) => {
+                const spanFull =
+                  field.fullWidth ||
+                  field.type === "textarea" ||
+                  field.type === "json" ||
+                  field.type === "image";
+                return (
+                  <div
+                    key={field.name}
+                    className={`min-w-0 ${spanFull ? "sm:col-span-2" : ""}`}
+                  >
+                    <dt className="text-xs font-medium text-muted-foreground mb-1">
+                      {field.label}
+                    </dt>
+                    <dd className="text-sm text-foreground break-words">
+                      {renderFieldValue(field, data, dataSourceOptions)}
+                    </dd>
+                  </div>
+                );
+              })}
+            </dl>
+          ) : (
+            <div className="px-6 py-10 text-center text-sm text-muted-foreground">
+              —
+            </div>
+          )}
+        </ScrollArea>
+        {/* Footer actions */}
+        <DialogFooter className="border-t bg-background px-4 sm:px-6 py-3 shrink-0 flex-row justify-end gap-2 sm:gap-2">
+          {permissions.delete && data && onDelete && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-destructive hover:text-destructive mr-auto"
+              onClick={() => onDelete(rowId, data)}
+            >
+              <Trash2 className="mr-1.5 h-4 w-4" />
+              {translations?.delete || "Xóa"}
+            </Button>
+          )}
+          <DialogClose asChild>
+            <Button variant="outline" size="sm">
+              {translations?.close || "Đóng"}
+            </Button>
+          </DialogClose>
+          {permissions.update && data && onEdit && (
+            <Button size="sm" onClick={() => onEdit(rowId, data)}>
+              <Pencil className="mr-1.5 h-4 w-4" />
+              {translations?.edit || "Sửa"}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/crud/components/crud-dialog.tsx CHANGED Viewed

@@ -310,8 +310,8 @@ export function CrudDialog({
           </div>
         </DialogHeader>
-        {/* Scrollable Form Content */}
-        <div className="flex-1 overflow-y-auto px-4 sm:px-6 py-4">
+        {/* Scrollable Form Content — no bottom padding so the form's footer sits flush */}
+        <div className="flex-1 overflow-y-auto px-4 sm:px-6 pt-4">
           <CrudForm
             key={`${config.name}-${mode}-${initialData?.id || "new"}`}
             ref={formRef}

package/src/crud/components/crud-form.tsx CHANGED Viewed

@@ -591,8 +591,8 @@ const CrudFormComponent = forwardRef<HTMLFormElement, CrudFormProps>(
             </div>
           )}
-          {/* Form Actions */}
-          <div className="flex items-center justify-between gap-2 pt-4 border-t sticky bottom-0 bg-background -mx-4 sm:-mx-6 px-4 sm:px-6 pb-0">
+          {/* Form Actions — flush footer bar pinned to the bottom */}
+          <div className="flex items-center justify-between gap-2 border-t sticky bottom-0 bg-background -mx-4 sm:-mx-6 px-4 sm:px-6 py-3">
             {/* Draft indicator on left */}
             {hasDraft && mode === "create" && enableAutoSave && (
               <Badge variant="secondary" className="text-xs">