@lsw-abpvue/feature-management

@lsw-abpvue/feature-management

The feature dialog for Lsw.Abp.VueUI, an unofficial Vue UI for the ABP Framework.

pnpm add @lsw-abpvue/feature-management

What it is

One dialog, opened for whichever provider has features to set — a tenant from the tenant list, the host itself from the settings page:

<AbpFeatureManagement
  v-model:visible="open"
  provider-name="T"
  :provider-key="tenant.id"
  :provider-title="tenant.name"
/>

It renders the three value types ABP defines — a toggle, a free text box, a selection — indents each feature by its depth, and refuses to change one that some other provider set. Switching a toggle on switches on the toggles above it; switching one off switches off the ones below, because a feature nobody can reach is not a state worth sending.

Reset to default deletes this provider's values and lets whatever is above it apply again. The host's own features are part of the application configuration, so changing those reloads it.

The rules, without the dialog

The whole of the above is exported as plain functions, so another feature UI can reuse them and so they can be tested without a DOM:

import { changedFeatures, flattenFeatures, setFeatureValue } from '@lsw-abpvue/feature-management';

const features = flattenFeatures(answer.groups ?? []);
const next = setFeatureValue(features, 'Printing.InColour', 'true');
changedFeatures(next); // [{ name: 'Printing', value: 'true' }, ...]

The settings tab

// main.ts
import { provideFeatureManagementConfig } from '@lsw-abpvue/feature-management/config';

provideFeatureManagementConfig();

Adds a Feature management tab to @lsw-abpvue/setting-management's page, behind FeatureManagement.ManageHostFeatures. The dialog arrives when the tab is opened.

Compared with the Angular UI

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

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

Licence

MIT.