@abpjs/setting-management 0.9.0

package/dist/index.d.ts

@@ -0,0 +1,191 @@
+import { SettingTab } from '@abpjs/theme-shared';
+export { SettingTab } from '@abpjs/theme-shared';
+import { ABP } from '@abpjs/core';
+import React from 'react';
+
+/**
+ * Setting Management Routes
+ * Translated from @abp/ng.setting-management v0.9.0
+ */
+
+/**
+ * Default routes for setting management module
+ */
+declare const SETTING_MANAGEMENT_ROUTES: {
+    routes: ABP.FullRoute[];
+};
+
+/**
+ * Setting Management Service
+ * Translated from @abp/ng.setting-management v0.9.0
+ */
+
+/**
+ * Service for managing settings tabs and selection.
+ * This service maintains the list of registered setting tabs
+ * and tracks the currently selected tab.
+ */
+declare class SettingManagementService {
+    private _settings;
+    private _selected;
+    private _subscribers;
+    /**
+     * Get all registered settings tabs sorted by order
+     */
+    get settings(): SettingTab[];
+    /**
+     * Get the currently selected setting tab
+     */
+    get selected(): SettingTab | null;
+    /**
+     * Register a new setting tab
+     * @param tab The setting tab to register
+     */
+    addSetting(tab: SettingTab): void;
+    /**
+     * Register multiple setting tabs at once
+     * @param tabs Array of setting tabs to register
+     */
+    addSettings(tabs: SettingTab[]): void;
+    /**
+     * Remove a setting tab by name
+     * @param name The name of the setting tab to remove
+     */
+    removeSetting(name: string): void;
+    /**
+     * Set the currently selected setting tab
+     * @param tab The tab to select (or null to clear selection)
+     */
+    setSelected(tab: SettingTab | null): void;
+    /**
+     * Select a setting tab by name
+     * @param name The name of the tab to select
+     */
+    selectByName(name: string): void;
+    /**
+     * Select a setting tab by URL
+     * @param url The URL of the tab to select
+     */
+    selectByUrl(url: string): void;
+    /**
+     * Clear all registered settings
+     */
+    clearSettings(): void;
+    /**
+     * Subscribe to changes in settings or selection
+     * @param callback Function to call when changes occur
+     * @returns Unsubscribe function
+     */
+    subscribe(callback: () => void): () => void;
+    private notifySubscribers;
+}
+/**
+ * Get the singleton instance of SettingManagementService
+ */
+declare function getSettingManagementService(): SettingManagementService;
+
+/**
+ * Return type for useSettingManagement hook
+ */
+interface UseSettingManagementReturn {
+    /** All registered setting tabs sorted by order */
+    settings: SettingTab[];
+    /** Currently selected setting tab */
+    selected: SettingTab | null;
+    /** Add a new setting tab */
+    addSetting: (tab: SettingTab) => void;
+    /** Add multiple setting tabs */
+    addSettings: (tabs: SettingTab[]) => void;
+    /** Remove a setting tab by name */
+    removeSetting: (name: string) => void;
+    /** Set the selected setting tab */
+    setSelected: (tab: SettingTab | null) => void;
+    /** Select a setting tab by name */
+    selectByName: (name: string) => void;
+    /** Select a setting tab by URL */
+    selectByUrl: (url: string) => void;
+    /** Clear all registered settings */
+    clearSettings: () => void;
+}
+/**
+ * Hook for managing settings tabs
+ *
+ * This hook provides access to the setting management service state
+ * and methods for managing setting tabs in a React application.
+ *
+ * @example
+ * ```tsx
+ * function SettingsPage() {
+ *   const {
+ *     settings,
+ *     selected,
+ *     setSelected,
+ *     addSetting,
+ *   } = useSettingManagement();
+ *
+ *   useEffect(() => {
+ *     addSetting({
+ *       name: 'My Settings',
+ *       order: 1,
+ *       url: '/settings/my',
+ *     });
+ *   }, []);
+ *
+ *   return (
+ *     <div>
+ *       {settings.map(tab => (
+ *         <button
+ *           key={tab.name}
+ *           onClick={() => setSelected(tab)}
+ *           className={selected?.name === tab.name ? 'active' : ''}
+ *         >
+ *           {tab.name}
+ *         </button>
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useSettingManagement(): UseSettingManagementReturn;
+
+/**
+ * Setting Layout Component
+ * Translated from @abp/ng.setting-management v0.9.0
+ */
+
+interface SettingLayoutProps {
+    /** Optional children to render in the content area */
+    children?: React.ReactNode;
+    /** Optional callback when tab is selected */
+    onTabSelect?: (tab: SettingTab) => void;
+    /** Optional CSS class for the container */
+    className?: string;
+}
+/**
+ * Layout component for the settings management page.
+ * Displays a list of setting tabs on the left and content on the right.
+ *
+ * @example
+ * ```tsx
+ * function SettingsPage() {
+ *   const { addSettings } = useSettingManagement();
+ *
+ *   useEffect(() => {
+ *     addSettings([
+ *       { name: 'Account', order: 1, url: '/settings/account' },
+ *       { name: 'Tenant', order: 2, url: '/settings/tenant' },
+ *     ]);
+ *   }, []);
+ *
+ *   return (
+ *     <SettingLayout>
+ *       <Outlet />
+ *     </SettingLayout>
+ *   );
+ * }
+ * ```
+ */
+declare function SettingLayout({ children, onTabSelect, className, }: SettingLayoutProps): React.ReactElement;
+
+export { SETTING_MANAGEMENT_ROUTES, SettingLayout, type SettingLayoutProps, SettingManagementService, type UseSettingManagementReturn, getSettingManagementService, useSettingManagement };

