vue-wswg-editor 0.0.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 (61) hide show
  1. package/README.md +91 -0
  2. package/dist/style.css +1 -0
  3. package/dist/types/components/AddBlockItem/AddBlockItem.vue.d.ts +6 -0
  4. package/dist/types/components/BlockBrowser/BlockBrowser.vue.d.ts +2 -0
  5. package/dist/types/components/BlockComponent/BlockComponent.vue.d.ts +15 -0
  6. package/dist/types/components/BlockEditorFieldNode/BlockEditorFieldNode.vue.d.ts +15 -0
  7. package/dist/types/components/BlockEditorFields/BlockEditorFields.vue.d.ts +15 -0
  8. package/dist/types/components/BlockMarginFieldNode/BlockMarginNode.vue.d.ts +23 -0
  9. package/dist/types/components/BlockRepeaterFieldNode/BlockRepeaterNode.vue.d.ts +15 -0
  10. package/dist/types/components/BrowserNavigation/BrowserNavigation.vue.d.ts +5 -0
  11. package/dist/types/components/EmptyState/EmptyState.vue.d.ts +15 -0
  12. package/dist/types/components/PageBlockList/PageBlockList.vue.d.ts +19 -0
  13. package/dist/types/components/PageBuilderSidebar/PageBuilderSidebar.vue.d.ts +30 -0
  14. package/dist/types/components/PageBuilderToolbar/PageBuilderToolbar.vue.d.ts +28 -0
  15. package/dist/types/components/PageRenderer/PageRenderer.vue.d.ts +6 -0
  16. package/dist/types/components/PageRenderer/blockModules.d.ts +1 -0
  17. package/dist/types/components/PageSettings/PageSettings.vue.d.ts +15 -0
  18. package/dist/types/components/ResizeHandle/ResizeHandle.vue.d.ts +6 -0
  19. package/dist/types/components/WswgJsonEditor/WswgJsonEditor.test.d.ts +1 -0
  20. package/dist/types/components/WswgJsonEditor/WswgJsonEditor.vue.d.ts +40 -0
  21. package/dist/types/index.d.ts +7 -0
  22. package/dist/types/tsconfig.tsbuildinfo +1 -0
  23. package/dist/types/util/fieldConfig.d.ts +82 -0
  24. package/dist/types/util/helpers.d.ts +28 -0
  25. package/dist/types/util/registry.d.ts +21 -0
  26. package/dist/types/util/validation.d.ts +15 -0
  27. package/dist/vue-wswg-editor.es.js +3377 -0
  28. package/package.json +85 -0
  29. package/src/assets/images/empty-state.jpg +0 -0
  30. package/src/assets/styles/_mixins.scss +73 -0
  31. package/src/assets/styles/main.css +3 -0
  32. package/src/components/AddBlockItem/AddBlockItem.vue +50 -0
  33. package/src/components/BlockBrowser/BlockBrowser.vue +69 -0
  34. package/src/components/BlockComponent/BlockComponent.vue +186 -0
  35. package/src/components/BlockEditorFieldNode/BlockEditorFieldNode.vue +378 -0
  36. package/src/components/BlockEditorFields/BlockEditorFields.vue +91 -0
  37. package/src/components/BlockMarginFieldNode/BlockMarginNode.vue +132 -0
  38. package/src/components/BlockRepeaterFieldNode/BlockRepeaterNode.vue +217 -0
  39. package/src/components/BrowserNavigation/BrowserNavigation.vue +27 -0
  40. package/src/components/EmptyState/EmptyState.vue +94 -0
  41. package/src/components/PageBlockList/PageBlockList.vue +103 -0
  42. package/src/components/PageBuilderSidebar/PageBuilderSidebar.vue +241 -0
  43. package/src/components/PageBuilderToolbar/PageBuilderToolbar.vue +63 -0
  44. package/src/components/PageRenderer/PageRenderer.vue +65 -0
  45. package/src/components/PageRenderer/blockModules-alternative.ts.example +9 -0
  46. package/src/components/PageRenderer/blockModules-manual.ts.example +19 -0
  47. package/src/components/PageRenderer/blockModules-runtime.ts.example +23 -0
  48. package/src/components/PageRenderer/blockModules.ts +3 -0
  49. package/src/components/PageSettings/PageSettings.vue +86 -0
  50. package/src/components/ResizeHandle/ResizeHandle.vue +105 -0
  51. package/src/components/WswgJsonEditor/WswgJsonEditor.test.ts +43 -0
  52. package/src/components/WswgJsonEditor/WswgJsonEditor.vue +391 -0
  53. package/src/index.ts +15 -0
  54. package/src/shims.d.ts +72 -0
  55. package/src/style.css +3 -0
  56. package/src/types/Block.d.ts +19 -0
  57. package/src/types/Layout.d.ts +9 -0
  58. package/src/util/fieldConfig.ts +173 -0
  59. package/src/util/helpers.ts +176 -0
  60. package/src/util/registry.ts +149 -0
  61. package/src/util/validation.ts +110 -0
