cynx-lib 1.3.83 → 1.3.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.83",
+  "version": "1.3.84",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/ui/components/Layout.jsx

@@ -12,6 +12,24 @@ export default function Layout({
   user,
   onLogout,
   onLock,
+  // Footer customization & actions
+  footerActions,
+  extraFooterActions,
+  footerSlot,
+  lockLabel,
+  logoutLabel,
+  lockTitle,
+  logoutTitle,
+  lockIcon,
+  logoutIcon,
+  showLock,
+  showLogout,
+  userSlot,
+  renderUser,
+  footerStyle,
+  footerClassName,
+  footerActionsLayout,
+  footerActionsStyle,
   collapsible = true,
   isCollapsed,
   onToggleCollapse,
@@ -38,6 +56,7 @@ export default function Layout({
   contentStyle = {},
   contentClassName,
   children,
+  ...restProps
 }) {
   return (
     <div
@@ -59,6 +78,23 @@ export default function Layout({
         user={user}
         onLogout={onLogout}
         onLock={onLock}
+        footerActions={footerActions}
+        extraFooterActions={extraFooterActions}
+        footerSlot={footerSlot}
+        lockLabel={lockLabel}
+        logoutLabel={logoutLabel}
+        lockTitle={lockTitle}
+        logoutTitle={logoutTitle}
+        lockIcon={lockIcon}
+        logoutIcon={logoutIcon}
+        showLock={showLock}
+        showLogout={showLogout}
+        userSlot={userSlot}
+        renderUser={renderUser}
+        footerStyle={footerStyle}
+        footerClassName={footerClassName}
+        footerActionsLayout={footerActionsLayout}
+        footerActionsStyle={footerActionsStyle}
         collapsible={collapsible}
         isCollapsed={isCollapsed}
         onToggleCollapse={onToggleCollapse}
@@ -75,6 +111,7 @@ export default function Layout({
         activeSubColor={activeSubColor}
         subItemsIndent={subItemsIndent}
         hasPermission={hasPermission}
+        {...restProps}
       />
 
       {/* Main Content Area */}

package/ui/components/Sidebar.jsx

@@ -102,6 +102,23 @@ export default function Sidebar({
   user,
   onLogout,
   onLock,
+  // Footer customization & actions
+  footerActions,
+  extraFooterActions,
+  lockLabel = 'Блок',
+  logoutLabel = 'Выйти',
+  lockTitle,
+  logoutTitle,
+  lockIcon,
+  logoutIcon,
+  showLock = true,
+  showLogout = true,
+  userSlot,
+  renderUser,
+  footerStyle = {},
+  footerClassName = '',
+  footerActionsLayout = 'flex',
+  footerActionsStyle = {},
   collapsible = true,
   isCollapsed: controlledIsCollapsed,
   defaultCollapsed = false,
@@ -260,6 +277,70 @@ export default function Sidebar({
     ? 'var(--sidebar-text-muted, rgba(255, 255, 255, 0.45))'
     : 'var(--sidebar-text-muted, var(--t3, #a1a1aa))';
 
+  // Default footer actions (Lock / Logout)
+  const defaultActions = [];
+
+  if (onLock && showLock) {
+    defaultActions.push({
+      id: 'lock',
+      label: lockLabel,
+      title: lockTitle || (typeof lockLabel === 'string' ? lockLabel : 'Заблокировать'),
+      icon: lockIcon || (isCollapsed ? <Lock size={16} /> : <Lock size={13} />),
+      onClick: onLock,
+      variant: isDarkSidebar ? 'secondary' : 'ghost',
+      style: isDarkSidebar
+        ? {
+            background: 'rgba(255,255,255,0.08)',
+            color: 'rgba(255,255,255,0.85)',
+            borderColor: 'rgba(255,255,255,0.12)',
+          }
+        : {},
+    });
+  }
+
+  if (onLogout && showLogout) {
+    defaultActions.push({
+      id: 'logout',
+      label: logoutLabel,
+      title:
+        logoutTitle ||
+        (user?.username || user?.fullName
+          ? `${typeof logoutLabel === 'string' ? logoutLabel : 'Выйти'} (${user?.username || user?.fullName})`
+          : typeof logoutLabel === 'string'
+          ? logoutLabel
+          : 'Выйти'),
+      icon: logoutIcon || (isCollapsed ? <LogOut size={17} /> : <LogOut size={14} />),
+      onClick: onLogout,
+      variant: 'ghost',
+      danger: true,
+      style: isDarkSidebar
+        ? {
+            background: 'rgba(239, 68, 68, 0.1)',
+            borderColor: 'rgba(239, 68, 68, 0.2)',
+          }
+        : {},
+    });
+  }
+
+  // Resolve final actions list
+  let resolvedActions;
+  if (typeof footerActions === 'function') {
+    resolvedActions = footerActions(defaultActions, { isCollapsed, user, isDarkSidebar });
+  } else if (Array.isArray(footerActions)) {
+    resolvedActions = footerActions;
+  } else {
+    resolvedActions = [...defaultActions];
+    if (Array.isArray(extraFooterActions) && extraFooterActions.length > 0) {
+      resolvedActions.push(...extraFooterActions);
+    }
+  }
+
+  const finalActions = (resolvedActions || []).filter(
+    (act) => act && !act.hidden && act.visible !== false
+  );
+
+  const hasFooterContent = Boolean(user || finalActions.length > 0 || userSlot || renderUser);
+
   return (
     <aside
       className={sidebarClassName}
@@ -659,158 +740,243 @@ export default function Sidebar({
 
       {/* Footer Slot or Default User Profile / Actions */}
       {footerSlot ? (
-        footerSlot
-      ) : user ? (
+        typeof footerSlot === 'function'
+          ? footerSlot({ isCollapsed, user, actions: finalActions, isDarkSidebar })
+          : footerSlot
+      ) : hasFooterContent ? (
         <div
+          className={footerClassName}
           style={{
             padding: isCollapsed ? '12px 8px' : 12,
             borderTop: effectiveSidebarBorder,
             flexShrink: 0,
+            ...footerStyle,
           }}
         >
           {!isCollapsed ? (
             <>
-              <div
-                style={{
-                  fontSize: '.72rem',
-                  color: userFullNameColor,
-                  marginBottom: 8,
-                  padding: '0 8px',
-                  whiteSpace: 'nowrap',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                }}
-              >
-                {user.fullName ? (
-                  <>
-                    {user.fullName}{' '}
-                    {user.username && (
-                      <span style={{ color: userUsernameColor }}>({user.username})</span>
-                    )}
-                  </>
+              {userSlot ? (
+                typeof userSlot === 'function' ? (
+                  userSlot({ user, isCollapsed: false, isDarkSidebar })
                 ) : (
-                  user.username
-                )}
-              </div>
-
-              <div style={{ display: 'flex', gap: 6 }}>
-                {onLock && (
-                  <Button
-                    variant={isDarkSidebar ? 'secondary' : 'ghost'}
-                    size="md"
-                    onClick={onLock}
-                    icon={<Lock size={13} />}
-                    title="Заблокировать"
-                    style={{
-                      flex: 1,
-                      justifyContent: 'center',
-                      ...(isDarkSidebar
-                        ? {
-                            background: 'rgba(255,255,255,0.08)',
-                            color: 'rgba(255,255,255,0.85)',
-                            borderColor: 'rgba(255,255,255,0.12)',
-                          }
-                        : {}),
-                    }}
-                  >
-                    Блок
-                  </Button>
-                )}
-
-                {onLogout && (
-                  <Button
-                    variant="ghost"
-                    size="md"
-                    onClick={onLogout}
-                    icon={<LogOut size={14} />}
-                    title="Выйти"
-                    style={{
-                      width: onLock ? 'auto' : '100%',
-                      flex: onLock ? 1 : undefined,
-                      justifyContent: 'center',
-                      color: isDarkSidebar ? '#f87171' : 'var(--danger, #ef4444)',
-                      ...(isDarkSidebar
-                        ? {
-                            background: 'rgba(239, 68, 68, 0.1)',
-                            borderColor: 'rgba(239, 68, 68, 0.2)',
-                          }
-                        : {}),
-                    }}
-                  >
-                    Выйти
-                  </Button>
-                )}
-              </div>
-            </>
-          ) : (
-            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
-              {onLock && (
-                <button
-                  type="button"
-                  onClick={onLock}
-                  title="Заблокировать экран"
+                  userSlot
+                )
+              ) : renderUser ? (
+                renderUser({ user, isCollapsed: false, isDarkSidebar })
+              ) : user ? (
+                <div
                   style={{
-                    width: 36,
-                    height: 36,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    background: 'transparent',
-                    border: 'none',
-                    borderRadius: 'var(--rads, 8px)',
-                    color: isDarkSidebar ? 'rgba(255,255,255,0.7)' : 'var(--t2, #71717a)',
-                    cursor: 'pointer',
-                    transition: 'all .14s',
-                  }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.background = isDarkSidebar
-                      ? 'rgba(255,255,255,0.08)'
-                      : 'var(--grey-1, #fafafa)';
-                    e.currentTarget.style.color = isDarkSidebar
-                      ? '#ffffff'
-                      : 'var(--primary-text, #09090b)';
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.background = 'transparent';
-                    e.currentTarget.style.color = isDarkSidebar
-                      ? 'rgba(255,255,255,0.7)'
-                      : 'var(--t2, #71717a)';
+                    fontSize: '.72rem',
+                    color: userFullNameColor,
+                    marginBottom: 8,
+                    padding: '0 8px',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
                   }}
                 >
-                  <Lock size={16} />
-                </button>
-              )}
+                  {user.fullName ? (
+                    <>
+                      {user.fullName}{' '}
+                      {user.username && (
+                        <span style={{ color: userUsernameColor }}>({user.username})</span>
+                      )}
+                    </>
+                  ) : (
+                    user.username
+                  )}
+                </div>
+              ) : null}
 
-              {onLogout && (
-                <button
-                  type="button"
-                  onClick={onLogout}
-                  title={`Выйти (${user?.username || user?.fullName || ''})`}
+              {finalActions.length > 0 && (
+                <div
                   style={{
-                    width: 36,
-                    height: 36,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    background: 'transparent',
-                    border: 'none',
-                    borderRadius: 'var(--rads, 8px)',
-                    color: isDarkSidebar ? '#f87171' : 'var(--danger, #ef4444)',
-                    cursor: 'pointer',
-                    transition: 'all .14s',
-                  }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.background = isDarkSidebar
-                      ? 'rgba(239,68,68,0.2)'
-                      : 'var(--danger-bg, rgba(239,68,68,.10))';
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.background = 'transparent';
+                    ...(footerActionsLayout === 'column'
+                      ? { display: 'flex', flexDirection: 'column', gap: 6, width: '100%' }
+                      : footerActionsLayout === 'grid'
+                      ? {
+                          display: 'grid',
+                          gridTemplateColumns: `repeat(${finalActions.length > 2 ? 2 : finalActions.length}, minmax(0, 1fr))`,
+                          gap: 6,
+                          width: '100%',
+                        }
+                      : {
+                          display: 'flex',
+                          gap: 6,
+                          flexWrap: 'wrap',
+                          width: '100%',
+                        }),
+                    ...footerActionsStyle,
                   }}
                 >
-                  <LogOut size={17} />
-                </button>
+                  {finalActions.map((act, index) => {
+                    const key = act.id || act.key || index;
+                    if (act.render) {
+                      return (
+                        <React.Fragment key={key}>
+                          {act.render({ action: act, isCollapsed: false, isDarkSidebar, user })}
+                        </React.Fragment>
+                      );
+                    }
+
+                    const isDanger = Boolean(act.danger || act.variant === 'danger');
+                    const actionLabel =
+                      act.label !== undefined
+                        ? act.label
+                        : act.text !== undefined
+                        ? act.text
+                        : act.title;
+                    const actionTitle =
+                      act.title || (typeof actionLabel === 'string' ? actionLabel : undefined);
+                    const isSingle = finalActions.length === 1;
+
+                    return (
+                      <Button
+                        key={key}
+                        variant={
+                          act.variant || (isDanger ? 'ghost' : isDarkSidebar ? 'secondary' : 'ghost')
+                        }
+                        size={act.size || 'md'}
+                        onClick={act.onClick}
+                        disabled={act.disabled}
+                        icon={act.icon}
+                        title={actionTitle}
+                        className={act.className || ''}
+                        style={{
+                          flex: act.flex !== undefined ? act.flex : 1,
+                          width: isSingle ? '100%' : (act.width || 'auto'),
+                          justifyContent: act.justifyContent || 'center',
+                          minWidth: 0,
+                          whiteSpace: 'nowrap',
+                          ...(isDanger
+                            ? {
+                                color: isDarkSidebar ? '#f87171' : 'var(--danger, #ef4444)',
+                                ...(isDarkSidebar
+                                  ? {
+                                      background: 'rgba(239, 68, 68, 0.1)',
+                                      borderColor: 'rgba(239, 68, 68, 0.2)',
+                                    }
+                                  : {}),
+                              }
+                            : isDarkSidebar &&
+                              (!act.variant || act.variant === 'secondary' || act.variant === 'ghost')
+                            ? {
+                                background: 'rgba(255,255,255,0.08)',
+                                color: 'rgba(255,255,255,0.85)',
+                                borderColor: 'rgba(255,255,255,0.12)',
+                              }
+                            : {}),
+                          ...act.style,
+                        }}
+                      >
+                        {actionLabel}
+                      </Button>
+                    );
+                  })}
+                </div>
               )}
+            </>
+          ) : (
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: 6,
+                width: '100%',
+              }}
+            >
+              {userSlot &&
+                typeof userSlot === 'function' &&
+                userSlot({ user, isCollapsed: true, isDarkSidebar })}
+              {renderUser && renderUser({ user, isCollapsed: true, isDarkSidebar })}
+              {finalActions.map((act, index) => {
+                const key = act.id || act.key || index;
+                if (act.render) {
+                  return (
+                    <React.Fragment key={key}>
+                      {act.render({ action: act, isCollapsed: true, isDarkSidebar, user })}
+                    </React.Fragment>
+                  );
+                }
+
+                const isDanger = Boolean(act.danger || act.variant === 'danger');
+                const actionLabel =
+                  act.label !== undefined
+                    ? act.label
+                    : act.text !== undefined
+                    ? act.text
+                    : act.title;
+                const actionTitle =
+                  act.title || (typeof actionLabel === 'string' ? actionLabel : undefined);
+                const actionIcon =
+                  act.collapsedIcon ||
+                  act.icon ||
+                  (typeof actionLabel === 'string' ? actionLabel.slice(0, 2) : null);
+
+                const normalColor = isDanger
+                  ? isDarkSidebar
+                    ? '#f87171'
+                    : 'var(--danger, #ef4444)'
+                  : isDarkSidebar
+                  ? 'rgba(255,255,255,0.7)'
+                  : 'var(--t2, #71717a)';
+
+                const hoverBg = isDanger
+                  ? isDarkSidebar
+                    ? 'rgba(239,68,68,0.2)'
+                    : 'var(--danger-bg, rgba(239,68,68,.10))'
+                  : isDarkSidebar
+                  ? 'rgba(255,255,255,0.08)'
+                  : 'var(--grey-1, #fafafa)';
+
+                const hoverColor = isDanger
+                  ? isDarkSidebar
+                    ? '#fca5a5'
+                    : 'var(--danger, #ef4444)'
+                  : isDarkSidebar
+                  ? '#ffffff'
+                  : 'var(--primary-text, #09090b)';
+
+                return (
+                  <button
+                    key={key}
+                    type="button"
+                    onClick={act.onClick}
+                    disabled={act.disabled}
+                    title={actionTitle}
+                    aria-label={actionTitle}
+                    className={act.className || ''}
+                    style={{
+                      width: 36,
+                      height: 36,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      background: 'transparent',
+                      border: 'none',
+                      borderRadius: 'var(--rads, 8px)',
+                      color: normalColor,
+                      cursor: act.disabled ? 'not-allowed' : 'pointer',
+                      opacity: act.disabled ? 0.5 : 1,
+                      transition: 'all .14s',
+                      ...act.collapsedStyle,
+                      ...act.style,
+                    }}
+                    onMouseEnter={(e) => {
+                      if (act.disabled) return;
+                      e.currentTarget.style.background = hoverBg;
+                      e.currentTarget.style.color = hoverColor;
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.background = 'transparent';
+                      e.currentTarget.style.color = normalColor;
+                    }}
+                  >
+                    {actionIcon}
+                  </button>
+                );
+              })}
             </div>
           )}
         </div>