@amulet-laboratories/rig-nuxt 0.2.0
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 +73 -0
- package/package.json +29 -0
- package/src/module.ts +228 -0
package/README.md
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# @amulet-laboratories/rig-nuxt
|
|
2
|
+
|
|
3
|
+
Nuxt module for [@amulet-laboratories/rig](https://github.com/Amulet-Laboratories/rig) — auto-imports all 98 components and 16 composables with full tree-shaking and SSR support.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @amulet-laboratories/rig @amulet-laboratories/rig-nuxt
|
|
9
|
+
# Optional — theme CSS
|
|
10
|
+
pnpm add @amulet-laboratories/hex
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Setup
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
// nuxt.config.ts
|
|
17
|
+
export default defineNuxtConfig({
|
|
18
|
+
modules: ['@amulet-laboratories/rig-nuxt'],
|
|
19
|
+
|
|
20
|
+
// Optional configuration
|
|
21
|
+
rig: {
|
|
22
|
+
// prefix: 'Rig', // RigButton, RigModal, etc.
|
|
23
|
+
// composables: true, // auto-import composables (default)
|
|
24
|
+
},
|
|
25
|
+
})
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Usage
|
|
29
|
+
|
|
30
|
+
Components and composables are available everywhere without imports:
|
|
31
|
+
|
|
32
|
+
```vue
|
|
33
|
+
<template>
|
|
34
|
+
<Button variant="primary" @click="open = true">Open</Button>
|
|
35
|
+
<Modal v-model:open="open" aria-label="Example">
|
|
36
|
+
<p>Content</p>
|
|
37
|
+
</Modal>
|
|
38
|
+
</template>
|
|
39
|
+
|
|
40
|
+
<script setup lang="ts">
|
|
41
|
+
const open = ref(false)
|
|
42
|
+
const { activeShortcuts } = useKeyboard({ 'Mod+K': () => (open.value = true) })
|
|
43
|
+
</script>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Theming
|
|
47
|
+
|
|
48
|
+
Import a Hex theme in your Nuxt app entry:
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
// plugins/hex.client.ts
|
|
52
|
+
import '@amulet-laboratories/hex/vscode'
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
Or in `nuxt.config.ts`:
|
|
56
|
+
|
|
57
|
+
```ts
|
|
58
|
+
export default defineNuxtConfig({
|
|
59
|
+
css: ['@amulet-laboratories/hex/vscode'],
|
|
60
|
+
})
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Prefix
|
|
64
|
+
|
|
65
|
+
Avoid name collisions with the `prefix` option:
|
|
66
|
+
|
|
67
|
+
```ts
|
|
68
|
+
export default defineNuxtConfig({
|
|
69
|
+
rig: { prefix: 'Rig' },
|
|
70
|
+
})
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Then use `<RigButton>`, `<RigModal>`, etc. in templates.
|
package/package.json
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@amulet-laboratories/rig-nuxt",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"description": "Nuxt module for @amulet-laboratories/rig — auto-imports, tree-shaking, SSR-safe",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"author": "Amulet Laboratories",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./src/module.ts"
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
"main": "./src/module.ts",
|
|
14
|
+
"files": [
|
|
15
|
+
"src"
|
|
16
|
+
],
|
|
17
|
+
"peerDependencies": {
|
|
18
|
+
"@amulet-laboratories/rig": ">=0.2.0",
|
|
19
|
+
"nuxt": "^3.0.0"
|
|
20
|
+
},
|
|
21
|
+
"peerDependenciesMeta": {
|
|
22
|
+
"@amulet-laboratories/hex": {
|
|
23
|
+
"optional": true
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"devDependencies": {
|
|
27
|
+
"@nuxt/kit": "^3.0.0"
|
|
28
|
+
}
|
|
29
|
+
}
|
package/src/module.ts
ADDED
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
import { defineNuxtModule, addImports, addComponent } from '@nuxt/kit'
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @amulet-laboratories/rig-nuxt
|
|
5
|
+
*
|
|
6
|
+
* Nuxt module that auto-imports all Rig components and composables.
|
|
7
|
+
* Tree-shaking works automatically — only components used in templates are bundled.
|
|
8
|
+
*
|
|
9
|
+
* Usage in nuxt.config.ts:
|
|
10
|
+
* modules: ['@amulet-laboratories/rig-nuxt']
|
|
11
|
+
*
|
|
12
|
+
* Options:
|
|
13
|
+
* prefix: string — component prefix (default: '' — no prefix)
|
|
14
|
+
* composables: boolean — auto-import composables (default: true)
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
export interface NuxtRigOptions {
|
|
18
|
+
/** Prefix for component names (e.g. 'Rig' → RigButton, RigModal) */
|
|
19
|
+
prefix?: string
|
|
20
|
+
/** Whether to auto-import composables (default: true) */
|
|
21
|
+
composables?: boolean
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const COMPONENTS = [
|
|
25
|
+
// Core primitives
|
|
26
|
+
'Icon',
|
|
27
|
+
'Button',
|
|
28
|
+
'Input',
|
|
29
|
+
'Select',
|
|
30
|
+
'Textarea',
|
|
31
|
+
'Checkbox',
|
|
32
|
+
'Switch',
|
|
33
|
+
'RadioGroup',
|
|
34
|
+
'Badge',
|
|
35
|
+
'Progress',
|
|
36
|
+
'InlineEditor',
|
|
37
|
+
'Resizer',
|
|
38
|
+
'Card',
|
|
39
|
+
'Divider',
|
|
40
|
+
'Kbd',
|
|
41
|
+
'TagInput',
|
|
42
|
+
'Combobox',
|
|
43
|
+
'Label',
|
|
44
|
+
'ToggleGroup',
|
|
45
|
+
'Slider',
|
|
46
|
+
'Avatar',
|
|
47
|
+
'Dot',
|
|
48
|
+
'PulseIndicator',
|
|
49
|
+
'ProgressRing',
|
|
50
|
+
'RangeSlider',
|
|
51
|
+
'AvatarGroup',
|
|
52
|
+
'Pagination',
|
|
53
|
+
'FileInput',
|
|
54
|
+
'Rating',
|
|
55
|
+
'ConfigProvider',
|
|
56
|
+
'Form',
|
|
57
|
+
'NumberInput',
|
|
58
|
+
'OTPInput',
|
|
59
|
+
'Transfer',
|
|
60
|
+
'Mention',
|
|
61
|
+
'InfiniteScroll',
|
|
62
|
+
// Layout
|
|
63
|
+
'ShellGrid',
|
|
64
|
+
'SplitView',
|
|
65
|
+
'Panel',
|
|
66
|
+
'Modal',
|
|
67
|
+
'Collapsible',
|
|
68
|
+
'Accordion',
|
|
69
|
+
'Popover',
|
|
70
|
+
'ScrollArea',
|
|
71
|
+
'PeekView',
|
|
72
|
+
'ResizablePanel',
|
|
73
|
+
'TitleBar',
|
|
74
|
+
'Drawer',
|
|
75
|
+
// Nav
|
|
76
|
+
'NavigationMenu',
|
|
77
|
+
// Navigation
|
|
78
|
+
'ActivityBar',
|
|
79
|
+
'SideBar',
|
|
80
|
+
'View',
|
|
81
|
+
'PanelBar',
|
|
82
|
+
'StatusBar',
|
|
83
|
+
'Breadcrumbs',
|
|
84
|
+
'Tabs',
|
|
85
|
+
'Timeline',
|
|
86
|
+
'Stepper',
|
|
87
|
+
'DatePicker',
|
|
88
|
+
'DateRangePicker',
|
|
89
|
+
// Editor
|
|
90
|
+
'EditorWorkbench',
|
|
91
|
+
'EditorTab',
|
|
92
|
+
'CodeBlock',
|
|
93
|
+
'DiffViewer',
|
|
94
|
+
'ColorPicker',
|
|
95
|
+
// Lists
|
|
96
|
+
'List',
|
|
97
|
+
'TreeView',
|
|
98
|
+
'Table',
|
|
99
|
+
'DataGrid',
|
|
100
|
+
// Menus
|
|
101
|
+
'ContextMenu',
|
|
102
|
+
'CommandPalette',
|
|
103
|
+
'ActionBar',
|
|
104
|
+
'KeyboardHint',
|
|
105
|
+
'DropdownMenu',
|
|
106
|
+
'Menubar',
|
|
107
|
+
// Extras
|
|
108
|
+
'Toast',
|
|
109
|
+
'EmptyState',
|
|
110
|
+
'Tooltip',
|
|
111
|
+
'Skeleton',
|
|
112
|
+
'PropertyGrid',
|
|
113
|
+
'NotificationCenter',
|
|
114
|
+
'KanbanBoard',
|
|
115
|
+
'CalendarGrid',
|
|
116
|
+
'Alert',
|
|
117
|
+
'Carousel',
|
|
118
|
+
'ImagePreview',
|
|
119
|
+
'Popconfirm',
|
|
120
|
+
'LoadingOverlay',
|
|
121
|
+
// Shell
|
|
122
|
+
'IdeShell',
|
|
123
|
+
// Data
|
|
124
|
+
'Sparkline',
|
|
125
|
+
'MiniBar',
|
|
126
|
+
'StatCard',
|
|
127
|
+
'BarChart',
|
|
128
|
+
'LineChart',
|
|
129
|
+
'AreaChart',
|
|
130
|
+
'ScatterPlot',
|
|
131
|
+
'Heatmap',
|
|
132
|
+
'RadarChart',
|
|
133
|
+
'Treemap',
|
|
134
|
+
'SankeyDiagram',
|
|
135
|
+
// Spatial
|
|
136
|
+
'MapCanvas',
|
|
137
|
+
'GlobeView',
|
|
138
|
+
'ScatterPlot3D',
|
|
139
|
+
'GraphNetwork',
|
|
140
|
+
'PointCloud',
|
|
141
|
+
// Temporal
|
|
142
|
+
'TimelineScrubber',
|
|
143
|
+
'AnimatedChart',
|
|
144
|
+
'PlaybackControls',
|
|
145
|
+
'TemporalHeatmap',
|
|
146
|
+
'ParticleField',
|
|
147
|
+
// Web
|
|
148
|
+
'SiteShell',
|
|
149
|
+
'SiteNav',
|
|
150
|
+
'Hero',
|
|
151
|
+
'Section',
|
|
152
|
+
'StatRow',
|
|
153
|
+
'CTABanner',
|
|
154
|
+
'Testimonial',
|
|
155
|
+
'SiteFooter',
|
|
156
|
+
'PricingCard',
|
|
157
|
+
] as const
|
|
158
|
+
|
|
159
|
+
const COMPOSABLES = [
|
|
160
|
+
'useFocusTrap',
|
|
161
|
+
'useKeyboard',
|
|
162
|
+
'usePersistedState',
|
|
163
|
+
'useGlobalState',
|
|
164
|
+
'useCommandRegistry',
|
|
165
|
+
'useTooltip',
|
|
166
|
+
'useVirtualList',
|
|
167
|
+
'provideDragDrop',
|
|
168
|
+
'useDragDrop',
|
|
169
|
+
'useReducedMotion',
|
|
170
|
+
'useScrollVisibility',
|
|
171
|
+
'useParallax',
|
|
172
|
+
'useMediaPlayback',
|
|
173
|
+
'useShellState',
|
|
174
|
+
'useToast',
|
|
175
|
+
'useNotifications',
|
|
176
|
+
'provideConfig',
|
|
177
|
+
'useConfig',
|
|
178
|
+
'useComponentDefaults',
|
|
179
|
+
'useFormValidation',
|
|
180
|
+
] as const
|
|
181
|
+
|
|
182
|
+
export default defineNuxtModule<NuxtRigOptions>({
|
|
183
|
+
meta: {
|
|
184
|
+
name: '@amulet-laboratories/rig-nuxt',
|
|
185
|
+
configKey: 'rig',
|
|
186
|
+
compatibility: { nuxt: '>=3.0.0' },
|
|
187
|
+
},
|
|
188
|
+
defaults: {
|
|
189
|
+
prefix: '',
|
|
190
|
+
composables: true,
|
|
191
|
+
},
|
|
192
|
+
setup(options) {
|
|
193
|
+
const prefix = options.prefix ?? ''
|
|
194
|
+
|
|
195
|
+
// Auto-import all components
|
|
196
|
+
for (const name of COMPONENTS) {
|
|
197
|
+
addComponent({
|
|
198
|
+
name: `${prefix}${name}`,
|
|
199
|
+
export: name,
|
|
200
|
+
filePath: '@amulet-laboratories/rig',
|
|
201
|
+
})
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
// Auto-import composables
|
|
205
|
+
if (options.composables !== false) {
|
|
206
|
+
for (const name of COMPOSABLES) {
|
|
207
|
+
addImports({
|
|
208
|
+
name,
|
|
209
|
+
from: '@amulet-laboratories/rig',
|
|
210
|
+
})
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
// Toast and notification singletons
|
|
214
|
+
addImports({ name: 'toast', from: '@amulet-laboratories/rig' })
|
|
215
|
+
addImports({ name: 'notification', from: '@amulet-laboratories/rig' })
|
|
216
|
+
|
|
217
|
+
// Web composables
|
|
218
|
+
addImports({ name: 'useHashRouter', from: '@amulet-laboratories/rig' })
|
|
219
|
+
addImports({ name: 'useScrollNav', from: '@amulet-laboratories/rig' })
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
})
|
|
223
|
+
|
|
224
|
+
declare module '@nuxt/schema' {
|
|
225
|
+
interface NuxtConfig {
|
|
226
|
+
rig?: NuxtRigOptions
|
|
227
|
+
}
|
|
228
|
+
}
|