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

<Meta title='@dxtmisha/ru/# UI/properties/types/Состояние (state)'/>

# Состояние (state)

Тип `state` предназначен для описания вариаций, интерактивных режимов или сеток модификаторов (например, размеров). Привязка этого типа предписывает компилятору сгенерировать класс-модификатор по методологии BEM (например, `&--primary` или составной `&--size-sm`).

Объявить состояние можно с помощью префикса `~` или явно через `_type: "state"`. В `dxt-ui` каждое объявленное состояние автоматически типизируется в `props.ts` и привязывается к реактивным свойствам Vue.

В системе выделяют два основных подхода к формированию состояний:
- **Одиночное состояние:** Используется для простых булевых флагов (например, `~primary`). Результирующий класс-модификатор строится напрямую (`&--primary`).
- **Сгруппированные состояния:** Используется для многозначных параметров (например, размерной сетки `~size`). Вложенные в него ключи образуют составные модификаторы (`&--size-sm`).

> Ключ `_default` определяет базовое значение свойства при инициализации компонента. Для булевых флагов задается значение `true`, а для сгруппированных параметров — строковой идентификатор активного узла (например, `"md"`). Компилятор автоматически транслирует это значение в файле `props.ts`.


**Входная конфигурация (`properties.json`):**
```json
{
  "button": {
    "padding": "12px",
    
    "~primary": {                // Одиночное состояние (алиас ~)
      "background-color": "blue",
      "_default": true           // Булево значение по умолчанию
    },
    
    "disabled": {                // Явное объявление типа (state)
      "_type": "state",
      "opacity": "0.5"
    },
    
    "~size": {                   // Сгруппированные состояния
      "sm": { "height": "32px" },
      "md": { "height": "40px" },
      "_default": "md"           // Строковое значение по умолчанию
    }
  }
}
```

**Ожидаемый результат генерации (SCSS):**
```scss
.button {
  padding: 12px;

  &--primary { background-color: blue; }
  &--disabled { opacity: 0.5; }
  &--size-sm { height: 32px; }
  &--size-md { height: 40px; }
}
```

**Интеграция с Vue (`props.ts` и `Component.vue`):**
```typescript
// --- props.ts ---
primary?: boolean
disabled?: boolean
size?: 'sm' | 'md'

// --- Component.vue (classes) ---
'd1-button--primary': props.primary,
'd1-button--disabled': props.disabled,
[`d1-button--size--${props.size}`]: inArray(propsValues.size, props.size)
```
