@goplusvn/core 0.1.29 → 0.1.31

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 0.1.31 — MultiSelect: mặc định 1 DÒNG (hết lệch hàng toolbar)
+
+Wrap-mặc-định (0.1.27) làm trigger CAO LÊN khi chọn ≥2 option → lệch hàng
+toolbar (các control h-9 bên cạnh). Sửa:
+
+- Đảo mặc định `singleLine = true`; muốn wrap thì truyền `singleLine={false}`
+  (chỉ hợp form rộng, không phải toolbar).
+- Chế độ 1 dòng hiện **1 chip đầu + badge "+n"** (thay vì bóp nhiều chip đến
+  mất chữ trong trigger hẹp); title tooltip cho label đầy đủ + danh sách mục
+  còn lại.
+- Chip ở chế độ 1 dòng KHÔNG có nút × riêng (chật) — bỏ chọn qua dropdown
+  hoặc nút × xóa-tất-cả; chế độ wrap giữ × từng chip như cũ.
+
+Đã test trên vinhhoa (link file: local): toolbar đơn bán hàng, sheet Bộ lọc,
+báo cáo sổ quỹ — 3 filter cùng h-9, không còn đẩy lệch hàng.
+
+## 0.1.30 — Gỡ menu "Thiết bị & phiên đăng nhập" khỏi UserDropdown
+
+Trang phiên đăng nhập chuyển thành trang QUẢN TRỊ (gate quyền) — lối vào đúng
+là sidebar navigation của app (resource-filtered), không phải dropdown cá nhân.
+
 ## 0.1.29 — Footer: link "Goplus.vn" trỏ về https://goplus.vn
 
 Trước trỏ nhầm github.com/Qualiora (template gốc).

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.29",
+  "version": "0.1.31",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

package/src/ui/forms/multi-select.tsx

@@ -47,9 +47,11 @@ interface MultiSelectProps {
    */
   selectedFirst?: boolean;
   /**
-   * Mặc định chip WRAP xuống dòng khi chọn nhiều (trigger cao lên, không tràn
-   * ngang — theo pattern sersavan/shadcn-multi-select-component). Đặt true để
-   * giữ 1 dòng cố định: chip co + cắt bằng overflow (hợp cho toolbar chật).
+   * Mặc định GIỮ 1 DÒNG cố định: hiện 1 chip đầu (cắt chữ, title=label đầy
+   * đủ) + badge "+n" (title=các mục còn lại) — trigger không đổi chiều cao,
+   * không lệch hàng toolbar; chip không có nút × riêng (bỏ chọn qua dropdown
+   * hoặc × xóa-tất-cả). Đặt false để chip WRAP xuống dòng kèm × từng chip
+   * (trigger cao lên — chỉ hợp form rộng rãi, không phải toolbar).
    */
   singleLine?: boolean;
   /** Đóng dropdown ngay sau mỗi lần chọn (mặc định giữ mở để chọn tiếp). */
@@ -179,7 +181,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       disabled = false,
       responsive = false,
       selectedFirst = false,
-      singleLine = false,
+      singleLine = true,
       closeOnSelect = false,
       deduplicateOptions = false,
       chipColor = "colorful",
@@ -562,12 +564,16 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       [updateValue, value],
     );
 
+    // singleLine: chỉ hiện 1 chip + "+n" — nhiều chip trong trigger hẹp sẽ bị
+    // bóp đến mất chữ (chỉ còn dấu ×), 1 chip cắt chữ + đếm luôn đọc được
+    const chipLimit = singleLine ? 1 : responsiveSettings.maxCount;
+
     const clearExtraOptions = useCallback(
       (e: React.MouseEvent) => {
         e.stopPropagation();
-        updateValue(value.slice(0, responsiveSettings.maxCount));
+        updateValue(value.slice(0, chipLimit));
       },
-      [value, responsiveSettings.maxCount, updateValue],
+      [value, chipLimit, updateValue],
     );
 
     // Imperative API via ref
@@ -604,7 +610,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
 
     const isAllSelected =
       !hasAsync && options.length > 1 && value.length === options.length;
