@maz-ui/mcp 4.0.0 → 4.1.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/dist/mcp.d.mts +0 -55
- package/dist/mcp.d.ts +0 -55
- package/dist/mcp.mjs +2 -57
- package/docs/generated-docs/maz-select.doc.md +7 -7
- package/docs/src/components/maz-chart.md +0 -23
- package/docs/src/components/maz-date-picker.md +0 -22
- package/docs/src/components/maz-input-phone-number.md +0 -12
- package/docs/src/composables/use-form-validator.md +0 -10
- package/docs/src/guide/themes.md +121 -32
- package/docs/src/index.md +3 -0
- package/package.json +2 -2
package/dist/mcp.d.mts
CHANGED
|
@@ -47,78 +47,23 @@ declare class DocumentationService {
|
|
|
47
47
|
private readonly pluginsDir;
|
|
48
48
|
private readonly helpersDir;
|
|
49
49
|
constructor();
|
|
50
|
-
/**
|
|
51
|
-
* Convert un nom de composant PascalCase vers kebab-case
|
|
52
|
-
* MazBtn -> maz-btn
|
|
53
|
-
*/
|
|
54
50
|
private pascalToKebabCase;
|
|
55
|
-
/**
|
|
56
|
-
* Lit un fichier markdown et retourne son contenu ou une chaîne vide
|
|
57
|
-
*/
|
|
58
51
|
private readMarkdownFile;
|
|
59
|
-
/**
|
|
60
|
-
* Liste les fichiers markdown dans un répertoire
|
|
61
|
-
*/
|
|
62
52
|
private listMarkdownFiles;
|
|
63
|
-
/**
|
|
64
|
-
* Récupère la documentation complète d'un composant (manuelle + générée)
|
|
65
|
-
*/
|
|
66
53
|
getComponentDocumentation(componentName: string): string;
|
|
67
|
-
/**
|
|
68
|
-
* Liste tous les composants disponibles
|
|
69
|
-
*/
|
|
70
54
|
getAllComponents(): string[];
|
|
71
|
-
/**
|
|
72
|
-
* Récupère la documentation d'un guide
|
|
73
|
-
*/
|
|
74
55
|
getGuideDocumentation(guideName: string): string;
|
|
75
|
-
/**
|
|
76
|
-
* Liste tous les guides disponibles
|
|
77
|
-
*/
|
|
78
56
|
getAllGuides(): string[];
|
|
79
|
-
/**
|
|
80
|
-
* Récupère la documentation d'un composable
|
|
81
|
-
*/
|
|
82
57
|
getComposableDocumentation(composableName: string): string;
|
|
83
|
-
/**
|
|
84
|
-
* Liste tous les composables disponibles
|
|
85
|
-
*/
|
|
86
58
|
getAllComposables(): string[];
|
|
87
|
-
/**
|
|
88
|
-
* Récupère la documentation d'une directive
|
|
89
|
-
*/
|
|
90
59
|
getDirectiveDocumentation(directiveName: string): string;
|
|
91
|
-
/**
|
|
92
|
-
* Liste toutes les directives disponibles
|
|
93
|
-
*/
|
|
94
60
|
getAllDirectives(): string[];
|
|
95
|
-
/**
|
|
96
|
-
* Récupère la documentation d'un plugin
|
|
97
|
-
*/
|
|
98
61
|
getPluginDocumentation(pluginName: string): string;
|
|
99
|
-
/**
|
|
100
|
-
* Liste tous les plugins disponibles
|
|
101
|
-
*/
|
|
102
62
|
getAllPlugins(): string[];
|
|
103
|
-
/**
|
|
104
|
-
* Récupère la documentation d'un helper
|
|
105
|
-
*/
|
|
106
63
|
getHelperDocumentation(helperName: string): string;
|
|
107
|
-
/**
|
|
108
|
-
* Liste tous les helpers disponibles
|
|
109
|
-
*/
|
|
110
64
|
getAllHelpers(): string[];
|
|
111
|
-
/**
|
|
112
|
-
* Récupère la vue d'ensemble de la librairie
|
|
113
|
-
*/
|
|
114
65
|
getOverview(): string;
|
|
115
|
-
/**
|
|
116
|
-
* Recherche dans toute la documentation
|
|
117
|
-
*/
|
|
118
66
|
searchDocumentation(query: string): string[];
|
|
119
|
-
/**
|
|
120
|
-
* Récupère les diagnostics détaillés pour debugging
|
|
121
|
-
*/
|
|
122
67
|
getDiagnostics(): DocumentationDiagnostics;
|
|
123
68
|
}
|
|
124
69
|
|
package/dist/mcp.d.ts
CHANGED
|
@@ -47,78 +47,23 @@ declare class DocumentationService {
|
|
|
47
47
|
private readonly pluginsDir;
|
|
48
48
|
private readonly helpersDir;
|
|
49
49
|
constructor();
|
|
50
|
-
/**
|
|
51
|
-
* Convert un nom de composant PascalCase vers kebab-case
|
|
52
|
-
* MazBtn -> maz-btn
|
|
53
|
-
*/
|
|
54
50
|
private pascalToKebabCase;
|
|
55
|
-
/**
|
|
56
|
-
* Lit un fichier markdown et retourne son contenu ou une chaîne vide
|
|
57
|
-
*/
|
|
58
51
|
private readMarkdownFile;
|
|
59
|
-
/**
|
|
60
|
-
* Liste les fichiers markdown dans un répertoire
|
|
61
|
-
*/
|
|
62
52
|
private listMarkdownFiles;
|
|
63
|
-
/**
|
|
64
|
-
* Récupère la documentation complète d'un composant (manuelle + générée)
|
|
65
|
-
*/
|
|
66
53
|
getComponentDocumentation(componentName: string): string;
|
|
67
|
-
/**
|
|
68
|
-
* Liste tous les composants disponibles
|
|
69
|
-
*/
|
|
70
54
|
getAllComponents(): string[];
|
|
71
|
-
/**
|
|
72
|
-
* Récupère la documentation d'un guide
|
|
73
|
-
*/
|
|
74
55
|
getGuideDocumentation(guideName: string): string;
|
|
75
|
-
/**
|
|
76
|
-
* Liste tous les guides disponibles
|
|
77
|
-
*/
|
|
78
56
|
getAllGuides(): string[];
|
|
79
|
-
/**
|
|
80
|
-
* Récupère la documentation d'un composable
|
|
81
|
-
*/
|
|
82
57
|
getComposableDocumentation(composableName: string): string;
|
|
83
|
-
/**
|
|
84
|
-
* Liste tous les composables disponibles
|
|
85
|
-
*/
|
|
86
58
|
getAllComposables(): string[];
|
|
87
|
-
/**
|
|
88
|
-
* Récupère la documentation d'une directive
|
|
89
|
-
*/
|
|
90
59
|
getDirectiveDocumentation(directiveName: string): string;
|
|
91
|
-
/**
|
|
92
|
-
* Liste toutes les directives disponibles
|
|
93
|
-
*/
|
|
94
60
|
getAllDirectives(): string[];
|
|
95
|
-
/**
|
|
96
|
-
* Récupère la documentation d'un plugin
|
|
97
|
-
*/
|
|
98
61
|
getPluginDocumentation(pluginName: string): string;
|
|
99
|
-
/**
|
|
100
|
-
* Liste tous les plugins disponibles
|
|
101
|
-
*/
|
|
102
62
|
getAllPlugins(): string[];
|
|
103
|
-
/**
|
|
104
|
-
* Récupère la documentation d'un helper
|
|
105
|
-
*/
|
|
106
63
|
getHelperDocumentation(helperName: string): string;
|
|
107
|
-
/**
|
|
108
|
-
* Liste tous les helpers disponibles
|
|
109
|
-
*/
|
|
110
64
|
getAllHelpers(): string[];
|
|
111
|
-
/**
|
|
112
|
-
* Récupère la vue d'ensemble de la librairie
|
|
113
|
-
*/
|
|
114
65
|
getOverview(): string;
|
|
115
|
-
/**
|
|
116
|
-
* Recherche dans toute la documentation
|
|
117
|
-
*/
|
|
118
66
|
searchDocumentation(query: string): string[];
|
|
119
|
-
/**
|
|
120
|
-
* Récupère les diagnostics détaillés pour debugging
|
|
121
|
-
*/
|
|
122
67
|
getDiagnostics(): DocumentationDiagnostics;
|
|
123
68
|
}
|
|
124
69
|
|
package/dist/mcp.mjs
CHANGED
|
@@ -7,7 +7,7 @@ import { existsSync, readFileSync, readdirSync } from 'node:fs';
|
|
|
7
7
|
import { resolve, dirname, join } from 'node:path';
|
|
8
8
|
import { fileURLToPath } from 'node:url';
|
|
9
9
|
|
|
10
|
-
const version = "4.0.0
|
|
10
|
+
const version = "4.0.0";
|
|
11
11
|
|
|
12
12
|
const _dirname = dirname(fileURLToPath(import.meta.url));
|
|
13
13
|
class DocumentationService {
|
|
@@ -31,16 +31,9 @@ class DocumentationService {
|
|
|
31
31
|
this.pluginsDir = join(this.docsRoot, "plugins");
|
|
32
32
|
this.helpersDir = join(this.docsRoot, "helpers");
|
|
33
33
|
}
|
|
34
|
-
/**
|
|
35
|
-
* Convert un nom de composant PascalCase vers kebab-case
|
|
36
|
-
* MazBtn -> maz-btn
|
|
37
|
-
*/
|
|
38
34
|
pascalToKebabCase(pascalName) {
|
|
39
35
|
return pascalName.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "");
|
|
40
36
|
}
|
|
41
|
-
/**
|
|
42
|
-
* Lit un fichier markdown et retourne son contenu ou une chaîne vide
|
|
43
|
-
*/
|
|
44
37
|
readMarkdownFile(filePath) {
|
|
45
38
|
try {
|
|
46
39
|
if (!existsSync(filePath)) {
|
|
@@ -51,9 +44,6 @@ class DocumentationService {
|
|
|
51
44
|
return "";
|
|
52
45
|
}
|
|
53
46
|
}
|
|
54
|
-
/**
|
|
55
|
-
* Liste les fichiers markdown dans un répertoire
|
|
56
|
-
*/
|
|
57
47
|
listMarkdownFiles(dirPath) {
|
|
58
48
|
try {
|
|
59
49
|
if (!existsSync(dirPath)) {
|
|
@@ -65,10 +55,7 @@ class DocumentationService {
|
|
|
65
55
|
return [];
|
|
66
56
|
}
|
|
67
57
|
}
|
|
68
|
-
// ==========
|
|
69
|
-
/**
|
|
70
|
-
* Récupère la documentation complète d'un composant (manuelle + générée)
|
|
71
|
-
*/
|
|
58
|
+
// ========== COMPONENTS ==========
|
|
72
59
|
getComponentDocumentation(componentName) {
|
|
73
60
|
const kebabName = componentName.startsWith("Maz") ? this.pascalToKebabCase(componentName) : componentName;
|
|
74
61
|
const manualDocPath = join(this.componentsDir, `${kebabName}.md`);
|
|
@@ -95,9 +82,6 @@ ${generatedDoc}`;
|
|
|
95
82
|
}
|
|
96
83
|
return combinedDoc.trim();
|
|
97
84
|
}
|
|
98
|
-
/**
|
|
99
|
-
* Liste tous les composants disponibles
|
|
100
|
-
*/
|
|
101
85
|
getAllComponents() {
|
|
102
86
|
const [manualFiles, generatedFiles] = [
|
|
103
87
|
this.listMarkdownFiles(this.componentsDir),
|
|
@@ -107,86 +91,50 @@ ${generatedDoc}`;
|
|
|
107
91
|
return Array.from(allComponents).sort();
|
|
108
92
|
}
|
|
109
93
|
// ========== GUIDES ==========
|
|
110
|
-
/**
|
|
111
|
-
* Récupère la documentation d'un guide
|
|
112
|
-
*/
|
|
113
94
|
getGuideDocumentation(guideName) {
|
|
114
95
|
const guidePath = join(this.guidesDir, `${guideName}.md`);
|
|
115
96
|
return this.readMarkdownFile(guidePath);
|
|
116
97
|
}
|
|
117
|
-
/**
|
|
118
|
-
* Liste tous les guides disponibles
|
|
119
|
-
*/
|
|
120
98
|
getAllGuides() {
|
|
121
99
|
return this.listMarkdownFiles(this.guidesDir);
|
|
122
100
|
}
|
|
123
101
|
// ========== COMPOSABLES ==========
|
|
124
|
-
/**
|
|
125
|
-
* Récupère la documentation d'un composable
|
|
126
|
-
*/
|
|
127
102
|
getComposableDocumentation(composableName) {
|
|
128
103
|
const composablePath = join(this.composablesDir, `${composableName}.md`);
|
|
129
104
|
return this.readMarkdownFile(composablePath);
|
|
130
105
|
}
|
|
131
|
-
/**
|
|
132
|
-
* Liste tous les composables disponibles
|
|
133
|
-
*/
|
|
134
106
|
getAllComposables() {
|
|
135
107
|
return this.listMarkdownFiles(this.composablesDir);
|
|
136
108
|
}
|
|
137
109
|
// ========== DIRECTIVES ==========
|
|
138
|
-
/**
|
|
139
|
-
* Récupère la documentation d'une directive
|
|
140
|
-
*/
|
|
141
110
|
getDirectiveDocumentation(directiveName) {
|
|
142
111
|
const directivePath = join(this.directivesDir, `${directiveName}.md`);
|
|
143
112
|
return this.readMarkdownFile(directivePath);
|
|
144
113
|
}
|
|
145
|
-
/**
|
|
146
|
-
* Liste toutes les directives disponibles
|
|
147
|
-
*/
|
|
148
114
|
getAllDirectives() {
|
|
149
115
|
return this.listMarkdownFiles(this.directivesDir);
|
|
150
116
|
}
|
|
151
117
|
// ========== PLUGINS ==========
|
|
152
|
-
/**
|
|
153
|
-
* Récupère la documentation d'un plugin
|
|
154
|
-
*/
|
|
155
118
|
getPluginDocumentation(pluginName) {
|
|
156
119
|
const pluginPath = join(this.pluginsDir, `${pluginName}.md`);
|
|
157
120
|
return this.readMarkdownFile(pluginPath);
|
|
158
121
|
}
|
|
159
|
-
/**
|
|
160
|
-
* Liste tous les plugins disponibles
|
|
161
|
-
*/
|
|
162
122
|
getAllPlugins() {
|
|
163
123
|
return this.listMarkdownFiles(this.pluginsDir);
|
|
164
124
|
}
|
|
165
125
|
// ========== HELPERS ==========
|
|
166
|
-
/**
|
|
167
|
-
* Récupère la documentation d'un helper
|
|
168
|
-
*/
|
|
169
126
|
getHelperDocumentation(helperName) {
|
|
170
127
|
const helperPath = join(this.helpersDir, `${helperName}.md`);
|
|
171
128
|
return this.readMarkdownFile(helperPath);
|
|
172
129
|
}
|
|
173
|
-
/**
|
|
174
|
-
* Liste tous les helpers disponibles
|
|
175
|
-
*/
|
|
176
130
|
getAllHelpers() {
|
|
177
131
|
return this.listMarkdownFiles(this.helpersDir);
|
|
178
132
|
}
|
|
179
133
|
// ========== UTILITAIRES ==========
|
|
180
|
-
/**
|
|
181
|
-
* Récupère la vue d'ensemble de la librairie
|
|
182
|
-
*/
|
|
183
134
|
getOverview() {
|
|
184
135
|
const overviewPath = join(this.docsRoot, "index.md");
|
|
185
136
|
return this.readMarkdownFile(overviewPath);
|
|
186
137
|
}
|
|
187
|
-
/**
|
|
188
|
-
* Recherche dans toute la documentation
|
|
189
|
-
*/
|
|
190
138
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
191
139
|
searchDocumentation(query) {
|
|
192
140
|
const searchTerm = query.toLowerCase();
|
|
@@ -229,9 +177,6 @@ ${generatedDoc}`;
|
|
|
229
177
|
}
|
|
230
178
|
return results;
|
|
231
179
|
}
|
|
232
|
-
/**
|
|
233
|
-
* Récupère les diagnostics détaillés pour debugging
|
|
234
|
-
*/
|
|
235
180
|
getDiagnostics() {
|
|
236
181
|
const [components, guides, composables, directives, plugins, helpers] = [
|
|
237
182
|
this.getAllComponents(),
|
|
@@ -47,13 +47,13 @@
|
|
|
47
47
|
|
|
48
48
|
## Slots
|
|
49
49
|
|
|
50
|
-
| Name | Description | Bindings
|
|
51
|
-
| ---------- | --------------------------------------------------------------------------- |
|
|
52
|
-
| left-icon |
|
|
53
|
-
| right-icon |
|
|
54
|
-
| no-results | No results slot - Displayed when no results corresponding with search query |
|
|
55
|
-
| optgroup | Custom optgroup label | **label** `String` - the label of the optgroup
|
|
56
|
-
| default | Custom option | **option** `Object` - the option object<br/>**is-selected** `Boolean` - if the option is selected |
|
|
50
|
+
| Name | Description | Bindings |
|
|
51
|
+
| ---------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
52
|
+
| left-icon | Add a custom left icon | **is-open** `boolean` - Current open state of the popover<br/>**close** `function` - Function to close the popover<br/>**open** `function` - Function to open the popover<br/>**toggle** `function` - Function to toggle the popover |
|
|
53
|
+
| right-icon | Add and replace a custom right icon | **is-open** `boolean` - Current open state of the popover<br/>**close** `function` - Function to close the popover<br/>**open** `function` - Function to open the popover<br/>**toggle** `function` - Function to toggle the popover |
|
|
54
|
+
| no-results | No results slot - Displayed when no results corresponding with search query | |
|
|
55
|
+
| optgroup | Custom optgroup label | **label** `String` - the label of the optgroup |
|
|
56
|
+
| default | Custom option | **option** `Object` - the option object<br/>**is-selected** `Boolean` - if the option is selected<br/>**is-open** `Boolean` - if the popover is open<br/>**close** `function` - function to close the popover<br/>**open** `function` - function to open the popover<br/>**toggle** `function` - function to toggle the popover |
|
|
57
57
|
|
|
58
58
|
## Expose
|
|
59
59
|
|
|
@@ -7,29 +7,6 @@ description: MazChart is a standalone component which generates graphics & chart
|
|
|
7
7
|
|
|
8
8
|
{{ $frontmatter.description }}
|
|
9
9
|
|
|
10
|
-
To use this component, you have to install the `chart.js` and `vue-chartjs` dependency
|
|
11
|
-
|
|
12
|
-
<div class="flex gap-4">
|
|
13
|
-
<NpmBadge package="chart.js" dist-tag="4" />
|
|
14
|
-
<NpmBadge package="vue-chartjs" dist-tag="5" />
|
|
15
|
-
</div>
|
|
16
|
-
|
|
17
|
-
```bash
|
|
18
|
-
npm install chart.js@^4 vue-chartjs@^5
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
::: info
|
|
22
|
-
|
|
23
|
-
For maz-ui versions below `3.9.x`, you should only install `chart.js@^3`
|
|
24
|
-
|
|
25
|
-
<NpmBadge package="chart.js" dist-tag="3" />
|
|
26
|
-
|
|
27
|
-
```bash
|
|
28
|
-
npm install chart.js@^3
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
:::
|
|
32
|
-
|
|
33
10
|
## Documentation
|
|
34
11
|
|
|
35
12
|
Follow the [Chart.JS](https://www.chartjs.org/docs/latest/) documentation to create your own chart.
|
|
@@ -11,28 +11,6 @@ description: A powerful and flexible date picker component with support for sing
|
|
|
11
11
|
|
|
12
12
|
<!--@include: ./../.vitepress/mixins/translated-component.md-->
|
|
13
13
|
|
|
14
|
-
## Prerequisites
|
|
15
|
-
|
|
16
|
-
To use this component, you need to install `dayjs`:
|
|
17
|
-
|
|
18
|
-
<NpmBadge package="dayjs" />
|
|
19
|
-
|
|
20
|
-
::: code-group
|
|
21
|
-
|
|
22
|
-
```bash [pnpm]
|
|
23
|
-
pnpm add dayjs
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
```bash
|
|
27
|
-
npm install dayjs
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
```bash [yarn]
|
|
31
|
-
yarn add dayjs
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
:::
|
|
35
|
-
|
|
36
14
|
## Table of Contents
|
|
37
15
|
|
|
38
16
|
- [Basic Usage](#basic-usage)
|
|
@@ -11,18 +11,6 @@ description: MazInputPhoneNumber is a powerful and user-friendly component that
|
|
|
11
11
|
|
|
12
12
|
<!--@include: ./../.vitepress/mixins/translated-component.md-->
|
|
13
13
|
|
|
14
|
-
## Prerequisites
|
|
15
|
-
|
|
16
|
-
To use this component, you need to install the `libphonenumber-js` dependency:
|
|
17
|
-
|
|
18
|
-
<NpmBadge package="libphonenumber-js" />
|
|
19
|
-
|
|
20
|
-
```bash
|
|
21
|
-
npm install libphonenumber-js
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
---
|
|
25
|
-
|
|
26
14
|
::: tip ✨ What makes this component special?
|
|
27
15
|
- **Smart country detection** - Automatically detects country from browser locale or IP
|
|
28
16
|
- **Real-time validation** - Visual feedback as you type
|
|
@@ -7,16 +7,6 @@ description: useFormValidator and useFormField are two Vue 3 composables designe
|
|
|
7
7
|
|
|
8
8
|
`useFormValidator` and `useFormField` are two Vue 3 composables designed to simplify form validation using [Valibot](https://valibot.dev/guides/introduction/) as the validation library. These composables offer a flexible and typed approach to handle form validation in your Vue 3 applications.
|
|
9
9
|
|
|
10
|
-
## Prerequisites
|
|
11
|
-
|
|
12
|
-
To use this composable, you have to install the [`Valibot`](https://valibot.dev/) dependency
|
|
13
|
-
|
|
14
|
-
<NpmBadge package="valibot" />
|
|
15
|
-
|
|
16
|
-
```bash
|
|
17
|
-
npm install valibot
|
|
18
|
-
```
|
|
19
|
-
|
|
20
10
|
## Introduction
|
|
21
11
|
|
|
22
12
|
::: details Best Practices
|
package/docs/src/guide/themes.md
CHANGED
|
@@ -323,7 +323,9 @@ app.use(MazUi, {
|
|
|
323
323
|
### 🏗️ Buildtime
|
|
324
324
|
|
|
325
325
|
CSS generated at build-time and included in the bundle.
|
|
326
|
-
|
|
326
|
+
You have to build your CSS files before running your app.
|
|
327
|
+
|
|
328
|
+
See [Build-time](#build-time-strategy-complete-guide) for more details.
|
|
327
329
|
|
|
328
330
|
```typescript
|
|
329
331
|
import { mazUi } from '@maz-ui/themes/presets'
|
|
@@ -494,22 +496,29 @@ The build-time strategy allows you to generate your theme CSS files at compile t
|
|
|
494
496
|
|
|
495
497
|
### Step-by-step configuration
|
|
496
498
|
|
|
497
|
-
#### 1.
|
|
499
|
+
#### 1. Generate CSS
|
|
498
500
|
|
|
499
|
-
|
|
501
|
+
::: code-group
|
|
500
502
|
|
|
501
|
-
```typescript
|
|
503
|
+
```typescript [Vue]
|
|
502
504
|
import { mkdirSync, writeFileSync } from 'node:fs'
|
|
503
505
|
import { join } from 'node:path'
|
|
504
506
|
import {
|
|
507
|
+
// Build all css in one file
|
|
505
508
|
buildThemeCSS,
|
|
509
|
+
// Build multiple themes with one file each
|
|
506
510
|
generateThemeBundle,
|
|
511
|
+
// Build separate css files
|
|
507
512
|
buildSeparateThemeFiles,
|
|
508
|
-
|
|
513
|
+
|
|
509
514
|
definePreset,
|
|
510
515
|
mazUi,
|
|
511
516
|
} from '@maz-ui/themes'
|
|
512
517
|
|
|
518
|
+
import App from './App.vue'
|
|
519
|
+
|
|
520
|
+
const _dirname = dirname(fileURLToPath(import.meta.url))
|
|
521
|
+
|
|
513
522
|
// Custom theme
|
|
514
523
|
const customPreset = definePreset({
|
|
515
524
|
base: mazUi,
|
|
@@ -522,42 +531,131 @@ const customPreset = definePreset({
|
|
|
522
531
|
},
|
|
523
532
|
})
|
|
524
533
|
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
const customCSS = buildThemeCSS({
|
|
534
|
+
/**
|
|
535
|
+
* Generate complete CSS
|
|
536
|
+
*/
|
|
537
|
+
const fullCSS = buildThemeCSS({
|
|
530
538
|
preset: customPreset,
|
|
531
539
|
mode: 'both',
|
|
532
540
|
criticalOnly: false,
|
|
533
541
|
})
|
|
534
542
|
|
|
535
|
-
writeFileSync(join(
|
|
543
|
+
writeFileSync(join(_dirname, 'public/custom.css'), fullCSS)
|
|
536
544
|
|
|
537
|
-
|
|
545
|
+
/**
|
|
546
|
+
* Or generate theme in separate CSS files
|
|
547
|
+
*/
|
|
548
|
+
const { critical, full } = buildSeparateThemeFiles(customPreset, {
|
|
549
|
+
darkSelector: 'class',
|
|
550
|
+
})
|
|
551
|
+
|
|
552
|
+
writeFileSync(join(_dirname, 'public/critical.css'), critical)
|
|
553
|
+
writeFileSync(join(_dirname, 'public/custom-full.css'), full)
|
|
554
|
+
|
|
555
|
+
/**
|
|
556
|
+
* Or generate bundle for multiple themes in one file each
|
|
557
|
+
*/
|
|
538
558
|
const themeBundle = generateThemeBundle([customPreset, mazUi], {
|
|
539
559
|
mode: 'both',
|
|
540
560
|
})
|
|
541
561
|
|
|
542
562
|
Object.entries(themeBundle).forEach(([name, css]) => {
|
|
543
|
-
writeFileSync(join(
|
|
563
|
+
writeFileSync(join(_dirname, `public/${name}.css`), css)
|
|
564
|
+
})
|
|
565
|
+
|
|
566
|
+
const app = createApp(App)
|
|
567
|
+
|
|
568
|
+
app.use(MazUiTheme, {
|
|
569
|
+
preset: customPreset,
|
|
570
|
+
strategy: 'buildtime', // Important!
|
|
571
|
+
darkModeStrategy: 'class',
|
|
544
572
|
})
|
|
545
573
|
|
|
546
|
-
|
|
574
|
+
app.mount('#app')
|
|
547
575
|
```
|
|
548
576
|
|
|
549
|
-
|
|
577
|
+
```typescript [Vitepress]
|
|
578
|
+
import {
|
|
579
|
+
buildThemeCSS,
|
|
580
|
+
generateThemeBundle,
|
|
581
|
+
buildSeparateThemeFiles,
|
|
582
|
+
createThemeStylesheet,
|
|
583
|
+
definePreset,
|
|
584
|
+
mazUi,
|
|
585
|
+
CSS_IDS,
|
|
586
|
+
} from '@maz-ui/themes'
|
|
550
587
|
|
|
551
|
-
|
|
552
|
-
{
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
}
|
|
588
|
+
// Custom theme
|
|
589
|
+
const customPreset = definePreset({
|
|
590
|
+
base: mazUi,
|
|
591
|
+
overrides: {
|
|
592
|
+
name: 'custom',
|
|
593
|
+
colors: {
|
|
594
|
+
light: { primary: '221.2 83.2% 53.3%' },
|
|
595
|
+
dark: { primary: '217.2 91.2% 59.8%' },
|
|
596
|
+
},
|
|
597
|
+
},
|
|
598
|
+
})
|
|
599
|
+
|
|
600
|
+
// Generate complete CSS
|
|
601
|
+
const fullCSS = buildThemeCSS({
|
|
602
|
+
preset: customPreset,
|
|
603
|
+
mode: 'both',
|
|
604
|
+
criticalOnly: false,
|
|
605
|
+
})
|
|
606
|
+
|
|
607
|
+
// Or generate separate CSS files
|
|
608
|
+
const { critical, full, lightOnly, darkOnly } = buildSeparateThemeFiles(customPreset, {
|
|
609
|
+
darkSelector: 'class',
|
|
610
|
+
})
|
|
611
|
+
|
|
612
|
+
// Or generate bundle for multiple themes
|
|
613
|
+
const themeBundle = generateThemeBundle([customPreset, mazUi], {
|
|
614
|
+
mode: 'both',
|
|
615
|
+
})
|
|
616
|
+
|
|
617
|
+
export default defineConfig<DefaultTheme.Config>({
|
|
618
|
+
head: [
|
|
619
|
+
['style', { id: CSS_IDS.CRITICAL, type: 'text/css' }, critical],
|
|
620
|
+
['style', { id: CSS_IDS.FULL, type: 'text/css' }, full],
|
|
621
|
+
] satisfies HeadConfig[],
|
|
622
|
+
})
|
|
558
623
|
```
|
|
559
624
|
|
|
560
|
-
|
|
625
|
+
```typescript [Nuxt]
|
|
626
|
+
/*
|
|
627
|
+
* You dont need to do anything,
|
|
628
|
+
* The module will handle it for you.
|
|
629
|
+
*
|
|
630
|
+
* Just provide a preset to the module
|
|
631
|
+
*/
|
|
632
|
+
|
|
633
|
+
const customPreset = definePreset({
|
|
634
|
+
base: mazUi,
|
|
635
|
+
overrides: {
|
|
636
|
+
name: 'custom',
|
|
637
|
+
colors: {
|
|
638
|
+
light: { primary: '221.2 83.2% 53.3%' },
|
|
639
|
+
dark: { primary: '217.2 91.2% 59.8%' },
|
|
640
|
+
},
|
|
641
|
+
},
|
|
642
|
+
})
|
|
643
|
+
|
|
644
|
+
export default defineConfig({
|
|
645
|
+
modules: ['@maz-ui/nuxt'],
|
|
646
|
+
mazUi: {
|
|
647
|
+
theme: {
|
|
648
|
+
preset: customPreset,
|
|
649
|
+
mode: 'both',
|
|
650
|
+
colorMode: 'auto',
|
|
651
|
+
},
|
|
652
|
+
},
|
|
653
|
+
})
|
|
654
|
+
```
|
|
655
|
+
|
|
656
|
+
:::
|
|
657
|
+
|
|
658
|
+
#### 2. Include in your HTML (Only for Vue users)
|
|
561
659
|
|
|
562
660
|
```html
|
|
563
661
|
<!-- Critical CSS first -->
|
|
@@ -567,15 +665,6 @@ console.log('✅ Themes generated in public/themes/')
|
|
|
567
665
|
<link rel="stylesheet" href="/themes/custom-full.css" media="print" onload="this.media='all'">
|
|
568
666
|
```
|
|
569
667
|
|
|
570
|
-
#### 4. Plugin configuration
|
|
571
|
-
|
|
572
|
-
```typescript
|
|
573
|
-
app.use(MazThemePlugin, {
|
|
574
|
-
strategy: 'buildtime', // Important!
|
|
575
|
-
darkModeStrategy: 'class',
|
|
576
|
-
})
|
|
577
|
-
```
|
|
578
|
-
|
|
579
668
|
### Utility functions
|
|
580
669
|
|
|
581
670
|
#### `buildThemeCSS(options)`
|
package/docs/src/index.md
CHANGED
|
@@ -21,6 +21,9 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
|
|
|
21
21
|
</p>
|
|
22
22
|
|
|
23
23
|
<div class="maz-flex maz-gap-2 maz-justify-center maz-flex-wrap">
|
|
24
|
+
<MazBtn href="https://v3.maz-ui.com" color="contrast" outlined class="dark maz-w-full mob-l:maz-w-auto" target="blank">
|
|
25
|
+
V3 documentation
|
|
26
|
+
</MazBtn>
|
|
24
27
|
<MazBtn href="https://github.com/LouisMazel/maz-ui/blob/master/CHANGELOG.md" color="contrast" outlined class="dark maz-w-full mob-l:maz-w-auto" target="blank">
|
|
25
28
|
Changelog
|
|
26
29
|
</MazBtn>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maz-ui/mcp",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "4.
|
|
4
|
+
"version": "4.1.0",
|
|
5
5
|
"description": "Maz-UI ModelContextProtocol Client",
|
|
6
6
|
"author": "Louis Mazel <me@loicmazuel.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -80,5 +80,5 @@
|
|
|
80
80
|
"lint-staged": {
|
|
81
81
|
"*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
|
|
82
82
|
},
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "2f2ef4e0c3db8e64b814aa3c7c5a409e06af48af"
|
|
84
84
|
}
|