@surgeui/ds-vue 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 +44 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
#
|
|
1
|
+
# SurgeUI Vue Design System
|
|
2
2
|
|
|
3
|
-
A modern Vue.js 3 component library with Composition API, designed to create beautiful and consistent user interfaces.
|
|
3
|
+
A modern **Vue.js 3** component library with Composition API, designed to create beautiful and consistent user interfaces.
|
|
4
4
|
|
|
5
|
-
[](https://
|
|
5
|
+
[](https://www.npmjs.com/package/@surgeui/ds-vue)
|
|
6
6
|
[](https://opensource.org/licenses/MIT)
|
|
7
7
|
[](https://vuejs.org/)
|
|
8
8
|
[](https://www.typescriptlang.org/)
|
|
9
9
|
|
|
10
|
+
|
|
10
11
|
## ✨ Features
|
|
11
12
|
|
|
12
13
|
- 🎨 **Modern Design** - Polished and professional components
|
|
@@ -18,7 +19,8 @@ A modern Vue.js 3 component library with Composition API, designed to create bea
|
|
|
18
19
|
- 🌙 **Dark Mode** - Native dark mode support
|
|
19
20
|
- ⚡ **Performance** - Optimized for best performance
|
|
20
21
|
|
|
21
|
-
|
|
22
|
+
|
|
23
|
+
## Quick Start
|
|
22
24
|
|
|
23
25
|
### Installation
|
|
24
26
|
|
|
@@ -29,7 +31,7 @@ npm install @surgeui/ds-vue
|
|
|
29
31
|
### Basic Usage
|
|
30
32
|
|
|
31
33
|
```vue
|
|
32
|
-
<script setup>
|
|
34
|
+
<script setup lang="ts" >
|
|
33
35
|
import '@surgeui/ds-vue/style.css'
|
|
34
36
|
import { SuButton } from '@surgeui/ds-vue'
|
|
35
37
|
import type { ButtonProps } from '@surgeui/ds-vue/types'
|
|
@@ -44,7 +46,7 @@ import type { ButtonProps } from '@surgeui/ds-vue/types'
|
|
|
44
46
|
|
|
45
47
|
### Global Installation
|
|
46
48
|
|
|
47
|
-
```
|
|
49
|
+
```ts
|
|
48
50
|
// main.js
|
|
49
51
|
import { createApp } from 'vue'
|
|
50
52
|
import SurgeUpDS from '@surgeui/ds-vue'
|
|
@@ -56,20 +58,43 @@ app.use(SurgeUpDS)
|
|
|
56
58
|
app.mount('#app')
|
|
57
59
|
```
|
|
58
60
|
|
|
59
|
-
|
|
61
|
+
### Global Configuration
|
|
60
62
|
|
|
61
63
|
Customize default component behavior when installing:
|
|
62
64
|
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
+
```ts
|
|
66
|
+
import type { SurgeuiTheme } from '@surgeui/ds-vue'
|
|
67
|
+
|
|
68
|
+
const options: SurgeuiTheme = {
|
|
65
69
|
// Component prefix (default: 'Su')
|
|
66
70
|
prefix: 'My', // Components become MyButton, MyInput, etc.
|
|
67
71
|
|
|
68
|
-
//
|
|
72
|
+
// custom text color
|
|
69
73
|
textPrimaryColor: '#213222',
|
|
70
|
-
textSecondaryColor: '#454344'
|
|
71
|
-
textTeriaryColor: '#676965'
|
|
72
|
-
|
|
74
|
+
textSecondaryColor: '#454344',
|
|
75
|
+
textTeriaryColor: '#676965',
|
|
76
|
+
|
|
77
|
+
// Custom Button style
|
|
78
|
+
button: {
|
|
79
|
+
bg: '#101010'
|
|
80
|
+
color: '#FFFFFF'
|
|
81
|
+
border: 'none'
|
|
82
|
+
hoverBackground: '#383838'
|
|
83
|
+
hoverShadow: '0 0'
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// custom link style
|
|
87
|
+
link?: {
|
|
88
|
+
color: '#2563eb';
|
|
89
|
+
hoverColor: '#1e40af'
|
|
90
|
+
hoverBackground: 'none'
|
|
91
|
+
activeColor: '#1e3a8a'
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// Other options are currently under development.
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
app.use(SurgeUpDS, options)
|
|
73
98
|
```
|
|
74
99
|
|
|
75
100
|
### With Icons
|
|
@@ -112,6 +137,10 @@ Dark mode is automatically supported through CSS media queries:
|
|
|
112
137
|
@media (prefers-color-scheme: dark) {
|
|
113
138
|
/* Dark mode styles are automatically applied */
|
|
114
139
|
}
|
|
140
|
+
|
|
141
|
+
.dark, [theme="dark"] * {
|
|
142
|
+
/* Dark mode styles are automatically applied */
|
|
143
|
+
}
|
|
115
144
|
```
|
|
116
145
|
|
|
117
146
|
## 📱 Responsive Design
|
|
@@ -167,11 +196,11 @@ Visit our [complete documentation](https://mahmoud-nb.github.io/surge.ui/) for:
|
|
|
167
196
|
|
|
168
197
|
## 🤝 Contributing
|
|
169
198
|
|
|
170
|
-
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
|
|
199
|
+
We welcome contributions! Please see our [Contributing Guide](https://github.com/mahmoud-nb/surge.ui/blob/main/package/CONTRIBUTING.md) for details.
|
|
171
200
|
|
|
172
201
|
## 📄 License
|
|
173
202
|
|
|
174
|
-
MIT License - see the [LICENSE](LICENSE) file for details.
|
|
203
|
+
MIT License - see the [LICENSE](https://github.com/mahmoud-nb/surge.ui/blob/main/package/LICENSE.md) file for details.
|
|
175
204
|
|
|
176
205
|
## 🔗 Links
|
|
177
206
|
|