@goplusvn/core 0.1.84 → 0.1.85

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+## 0.1.85 — Hộp thoại: gỡ bẫy class `sm:` khiến trang không ghi đè được
+
+Sửa lỗi giao diện do 0.1.84 gây ra. `DialogContent` đổi mặc định thành
+`p-4 sm:p-6` và `sm:max-w-lg`; `cn()` là `twMerge` mà twMerge **chỉ khử xung đột
+trong cùng một variant**, nên `sm:p-6` / `sm:max-w-lg` sống sót khi trang truyền
+`p-0` / `max-w-2xl`, rồi thắng ở ≥640px vì nằm trong media query.
+
+Hậu quả trên app đã nâng (thingtodo): mọi hộp thoại CRUD bị bóp từ 672px xuống
+512px, cộng thêm 24px padding thừa nên đường kẻ header/footer thụt vào không
+chạm mép, và nút X mặc định của Radix lộ ra (trước đó bị header sticky che).
+
+**Đổi**
+
+- `ui/primitives/dialog.tsx` — `p-4 sm:p-6` → `p-6`; `sm:max-w-lg` → `max-w-lg`;
+  bỏ `max-w-[calc(100%-2rem)]` thừa. Giữ nguyên phần chống tràn của 0.1.84
+  (`max-h-[calc(100dvh-2rem)]`, `overscroll-contain`, `w-[calc(100%-2rem)] sm:w-full`)
+  vì chúng không xung đột với class trang truyền vào.
+- `ui/feedback/index.tsx` — `AlertDialogContent` dính đúng bẫy đó, sửa y hệt.
+  LƯU Ý cho app đang dùng: hộp thoại khai `max-w-sm` / `max-w-md` **không**
+  prefix từ nay hẹp đúng như đã khai, thay vì bị `sm:max-w-lg` kéo lên 512px.
+- `crud/components/crud-dialog.tsx` — `formWidth` từng nội suy
+  `` max-w-${...} ``: Tailwind quét class TĨNH nên class đó không bao giờ được
+  sinh ra. Thay bằng bảng ánh xạ tĩnh. Thêm `w-full` (tràn viền trên điện thoại,
+  đi cùng `h-[100vh] rounded-none`) và ẩn tường minh nút X bằng
+  `[&>button.absolute]:hidden` — trước đây nó chỉ *vô tình* bị header che.
+  Đóng bằng "Huỷ" hoặc Esc; footer sticky nên "Huỷ" luôn thấy.
+- `crud/components/crud-detail-dialog.tsx` — thêm `w-full` cho nhất quán.
+
+**Quy tắc rút ra**: class mặc định trong primitive mà trang có thể muốn ghi đè
+thì PHẢI để dạng không prefix. Muốn khác nhau theo bề rộng màn hình thì đặt ở
+phía trang, đừng đặt ở mặc định.
+
+Đã dựng thật với `core:link`: vinhhoa (từ 0.1.78) và tanloc-spartronics
+(từ 0.1.83) `type-check` + `next build` đều xanh; không mất API công khai, không
+đòi cột/bảng DB mới.
+
 # Changelog
 
 ## 0.1.81 — Cây workspace kiểu explorer, xoá/khôi phục lộ ra, thêm thành viên bằng dialog

package/package.json

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

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

