@colorffy/ui 1.0.3 → 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/LICENSE +21 -21
- package/README.md +644 -643
- package/dist/components/ui/navbar/NavbarBrand.vue.d.ts +2 -1
- package/dist/components/ui/navbar/NavbarBrand.vue.d.ts.map +1 -1
- package/dist/components/ui/navbar/NavbarCollapse.vue.d.ts +8 -3
- package/dist/components/ui/navbar/NavbarCollapse.vue.d.ts.map +1 -1
- package/dist/components/ui/navigation/NavigationBar.vue.d.ts +2 -2
- package/dist/components/ui/navigation/NavigationBar.vue.d.ts.map +1 -1
- package/dist/components/ui/navigation/PopoverMenu.vue.d.ts +6 -6
- package/dist/components/ui/navigation/PopoverMenu.vue.d.ts.map +1 -1
- package/dist/{components-Dx8eunul.js → components-B6YFGJTh.js} +748 -718
- package/dist/components-B6YFGJTh.js.map +1 -0
- package/dist/{components-C_RlYPL9.cjs → components-RpkrFmcF.cjs} +4 -4
- package/dist/components-RpkrFmcF.cjs.map +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +2 -2
- package/dist/nuxt.cjs +1 -1
- package/dist/nuxt.js +1 -1
- package/dist/style.css +1 -1
- package/dist/types/navbar.d.ts +5 -0
- package/dist/types/navbar.d.ts.map +1 -1
- package/package.json +80 -70
- package/dist/components-C_RlYPL9.cjs.map +0 -1
- package/dist/components-Dx8eunul.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,644 +1,645 @@
|
|
|
1
|
-
# @colorffy/ui
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/@colorffy/ui)
|
|
4
|
-
[](https://www.npmjs.com/package/@colorffy/ui)
|
|
4
|
+
[](https://github.com/giancarlosgza/colorffy-workspace/actions/workflows/ci.yml)
|
|
5
|
+
[](https://bundlephobia.com/package/@colorffy/ui)
|
|
6
|
+
[](https://github.com/giancarlosgza/colorffy-workspace/blob/main/LICENSE)
|
|
7
|
+
|
|
8
|
+
A modern Nuxt / Vue 3 component library built with TypeScript. Features a comprehensive collection of **unstyled, headless UI components** with full TypeScript support. Designed to work seamlessly with **Colorffy CSS** (optional) or your own custom styles.
|
|
9
|
+
|
|
10
|
+
## ✨ Features
|
|
11
|
+
|
|
12
|
+
- ✨ **70+ Vue 3 Components** - Accordion, Alerts, Buttons, Cards, Dialogs, Forms, Navigation, and more
|
|
13
|
+
- 🎨 **Style-Agnostic** - Use with Colorffy CSS or bring your own styles
|
|
14
|
+
- 📘 **Full TypeScript Support** - Complete type definitions for all components
|
|
15
|
+
- 🔌 **Flexible Installation** - Use globally or import individually
|
|
16
|
+
- 🚀 **Tree-shakeable** - Import only what you need
|
|
17
|
+
- ⚡ **Nuxt 3 Compatible** - Works seamlessly with Nuxt applications
|
|
18
|
+
- 🎯 **Headless Architecture** - Full control over styling and behavior
|
|
19
|
+
|
|
20
|
+
## 📦 Installation
|
|
21
|
+
|
|
22
|
+
### Install Colorffy UI
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
# npm
|
|
26
|
+
npm install @colorffy/ui
|
|
27
|
+
|
|
28
|
+
# yarn
|
|
29
|
+
yarn add @colorffy/ui
|
|
30
|
+
|
|
31
|
+
# pnpm
|
|
32
|
+
pnpm add @colorffy/ui
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Install Peer Dependencies
|
|
36
|
+
|
|
37
|
+
Colorffy UI requires the following peer dependencies:
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
npm install @vueuse/components floating-vue vue
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Install Colorffy CSS (Optional, Recommended)
|
|
44
|
+
|
|
45
|
+
For pre-built, beautiful styling that works out of the box:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
npm install @colorffy/css
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
> **Note:** Colorffy UI components are **unstyled by default**. You can use Colorffy CSS for instant styling, or provide your own custom styles.
|
|
52
|
+
|
|
53
|
+
## 🎨 Styling Options
|
|
54
|
+
|
|
55
|
+
### Option 1: Use Colorffy CSS (Recommended)
|
|
56
|
+
|
|
57
|
+
Import the compiled CSS in your `main.ts`:
|
|
58
|
+
|
|
59
|
+
```typescript
|
|
60
|
+
import ColorffyUI from '@colorffy/ui'
|
|
61
|
+
import { createApp } from 'vue'
|
|
62
|
+
import App from './App.vue'
|
|
63
|
+
import '@colorffy/css' // Import styles
|
|
64
|
+
|
|
65
|
+
const app = createApp(App)
|
|
66
|
+
app.use(ColorffyUI)
|
|
67
|
+
app.mount('#app')
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Option 2: Customize Colorffy CSS with SCSS
|
|
71
|
+
|
|
72
|
+
For full customization, use SCSS to override variables:
|
|
73
|
+
|
|
74
|
+
```scss
|
|
75
|
+
// src/assets/variables.scss
|
|
76
|
+
// Override Colorffy CSS variables
|
|
77
|
+
@forward '@colorffy/css/scss/abstracts/variables' with (
|
|
78
|
+
$primary: #4f46e5,
|
|
79
|
+
$secondary: #ec4899,
|
|
80
|
+
$accent: #0ea5e9,
|
|
81
|
+
);
|
|
82
|
+
|
|
83
|
+
// Import the framework
|
|
84
|
+
@use '@colorffy/css/scss/main';
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
```scss
|
|
88
|
+
// src/assets/main.scss
|
|
89
|
+
@use 'variables' as *;
|
|
90
|
+
|
|
91
|
+
// Your custom styles
|
|
92
|
+
:root {
|
|
93
|
+
--custom-var: value;
|
|
94
|
+
}
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
```typescript
|
|
98
|
+
import ColorffyUI from '@colorffy/ui'
|
|
99
|
+
// main.ts
|
|
100
|
+
import { createApp } from 'vue'
|
|
101
|
+
import App from './App.vue'
|
|
102
|
+
import './assets/main.scss' // Import customized styles
|
|
103
|
+
|
|
104
|
+
const app = createApp(App)
|
|
105
|
+
app.use(ColorffyUI)
|
|
106
|
+
app.mount('#app')
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Option 3: Custom Styles
|
|
110
|
+
|
|
111
|
+
Use Colorffy UI components without any styling framework. Components use semantic class names like `.btn`, `.card`, `.alert`, etc. that you can style however you want:
|
|
112
|
+
|
|
113
|
+
```css
|
|
114
|
+
/* your-custom-styles.css */
|
|
115
|
+
.btn {
|
|
116
|
+
padding: 0.5rem 1rem;
|
|
117
|
+
border-radius: 0.25rem;
|
|
118
|
+
/* Your custom button styles */
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.card {
|
|
122
|
+
background: white;
|
|
123
|
+
border: 1px solid #e5e7eb;
|
|
124
|
+
/* Your custom card styles */
|
|
125
|
+
}
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
For more details on Colorffy CSS customization, see the [Colorffy CSS README](https://www.npmjs.com/package/@colorffy/css).
|
|
129
|
+
|
|
130
|
+
## 🚀 Usage
|
|
131
|
+
|
|
132
|
+
### Option 1: Global Registration (Recommended for most cases)
|
|
133
|
+
|
|
134
|
+
Register all components globally in your `main.ts`:
|
|
135
|
+
|
|
136
|
+
```typescript
|
|
137
|
+
import ColorffyUI from '@colorffy/ui'
|
|
138
|
+
import { createApp } from 'vue'
|
|
139
|
+
import App from './App.vue'
|
|
140
|
+
|
|
141
|
+
const app = createApp(App)
|
|
142
|
+
app.use(ColorffyUI)
|
|
143
|
+
app.mount('#app')
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
Then use components anywhere without imports:
|
|
147
|
+
|
|
148
|
+
```vue
|
|
149
|
+
<template>
|
|
150
|
+
<div>
|
|
151
|
+
<UiButton variant="filled" color="primary" text="Click me!" />
|
|
152
|
+
<UiCard>
|
|
153
|
+
<template #body>
|
|
154
|
+
<h2>Card Content</h2>
|
|
155
|
+
</template>
|
|
156
|
+
</UiCard>
|
|
157
|
+
</div>
|
|
158
|
+
</template>
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
### Option 2: Individual Component Imports (Better for tree-shaking)
|
|
162
|
+
|
|
163
|
+
Import only the components you need:
|
|
164
|
+
|
|
165
|
+
```vue
|
|
166
|
+
<script setup lang="ts">
|
|
167
|
+
import { UiAlert, UiButton, UiCard } from '@colorffy/ui'
|
|
168
|
+
</script>
|
|
169
|
+
|
|
170
|
+
<template>
|
|
171
|
+
<div>
|
|
172
|
+
<UiButton variant="filled" color="primary" text="Click me!" />
|
|
173
|
+
<UiCard>
|
|
174
|
+
<template #body>
|
|
175
|
+
<h2>Card Content</h2>
|
|
176
|
+
</template>
|
|
177
|
+
</UiCard>
|
|
178
|
+
<UiAlert
|
|
179
|
+
type="banner"
|
|
180
|
+
variant="success"
|
|
181
|
+
message="Operation successful!"
|
|
182
|
+
/>
|
|
183
|
+
</div>
|
|
184
|
+
</template>
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
### Option 3: Selective Global Registration
|
|
188
|
+
|
|
189
|
+
Register only specific components globally:
|
|
190
|
+
|
|
191
|
+
```typescript
|
|
192
|
+
import { UiAlert, UiButton, UiCard } from '@colorffy/ui'
|
|
193
|
+
import { createApp } from 'vue'
|
|
194
|
+
import App from './App.vue'
|
|
195
|
+
|
|
196
|
+
const app = createApp(App)
|
|
197
|
+
|
|
198
|
+
// Register only needed components
|
|
199
|
+
app.component('UiButton', UiButton)
|
|
200
|
+
app.component('UiCard', UiCard)
|
|
201
|
+
app.component('UiAlert', UiAlert)
|
|
202
|
+
|
|
203
|
+
app.mount('#app')
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
## 🚀 Nuxt 3 Usage
|
|
207
|
+
|
|
208
|
+
### Install Dependencies
|
|
209
|
+
|
|
210
|
+
```bash
|
|
211
|
+
npm install @colorffy/ui @colorffy/css
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
### Setup with Colorffy CSS
|
|
215
|
+
|
|
216
|
+
Add Colorffy CSS to your `nuxt.config.ts`:
|
|
217
|
+
|
|
218
|
+
```typescript
|
|
219
|
+
export default defineNuxtConfig({
|
|
220
|
+
css: ['@colorffy/css']
|
|
221
|
+
})
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
### Global Registration with Nuxt Plugin
|
|
225
|
+
|
|
226
|
+
Create a plugin file `plugins/colorffy-ui.ts`:
|
|
227
|
+
|
|
228
|
+
```typescript
|
|
229
|
+
import ColorffyUI from '@colorffy/ui'
|
|
230
|
+
|
|
231
|
+
export default defineNuxtPlugin((nuxtApp) => {
|
|
232
|
+
nuxtApp.vueApp.use(ColorffyUI)
|
|
233
|
+
})
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
### Customize with SCSS (Advanced)
|
|
237
|
+
|
|
238
|
+
For full SCSS customization in Nuxt:
|
|
239
|
+
|
|
240
|
+
```typescript
|
|
241
|
+
// nuxt.config.ts
|
|
242
|
+
export default defineNuxtConfig({
|
|
243
|
+
css: ['~/assets/scss/main.scss'],
|
|
244
|
+
vite: {
|
|
245
|
+
css: {
|
|
246
|
+
preprocessorOptions: {
|
|
247
|
+
scss: {
|
|
248
|
+
additionalData: '@use "~/assets/scss/variables.scss" as *;'
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
})
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
```scss
|
|
257
|
+
// assets/scss/variables.scss
|
|
258
|
+
@forward '@colorffy/css/scss/abstracts/variables' with (
|
|
259
|
+
$primary: #4f46e5,
|
|
260
|
+
$secondary: #ec4899,
|
|
261
|
+
$accent: #0ea5e9,
|
|
262
|
+
);
|
|
263
|
+
|
|
264
|
+
@use '@colorffy/css/scss/main';
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
Then use components anywhere in your Nuxt app:
|
|
268
|
+
|
|
269
|
+
```vue
|
|
270
|
+
<template>
|
|
271
|
+
<div>
|
|
272
|
+
<UiButton variant="filled" color="primary" text="Click me!" />
|
|
273
|
+
<UiCard>
|
|
274
|
+
<template #body>
|
|
275
|
+
<h2>Card Content</h2>
|
|
276
|
+
</template>
|
|
277
|
+
</UiCard>
|
|
278
|
+
</div>
|
|
279
|
+
</template>
|
|
280
|
+
```
|
|
281
|
+
|
|
282
|
+
### Individual Component Imports in Nuxt
|
|
283
|
+
|
|
284
|
+
Import components directly in your pages/components:
|
|
285
|
+
|
|
286
|
+
```vue
|
|
287
|
+
<script setup lang="ts">
|
|
288
|
+
import { UiAlert, UiButton, UiCard } from '@colorffy/ui'
|
|
289
|
+
</script>
|
|
290
|
+
|
|
291
|
+
<template>
|
|
292
|
+
<div>
|
|
293
|
+
<UiButton variant="filled" color="primary" text="Click me!" />
|
|
294
|
+
<UiCard>
|
|
295
|
+
<template #body>
|
|
296
|
+
<h2>Card Content</h2>
|
|
297
|
+
</template>
|
|
298
|
+
</UiCard>
|
|
299
|
+
</div>
|
|
300
|
+
</template>
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
### Auto-imports (Optional)
|
|
304
|
+
|
|
305
|
+
To enable auto-imports in Nuxt, add to your `nuxt.config.ts`:
|
|
306
|
+
|
|
307
|
+
```typescript
|
|
308
|
+
export default defineNuxtConfig({
|
|
309
|
+
components: [
|
|
310
|
+
{
|
|
311
|
+
path: 'node_modules/@colorffy/ui/dist',
|
|
312
|
+
pattern: '**/*.vue',
|
|
313
|
+
pathPrefix: false
|
|
314
|
+
}
|
|
315
|
+
]
|
|
316
|
+
})
|
|
317
|
+
```
|
|
318
|
+
|
|
319
|
+
## 💻 Component Categories
|
|
320
|
+
|
|
321
|
+
### Layout Components
|
|
322
|
+
- `UiHeaderContent` - Page header with title and subtitle
|
|
323
|
+
- `UiPaneContent` - Content container/pane
|
|
324
|
+
|
|
325
|
+
### UI Components
|
|
326
|
+
|
|
327
|
+
#### Accordion
|
|
328
|
+
- `UiAccordion` - Single accordion item
|
|
329
|
+
- `UiAccordionGroup` - Group of accordion items
|
|
330
|
+
|
|
331
|
+
#### Alerts
|
|
332
|
+
- `UiAlert` - Alert/notification component
|
|
333
|
+
- `UiAlertToast` - Toast notification
|
|
334
|
+
|
|
335
|
+
#### Badges
|
|
336
|
+
- `UiBadge` - Badge/tag component
|
|
337
|
+
- `UiBadgeGroup` - Group of badges
|
|
338
|
+
|
|
339
|
+
#### Buttons
|
|
340
|
+
- `UiButton` - Standard button
|
|
341
|
+
- `UiButtonMenu` - Button with dropdown menu
|
|
342
|
+
- `UiButtonMenuDivider` - Menu divider
|
|
343
|
+
- `UiButtonMenuItem` - Menu item
|
|
344
|
+
- `UiButtonMenuText` - Menu text item
|
|
345
|
+
- `UiButtonToggleGroup` - Toggle button group
|
|
346
|
+
- `UiButtonTooltip` - Button with tooltip
|
|
347
|
+
|
|
348
|
+
#### Cards
|
|
349
|
+
- `UiCard` - Card container
|
|
350
|
+
|
|
351
|
+
#### Dialogs
|
|
352
|
+
- `UiModal` - Modal dialog
|
|
353
|
+
- `UiConfirmModal` - Confirmation modal
|
|
354
|
+
|
|
355
|
+
#### Icons
|
|
356
|
+
- `UiIconApp` - Application icons
|
|
357
|
+
- `UiIconMaterial` - Material Design icons
|
|
358
|
+
- `UiIconShapes` - Shape icons
|
|
359
|
+
- `UiIconTool` - Tool icons
|
|
360
|
+
|
|
361
|
+
#### Images
|
|
362
|
+
- `UiAvatar` - Avatar component
|
|
363
|
+
|
|
364
|
+
#### Form Inputs
|
|
365
|
+
- `UiInputCheck` - Checkbox input
|
|
366
|
+
- `UiInputColorPicker` - Color picker
|
|
367
|
+
- `UiInputFile` - File upload
|
|
368
|
+
- `UiInputPhoneNumber` - Phone number input
|
|
369
|
+
- `UiInputRadio` - Radio button
|
|
370
|
+
- `UiInputRange` - Range slider
|
|
371
|
+
- `UiInputSelect` - Select dropdown
|
|
372
|
+
- `UiInputText` - Text input
|
|
373
|
+
- `UiInputTextarea` - Textarea input
|
|
374
|
+
|
|
375
|
+
#### Links
|
|
376
|
+
- `UiLinkTooltip` - Link with tooltip
|
|
377
|
+
|
|
378
|
+
#### Lists
|
|
379
|
+
- `UiListGroup` - List container
|
|
380
|
+
- `UiListItem` - List item
|
|
381
|
+
|
|
382
|
+
#### Navigation
|
|
383
|
+
- `UiDrawerLink` - Drawer navigation link
|
|
384
|
+
- `UiNavbarLink` - Navbar link
|
|
385
|
+
- `UiNavigationBar` - Navigation bar
|
|
386
|
+
- `UiPopoverMenu` - Popover menu
|
|
387
|
+
- `UiSegmentedControls` - Segmented control
|
|
388
|
+
- `UiTabs` - Tab navigation
|
|
389
|
+
|
|
390
|
+
#### Tables
|
|
391
|
+
- `UiDatatable` - Data table component
|
|
392
|
+
|
|
393
|
+
### State Components
|
|
394
|
+
- `UiBaseSkeleton` - Basic skeleton loader
|
|
395
|
+
- `UiEmpty` - Empty state
|
|
396
|
+
- `UiExpressiveLoading` - Expressive loading animation
|
|
397
|
+
- `UiGridSkeleton` - Grid skeleton loader
|
|
398
|
+
- `UiLoading` - Loading spinner
|
|
399
|
+
- `UiShapeLoading` - Shape loading animation
|
|
400
|
+
- `UiTableSkeleton` - Table skeleton loader
|
|
401
|
+
|
|
402
|
+
## 💻 Composables
|
|
403
|
+
|
|
404
|
+
The library also exports useful composables:
|
|
405
|
+
|
|
406
|
+
```typescript
|
|
407
|
+
import { useDateUtils, useTextUtils, useToast } from '@colorffy/ui'
|
|
408
|
+
|
|
409
|
+
// Show toast notification
|
|
410
|
+
const toast = useToast()
|
|
411
|
+
toast.show({ message: 'Success!', variant: 'success' })
|
|
412
|
+
|
|
413
|
+
// Date utilities
|
|
414
|
+
const dateUtils = useDateUtils()
|
|
415
|
+
|
|
416
|
+
// Text utilities
|
|
417
|
+
const textUtils = useTextUtils()
|
|
418
|
+
```
|
|
419
|
+
|
|
420
|
+
## 💻 Component Examples
|
|
421
|
+
|
|
422
|
+
### Button
|
|
423
|
+
|
|
424
|
+
```vue
|
|
425
|
+
<template>
|
|
426
|
+
<!-- Filled buttons -->
|
|
427
|
+
<UiButton variant="filled" text="Primary" />
|
|
428
|
+
<UiButton variant="filled" color="success" text="Success" />
|
|
429
|
+
<UiButton variant="filled" color="danger" text="Danger" />
|
|
430
|
+
|
|
431
|
+
<!-- Tonal buttons -->
|
|
432
|
+
<UiButton variant="tonal" color="primary" text="Tonal" />
|
|
433
|
+
|
|
434
|
+
<!-- Outline buttons -->
|
|
435
|
+
<UiButton variant="outline" text="Outline" />
|
|
436
|
+
|
|
437
|
+
<!-- With icon -->
|
|
438
|
+
<UiButton variant="filled" text="With Icon">
|
|
439
|
+
<template #icon>
|
|
440
|
+
<UiIconMaterial icon-code="" />
|
|
441
|
+
</template>
|
|
442
|
+
</UiButton>
|
|
443
|
+
|
|
444
|
+
<!-- Sizes -->
|
|
445
|
+
<UiButton variant="filled" size="sm" text="Small" />
|
|
446
|
+
<UiButton variant="filled" size="md" text="Medium" />
|
|
447
|
+
<UiButton variant="filled" size="lg" text="Large" />
|
|
448
|
+
|
|
449
|
+
<!-- Loading state -->
|
|
450
|
+
<UiButton variant="filled" :loading="true" text="Loading" />
|
|
451
|
+
</template>
|
|
452
|
+
```
|
|
453
|
+
|
|
454
|
+
### Alert
|
|
455
|
+
|
|
456
|
+
```vue
|
|
457
|
+
<template>
|
|
458
|
+
<UiAlert
|
|
459
|
+
type="banner"
|
|
460
|
+
variant="success"
|
|
461
|
+
title="Success!"
|
|
462
|
+
message="Your operation completed successfully."
|
|
463
|
+
/>
|
|
464
|
+
|
|
465
|
+
<UiAlert
|
|
466
|
+
type="snackbar"
|
|
467
|
+
variant="warning"
|
|
468
|
+
message="Warning message"
|
|
469
|
+
/>
|
|
470
|
+
|
|
471
|
+
<UiAlert
|
|
472
|
+
type="tonal"
|
|
473
|
+
variant="danger"
|
|
474
|
+
title="Error"
|
|
475
|
+
message="Something went wrong."
|
|
476
|
+
:critical="true"
|
|
477
|
+
/>
|
|
478
|
+
</template>
|
|
479
|
+
```
|
|
480
|
+
|
|
481
|
+
### Card
|
|
482
|
+
|
|
483
|
+
```vue
|
|
484
|
+
<template>
|
|
485
|
+
<UiCard variant="pane">
|
|
486
|
+
<template #body>
|
|
487
|
+
<h3>Card Title</h3>
|
|
488
|
+
<p>Card content goes here...</p>
|
|
489
|
+
</template>
|
|
490
|
+
</UiCard>
|
|
491
|
+
</template>
|
|
492
|
+
```
|
|
493
|
+
|
|
494
|
+
### Accordion
|
|
495
|
+
|
|
496
|
+
```vue
|
|
497
|
+
<template>
|
|
498
|
+
<UiAccordionGroup>
|
|
499
|
+
<UiAccordion title="Section 1" name="accordion-demo">
|
|
500
|
+
<template #content>
|
|
501
|
+
<p>Content for section 1</p>
|
|
502
|
+
</template>
|
|
503
|
+
</UiAccordion>
|
|
504
|
+
|
|
505
|
+
<UiAccordion title="Section 2" name="accordion-demo">
|
|
506
|
+
<template #content>
|
|
507
|
+
<p>Content for section 2</p>
|
|
508
|
+
</template>
|
|
509
|
+
</UiAccordion>
|
|
510
|
+
</UiAccordionGroup>
|
|
511
|
+
</template>
|
|
512
|
+
```
|
|
513
|
+
|
|
514
|
+
### Form Inputs
|
|
515
|
+
|
|
516
|
+
```vue
|
|
517
|
+
<template>
|
|
518
|
+
<UiInputText
|
|
519
|
+
v-model="name"
|
|
520
|
+
label="Name"
|
|
521
|
+
placeholder="Enter your name"
|
|
522
|
+
/>
|
|
523
|
+
|
|
524
|
+
<UiInputSelect
|
|
525
|
+
v-model="selected"
|
|
526
|
+
:options="options"
|
|
527
|
+
label="Choose option"
|
|
528
|
+
/>
|
|
529
|
+
|
|
530
|
+
<UiInputCheck
|
|
531
|
+
v-model="agree"
|
|
532
|
+
label="I agree to terms"
|
|
533
|
+
/>
|
|
534
|
+
</template>
|
|
535
|
+
```
|
|
536
|
+
|
|
537
|
+
## 🏗️ TypeScript Support
|
|
538
|
+
|
|
539
|
+
All components come with full TypeScript support. Import types as needed:
|
|
540
|
+
|
|
541
|
+
```typescript
|
|
542
|
+
import type {
|
|
543
|
+
AlertType,
|
|
544
|
+
AlertVariant,
|
|
545
|
+
ButtonColor,
|
|
546
|
+
ButtonVariant
|
|
547
|
+
} from '@colorffy/ui'
|
|
548
|
+
|
|
549
|
+
// Use in your components
|
|
550
|
+
const variant: ButtonVariant = 'filled'
|
|
551
|
+
const color: ButtonColor = 'primary'
|
|
552
|
+
```
|
|
553
|
+
|
|
554
|
+
## 🎨 Styling
|
|
555
|
+
|
|
556
|
+
### With Colorffy CSS (Recommended)
|
|
557
|
+
|
|
558
|
+
Colorffy UI is designed to work seamlessly with Colorffy CSS, which provides:
|
|
559
|
+
- Modern, responsive design system
|
|
560
|
+
- Consistent color palette with tonal variants
|
|
561
|
+
- Pre-built component styles
|
|
562
|
+
- Utility classes for rapid development
|
|
563
|
+
- Customizable themes with SCSS variables
|
|
564
|
+
|
|
565
|
+
Install Colorffy CSS and import it in your app:
|
|
566
|
+
|
|
567
|
+
```bash
|
|
568
|
+
npm install @colorffy/css
|
|
569
|
+
```
|
|
570
|
+
|
|
571
|
+
```typescript
|
|
572
|
+
// main.ts
|
|
573
|
+
import '@colorffy/css'
|
|
574
|
+
```
|
|
575
|
+
|
|
576
|
+
### Custom Styling
|
|
577
|
+
|
|
578
|
+
All components use semantic class names that you can style:
|
|
579
|
+
|
|
580
|
+
```css
|
|
581
|
+
/* Component classes */
|
|
582
|
+
.btn { /* Button styles */ }
|
|
583
|
+
.btn.btn-filled { /* Filled variant */ }
|
|
584
|
+
.btn.btn-primary { /* Primary color */ }
|
|
585
|
+
|
|
586
|
+
.card { /* Card styles */ }
|
|
587
|
+
.card.card-pane { /* Pane variant */ }
|
|
588
|
+
|
|
589
|
+
.alert { /* Alert styles */ }
|
|
590
|
+
.alert.alert-success { /* Success variant */ }
|
|
591
|
+
|
|
592
|
+
/* And more... */
|
|
593
|
+
```
|
|
594
|
+
|
|
595
|
+
### CSS Variable Overrides
|
|
596
|
+
|
|
597
|
+
Override CSS custom properties for runtime theming:
|
|
598
|
+
|
|
599
|
+
```css
|
|
600
|
+
:root {
|
|
601
|
+
/* Theme colors */
|
|
602
|
+
--theme-primary-base: #4f46e5;
|
|
603
|
+
--theme-secondary-base: #ec4899;
|
|
604
|
+
|
|
605
|
+
/* Component variables */
|
|
606
|
+
--_btn-radius: 50px;
|
|
607
|
+
--_card-bg-color: #ffffff;
|
|
608
|
+
}
|
|
609
|
+
```
|
|
610
|
+
|
|
611
|
+
For complete styling documentation, see the [Colorffy CSS README](https://www.npmjs.com/package/@colorffy/css).
|
|
612
|
+
|
|
613
|
+
## 🔍 Browser Support
|
|
614
|
+
|
|
615
|
+
- Chrome (latest)
|
|
616
|
+
- Firefox (latest)
|
|
617
|
+
- Safari (latest)
|
|
618
|
+
- Edge (latest)
|
|
619
|
+
|
|
620
|
+
## 🤝 Contributing
|
|
621
|
+
|
|
622
|
+
Contributions, issues, and feature requests are welcome!
|
|
623
|
+
|
|
624
|
+
Feel free to check the [issues page](https://github.com/giancarlosgza/colorffy-workspace/issues).
|
|
625
|
+
|
|
626
|
+
## 📄 License
|
|
627
|
+
|
|
628
|
+
MIT © [Giancarlos Garza](https://github.com/giancarlosgza)
|
|
629
|
+
|
|
630
|
+
## Author
|
|
631
|
+
|
|
632
|
+
Giancarlos Garza
|
|
633
|
+
|
|
634
|
+
## ⭐ Show your support
|
|
635
|
+
|
|
636
|
+
- [Colorffy UI](https://www.npmjs.com/package/@colorffy/ui)
|
|
637
|
+
- [Colorffy CSS](https://www.npmjs.com/package/@colorffy/css)
|
|
638
|
+
|
|
639
|
+
Give a ⭐️ if this project helped you!
|
|
640
|
+
|
|
641
|
+
---
|
|
642
|
+
|
|
643
|
+
Made with ❤️ by [Giancarlos Garza](https://github.com/giancarlosgza) using Vue 3 and TypeScript.
|
|
644
|
+
|
|
644
645
|
Powered by [Colorffy](https://colorffy.com) 🎨
|