@uniformdev/uniform-nuxt 18.1.1-alpha.11 → 18.1.2-alpha.7
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 +10 -9
- package/dist/module.json +1 -1
- package/dist/module.mjs +7 -1
- package/dist/runtime/components/UniformComposition.d.ts +1 -0
- package/dist/runtime/components/UniformComposition.mjs +1 -0
- package/dist/runtime/components/UniformSlot.d.ts +1 -0
- package/dist/runtime/components/UniformSlot.mjs +1 -0
- package/dist/runtime/composables/useUniformComposition.d.ts +1 -68
- package/dist/runtime/composables/useUniformComposition.mjs +4 -19
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
- [Auto-imported composables](#auto-imported-composables)
|
|
9
9
|
- [`useUniformComposition`](#useuniformcomposition)
|
|
10
10
|
- [Components](#components)
|
|
11
|
-
- [`<
|
|
12
|
-
- [`<
|
|
11
|
+
- [`<UniformComposition />`](#uniformcomposition-)
|
|
12
|
+
- [`<UniformSlot />`](#uniformslot-)
|
|
13
13
|
- [Injected in the Nuxt instance](#injected-in-the-nuxt-instance)
|
|
14
14
|
- [Examples](#examples)
|
|
15
15
|
|
|
@@ -43,7 +43,7 @@ export default defineNuxtConfig({
|
|
|
43
43
|
- Auto-registers the needed Uniform components.
|
|
44
44
|
- Creates a Canvas client automatically.
|
|
45
45
|
- Creates a Uniform Context instance and provides it through the whole app, without the need of a wrapping component.
|
|
46
|
-
- Provides a handy
|
|
46
|
+
- Provides a handy `useUniformComposition` composable, built on top of Nuxt's [useAsyncData](https://v3.nuxtjs.org/api/composables/use-async-data).
|
|
47
47
|
- Handles Live Preview.
|
|
48
48
|
- Watches query string change, which Nuxt doesn't do by default.
|
|
49
49
|
|
|
@@ -89,19 +89,20 @@ const { composition } = useUniformComposition({
|
|
|
89
89
|
### Components
|
|
90
90
|
These are the components that the module auto registers for you, so you can use them without import.
|
|
91
91
|
|
|
92
|
-
#### `<
|
|
92
|
+
#### `<UniformComposition />`
|
|
93
93
|
This component wraps the whole composition, it accepts the following props:
|
|
94
94
|
|
|
95
95
|
| Prop | Type | Description |
|
|
96
96
|
|---|---|---|
|
|
97
|
-
| `data`* | string | The data of the composition to be rendered, this is usually the `composition` object that you get from
|
|
97
|
+
| `data`* | string | The data of the composition to be rendered, this is usually the `composition` object that you get from `useUniformComposition` |
|
|
98
98
|
| `resolveRenderer` | function | This function is responsible for mapping Canvas components to Vue components. It takes a `ComponentInstance` object and should return a Vue component (usually based on the component `type`). If no resolver is provided, it will try to resolve the component on the global context of the app, so if you have globally defined components, it will try to map them based on the `name` of the Vue component and the `type` of the Canvas component.|
|
|
99
|
+
| `contextualEditingEnhancer` | function | A function to enhance the composition inside Canvas editor. This function runs on the client side. If no value is provided, the enhancer will be inherited from `useUniformComposition` |
|
|
99
100
|
|
|
100
101
|
\* Required
|
|
101
102
|
|
|
102
|
-
#### `<
|
|
103
|
-
This component is used to render the slots of a composition, and it can be only used inside a `<
|
|
104
|
-
You can nest `<
|
|
103
|
+
#### `<UniformSlot />`
|
|
104
|
+
This component is used to render the slots of a composition, and it can be only used inside a `<UniformComposition />`.
|
|
105
|
+
You can nest `<UniformSlot />` inside each other if you have nested slots.
|
|
105
106
|
|
|
106
107
|
| Prop | Type | Description |
|
|
107
108
|
|---|---|---|
|
|
@@ -118,7 +119,7 @@ These are the properties that the module injects in the Nuxt app instance, so yo
|
|
|
118
119
|
|
|
119
120
|
## Examples
|
|
120
121
|
|
|
121
|
-
Here are some
|
|
122
|
+
Here are some examples using the module:
|
|
122
123
|
- https://github.com/uniformdev/uniformconf-nuxt
|
|
123
124
|
- https://github.com/uniformdev/nuxt-canvas-context-helloworld
|
|
124
125
|
|
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineNuxtModule, addTemplate, addPlugin, addImportsDir, resolveAlias, extendViteConfig } from '@nuxt/kit';
|
|
1
|
+
import { defineNuxtModule, addTemplate, addPlugin, addImportsDir, addComponentsDir, resolveAlias, extendViteConfig } from '@nuxt/kit';
|
|
2
2
|
import { resolve } from 'path';
|
|
3
3
|
import { fileURLToPath } from 'url';
|
|
4
4
|
|
|
@@ -41,6 +41,12 @@ const module = defineNuxtModule({
|
|
|
41
41
|
nuxt.options.build.transpile.push(runtimeDir);
|
|
42
42
|
addPlugin(resolve(runtimeDir, "plugin"));
|
|
43
43
|
addImportsDir(resolve(runtimeDir, `./composables`));
|
|
44
|
+
addComponentsDir({
|
|
45
|
+
path: resolve(runtimeDir, "components"),
|
|
46
|
+
pathPrefix: false,
|
|
47
|
+
prefix: "",
|
|
48
|
+
global: true
|
|
49
|
+
});
|
|
44
50
|
}
|
|
45
51
|
});
|
|
46
52
|
function resolveConfigFilePath(nuxt, filePath) {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { UniformComposition as default } from '@uniformdev/canvas-vue';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { UniformComposition as default } from "@uniformdev/canvas-vue";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { UniformSlot as default } from '@uniformdev/canvas-vue';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { UniformSlot as default } from "@uniformdev/canvas-vue";
|
|
@@ -2,74 +2,7 @@ import { type CompositionGetByIdParameters, type CompositionGetByNodeIdParameter
|
|
|
2
2
|
export declare const useUniformComposition: (options: (CompositionGetBySlugParameters | CompositionGetByIdParameters | CompositionGetByNodePathParameters | CompositionGetByNodeIdParameters) & DataResolutionOption & {
|
|
3
3
|
enhance?: ((composition: RootComponentInstance) => RootComponentInstance | Promise<RootComponentInstance>) | undefined;
|
|
4
4
|
}) => Promise<{
|
|
5
|
-
composition:
|
|
6
|
-
type: string;
|
|
7
|
-
parameters?: {
|
|
8
|
-
[key: string]: {
|
|
9
|
-
value: unknown;
|
|
10
|
-
type: string;
|
|
11
|
-
connectedData?: {
|
|
12
|
-
pointer: string;
|
|
13
|
-
syntax: "jptr";
|
|
14
|
-
required?: boolean | undefined;
|
|
15
|
-
} | undefined;
|
|
16
|
-
};
|
|
17
|
-
} | undefined;
|
|
18
|
-
variant?: string | undefined;
|
|
19
|
-
slots?: {
|
|
20
|
-
[key: string]: {
|
|
21
|
-
type: string;
|
|
22
|
-
parameters?: {
|
|
23
|
-
[key: string]: {
|
|
24
|
-
value: unknown;
|
|
25
|
-
type: string;
|
|
26
|
-
connectedData?: {
|
|
27
|
-
pointer: string;
|
|
28
|
-
syntax: "jptr";
|
|
29
|
-
required?: boolean | undefined;
|
|
30
|
-
} | undefined;
|
|
31
|
-
};
|
|
32
|
-
} | undefined;
|
|
33
|
-
variant?: string | undefined;
|
|
34
|
-
slots?: {
|
|
35
|
-
[key: string]: any[];
|
|
36
|
-
} | undefined;
|
|
37
|
-
_id?: string | undefined;
|
|
38
|
-
_pattern?: string | undefined;
|
|
39
|
-
_dataResources?: {
|
|
40
|
-
[key: string]: {
|
|
41
|
-
type: string;
|
|
42
|
-
isPatternParameter?: boolean | undefined;
|
|
43
|
-
variables?: {
|
|
44
|
-
[key: string]: string;
|
|
45
|
-
} | undefined;
|
|
46
|
-
};
|
|
47
|
-
} | undefined;
|
|
48
|
-
_patternDataResources?: {
|
|
49
|
-
[key: string]: {
|
|
50
|
-
type: string;
|
|
51
|
-
isPatternParameter?: boolean | undefined;
|
|
52
|
-
variables?: {
|
|
53
|
-
[key: string]: string;
|
|
54
|
-
} | undefined;
|
|
55
|
-
};
|
|
56
|
-
} | undefined;
|
|
57
|
-
_patternError?: "NOTFOUND" | "CYCLIC" | undefined;
|
|
58
|
-
}[];
|
|
59
|
-
} | undefined;
|
|
60
|
-
_id: string;
|
|
61
|
-
_slug?: string | null | undefined;
|
|
62
|
-
_name: string;
|
|
63
|
-
_dataResources?: {
|
|
64
|
-
[key: string]: {
|
|
65
|
-
type: string;
|
|
66
|
-
isPatternParameter?: boolean | undefined;
|
|
67
|
-
variables?: {
|
|
68
|
-
[key: string]: string;
|
|
69
|
-
} | undefined;
|
|
70
|
-
};
|
|
71
|
-
} | undefined;
|
|
72
|
-
} | undefined>;
|
|
5
|
+
composition: any;
|
|
73
6
|
fullResponse: any;
|
|
74
7
|
pending: any;
|
|
75
8
|
error: any;
|
|
@@ -2,28 +2,14 @@ import {
|
|
|
2
2
|
CANVAS_DRAFT_STATE,
|
|
3
3
|
CANVAS_PUBLISHED_STATE
|
|
4
4
|
} from "@uniformdev/canvas";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
5
|
+
import { globalCompositionEnhancerInjectionKey } from "@uniformdev/canvas-vue";
|
|
6
|
+
import { provide } from "vue-demi";
|
|
7
7
|
import { useAsyncData, useNuxtApp } from "#app";
|
|
8
8
|
export const useUniformComposition = async (options) => {
|
|
9
9
|
const { enhance = (c) => c, ...parameters } = options;
|
|
10
10
|
const { $uniformCanvasClient, $preview: preview } = useNuxtApp();
|
|
11
11
|
const canvasClient = $uniformCanvasClient;
|
|
12
|
-
|
|
13
|
-
const { composition: contextualEditingComposition } = useContextualEditing({
|
|
14
|
-
initialCompositionValue: void 0
|
|
15
|
-
});
|
|
16
|
-
watch(
|
|
17
|
-
[contextualEditingComposition],
|
|
18
|
-
async () => {
|
|
19
|
-
if (!contextualEditingComposition.value) {
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
const composition = toRaw(contextualEditingComposition.value);
|
|
23
|
-
activeComposition.value = await enhance(composition);
|
|
24
|
-
},
|
|
25
|
-
{ deep: true }
|
|
26
|
-
);
|
|
12
|
+
provide(globalCompositionEnhancerInjectionKey, enhance);
|
|
27
13
|
const { data, pending, error } = await useAsyncData(
|
|
28
14
|
`composition-${JSON.stringify(parameters)}`,
|
|
29
15
|
async () => {
|
|
@@ -59,9 +45,8 @@ export const useUniformComposition = async (options) => {
|
|
|
59
45
|
return { composition, response };
|
|
60
46
|
}
|
|
61
47
|
);
|
|
62
|
-
activeComposition.value = data.value?.composition;
|
|
63
48
|
return {
|
|
64
|
-
composition:
|
|
49
|
+
composition: data.value?.composition,
|
|
65
50
|
fullResponse: data.value?.response,
|
|
66
51
|
pending,
|
|
67
52
|
error
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniformdev/uniform-nuxt",
|
|
3
|
-
"version": "18.1.
|
|
3
|
+
"version": "18.1.2-alpha.7+682b9aac6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
"@nuxt/module-builder": "0.2.1",
|
|
36
36
|
"@nuxt/schema": "3.0.0",
|
|
37
37
|
"@nuxtjs/eslint-config-typescript": "12.0.0",
|
|
38
|
-
"@uniformdev/canvas": "18.1.
|
|
39
|
-
"@uniformdev/canvas-vue": "18.1.
|
|
40
|
-
"@uniformdev/context": "18.1.
|
|
41
|
-
"@uniformdev/context-vue": "18.1.
|
|
42
|
-
"esbuild": "0.17.
|
|
38
|
+
"@uniformdev/canvas": "18.1.2-alpha.7+682b9aac6",
|
|
39
|
+
"@uniformdev/canvas-vue": "18.1.2-alpha.7+682b9aac6",
|
|
40
|
+
"@uniformdev/context": "18.1.2-alpha.7+682b9aac6",
|
|
41
|
+
"@uniformdev/context-vue": "18.1.2-alpha.7+682b9aac6",
|
|
42
|
+
"esbuild": "0.17.3",
|
|
43
43
|
"eslint": "^8.31.0",
|
|
44
44
|
"nuxt": "3.0.0",
|
|
45
45
|
"vue": "3.2.45",
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"publishConfig": {
|
|
49
49
|
"access": "public"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "682b9aac6143d5f462a7126f4ceab55a7c7d0c09"
|
|
52
52
|
}
|