@theh0n/ui 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +81 -0
- package/package.json +62 -0
package/README.md
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# @theh0n/ui
|
|
2
|
+
|
|
3
|
+
Легковесная библиотека Vue 3-компонентов для продуктов H0N. Внутри готовы к работе базовые UI-паттерны (кнопки, карточки, диалоги, табы и т. д.) с общей темой и типами, так что вы можете либо подключить плагин целиком, либо импортировать отдельные компоненты.
|
|
4
|
+
|
|
5
|
+
## Основные возможности
|
|
6
|
+
|
|
7
|
+
- 🔌 Глобальный Vue-плагин `createH0NPlugin` с авто-регистрацией компонентов `H0*`.
|
|
8
|
+
- 🧱 Набор готовых компонентов: Accordion, Alert, Button, Card, Dialog, Spinner, Menu, Image, Overlay.
|
|
9
|
+
- 🎨 Гибкая тема: можно переопределять цвета, радиусы, шрифты и focus ring через опции плагина.
|
|
10
|
+
- 🧩 Tree-shaking: при точечных импортах берутся только нужные компоненты и стили.
|
|
11
|
+
|
|
12
|
+
## Установка
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @theh0n/ui
|
|
16
|
+
# или
|
|
17
|
+
pnpm add @theh0n/ui
|
|
18
|
+
yarn add @theh0n/ui
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Базовое подключение
|
|
22
|
+
|
|
23
|
+
```ts
|
|
24
|
+
// main.ts
|
|
25
|
+
import { createApp } from "vue";
|
|
26
|
+
import App from "./App.vue";
|
|
27
|
+
import { createH0NPlugin } from "@theh0n/ui";
|
|
28
|
+
import "@theh0n/ui/style.css";
|
|
29
|
+
|
|
30
|
+
const app = createApp(App);
|
|
31
|
+
|
|
32
|
+
app.use(
|
|
33
|
+
createH0NPlugin({
|
|
34
|
+
autoRegisterComponents: true, // по умолчанию true
|
|
35
|
+
theme: {
|
|
36
|
+
colors: {
|
|
37
|
+
primary: "#0ea5e9",
|
|
38
|
+
text: "#f8fafc",
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
}),
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
app.mount("#app");
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
После установки плагины будут доступны как глобальные элементы `H0Button`, `H0Tabs`, `H0Dialog` и т. д. Если авто-регистрация не нужна, передайте `autoRegisterComponents: false` и импортируйте компоненты вручную.
|
|
48
|
+
|
|
49
|
+
## Кастомизация темы
|
|
50
|
+
|
|
51
|
+
Все CSS-переменные генерируются из объекта `H0NTheme`. Можно переопределять любые вложенные поля:
|
|
52
|
+
|
|
53
|
+
```ts
|
|
54
|
+
createH0NPlugin({
|
|
55
|
+
theme: {
|
|
56
|
+
colors: {
|
|
57
|
+
primary: "#111827",
|
|
58
|
+
danger: "#f43f5e",
|
|
59
|
+
},
|
|
60
|
+
borderRadius: {
|
|
61
|
+
md: "12px",
|
|
62
|
+
},
|
|
63
|
+
fontFamily: "Roboto, sans-serif",
|
|
64
|
+
},
|
|
65
|
+
});
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
Либо вызовите `applyTheme(customTheme)` вручную, если работаете без Vue-плагина.
|
|
69
|
+
|
|
70
|
+
## Скрипты разработки
|
|
71
|
+
|
|
72
|
+
| Команда | Назначение |
|
|
73
|
+
| --------------------------- | --------------------------- |
|
|
74
|
+
| `npm run dev` | Локальная песочница (Vite) |
|
|
75
|
+
| `npm run build` | Сборка библиотеки (`dist/`) |
|
|
76
|
+
| `npm run lint` / `lint:fix` | Проверка ESLint (с fix) |
|
|
77
|
+
| `npm run preview` | Превью production-сборки |
|
|
78
|
+
|
|
79
|
+
## Лицензия
|
|
80
|
+
|
|
81
|
+
Проект распространяется под лицензией MIT. Используйте и кастомизируйте библиотеку свободно в рамках условий лицензии.
|
package/package.json
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@theh0n/ui",
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"author": "blockh0n",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"Vue",
|
|
9
|
+
"H0N"
|
|
10
|
+
],
|
|
11
|
+
"files": [
|
|
12
|
+
"dist",
|
|
13
|
+
"README.md"
|
|
14
|
+
],
|
|
15
|
+
"main": "./dist/index.cjs",
|
|
16
|
+
"module": "./dist/index.js",
|
|
17
|
+
"types": "./dist/index.d.ts",
|
|
18
|
+
"style": "./dist/index.css",
|
|
19
|
+
"sideEffects": [
|
|
20
|
+
"**/*.css"
|
|
21
|
+
],
|
|
22
|
+
"exports": {
|
|
23
|
+
".": {
|
|
24
|
+
"types": "./dist/index.d.ts",
|
|
25
|
+
"import": "./dist/index.js",
|
|
26
|
+
"require": "./dist/index.cjs"
|
|
27
|
+
},
|
|
28
|
+
"./style.css": "./dist/index.css"
|
|
29
|
+
},
|
|
30
|
+
"scripts": {
|
|
31
|
+
"clean": "rimraf dist",
|
|
32
|
+
"build:js": "vite build",
|
|
33
|
+
"build:types": "vue-tsc --emitDeclarationOnly -p tsconfig.json",
|
|
34
|
+
"build": "npm run clean && npm run build:types && npm run build:js",
|
|
35
|
+
"preview": "vite preview",
|
|
36
|
+
"lint": "eslint .",
|
|
37
|
+
"lint:fix": "eslint . --fix"
|
|
38
|
+
},
|
|
39
|
+
"peerDependencies": {
|
|
40
|
+
"vue": "^3"
|
|
41
|
+
},
|
|
42
|
+
"devDependencies": {
|
|
43
|
+
"@types/jsdom": "^21.1.7",
|
|
44
|
+
"@types/node": "^24.1.0",
|
|
45
|
+
"@vitejs/plugin-vue": "6.0.1",
|
|
46
|
+
"@vue/test-utils": "2.4.6",
|
|
47
|
+
"eslint": "^9.32.0",
|
|
48
|
+
"happy-dom": "18.0.1",
|
|
49
|
+
"jsdom": "^26.1.0",
|
|
50
|
+
"rimraf": "6.0.1",
|
|
51
|
+
"sass-embedded": "^1.97.3",
|
|
52
|
+
"terser": "^5.46.0",
|
|
53
|
+
"tsx": "^4.20.3",
|
|
54
|
+
"typescript": "5.8.3",
|
|
55
|
+
"vite": "7.0.6",
|
|
56
|
+
"vite-plugin-dts": "4.5.4",
|
|
57
|
+
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
58
|
+
"vitepress": "1.6.3",
|
|
59
|
+
"vitest": "3.2.4",
|
|
60
|
+
"vue-tsc": "^3.2.4"
|
|
61
|
+
}
|
|
62
|
+
}
|