package/README.md ADDED
@@ -0,0 +1,91 @@
1
+ # vue-wswg-editor
2
+
3
+ A Vue 3 WYSIWYG JSON Editor component library.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install vue-wswg-editor
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ```vue
14
+ <template>
15
+ <WswgJsonEditor />
16
+ </template>
17
+
18
+ <script setup lang="ts">
19
+ import { WswgJsonEditor } from "vue-wswg-editor";
20
+ // Import the CSS file for Tailwind styles
21
+ import "vue-wswg-editor/style.css";
22
+ </script>
23
+ ```
24
+
25
+ ## Development
26
+
27
+ ```bash
28
+ # Install dependencies
29
+ npm install
30
+
31
+ # Run development server
32
+ npm run dev
33
+
34
+ # Build library
35
+ npm run build
36
+
37
+ # Run tests
38
+ npm run test:unit
39
+
40
+ # Format code
41
+ npm run format-fix
42
+ ```
43
+
44
+ ## Local Development with npm link
45
+
46
+ To use this package locally in another project (e.g., the admin app) during development:
47
+
48
+ 1. **Build the library** (required before linking):
49
+
50
+ ```bash
51
+ npm run build
52
+ ```
53
+
54
+ 2. **Create a global symlink** in the vue-wswg-editor directory:
55
+
56
+ ```bash
57
+ npm link
58
+ ```
59
+
60
+ 3. **Link the package** in your consuming project (e.g., admin app):
61
+
62
+ ```bash
63
+ cd /path/to/your/project
64
+ npm link vue-wswg-editor
65
+ ```
66
+
67
+ 4. **Use the package** in your project as normal:
68
+
69
+ ```vue
70
+ <script setup lang="ts">
71
+ import { WswgJsonEditor } from "vue-wswg-editor";
72
+ </script>
73
+ ```
74
+
75
+ **Note:** After making changes to the library, you'll need to rebuild (`npm run build`) for changes to be reflected in the consuming project. The development server (`npm run dev`) is useful for testing the library in isolation, but won't automatically update the linked package.
76
+
77
+ To unlink:
78
+
79
+ ```bash
80
+ # In the consuming project
81
+ npm unlink vue-wswg-editor
82
+
83
+ # In the vue-wswg-editor directory (optional)
84
+ npm unlink
85
+ ```
86
+
87
+ ## Project Structure
88
+
89
+ - `src/components/` - Vue components
90
+ - `src/index.ts` - Library entry point
91
+ - `test/` - Test files
package/dist/style.css ADDED
@@ -0,0 +1 @@
1
+ .resize-handle[data-v-c2213864]{top:0;right:0;z-index:2;width:3px;height:100%;background-color:var(--grey-20);transition:all .2s ease-in-out;position:relative;cursor:col-resize}.resize-handle[data-v-c2213864]:hover{width:3px;background-color:var(--yellow-40)}.resize-handle[data-v-c2213864]:active{width:3px;background-color:var(--yellow-50)}.resize-handle[data-v-c2213864]:before{position:absolute;top:50%;left:-6px;z-index:20;width:14px;height:40px;content:"";background-color:var(--yellow-40);border-radius:var(--border-radius-16);opacity:0;transform:translateY(-50%);transition:opacity .2s ease-in-out,background-color .2s ease-in-out}.resize-handle[data-v-c2213864]:hover:before{opacity:1}.resize-handle[data-v-c2213864]:active:before{background-color:var(--yellow-50);opacity:1}.repeater-field[data-v-7311797c]{width:100%}.empty-state[data-v-7311797c]{border:2px dashed #e5e7eb;border-radius:.5rem}.repeater-item .repeater-item-fields[data-v-7311797c]{height:0;overflow:hidden}.repeater-item.is-open .repeater-item-fields[data-v-7311797c]{height:auto;border-top-width:1px;padding:.75rem}select.form-control[data-v-f93f2eca]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:20px;padding-right:32px;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none}.editor-field-node[data-v-f88afd35] .form-control:is(input:not([type=checkbox],[type=radio]),textarea,select){width:100%;background-color:#fff;border:1px solid #e0e0e0;border-radius:5px;padding:8px;font-size:14px;color:#333;outline:none;box-shadow:none;transition:border-color .2s}.editor-field-node[data-v-f88afd35] .form-control label input[type=checkbox],.editor-field-node[data-v-f88afd35] .form-control label input[type=radio]{width:16px;height:16px;border:1px solid #e0e0e0;border-radius:5px;padding:8px;font-size:14px;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;cursor:pointer}.editor-field-node[data-v-f88afd35] .form-control label input[type=checkbox]:checked,.editor-field-node[data-v-f88afd35] .form-control label input[type=radio]:checked{--tw-border-opacity: 1;border-color:rgb(29 78 216 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))}.editor-field-node[data-v-f88afd35] .form-control label:has(input[type=checkbox]:checked,input[type=radio]:checked){--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.editor-field-node[data-v-f88afd35] .form-control label:hover input[type=checkbox]:not(:checked),.editor-field-node[data-v-f88afd35] .form-control label:hover input[type=radio]:not(:checked){--tw-border-opacity: 1;border-color:rgb(37 99 235 / var(--tw-border-opacity, 1))}.editor-field-node[data-v-f88afd35] .form-control label:has(input[type=checkbox]:disabled,input[type=radio]:disabled){opacity:.75;cursor:not-allowed}.editor-field-node[data-v-f88afd35] .form-control label:has(input[type=checkbox]:disabled,input[type=radio]:disabled) input{cursor:not-allowed}.editor-field-node[data-v-f88afd35] .form-control:is(select){background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:20px;padding-right:32px;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none}.editor-field-node[data-v-f88afd35] .form-control:is(input[type=color]){width:auto;aspect-ratio:1/1;padding:3px;border:none;border-radius:5px;background-color:#fff;border:1px solid #e0e0e0;cursor:pointer}.editor-field-node[data-v-f88afd35] .form-control:hover{border-color:#555}.editor-field-node[data-v-f88afd35] .form-control:disabled{opacity:.75;background-color:#fff;cursor:not-allowed}.block-item.hovered-block[data-v-c2e5dca2]{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}select.form-control[data-v-0f897fba]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:20px;padding-right:32px;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none}.page-builder-sidebar[data-v-5e80b909]{height:100%;overflow-y:auto;background:#fff}.block-wrapper[data-v-0ff5aba1]{position:relative;transition:all .3s ease}.block-wrapper[data-v-0ff5aba1]:before,.block-wrapper[data-v-0ff5aba1]:after{position:absolute;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:0;font-size:14px;font-weight:500;color:#888017;content:"Spacing";background-color:#f7efac;border:2px dashed #d2c564;border-radius:7px;opacity:0;transform:scaleY(.9) scaleX(.98);transition:all .3s ease}.block-wrapper .block-component[data-v-0ff5aba1]{cursor:pointer;position:relative}.block-wrapper .block-component[data-v-0ff5aba1]:before{position:absolute;left:0;top:0;width:100%;height:100%;content:"";background-color:#9fd0f643;outline:2px dashed #638ef1;outline-offset:-2px;pointer-events:none;opacity:0;z-index:2}.block-wrapper.active-block .block-component[data-v-0ff5aba1]:before{background-color:#9fd0f643;border-color:#638ef1;opacity:1}.block-wrapper.active-block[data-v-0ff5aba1]:after,.block-wrapper.active-block[data-v-0ff5aba1]:before{opacity:1}.block-wrapper.hovered-block .block-component[data-v-0ff5aba1]:before{background-color:#9fd0f643;border-color:#638ef1;opacity:1}.block-wrapper.hovered-block[data-v-0ff5aba1]:after,.block-wrapper.hovered-block[data-v-0ff5aba1]:before{opacity:1}.block-wrapper.margin-top-sm[data-v-0ff5aba1]{padding-top:2rem}.block-wrapper.margin-top-sm[data-v-0ff5aba1]:before{top:0;height:2rem}.block-wrapper.margin-top-md[data-v-0ff5aba1]{padding-top:4rem}.block-wrapper.margin-top-md[data-v-0ff5aba1]:before{top:0;height:4rem}.block-wrapper.margin-top-lg[data-v-0ff5aba1]{padding-top:6rem}.block-wrapper.margin-top-lg[data-v-0ff5aba1]:before{top:0;height:6rem}.block-wrapper.margin-bottom-sm[data-v-0ff5aba1]{padding-bottom:2rem}.block-wrapper.margin-bottom-sm[data-v-0ff5aba1]:after{bottom:0;height:2rem}.block-wrapper.margin-bottom-md[data-v-0ff5aba1]{padding-bottom:4rem}.block-wrapper.margin-bottom-md[data-v-0ff5aba1]:after{bottom:0;height:4rem}.block-wrapper.margin-bottom-lg[data-v-0ff5aba1]{padding-bottom:6rem}.block-wrapper.margin-bottom-lg[data-v-0ff5aba1]:after{bottom:0;height:6rem}.block-wrapper.margin-top-none[data-v-0ff5aba1]:before,.block-wrapper.margin-bottom-none[data-v-0ff5aba1]:after{display:none;content:none}.wswg-json-editor{display:flex;flex-direction:column;height:100vh;width:100%;max-width:100%}.wswg-json-editor-header{background-color:#fff;position:sticky;top:0;z-index:20}.wswg-json-editor-loading{display:flex;justify-content:center;align-items:center}.wswg-json-editor-canvas{overflow-y:auto;display:flex;height:100%;flex-grow:1;flex-shrink:0;flex:1;background-color:#6a6a6a}.wswg-json-editor-canvas-preview{padding:2rem;flex-grow:1;flex-shrink:0;flex:1}.wswg-json-editor-canvas-sidebar{padding:2rem;background:#fff;min-width:300px}.block-wrapper.margin-top-sm[data-v-958830a9]{padding-top:2rem}.block-wrapper.margin-top-sm[data-v-958830a9]:before{top:0;height:2rem}.block-wrapper.margin-top-md[data-v-958830a9]{padding-top:4rem}.block-wrapper.margin-top-md[data-v-958830a9]:before{top:0;height:4rem}.block-wrapper.margin-top-lg[data-v-958830a9]{padding-top:6rem}.block-wrapper.margin-top-lg[data-v-958830a9]:before{top:0;height:6rem}.block-wrapper.margin-bottom-sm[data-v-958830a9]{padding-bottom:2rem}.block-wrapper.margin-bottom-sm[data-v-958830a9]:after{bottom:0;height:2rem}.block-wrapper.margin-bottom-md[data-v-958830a9]{padding-bottom:4rem}.block-wrapper.margin-bottom-md[data-v-958830a9]:after{bottom:0;height:4rem}.block-wrapper.margin-bottom-lg[data-v-958830a9]{padding-bottom:6rem}.block-wrapper.margin-bottom-lg[data-v-958830a9]:after{bottom:0;height:6rem}.block-wrapper.margin-top-none[data-v-958830a9]:before,.block-wrapper.margin-bottom-none[data-v-958830a9]:after{display:none;content:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.-top-3{top:-.75rem}.left-0{left:0}.right-4{right:1rem}.top-0{top:0}.z-10{z-index:10}.-mx-2\.5{margin-left:-.625rem;margin-right:-.625rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-9{margin-bottom:2.25rem}.ml-0{margin-left:0}.ml-1{margin-left:.25rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.\!block{display:block!important}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.size-10{width:2.5rem;height:2.5rem}.size-3{width:.75rem;height:.75rem}.size-4{width:1rem;height:1rem}.size-5{width:1.25rem;height:1.25rem}.size-6{width:1.5rem;height:1.5rem}.size-7{width:1.75rem;height:1.75rem}.h-28{height:7rem}.h-7{height:1.75rem}.h-auto{height:auto}.h-full{height:100%}.w-14{width:3.5rem}.w-96{width:24rem}.w-auto{width:auto}.w-full{width:100%}.max-w-5xl{max-width:64rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-col-resize{cursor:col-resize}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse: 0;border-right-width:calc(1px * var(--tw-divide-x-reverse));border-left-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-dashed{border-style:dashed}.\!border-none{border-style:none!important}.border-blue-200{--tw-border-opacity: 1;border-color:rgb(191 219 254 / var(--tw-border-opacity, 1))}.border-blue-500{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.border-blue-800\/20{border-color:#1e40af33}.border-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.border-transparent{border-color:transparent}.border-zinc-200{--tw-border-opacity: 1;border-color:rgb(228 228 231 / var(--tw-border-opacity, 1))}.border-b-transparent{border-bottom-color:transparent}.\!bg-white{--tw-bg-opacity: 1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))!important}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.bg-blue-50{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.bg-blue-50\/80{background-color:#eff6ffcc}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-blue-700{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))}.bg-emerald-700{--tw-bg-opacity: 1;background-color:rgb(4 120 87 / var(--tw-bg-opacity, 1))}.bg-neutral-100{--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1))}.bg-red-50{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-zinc-100{--tw-bg-opacity: 1;background-color:rgb(244 244 245 / var(--tw-bg-opacity, 1))}.bg-zinc-200{--tw-bg-opacity: 1;background-color:rgb(228 228 231 / var(--tw-bg-opacity, 1))}.bg-zinc-300{--tw-bg-opacity: 1;background-color:rgb(212 212 216 / var(--tw-bg-opacity, 1))}.bg-zinc-50{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}.bg-zinc-600{--tw-bg-opacity: 1;background-color:rgb(82 82 91 / var(--tw-bg-opacity, 1))}.bg-zinc-700{--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))}.object-contain{-o-object-fit:contain;object-fit:contain}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-5{padding:1.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.pt-3{padding-top:.75rem}.text-center{text-align:center}.\!font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"!important}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.text-amber-600{--tw-text-opacity: 1;color:rgb(217 119 6 / var(--tw-text-opacity, 1))}.text-blue-500{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-blue-700{--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-neutral-500{--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.text-neutral-900{--tw-text-opacity: 1;color:rgb(23 23 23 / var(--tw-text-opacity, 1))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-zinc-300{--tw-text-opacity: 1;color:rgb(212 212 216 / var(--tw-text-opacity, 1))}.text-zinc-400{--tw-text-opacity: 1;color:rgb(161 161 170 / var(--tw-text-opacity, 1))}.text-zinc-500{--tw-text-opacity: 1;color:rgb(113 113 122 / var(--tw-text-opacity, 1))}.text-zinc-600{--tw-text-opacity: 1;color:rgb(82 82 91 / var(--tw-text-opacity, 1))}.text-zinc-900{--tw-text-opacity: 1;color:rgb(24 24 27 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.opacity-50{opacity:.5}.\!outline-none{outline:2px solid transparent!important;outline-offset:2px!important}.outline{outline-style:solid}.\!ring-0{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)!important}.\!ring-offset-0{--tw-ring-offset-width: 0px !important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.first-letter\:uppercase:first-letter{text-transform:uppercase}.checked\:ml-7:checked{margin-left:1.75rem}.hover\:border-red-200:hover{--tw-border-opacity: 1;border-color:rgb(254 202 202 / var(--tw-border-opacity, 1))}.hover\:border-zinc-300:hover{--tw-border-opacity: 1;border-color:rgb(212 212 216 / var(--tw-border-opacity, 1))}.hover\:border-zinc-400:hover{--tw-border-opacity: 1;border-color:rgb(161 161 170 / var(--tw-border-opacity, 1))}.hover\:bg-blue-100:hover{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.hover\:bg-emerald-800:hover{--tw-bg-opacity: 1;background-color:rgb(6 95 70 / var(--tw-bg-opacity, 1))}.hover\:bg-red-100:hover{--tw-bg-opacity: 1;background-color:rgb(254 226 226 / var(--tw-bg-opacity, 1))}.hover\:bg-zinc-100:hover{--tw-bg-opacity: 1;background-color:rgb(244 244 245 / var(--tw-bg-opacity, 1))}.hover\:bg-zinc-200:hover{--tw-bg-opacity: 1;background-color:rgb(228 228 231 / var(--tw-bg-opacity, 1))}.hover\:bg-zinc-300:hover{--tw-bg-opacity: 1;background-color:rgb(212 212 216 / var(--tw-bg-opacity, 1))}.hover\:bg-zinc-500:hover{--tw-bg-opacity: 1;background-color:rgb(113 113 122 / var(--tw-bg-opacity, 1))}.hover\:text-blue-700:hover{--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.hover\:text-blue-800:hover{--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.hover\:text-red-600:hover{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.hover\:text-red-700:hover{--tw-text-opacity: 1;color:rgb(185 28 28 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:text-zinc-600:hover{--tw-text-opacity: 1;color:rgb(82 82 91 / var(--tw-text-opacity, 1))}.hover\:text-zinc-700:hover{--tw-text-opacity: 1;color:rgb(63 63 70 / var(--tw-text-opacity, 1))}.hover\:text-zinc-900:hover{--tw-text-opacity: 1;color:rgb(24 24 27 / var(--tw-text-opacity, 1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-sm:hover{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.active\:border-blue-600:active{--tw-border-opacity: 1;border-color:rgb(37 99 235 / var(--tw-border-opacity, 1))}.active\:bg-blue-50:active{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.active\:text-blue-600:active{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}
@@ -0,0 +1,6 @@
1
+ import type { Block } from "../../types/Block";
2
+ type __VLS_Props = {
3
+ block: Block;
4
+ };
5
+ declare const _default: 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
+ export default _default;
@@ -0,0 +1,2 @@
1
+ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
2
+ export default _default;
@@ -0,0 +1,15 @@
1
+ import type { Block } from "../../types/Block";
2
+ type __VLS_Props = {
3
+ block: Block;
4
+ blockIndex: number;
5
+ activeBlock: Block | null;
6
+ hoveredBlockId: string | null;
7
+ };
8
+ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
9
+ hoverBlock: (id: string | null) => any;
10
+ clickBlock: (block: any) => any;
11
+ }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
12
+ onHoverBlock?: ((id: string | null) => any) | undefined;
13
+ onClickBlock?: ((block: any) => any) | undefined;
14
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
15
+ export default _default;
@@ -0,0 +1,15 @@
1
+ import type { EditorFieldConfig } from "../../util/fieldConfig";
2
+ type __VLS_Props = {
3
+ fieldConfig: EditorFieldConfig;
4
+ fieldName: string;
5
+ editable: boolean;
6
+ };
7
+ type __VLS_PublicProps = __VLS_Props & {
8
+ modelValue?: any;
9
+ };
10
+ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
+ "update:modelValue": (value: any) => any;
12
+ }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
13
+ "onUpdate:modelValue"?: ((value: any) => any) | undefined;
14
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
15
+ export default _default;
@@ -0,0 +1,15 @@
1
+ import type { EditorFieldConfig } from "../../util/fieldConfig";
2
+ type __VLS_Props = {
3
+ fields?: Record<string, EditorFieldConfig>;
4
+ editable: boolean;
5
+ isLayoutBlock?: boolean;
6
+ };
7
+ type __VLS_PublicProps = __VLS_Props & {
8
+ modelValue?: any;
9
+ };
10
+ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
+ "update:modelValue": (value: any) => any;
12
+ }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
13
+ "onUpdate:modelValue"?: ((value: any) => any) | undefined;
14
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
15
+ export default _default;
@@ -0,0 +1,23 @@
1
+ import type { EditorFieldConfig } from "../../util/fieldConfig";
2
+ type __VLS_Props = {
3
+ fieldConfig: EditorFieldConfig;
4
+ editable: boolean;
5
+ };
6
+ type __VLS_PublicProps = __VLS_Props & {
7
+ modelValue?: {
8
+ top: string;
9
+ bottom: string;
10
+ } | undefined;
11
+ };
12
+ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
13
+ "update:modelValue": (value: {
14
+ top: string;
15
+ bottom: string;
16
+ } | undefined) => any;
17
+ }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
18
+ "onUpdate:modelValue"?: ((value: {
19
+ top: string;
20
+ bottom: string;
21
+ } | undefined) => any) | undefined;
22
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
23
+ export default _default;
@@ -0,0 +1,15 @@
1
+ import type { EditorFieldConfig } from "../../util/fieldConfig";
2
+ type __VLS_Props = {
3
+ fieldConfig: EditorFieldConfig;
4
+ fieldName: string;
5
+ editable: boolean;
6
+ };
7
+ type __VLS_PublicProps = __VLS_Props & {
8
+ modelValue?: any[];
9
+ };
10
+ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
+ "update:modelValue": (value: any[] | undefined) => any;
12
+ }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
13
+ "onUpdate:modelValue"?: ((value: any[] | undefined) => any) | undefined;
14
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
15
+ export default _default;
@@ -0,0 +1,5 @@
1
+ type __VLS_Props = {
2
+ url: string;
3
+ };
4
+ declare const _default: 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>;
5
+ export default _default;
@@ -0,0 +1,15 @@
1
+ type __VLS_Props = {
2
+ editable: boolean;
3
+ };
4
+ type __VLS_PublicProps = __VLS_Props & {
5
+ "showAddBlockMenu"?: boolean;
6
+ };
7
+ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
8
+ "update:showAddBlockMenu": (value: boolean | undefined) => any;
9
+ } & {
10
+ blockAdded: (blockType: string) => any;
11
+ }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
12
+ "onUpdate:showAddBlockMenu"?: ((value: boolean | undefined) => any) | undefined;
13
+ onBlockAdded?: ((blockType: string) => any) | undefined;
14
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
15
+ export default _default;
@@ -0,0 +1,19 @@
1
+ type __VLS_Props = {
2
+ blocksKey: string;
3
+ settingsKey: string;
4
+ };
5
+ type __VLS_PublicProps = __VLS_Props & {
6
+ modelValue?: any;
7
+ "hoveredBlockId"?: string | null;
8
+ };
9
+ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
10
+ "update:modelValue": (value: any) => any;
11
+ "update:hoveredBlockId": (value: string | null | undefined) => any;
12
+ } & {
13
+ "block-click": (block: any) => any;
14
+ }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
15
+ "onUpdate:modelValue"?: ((value: any) => any) | undefined;
16
+ "onBlock-click"?: ((block: any) => any) | undefined;
17
+ "onUpdate:hoveredBlockId"?: ((value: string | null | undefined) => any) | undefined;
18
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
19
+ export default _default;
@@ -0,0 +1,30 @@
1
+ type __VLS_Props = {
2
+ editable?: boolean;
3
+ blocksKey?: string;
4
+ settingsKey?: string;
5
+ };
6
+ type __VLS_PublicProps = __VLS_Props & {
7
+ modelValue?: any;
8
+ "activeBlock"?: any;
9
+ "hoveredBlockId"?: string | null;
10
+ "showPageSettings"?: boolean;
11
+ "showAddBlockMenu"?: boolean;
12
+ };
13
+ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
14
+ "update:activeBlock": (value: any) => any;
15
+ "update:showPageSettings": (value: boolean | undefined) => any;
16
+ "update:modelValue": (value: any) => any;
17
+ "update:hoveredBlockId": (value: string | null | undefined) => any;
18
+ "update:showAddBlockMenu": (value: boolean | undefined) => any;
19
+ }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
20
+ "onUpdate:activeBlock"?: ((value: any) => any) | undefined;
21
+ "onUpdate:showPageSettings"?: ((value: boolean | undefined) => any) | undefined;
22
+ "onUpdate:modelValue"?: ((value: any) => any) | undefined;
23
+ "onUpdate:hoveredBlockId"?: ((value: string | null | undefined) => any) | undefined;
24
+ "onUpdate:showAddBlockMenu"?: ((value: boolean | undefined) => any) | undefined;
25
+ }>, {
26
+ editable: boolean;
27
+ blocksKey: string;
28
+ settingsKey: string;
29
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
30
+ export default _default;
@@ -0,0 +1,28 @@
1
+ type __VLS_Props = {
2
+ hasPageSettings: boolean;
3
+ };
4
+ type __VLS_PublicProps = __VLS_Props & {
5
+ "editorViewport"?: "desktop" | "mobile";
6
+ "activeBlock"?: any;
7
+ "showPageSettings"?: boolean;
8
+ };
9
+ declare var __VLS_1: {};
10
+ type __VLS_Slots = {} & {
11
+ default?: (props: typeof __VLS_1) => any;
12
+ };
13
+ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
14
+ "update:editorViewport": (value: "desktop" | "mobile" | undefined) => any;
15
+ "update:activeBlock": (value: any) => any;
16
+ "update:showPageSettings": (value: boolean | undefined) => any;
17
+ }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
18
+ "onUpdate:editorViewport"?: ((value: "desktop" | "mobile" | undefined) => any) | undefined;
19
+ "onUpdate:activeBlock"?: ((value: any) => any) | undefined;
20
+ "onUpdate:showPageSettings"?: ((value: boolean | undefined) => any) | undefined;
21
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
22
+ declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
23
+ export default _default;
24
+ type __VLS_WithSlots<T, S> = T & {
25
+ new (): {
26
+ $slots: S;
27
+ };
28
+ };
@@ -0,0 +1,6 @@
1
+ import type { Block } from "../../types/Block";
2
+ type __VLS_Props = {
3
+ blocks: Block[];
4
+ };
5
+ declare const _default: 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
+ export default _default;
@@ -0,0 +1 @@
1
+ export declare const blockModules: Record<string, string> | Record<string, () => Promise<any>> | Record<string, any>;
@@ -0,0 +1,15 @@
1
+ type __VLS_Props = {
2
+ title?: string;
3
+ };
4
+ type __VLS_PublicProps = __VLS_Props & {
5
+ modelValue?: any;
6
+ };
7
+ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
8
+ "update:modelValue": (value: any) => any;
9
+ } & {
10
+ close: () => any;
11
+ }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
12
+ onClose?: (() => any) | undefined;
13
+ "onUpdate:modelValue"?: ((value: any) => any) | undefined;
14
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
15
+ export default _default;
@@ -0,0 +1,6 @@
1
+ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
2
+ sidebarWidth: (width: number) => any;
3
+ }, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
4
+ onSidebarWidth?: ((width: number) => any) | undefined;
5
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
6
+ export default _default;
@@ -0,0 +1,40 @@
1
+ type __VLS_Props = {
2
+ editable?: boolean;
3
+ loading?: boolean;
4
+ url?: string;
5
+ showBrowserBar?: boolean;
6
+ blocksKey?: string;
7
+ settingsKey?: string;
8
+ defaultBlockMargin?: "none" | "small" | "medium" | "large";
9
+ };
10
+ type __VLS_PublicProps = __VLS_Props & {
11
+ modelValue?: any;
12
+ };
13
+ declare var __VLS_1: {}, __VLS_6: {}, __VLS_8: {};
14
+ type __VLS_Slots = {} & {
15
+ header?: (props: typeof __VLS_1) => any;
16
+ } & {
17
+ toolbar?: (props: typeof __VLS_6) => any;
18
+ } & {
19
+ loading?: (props: typeof __VLS_8) => any;
20
+ };
21
+ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
22
+ "update:modelValue": (value: any) => any;
23
+ }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
24
+ "onUpdate:modelValue"?: ((value: any) => any) | undefined;
25
+ }>, {
26
+ url: string;
27
+ editable: boolean;
28
+ blocksKey: string;
29
+ settingsKey: string;
30
+ loading: boolean;
31
+ showBrowserBar: boolean;
32
+ defaultBlockMargin: "none" | "small" | "medium" | "large";
33
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
34
+ declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
35
+ export default _default;
36
+ type __VLS_WithSlots<T, S> = T & {
37
+ new (): {
38
+ $slots: S;
39
+ };
40
+ };
@@ -0,0 +1,7 @@
1
+ export { createField } from "./util/fieldConfig";
2
+ export type { EditorFieldConfig, ValidatorFunction } from "./util/fieldConfig";
3
+ export { getLayouts } from "./util/registry";
4
+ export { validateField, validateAllFields } from "./util/validation";
5
+ export { default as WswgJsonEditor } from "./components/WswgJsonEditor/WswgJsonEditor.vue";
6
+ export { default as PageRenderer } from "./components/PageRenderer/PageRenderer.vue";
7
+ import "./style.css";
@@ -0,0 +1 @@
1
+ {"root":["../../src/index.ts","../../src/shims.d.ts","../../src/components/pagerenderer/blockmodules.ts","../../src/components/wswgjsoneditor/wswgjsoneditor.test.ts","../../src/types/block.d.ts","../../src/types/layout.d.ts","../../src/util/fieldconfig.ts","../../src/util/helpers.ts","../../src/util/registry.ts","../../src/util/validation.ts","../../src/components/addblockitem/addblockitem.vue","../../src/components/blockbrowser/blockbrowser.vue","../../src/components/blockcomponent/blockcomponent.vue","../../src/components/blockeditorfieldnode/blockeditorfieldnode.vue","../../src/components/blockeditorfields/blockeditorfields.vue","../../src/components/blockmarginfieldnode/blockmarginnode.vue","../../src/components/blockrepeaterfieldnode/blockrepeaternode.vue","../../src/components/browsernavigation/browsernavigation.vue","../../src/components/emptystate/emptystate.vue","../../src/components/pageblocklist/pageblocklist.vue","../../src/components/pagebuildersidebar/pagebuildersidebar.vue","../../src/components/pagebuildertoolbar/pagebuildertoolbar.vue","../../src/components/pagerenderer/pagerenderer.vue","../../src/components/pagesettings/pagesettings.vue","../../src/components/resizehandle/resizehandle.vue","../../src/components/wswgjsoneditor/wswgjsoneditor.vue"],"version":"5.8.3"}
@@ -0,0 +1,82 @@
1
+ import type { Component } from "vue";
2
+ /**
3
+ * Validator function that returns:
4
+ * - `true` if the value is valid
5
+ * - `false` if the value is invalid (generic error)
6
+ * - `string` if the value is invalid (specific error message)
7
+ */
8
+ export type ValidatorFunction = (value: any) => Promise<boolean | string>;
9
+ /**
10
+ * Editor field types for the page builder sidebar
11
+ */
12
+ export type EditorFieldType = "text" | "textarea" | "number" | "boolean" | "email" | "url" | "select" | "checkbox" | "radio" | "color" | "range" | "repeater" | "margin" | "custom";
13
+ /**
14
+ * Simple utility for defining page builder props with editor field metadata
15
+ * This approach separates Vue props from editor field configuration
16
+ */
17
+ export interface EditorFieldConfig {
18
+ type: EditorFieldType;
19
+ component?: Component;
20
+ required?: boolean;
21
+ default?: any;
22
+ label?: string;
23
+ description?: string;
24
+ placeholder?: string;
25
+ rows?: number;
26
+ options?: Array<{
27
+ label: string;
28
+ value: any;
29
+ id: string;
30
+ }>;
31
+ step?: number;
32
+ hidden?: boolean;
33
+ group?: string;
34
+ clearable?: boolean;
35
+ /**
36
+ * Validator function that returns:
37
+ * - `true` if the value is valid
38
+ * - `false` if the value is invalid (generic error)
39
+ * - `string` if the value is invalid (specific error message)
40
+ */
41
+ validator?: ValidatorFunction;
42
+ repeaterFields?: Record<string, EditorFieldConfig>;
43
+ repeaterFieldLabel?: string;
44
+ minLength?: number;
45
+ maxLength?: number;
46
+ min?: number;
47
+ max?: number;
48
+ minItems?: number;
49
+ maxItems?: number;
50
+ responsive?: boolean;
51
+ }
52
+ /**
53
+ * Helper function to create editor field configurations
54
+ */
55
+ export declare const createField: {
56
+ custom: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
57
+ text: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
58
+ textarea: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
59
+ number: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
60
+ boolean: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
61
+ email: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
62
+ url: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
63
+ select: <T>(options: Array<{
64
+ label: string;
65
+ value: T;
66
+ id: string;
67
+ }>, config?: Partial<Omit<EditorFieldConfig, "options">>) => EditorFieldConfig;
68
+ radio: <T>(options: Array<{
69
+ label: string;
70
+ value: T;
71
+ id: string;
72
+ }>, config?: Partial<Omit<EditorFieldConfig, "options">>) => EditorFieldConfig;
73
+ checkbox: <T>(options: Array<{
74
+ label: string;
75
+ value: T;
76
+ id: string;
77
+ }>, config?: Partial<Omit<EditorFieldConfig, "options">>) => EditorFieldConfig;
78
+ color: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
79
+ range: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
80
+ repeater: (repeaterFields: Record<string, EditorFieldConfig>, config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
81
+ margin: (config?: Partial<EditorFieldConfig>) => EditorFieldConfig;
82
+ };
@@ -0,0 +1,28 @@
1
+ /**
2
+ * File lookup utility for finding Vue components with flexible naming conventions
3
+ *
4
+ * This utility handles different naming formats (snake_case, camelCase, kebab-case, PascalCase)
5
+ * and various file/folder structures to provide maximum flexibility in component organization.
6
+ */
7
+ /**
8
+ * Converts a string to different naming conventions
9
+ */
10
+ export declare function generateNameVariations(name: string): string[];
11
+ /**
12
+ * Generates file path patterns to try for a given block name and optional file name
13
+ * If fileName is provided, generates patterns using variations of both blockName (for directory) and fileName (for file)
14
+ * If fileName is not provided, uses blockName variations for both directory and file
15
+ *
16
+ * @param basePath - Base path (e.g., "@page-builder/blocks/")
17
+ * @param blockName - Block name in any format (e.g., "heroSection", "hero-section")
18
+ * @param fileName - Optional file name (e.g., "options.ts", "fields.ts"). If not provided, uses blockName
19
+ * @returns Array of path patterns to try
20
+ */
21
+ export declare function generateFilePathPatterns(basePath: string, blockName: string, fileName?: string): string[];
22
+ /**
23
+ * Converts a any type of string to camelCase
24
+ * e.g., "hero_section" or "HeroSection" or "hero-section" or "heroSection" -> "HeroSection"
25
+ * e.g., "component_not_found" or "ComponentNotFound" or "component-not-found" or "componentNotFound" -> "ComponentNotFound"
26
+ */
27
+ export declare function toCamelCase(input: string): string;
28
+ export declare function toNiceName(input: string): string;
@@ -0,0 +1,21 @@
1
+ import { type Ref } from "vue";
2
+ import type { EditorFieldConfig } from "./fieldConfig";
3
+ import type { Block } from "../types/Block";
4
+ import type { Layout } from "../types/Layout";
5
+ /**
6
+ * Registry of all page builder blocks
7
+ * Automatically populated from the /page-builder/blocks directory of your app
8
+ */
9
+ export declare const pageBuilderBlocks: Ref<Record<string, Block>>;
10
+ export declare const pageBuilderLayouts: Ref<Record<string, Layout>>;
11
+ export declare function getBlocks(): Record<string, Block>;
12
+ export declare function getLayouts(): Record<string, Layout>;
13
+ /**
14
+ * Get the thumbnail URL for a block directory
15
+ * @param directory - Block directory path (e.g., "@page-builder/blocks/hero-section")
16
+ * @returns Thumbnail URL or undefined if not found
17
+ */
18
+ export declare function getBlockThumbnailUrl(directory: string | undefined): string | undefined;
19
+ export declare function getBlockComponent(blockType: string): Block | undefined;
20
+ export declare function getLayoutFields(layoutName: string): Record<string, EditorFieldConfig>;
21
+ export declare function initialiseRegistry(): void;
@@ -0,0 +1,15 @@
1
+ import type { ValidatorFunction } from "./fieldConfig";
2
+ export declare function validateField(value: any, validator: ValidatorFunction): Promise<string | boolean>;
3
+ export interface ValidationResult {
4
+ title: string;
5
+ isValid: boolean;
6
+ errors: Record<string, string | boolean>;
7
+ }
8
+ /**
9
+ * Validate all fields in the value
10
+ * @param value - The value to validate
11
+ * @param blocksKey - The key of the blocks in the value
12
+ * @param settingsKey - The key of the settings in the value
13
+ * @returns A record of validation results
14
+ */
15
+ export declare function validateAllFields(value: any, blocksKey?: string, settingsKey?: string): Promise<Record<string, ValidationResult>>;