@m3ui-vue/m3ui-vue 0.3.1 → 0.4.1

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.
Files changed (83) hide show
  1. package/README.md +219 -59
  2. package/dist/{MMenuItem-C6RwHl-l.js → MMenuItem-FyttjOj_.js} +399 -207
  3. package/dist/MMenuItem-FyttjOj_.js.map +1 -0
  4. package/dist/components/MAutocomplete.vue.d.ts +2 -0
  5. package/dist/components/MBox.vue.d.ts +2 -2
  6. package/dist/components/MButton.vue.d.ts +4 -0
  7. package/dist/components/MButtonGroup.vue.d.ts +28 -0
  8. package/dist/components/MCarousel.vue.d.ts +21 -12
  9. package/dist/components/MColorPickerModal.vue.d.ts +18 -0
  10. package/dist/components/MDataTable.vue.d.ts +1 -1
  11. package/dist/components/MDatePickerModal.vue.d.ts +21 -0
  12. package/dist/components/MDateRangePickerModal.vue.d.ts +24 -0
  13. package/dist/components/MDialog.vue.d.ts +9 -1
  14. package/dist/components/MExpansionPanel.vue.d.ts +3 -2
  15. package/dist/components/MFab.vue.d.ts +14 -2
  16. package/dist/components/MFlex.vue.d.ts +2 -2
  17. package/dist/components/MIconButton.vue.d.ts +4 -2
  18. package/dist/components/MInfiniteScroll.vue.d.ts +1 -1
  19. package/dist/components/MList.vue.d.ts +2 -0
  20. package/dist/components/MLoadingOverlay.vue.d.ts +1 -1
  21. package/dist/components/MMenu.vue.d.ts +3 -1
  22. package/dist/components/MMenuItem.vue.d.ts +14 -3
  23. package/dist/components/MMultiAutocomplete.vue.d.ts +2 -0
  24. package/dist/components/MMultiSelect.vue.d.ts +2 -0
  25. package/dist/components/MNavigationDrawer.vue.d.ts +1 -1
  26. package/dist/components/MNotificationHost.vue.d.ts +3 -0
  27. package/dist/components/MSelect.vue.d.ts +2 -0
  28. package/dist/components/MSlider.vue.d.ts +15 -4
  29. package/dist/components/MSplitButton.vue.d.ts +39 -0
  30. package/dist/components/MSplitter.vue.d.ts +1 -1
  31. package/dist/components/MStack.vue.d.ts +2 -2
  32. package/dist/components/MTable.vue.d.ts +1 -1
  33. package/dist/components/MTimePickerModal.vue.d.ts +21 -0
  34. package/dist/components/MToolbar.vue.d.ts +30 -0
  35. package/dist/components/MTooltip.vue.d.ts +8 -2
  36. package/dist/components/MWindow.vue.d.ts +2 -2
  37. package/dist/composables/useDevice.d.ts +3 -0
  38. package/dist/composables/useNotification.d.ts +64 -0
  39. package/dist/composables/useToast.d.ts +8 -0
  40. package/dist/index.d.ts +12 -0
  41. package/dist/m3ui-vue.css +1 -1
  42. package/dist/m3ui.js +5222 -2994
  43. package/dist/m3ui.js.map +1 -1
  44. package/dist/rich-text-editor.js +10 -10
  45. package/dist/styles.css +1 -1
  46. package/package.json +1 -1
  47. package/src/components/MAutocomplete.vue +109 -13
  48. package/src/components/MButton.vue +38 -16
  49. package/src/components/MButtonGroup.vue +158 -0
  50. package/src/components/MCarousel.vue +223 -101
  51. package/src/components/MColorPicker.vue +1 -4
  52. package/src/components/MColorPickerModal.vue +276 -0
  53. package/src/components/MDatePicker.vue +1 -4
  54. package/src/components/MDatePickerModal.vue +265 -0
  55. package/src/components/MDateRangePicker.vue +1 -4
  56. package/src/components/MDateRangePickerModal.vue +264 -0
  57. package/src/components/MDialog.vue +38 -1
  58. package/src/components/MExpansionPanel.vue +10 -32
  59. package/src/components/MFab.vue +92 -11
  60. package/src/components/MIconButton.vue +36 -6
  61. package/src/components/MList.vue +6 -3
  62. package/src/components/MListItem.vue +9 -3
  63. package/src/components/MMenu.vue +10 -5
  64. package/src/components/MMenuItem.vue +93 -10
  65. package/src/components/MMultiAutocomplete.vue +105 -10
  66. package/src/components/MMultiSelect.vue +106 -13
  67. package/src/components/MNotificationHost.vue +163 -0
  68. package/src/components/MSelect.vue +99 -16
  69. package/src/components/MSlider.vue +367 -134
  70. package/src/components/MSnackbar.vue +3 -0
  71. package/src/components/MSplitButton.vue +240 -0
  72. package/src/components/MTabs.vue +82 -39
  73. package/src/components/MTagInput.vue +11 -1
  74. package/src/components/MTimePicker.vue +1 -4
  75. package/src/components/MTimePickerModal.vue +458 -0
  76. package/src/components/MToolbar.vue +75 -0
  77. package/src/components/MTooltip.vue +60 -10
  78. package/src/components/_MContextMenuPanel.vue +2 -2
  79. package/src/composables/useDevice.ts +29 -0
  80. package/src/composables/useNotification.ts +93 -0
  81. package/src/composables/useToast.ts +42 -5
  82. package/src/index.ts +12 -0
  83. package/dist/MMenuItem-C6RwHl-l.js.map +0 -1
