npm - gov-layout - Versions diffs - 1.2.15 → 1.2.18 - Mend

gov-layout 1.2.15 → 1.2.18

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 (8) hide show

package/README.md CHANGED Viewed

@@ -233,7 +233,11 @@ Header ด้านบนพร้อม notification bell
 import { UserHeader } from 'gov-layout';
 <UserHeader
-  user={{ firstName: 'สมหญิง', pictureUrl: '/avatar.jpg' }}
+  user={{
+    firstName: 'ชนธัญ',
+    pictureUrl: '/avatar.jpg',
+    subtitle: 'ผู้สูงอายุ',        // แสดงใต้ข้อความทักทาย (optional)
+  }}
   notifications={[
     {
       id: 1,
@@ -247,15 +251,35 @@ import { UserHeader } from 'gov-layout';
   onToggleSidebar={() => setOpen(true)}
   onMarkAllRead={() => markAllRead()}
   onViewAll={() => router.push('/notifications')}
+  onNotificationClick={(notif) => router.push(`/notifications/${notif.id}`)}
   onProfile={() => router.push('/profile')}
 />
 ```
+### Props
+| Prop | Type | Default | คำอธิบาย |
+|------|------|---------|----------|
+| `user.firstName` | `string?` | - | ชื่อ |
+| `user.lastName` | `string?` | - | นามสกุล |
+| `user.pictureUrl` | `string?` | - | URL รูปโปรไฟล์ |
+| `user.subtitle` | `string?` | - | ข้อความใต้ชื่อ เช่น "ผู้สูงอายุ" |
+| `notifications` | `NotificationItem[]?` | `[]` | รายการแจ้งเตือน |
+| `onToggleSidebar` | `() => void?` | - | callback เปิด sidebar |
+| `onMarkAllRead` | `() => void?` | - | callback อ่านทั้งหมดแล้ว |
+| `onViewAll` | `() => void?` | - | callback ดูทั้งหมด |
+| `onNotificationClick` | `(notification) => void?` | - | callback เมื่อกดแจ้งเตือนแต่ละรายการ |
+| `onProfile` | `() => void?` | - | callback เมื่อกดโปรไฟล์ |
+| `notificationBell` | `ReactNode?` | - | custom bell icon |
+| `className` | `string?` | - | className เพิ่มเติม |
 ### Features
 - ✅ Notification bell พร้อม badge (99+ เมื่อเกิน)
 - ✅ ไม่มีแจ้งเตือน → ไม่แสดง badge
 - ✅ Notification dropdown แบบ scroll
+- ✅ กดแจ้งเตือนแต่ละรายการ → `onNotificationClick`
+- ✅ Subtitle ใต้ข้อความทักทาย (เช่น "ผู้สูงอายุ")
 - ✅ ปุ่มเปิด sidebar (☰)
 - ✅ กดโปรไฟล์ผู้ใช้ (avatar + ชื่อ) → `onProfile`
@@ -476,9 +500,10 @@ export default function UserLayout({ children }) {
   return (
     <>
       <UserHeader
-        user={user}
+        user={{ ...user, subtitle: 'ผู้สูงอายุ' }}
         notifications={notifications}
         onToggleSidebar={() => setOpen(true)}
+        onNotificationClick={(notif) => setCurrentPath(`/notifications/${notif.id}`)}
         onProfile={() => setCurrentPath('/profile')}
       />
       <UserSidebar

package/dist/index.d.mts CHANGED Viewed

@@ -95,6 +95,8 @@ interface UserHeaderProps {
         firstName?: string;
         lastName?: string;
         pictureUrl?: string;
+        /** เช่น 'ผู้สูงอายุ', 'เจ้าหน้าที่' */
+        subtitle?: string;
     };
     notifications?: NotificationItem[];
     onToggleSidebar?: () => void;
@@ -102,11 +104,13 @@ interface UserHeaderProps {
     notificationBell?: React.ReactNode;
     onMarkAllRead?: () => void;
     onViewAll?: () => void;
+    /** Callback เมื่อกดการแจ้งเตือนแต่ละรายการ */
+    onNotificationClick?: (notification: NotificationItem) => void;
     /** Callback เมื่อกดโปรไฟล์ผู้ใช้ */
     onProfile?: () => void;
     className?: string;
 }
-declare function UserHeader({ user, notifications, onToggleSidebar, notificationBell, onMarkAllRead, onViewAll, onProfile, className, }: UserHeaderProps): react_jsx_runtime.JSX.Element;
+declare function UserHeader({ user, notifications, onToggleSidebar, notificationBell, onMarkAllRead, onViewAll, onNotificationClick, onProfile, className, }: UserHeaderProps): react_jsx_runtime.JSX.Element;
 interface UserSidebarProps {
     user: User | null;
@@ -122,6 +126,20 @@ interface UserSidebarProps {
 }
 declare function UserSidebar({ user, roleLabel, menuItems, onNavigate, onLogout, isOpen, onClose, roleColor, onProfile, }: UserSidebarProps): react_jsx_runtime.JSX.Element;
+interface BottomBarProps {
+    /** Content inside the bottom bar (pagination, buttons, etc.) */
+    children: React.ReactNode;
+    /** Left offset to account for sidebar width (default: '280px') */
+    sidebarWidth?: string;
+    /** Height of the bottom bar (default: '73px') */
+    height?: string;
+    /** Additional CSS class */
+    className?: string;
+    /** Custom inline styles */
+    style?: React.CSSProperties;
+}
+declare function BottomBar({ children, sidebarWidth, height, className, style, }: BottomBarProps): react_jsx_runtime.JSX.Element;
 type Theme = 'light' | 'dark';
 type FontSizeKey = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 interface FontSizeOption {
@@ -245,4 +263,4 @@ declare const Icons: {
     readonly Trash: typeof TrashIcon;
 };
-export { AlertTriangleIcon, BarChartIcon, BellIcon, BuildingIcon, CalendarIcon, CheckCircleIcon, ClipboardIcon, DatabaseIcon, DownloadIcon, EditIcon, EyeIcon, FONT_SIZE_OPTIONS, FileTextIcon, FolderIcon, type FontSizeKey, type FontSizeOption, FontSizeSettings, GearIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, type IconProps, Icons, LogOutIcon, MailIcon, MapPinIcon, type MenuItem, type NotificationItem, PhoneIcon, PlusCircleIcon, PrinterIcon, SearchIcon, SettingsPanel, SettingsProvider, ShieldIcon, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, StarIcon, type Theme, ThemeSettings, TrashIcon, UploadIcon, type User, UserHeader, UserIcon, UserSidebar, UsersIcon, WrenchIcon, XCircleIcon, useDarkMode, useSettings };
+export { AlertTriangleIcon, BarChartIcon, BellIcon, BottomBar, type BottomBarProps, BuildingIcon, CalendarIcon, CheckCircleIcon, ClipboardIcon, DatabaseIcon, DownloadIcon, EditIcon, EyeIcon, FONT_SIZE_OPTIONS, FileTextIcon, FolderIcon, type FontSizeKey, type FontSizeOption, FontSizeSettings, GearIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, type IconProps, Icons, LogOutIcon, MailIcon, MapPinIcon, type MenuItem, type NotificationItem, PhoneIcon, PlusCircleIcon, PrinterIcon, SearchIcon, SettingsPanel, SettingsProvider, ShieldIcon, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, StarIcon, type Theme, ThemeSettings, TrashIcon, UploadIcon, type User, UserHeader, UserIcon, UserSidebar, UsersIcon, WrenchIcon, XCircleIcon, useDarkMode, useSettings };

package/dist/index.d.ts CHANGED Viewed

@@ -95,6 +95,8 @@ interface UserHeaderProps {
         firstName?: string;
         lastName?: string;
         pictureUrl?: string;
+        /** เช่น 'ผู้สูงอายุ', 'เจ้าหน้าที่' */
+        subtitle?: string;
     };
     notifications?: NotificationItem[];
     onToggleSidebar?: () => void;
@@ -102,11 +104,13 @@ interface UserHeaderProps {
     notificationBell?: React.ReactNode;
     onMarkAllRead?: () => void;
     onViewAll?: () => void;
+    /** Callback เมื่อกดการแจ้งเตือนแต่ละรายการ */
+    onNotificationClick?: (notification: NotificationItem) => void;
     /** Callback เมื่อกดโปรไฟล์ผู้ใช้ */
     onProfile?: () => void;
     className?: string;
 }
-declare function UserHeader({ user, notifications, onToggleSidebar, notificationBell, onMarkAllRead, onViewAll, onProfile, className, }: UserHeaderProps): react_jsx_runtime.JSX.Element;
+declare function UserHeader({ user, notifications, onToggleSidebar, notificationBell, onMarkAllRead, onViewAll, onNotificationClick, onProfile, className, }: UserHeaderProps): react_jsx_runtime.JSX.Element;
 interface UserSidebarProps {
     user: User | null;
@@ -122,6 +126,20 @@ interface UserSidebarProps {
 }
 declare function UserSidebar({ user, roleLabel, menuItems, onNavigate, onLogout, isOpen, onClose, roleColor, onProfile, }: UserSidebarProps): react_jsx_runtime.JSX.Element;
+interface BottomBarProps {
+    /** Content inside the bottom bar (pagination, buttons, etc.) */
+    children: React.ReactNode;
+    /** Left offset to account for sidebar width (default: '280px') */
+    sidebarWidth?: string;
+    /** Height of the bottom bar (default: '73px') */
+    height?: string;
+    /** Additional CSS class */
+    className?: string;
+    /** Custom inline styles */
+    style?: React.CSSProperties;
+}
+declare function BottomBar({ children, sidebarWidth, height, className, style, }: BottomBarProps): react_jsx_runtime.JSX.Element;
 type Theme = 'light' | 'dark';
 type FontSizeKey = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 interface FontSizeOption {
@@ -245,4 +263,4 @@ declare const Icons: {
     readonly Trash: typeof TrashIcon;
 };
-export { AlertTriangleIcon, BarChartIcon, BellIcon, BuildingIcon, CalendarIcon, CheckCircleIcon, ClipboardIcon, DatabaseIcon, DownloadIcon, EditIcon, EyeIcon, FONT_SIZE_OPTIONS, FileTextIcon, FolderIcon, type FontSizeKey, type FontSizeOption, FontSizeSettings, GearIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, type IconProps, Icons, LogOutIcon, MailIcon, MapPinIcon, type MenuItem, type NotificationItem, PhoneIcon, PlusCircleIcon, PrinterIcon, SearchIcon, SettingsPanel, SettingsProvider, ShieldIcon, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, StarIcon, type Theme, ThemeSettings, TrashIcon, UploadIcon, type User, UserHeader, UserIcon, UserSidebar, UsersIcon, WrenchIcon, XCircleIcon, useDarkMode, useSettings };
+export { AlertTriangleIcon, BarChartIcon, BellIcon, BottomBar, type BottomBarProps, BuildingIcon, CalendarIcon, CheckCircleIcon, ClipboardIcon, DatabaseIcon, DownloadIcon, EditIcon, EyeIcon, FONT_SIZE_OPTIONS, FileTextIcon, FolderIcon, type FontSizeKey, type FontSizeOption, FontSizeSettings, GearIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, type IconProps, Icons, LogOutIcon, MailIcon, MapPinIcon, type MenuItem, type NotificationItem, PhoneIcon, PlusCircleIcon, PrinterIcon, SearchIcon, SettingsPanel, SettingsProvider, ShieldIcon, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, StarIcon, type Theme, ThemeSettings, TrashIcon, UploadIcon, type User, UserHeader, UserIcon, UserSidebar, UsersIcon, WrenchIcon, XCircleIcon, useDarkMode, useSettings };

package/dist/index.js CHANGED Viewed

@@ -696,7 +696,7 @@ function SidebarUserProfile({
           onClick: onProfile,
           title: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19",
           onMouseEnter: (e) => {
-            e.currentTarget.style.backgroundColor = isDark ? "#334155" : "var(--color-alias-color-brand-surface, #f0fdf4)";
+            e.currentTarget.style.backgroundColor = isDark ? "#334155" : "var(--color-alias-color-brand-surface, #faf9e5)";
           },
           onMouseLeave: (e) => {
             e.currentTarget.style.backgroundColor = "transparent";
@@ -836,7 +836,7 @@ function SidebarUserProfile({
             onClick: onProfile,
             title: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19",
             onMouseEnter: (e) => {
-              e.currentTarget.style.backgroundColor = isDark ? "#334155" : "var(--color-alias-color-brand-surface, #f0fdf4)";
+              e.currentTarget.style.backgroundColor = isDark ? "#334155" : "var(--color-alias-color-brand-surface, #faf9e5)";
             },
             onMouseLeave: (e) => {
               e.currentTarget.style.backgroundColor = "transparent";
@@ -1124,6 +1124,7 @@ function UserHeader({
   notificationBell,
   onMarkAllRead,
   onViewAll,
+  onNotificationClick,
   onProfile,
   className
 }) {
@@ -1147,7 +1148,7 @@ function UserHeader({
     {
       className,
       style: {
-        background: "#346D55",
+        background: "#3AAE7D",
         boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
         position: "sticky",
         top: 0,
@@ -1220,30 +1221,44 @@ function UserHeader({
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    "p",
-                    {
-                      style: {
-                        fontSize: "15px",
-                        fontWeight: 600,
-                        color: "#ffffff",
-                        margin: 0
-                      },
-                      children: [
-                        "\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35,",
-                        " ",
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "span",
-                          {
-                            style: {
-                              color: "#ffffff"
-                            },
-                            children: displayName
-                          }
-                        )
-                      ]
-                    }
-                  ) })
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "p",
+                      {
+                        style: {
+                          fontSize: "15px",
+                          fontWeight: 600,
+                          color: "#ffffff",
+                          margin: 0
+                        },
+                        children: [
+                          "\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35,",
+                          " ",
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              style: {
+                                color: "#ffffff"
+                              },
+                              children: displayName
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    user?.subtitle && /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        style: {
+                          fontSize: "12px",
+                          color: "rgba(255,255,255,0.75)",
+                          margin: "2px 0 0",
+                          fontWeight: 400
+                        },
+                        children: user.subtitle
+                      }
+                    )
+                  ] })
                 ]
               }
             ),
@@ -1361,6 +1376,7 @@ function UserHeader({
                       ) : notifications.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
                         "div",
                         {
+                          onClick: () => onNotificationClick?.(item),
                           style: {
                             padding: "12px 16px",
                             borderBottom: "1px solid #f9fafb",
@@ -1607,7 +1623,7 @@ function UserSidebar({
             {
               style: {
                 padding: "20px",
-                borderBottom: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #e5e7eb)"}`
+                borderBottom: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`
               },
               children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
@@ -1672,7 +1688,7 @@ function UserSidebar({
                         {
                           style: {
                             fontSize: "13px",
-                            color: isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #6b7280)",
+                            color: isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #475272)",
                             margin: "2px 0 0",
                             display: "flex",
                             alignItems: "center",
@@ -1720,7 +1736,7 @@ function UserSidebar({
             {
               style: {
                 padding: "20px",
-                borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #e5e7eb)"}`
+                borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`
               },
               children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
@@ -1741,7 +1757,7 @@ function UserSidebar({
                     borderRadius: "8px",
                     border: "none",
                     background: "transparent",
-                    color: "var(--color-alias-semantic-critical, #ef4444)",
+                    color: "var(--color-alias-semantic-critical, #f21515)",
                     cursor: "pointer",
                     transition: "background-color 0.15s ease",
                     fontSize: "15px",
@@ -1760,6 +1776,38 @@ function UserSidebar({
     )
   ] });
 }
+function BottomBar({
+  children,
+  sidebarWidth = "280px",
+  height = "73px",
+  className,
+  style
+}) {
+  const isDark = useDarkMode();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className,
+      style: {
+        position: "fixed",
+        bottom: 0,
+        left: sidebarWidth,
+        right: 0,
+        height,
+        background: isDark ? "#111827" : "#ffffff",
+        borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "16px 24px",
+        zIndex: 30,
+        transition: "left 0.3s ease",
+        ...style
+      },
+      children
+    }
+  );
+}
 var FONT_SIZE_OPTIONS = [
   { key: "xsmall", label: "\u0E40\u0E25\u0E47\u0E01\u0E21\u0E32\u0E01", scale: 0.8 },
   { key: "small", label: "\u0E40\u0E25\u0E47\u0E01", scale: 0.9 },
@@ -1967,7 +2015,7 @@ function FontSizeSettings({ onBack }) {
       margin: "8px 16px",
       padding: "16px",
       borderRadius: 10,
-      background: "var(--color-foundations-fuji-pallet-light, #f5f6fa)",
+      background: "var(--color-foundations-fuji-pallet-light, #ebedf5)",
       textAlign: "center"
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
@@ -2070,7 +2118,7 @@ function SettingsPanel({ className, showTheme = true }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       padding: "16px",
-      borderBottom: "1px solid var(--color-border-colors-neutral, #e5e7eb)"
+      borderBottom: "1px solid var(--color-border-colors-neutral, #c8cedd)"
     }, children: /* @__PURE__ */ jsxRuntime.jsx("h3", { style: {
       fontSize: 16,
       fontWeight: 700,
@@ -2173,6 +2221,7 @@ var Icons = {
 exports.AlertTriangleIcon = AlertTriangleIcon;
 exports.BarChartIcon = BarChartIcon;
 exports.BellIcon = BellIcon;
+exports.BottomBar = BottomBar;
 exports.BuildingIcon = BuildingIcon;
 exports.CalendarIcon = CalendarIcon;
 exports.CheckCircleIcon = CheckCircleIcon;