@auronui/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 +103 -0
- package/package.json +7 -6
package/README.md
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
# @auronui/vue
|
|
2
|
+
|
|
3
|
+
[](https://npmjs.com/package/@auronui/vue)
|
|
4
|
+
[](../../LICENSE)
|
|
5
|
+
|
|
6
|
+
> 85+ accessible Vue 3 components powered by [Reka UI](https://reka-ui.com) and [Tailwind CSS 4](https://tailwindcss.com). Inspired by [HeroUI](https://heroui.com).
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
pnpm add @auronui/vue
|
|
12
|
+
# npm install @auronui/vue
|
|
13
|
+
# yarn add @auronui/vue
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
Peer dependencies — install these alongside the package:
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
pnpm add vue@^3.5.0 reka-ui@^2.9.0 @vueuse/core@^14.0.0
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Setup
|
|
23
|
+
|
|
24
|
+
Import the stylesheet once in your app entry point:
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
// main.ts
|
|
28
|
+
import { createApp } from 'vue'
|
|
29
|
+
import '@auronui/vue/style'
|
|
30
|
+
import App from './App.vue'
|
|
31
|
+
|
|
32
|
+
createApp(App).mount('#app')
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Usage
|
|
36
|
+
|
|
37
|
+
```vue
|
|
38
|
+
<script setup lang="ts">
|
|
39
|
+
import { Button, ButtonGroup } from '@auronui/vue'
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<template>
|
|
43
|
+
<ButtonGroup variant="solid" color="primary">
|
|
44
|
+
<Button>Save</Button>
|
|
45
|
+
<Button>Cancel</Button>
|
|
46
|
+
</ButtonGroup>
|
|
47
|
+
</template>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Every component is individually importable — only what you use lands in your bundle (`sideEffects: false`).
|
|
51
|
+
|
|
52
|
+
## Dark mode
|
|
53
|
+
|
|
54
|
+
Components adapt to the system color scheme automatically via `@media (prefers-color-scheme: dark)`.
|
|
55
|
+
|
|
56
|
+
For explicit control, add the `dark` class (or `data-theme="dark"`) to any ancestor element — typically `<html>`:
|
|
57
|
+
|
|
58
|
+
```html
|
|
59
|
+
<!-- force dark -->
|
|
60
|
+
<html class="dark">
|
|
61
|
+
|
|
62
|
+
<!-- force light -->
|
|
63
|
+
<html class="light">
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Theming
|
|
67
|
+
|
|
68
|
+
Override CSS custom properties on `:root` to customise design tokens:
|
|
69
|
+
|
|
70
|
+
```css
|
|
71
|
+
:root {
|
|
72
|
+
--accent: oklch(55% 0.22 262); /* primary/accent color */
|
|
73
|
+
--radius: 0.375rem; /* base border-radius */
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
All theme tokens are documented in [`@auronui/styles`](../styles/README.md).
|
|
78
|
+
|
|
79
|
+
## Components
|
|
80
|
+
|
|
81
|
+
| Domain | Components |
|
|
82
|
+
|--------|------------|
|
|
83
|
+
| Presentational | Spinner, Separator, Skeleton, Text, Label, Badge, Chip, Card, Kbd, EmptyState |
|
|
84
|
+
| Buttons & Links | Button, ButtonGroup, CloseButton, ToggleButton, ToggleButtonGroup, Link |
|
|
85
|
+
| Form Inputs | Input, Textarea, NumberField, Fieldset |
|
|
86
|
+
| Form Selection | Checkbox, CheckboxGroup, Radio, RadioGroup, Switch, SwitchGroup, InputOTP |
|
|
87
|
+
| Overlay | Popover, Tooltip, Modal, AlertDialog, Drawer |
|
|
88
|
+
| Navigation | Tabs, Accordion, Collapsible, Breadcrumbs, Toolbar |
|
|
89
|
+
| Feedback | Alert, Toast |
|
|
90
|
+
| Selection | ListBox, Select, Dropdown, ComboBox, Autocomplete, TagGroup, Tag |
|
|
91
|
+
| Data | Table, Pagination |
|
|
92
|
+
| Media | Avatar, AvatarGroup, Slider, ProgressBar, ProgressCircle, Meter, ScrollShadow, ScrollArea |
|
|
93
|
+
| Date & Time | Calendar, RangeCalendar, DateInput, DateRangeField, TimeField, DatePicker, DateRangePicker |
|
|
94
|
+
| Color | ColorArea, ColorSlider, ColorField, ColorSwatch, ColorSwatchPicker, ColorInputGroup, ColorPicker |
|
|
95
|
+
| Extended | AspectRatio, Splitter, Stepper, Tree |
|
|
96
|
+
|
|
97
|
+
## SSR
|
|
98
|
+
|
|
99
|
+
All components are SSR-safe and render in Nuxt 3 with zero hydration mismatches.
|
|
100
|
+
|
|
101
|
+
## License
|
|
102
|
+
|
|
103
|
+
[MIT](../../LICENSE)
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@auronui/vue",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Vue 3 85 components with full visual and functional parity",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
|
-
"homepage": "https://auronui
|
|
7
|
+
"homepage": "https://darkknight1992.github.io/auronui",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
10
|
-
"url": "https://github.com/DarkKnight1992/
|
|
10
|
+
"url": "git+https://github.com/DarkKnight1992/auronui.git",
|
|
11
11
|
"directory": "packages/vue"
|
|
12
12
|
},
|
|
13
13
|
"bugs": {
|
|
14
|
-
"url": "https://github.com/DarkKnight1992/
|
|
14
|
+
"url": "https://github.com/DarkKnight1992/auronui/issues"
|
|
15
15
|
},
|
|
16
16
|
"keywords": [
|
|
17
17
|
"vue",
|
|
@@ -53,7 +53,8 @@
|
|
|
53
53
|
}
|
|
54
54
|
},
|
|
55
55
|
"files": [
|
|
56
|
-
"dist"
|
|
56
|
+
"dist",
|
|
57
|
+
"README.md"
|
|
57
58
|
],
|
|
58
59
|
"peerDependencies": {
|
|
59
60
|
"@vueuse/core": ">=14.0.0",
|
|
@@ -74,7 +75,7 @@
|
|
|
74
75
|
"tailwind-merge": "3.5.0",
|
|
75
76
|
"tailwind-variants": "3.2.2",
|
|
76
77
|
"vee-validate": "^4.15.1",
|
|
77
|
-
"@auronui/styles": "1.0.
|
|
78
|
+
"@auronui/styles": "1.0.2"
|
|
78
79
|
},
|
|
79
80
|
"devDependencies": {
|
|
80
81
|
"@chialab/vitest-axe": "0.19.1",
|