rimelight-components 2.0.31 → 2.0.32

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 (54) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/module.mjs +52 -11
  3. package/dist/runtime/components/app/Footer.d.vue.ts +4 -4
  4. package/dist/runtime/components/app/Footer.vue.d.ts +4 -4
  5. package/dist/runtime/components/app/Header.d.vue.ts +7 -7
  6. package/dist/runtime/components/app/Header.vue +1 -1
  7. package/dist/runtime/components/app/Header.vue.d.ts +7 -7
  8. package/dist/runtime/components/app/ScrollToTop.d.vue.ts +1 -4
  9. package/dist/runtime/components/app/ScrollToTop.vue.d.ts +1 -4
  10. package/dist/runtime/components/backgrounds/AnimateGrid.d.vue.ts +1 -7
  11. package/dist/runtime/components/backgrounds/AnimateGrid.vue.d.ts +1 -7
  12. package/dist/runtime/components/backgrounds/FlickeringGrid.d.vue.ts +1 -7
  13. package/dist/runtime/components/backgrounds/FlickeringGrid.vue.d.ts +1 -7
  14. package/dist/runtime/components/backgrounds/InteractiveGrid.d.vue.ts +1 -5
  15. package/dist/runtime/components/backgrounds/InteractiveGrid.vue.d.ts +1 -5
  16. package/dist/runtime/components/blocks/editor/SectionBlockEditor.d.vue.ts +8 -0
  17. package/dist/runtime/components/blocks/editor/SectionBlockEditor.vue +64 -0
  18. package/dist/runtime/components/blocks/editor/SectionBlockEditor.vue.d.ts +8 -0
  19. package/dist/runtime/components/blocks/{CalloutBlock.d.vue.ts → renderer/CalloutBlockRenderer.d.vue.ts} +1 -1
  20. package/dist/runtime/components/blocks/{CalloutBlock.vue.d.ts → renderer/CalloutBlockRenderer.vue.d.ts} +1 -1
  21. package/dist/runtime/components/blocks/{CardBlock.vue.d.ts → renderer/CardBlockRenderer.d.vue.ts} +1 -1
  22. package/dist/runtime/components/blocks/{CardBlock.d.vue.ts → renderer/CardBlockRenderer.vue.d.ts} +1 -1
  23. package/dist/runtime/components/blocks/{ImageBlock.d.vue.ts → renderer/ImageBlockRenderer.d.vue.ts} +1 -1
  24. package/dist/runtime/components/blocks/{ImageBlock.vue.d.ts → renderer/ImageBlockRenderer.vue.d.ts} +1 -1
  25. package/dist/runtime/components/blocks/{ParagraphBlock.d.vue.ts → renderer/ParagraphBlockRenderer.d.vue.ts} +1 -1
  26. package/dist/runtime/components/blocks/{ParagraphBlock.vue.d.ts → renderer/ParagraphBlockRenderer.vue.d.ts} +1 -1
  27. package/dist/runtime/components/blocks/{SectionBlock.d.vue.ts → renderer/SectionBlockRenderer.d.vue.ts} +1 -1
  28. package/dist/runtime/components/blocks/{SectionBlock.vue.d.ts → renderer/SectionBlockRenderer.vue.d.ts} +1 -1
  29. package/dist/runtime/components/blocks/{UnorderedListBlock.d.vue.ts → renderer/UnorderedListBlockRenderer.d.vue.ts} +1 -1
  30. package/dist/runtime/components/blocks/{UnorderedListBlock.vue.d.ts → renderer/UnorderedListBlockRenderer.vue.d.ts} +1 -1
  31. package/dist/runtime/components/cards/TeamCard.d.vue.ts +2 -2
  32. package/dist/runtime/components/cards/TeamCard.vue.d.ts +2 -2
  33. package/dist/runtime/components/content/Callout.d.vue.ts +2 -2
  34. package/dist/runtime/components/content/Callout.vue.d.ts +2 -2
  35. package/dist/runtime/components/content/Section.d.vue.ts +9 -2
  36. package/dist/runtime/components/content/Section.vue +10 -4
  37. package/dist/runtime/components/content/Section.vue.d.ts +9 -2
  38. package/dist/runtime/components/renderers/BlockRenderer.vue +2 -2
  39. package/dist/runtime/components/renderers/EditorBlockRenderer.d.vue.ts +7 -0
  40. package/dist/runtime/components/renderers/EditorBlockRenderer.vue +64 -0
  41. package/dist/runtime/components/renderers/EditorBlockRenderer.vue.d.ts +7 -0
  42. package/dist/runtime/components/renderers/TOC.d.vue.ts +2 -2
  43. package/dist/runtime/components/renderers/TOC.vue.d.ts +2 -2
  44. package/dist/runtime/composables/useBlockContentEditor.d.ts +32 -0
  45. package/dist/runtime/composables/useBlockContentEditor.js +63 -0
  46. package/dist/runtime/utils/blockMapper.d.ts +9 -1
  47. package/dist/runtime/utils/blockMapper.js +17 -3
  48. package/package.json +2 -1
  49. /package/dist/runtime/components/blocks/{CalloutBlock.vue → renderer/CalloutBlockRenderer.vue} +0 -0
  50. /package/dist/runtime/components/blocks/{CardBlock.vue → renderer/CardBlockRenderer.vue} +0 -0
  51. /package/dist/runtime/components/blocks/{ImageBlock.vue → renderer/ImageBlockRenderer.vue} +0 -0
  52. /package/dist/runtime/components/blocks/{ParagraphBlock.vue → renderer/ParagraphBlockRenderer.vue} +0 -0
  53. /package/dist/runtime/components/blocks/{SectionBlock.vue → renderer/SectionBlockRenderer.vue} +0 -0
  54. /package/dist/runtime/components/blocks/{UnorderedListBlock.vue → renderer/UnorderedListBlockRenderer.vue} +0 -0