package/README.md CHANGED
@@ -1,22 +1,34 @@
1
- # M3UI Vue
1
+ <p align="center">
2
+ <strong>M3UI Vue</strong>
3
+ </p>
2
4
 
3
- Material 3 component library for Vue 3 + Tailwind CSS v4.
5
+ <p align="center">
6
+ Material Design 3 component library for Vue 3 + Tailwind CSS v4
7
+ </p>
4
8
 
5
- 80+ components following [Material Design 3](https://m3.material.io/) guidelines with 20 built-in color palettes, dark mode, and full TypeScript support.
9
+ <p align="center">
10
+ <a href="https://www.npmjs.com/package/@m3ui-vue/m3ui-vue"><img src="https://img.shields.io/npm/v/@m3ui-vue/m3ui-vue?color=blue" alt="npm version"></a>
11
+ <a href="https://www.npmjs.com/package/@m3ui-vue/m3ui-vue"><img src="https://img.shields.io/npm/l/@m3ui-vue/m3ui-vue" alt="license"></a>
12
+ <img src="https://img.shields.io/badge/vue-3.5+-42b883" alt="vue 3.5+">
13
+ <img src="https://img.shields.io/badge/tailwindcss-v4-38bdf8" alt="tailwind v4">
14
+ <img src="https://img.shields.io/badge/typescript-strict-3178c6" alt="typescript">
15
+ </p>
6
16
 
7
- ## Quick Start
17
+ ---
8
18
 
9
- ### 1. Install
19
+ 120+ tree-shakeable components following [Material Design 3](https://m3.material.io/) guidelines. Ships with 20 color palettes, dark mode, i18n support, and full TypeScript coverage.
20
+
21
+ ## Getting Started
22
+
23
+ ### Install
10
24
 
11
25
  ```bash
12
26
  pnpm add @m3ui-vue/m3ui-vue
13
- # or
14
- npm install @m3ui-vue/m3ui-vue
15
27
  ```
16
28
 
17
- ### 2. Add Google Fonts
29
+ ### Fonts
18
30
 
19
- Add the following to your `index.html` `<head>`:
31
+ Add to your `index.html` `<head>`:
20
32
 
21
33
  ```html
22
34
  <link
@@ -25,31 +37,30 @@ Add the following to your `index.html` `<head>`:
25
37
  />
26
38
  ```
27
39
 
28
- ### 3. Configure CSS
40
+ ### CSS
29
41
 
30
42
  In your main stylesheet (e.g. `src/style.css`):
31
43
 
32
44
  ```css
33
45
  @import 'tailwindcss';
34
46
  @import '@m3ui-vue/m3ui-vue/theme';
35
- @import '@m3ui-vue/m3ui-vue/palettes'; /* optional — includes 20 color palettes */
36
- @import '@m3ui-vue/m3ui-vue/styles'; /* component scoped styles (transitions, animations) */
47
+ @import '@m3ui-vue/m3ui-vue/palettes'; /* 20 color palettes */
48
+ @import '@m3ui-vue/m3ui-vue/styles'; /* component transitions & animations */
37
49
  ```
38
50
 
39
- ### 4. Register the Plugin (optional)
51
+ ### Plugin (optional)
40
52
 
41
53
  ```ts
42
- // main.ts
43
54
  import { createApp } from 'vue'
44
55
  import { createM3UI } from '@m3ui-vue/m3ui-vue'
45
56
  import App from './App.vue'
46
57
 
47
58
  const app = createApp(App)
48
- app.use(createM3UI({ palette: 'teal' })) // sets initial palette
59
+ app.use(createM3UI({ palette: 'teal' }))
49
60
  app.mount('#app')
50
61
  ```
51
62
 
52
- The plugin is optional — without it the default purple palette is used.
63
+ Without the plugin the default `purple` palette is used.
53
64
 
54
65
  ## Usage
55
66
 
@@ -71,13 +82,191 @@ const name = ref('')
71
82
  </template>
72
83
  ```
73
84
 
85
+ ## Components
86
+
87
+ ### Actions
88
+
89
+ | | |
90
+ |---|---|
91
+ | `MButton` | Primary, outlined, tonal, text, elevated variants |
92
+ | `MIconButton` | Icon-only actions |
93
+ | `MFab` | Floating action button with optional speed dial |
94
+ | `MButtonGroup` | Grouped button options |
95
+ | `MSplitButton` | Button with dropdown actions |
96
+ | `MSegmentedButton` | Toggleable segmented options |
97
+
98
+ ### Inputs
99
+
100
+ | | |
101
+ |---|---|
102
+ | `MTextField` | Text input with label, icons, validation |
103
+ | `MNumberField` | Numeric input with stepper |
104
+ | `MMaskField` | Input with mask presets (phone, currency, etc.) |
105
+ | `MTagInput` | Tag/chip input |
106
+ | `MSelect` | Single select dropdown |
107
+ | `MMultiSelect` | Multi-select with chips |
108
+ | `MAutocomplete` | Single-value autocomplete |
109
+ | `MMultiAutocomplete` | Multi-value autocomplete |
110
+ | `MCheckbox` | Checkbox |
111
+ | `MSwitch` | Toggle switch |
112
+ | `MRadio` / `MRadioGroup` | Radio options |
113
+ | `MSlider` | Range slider |
114
+ | `MRating` | Star rating |
115
+ | `MDatePicker` | Inline date picker |
116
+ | `MDatePickerModal` | Modal date picker |
117
+ | `MDateRangePicker` | Inline date range picker |
118
+ | `MDateRangePickerModal` | Modal date range picker |
119
+ | `MTimePicker` | Inline time picker |
120
+ | `MTimePickerModal` | Modal time picker |
121
+ | `MColorPicker` | Inline color picker |
122
+ | `MColorPickerModal` | Modal color picker |
123
+ | `MFileUpload` | Drag & drop file upload |
124
+
125
+ ### Data Display
126
+
127
+ | | |
128
+ |---|---|
129
+ | `MCard` / `MStatCard` | Content cards |
130
+ | `MChip` | Chips / tags |
131
+ | `MBadge` | Notification badges |
132
+ | `MAvatar` | User avatars |
133
+ | `MIcon` | Material Symbols icons |
134
+ | `MTable` | Simple table with sorting, pagination |
135
+ | `MDataTable` | Server-side data table |
136
+ | `MVirtualTable` | Virtualized table for large datasets |
137
+ | `MTreeTable` | Hierarchical table |
138
+ | `MTree` | Tree view |
139
+ | `MList` / `MListItem` / `MListSubheader` | Lists |
140
+ | `MTimeline` | Vertical timeline |
141
+ | `MCalendar` | Event calendar |
142
+ | `MCarousel` | Image/content carousel |
143
+ | `MJsonViewer` | JSON tree viewer |
144
+
145
+ ### Feedback
146
+
147
+ | | |
148
+ |---|---|
149
+ | `MAlert` | Inline alerts |
150
+ | `MSnackbar` | Toast notifications (via `useToast`) |
151
+ | `MNotificationHost` | Rich notifications (via `useNotification`) |
152
+ | `MDialog` / `MConfirmDialog` | Modal dialogs |
153
+ | `MBottomSheet` | Bottom sheet |
154
+ | `MSideSheet` | Side sheet |
155
+ | `MProgressBar` | Linear progress |
156
+ | `MSpinner` | Circular spinner |
157
+ | `MLoadingOverlay` | Full-area loading |
158
+ | `MSkeleton` | Content skeleton loader |
159
+ | `MEmptyState` | Empty state placeholder |
160
+ | `MResult` | Success/error/info result pages |
161
+ | `MTooltip` | Tooltips |
162
+
163
+ ### Navigation
164
+
165
+ | | |
166
+ |---|---|
167
+ | `MTabs` | Tab navigation |
168
+ | `MMenu` / `MMenuItem` | Dropdown menus |
169
+ | `MContextMenu` | Right-click context menu |
170
+ | `MBreadcrumbs` | Breadcrumb trail |
171
+ | `MStepper` | Step-by-step wizard |
172
+ | `MPagination` | Page navigation |
173
+ | `MNavigationBar` | Bottom navigation bar |
174
+ | `MNavigationRail` | Side navigation rail |
175
+ | `MNavigationDrawer` | Collapsible side drawer |
176
+ | `MTopAppBar` / `MAppBar` | Top app bar |
177
+ | `MToolbar` | Action toolbar |
178
+
179
+ ### Layout
180
+
181
+ | | |
182
+ |---|---|
183
+ | `MContainer` | Centered max-width container |
184
+ | `MAppLayout` | Full app layout scaffold |
185
+ | `MGrid` | Responsive grid |
186
+ | `MStack` / `MFlex` / `MBox` | Flexbox utilities |
187
+ | `MCenter` | Center content |
188
+ | `MSpacer` | Flexible spacer |
189
+ | `MSplitter` | Resizable split panes |
190
+ | `MMasonry` | Masonry grid |
191
+ | `MDivider` | Horizontal/vertical divider |
192
+ | `MExpansionPanel` | Collapsible panel |
193
+ | `MSection` | Semantic section |
194
+ | `MScrollable` | Scrollable area |
195
+ | `MAbsolute` / `MRelative` / `MFixed` / `MSticky` | Positioning |
196
+ | `MFullscreen` | Fullscreen wrapper |
197
+ | `MAspectRatio` | Aspect ratio container |
198
+ | `MResponsive` | Responsive breakpoint slots |
199
+ | `MOverlay` | Overlay backdrop |
200
+ | `MWindow` | Window/panel container |
201
+ | `MFooter` | Page footer |
202
+
203
+ ### Typography
204
+
205
+ | | |
206
+ |---|---|
207
+ | `MText` | Body text with variants |
208
+ | `MTitle` | Section title |
209
+ | `MSubtitle` | Section subtitle |
210
+
211
+ ### Emoji
212
+
213
+ | | |
214
+ |---|---|
215
+ | `MEmoji` | Render emoji by shortcode |
216
+ | `MEmojiButton` | Emoji picker trigger |
217
+ | `MEmojiSelector` | Full emoji picker panel |
218
+
219
+ ### Chat
220
+
221
+ | | |
222
+ |---|---|
223
+ | `MChatBubble` | Chat message bubble |
224
+
225
+ ### Advanced
226
+
227
+ | | |
228
+ |---|---|
229
+ | `MKanban` | Kanban board |
230
+ | `MScheduler` | Week/day scheduler |
231
+ | `MCommandPalette` | Command palette (Cmd+K) |
232
+ | `MSpotlightSearch` | Spotlight-style search |
233
+ | `MHotkeys` | Keyboard shortcut handler |
234
+ | `MDragDropList` | Drag & drop sortable list |
235
+ | `MTransferList` | Dual-list transfer |
236
+ | `MInfiniteScroll` | Infinite scroll wrapper |
237
+ | `MTour` | Feature tour / onboarding |
238
+
239
+ ### Separate Entry Points
240
+
241
+ These components have heavy peer dependencies and are imported from dedicated sub-paths:
242
+
243
+ ```ts
244
+ import { MRichTextEditor } from '@m3ui-vue/m3ui-vue/rich-text-editor'
245
+ import { MCodeEditor, MJsonEditor } from '@m3ui-vue/m3ui-vue/code-editor'
246
+ import { MMarkdown } from '@m3ui-vue/m3ui-vue/markdown'
247
+ import { MTerminal } from '@m3ui-vue/m3ui-vue/terminal'
248
+ import { MChart } from '@m3ui-vue/m3ui-vue/chart'
249
+ ```
250
+
251
+ ## Composables
252
+
253
+ | | |
254
+ |---|---|
255
+ | `useTheme()` | Light / dark / system theme with `cycle()` |
256
+ | `useColorPalette()` | Switch between 20 palettes at runtime |
257
+ | `useToast()` | Programmatic toast notifications |
258
+ | `useNotification()` | Rich notifications with actions |
259
+ | `useFieldBg()` | Context-aware field background color |
260
+ | `useLocale()` | i18n locale switching |
261
+ | `useDevice()` | Responsive breakpoint detection |
262
+
74
263
  ## Color Palettes
75
264
 
76
- M3UI ships with 20 pre-built color palettes, each with light and dark variants:
265
+ 20 built-in palettes with light and dark variants:
77
266
 
78
- `purple` (default), `indigo`, `navy`, `blue`, `cyan`, `teal`, `green`, `lime`, `olive`, `amber`, `sand`, `orange`, `deep-orange`, `brown`, `red`, `coral`, `crimson`, `pink`, `violet`, `slate`
267
+ `purple` (default) `indigo` `navy` `blue` `cyan` `teal` `green` `lime` `olive` `amber` `sand` `orange` `deep-orange` `brown` `red` `coral` `crimson` `pink` `violet` `slate`
79
268
 
80
- ### Switching Palettes at Runtime
269
+ ### Switch at Runtime
81
270
 
82
271
  ```vue
83
272
  <script setup>
@@ -95,7 +284,7 @@ const { palette, palettes, set } = useColorPalette()
95
284
  </template>
96
285
  ```
97
286
 
98
- The selection is persisted to `localStorage` automatically.
287
+ Selection is persisted to `localStorage`.
99
288
 
100
289
  ## Dark Mode
101
290
 
@@ -104,55 +293,26 @@ The selection is persisted to `localStorage` automatically.
104
293
  import { useTheme } from '@m3ui-vue/m3ui-vue'
105
294
 
106
295
  const { theme, cycle } = useTheme()
107
- // theme: 'light' | 'dark' | 'system'
108
296
  </script>
109
297
 
110
298
  <template>
111
- <MButton @click="cycle">
112
- Theme: {{ theme }}
113
- </MButton>
299
+ <MButton @click="cycle">Theme: {{ theme }}</MButton>
114
300
  </template>
115
301
  ```
116
302
 
117
- The theme is persisted to `localStorage` and respects `prefers-color-scheme` when set to `system`.
118
-
119
- ## Components
120
-
121
- ### Inputs
122
- MButton, MIconButton, MFab, MTextField, MSelect, MMultiSelect, MCheckbox, MSwitch, MRadio, MRadioGroup, MSlider, MRating, MDatePicker, MDateRangePicker, MTimePicker, MColorPicker
123
-
124
- ### Data Display
125
- MCard, MChip, MBadge, MAvatar, MIcon, MTable, MDataTable, MVirtualTable, MTreeTable, MTree, MStatCard, MTimeline, MCalendar, MJsonViewer, MMarkdown
126
-
127
- ### Feedback
128
- MAlert, MSnackbar (toast), MDialog, MConfirmDialog, MBottomSheet, MSideSheet, MProgressBar, MSpinner, MLoadingOverlay, MSkeleton, MEmptyState, MResult, MTooltip
129
-
130
- ### Navigation
131
- MTabs, MMenu, MMenuItem, MContextMenu, MBreadcrumbs, MStepper, MPagination, MNavigationBar, MNavigationRail, MNavigationDrawer, MTopAppBar, MAppBar, MSegmentedButton
132
-
133
- ### Layout
134
- MContainer, MGrid, MStack, MSplitter, MMasonry, MDivider, MExpansionPanel
135
-
136
- ### Advanced
137
- MRichTextEditor, MCodeEditor, MJsonEditor, MKanban, MScheduler, MChart, MTerminal, MFileUpload, MTour, MCommandPalette, MSpotlightSearch, MHotkeys, MDragDropList, MTransferList, MInfiniteScroll
138
-
139
- ### Composables
140
- - `useTheme()` — light/dark/system theme with `cycle()`
141
- - `useColorPalette()` — switch between 20 palettes at runtime
142
- - `useToast()` — programmatic toast notifications
143
- - `useFieldBg()` — context-aware field background color
303
+ Supports `light`, `dark`, and `system`. Persisted to `localStorage` and respects `prefers-color-scheme`.
144
304
 
145
- ## Optional Dependencies
305
+ ## Peer Dependencies
146
306
 
147
- Some components require peer packages. Install only what you need:
307
+ Install only the packages you need:
148
308
 
149
- | Component | Install |
309
+ | Component | Packages |
150
310
  |---|---|
151
- | MRichTextEditor | `pnpm add @tiptap/vue-3 @tiptap/starter-kit @tiptap/extension-placeholder @tiptap/extension-underline @tiptap/extension-text-align @tiptap/extension-link @tiptap/extension-image @tiptap/extension-color @tiptap/extension-text-style @tiptap/extension-highlight` |
152
- | MCodeEditor, MJsonEditor | `pnpm add codemirror @codemirror/view @codemirror/state @codemirror/commands @codemirror/language @codemirror/lang-javascript @codemirror/lang-json @codemirror/lang-html @codemirror/lang-css @codemirror/lang-python @codemirror/theme-one-dark` |
153
- | MTerminal | `pnpm add @xterm/xterm @xterm/addon-fit` |
154
- | MMarkdown | `pnpm add markdown-it` |
155
- | MChart | `pnpm add chart.js vue-chartjs` |
311
+ | `MRichTextEditor` | `@tiptap/vue-3 @tiptap/starter-kit @tiptap/extension-placeholder @tiptap/extension-underline @tiptap/extension-text-align @tiptap/extension-link @tiptap/extension-image @tiptap/extension-color @tiptap/extension-text-style @tiptap/extension-highlight` |
312
+ | `MCodeEditor` `MJsonEditor` | `codemirror @codemirror/view @codemirror/state @codemirror/commands @codemirror/language @codemirror/lang-javascript @codemirror/lang-json @codemirror/lang-html @codemirror/lang-css @codemirror/lang-python @codemirror/theme-one-dark` |
313
+ | `MTerminal` | `@xterm/xterm @xterm/addon-fit` |
314
+ | `MMarkdown` | `markdown-it` (+ optional `highlight.js` for syntax highlighting) |
315
+ | `MChart` | `chart.js vue-chartjs` |
156
316
 
157
317
  ## License
158
318