@@ -269,7 +269,7 @@ export function CrudDetailDialog({
 
   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">
+      <DialogContent className="w-full 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">

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

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { CheckCircle2, Loader2 } from "lucide-react";
+import { cn } from "../../utils";
 
 import type { EntityConfig } from "../../types";
 
@@ -16,6 +17,22 @@ import { DynamicIcon } from "../../ui";
 import { CrudForm } from "./crud-form";
 import { useCrudConfig } from "./crud-context";
 
+// Tailwind quét class TĨNH — `max-w-${...}` sẽ KHÔNG được sinh ra, hộp thoại
+// mất luôn giới hạn bề rộng. Phải liệt kê nguyên chuỗi.
+const FORM_WIDTH_CLASS: Record<
+  NonNullable<EntityConfig["formWidth"]>,
+  string
+> = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+};
+
 interface CrudDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -192,7 +209,16 @@ export function CrudDialog({
   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"
+        className={cn(
+          // `w-full` là CỐ Ý: ghi đè mặc định `w-[calc(100%-2rem)]` của
+          // DialogContent để hộp thoại tràn viền trên điện thoại (đi cùng
+          // h-[100vh] + rounded-none), desktop vẫn bị max-w-* chặn lại.
+          "w-full max-h-[90vh] sm:max-h-[90vh] h-[100vh] sm:h-auto rounded-none sm:rounded-lg overflow-hidden flex flex-col p-0",
+          // Header dính (sticky z-10, nền đục) che mất nút X mặc định của
+          // Radix — ẩn hẳn cho tường minh. Đóng bằng "Huỷ" hoặc Esc.
+          "[&>button.absolute]:hidden",
+          FORM_WIDTH_CLASS[config.formWidth ?? "2xl"],
+        )}
         onInteractOutside={(e) => {
           // Prevent closing dialog when submitting or clicking on Popover
           if (isSubmitting || showSuccess) {

package/src/crud/components/crud-field-renderer.tsx

@@ -484,9 +484,9 @@ export function CrudFieldRenderer({
           name={field.name}
           render={({ field: formField }) => (
             <FormItem>
-              {field.label && <FormLabel>{field.label}</FormLabel>}
+              {field.label && <FormLabel className="font-semibold">{field.label}</FormLabel>}
               <FormControl>
-                <div className="flex items-center gap-2 pt-2">
+                <div className="flex items-center h-10">
                   <Switch
                     checked={
                       field.type === "switch"

package/src/types/index.ts

@@ -336,6 +336,7 @@ export interface EntityConfig {
   codeGeneration?: CodeGenerationConfig;
   formSections?: FormSection[];
   formMode?: FormModeConfig;
+  formWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
   rowActions?: RowAction[];
   include?: string[];
 }

package/src/ui/feedback/index.tsx

@@ -89,7 +89,10 @@ export function AlertDialogContent({
       <AlertDialogPrimitive.Content
         data-slot="alert-dialog-content"
         className={cn(
-          "fixed top-[50%] left-[50%] z-50 w-full max-w-[calc(100%_-_2rem)] grid bg-background translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-4 sm:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 w-[calc(100%_-_2rem)] sm:w-full grid bg-background translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 max-w-lg",
+          // KHÔNG để `sm:p-6` / `sm:max-w-lg` làm mặc định: twMerge chỉ khử xung
+          // đột trong cùng variant, nên trang truyền `p-0` / `max-w-sm` sẽ bị
+          // class `sm:` đè ngược ở ≥640px (đúng lỗi 0.1.84 của DialogContent).
           // Cùng lý do với DialogContent: bị neo giữa màn hình nên phải chặn
           // chiều cao, không thì mô tả dài sẽ tràn ra ngoài và không cuộn được.
           "max-h-[calc(100dvh_-_2rem)] overflow-y-auto overscroll-contain",

package/src/ui/primitives/dialog.tsx

@@ -40,7 +40,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-4 sm:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
         // Hộp thoại bị neo `top-1/2 -translate-y-1/2`, nên nếu KHÔNG chặn chiều
         // cao thì nội dung cao hơn màn hình sẽ tràn ra CẢ trên lẫn dưới và
         // không cuộn được — hỏng trên điện thoại và trên tablet xoay ngang.
@@ -48,7 +48,12 @@ const DialogContent = React.forwardRef<
         // class của trang đứng sau trong cn() nên vẫn thắng.
         "max-h-[calc(100dvh_-_2rem)] overflow-y-auto overscroll-contain",
         // Bề rộng: chừa 1rem mỗi bên trên màn hẹp thay vì dán sát mép.
-        "w-[calc(100%_-_2rem)] max-w-[calc(100%_-_2rem)] sm:w-full sm:max-w-lg",
+        // CẢNH BÁO (đã dính 0.1.84): mọi class mặc định ở đây mà trang có thể
+        // muốn ghi đè PHẢI để dạng KHÔNG prefix. `cn()` = twMerge chỉ khử xung
+        // đột trong CÙNG một variant — `sm:max-w-lg`/`sm:p-6` sẽ SỐNG SÓT khi
+        // trang truyền `max-w-2xl`/`p-0`, rồi thắng ở ≥640px vì nằm trong media
+        // query. Đó chính là lỗi bóp CrudDialog còn 512px + padding kép.
+        "w-[calc(100%_-_2rem)] sm:w-full max-w-lg",
         className,
       )}
       {...props}