package/dist/index.js

@@ -0,0 +1,318 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  SETTING_MANAGEMENT_ROUTES: () => SETTING_MANAGEMENT_ROUTES,
+  SettingLayout: () => SettingLayout,
+  SettingManagementService: () => SettingManagementService,
+  getSettingManagementService: () => getSettingManagementService,
+  useSettingManagement: () => useSettingManagement
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/constants/routes.ts
+var SETTING_MANAGEMENT_ROUTES = {
+  routes: [
+    {
+      name: "Settings",
+      path: "setting-management",
+      layout: "application",
+      order: 100
+    }
+  ]
+};
+
+// src/services/setting-management.service.ts
+var SettingManagementService = class {
+  constructor() {
+    this._settings = [];
+    this._selected = null;
+    this._subscribers = /* @__PURE__ */ new Set();
+  }
+  /**
+   * Get all registered settings tabs sorted by order
+   */
+  get settings() {
+    return [...this._settings].sort((a, b) => a.order - b.order);
+  }
+  /**
+   * Get the currently selected setting tab
+   */
+  get selected() {
+    return this._selected;
+  }
+  /**
+   * Register a new setting tab
+   * @param tab The setting tab to register
+   */
+  addSetting(tab) {
+    const exists = this._settings.some((s) => s.name === tab.name);
+    if (!exists) {
+      this._settings.push(tab);
+      this.notifySubscribers();
+    }
+  }
+  /**
+   * Register multiple setting tabs at once
+   * @param tabs Array of setting tabs to register
+   */
+  addSettings(tabs) {
+    let changed = false;
+    for (const tab of tabs) {
+      const exists = this._settings.some((s) => s.name === tab.name);
+      if (!exists) {
+        this._settings.push(tab);
+        changed = true;
+      }
+    }
+    if (changed) {
+      this.notifySubscribers();
+    }
+  }
+  /**
+   * Remove a setting tab by name
+   * @param name The name of the setting tab to remove
+   */
+  removeSetting(name) {
+    const index = this._settings.findIndex((s) => s.name === name);
+    if (index !== -1) {
+      this._settings.splice(index, 1);
+      if (this._selected?.name === name) {
+        this._selected = null;
+      }
+      this.notifySubscribers();
+    }
+  }
+  /**
+   * Set the currently selected setting tab
+   * @param tab The tab to select (or null to clear selection)
+   */
+  setSelected(tab) {
+    this._selected = tab;
+    this.notifySubscribers();
+  }
+  /**
+   * Select a setting tab by name
+   * @param name The name of the tab to select
+   */
+  selectByName(name) {
+    const tab = this._settings.find((s) => s.name === name);
+    if (tab) {
+      this.setSelected(tab);
+    }
+  }
+  /**
+   * Select a setting tab by URL
+   * @param url The URL of the tab to select
+   */
+  selectByUrl(url) {
+    const tab = this._settings.find((s) => s.url === url);
+    if (tab) {
+      this.setSelected(tab);
+    }
+  }
+  /**
+   * Clear all registered settings
+   */
+  clearSettings() {
+    this._settings = [];
+    this._selected = null;
+    this.notifySubscribers();
+  }
+  /**
+   * Subscribe to changes in settings or selection
+   * @param callback Function to call when changes occur
+   * @returns Unsubscribe function
+   */
+  subscribe(callback) {
+    this._subscribers.add(callback);
+    return () => {
+      this._subscribers.delete(callback);
+    };
+  }
+  notifySubscribers() {
+    this._subscribers.forEach((callback) => callback());
+  }
+};
+var _instance = null;
+function getSettingManagementService() {
+  if (!_instance) {
+    _instance = new SettingManagementService();
+  }
+  return _instance;
+}
+
+// src/hooks/useSettingManagement.ts
+var import_react = require("react");
+function useSettingManagement() {
+  const service = (0, import_react.useMemo)(() => getSettingManagementService(), []);
+  const [, forceUpdate] = (0, import_react.useState)({});
+  (0, import_react.useEffect)(() => {
+    const unsubscribe = service.subscribe(() => {
+      forceUpdate({});
+    });
+    return unsubscribe;
+  }, [service]);
+  const addSetting = (0, import_react.useCallback)(
+    (tab) => {
+      service.addSetting(tab);
+    },
+    [service]
+  );
+  const addSettings = (0, import_react.useCallback)(
+    (tabs) => {
+      service.addSettings(tabs);
+    },
+    [service]
+  );
+  const removeSetting = (0, import_react.useCallback)(
+    (name) => {
+      service.removeSetting(name);
+    },
+    [service]
+  );
+  const setSelected = (0, import_react.useCallback)(
+    (tab) => {
+      service.setSelected(tab);
+    },
+    [service]
+  );
+  const selectByName = (0, import_react.useCallback)(
+    (name) => {
+      service.selectByName(name);
+    },
+    [service]
+  );
+  const selectByUrl = (0, import_react.useCallback)(
+    (url) => {
+      service.selectByUrl(url);
+    },
+    [service]
+  );
+  const clearSettings = (0, import_react.useCallback)(() => {
+    service.clearSettings();
+  }, [service]);
+  return {
+    settings: service.settings,
+    selected: service.selected,
+    addSetting,
+    addSettings,
+    removeSetting,
+    setSelected,
+    selectByName,
+    selectByUrl,
+    clearSettings
+  };
+}
+
+// src/components/SettingLayout/SettingLayout.tsx
+var import_react2 = require("react");
+var import_react_router_dom = require("react-router-dom");
+var import_jsx_runtime = require("react/jsx-runtime");
+function SettingLayout({
+  children,
+  onTabSelect,
+  className = ""
+}) {
+  const { settings, selected, setSelected } = useSettingManagement();
+  const location = (0, import_react_router_dom.useLocation)();
+  const navigate = (0, import_react_router_dom.useNavigate)();
+  (0, import_react2.useEffect)(() => {
+    if (settings.length > 0) {
+      const matchingTab = settings.find((tab) => tab.url && location.pathname.startsWith(tab.url));
+      if (matchingTab) {
+        setSelected(matchingTab);
+      } else if (!selected && settings.length > 0) {
+        setSelected(settings[0]);
+      }
+    }
+  }, [location.pathname, settings, selected, setSelected]);
+  const handleTabClick = (tab) => {
+    setSelected(tab);
+    onTabSelect?.(tab);
+    if (tab.url) {
+      navigate(tab.url);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `setting-layout ${className}`, style: styles.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "setting-layout-sidebar", style: styles.sidebar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "setting-tabs", style: styles.nav, children: settings.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => handleTabClick(tab),
+        className: `setting-tab ${selected?.name === tab.name ? "active" : ""}`,
+        style: {
+          ...styles.tabButton,
+          ...selected?.name === tab.name ? styles.tabButtonActive : {}
+        },
+        children: tab.name
+      },
+      tab.name
+    )) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "setting-layout-content", style: styles.content, children })
+  ] });
+}
+var styles = {
+  container: {
+    display: "flex",
+    minHeight: "400px",
+    gap: "24px"
+  },
+  sidebar: {
+    width: "240px",
+    flexShrink: 0
+  },
+  nav: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px"
+  },
+  tabButton: {
+    display: "block",
+    width: "100%",
+    padding: "12px 16px",
+    textAlign: "left",
+    border: "none",
+    borderRadius: "6px",
+    background: "transparent",
+    cursor: "pointer",
+    fontSize: "14px",
+    color: "inherit",
+    transition: "background-color 0.2s"
+  },
+  tabButtonActive: {
+    backgroundColor: "rgba(59, 130, 246, 0.1)",
+    color: "#3b82f6",
+    fontWeight: 500
+  },
+  content: {
+    flex: 1,
+    minWidth: 0
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SETTING_MANAGEMENT_ROUTES,
+  SettingLayout,
+  SettingManagementService,
+  getSettingManagementService,
+  useSettingManagement
+});