package/dist/module.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rimelight-components",
3
- "version": "2.0.31",
3
+ "version": "2.0.32",
4
4
  "docs": "https://rimelight.com/tools/rimelight-components",
5
5
  "configKey": "rimelightComponents",
6
6
  "compatibility": {
package/dist/module.mjs CHANGED
@@ -4,7 +4,7 @@ import { readdirSync } from 'node:fs';
4
4
  import { basename } from 'node:path';
5
5
 
6
6
  const name = "rimelight-components";
7
- const version = "2.0.31";
7
+ const version = "2.0.32";
8
8
  const homepage = "https://rimelight.com/tools/rimelight-components";
9
9
 
10
10
  const defaultOptions = {
@@ -53,9 +53,9 @@ function addBlockMapTemplates(blockNames) {
53
53
  const template = addTemplate({
54
54
  filename: "rimelight-blocks-map.mjs",
55
55
  getContents: () => {
56
- let content = "export const BLOCK_COMPONENT_MAP = {\n";
56
+ let content = "export const BLOCK_RENDERER_COMPONENT_MAP = {\n";
57
57
  blockNames.forEach((name) => {
58
- const componentPath = `rimelight-components/components/blocks/${name}.vue`;
58
+ const componentPath = `rimelight-components/components/blocks/renderer/${name}.vue`;
59
59
  content += ` '${name}': () => import('${componentPath}'),
60
60
  `;
61
61
  });
@@ -72,7 +72,42 @@ function addBlockMapTemplates(blockNames) {
72
72
  `;
73
73
  content += `import { Component } from 'vue'
74
74
  `;
75
- content += `export declare const BLOCK_COMPONENT_MAP: { [key: string]: ${componentImporterType} | undefined }
75
+ content += `export declare const BLOCK_RENDERER_COMPONENT_MAP: { [key: string]: ${componentImporterType} | undefined }
76
+ `;
77
+ blockNames.forEach((name) => {
78
+ content += `export declare const ${name}: ${componentImporterType}
79
+ `;
80
+ });
81
+ return content;
82
+ },
83
+ write: true
84
+ });
85
+ return template;
86
+ }
87
+ function addEditorBlockMapTemplates(blockNames) {
88
+ const componentImporterType = '() => Promise<{ default: import("vue").Component }>';
89
+ const template = addTemplate({
90
+ filename: "rimelight-editor-blocks-map.mjs",
91
+ getContents: () => {
92
+ let content = "export const BLOCK_EDITOR_COMPONENT_MAP = {\n";
93
+ blockNames.forEach((name) => {
94
+ const componentPath = `rimelight-components/components/blocks/editor/${name}.vue`;
95
+ content += ` '${name}': () => import('${componentPath}'),
96
+ `;
97
+ });
98
+ content += "}\n";
99
+ return content;
100
+ },
101
+ write: true
102
+ });
103
+ addTemplate({
104
+ filename: "rimelight-editor-blocks-map.d.ts",
105
+ getContents: () => {
106
+ let content = `// Generated by rimelight-components Nuxt Module
107
+ `;
108
+ content += `import { Component } from 'vue'
109
+ `;
110
+ content += `export declare const BLOCK_EDITOR_COMPONENT_MAP: { [key: string]: ${componentImporterType} | undefined }
76
111
  `;
77
112
  blockNames.forEach((name) => {
78
113
  content += `export declare const ${name}: ${componentImporterType}
@@ -85,7 +120,7 @@ function addBlockMapTemplates(blockNames) {
85
120
  return template;
86
121
  }
87
122
 
88
- const module = defineNuxtModule().with({
123
+ const module$1 = defineNuxtModule().with({
89
124
  meta: {
90
125
  name,
91
126
  version,
@@ -169,13 +204,19 @@ const module = defineNuxtModule().with({
169
204
  });
170
205
  addImportsDir(resolve("./runtime/composables"));
171
206
  addImportsDir(resolve("./runtime/utils"));
172
- const blockFiles = readdirSync(
173
- resolve("./runtime/components/blocks")
207
+ const blockRendererFiles = readdirSync(
208
+ resolve("./runtime/components/blocks/renderer")
209
+ ).filter((name2) => name2.endsWith(".vue"));
210
+ const blockRendererNames = blockRendererFiles.map((file) => basename(file, ".vue"));
211
+ const blockRendererTemplate = addBlockMapTemplates(blockRendererNames);
212
+ nuxt.options.alias["#build/rimelight-blocks-renderer-map"] = blockRendererTemplate.dst;
213
+ const blockEditorFiles = readdirSync(
214
+ resolve("./runtime/components/blocks/editor")
174
215
  ).filter((name2) => name2.endsWith(".vue"));
175
- const blockNames = blockFiles.map((file) => basename(file, ".vue"));
176
- const template = addBlockMapTemplates(blockNames);
177
- nuxt.options.alias["#build/rimelight-blocks-map"] = template.dst;
216
+ const blockEditorNames = blockEditorFiles.map((file) => basename(file, ".vue"));
217
+ const blockEditorTemplate = addEditorBlockMapTemplates(blockEditorNames);
218
+ nuxt.options.alias["#build/rimelight-blocks-editor-map"] = blockEditorTemplate.dst;
178
219
  }
179
220
  });
180
221
 
181
- export { module as default };
222
+ export { module$1 as default };
@@ -1,10 +1,10 @@
1
- declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {};
1
+ declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
2
2
  type __VLS_Slots = {} & {
3
- left?: (props: typeof __VLS_6) => any;
3
+ left?: (props: typeof __VLS_7) => any;
4
4
  } & {
5
- center?: (props: typeof __VLS_8) => any;
5
+ center?: (props: typeof __VLS_9) => any;
6
6
  } & {
7
- right?: (props: typeof __VLS_10) => any;
7
+ right?: (props: typeof __VLS_11) => any;
8
8
  };
9
9
  declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
10
10
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -1,10 +1,10 @@
1
- declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {};
1
+ declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
2
2
  type __VLS_Slots = {} & {
3
- left?: (props: typeof __VLS_6) => any;
3
+ left?: (props: typeof __VLS_7) => any;
4
4
  } & {
5
- center?: (props: typeof __VLS_8) => any;
5
+ center?: (props: typeof __VLS_9) => any;
6
6
  } & {
7
- right?: (props: typeof __VLS_10) => any;
7
+ right?: (props: typeof __VLS_11) => any;
8
8
  };
9
9
  declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
10
10
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -1,16 +1,16 @@
1
- declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
1
+ declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
2
2
  type __VLS_Slots = {} & {
3
- left?: (props: typeof __VLS_6) => any;
3
+ left?: (props: typeof __VLS_7) => any;
4
4
  } & {
5
- center?: (props: typeof __VLS_8) => any;
5
+ center?: (props: typeof __VLS_9) => any;
6
6
  } & {
7
- right?: (props: typeof __VLS_10) => any;
7
+ right?: (props: typeof __VLS_11) => any;
8
8
  } & {
9
- 'collapsed-left'?: (props: typeof __VLS_12) => any;
9
+ 'collapsed-left'?: (props: typeof __VLS_13) => any;
10
10
  } & {
11
- 'collapsed-center'?: (props: typeof __VLS_14) => any;
11
+ 'collapsed-center'?: (props: typeof __VLS_15) => any;
12
12
  } & {
13
- 'collapsed-right'?: (props: typeof __VLS_16) => any;
13
+ 'collapsed-right'?: (props: typeof __VLS_17) => any;
14
14
  };
15
15
  declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
16
16
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -6,7 +6,7 @@ const header = tv({
6
6
  container: "h-full flex flex-row items-center p-sm",
7
7
  left: "hidden lg:flex flex-1 justify-start",
8
8
  center: "hidden lg:flex flex-none",
9
- right: "hidden lg:flex flex-1 justify-end",
9
+ right: "hidden lg:flex flex-1 justify-end items-end",
10
10
  collapsedLeft: "lg:hidden flex-1 justify-start",
11
11
  collapsedCenter: "lg:hidden flex-none",
12
12
  collapsedRight: "lg:hidden flex-1 justify-end"
@@ -1,16 +1,16 @@
1
- declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
1
+ declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
2
2
  type __VLS_Slots = {} & {
3
- left?: (props: typeof __VLS_6) => any;
3
+ left?: (props: typeof __VLS_7) => any;
4
4
  } & {
5
- center?: (props: typeof __VLS_8) => any;
5
+ center?: (props: typeof __VLS_9) => any;
6
6
  } & {
7
- right?: (props: typeof __VLS_10) => any;
7
+ right?: (props: typeof __VLS_11) => any;
8
8
  } & {
9
- 'collapsed-left'?: (props: typeof __VLS_12) => any;
9
+ 'collapsed-left'?: (props: typeof __VLS_13) => any;
10
10
  } & {
11
- 'collapsed-center'?: (props: typeof __VLS_14) => any;
11
+ 'collapsed-center'?: (props: typeof __VLS_15) => any;
12
12
  } & {
13
- 'collapsed-right'?: (props: typeof __VLS_16) => any;
13
+ 'collapsed-right'?: (props: typeof __VLS_17) => any;
14
14
  };
15
15
  declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
16
16
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -2,9 +2,6 @@ interface Props {
2
2
  circleStrokeWidth?: number;
3
3
  duration?: number;
4
4
  }
5
- declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
6
- circleStrokeWidth: number;
7
- duration: number;
8
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
5
+ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
9
6
  declare const _default: typeof __VLS_export;
10
7
  export default _default;
@@ -2,9 +2,6 @@ interface Props {
2
2
  circleStrokeWidth?: number;
3
3
  duration?: number;
4
4
  }
5
- declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
6
- circleStrokeWidth: number;
7
- duration: number;
8
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
5
+ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
9
6
  declare const _default: typeof __VLS_export;
10
7
  export default _default;
@@ -12,12 +12,6 @@ interface Props {
12
12
  rotateX?: number;
13
13
  rotateY?: number;
14
14
  }
15
- declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
16
- textGlowStartColor: string;
17
- perspective: number;
18
- textGlowEndColor: string;
19
- rotateX: number;
20
- rotateY: number;
21
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
15
+ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
22
16
  declare const _default: typeof __VLS_export;
23
17
  export default _default;
@@ -12,12 +12,6 @@ interface Props {
12
12
  rotateX?: number;
13
13
  rotateY?: number;
14
14
  }
15
- declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
16
- textGlowStartColor: string;
17
- perspective: number;
18
- textGlowEndColor: string;
19
- rotateX: number;
20
- rotateY: number;
21
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
15
+ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
22
16
  declare const _default: typeof __VLS_export;
23
17
  export default _default;
@@ -8,12 +8,6 @@ interface FlickeringGridProps {
8
8
  class?: string;
9
9
  maxOpacity?: number;
10
10
  }
11
- declare const __VLS_export: import("vue").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {
12
- color: string;
13
- squareSize: number;
14
- gridGap: number;
15
- flickerChance: number;
16
- maxOpacity: number;
17
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
11
+ declare const __VLS_export: import("vue").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
18
12
  declare const _default: typeof __VLS_export;
19
13
  export default _default;
@@ -8,12 +8,6 @@ interface FlickeringGridProps {
8
8
  class?: string;
9
9
  maxOpacity?: number;
10
10
  }
11
- declare const __VLS_export: import("vue").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {
12
- color: string;
13
- squareSize: number;
14
- gridGap: number;
15
- flickerChance: number;
16
- maxOpacity: number;
17
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
11
+ declare const __VLS_export: import("vue").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
18
12
  declare const _default: typeof __VLS_export;
19
13
  export default _default;
@@ -6,10 +6,6 @@ interface InteractiveGridPatternProps {
6
6
  height?: number;
7
7
  squares?: [number, number];
8
8
  }
9
- declare const __VLS_export: import("vue").DefineComponent<InteractiveGridPatternProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InteractiveGridPatternProps> & Readonly<{}>, {
10
- width: number;
11
- height: number;
12
- squares: [number, number];
13
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
9
+ declare const __VLS_export: import("vue").DefineComponent<InteractiveGridPatternProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InteractiveGridPatternProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
14
10
  declare const _default: typeof __VLS_export;
15
11
  export default _default;
@@ -6,10 +6,6 @@ interface InteractiveGridPatternProps {
6
6
  height?: number;
7
7
  squares?: [number, number];
8
8
  }
9
- declare const __VLS_export: import("vue").DefineComponent<InteractiveGridPatternProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InteractiveGridPatternProps> & Readonly<{}>, {
10
- width: number;
11
- height: number;
12
- squares: [number, number];
13
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
9
+ declare const __VLS_export: import("vue").DefineComponent<InteractiveGridPatternProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InteractiveGridPatternProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
14
10
  declare const _default: typeof __VLS_export;
15
11
  export default _default;
@@ -0,0 +1,8 @@
1
+ import type { SectionBlockProps } from "~~/src/runtime/types/blocks";
2
+ type __VLS_Props = {
3
+ blockProps: SectionBlockProps;
4
+ blockId: string;
5
+ };
6
+ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
7
+ declare const _default: typeof __VLS_export;
8
+ export default _default;
@@ -0,0 +1,64 @@
1
+ <script setup>
2
+ import { computed, inject } from "vue";
3
+ import { slugify } from "../../../utils";
4
+ const props = defineProps({
5
+ blockProps: { type: Object, required: true },
6
+ blockId: { type: String, required: true }
7
+ });
8
+ const headingId = computed(() => props.blockProps.title ? slugify(props.blockProps.title) : void 0);
9
+ const updateTitle = (event) => {
10
+ props.blockProps.title = event.target.value;
11
+ };
12
+ const updateDescription = (event) => {
13
+ props.blockProps.description = event.target.value;
14
+ };
15
+ const { removeBlock } = inject("blockEditorMutators", {
16
+ removeBlock: (id) => console.warn(`removeBlock not implemented for ${id}`)
17
+ });
18
+ const handleRemove = () => {
19
+ removeBlock(props.blockId);
20
+ };
21
+ const childrenBlocks = computed(() => props.blockProps.children || []);
22
+ </script>
23
+
24
+ <template>
25
+ <div class="block-editor-container relative border-2 border-dashed border-primary-200 p-4 rounded-lg bg-primary-50/50 group">
26
+
27
+ <div class="absolute -translate-x-1/2 z-10 opacity-0 group-hover:opacity-100 transition-opacity flex gap-2">
28
+ <UButton icon="lucide:trash-2" variant="solid" size="sm" @click="handleRemove" />
29
+ </div>
30
+
31
+ <RCSection
32
+ :level="props.blockProps.level"
33
+ :title="props.blockProps.title"
34
+ :description="props.blockProps.description"
35
+ :id="headingId"
36
+ is-editing
37
+ >
38
+ <template #title>
39
+ <input
40
+ :value="props.blockProps.title"
41
+ @input="updateTitle"
42
+ :class="`text-${props.blockProps.level === 1 ? '3xl' : 'xl'} font-bold w-full focus:outline-none bg-transparent pointer-events-auto`"
43
+ placeholder="Enter section title..."
44
+ />
45
+ </template>
46
+
47
+ <template #description>
48
+ <textarea
49
+ v-if="props.blockProps.description !== void 0"
50
+ :value="props.blockProps.description"
51
+ @input="updateDescription"
52
+ class="text-md text-muted w-full resize-none focus:outline-none bg-transparent pointer-events-auto"
53
+ placeholder="Optional description..."
54
+ rows="2"
55
+ />
56
+ </template>
57
+
58
+ <div class="mt-4">
59
+ <RCBlockEditorRenderer :blocks="childrenBlocks" />
60
+ </div>
61
+
62
+ </RCSection>
63
+ </div>
64
+ </template>
@@ -0,0 +1,8 @@
1
+ import type { SectionBlockProps } from "~~/src/runtime/types/blocks";
2
+ type __VLS_Props = {
3
+ blockProps: SectionBlockProps;
4
+ blockId: string;
5
+ };
6
+ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
7
+ declare const _default: typeof __VLS_export;
8
+ export default _default;
@@ -1,4 +1,4 @@
1
- import type { CalloutBlockProps } from "../../types/blocks.js";
1
+ import type { CalloutBlockProps } from "~~/src/runtime/types/blocks";
2
2
  declare const __VLS_export: import("vue").DefineComponent<CalloutBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CalloutBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
3
3
  declare const _default: typeof __VLS_export;
4
4
  export default _default;
@@ -1,4 +1,4 @@
1
- import type { CalloutBlockProps } from "../../types/blocks.js";
1
+ import type { CalloutBlockProps } from "~~/src/runtime/types/blocks";
2
2
  declare const __VLS_export: import("vue").DefineComponent<CalloutBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CalloutBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
3
3
  declare const _default: typeof __VLS_export;
4
4
  export default _default;
@@ -1,4 +1,4 @@
1
- import type { CardBlockProps } from "../../types/blocks.js";
1
+ import type { CardBlockProps } from "~~/src/runtime/types/blocks";
2
2
  declare const __VLS_export: import("vue").DefineComponent<CardBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
3
3
  declare const _default: typeof __VLS_export;
4
4
  export default _default;
@@ -1,4 +1,4 @@
1
- import type { CardBlockProps } from "../../types/blocks.js";
1
+ import type { CardBlockProps } from "~~/src/runtime/types/blocks";
2
2
  declare const __VLS_export: import("vue").DefineComponent<CardBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
3
3
  declare const _default: typeof __VLS_export;
4
4
  export default _default;
@@ -1,4 +1,4 @@
1
- import type { ImageBlockProps } from "../../types/blocks.js";
1
+ import type { ImageBlockProps } from "~~/src/runtime/types/blocks";
2
2
  declare const __VLS_export: import("vue").DefineComponent<ImageBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
3
3
  declare const _default: typeof __VLS_export;
4
4
  export default _default;
@@ -1,4 +1,4 @@
1
- import type { ImageBlockProps } from "../../types/blocks.js";
1
+ import type { ImageBlockProps } from "~~/src/runtime/types/blocks";
2
2
  declare const __VLS_export: import("vue").DefineComponent<ImageBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
3
3
  declare const _default: typeof __VLS_export;
4
4
  export default _default;
@@ -1,4 +1,4 @@
1
- import type { ParagraphBlockProps } from "../../types/blocks.js";
1
+ import type { ParagraphBlockProps } from "~~/src/runtime/types/blocks";
2
2
  declare const __VLS_export: import("vue").DefineComponent<ParagraphBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ParagraphBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
3
3
  declare const _default: typeof __VLS_export;
4
4
  export default _default;
@@ -1,4 +1,4 @@
1
- import type { ParagraphBlockProps } from "../../types/blocks.js";
1
+ import type { ParagraphBlockProps } from "~~/src/runtime/types/blocks";
2
2
  declare const __VLS_export: import("vue").DefineComponent<ParagraphBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ParagraphBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
3
3
  declare const _default: typeof __VLS_export;
4
4
  export default _default;
@@ -1,4 +1,4 @@
1
- import type { SectionBlockProps } from "../../types/blocks.js";
1
+ import type { SectionBlockProps } from "~~/src/runtime/types/blocks";
2
2
  declare const __VLS_export: import("vue").DefineComponent<SectionBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SectionBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
3
3
  declare const _default: typeof __VLS_export;
4
4
  export default _default;
@@ -1,4 +1,4 @@
1
- import type { SectionBlockProps } from "../../types/blocks.js";
1
+ import type { SectionBlockProps } from "~~/src/runtime/types/blocks";
2
2
  declare const __VLS_export: import("vue").DefineComponent<SectionBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SectionBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
3
3
  declare const _default: typeof __VLS_export;
4
4
  export default _default;
@@ -1,4 +1,4 @@
1
- import type { UnorderedListBlockProps } from "../../types/blocks.js";
1
+ import type { UnorderedListBlockProps } from "~~/src/runtime/types/blocks";
2
2
  declare const __VLS_export: import("vue").DefineComponent<UnorderedListBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UnorderedListBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
3
3
  declare const _default: typeof __VLS_export;
4
4
  export default _default;
@@ -1,4 +1,4 @@
1
- import type { UnorderedListBlockProps } from "../../types/blocks.js";
1
+ import type { UnorderedListBlockProps } from "~~/src/runtime/types/blocks";
2
2
  declare const __VLS_export: import("vue").DefineComponent<UnorderedListBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UnorderedListBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
3
3
  declare const _default: typeof __VLS_export;
4
4
  export default _default;
@@ -5,9 +5,9 @@ type __VLS_Props = {
5
5
  role: string;
6
6
  description: string;
7
7
  };
8
- declare var __VLS_13: {};
8
+ declare var __VLS_15: {};
9
9
  type __VLS_Slots = {} & {
10
- links?: (props: typeof __VLS_13) => any;
10
+ links?: (props: typeof __VLS_15) => any;
11
11
  };
12
12
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
13
13
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -5,9 +5,9 @@ type __VLS_Props = {
5
5
  role: string;
6
6
  description: string;
7
7
  };
8
- declare var __VLS_13: {};
8
+ declare var __VLS_15: {};
9
9
  type __VLS_Slots = {} & {
10
- links?: (props: typeof __VLS_13) => any;
10
+ links?: (props: typeof __VLS_15) => any;
11
11
  };
12
12
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
13
13
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -4,9 +4,9 @@ type __VLS_Props = {
4
4
  to?: string;
5
5
  target?: string;
6
6
  };
7
- declare var __VLS_19: {};
7
+ declare var __VLS_22: {};
8
8
  type __VLS_Slots = {} & {
9
- default?: (props: typeof __VLS_19) => any;
9
+ default?: (props: typeof __VLS_22) => any;
10
10
  };
11
11
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
12
12
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -4,9 +4,9 @@ type __VLS_Props = {
4
4
  to?: string;
5
5
  target?: string;
6
6
  };
7
- declare var __VLS_19: {};
7
+ declare var __VLS_22: {};
8
8
  type __VLS_Slots = {} & {
9
- default?: (props: typeof __VLS_19) => any;
9
+ default?: (props: typeof __VLS_22) => any;
10
10
  };
11
11
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
12
12
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -3,10 +3,17 @@ type __VLS_Props = {
3
3
  level?: SectionLevel;
4
4
  title: string;
5
5
  description?: string;
6
+ isEditing?: boolean;
6
7
  };
7
- declare var __VLS_24: {};
8
+ declare var __VLS_21: {}, __VLS_23: {}, __VLS_25: {}, __VLS_33: {};
8
9
  type __VLS_Slots = {} & {
9
- default?: (props: typeof __VLS_24) => any;
10
+ title?: (props: typeof __VLS_21) => any;
11
+ } & {
12
+ title?: (props: typeof __VLS_23) => any;
13
+ } & {
14
+ description?: (props: typeof __VLS_25) => any;
15
+ } & {
16
+ default?: (props: typeof __VLS_33) => any;
10
17
  };
11
18
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
12
19
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -89,11 +89,13 @@ const sectionVariants = tv({
89
89
  const {
90
90
  level = 1,
91
91
  title,
92
- description
92
+ description,
93
+ isEditing = false
93
94
  } = defineProps({
94
95
  level: { type: Number, required: false },
95
96
  title: { type: String, required: true },
96
- description: { type: String, required: false }
97
+ description: { type: String, required: false },
98
+ isEditing: { type: Boolean, required: false }
97
99
  });
98
100
  const {
99
101
  sectionSlot,
@@ -120,6 +122,7 @@ const fullSectionUrl = computed(() => {
120
122
  class="relative"
121
123
  >
122
124
  <NuxtLink
125
+ v-if="!isEditing"
123
126
  :href="`#${sectionId}`"
124
127
  :class="linkSlot()"
125
128
  class="group lg:-ms-2 lg:ps-2"
@@ -132,10 +135,13 @@ const fullSectionUrl = computed(() => {
132
135
  class="absolute top-1 -ms-8 hidden rounded-md p-1 opacity-0 transition group-hover:opacity-100 group-focus:opacity-100 lg:flex"
133
136
  @click="copyToClipboard(fullSectionUrl)"
134
137
  />
135
- {{ title }}
138
+ <slot name="title">{{ title }}</slot>
136
139
  </NuxtLink>
140
+ <slot v-else name="title">{{ title }}</slot>
137
141
  </component>
138
- <p v-if="description" :class="descriptionSlot()">{{ description }}</p>
142
+ <p v-if="description" :class="descriptionSlot()">
143
+ <slot name="description">{{ description }}</slot>
144
+ </p>
139
145
  <USeparator :class="separatorSlot()" />
140
146
  <div :class="contentSlot()">
141
147
  <slot />
@@ -3,10 +3,17 @@ type __VLS_Props = {
3
3
  level?: SectionLevel;
4
4
  title: string;
5
5
  description?: string;
6
+ isEditing?: boolean;
6
7
  };
7
- declare var __VLS_24: {};
8
+ declare var __VLS_21: {}, __VLS_23: {}, __VLS_25: {}, __VLS_33: {};
8
9
  type __VLS_Slots = {} & {
9
- default?: (props: typeof __VLS_24) => any;
10
+ title?: (props: typeof __VLS_21) => any;
11
+ } & {
12
+ title?: (props: typeof __VLS_23) => any;
13
+ } & {
14
+ description?: (props: typeof __VLS_25) => any;
15
+ } & {
16
+ default?: (props: typeof __VLS_33) => any;
10
17
  };
11
18
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
12
19
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -1,6 +1,6 @@
1
1
  <script setup>
2
2
  import {} from "vue";
3
- import { getBlockComponent } from "../../utils/blockMapper";
3
+ import { getBlockRendererComponent } from "../../utils/blockMapper";
4
4
  const { blocks } = defineProps({
5
5
  blocks: { type: Array, required: true }
6
6
  });
@@ -9,7 +9,7 @@ const getComponent = (block) => {
9
9
  console.error("Block object is missing the critical 'type' field.");
10
10
  return null;
11
11
  }
12
- const resolvedComponent = getBlockComponent(block.type);
12
+ const resolvedComponent = getBlockRendererComponent(block.type);
13
13
  if (!resolvedComponent) {
14
14
  console.error(`Component resolution failed for block type: ${block.type}`);
15
15
  return null;
@@ -0,0 +1,7 @@
1
+ import type { Block } from "../../types/blocks.js";
2
+ type __VLS_Props = {
3
+ blocks: Block[];
4
+ };
5
+ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
6
+ declare const _default: typeof __VLS_export;
7
+ export default _default;
@@ -0,0 +1,64 @@
1
+ <script setup>
2
+ import { inject, provide } from "vue";
3
+ import { getBlockEditorComponent } from "../../utils/blockMapper";
4
+ const { blocks } = defineProps({
5
+ blocks: { type: Array, required: true }
6
+ });
7
+ const { removeBlock, moveBlock } = inject("blockEditorMutators", {
8
+ removeBlock: (id) => console.warn(`[Renderer] removeBlock not provided. Cannot delete block ${id}.`),
9
+ moveBlock: (id, newIndex) => console.warn(`[Renderer] moveBlock not provided. Cannot move block ${id}.`)
10
+ });
11
+ provide("blockEditorMutators", { removeBlock, moveBlock });
12
+ const getComponent = (block) => {
13
+ if (!block || !block.type || block.type.length === 0) {
14
+ console.error(
15
+ "[EditorBlockRenderer] Block object is missing the critical 'type' field."
16
+ );
17
+ return null;
18
+ }
19
+ const resolvedComponent = getBlockEditorComponent(block.type);
20
+ if (!resolvedComponent) {
21
+ console.error(
22
+ `[EditorBlockRenderer] Editor component resolution failed for block type: ${block.type}`
23
+ );
24
+ return null;
25
+ }
26
+ return resolvedComponent;
27
+ };
28
+ </script>
29
+
30
+ <template>
31
+ <div class="flex flex-col gap-lg editor-block-renderer">
32
+ <UEmpty
33
+ v-if="!blocks || blocks.length === 0"
34
+ variant="naked"
35
+ icon="lucide:pencil-line"
36
+ title="Start adding content blocks."
37
+ description="There is no content yet. Use the '+' button below to add your first block."
38
+ />
39
+ <template v-else v-for="block in blocks" :key="block.id">
40
+ <template v-if="getComponent(block)">
41
+ <component
42
+ :is="getComponent(block)"
43
+ v-bind="block.props"
44
+ :key="block.id"
45
+ :type="block.type"
46
+ class="block-editor-container"
47
+ />
48
+ </template>
49
+ <template v-else>
50
+ <UAlert
51
+ color="warning"
52
+ variant="subtle"
53
+ icon="lucide:octagon-alert"
54
+ title="Editor Rendering Error"
55
+ :description="`Editor component for type \'${block.type || 'UNKNOWN_OR_MISSING'}\' was not found. Please ensure the block name is correct and the editor component exists in the \'editor\' subdirectory.`"
56
+ />
57
+ </template>
58
+ </template>
59
+ </div>
60
+ </template>
61
+
62
+ <style scoped>
63
+ .editor-block-renderer{min-height:200px;padding:1rem}
64
+ </style>
@@ -0,0 +1,7 @@
1
+ import type { Block } from "../../types/blocks.js";
2
+ type __VLS_Props = {
3
+ blocks: Block[];
4
+ };
5
+ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
6
+ declare const _default: typeof __VLS_export;
7
+ export default _default;
@@ -11,9 +11,9 @@ type __VLS_Props = {
11
11
  title?: string;
12
12
  levels?: HeadingLevel[];
13
13
  };
14
- declare var __VLS_6: {};
14
+ declare var __VLS_7: {};
15
15
  type __VLS_Slots = {} & {
16
- bottom?: (props: typeof __VLS_6) => any;
16
+ bottom?: (props: typeof __VLS_7) => any;
17
17
  };
18
18
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
19
19
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -11,9 +11,9 @@ type __VLS_Props = {
11
11
  title?: string;
12
12
  levels?: HeadingLevel[];
13
13
  };
14
- declare var __VLS_6: {};
14
+ declare var __VLS_7: {};
15
15
  type __VLS_Slots = {} & {
16
- bottom?: (props: typeof __VLS_6) => any;
16
+ bottom?: (props: typeof __VLS_7) => any;
17
17
  };
18
18
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
19
19
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -0,0 +1,32 @@
1
+ import { type Ref } from "vue";
2
+ import { type Block } from "../types/blocks.js";
3
+ /**
4
+ * Defines the contract for the consuming application's save function.
5
+ * This allows the composable to trigger persistence without knowing the API details.
6
+ * It's assumed the callback will handle the necessary API calls and error handling.
7
+ */
8
+ type SaveCallback = (blocks: Block[]) => Promise<void> | void;
9
+ export interface UseBlockContentEditorOptions {
10
+ /** The initial array of blocks loaded from the database/API. */
11
+ initialBlocks: Block[];
12
+ /** The function the editor calls to persist changes. It is debounced internally. */
13
+ saveCallback: SaveCallback;
14
+ /** Optional. The debounce delay in milliseconds (default: 1000ms). */
15
+ debounceDelay?: number;
16
+ }
17
+ /**
18
+ * Manages the reactive state, updates, and debounced persistence of a block content array.
19
+ * This composable is decoupled from data fetching and specific API endpoints.
20
+ *
21
+ * @param options Configuration object including initial blocks and a save callback.
22
+ */
23
+ export declare const useBlockContentEditor: ({ initialBlocks, saveCallback, debounceDelay, }: UseBlockContentEditorOptions) => {
24
+ blocks: Ref<Block[], Block[]>;
25
+ isSaving: Ref<boolean, boolean>;
26
+ lastSavedAt: Ref<Date | null, Date | null>;
27
+ hasUnsavedChanges: Ref<boolean, boolean>;
28
+ addBlock: (newBlock: Block, index?: number) => void;
29
+ removeBlock: (blockId: string) => void;
30
+ moveBlock: (blockId: string, newIndex: number) => void;
31
+ };
32
+ export {};
@@ -0,0 +1,63 @@
1
+ import { ref, watch } from "vue";
2
+ import { useDebounceFn } from "@vueuse/core";
3
+ export const useBlockContentEditor = ({
4
+ initialBlocks,
5
+ saveCallback,
6
+ debounceDelay = 1e3
7
+ }) => {
8
+ const blocks = ref(JSON.parse(JSON.stringify(initialBlocks)));
9
+ const isSaving = ref(false);
10
+ const lastSavedAt = ref(null);
11
+ const hasUnsavedChanges = ref(false);
12
+ const persistChanges = async (currentBlocks) => {
13
+ isSaving.value = true;
14
+ hasUnsavedChanges.value = false;
15
+ try {
16
+ await saveCallback(currentBlocks);
17
+ lastSavedAt.value = /* @__PURE__ */ new Date();
18
+ console.log("Blocks persisted successfully via callback.");
19
+ } catch (error) {
20
+ console.error("[BlockEditor] Error during persistence callback:", error);
21
+ hasUnsavedChanges.value = true;
22
+ } finally {
23
+ isSaving.value = false;
24
+ }
25
+ };
26
+ const debouncedSave = useDebounceFn(() => {
27
+ persistChanges(JSON.parse(JSON.stringify(blocks.value)));
28
+ }, debounceDelay);
29
+ watch(
30
+ blocks,
31
+ () => {
32
+ hasUnsavedChanges.value = true;
33
+ debouncedSave();
34
+ },
35
+ { deep: true }
36
+ // Crucial: Watch nested changes (e.g., text inside a ParagraphBlock)
37
+ );
38
+ const addBlock = (newBlock, index = blocks.value.length) => {
39
+ blocks.value.splice(index, 0, newBlock);
40
+ };
41
+ const removeBlock = (blockId) => {
42
+ blocks.value = blocks.value.filter((block) => block.id !== blockId);
43
+ };
44
+ const moveBlock = (blockId, newIndex) => {
45
+ const oldIndex = blocks.value.findIndex((block) => block.id === blockId);
46
+ if (oldIndex === -1) return;
47
+ const [blockToMove] = blocks.value.splice(oldIndex, 1);
48
+ blocks.value.splice(newIndex, 0, blockToMove);
49
+ };
50
+ return {
51
+ // Core Data
52
+ blocks,
53
+ // The array the EditorBlockRenderer will use
54
+ // Status
55
+ isSaving,
56
+ lastSavedAt,
57
+ hasUnsavedChanges,
58
+ // Editor Actions (Mutators)
59
+ addBlock,
60
+ removeBlock,
61
+ moveBlock
62
+ };
63
+ };
@@ -6,4 +6,12 @@ import { type BlockType } from "../types/blocks.js";
6
6
  * @param type The BlockType string from the content JSON (e.g., 'ParagraphBlock').
7
7
  * @returns A lazily loaded Vue component reference, or undefined if not found.
8
8
  */
9
- export declare const getBlockComponent: (type: BlockType | string) => Component | undefined;
9
+ export declare const getBlockRendererComponent: (type: BlockType | string) => Component | undefined;
10
+ /**
11
+ * Maps the block type string from the database to a dynamically imported Vue component
12
+ * specifically for the editor view.
13
+ *
14
+ * @param type The BlockType string from the content JSON (e.g., 'EditorParagraphBlock').
15
+ * @returns A lazily loaded Vue component reference, or undefined if not found.
16
+ */
17
+ export declare const getBlockEditorComponent: (type: BlockType | string) => Component | undefined;
@@ -1,7 +1,8 @@
1
1
  import { defineAsyncComponent } from "vue";
2
- import { BLOCK_COMPONENT_MAP } from "#build/rimelight-blocks-map";
3
- export const getBlockComponent = (type) => {
4
- const componentImporter = BLOCK_COMPONENT_MAP[type];
2
+ import { BLOCK_RENDERER_COMPONENT_MAP } from "#build/rimelight-blocks-renderer-map";
3
+ import { BLOCK_EDITOR_COMPONENT_MAP } from "#build/rimelight-blocks-editor-map";
4
+ export const getBlockRendererComponent = (type) => {
5
+ const componentImporter = BLOCK_RENDERER_COMPONENT_MAP[type];
5
6
  if (!componentImporter) {
6
7
  console.warn(
7
8
  `[BlockMapper] Block component not found for type: ${type}. Please check block name.`
@@ -13,3 +14,16 @@ export const getBlockComponent = (type) => {
13
14
  return module.default;
14
15
  });
15
16
  };
17
+ export const getBlockEditorComponent = (type) => {
18
+ const componentImporter = BLOCK_EDITOR_COMPONENT_MAP[type];
19
+ if (!componentImporter) {
20
+ console.warn(
21
+ `[EditorBlockMapper] Editor block component not found for type: ${type}. Please check block name.`
22
+ );
23
+ return void 0;
24
+ }
25
+ return defineAsyncComponent(async () => {
26
+ const module = await componentImporter();
27
+ return module.default;
28
+ });
29
+ };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "rimelight-components",
3
3
  "description": "A component library by Rimelight Entertainment.",
4
- "version": "2.0.31",
4
+ "version": "2.0.32",
5
5
  "type": "module",
6
6
  "repository": {
7
7
  "type": "git",
@@ -87,6 +87,7 @@
87
87
  "date-fns": "^4.1.0",
88
88
  "defu": "^6.1.4",
89
89
  "nuxt": "^4.2.0",
90
+ "pinia": "^3.0.4",
90
91
  "tailwind-variants": "^3.1.1",
91
92
  "vue": "^3.5.22"
92
93
  },