{"_id":"@ecss/vue-adapter","name":"@ecss/vue-adapter","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@ecss/vue-adapter","version":"0.2.0","description":"ECSS Vue adapter — generates Vue 3 components from ECSS blocks.","keywords":["adapter","components","ecss","vue"],"homepage":"https://ecss.webea.ch","bugs":{"url":"https://github.com/webeach/ecss/issues"},"license":"MIT","author":{"name":"Ruslan Martynov","email":"github@webea.ch"},"repository":{"type":"git","url":"git+https://github.com/webeach/ecss.git","directory":"packages/vue-adapter"},"type":"module","main":"dist/index.cjs","types":"dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"dependencies":{"@ecss/compiler":"^0.2.0"},"devDependencies":{"@types/node":"^25.6.0","oxfmt":"^0.52.0","oxlint":"^1.67.0","tsup":"^8","typescript":"^5.9.3","vitest":"^4.1.4","vue":"^3.5.0"},"peerDependencies":{"vue":"^3.3.0"},"peerDependenciesMeta":{"vue":{"optional":true}},"engines":{"node":">=18.0.0","pnpm":"^10"},"scripts":{"build":"tsup","dev":"tsup --watch","lint":"oxlint .","lint:fix":"oxlint --fix .","fmt":"oxfmt","fmt:check":"oxfmt --check","typecheck":"tsc --noEmit","test":"vitest run","test:watch":"vitest"},"_id":"@ecss/vue-adapter@0.2.0","_integrity":"sha512-GTQtiwojpskoP2uoN6Ls+TrwKxPPjl+suHWktiAlyUjcf1iqwNQ2q7rBSKMpe2CJXzzst4sUJg5+uXSI3MHQxw==","_resolved":"/tmp/98a4aa53c4ab617f8dd8fd724e5625d7/ecss-vue-adapter-0.2.0.tgz","_from":"file:ecss-vue-adapter-0.2.0.tgz","_nodeVersion":"22.22.3","_npmVersion":"10.9.8","dist":{"integrity":"sha512-GTQtiwojpskoP2uoN6Ls+TrwKxPPjl+suHWktiAlyUjcf1iqwNQ2q7rBSKMpe2CJXzzst4sUJg5+uXSI3MHQxw==","shasum":"5b25d51bec7cc8fe90f62a105b02d81ccb57fafa","tarball":"https://registry.npmjs.org/@ecss/vue-adapter/-/vue-adapter-0.2.0.tgz","fileCount":10,"unpackedSize":62780,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIC0+PmaTODEVvaZS+cktLqSbF73eplPfIa12zET+xbwIAiBd/zpht7iwSK/l1onanqFcub/o1Q5RaDOGLQGJ4AHfxg=="}]},"_npmUser":{"name":"ruslan_mart","email":"mkheroes@ya.ru"},"directories":{},"maintainers":[{"name":"ruslan_mart","email":"mkheroes@ya.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-adapter_0.2.0_1780528300533_0.7625540246220852"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-03T23:11:40.326Z","0.2.0":"2026-06-03T23:11:40.664Z","modified":"2026-06-03T23:11:40.919Z"},"maintainers":[{"name":"ruslan_mart","email":"mkheroes@ya.ru"}],"description":"ECSS Vue adapter — generates Vue 3 components from ECSS blocks.","homepage":"https://ecss.webea.ch","keywords":["adapter","components","ecss","vue"],"repository":{"type":"git","url":"git+https://github.com/webeach/ecss.git","directory":"packages/vue-adapter"},"author":{"name":"Ruslan Martynov","email":"github@webea.ch"},"bugs":{"url":"https://github.com/webeach/ecss/issues"},"license":"MIT","readme":"<div align=\"center\">\n  <h1>ECSS Vue Adapter</h1>\n  <br>\n  <img alt=\"@ecss/vue-adapter\" src=\"./assets/logo.svg\" height=\"240\">\n  <br>\n  <br>\n  <p style=\"text-decoration: none\">\n    <a href=\"https://www.npmjs.com/package/@ecss/vue-adapter\">\n       <img src=\"https://img.shields.io/npm/v/@ecss/vue-adapter.svg?color=c856c6&labelColor=a440a4\" alt=\"npm package\" />\n    </a>\n    <a href=\"https://github.com/webeach/ecss/actions\">\n      <img src=\"https://img.shields.io/github/actions/workflow/status/webeach/ecss/ci.yml?color=c856c6&labelColor=a440a4\" alt=\"build\" />\n    </a>\n    <a href=\"https://www.npmjs.com/package/@ecss/vue-adapter\">\n      <img src=\"https://img.shields.io/npm/dm/@ecss/vue-adapter.svg?color=c856c6&labelColor=a440a4\" alt=\"npm downloads\" />\n    </a>\n  </p>\n  <p><a href=\"./README.md\">🇺🇸 English version</a> | <a href=\"./README.ru.md\">🇷🇺 Русская версия</a></p>\n  <p>Vue-адаптер для ECSS. Генерирует типизированные компоненты Vue 3 на основе ECSS блоков/элементов</p>\n  <p>\n    <a href=\"https://ecss.webea.ch/ru/reference/adapters/vue.html\" style=\"font-size: 1.5em\">📖 Documentation</a>\n  </p>\n</div>\n\n```vue\n<script setup lang=\"ts\">\nimport { EButton } from './Button.ecss';\n</script>\n\n<template>\n  <EButton as=\"button\" :params=\"{ variant: 'primary' }\" @click=\"onClick\">\n    Нажми меня\n  </EButton>\n</template>\n```\n\n---\n\n## 📦 Установка\n\n```bash\nnpm i -D @ecss/vue-adapter\n```\n\n```bash\npnpm add -D @ecss/vue-adapter\n```\n\n```bash\nyarn add -D @ecss/vue-adapter\n```\n\nТребуется установленный `vue` версии 3.3 или выше.\n\n---\n\n## 🚀 Подключение\n\nАдаптер регистрируется в `ecss.config.ts` через `defineConfig` из `@ecss/config` — конфиг не привязан к конкретному сборщику, его читает ECSS-плагин вашего бандлера (`@ecss/vite-plugin` и др.). `defaultAdapter` указывает, какой адаптер применяется к `.ecss`-файлам по умолчанию; id Vue-адаптера — `'vue'`:\n\n```ts\n// ecss.config.ts\nimport { defineConfig } from '@ecss/config';\nimport { vueAdapter } from '@ecss/vue-adapter';\n\nexport default defineConfig({\n  adapters: [vueAdapter()],\n  defaultAdapter: 'vue',\n});\n```\n\n---\n\n## 🛠 Использование\n\nКаждый `@block` превращается в функциональный компонент Vue 3, который импортируется напрямую из `.ecss`-файла:\n\n```vue\n<script setup lang=\"ts\">\nimport { EButton } from './Button.ecss';\n</script>\n\n<template>\n  <EButton as=\"button\" :params=\"{ variant: 'primary' }\"> Нажми меня </EButton>\n</template>\n```\n\nИмя компонента — это префикс + имя блока: `@block Button` → `EButton`, `@block Card` → `ECard`. Содержимое компонента передаётся через слот по умолчанию (всё, что между тегами).\n\n### Проп `params`\n\nПараметры блока передаются единственным пропом `params` (в шаблоне — через привязку `:params`). TypeScript знает их типы из сгенерированного интерфейса `{Block}Params` (например `ButtonParams`), поэтому передать несуществующее значение enum не получится.\n\n`params` обязателен ровно тогда, когда у блока есть хотя бы один обязательный `@param` (без `?`). Если все параметры опциональны или их нет вовсе — проп можно не передавать.\n\n```vue\n<!-- у Button есть обязательный @param variant → params обязателен -->\n<EButton :params=\"{ variant: 'primary' }\" />\n\n<!-- у Card все параметры опциональны → params можно опустить -->\n<ECard />\n```\n\n### Проп `as`\n\nПо умолчанию компонент рендерится как `<div>`. Проп `as` принимает любой HTML-тег и меняет корневой элемент. Компонент типизирован generic-параметром по выбранному тегу (через `IntrinsicElementAttributes`), поэтому набор допустимых HTML-атрибутов сужается автоматически:\n\n```vue\n<EButton\n  as=\"button\"\n  type=\"submit\"\n  :params=\"{ variant: 'primary' }\"\n>Отправить</EButton>\n\n<EButton as=\"a\" href=\"/about\" :params=\"{ variant: 'ghost' }\">Ссылка</EButton>\n```\n\nПри `as=\"a\"` становятся доступны `href`, `target` и прочие атрибуты `<a>`; при `as=\"button\"` — `type`, `disabled` и т.д.\n\n### `class`, `style` и атрибуты\n\nECSS задаёт корневому элементу класс блока, CSS-переменные из `params` и `data`-атрибуты. Всё, что передаёт потребитель, прокидывается на корневой элемент через стандартный механизм проброса атрибутов Vue (`inheritAttrs`):\n\n- `class` — потребительский класс умно объединяется с классом блока, не затирая его;\n- `style` — мёрджится поверх CSS-переменных, сгенерированных из `params`;\n- остальные атрибуты и обработчики (`id`, `aria-*`, `data-*`, `@click`, …) попадают на корневой элемент как есть.\n\n---\n\n## 🧩 Суб-компоненты (`@element`)\n\nЕсли в `@block` объявлены `@element`, они становятся вложенными компонентами через статические свойства корневого компонента и доступны в шаблоне через точечную нотацию:\n\n```vue\n<EButton :params=\"{ withIcon: true }\">\n  <EButton.Icon>\n    <svg><!-- … --></svg>\n  </EButton.Icon>\n  <EButton.Text>Нажми меня</EButton.Text>\n</EButton>\n```\n\nСуб-компоненты поддерживают тот же проп `as` (по умолчанию `<div>`), но не принимают `params`.\n\n---\n\n## ⚙️ Опции\n\n```ts\nvueAdapter({\n  componentNamePrefix: 'E', // по умолчанию 'E'\n});\n```\n\n| Опция                 | Тип      | По умолчанию | Описание                                                                       |\n| --------------------- | -------- | ------------ | ------------------------------------------------------------------------------ |\n| `componentNamePrefix` | `string` | `'E'`        | Префикс имени компонента. Первый символ — `[A-Z]`, остальные — `[a-zA-Z0-9_]`. |\n\n```ts\nvueAdapter({ componentNamePrefix: 'My' }); // → MyButton, MyCard\n```\n\nНекорректный префикс (не подходящий под `/^[A-Z][a-zA-Z0-9_]*$/`) приводит к ошибке на этапе сборки.\n\n---\n\n## 🟢 Требования\n\nАдаптер генерирует функциональные компоненты Vue 3. Требуется **Vue 3.3 или выше**: типизация опирается на `IntrinsicElementAttributes` и обобщённую сигнатуру функционального компонента, которые `vue-tsc` корректно разрешает в шаблонах начиная с версии 3.3.\n\n---\n\n## 👨‍💻 Автор\n\nРазработка и поддержка: [Руслан Мартынов](https://github.com/ruslan-mart)\n\nЕсли нашёл баг или есть предложение — открывай issue или отправляй pull request.\n\n---\n\n## 📄 Лицензия\n\nРаспространяется под [лицензией MIT](./LICENSE).\n","readmeFilename":"README.ru.md","_rev":"1-b9139350ed3f48c6116bd35cf5c2bd95"}