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

<Meta title='@dxtmisha/en/functional/Classes/DesignConstructorAbstract - Base Constructor Logic'/>

# DesignConstructorAbstract Class

An abstract base class that provides a standardized structure for component constructor logic. It facilitates the management of component data, styles, and state-driven modifications.

## Key Features

- **Standardized Data Structure** — handles component properties, classes, and styles.
- **State Integration** — reactive updates based on component state.
- **Flexible Extensions** — a blueprint for specialized design constructors.

## Initialization

`DesignConstructorAbstract` is an abstract base class and cannot be initialized directly. It serves as a foundation for creating functional component constructors, combining the management of styles, classes, components, and rendering.

### Generic Constraints

The class uses a complex system of generics to ensure full typing for the component:
- `E extends Element` — type of the root HTML element (e.g., `HTMLElement`).
- `COMP extends ConstrComponent` — a list of connected sub-components.
- `EMITS extends ConstrItem` — typing for events (emits) generated by the component.
- `EXPOSE extends ConstrItem` — data structure exported to the external environment via `expose`.
- `SLOTS extends ConstrItem` — available component slots.
- `CLASSES extends ConstrClasses` — resulting CSS class object.
- `P extends ConstrItem` — component properties (props).

**Constructor Parameters:**
- `name: string` — base component name (used for generating class and style names).
- `props: Readonly<P>` — an object with component properties.
- `options?: ConstrOptions<COMP, EMITS, P>` — additional parameters (components, modifications, event handlers, style and class overrides).

```typescript
import { DesignConstructorAbstract } from '@dxtmisha/functional'

// 1. Defining component interfaces
interface MyProps { size?: 'small' | 'medium' }
interface MyClasses { main: { [key: string]: boolean } }

// 2. Implementing the constructor
class ButtonDesign extends DesignConstructorAbstract<
  HTMLButtonElement, // E
  {},                // COMP
  {},                // EMITS
  {},                // EXPOSE
  {},                // SLOTS
  MyClasses,         // CLASSES
  MyProps            // P
> {
  constructor(name: string, props: MyProps) {
    super(name, props)
    this.init()
  }

  // Required methods to implement
  protected initExpose() { return {} }
  protected initClasses() { return { main: { active: true } } }
  protected initStyles() { return {} }
  protected initRender() { return h('button', this.getAttrs(), this.slots.default?.()) }
}
```

## Lifecycle & Rendering Methods

- `init(): this` — Initializes the instance, preparing internal state, classes, and styles.
- `render(): Function` — Returns the rendering function for use in the Vue component's `setup()`.
- `setup(): void` — Executes the main setup sequence for the component logic.

## Naming Helpers

- `getName(): string` — Returns the full component name (e.g., `button-large`).
- `getDesign(): string` — Returns the base design name (the first part of the name).
- `getSubClass(name: string | string[]): string` — Generates a BEM-style sub-element class name (`__`).
- `getStatusClass(name: string | string[]): string` — Generates a BEM-style status class name (`--`).
- `getStyle(name: string | string[]): string` — Generates a system CSS variable name.

## Component Data

- `getAttrs(): object` — Returns the attributes object, excluding reserved `class` and `style`.
- `expose(): object` — Returns data and references to be exposed via Vue's `expose`.
