@surgeui/ds-vue 3.0.0 → 3.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 +268 -373
- package/dist/components/atoms/Price.vue.d.ts.map +1 -1
- package/dist/components/atoms/SelectBox.vue.d.ts.map +1 -1
- package/dist/components/atoms/Slider.vue.d.ts.map +1 -1
- package/dist/components/molecules/Dropdown.vue.d.ts.map +1 -1
- package/dist/components/molecules/FloatButton.vue.d.ts.map +1 -1
- package/dist/components/organisms/Dialog.vue.d.ts.map +1 -1
- package/dist/components/organisms/Tabs.vue.d.ts.map +1 -1
- package/dist/{index-DxsqHbLv.js → index-ShUpX8pH.js} +1 -1
- package/dist/{index-n-LN9d8r.js → index-ksHUqbRL.js} +5 -5
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.es.js +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -1,373 +1,268 @@
|
|
|
1
|
-
# SurgeUI Vue Design System
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
[](https://www.npmjs.com/package/@surgeui/ds-vue)
|
|
6
|
-
[](https://opensource.org/licenses/MIT)
|
|
7
|
-
[](https://www.typescriptlang.org/)
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
- 📱 **Responsive** -
|
|
18
|
-
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
```ts
|
|
74
|
-
import {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
-
|
|
170
|
-
-
|
|
171
|
-
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
-
|
|
177
|
-
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
- `
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
- `
|
|
193
|
-
- `
|
|
194
|
-
- `
|
|
195
|
-
- `
|
|
196
|
-
- `
|
|
197
|
-
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
<template>
|
|
270
|
-
<SuHeading>
|
|
271
|
-
<informationCircleIcon /> User informations
|
|
272
|
-
</SuHeading>
|
|
273
|
-
<SuButton variant="primary" :icon="HeartIcon" iconDisplay="left">
|
|
274
|
-
I like it
|
|
275
|
-
</SuButton>
|
|
276
|
-
</template>
|
|
277
|
-
```
|
|
278
|
-
|
|
279
|
-
## ♿ Accessibility
|
|
280
|
-
|
|
281
|
-
All components follow WCAG 2.1 AA standards:
|
|
282
|
-
|
|
283
|
-
- **Focus Management** - Clear focus indicators and logical tab order
|
|
284
|
-
- **Keyboard Navigation** - Full keyboard support
|
|
285
|
-
- **Screen Readers** - Proper ARIA attributes and announcements
|
|
286
|
-
- **Color Contrast** - WCAG AA compliant contrast ratios (4.5:1 minimum)
|
|
287
|
-
- **Touch Targets** - Minimum 44px touch targets
|
|
288
|
-
- **Reduced Motion** - Respects `prefers-reduced-motion`
|
|
289
|
-
- **High Contrast** - Supports `prefers-contrast: high`
|
|
290
|
-
- **RTL Support** - Right-to-left language support
|
|
291
|
-
|
|
292
|
-
## 🌙 Dark Mode
|
|
293
|
-
|
|
294
|
-
Dark mode is automatically supported through CSS media queries:
|
|
295
|
-
|
|
296
|
-
```css
|
|
297
|
-
@media (prefers-color-scheme: dark) {
|
|
298
|
-
/* Dark mode styles are automatically applied */
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
.dark, [theme="dark"] * {
|
|
302
|
-
/* Dark mode styles are automatically applied */
|
|
303
|
-
}
|
|
304
|
-
```
|
|
305
|
-
|
|
306
|
-
## 📱 Responsive Design
|
|
307
|
-
|
|
308
|
-
All components are responsive by default:
|
|
309
|
-
|
|
310
|
-
- **Mobile-first** approach
|
|
311
|
-
- **Flexible layouts** that adapt to screen size
|
|
312
|
-
- **Touch-friendly** interactions
|
|
313
|
-
- **Automatic responsive behavior** (e.g., FormFields switches to vertical on mobile)
|
|
314
|
-
|
|
315
|
-
## 🎭 Storybook
|
|
316
|
-
|
|
317
|
-
Explore all components interactively in Storybook:
|
|
318
|
-
|
|
319
|
-
```bash
|
|
320
|
-
npm run storybook
|
|
321
|
-
```
|
|
322
|
-
|
|
323
|
-
## 🛠️ Development
|
|
324
|
-
|
|
325
|
-
### Prerequisites
|
|
326
|
-
|
|
327
|
-
- Node.js 16+
|
|
328
|
-
- Vue.js 3.3+
|
|
329
|
-
|
|
330
|
-
### Build the library
|
|
331
|
-
|
|
332
|
-
```bash
|
|
333
|
-
npm run build
|
|
334
|
-
```
|
|
335
|
-
|
|
336
|
-
### Development mode
|
|
337
|
-
|
|
338
|
-
```bash
|
|
339
|
-
npm run dev
|
|
340
|
-
```
|
|
341
|
-
|
|
342
|
-
### Run Storybook
|
|
343
|
-
|
|
344
|
-
```bash
|
|
345
|
-
npm run storybook
|
|
346
|
-
```
|
|
347
|
-
|
|
348
|
-
## 📖 Documentation
|
|
349
|
-
|
|
350
|
-
Visit our [complete documentation](https://surgeui.com/) for:
|
|
351
|
-
|
|
352
|
-
- **Component API** - Detailed props, events, and slots
|
|
353
|
-
- **Usage examples** - Real-world implementation examples
|
|
354
|
-
- **Accessibility guide** - Best practices for inclusive design
|
|
355
|
-
- **Customization** - Theming and configuration options
|
|
356
|
-
|
|
357
|
-
## 🤝 Contributing
|
|
358
|
-
|
|
359
|
-
We welcome contributions! Please see our [Contributing Guide](https://github.com/mahmoud-nb/surge.ui/blob/main/package/CONTRIBUTING.md) for details.
|
|
360
|
-
|
|
361
|
-
## 📄 License
|
|
362
|
-
|
|
363
|
-
MIT License - see the [LICENSE](https://github.com/mahmoud-nb/surge.ui/blob/main/package/LICENSE.md) file for details.
|
|
364
|
-
|
|
365
|
-
## 🔗 Links
|
|
366
|
-
|
|
367
|
-
- [Documentation](https://surgeui.com/)
|
|
368
|
-
- [Storybook](https://surgeui.com/storybook/)
|
|
369
|
-
- [GitHub Repository](https://github.com/mahmoud-nb/surge.ui)
|
|
370
|
-
|
|
371
|
-
---
|
|
372
|
-
|
|
373
|
-
Made with ❤️ by the SurgeUp team
|
|
1
|
+
# SurgeUI Vue Design System
|
|
2
|
+
|
|
3
|
+
An accessible **Vue 3** component library: components, layouts and composables built with the Composition API and TypeScript, themable through CSS custom properties.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@surgeui/ds-vue)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
[](https://vuejs.org/)
|
|
8
|
+
[](https://www.typescriptlang.org/)
|
|
9
|
+
|
|
10
|
+
## ✨ Features
|
|
11
|
+
|
|
12
|
+
- 🧩 **50+ components** - Display, actions, forms and 9 mobile-first layouts
|
|
13
|
+
- ♿ **Accessible** - WAI-ARIA patterns (combobox, menu button, tabs, accordion, dialog), full keyboard support, screen reader announcements
|
|
14
|
+
- 🎨 **Themable** - 4 built-in themes × light / dark mode, CSS custom properties (`--su-*`)
|
|
15
|
+
- 🌍 **Translatable** - Default texts in French and English, customizable messages
|
|
16
|
+
- 🔧 **TypeScript** - Typed props, emits and composables
|
|
17
|
+
- 📱 **Responsive** - Mobile first; layouts adapt to their **container** width (container queries)
|
|
18
|
+
- 🔄 **RTL & LTR** - Right-to-left support, including keyboard navigation
|
|
19
|
+
|
|
20
|
+
## Quick Start
|
|
21
|
+
|
|
22
|
+
### Requirements
|
|
23
|
+
|
|
24
|
+
- Vue **3.5+**
|
|
25
|
+
|
|
26
|
+
### Installation
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
npm install @surgeui/ds-vue
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Global installation (recommended)
|
|
33
|
+
|
|
34
|
+
Registers every component with the `Su` prefix (`SuButton`, `SuInputField`, …):
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
// main.ts
|
|
38
|
+
import { createApp } from 'vue'
|
|
39
|
+
import SurgeUI from '@surgeui/ds-vue'
|
|
40
|
+
import '@surgeui/ds-vue/style.css'
|
|
41
|
+
import App from './App.vue'
|
|
42
|
+
|
|
43
|
+
createApp(App)
|
|
44
|
+
.use(SurgeUI)
|
|
45
|
+
.mount('#app')
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
```vue
|
|
49
|
+
<template>
|
|
50
|
+
<SuButton variant="primary">My first button</SuButton>
|
|
51
|
+
</template>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### Selective import
|
|
55
|
+
|
|
56
|
+
Components are exported **without** the prefix:
|
|
57
|
+
|
|
58
|
+
```vue
|
|
59
|
+
<script setup lang="ts">
|
|
60
|
+
import '@surgeui/ds-vue/style.css'
|
|
61
|
+
import { Button as SuButton, InputField as SuInputField } from '@surgeui/ds-vue'
|
|
62
|
+
import type { ButtonProps } from '@surgeui/ds-vue'
|
|
63
|
+
</script>
|
|
64
|
+
|
|
65
|
+
<template>
|
|
66
|
+
<SuInputField label="Email" type="email" />
|
|
67
|
+
<SuButton variant="primary">Subscribe</SuButton>
|
|
68
|
+
</template>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Plugin options
|
|
72
|
+
|
|
73
|
+
```ts
|
|
74
|
+
import SurgeUI, { locales } from '@surgeui/ds-vue'
|
|
75
|
+
|
|
76
|
+
app.use(SurgeUI, {
|
|
77
|
+
prefix: 'Su', // Component prefix: SuButton, SuDialog…
|
|
78
|
+
locale: locales.en, // Default texts language (French by default)
|
|
79
|
+
theme: { // Theme overrides (see Customization)
|
|
80
|
+
primaryDefault: '#2563eb'
|
|
81
|
+
}
|
|
82
|
+
})
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## 🧩 What's inside
|
|
86
|
+
|
|
87
|
+
| Category | Components |
|
|
88
|
+
|----------|------------|
|
|
89
|
+
| Display | Heading, Panel, Icon, Image, Avatar, AvatarGroup, Badge, Card, Alert, Tabs, Accordion, Dialog, Popover, Progress, Spinner, Price |
|
|
90
|
+
| Actions | Button, ButtonGroup, Link, LinkGroup, Toggle, ToggleGroup, Dropdown, FloatButton |
|
|
91
|
+
| Forms | Input, Textarea, Password, SelectBox, RadioGroup, CheckboxGroup, Switch, Slider, FileUpload, OtpInput, FormField, FormFieldGroup, and a `*Field` version of each control (label + message) |
|
|
92
|
+
| Layouts | SingleColumnLayout, SidebarLayout, SplitLayout, HolyGrailLayout, MagazineLayout, GridLayout, MasonryLayout, HeroLayout, FullScreenLayout |
|
|
93
|
+
|
|
94
|
+
### Composables
|
|
95
|
+
|
|
96
|
+
| Composable | Purpose |
|
|
97
|
+
|------------|---------|
|
|
98
|
+
| `useTheme` | Theme and light / dark mode, system preference, persistence |
|
|
99
|
+
| `useCustomTheme` | Runtime CSS variable overrides |
|
|
100
|
+
| `useBreakpoint` | Reactive breakpoints |
|
|
101
|
+
| `usePrice` | Localized price formatting |
|
|
102
|
+
| `useLocale` | Default component texts (`provideLocale`, `defineLocale`) |
|
|
103
|
+
| `useFormField` | Links a custom control to `SuFormField` (id, label, message, states) |
|
|
104
|
+
| `useAnnouncer` | Screen reader announcements through persistent live regions |
|
|
105
|
+
| `useFocusTrap` | Stacked focus traps for panels and modal popovers |
|
|
106
|
+
| `useDismiss` | Layered dismissal: Escape, pointer down outside, focus loss |
|
|
107
|
+
| `useListNavigation` / `useTypeahead` | Arrow keys, Home / End and typeahead for lists, menus and tabs |
|
|
108
|
+
| `useFloatingPosition` | Positions a floating element against its trigger (flip, shift, arrow) |
|
|
109
|
+
|
|
110
|
+
## 📝 Forms
|
|
111
|
+
|
|
112
|
+
A control placed in `SuFormField` links itself to the field: label, help message, `aria-describedby`, error state, `required` and `disabled`. No slot props needed:
|
|
113
|
+
|
|
114
|
+
```vue
|
|
115
|
+
<SuFormField label="Country" message="Country of residence" state="error" required>
|
|
116
|
+
<SuSelectBox :options="countries" v-model="country" />
|
|
117
|
+
</SuFormField>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
The `*Field` components (`SuInputField`, `SuSelectBoxField`…) bundle the field and the control in one component.
|
|
121
|
+
|
|
122
|
+
## 🎨 Themes and dark mode
|
|
123
|
+
|
|
124
|
+
Four themes (`default`, `ocean`, `forest`, `sunset`), each in light and dark mode. They are applied through the `data-theme` and `data-theme-mode` attributes on the root element; `useTheme` sets them for you, follows the system preference and remembers the user's choice:
|
|
125
|
+
|
|
126
|
+
```vue
|
|
127
|
+
<script setup>
|
|
128
|
+
import { useTheme } from '@surgeui/ds-vue'
|
|
129
|
+
|
|
130
|
+
const { setTheme, setThemeMode, toggleMode, isDarkMode } = useTheme()
|
|
131
|
+
</script>
|
|
132
|
+
|
|
133
|
+
<template>
|
|
134
|
+
<SuButton @click="toggleMode">{{ isDarkMode ? 'Light' : 'Dark' }} mode</SuButton>
|
|
135
|
+
<SuButton @click="setTheme('ocean')">Ocean theme</SuButton>
|
|
136
|
+
</template>
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
`setThemeMode` accepts `'light'`, `'dark'` or `'system'`. Without `useTheme`, set the attributes yourself:
|
|
140
|
+
|
|
141
|
+
```html
|
|
142
|
+
<html data-theme="default" data-theme-mode="dark">
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
## 🎨 Customization
|
|
146
|
+
|
|
147
|
+
### Theme configuration
|
|
148
|
+
|
|
149
|
+
Theme properties passed to the plugin become CSS variables with the `--su-custom-` prefix, which override the default tokens:
|
|
150
|
+
|
|
151
|
+
```ts
|
|
152
|
+
app.use(SurgeUI, {
|
|
153
|
+
theme: {
|
|
154
|
+
textPrimary: '#1f2937', // → --su-custom-text-primary
|
|
155
|
+
bgSurface: '#f9fafb', // → --su-custom-bg-surface
|
|
156
|
+
primaryDefault: '#3b82f6', // → --su-custom-primary-default
|
|
157
|
+
primaryHover: '#2563eb',
|
|
158
|
+
stateError: '#ef4444'
|
|
159
|
+
}
|
|
160
|
+
})
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
### CSS variables
|
|
164
|
+
|
|
165
|
+
You can also define the variables directly, globally or on a section of the page:
|
|
166
|
+
|
|
167
|
+
```css
|
|
168
|
+
:root {
|
|
169
|
+
--su-custom-primary-default: #3b82f6;
|
|
170
|
+
--su-custom-primary-hover: #2563eb;
|
|
171
|
+
--su-custom-primary-text: #ffffff;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/* Values for the dark mode */
|
|
175
|
+
[data-theme-mode='dark'] {
|
|
176
|
+
--su-custom-bg-canvas: #111827;
|
|
177
|
+
--su-custom-bg-surface: #1f2937;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* A section with its own colors */
|
|
181
|
+
.promo {
|
|
182
|
+
--su-custom-primary-default: #db2777;
|
|
183
|
+
}
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
Priority: `--su-custom-*` variables (CSS or plugin `theme` option) → theme tokens.
|
|
187
|
+
|
|
188
|
+
### Available theme keys
|
|
189
|
+
|
|
190
|
+
- **Text** - `textPrimary`, `textSecondary`, `textTertiary`, `textDisabled`, `textInverse`
|
|
191
|
+
- **Links** - `linkDefault`, `linkHover`, `linkVisited`, `linkMuted`
|
|
192
|
+
- **Backgrounds** - `bgCanvas`, `bgSurface`, `bgSurfaceElevated`, `bgOverlay`, `bgDisabled`, `bgHover`, `bgActive`, `bgSelected`
|
|
193
|
+
- **Borders** - `borderDefault`, `borderSubtle`, `borderStrong`, `borderFocus`, `borderDisabled`
|
|
194
|
+
- **Primary actions** - `primaryDefault`, `primaryHover`, `primaryActive`, `primaryDisabled`, `primaryText`
|
|
195
|
+
- **Secondary actions** - `secondaryDefault`, `secondaryHover`, `secondaryActive`, `secondaryDisabled`, `secondaryText`
|
|
196
|
+
- **States** - `stateSuccess`, `stateWarning`, `stateError`, `stateInfo` and their `…Bg` variants
|
|
197
|
+
- **Shadow** - `shadowColor`
|
|
198
|
+
|
|
199
|
+
## 🌍 Languages
|
|
200
|
+
|
|
201
|
+
Default component texts (accessible labels, placeholders, error messages, announcements) are in French; English is provided. An explicit prop always wins.
|
|
202
|
+
|
|
203
|
+
```ts
|
|
204
|
+
import SurgeUI, { defineLocale, locales } from '@surgeui/ds-vue'
|
|
205
|
+
|
|
206
|
+
app.use(SurgeUI, {
|
|
207
|
+
locale: defineLocale(locales.en, {
|
|
208
|
+
messages: { selectBox: { placeholder: 'Pick one…' } }
|
|
209
|
+
})
|
|
210
|
+
})
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
The `locale` option also accepts a ref, and `provideLocale()` switches the language of a subtree at runtime.
|
|
214
|
+
|
|
215
|
+
## 🖼️ Icons
|
|
216
|
+
|
|
217
|
+
Components accept any Vue component as an icon; the examples use [Heroicons](https://heroicons.com/):
|
|
218
|
+
|
|
219
|
+
```vue
|
|
220
|
+
<script setup>
|
|
221
|
+
import { HeartIcon } from '@heroicons/vue/24/outline'
|
|
222
|
+
</script>
|
|
223
|
+
|
|
224
|
+
<template>
|
|
225
|
+
<SuButton variant="primary" :icon="HeartIcon" icon-display="left">I like it</SuButton>
|
|
226
|
+
</template>
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
## ♿ Accessibility
|
|
230
|
+
|
|
231
|
+
Components are built to meet **WCAG 2.1 AA**:
|
|
232
|
+
|
|
233
|
+
- **WAI-ARIA patterns** - combobox + listbox (SelectBox), menu button (Dropdown), tabs, accordion, modal dialog (native `<dialog>`)
|
|
234
|
+
- **Keyboard** - arrow keys, Home / End, typeahead, Escape; RTL-aware arrows
|
|
235
|
+
- **Focus** - visible focus rings, focus returned to the trigger, focus trap for modal popovers
|
|
236
|
+
- **Forms** - labels, messages and states linked automatically to the control
|
|
237
|
+
- **Screen readers** - persistent live regions for announcements, named landmarks (HolyGrailLayout, with skip link)
|
|
238
|
+
- **Preferences** - `prefers-reduced-motion`, `prefers-contrast: more`, minimum touch targets
|
|
239
|
+
|
|
240
|
+
## ⬆️ Upgrading to 3.0
|
|
241
|
+
|
|
242
|
+
Version 3.0 contains breaking changes:
|
|
243
|
+
|
|
244
|
+
- `SuButton` has `type="button"` by default: pass `type="submit"` to submit a form.
|
|
245
|
+
- `SuSwitch` renders a `<button>` instead of a `<div>`.
|
|
246
|
+
- `SuDialog` uses the native `<dialog>` element: the `zIndex` prop has no effect and the backdrop is `::backdrop`.
|
|
247
|
+
- Vue **3.5+** is required.
|
|
248
|
+
- `accessibility.announceToScreenReader()` and `accessibility.trapFocus()` are deprecated in favor of `announce()` / `useAnnouncer()` and `useFocusTrap()`.
|
|
249
|
+
|
|
250
|
+
See the [CHANGELOG](https://github.com/mahmoud-nb/surge.ui/blob/main/CHANGELOG.md) for the full list.
|
|
251
|
+
|
|
252
|
+
## 📖 Documentation
|
|
253
|
+
|
|
254
|
+
- [Documentation](https://surgeui.com/) - Guides, component API, live examples (French and English)
|
|
255
|
+
- [Storybook](https://surgeui.com/storybook/) - Interactive examples and accessibility checks
|
|
256
|
+
- [GitHub Repository](https://github.com/mahmoud-nb/surge.ui)
|
|
257
|
+
|
|
258
|
+
## 🤝 Contributing
|
|
259
|
+
|
|
260
|
+
Contributions are welcome! See the [Contributing Guide](https://github.com/mahmoud-nb/surge.ui/blob/main/package/CONTRIBUTING.md).
|
|
261
|
+
|
|
262
|
+
## 📄 License
|
|
263
|
+
|
|
264
|
+
MIT - see the [LICENSE](https://github.com/mahmoud-nb/surge.ui/blob/main/package/LICENSE.md) file.
|
|
265
|
+
|
|
266
|
+
---
|
|
267
|
+
|
|
268
|
+
Made with ❤️ by the SurgeUI team
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Price.vue.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/Price.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Price.vue.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/Price.vue"],"names":[],"mappings":"AAyUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AA+HzC,iBAAS,cAAc;WA8ET,OAAO,IAA6B;;QA5LhD,uDAAuD;mBAC5C,GAAG;QACd,gDAAgD;yBAC/B;YAAE,SAAS,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,GAAG,GAAG;QAC5D,wDAAwD;mBAC7C,GAAG;;QALd,uDAAuD;mBAC5C,GAAG;QACd,gDAAgD;yBAC/B;YAAE,SAAS,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,GAAG,GAAG;QAC5D,wDAAwD;mBAC7C,GAAG;;;;EA4Lf;AAgBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;yFAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectBox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/SelectBox.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SelectBox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/SelectBox.vue"],"names":[],"mappings":"AA2uCA,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAS3D,KAAK,WAAW,GAAG,cAAc,CAAC;AA2hBlC,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,SAAS,CAAC;CAC9D,GAAG,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkahB,wBAUG"}
|