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

<Meta title='@dxtmisha/ru/functional/Functions/toBind - Глубокое объединение свойств'/>

# `toBind`

Объединяет два объекта свойств, интеллектуально обрабатывая свойства `class` и `style`. Если оба объекта содержат классы или стили, они объединяются в массив для предотвращения перезаписи. Другие свойства из второго объекта (`value`) перезапишут свойства в первом объекте (`extra`).

### Как это работает (Механизм слияния)

Функция принимает два объекта и возвращает новый объект, объединяя их свойства по следующим правилам:

1. **Обычные свойства:** Свойства из второго объекта (`value`) заменяют свойства с таким же именем из первого объекта (`extra`). Это стандартное поведение оператора spread (`...`).
2. **Свойство `class`:** Если свойство `class` присутствует **только в одном** из объектов, оно переносится как есть. Если же класс указан **в обоих** объектах, функция не перезаписывает их, а объединяет в массив `[extra.class, value.class]`. Это позволяет сохранить все классы, переданные в компонент.
3. **Свойство `style`:** Работает аналогично классам. Присутствие стилей в обоих объектах приведет к их объединению в массив `[extra.style, value.style]`, что необходимо для корректного применения всех стилей средствами Vue.

**Параметры:**
- `extra: ItemList` — Базовый объект свойств (например, свойства по умолчанию или внутренние).
- `value: ItemList` — Объект свойств для объединения с базовым (например, пользовательские свойства).

**Возвращает:**
`ConstrBind<R>` — Объединенный объект свойств.

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

const base = { class: 'btn', style: { color: 'red' }, id: 'my-btn' }
const mod = { class: 'btn--large', style: { margin: '10px' }, id: 'primary-btn' }

const result = toBind(base, mod)
/* 
Результат: { 
  id: 'primary-btn', 
  class: ['btn', 'btn--large'], 
  style: [{ color: 'red' }, { margin: '10px' }] 
}
*/
```
