import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/en/functional/Classes/DesignComponents - Base Components Manager'/>

# DesignComponents Class

A base class for working with connected components and managing their rendering logic within a design system. It allows for component registration, modification of their default properties, and flexible VNode generation.

## Key Features

- **Component Management** — centralized registration and retrieval of Vue components.
- **Dynamic Modifications** — supports applying global or specific property modifications to components before rendering.
- **Flexible Rendering** — provides multiple methods (`render`, `renderOne`, `renderAdd`) for generating Vue VNodes with automatic property binding.
- **Performance Optimization** — uses internal caching with Vue `computed` properties for property modifications.

## Initialization

Creates a new `DesignComponents` instance. The class combines components and their modifications into a single rendering management mechanism.

### Generic Constraints

The class uses generics to ensure flexible rendering type configuration:
- `COMP extends ConstrComponent` — An object with a list of available components. Defines the structure by which `DesignComponents` will look up and return components for rendering.
- `P extends ConstrItem` — The property (props) type used for typing modifications and data passed during rendering.

**Parameters:**
- `components: COMP = {}` — a list of connected components (an object where keys are names and values are Vue components).
- `modification?: ConstrComponentMod<P>` — a modification object that allows overriding props for each component.

```typescript
import { DesignComponents } from '@dxtmisha/functional'
import MyButton from './MyButton.vue'
import MyInput from './MyInput.vue'

// 1. Component registration
const components = {
  button: MyButton,
  input: MyInput
}

// 2. Defining modifications (default props)
const modification = {
  button: { size: 'large', color: 'primary' },
  input: { focus: true }
}

const design = new DesignComponents(components, modification)
```


## Rendering Methods

### `render`

Renders a component by its name and returns an array containing a single `VNode`. This is useful for Vue, which often expects arrays of nodes.

**Parameters:**
- `name: string` — The name of the registered component.
- `props: object` — Properties passed to the component.
- `children: any` — Sub-elements or slots of the component.
- `index: string` — The key for the VNode.

**Returns:** `VNode[]` — An array containing the generated VNode.

### `renderOne`

Renders a single component and returns the `VNode` object directly. If the component is not found, it returns `undefined`.

**Parameters:**
- `name: string` — The name of the registered component.
- `props: object` — Properties for the component.
- `children: any` — Sub-elements of the component.
- `index: string` — The key for the VNode.

**Returns:** `VNode | undefined` — The VNode object or `undefined`.

### `renderAdd`

Renders a component and pushes the resulting `VNode` into a provided array. This allows for collecting multiple nodes in a single pass.

**Parameters:**
- `item: any[]` — The array to which the rendering result will be added.
- `name: string` — The name of the component.
- `props: object` — Properties for the component.
- `children: any` — Sub-elements of the component.
- `index: string` — The key for the VNode.

**Returns:** `this` — A reference to the current instance for method chaining.

## Additional Methods

- `is(name: string): boolean` — Checks if a specific component is registered.
- `get(name: string): COMP[K]` — Returns the registered component object by its name.
- `getModification(index?: string, props?: object): object | undefined` — Returns modified input data for connected components.
