@lsw-abpvue/setting-management

@lsw-abpvue/setting-management

The settings page for Lsw.Abp.VueUI, an unofficial Vue UI for the ABP Framework.

pnpm add @lsw-abpvue/setting-management

Two entry points, loaded at different times:

// main.ts: the menu entry and the tabs, at startup
import { provideSettingManagementConfig } from '@lsw-abpvue/setting-management/config';

provideSettingManagementConfig();

// routes.ts: the page, on the first navigation into it
import { lazyRoutes } from '@lsw-abpvue/core/router';

lazyRoutes('/setting-management', () =>
  import('@lsw-abpvue/setting-management').then(module => module.createSettingManagementRoutes()),
);

What it is

A page that is nothing but a tab tree. The module brings two tabs of its own — emailing and the time zone — and every other module adds its to the same tree.

Adding a tab

import { SettingTabsService } from '@lsw-abpvue/setting-management/config';

provideAppInitializer(() => {
  inject(SettingTabsService).add([
    {
      name: 'MyModule.Settings',
      text: 'MyModule::Menu:Settings',
      requiredPolicy: 'MyModule.Settings',
      order: 300,
      component: defineAsyncComponent(() => import('./MySettingsTab.vue')),
    },
  ]);
});

requiredPolicy is checked the way every other permission is, and visible() is read inside a computed for anything a permission cannot express — a feature switched off for the current tenant, say. When no tab survives either check the menu entry goes away with them, so nothing leads to an empty page.

Compared with the Angular UI

Same component key, same route name, same tab names, same localization keys. What differs:

Registered in the design documents' api-parity-map.md.

Licence

MIT.