-    const visibleChips = selectedOptions.slice(0, responsiveSettings.maxCount);
+    const visibleChips = selectedOptions.slice(0, chipLimit);
     const extraCount = value.length - visibleChips.length;
 
     const visibleOptions = filteredOptions.slice(
@@ -667,43 +673,58 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
               </Badge>
             ) : (
               <>
+                {/* singleLine: chip KHÔNG có nút × riêng (trigger hẹp, chữ cần
+                    chỗ) — bỏ chọn bằng dropdown hoặc × xóa-tất-cả */}
                 {visibleChips.map((opt, chipIndex) => (
                   <Badge
                     key={String(opt.value)}
                     variant="secondary"
+                    title={opt.label}
                     className={cn(
-                      "min-w-0 max-w-[8.5rem] shrink gap-1 pr-1 font-normal",
+                      "min-w-0 shrink gap-1 font-normal",
+                      singleLine ? "max-w-full" : "max-w-[8.5rem] pr-1",
                       chipColor === "neutral"
                         ? "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary"
                         : CHIP_COLORS[chipIndex % CHIP_COLORS.length],
                     )}
                   >
                     <span className="truncate">{opt.label}</span>
-                    <span
-                      role="button"
-                      aria-label={`Bỏ chọn ${opt.label}`}
-                      className="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm opacity-60 transition-opacity hover:opacity-100"
-                      onClick={(e) => handleRemove(opt.value, e)}
-                    >
-                      <X className="h-3 w-3" />
-                    </span>
+                    {!singleLine && (
+                      <span
+                        role="button"
+                        aria-label={`Bỏ chọn ${opt.label}`}
+                        className="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm opacity-60 transition-opacity hover:opacity-100"
+                        onClick={(e) => handleRemove(opt.value, e)}
+                      >
+                        <X className="h-3 w-3" />
+                      </span>
+                    )}
                   </Badge>
                 ))}
                 {extraCount > 0 && (
                   <Badge
                     variant="secondary"
-                    className="shrink-0 gap-1 border-transparent bg-secondary pr-1 font-normal hover:bg-secondary"
+                    title={selectedOptions
+                      .slice(chipLimit)
+                      .map((o) => o.label)
+                      .join(", ")}
+                    className={cn(
+                      "shrink-0 gap-1 border-transparent bg-secondary font-normal hover:bg-secondary",
+                      !singleLine && "pr-1",
+                    )}
                   >
                     +{extraCount}
-                    <span
-                      role="button"
-                      aria-label="Bỏ các mục vượt quá"
-                      title="Bỏ các mục vượt quá"
-                      className="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground"
-                      onClick={clearExtraOptions}
-                    >
-                      <X className="h-3 w-3" />
-                    </span>
+                    {!singleLine && (
+                      <span
+                        role="button"
+                        aria-label="Bỏ các mục vượt quá"
+                        title="Bỏ các mục vượt quá"
+                        className="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground"
+                        onClick={clearExtraOptions}
+                      >
+                        <X className="h-3 w-3" />
+                      </span>
+                    )}
                   </Badge>
                 )}
               </>

package/src/ui/layout/user-dropdown.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { useAuthBridge, useSafeAuthSession } from "../auth/auth-bridge";
-import { LogOut, User, UserCog, MonitorSmartphone,
+import { LogOut, User, UserCog,
 } from "lucide-react";
 
 import type { DictionaryType } from "../../hooks";
@@ -152,18 +152,6 @@ export function UserDropdown({
               <span>{dictionary.navigation.userNav.profile}</span>
             </Link>
           </DropdownMenuItem>
-          <DropdownMenuItem
-            asChild
-            className="h-8 px-2 rounded-md cursor-pointer focus:bg-primary/10 focus:text-primary transition-colors duration-200 group text-sm"
-          >
-            <Link
-              href={ensureLocalizedPathname("/security/sessions", locale)}
-              className="flex items-center w-full"
-            >
-              <MonitorSmartphone className="me-2 size-4 text-muted-foreground group-hover:text-primary group-focus:text-primary transition-colors" />
-              <span>Thiết bị & phiên đăng nhập</span>
-            </Link>
-          </DropdownMenuItem>
           {/* <DropdownMenuItem
             asChild
             className="h-8 px-2 rounded-md cursor-pointer focus:bg-primary/10 focus:text-primary transition-colors duration-200 group text-sm"