<ModuleConfigureWidget>

INFO

The <ModuleConfigureWidget> component must be used within a <Provider> component.

The <ModuleConfigureWidget> component is used to display and configure module parameters. It supports both a simplified version and a customizable version, offering a flexible slot system that allows developers to tailor the module configuration interface's content based on their needs.

Component Structure

The <ModuleConfigureWidget> component includes the following main parts:

1. header (optional): The title section of the module, usually displaying the module's name or label.
2. groupHeader (optional): The title of the module group, used to categorize the module into different groups.
3. before (optional): A content display area before the module parameters, which can be used to show additional information or descriptions.
4. after (optional): A content display area after the module parameters, used for adding extra buttons or information.
5. empty (optional): The empty state text displayed when no module parameters are available.

Usage Example

Simplified Version

In the simplified version, the <ModuleConfigureWidget> component automatically displays the module parameters, suitable for scenarios where no content customization is needed:

<template>
    <ModuleConfigureWidget />
</template>

Customizable Version

In the customizable version, you can use slots to customize how each module configuration item is displayed. Below is an example where the content of each section is customized via slots:

<template>
    <ModuleConfigureWidget>
        <!-- Custom Header section, displaying the module's label -->
        <template #header="item">{{ item.label }}</template>

        <!-- Custom Group Header section -->
        <template #groupHeader="item">{{ item.label }}</template>

        <!-- Custom Before section, displaying information before the module -->
        <template #before="item"><span>1</span></template>

        <!-- Custom After section, displaying content after the module -->
        <template #after="item"><span>2</span></template>

        <!-- Empty state when there is no data -->
        <template #empty>No data available</template>
    </ModuleConfigureWidget>
</template>

Slot Explanation

• header Slot: Customize the title display for each module. The item is the module's data object, typically containing the module's label or name.
• groupHeader Slot: Customize the title for the module group, used to categorize and display different modules.
• before Slot: Customize the content displayed before the module parameters. It is typically used to add extra description or information.
• after Slot: Customize the content displayed after the module parameters. It can be used to add buttons, links, or other interactive elements.
• empty Slot: The empty state text displayed when no module data is available, such as "No data" or "No configuration."

Configuration and Customization

The <ModuleConfigureWidget> component offers high flexibility, allowing you to customize each module's display content via slots based on your requirements. In addition to basic slot customization, you can also combine it with other components for complex interactions and dynamic updates.

Notes

• Ensure that the <ModuleConfigureWidget> component is always used within the context of the <Provider> component, as it depends on the global state or functionality provided by the Provider.
• When using slots, you can choose to only implement the parts that need customization. Undefined parts will use the component's default display.

Using with Other Components

The <ModuleConfigureWidget> component can be combined with other configuration-related components, such as dynamic forms or drag-and-drop sorting, to build a complex module configuration interface.