dxd-style-code 0.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 +202 -0
- package/dist/dxd-style-code.js +4784 -0
- package/dist/dxd-style-code.umd.cjs +1 -0
- package/dist/style.css +1 -0
- package/package.json +63 -0
package/README.md
ADDED
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
# DX Components
|
|
2
|
+
|
|
3
|
+
Vue 3 UI Component Library с атомарной структурой и Tailwind CSS.
|
|
4
|
+
|
|
5
|
+
## Установка
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install dxd-style-code
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Использование
|
|
12
|
+
|
|
13
|
+
### Глобальная регистрация (Plugin)
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
import { createApp } from "vue";
|
|
17
|
+
import App from "./App.vue";
|
|
18
|
+
import DXComponents from "dxd-style-code";
|
|
19
|
+
import "dxd-style-code/style.css";
|
|
20
|
+
|
|
21
|
+
const app = createApp(App);
|
|
22
|
+
app.use(DXComponents);
|
|
23
|
+
app.mount("#app");
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### Импорт отдельных компонентов
|
|
27
|
+
|
|
28
|
+
```js
|
|
29
|
+
import { DXButton, DXInput, DXModal } from "dxd-style-code";
|
|
30
|
+
import "dxd-style-code/style.css";
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Компоненты
|
|
34
|
+
|
|
35
|
+
### Atoms (Базовые)
|
|
36
|
+
|
|
37
|
+
| Компонент | Описание |
|
|
38
|
+
| ------------ | ---------------------------------------------------- |
|
|
39
|
+
| `DXButton` | Кнопка с вариантами: primary, ghost, danger, outline |
|
|
40
|
+
| `DXInput` | Текстовое поле ввода |
|
|
41
|
+
| `DXBadge` | Бейдж/метка со статусами |
|
|
42
|
+
| `DXCheckbox` | Чекбокс |
|
|
43
|
+
| `DXRadio` | Radio-кнопка |
|
|
44
|
+
| `DXToggle` | Переключатель |
|
|
45
|
+
| `DXSelect` | Выпадающий список |
|
|
46
|
+
| `DXTextarea` | Многострочное поле |
|
|
47
|
+
| `DXSlider` | Слайдер/ползунок |
|
|
48
|
+
| `DXLoader` | Индикатор загрузки |
|
|
49
|
+
| `DXSkeleton` | Скелетон для загрузки |
|
|
50
|
+
| `DXToast` | Уведомление |
|
|
51
|
+
| `DXCard` | Карточка-контейнер |
|
|
52
|
+
|
|
53
|
+
### Molecules (Составные)
|
|
54
|
+
|
|
55
|
+
| Компонент | Описание |
|
|
56
|
+
| ----------------- | ---------------------------------- |
|
|
57
|
+
| `DXFormField` | Обертка поля формы с label и error |
|
|
58
|
+
| `DXFormControl` | Расширенная обертка с валидацией |
|
|
59
|
+
| `DXInputMask` | Input с маской ввода |
|
|
60
|
+
| `DXPasswordInput` | Поле пароля с переключателем |
|
|
61
|
+
| `DXSearchSelect` | Select с поиском |
|
|
62
|
+
| `DXDatePicker` | Выбор даты/диапазона |
|
|
63
|
+
| `DXButtonGroup` | Группа кнопок |
|
|
64
|
+
| `DXRadioGroup` | Группа radio-кнопок |
|
|
65
|
+
| `DXFilterGroup` | Группа фильтров |
|
|
66
|
+
| `DXActionButtons` | Кнопки действий (Edit/Delete) |
|
|
67
|
+
| `DXCopyField` | Поле с копированием |
|
|
68
|
+
|
|
69
|
+
### Organisms (Сложные)
|
|
70
|
+
|
|
71
|
+
| Компонент | Описание |
|
|
72
|
+
| -------------- | ------------------------------------------- |
|
|
73
|
+
| `DXModal` | Модальное окно (modal, fullscreen, sidebar) |
|
|
74
|
+
| `DXTable` | Таблица |
|
|
75
|
+
| `DXTabs` | Табы/вкладки |
|
|
76
|
+
| `DXDropdown` | Выпадающее меню |
|
|
77
|
+
| `DXEmptyState` | Пустое состояние |
|
|
78
|
+
|
|
79
|
+
## Примеры
|
|
80
|
+
|
|
81
|
+
### DXButton
|
|
82
|
+
|
|
83
|
+
```vue
|
|
84
|
+
<template>
|
|
85
|
+
<DXButton variant="primary" size="md"> Сохранить </DXButton>
|
|
86
|
+
|
|
87
|
+
<DXButton variant="danger" @click="handleDelete">
|
|
88
|
+
<TrashIcon class="w-4 h-4" />
|
|
89
|
+
Удалить
|
|
90
|
+
</DXButton>
|
|
91
|
+
</template>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
**Props:**
|
|
95
|
+
|
|
96
|
+
- `variant`: `'primary'` | `'ghost'` | `'danger'` | `'outline'`
|
|
97
|
+
- `size`: `'sm'` | `'md'` | `'lg'`
|
|
98
|
+
- `disabled`: `boolean`
|
|
99
|
+
- `block`: `boolean` - на всю ширину
|
|
100
|
+
- `iconOnly`: `boolean` - квадратная кнопка
|
|
101
|
+
|
|
102
|
+
### DXInput
|
|
103
|
+
|
|
104
|
+
```vue
|
|
105
|
+
<template>
|
|
106
|
+
<DXInput
|
|
107
|
+
v-model="email"
|
|
108
|
+
label="Email"
|
|
109
|
+
placeholder="example@mail.com"
|
|
110
|
+
:error="errors.email"
|
|
111
|
+
helper="Введите рабочий email"
|
|
112
|
+
/>
|
|
113
|
+
</template>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
**Props:**
|
|
117
|
+
|
|
118
|
+
- `modelValue`: `string | number`
|
|
119
|
+
- `label`: `string`
|
|
120
|
+
- `placeholder`: `string`
|
|
121
|
+
- `error`: `string`
|
|
122
|
+
- `helper`: `string`
|
|
123
|
+
- `disabled`: `boolean`
|
|
124
|
+
- `size`: `'sm'` | `'md'` | `'lg'`
|
|
125
|
+
|
|
126
|
+
### DXModal
|
|
127
|
+
|
|
128
|
+
```vue
|
|
129
|
+
<template>
|
|
130
|
+
<DXButton @click="showModal = true">Открыть</DXButton>
|
|
131
|
+
|
|
132
|
+
<DXModal
|
|
133
|
+
:open="showModal"
|
|
134
|
+
variant="modal"
|
|
135
|
+
width="md"
|
|
136
|
+
@close="showModal = false"
|
|
137
|
+
>
|
|
138
|
+
<template #title>Заголовок</template>
|
|
139
|
+
|
|
140
|
+
<p>Контент модального окна</p>
|
|
141
|
+
|
|
142
|
+
<template #actions>
|
|
143
|
+
<DXButton variant="ghost" @click="showModal = false"> Отмена </DXButton>
|
|
144
|
+
<DXButton @click="save"> Сохранить </DXButton>
|
|
145
|
+
</template>
|
|
146
|
+
</DXModal>
|
|
147
|
+
</template>
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
**Props:**
|
|
151
|
+
|
|
152
|
+
- `open`: `boolean`
|
|
153
|
+
- `variant`: `'modal'` | `'fullscreen'` | `'sidebar-right'` | `'half-right'`
|
|
154
|
+
- `width`: `'sm'` | `'md'` | `'lg'` | `'xl'`
|
|
155
|
+
- `closable`: `boolean`
|
|
156
|
+
- `showModeSwitcher`: `boolean`
|
|
157
|
+
|
|
158
|
+
## Storybook
|
|
159
|
+
|
|
160
|
+
Запуск Storybook для интерактивной документации:
|
|
161
|
+
|
|
162
|
+
```bash
|
|
163
|
+
npm run storybook
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
## Разработка
|
|
167
|
+
|
|
168
|
+
```bash
|
|
169
|
+
# Установка зависимостей
|
|
170
|
+
npm install
|
|
171
|
+
|
|
172
|
+
# Запуск dev-сервера
|
|
173
|
+
npm run dev
|
|
174
|
+
|
|
175
|
+
# Сборка библиотеки
|
|
176
|
+
npm run build
|
|
177
|
+
|
|
178
|
+
# Запуск Storybook
|
|
179
|
+
npm run storybook
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
## Структура проекта
|
|
183
|
+
|
|
184
|
+
```
|
|
185
|
+
dxd-style-code/
|
|
186
|
+
├── src/
|
|
187
|
+
│ ├── components/
|
|
188
|
+
│ │ ├── atoms/ # Базовые компоненты
|
|
189
|
+
│ │ ├── molecules/ # Составные компоненты
|
|
190
|
+
│ │ └── organisms/ # Сложные компоненты
|
|
191
|
+
│ ├── styles/
|
|
192
|
+
│ │ ├── index.css # Главные стили
|
|
193
|
+
│ │ └── tokens.js # Дизайн-токены
|
|
194
|
+
│ └── index.js # Главный экспорт
|
|
195
|
+
├── .storybook/ # Конфигурация Storybook
|
|
196
|
+
├── package.json
|
|
197
|
+
└── vite.config.js
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
## Лицензия
|
|
201
|
+
|
|
202
|
+
MIT
|