@stlhorizon/vue-ui 1.0.0 → 1.0.2
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 +255 -21
- package/dist/index.esm.js +1 -1
- package/dist/index.js +57 -0
- package/dist/index.umd.js +2 -2
- package/package.json +7 -1
- package/src/index.js +1 -1
package/README.md
CHANGED
|
@@ -1,35 +1,269 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Vue UI Component Library
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A comprehensive Vue.js component library built with Tailwind CSS, featuring 60+ components for building modern web applications.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Installation
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
\`\`\`bash
|
|
8
|
+
npm install @your-org/vue-ui
|
|
9
|
+
\`\`\`
|
|
8
10
|
|
|
9
|
-
##
|
|
11
|
+
## Setup
|
|
10
12
|
|
|
11
|
-
|
|
13
|
+
1. Install the required peer dependencies:
|
|
12
14
|
|
|
13
|
-
|
|
15
|
+
\`\`\`bash
|
|
16
|
+
npm install vue@^3.3.0
|
|
17
|
+
\`\`\`
|
|
14
18
|
|
|
15
|
-
|
|
16
|
-
npm install
|
|
17
|
-
```
|
|
19
|
+
2. Import the base styles in your main CSS file:
|
|
18
20
|
|
|
19
|
-
|
|
21
|
+
\`\`\`css
|
|
22
|
+
@import '@your-org/vue-ui/dist/style.css';
|
|
23
|
+
\`\`\`
|
|
20
24
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
25
|
+
3. Configure your `tailwind.config.js` to include the library's content:
|
|
26
|
+
|
|
27
|
+
\`\`\`js
|
|
28
|
+
/** @type {import('tailwindcss').Config} */
|
|
29
|
+
export default {
|
|
30
|
+
content: [
|
|
31
|
+
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
|
32
|
+
"./node_modules/@your-org/vue-ui/**/*.{vue,js,ts,jsx,tsx}"
|
|
33
|
+
],
|
|
34
|
+
// ... rest of your config
|
|
35
|
+
}
|
|
36
|
+
\`\`\`
|
|
37
|
+
|
|
38
|
+
## Usage
|
|
39
|
+
|
|
40
|
+
### Global Registration (Recommended)
|
|
41
|
+
|
|
42
|
+
\`\`\`js
|
|
43
|
+
// main.js
|
|
44
|
+
import { createApp } from 'vue'
|
|
45
|
+
import VueUI from '@your-org/vue-ui'
|
|
46
|
+
import App from './App.vue'
|
|
47
|
+
|
|
48
|
+
const app = createApp(App)
|
|
49
|
+
app.use(VueUI) // Auto-registers all components globally
|
|
50
|
+
app.mount('#app')
|
|
51
|
+
\`\`\`
|
|
52
|
+
|
|
53
|
+
### Individual Component Import
|
|
54
|
+
|
|
55
|
+
\`\`\`vue
|
|
56
|
+
<template>
|
|
57
|
+
<div>
|
|
58
|
+
<Button variant="default" size="lg">Click me</Button>
|
|
59
|
+
<Input placeholder="Enter text..." />
|
|
60
|
+
<DataTable :data="tableData" :columns="columns" />
|
|
61
|
+
</div>
|
|
62
|
+
</template>
|
|
63
|
+
|
|
64
|
+
<script setup>
|
|
65
|
+
import { Button, Input, DataTable } from '@your-org/vue-ui'
|
|
66
|
+
</script>
|
|
67
|
+
\`\`\`
|
|
68
|
+
|
|
69
|
+
## Available Components
|
|
70
|
+
|
|
71
|
+
### Basic UI Components
|
|
72
|
+
- **Avatar** - User profile pictures with fallbacks
|
|
73
|
+
- **Badge** - Status indicators and labels
|
|
74
|
+
- **Button** - Interactive buttons with variants
|
|
75
|
+
- **Checkbox** - Form checkboxes with states
|
|
76
|
+
- **Divider** - Visual content separators
|
|
77
|
+
- **Icon** - Lucide icon wrapper
|
|
78
|
+
- **Image** - Enhanced image component
|
|
79
|
+
- **Input** - Form input fields
|
|
80
|
+
- **Label** - Form field labels
|
|
81
|
+
- **Link** - Styled navigation links
|
|
82
|
+
- **Logo** - Brand logo component
|
|
83
|
+
- **Option** - Select option items
|
|
84
|
+
- **ProgressBar** - Progress indicators
|
|
85
|
+
- **Radio** - Radio button inputs
|
|
86
|
+
- **Select** - Dropdown select menus
|
|
87
|
+
- **Spinner** - Loading indicators
|
|
88
|
+
- **Switch** - Toggle switches
|
|
89
|
+
- **Text** - Typography component
|
|
90
|
+
- **Textarea** - Multi-line text inputs
|
|
91
|
+
- **Tooltip** - Hover information
|
|
92
|
+
- **Typography** - Text styling utilities
|
|
93
|
+
|
|
94
|
+
### Layout Components
|
|
95
|
+
- **Alert** - Notification messages
|
|
96
|
+
- **Breadcrumb** - Navigation breadcrumbs
|
|
97
|
+
- **ButtonGroup** - Grouped button sets
|
|
98
|
+
- **Card** - Content containers
|
|
99
|
+
- **CardHeader** - Card header sections
|
|
100
|
+
- **CardBody** - Card content areas
|
|
101
|
+
- **CardFooter** - Card footer sections
|
|
102
|
+
|
|
103
|
+
### Form Components
|
|
104
|
+
- **DatePicker** - Date selection inputs
|
|
105
|
+
- **Dropdown** - Dropdown menus
|
|
106
|
+
- **DropdownItem** - Dropdown menu items
|
|
107
|
+
- **FileUpload** - File upload interface
|
|
108
|
+
- **FormField** - Form field wrapper
|
|
109
|
+
- **InputGroup** - Grouped input elements
|
|
110
|
+
|
|
111
|
+
### Navigation Components
|
|
112
|
+
- **ListItem** - List item elements
|
|
113
|
+
- **MenuItem** - Menu item components
|
|
114
|
+
- **Pagination** - Page navigation
|
|
115
|
+
- **SearchBox** - Search input interface
|
|
116
|
+
|
|
117
|
+
### Modal & Overlay Components
|
|
118
|
+
- **Modal** - Dialog overlays
|
|
119
|
+
- **ModalHeader** - Modal header sections
|
|
120
|
+
- **ModalBody** - Modal content areas
|
|
121
|
+
- **ModalFooter** - Modal footer sections
|
|
122
|
+
- **Notification** - System notifications
|
|
123
|
+
- **Toast** - Temporary messages
|
|
124
|
+
|
|
125
|
+
### Interactive Components
|
|
126
|
+
- **Slider** - Range input sliders
|
|
127
|
+
- **Stepper** - Step-by-step navigation
|
|
128
|
+
- **StepperItem** - Individual step items
|
|
129
|
+
- **Tab** - Tab navigation
|
|
130
|
+
- **TabPanel** - Tab content panels
|
|
131
|
+
|
|
132
|
+
### Complex Components
|
|
133
|
+
- **Accordion** - Collapsible content sections
|
|
134
|
+
- **AccordionItem** - Individual accordion items
|
|
135
|
+
- **Calendar** - Date picker calendar
|
|
136
|
+
- **Carousel** - Image/content carousels
|
|
137
|
+
- **CarouselSlide** - Individual carousel slides
|
|
138
|
+
- **DataTable** - Advanced data tables
|
|
139
|
+
- **DataTableHeader** - Table header component
|
|
140
|
+
- **DataTableRow** - Table row component
|
|
141
|
+
- **DataTableCell** - Table cell component
|
|
142
|
+
- **DataTablePagination** - Table pagination
|
|
143
|
+
- **DataTableFilters** - Table filtering
|
|
144
|
+
- **DataTableToolBar** - Table toolbar
|
|
145
|
+
|
|
146
|
+
### Layout Templates
|
|
147
|
+
- **Footer** - Page footer sections
|
|
148
|
+
- **Header** - Page header sections
|
|
149
|
+
- **Hero** - Hero banner sections
|
|
150
|
+
- **MainNavigation** - Primary navigation
|
|
151
|
+
- **MobileNavigation** - Mobile-responsive navigation
|
|
152
|
+
- **SidebarNavigation** - Sidebar navigation
|
|
153
|
+
- **Sidebar** - Sidebar layout component
|
|
154
|
+
- **Timeline** - Event timeline display
|
|
155
|
+
- **TimelineItem** - Individual timeline items
|
|
24
156
|
|
|
25
|
-
###
|
|
157
|
+
### Form Templates
|
|
158
|
+
- **LoginForm** - Complete login form
|
|
159
|
+
- **RegistrationForm** - Complete registration form
|
|
26
160
|
|
|
27
|
-
|
|
161
|
+
### Pre-built Layouts
|
|
162
|
+
- **DefaultLayout** - Standard app layout
|
|
163
|
+
- **ErrorLayout** - Error page layout
|
|
164
|
+
- **AuthLayout** - Authentication page layout
|
|
165
|
+
|
|
166
|
+
## Component Examples
|
|
167
|
+
|
|
168
|
+
### Button Variants
|
|
169
|
+
\`\`\`vue
|
|
170
|
+
<Button variant="default">Default</Button>
|
|
171
|
+
<Button variant="destructive">Destructive</Button>
|
|
172
|
+
<Button variant="outline">Outline</Button>
|
|
173
|
+
<Button variant="secondary">Secondary</Button>
|
|
174
|
+
<Button variant="ghost">Ghost</Button>
|
|
175
|
+
<Button variant="link">Link</Button>
|
|
176
|
+
\`\`\`
|
|
177
|
+
|
|
178
|
+
### DataTable Usage
|
|
179
|
+
\`\`\`vue
|
|
180
|
+
<template>
|
|
181
|
+
<DataTable
|
|
182
|
+
:data="users"
|
|
183
|
+
:columns="columns"
|
|
184
|
+
:filterable="true"
|
|
185
|
+
:sortable="true"
|
|
186
|
+
:paginated="true"
|
|
187
|
+
/>
|
|
188
|
+
</template>
|
|
189
|
+
|
|
190
|
+
<script setup>
|
|
191
|
+
const users = [
|
|
192
|
+
{ id: 1, name: 'John Doe', email: 'john@example.com' },
|
|
193
|
+
{ id: 2, name: 'Jane Smith', email: 'jane@example.com' }
|
|
194
|
+
]
|
|
195
|
+
|
|
196
|
+
const columns = [
|
|
197
|
+
{ key: 'name', label: 'Name', sortable: true },
|
|
198
|
+
{ key: 'email', label: 'Email', sortable: true }
|
|
199
|
+
]
|
|
200
|
+
</script>
|
|
201
|
+
\`\`\`
|
|
202
|
+
|
|
203
|
+
### Layout Usage
|
|
204
|
+
\`\`\`vue
|
|
205
|
+
<template>
|
|
206
|
+
<DefaultLayout>
|
|
207
|
+
<template #header>
|
|
208
|
+
<Header title="My App" />
|
|
209
|
+
</template>
|
|
210
|
+
|
|
211
|
+
<template #sidebar>
|
|
212
|
+
<Sidebar :items="navItems" />
|
|
213
|
+
</template>
|
|
214
|
+
|
|
215
|
+
<template #default>
|
|
216
|
+
<Card>
|
|
217
|
+
<CardHeader>
|
|
218
|
+
<CardTitle>Welcome</CardTitle>
|
|
219
|
+
</CardHeader>
|
|
220
|
+
<CardBody>
|
|
221
|
+
<Text>Your content here</Text>
|
|
222
|
+
</CardBody>
|
|
223
|
+
</Card>
|
|
224
|
+
</template>
|
|
225
|
+
</DefaultLayout>
|
|
226
|
+
</template>
|
|
227
|
+
\`\`\`
|
|
228
|
+
|
|
229
|
+
## Publishing to NPM
|
|
230
|
+
|
|
231
|
+
1. **Update package details in `package.json`:**
|
|
232
|
+
- Change `@your-org/vue-ui` to your actual package name
|
|
233
|
+
- Update repository URL, author, and description
|
|
234
|
+
- Set the correct version number
|
|
235
|
+
|
|
236
|
+
2. **Build the library:**
|
|
237
|
+
\`\`\`bash
|
|
238
|
+
npm run build
|
|
239
|
+
\`\`\`
|
|
240
|
+
|
|
241
|
+
3. **Login to npm:**
|
|
242
|
+
\`\`\`bash
|
|
243
|
+
npm login
|
|
244
|
+
\`\`\`
|
|
245
|
+
|
|
246
|
+
4. **Publish:**
|
|
247
|
+
\`\`\`bash
|
|
248
|
+
npm publish --access public
|
|
249
|
+
\`\`\`
|
|
250
|
+
|
|
251
|
+
## Development
|
|
252
|
+
|
|
253
|
+
\`\`\`bash
|
|
254
|
+
# Install dependencies
|
|
255
|
+
npm install
|
|
256
|
+
|
|
257
|
+
# Start development server
|
|
258
|
+
npm run dev
|
|
259
|
+
|
|
260
|
+
# Build library
|
|
28
261
|
npm run build
|
|
29
|
-
```
|
|
30
262
|
|
|
31
|
-
|
|
263
|
+
# Lint code
|
|
264
|
+
npm run lint
|
|
265
|
+
\`\`\`
|
|
266
|
+
|
|
267
|
+
## License
|
|
32
268
|
|
|
33
|
-
|
|
34
|
-
npm run test:unit
|
|
35
|
-
```
|
|
269
|
+
MIT
|
package/dist/index.esm.js
CHANGED
|
@@ -21603,6 +21603,6 @@ export {
|
|
|
21603
21603
|
Xv as Toast,
|
|
21604
21604
|
V9 as Tooltip,
|
|
21605
21605
|
A9 as Typography,
|
|
21606
|
-
$M as
|
|
21606
|
+
$M as VueUi,
|
|
21607
21607
|
v as cn
|
|
21608
21608
|
};
|