ECSSv0.2

🇷🇺 Русский

🇬🇧 English

🇷🇺 Русский

🇬🇧 English

Тема

Vue ​

@ecss/vue-adapter генерирует типизированные функциональные компоненты Vue 3 из объявлений @block и @element. id адаптера — 'vue'.

Установка ​

sh
npm i -D @ecss/vue-adapter
sh
pnpm add -D @ecss/vue-adapter
sh
yarn add -D @ecss/vue-adapter

Требуется установленный vue версии 3.3 или выше.

Подключение ​

Адаптер регистрируется в ecss.config.ts через defineConfig из @ecss/config — конфиг не привязан к конкретному сборщику, его читает ECSS-плагин вашего бандлера. defaultAdapter задаёт адаптер, применяемый к .ecss-файлам по умолчанию:

ts
// ecss.config.ts
import { defineConfig } from '@ecss/config';
import { vueAdapter } from '@ecss/vue-adapter';

export default defineConfig({
  adapters: [vueAdapter()],
  defaultAdapter: 'vue',
});

Использование ​

Каждый @block превращается в функциональный компонент Vue 3, который импортируется напрямую из .ecss-файла. Имя компонента формируется как {префикс}{BlockName} (по умолчанию префикс E): @block Button → EButton. Содержимое передаётся через слот по умолчанию.

vue
<script setup lang="ts">
import { EButton } from './Button.ecss';
</script>

<template>
  <EButton as="button" :params="{ variant: 'primary' }" @click="onClick">
    Нажми меня
  </EButton>
</template>

Проп params ​

Параметры блока передаются единственным пропом params (в шаблоне — через привязку :params). Их типы берутся из сгенерированного интерфейса {Block}Params (например ButtonParams), поэтому передать несуществующее значение @enum не получится.

params обязателен, если у блока есть хотя бы один обязательный @param (без ?); если все параметры опциональны или их нет вовсе — проп можно опустить.

vue
<EButton :params="{ variant: 'primary' }" />
<!-- variant обязателен -->
<ECard />
<!-- у Card все параметры опциональны -->

Проп as ​

По умолчанию компонент рендерится как <div>. Проп as принимает любой HTML-тег и меняет корневой элемент. Компонент типизирован по выбранному тегу, поэтому набор допустимых HTML-атрибутов сужается автоматически:

vue
<EButton
  as="button"
  type="submit"
  :params="{ variant: 'primary' }"
>Отправить</EButton>

<EButton as="a" href="/about" :params="{ variant: 'ghost' }">Ссылка</EButton>

При as="a" доступны href, target и прочие атрибуты <a>; при as="button" — type, disabled и т.д.

class, style и атрибуты ​

ECSS задаёт корневому элементу класс блока, CSS-переменные из params и data-атрибуты. Всё, что вы передаёте компоненту, попадает на корневой элемент через стандартный проброс атрибутов Vue:

  • class — ваш класс добавляется к классу блока, не затирая его;
  • style — объединяется с CSS-переменными, сгенерированными из params;
  • остальные атрибуты и обработчики (id, aria-*, data-*, @click, …) попадают на корневой элемент как есть.

Суб-компоненты (@element) ​

Если @block содержит @element, они становятся вложенными компонентами через статические свойства корневого и доступны в шаблоне через точечную нотацию:

vue
<EButton :params="{ withIcon: true }">
  <EButton.Icon>
    <svg><!-- … --></svg>
  </EButton.Icon>
  <EButton.Text>Нажми меня</EButton.Text>
</EButton>

Суб-компоненты поддерживают тот же проп as (по умолчанию <div>), но не принимают params.

Опции ​

Единственная опция фабрики — componentNamePrefix (префикс имени компонента, по умолчанию 'E'): vueAdapter({ componentNamePrefix: 'My' }) → MyButton. Подробнее — в обзоре адаптеров.

Требования ​

Адаптер генерирует функциональные компоненты Vue 3. Требуется Vue 3.3 или выше — в более ранних версиях типизация полиморфного пропа as в шаблонах работает некорректно.

См. также ​