@robuust-digital/vue-components 1.0.1-rc.1 → 1.0.1-rc.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 +2 -96
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -12,7 +12,7 @@ A modern and customizable component library built with **Vue 3** and **Tailwind
|
|
|
12
12
|
|
|
13
13
|
## Docs
|
|
14
14
|
|
|
15
|
-
[**See
|
|
15
|
+
[**See full docs here**](https://robuust.github.io/vue-components/)
|
|
16
16
|
|
|
17
17
|
## Installation
|
|
18
18
|
|
|
@@ -66,103 +66,9 @@ export default defineNuxtConfig({
|
|
|
66
66
|
|
|
67
67
|
This will automatically register all components globally in your Nuxt application, making them available for immediate use.
|
|
68
68
|
|
|
69
|
-
## Usage
|
|
70
|
-
|
|
71
|
-
Import and use components in your Vue 3 project with ease. Here’s an example of how to use the `ButtonBase` component:
|
|
72
|
-
|
|
73
|
-
```vue
|
|
74
|
-
<template>
|
|
75
|
-
<ButtonBase color="primary" label="Click Me" />
|
|
76
|
-
</template>
|
|
77
|
-
|
|
78
|
-
<script setup>
|
|
79
|
-
import { ButtonBase } from '@robuust-digital/vue-components';
|
|
80
|
-
</script>
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
### Props
|
|
84
|
-
|
|
85
|
-
- `label`: `String` – Button text label. Default is an empty string.
|
|
86
|
-
- `color`: `String` – Button color, accepts primary, secondary, or light. Default is primary.
|
|
87
|
-
- `as`: `String | Object | Function` – Render as a different component (e.g., NuxtLink or a). Default is `button`.
|
|
88
|
-
|
|
89
|
-
## Customizing with Tailwind CSS
|
|
90
|
-
|
|
91
|
-
Tailor component styles by overriding default values in `tailwind.config.js`. This allows you to establish a consistent design system across projects:
|
|
92
|
-
|
|
93
|
-
```javascript
|
|
94
|
-
// tailwind.config.js
|
|
95
|
-
module.exports = {
|
|
96
|
-
theme: {
|
|
97
|
-
extend: {
|
|
98
|
-
components: (theme) => ({
|
|
99
|
-
button: {
|
|
100
|
-
primary: {
|
|
101
|
-
backgroundColor: theme('colors.yellow.500'),
|
|
102
|
-
color: '#000',
|
|
103
|
-
},
|
|
104
|
-
secondary: {
|
|
105
|
-
backgroundColor: theme('colors.blue.500'),
|
|
106
|
-
color: '#fff',
|
|
107
|
-
},
|
|
108
|
-
},
|
|
109
|
-
}),
|
|
110
|
-
},
|
|
111
|
-
},
|
|
112
|
-
};
|
|
113
|
-
```
|
|
114
|
-
|
|
115
69
|
### Example Tailwind Configuration
|
|
116
70
|
|
|
117
|
-
With this configuration, you can create a custom theme for
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
### Setup custom button classes and styling
|
|
121
|
-
|
|
122
|
-
You also can define **custom** color button classes and styling. You can set `backgroundColor`, `color`, `hoverBackgroundColor`, `hoverColor` and additional `styles: {}` and `hoverStyles: {}` within the `custom` key:
|
|
123
|
-
|
|
124
|
-
```javascript
|
|
125
|
-
// tailwind.config.js
|
|
126
|
-
module.exports = {
|
|
127
|
-
theme: {
|
|
128
|
-
extend: {
|
|
129
|
-
components: (theme) => ({
|
|
130
|
-
button: {
|
|
131
|
-
custom: {
|
|
132
|
-
foo: {
|
|
133
|
-
backgroundColor: theme('colors.pink.500'),
|
|
134
|
-
color: theme('colors.white'),
|
|
135
|
-
hoverBackgroundColor: theme('colors.pink.600'),
|
|
136
|
-
hoverColor: theme('colors.white'),
|
|
137
|
-
styles: {},
|
|
138
|
-
hoverStyles: {},
|
|
139
|
-
},
|
|
140
|
-
bar: {
|
|
141
|
-
backgroundColor: theme('colors.teal.500'),
|
|
142
|
-
color: theme('colors.white'),
|
|
143
|
-
hoverBackgroundColor: theme('colors.teal.600'),
|
|
144
|
-
hoverColor: theme('colors.white'),
|
|
145
|
-
styles: {},
|
|
146
|
-
hoverStyles: {},
|
|
147
|
-
},
|
|
148
|
-
},
|
|
149
|
-
},
|
|
150
|
-
}),
|
|
151
|
-
},
|
|
152
|
-
},
|
|
153
|
-
};
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
```vue
|
|
157
|
-
<template>
|
|
158
|
-
<ButtonBase color="custom-foo" label="Custom Foo Button" />
|
|
159
|
-
<ButtonBase color="custom-bar" label="Custom Bar Button" />
|
|
160
|
-
</template>
|
|
161
|
-
|
|
162
|
-
<script setup>
|
|
163
|
-
import { ButtonBase } from '@robuust-digital/vue-components';
|
|
164
|
-
</script>
|
|
165
|
-
```
|
|
71
|
+
With this configuration, you can create a custom theme for all components. Each project can apply its own colors and style variants by simply adjusting these values.
|
|
166
72
|
|
|
167
73
|
## Development
|
|
168
74
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@robuust-digital/vue-components",
|
|
3
|
-
"version": "1.0.1-rc.
|
|
3
|
+
"version": "1.0.1-rc.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A modern and customizable component library built with **Vue 3** and **Tailwind CSS**, designed to deliver a flexible, cohesive UI experience across all projects. Quickly integrate reusable components with ease, and customize them to suit your unique branding needs.",
|
|
6
6
|
"directories": {
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"preview": "vite preview",
|
|
39
39
|
"test:unit": "vitest run",
|
|
40
40
|
"lint": "eslint . --fix",
|
|
41
|
-
"docs:dev": "vitepress dev docs",
|
|
41
|
+
"docs:dev": "vitepress dev docs --host",
|
|
42
42
|
"docs:build": "vitepress build docs",
|
|
43
43
|
"docs:preview": "vitepress preview docs"
|
|
44
44
|
},
|