@libs-ui/services-grid-layout 0.2.357-21 → 0.2.357-23

package/grid-layout.service.d.ts

@@ -17,6 +17,13 @@ export declare class LibsUiGridLayoutService {
     private readonly treeService;
     /** Lượt tải component đang chờ, theo id khối — để huỷ khi khối bị gỡ giữa chừng. */
     private readonly pendingLoads;
+    /**
+     * Bộ theo dõi bề rộng của từng lưới LỒNG, để ngắt khi service bị huỷ.
+     *
+     * 🔴 Giữ tham chiếu là BẮT BUỘC: `ResizeObserver` không tự tắt theo vòng đời component. Không dọn
+     * thì mỗi lần nạp lại bố cục (đổi tab) lại chồng thêm một bộ, và chúng vẫn chạy trên DOM đã gỡ.
+     */
+    private readonly nestedResizeObservers;
     constructor();
     private config?;
     private readonly componentRefs;
@@ -60,6 +67,30 @@ export declare class LibsUiGridLayoutService {
      * @param depth 0 = lưới cấp trang, ≥ 1 = lưới lồng trong container
      */
     private buildGridsterOptions;
+    /**
+     * Bắt lưới LỒNG đo lại NGAY khi khung chứa nó đổi bề rộng — dùng lúc người dùng kéo mép khối cha.
+     *
+     * Gridster có sẵn đường tự đo (`resize$`), nhưng luồng đó là `switchMap(() => timer(100))`: mỗi
+     * lần phát lại huỷ timer trước, mà kéo chuột bắn dày hơn 100ms nên timer không bao giờ tới đích.
+     * Đo được (11/09/2026): kéo mép nhóm thì lưới con co theo cha từng khung hình (234 → 384 px) còn
+     * THẺ con đứng im ở 106 px suốt cú kéo, chỉ nhảy đúng sau khi thả tay.
+     *
+     * Giữ CẢ HAI đường: `itemResizeCallback` bắn đồng bộ ngay khi gridster ghi bề rộng mới lên khối
+     * (sớm hơn `ResizeObserver` một khung hình) lo độ tức thì; `ResizeObserver` lo những lần khung đổi
+     * vì lý do khác — đổi zoom, thu gọn cột bên trái.
+     *
+     * Tắt bằng `config.autoResizeNestedGrids: false`.
+     */
+    private buildNestedResizeHooks;
+    /** Gọi `resize()` của một thẻ `<gridster>` qua chính instance mà nó tự gắn lên phần tử. */
+    private resizeGridsterElement;
+    /**
+     * Gắn instance lên chính phần tử `<gridster>` rồi theo dõi bề rộng của nó.
+     *
+     * Phải gắn ngược lên DOM vì `itemResizeCallback` của khối CHA chỉ cầm được `HTMLElement`, không có
+     * đường nào khác đi từ đó về instance của lưới lồng bên trong.
+     */
+    private registerNestedGrid;
     /**
      *
      * Gắn component của nơi dùng lên một khối.
@@ -131,7 +162,30 @@ export declare class LibsUiGridLayoutService {
     clearDragPayload(): void;
     /** Xoá một khối. Xoá container là xoá cả ruột. Trả `false` khi không xoá được (vd khối gốc). */
     removeBlock(id: string): boolean;
+    /**
+     * Số cột thật của lưới cấp trang.
+     *
+     * 🔴 Mặc định phải TRÙNG `minCols/maxCols` của `gridLayoutRootConfig()`. Trước đây chỗ này trả 24
+     * trong khi lưới vẽ 12: nơi dùng không truyền `cols` thì va chạm, `toContainer` và `compact` tính
+     * theo 24 cột còn màn hình chỉ có 12 — khối rơi ra ngoài mép phải mà không ai hiểu vì sao.
+     */
     get totalColumns(): number;
+    /**
+     * Đổi số cột / số hàng của một khối rồi vẽ lại.
+     *
+     * Kéo `cols` rộng quá mép phải thì dịch khối sang trái cho vừa, thay vì để nó tràn ra ngoài lưới.
+     */
+    resizeBlock(id: string, size: {
+        cols?: number;
+        rows?: number;
+    }): boolean;
+    /**
+     * Nhân bản một khối — đặt kế bên phải nếu còn chỗ, không thì xuống dòng dưới.
+     *
+     * `transformData` để nơi dùng đổi phần dữ liệu riêng của mình (vd nối thêm "(Bản sao)" vào tiêu
+     * đề); thư viện không tự đoán trường nào là tiêu đề.
+     */
+    duplicateBlock(id: string, transformData?: (data: unknown) => unknown): T_gridLayout_node | undefined;
     /** Biến khối đơn thành CONTAINER — nội dung cũ thành khối con đầu tiên, không mất dữ liệu. */
     toContainer(id: string): boolean;
     /** Đưa CONTAINER về khối đơn — khối con được nâng lên cấp trên, không bị xoá. */

package/index.d.ts

@@ -2,3 +2,4 @@ export * from './grid-layout.service';
 export * from './canvas/grid-layout-canvas.component';
 export * from './interfaces/grid-layout.interface';
 export * from './defines/collision.define';
+export * from './drag-controller';

package/interfaces/grid-layout.interface.d.ts

@@ -130,6 +130,22 @@ export type T_gridLayout_config = {
     cols?: number;
     /** chiều cao một hàng, px (chế độ lưới). Mặc định 56 */
     rowHeight?: number;
+    /**
+     * Số hàng TỐI THIỂU của lưới CẤP TRANG. Mặc định 2.
+     *
+     * Đặt lớn hơn khi muốn ô li phủ kín màn hình ngay cả lúc bố cục còn ít khối — lưới chỉ cao bằng
+     * khối cuối cùng thì phần dưới trống trơn, người dùng không biết còn thả được vào đâu.
+     */
+    minRows?: number;
+    /** Số hàng TỐI THIỂU của lưới bên TRONG container. Mặc định 1 */
+    nestedMinRows?: number;
+    /**
+     * Cho lưới LỒNG tự đo lại khi khung chứa nó đổi bề rộng. Mặc định BẬT.
+     *
+     * Tắt đi thì lúc kéo mép khối cha, thẻ con đứng im tới khi thả tay — chỉ tắt nếu nơi dùng tự lo
+     * việc đo lại.
+     */
+    autoResizeNestedGrids?: boolean;
     /** khe giữa hai khối ở lưới CẤP TRANG, px. Mặc định 12 */
     margin?: number;
     /** khe giữa hai khối bên TRONG container, px. Mặc định 2 — khối con là dòng thông tin của cùng

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@libs-ui/services-grid-layout",
-  "version": "0.2.357-21",
+  "version": "0.2.357-23",
   "peerDependencies": {
     "@angular/core": "^18.2.0",
     "@angular/common": "^18.2.0",
     "gridster18": "npm:angular-gridster2@18.0.1",
     "rxjs": "~7.8.0",
-    "@libs-ui/components-buttons-button": "0.2.357-21",
-    "@libs-ui/utils": "0.2.357-21"
+    "@libs-ui/components-buttons-button": "0.2.357-23",
+    "@libs-ui/utils": "0.2.357-23"
   },
   "sideEffects": false,
   "module": "fesm2022/libs-ui-services-grid-layout.mjs",