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.
- package/README.md +91 -0
- package/dist/style.css +1 -0
- package/dist/types/components/AddBlockItem/AddBlockItem.vue.d.ts +6 -0
- package/dist/types/components/BlockBrowser/BlockBrowser.vue.d.ts +2 -0
- package/dist/types/components/BlockComponent/BlockComponent.vue.d.ts +15 -0
- package/dist/types/components/BlockEditorFieldNode/BlockEditorFieldNode.vue.d.ts +15 -0
- package/dist/types/components/BlockEditorFields/BlockEditorFields.vue.d.ts +15 -0
- package/dist/types/components/BlockMarginFieldNode/BlockMarginNode.vue.d.ts +23 -0
- package/dist/types/components/BlockRepeaterFieldNode/BlockRepeaterNode.vue.d.ts +15 -0
- package/dist/types/components/BrowserNavigation/BrowserNavigation.vue.d.ts +5 -0
- package/dist/types/components/EmptyState/EmptyState.vue.d.ts +15 -0
- package/dist/types/components/PageBlockList/PageBlockList.vue.d.ts +19 -0
- package/dist/types/components/PageBuilderSidebar/PageBuilderSidebar.vue.d.ts +30 -0
- package/dist/types/components/PageBuilderToolbar/PageBuilderToolbar.vue.d.ts +28 -0
- package/dist/types/components/PageRenderer/PageRenderer.vue.d.ts +6 -0
- package/dist/types/components/PageRenderer/blockModules.d.ts +1 -0
- package/dist/types/components/PageSettings/PageSettings.vue.d.ts +15 -0
- package/dist/types/components/ResizeHandle/ResizeHandle.vue.d.ts +6 -0
- package/dist/types/components/WswgJsonEditor/WswgJsonEditor.test.d.ts +1 -0
- package/dist/types/components/WswgJsonEditor/WswgJsonEditor.vue.d.ts +40 -0
- package/dist/types/index.d.ts +7 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -0
- package/dist/types/util/fieldConfig.d.ts +82 -0
- package/dist/types/util/helpers.d.ts +28 -0
- package/dist/types/util/registry.d.ts +21 -0
- package/dist/types/util/validation.d.ts +15 -0
- package/dist/vue-wswg-editor.es.js +3377 -0
- package/package.json +85 -0
- package/src/assets/images/empty-state.jpg +0 -0
- package/src/assets/styles/_mixins.scss +73 -0
- package/src/assets/styles/main.css +3 -0
- package/src/components/AddBlockItem/AddBlockItem.vue +50 -0
- package/src/components/BlockBrowser/BlockBrowser.vue +69 -0
- package/src/components/BlockComponent/BlockComponent.vue +186 -0
- package/src/components/BlockEditorFieldNode/BlockEditorFieldNode.vue +378 -0
- package/src/components/BlockEditorFields/BlockEditorFields.vue +91 -0
- package/src/components/BlockMarginFieldNode/BlockMarginNode.vue +132 -0
- package/src/components/BlockRepeaterFieldNode/BlockRepeaterNode.vue +217 -0
- package/src/components/BrowserNavigation/BrowserNavigation.vue +27 -0
- package/src/components/EmptyState/EmptyState.vue +94 -0
- package/src/components/PageBlockList/PageBlockList.vue +103 -0
- package/src/components/PageBuilderSidebar/PageBuilderSidebar.vue +241 -0
- package/src/components/PageBuilderToolbar/PageBuilderToolbar.vue +63 -0
- package/src/components/PageRenderer/PageRenderer.vue +65 -0
- package/src/components/PageRenderer/blockModules-alternative.ts.example +9 -0
- package/src/components/PageRenderer/blockModules-manual.ts.example +19 -0
- package/src/components/PageRenderer/blockModules-runtime.ts.example +23 -0
- package/src/components/PageRenderer/blockModules.ts +3 -0
- package/src/components/PageSettings/PageSettings.vue +86 -0
- package/src/components/ResizeHandle/ResizeHandle.vue +105 -0
- package/src/components/WswgJsonEditor/WswgJsonEditor.test.ts +43 -0
- package/src/components/WswgJsonEditor/WswgJsonEditor.vue +391 -0
- package/src/index.ts +15 -0
- package/src/shims.d.ts +72 -0
- package/src/style.css +3 -0
- package/src/types/Block.d.ts +19 -0
- package/src/types/Layout.d.ts +9 -0
- package/src/util/fieldConfig.ts +173 -0
- package/src/util/helpers.ts +176 -0
- package/src/util/registry.ts +149 -0
- 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 @@
|
|
|
1
|
+
export {};
|
|
@@ -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>>;
|