@g1cloud/page-builder-editor 1.0.0-alpha.10 → 1.0.0-alpha.101

package/css/page-builder-editor.css

@@ -0,0 +1,391 @@
+@charset "UTF-8";
+.pb-editor {
+  --color-canvas-frame-bg: #aaa;
+  height: 100%;
+}
+.pb-editor .pb-menu {
+  width: 100%;
+}
+.pb-editor .pb-menu .pb-toolbar {
+  margin: 0 -8px;
+}
+.pb-editor .pb-menu .pb-toolbar .pb-tool-button-group::after {
+  content: "";
+  margin: 0 8px;
+  height: 80%;
+  border-right: 1px solid var(--border-light);
+  align-self: center;
+}
+.pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button {
+  padding: 2px;
+  margin: 0 2px;
+}
+.pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .bs-clickable, .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .pb-part-add-modal .group .part, .pb-part-add-modal .group .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .part {
+  user-select: none;
+  cursor: pointer;
+}
+.pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .bs-clickable:hover, .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .pb-part-add-modal .group .part:hover, .pb-part-add-modal .group .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .part:hover {
+  filter: opacity(75%);
+}
+.pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .bs-clickable:active, .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .pb-part-add-modal .group .part:active, .pb-part-add-modal .group .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .part:active {
+  filter: opacity(50%);
+}
+.pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .bs-clickable.disabled, .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .pb-part-add-modal .group .disabled.part, .pb-part-add-modal .group .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .disabled.part {
+  filter: opacity(40%);
+}
+.pb-editor .pb-editor-body {
+  padding: 8px 0 0;
+  height: 1px;
+}
+.pb-editor .pb-editor-body .pb-canvas-wrapper {
+  background-color: var(--color-canvas-frame-bg);
+  border-top: 1px solid var(--color-canvas-frame-bg);
+  border-bottom: 1px solid var(--color-canvas-frame-bg);
+  flex-grow: 1;
+  min-width: 0;
+  width: 0;
+  height: 100%;
+  padding: 20px;
+  outline: none;
+  overflow: auto;
+}
+.pb-editor .pb-editor-body .pb-canvas {
+  display: flex;
+  flex-direction: row;
+  transform-origin: top left;
+  width: fit-content;
+  height: 100%;
+  margin: 0;
+}
+.pb-editor .pb-editor-body .pb-page-frame iframe.page-frame {
+  border: 0;
+}
+.pb-editor .pb-editor-body .bs-tab-sheet .tab-bar .tabs {
+  padding-top: 0;
+}
+.pb-editor .pb-editor-body .bs-horizontal-layout-resizer {
+  transform: scaleX(6);
+}
+.pb-editor .pb-editor-body .bs-horizontal-layout-resizer .resize-line {
+  background-color: var(--color-canvas-frame-bg);
+}
+.pb-editor .pb-editor-body .pb-navigator {
+  position: relative;
+  height: 1px;
+  overflow-y: auto;
+  padding: 8px 0;
+  flex-grow: 1;
+  border: 1px solid var(--border-light);
+  border-right: 0 none;
+}
+.pb-editor .pb-editor-body .pb-navigator:focus {
+  outline: none;
+}
+.pb-editor .pb-editor-body .pb-sidebar {
+  width: 300px;
+  overflow: auto;
+  border: 1px solid var(--border-light);
+  border-left: 0 none;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties {
+  padding: 0;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-title {
+  padding: 8px;
+  background-color: var(--blue-bg);
+  color: var(--blue);
+  font-weight: 600;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group:not(:empty) {
+  padding: 8px;
+  border-bottom: 1px solid var(--border-light);
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-title > label {
+  padding: 4px 0;
+  font-size: 90%;
+  font-weight: 600;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor {
+  padding: 4px 0;
+  font-size: 0.9em;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor .title {
+  padding: 0 0 8px 0;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor .title label {
+  min-width: 6em;
+  max-width: 6em;
+  padding-right: 0.5em;
+  font-weight: bold;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor .sub-title label {
+  min-width: 6em;
+  max-width: 6em;
+  padding-right: 0.5em;
+  font-weight: 400;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor {
+  padding: 4px 0;
+  font-size: 0.9em;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor > .title {
+  padding: 0 0 8px 0;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor > .title > label {
+  min-width: 6em;
+  max-width: 6em;
+  padding-right: 0.5em;
+  font-weight: 600;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor:nth-child(n+2) {
+  margin-top: 4px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-color .color {
+  width: 50%;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-image button.select-button {
+  color: var(--white);
+  border: none;
+  padding: 4px 12px;
+  cursor: pointer;
+  line-height: 1;
+  width: 120px;
+  height: 26px;
+  background-color: var(--primary);
+  border-radius: 2px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-image .input-area {
+  height: 24px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-product button {
+  color: var(--white);
+  border: none;
+  padding: 4px 12px;
+  cursor: pointer;
+  line-height: 1;
+  width: 200px;
+  height: 26px;
+  background-color: var(--primary);
+  border-radius: 2px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-product .input-area {
+  height: 24px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-select .bs-select {
+  display: block;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-select .input-area {
+  height: 24px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .bs-text-input {
+  display: block;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .input-area {
+  height: 24px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .bs-text-input {
+  display: block;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .input-area {
+  height: 24px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-html button {
+  color: var(--white);
+  border: none;
+  padding: 4px 12px;
+  cursor: pointer;
+  line-height: 1;
+  width: 100px;
+  height: 26px;
+  background-color: var(--primary);
+  border-radius: 2px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-html .input-area {
+  height: 24px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .color {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .color label {
+  display: inline-block;
+  width: 80px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .color .bs-text-input {
+  flex-grow: 0;
+  width: 104px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image label {
+  display: inline-block;
+  width: 80px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image .bs-button.select-button {
+  width: 132px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image .url {
+  word-break: break-word !important;
+  word-wrap: break-word !important;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-border .color {
+  width: 50%;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-border .color .bs-text-input {
+  flex-grow: 1;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-border .corner-icon {
+  width: 1.1em;
+  height: 1.1em;
+  fill: #000;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-media button.select-button {
+  color: var(--white);
+  border: none;
+  padding: 4px 12px;
+  cursor: pointer;
+  line-height: 1;
+  width: 120px;
+  height: 26px;
+  background-color: var(--primary);
+  border-radius: 2px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-media .input-area {
+  height: 24px;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-media .url {
+  word-break: break-word !important;
+  word-wrap: break-word !important;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part .title {
+  font-weight: 600;
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part button {
+  color: var(--white);
+  border: none;
+  padding: 0 4px;
+  cursor: pointer;
+  line-height: 1;
+  height: 24px;
+  background-color: var(--primary);
+}
+.pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part .input-area {
+  height: 24px;
+}
+.pb-editor .pb-editor-body .pb-color-picker {
+  display: inline-flex;
+  position: relative;
+}
+.pb-editor .pb-editor-body .pb-color-picker .buttons {
+  display: flex;
+  padding: 0;
+}
+.pb-editor .pb-editor-body .pb-color-picker .buttons button {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.pb-editor .pb-editor-body .pb-color-picker .buttons button.none {
+  position: relative;
+  overflow: hidden;
+}
+.pb-editor .pb-editor-body .pb-color-picker .buttons button.none::after {
+  content: " ";
+  display: inline-block;
+  width: 100px;
+  height: 1px;
+  background: var(--red);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+.pb-editor .pb-editor-body .pb-color-picker .buttons button.picker-button {
+  border: 1px solid var(--border);
+}
+.pb-editor .pb-editor-body .pb-color-picker .buttons button i {
+  font-size: 1.4rem;
+}
+.pb-editor .pb-editor-body .pb-color-picker .sketch-wrap {
+  width: 220px;
+  position: absolute;
+  z-index: 10;
+  left: -12px;
+  top: 24px;
+  white-space: break-spaces;
+  text-align: left;
+}
+
+.pb-part-add-modal .section-title {
+  font-weight: 700;
+}
+.pb-part-add-modal .group .part {
+  border: 1px solid var(--border-light);
+  border-radius: 4px;
+  padding: 8px 16px;
+  cursor: pointer;
+}
+
+.pb-html-editor-modal .preview {
+  width: 50%;
+}
+.pb-html-editor-modal .preview .content {
+  border: solid 1px var(--border);
+}
+.pb-html-editor-modal .preview .content iframe {
+  width: 100%;
+  height: 100%;
+}
+.pb-html-editor-modal .editor {
+  width: 50%;
+}
+.pb-html-editor-modal .editor .bs-tab-sheet > :nth-child(2) {
+  height: 0;
+}
+.pb-html-editor-modal .editor .tags {
+  height: 60%;
+}
+.pb-html-editor-modal .editor .style {
+  height: 40%;
+}
+.pb-html-editor-modal .editor .bs-code-editor {
+  height: 100%;
+}
+.pb-html-editor-modal .buttons {
+  text-align: center;
+}
+.pb-html-editor-modal .buttons button {
+  color: var(--white);
+  border: none;
+  padding: 4px 12px;
+  cursor: pointer;
+  line-height: 1;
+  height: 28px;
+  background-color: var(--primary);
+}
+
+.pb-youtube-modal .flex-grow-1.overflow-auto {
+  overflow: hidden !important;
+}
+.pb-youtube-modal button {
+  color: var(--white);
+  border: none;
+  padding: 4px 12px;
+  cursor: pointer;
+  line-height: 1;
+  height: 28px;
+  background-color: var(--primary);
+}

package/css/page-builder-viewer.css

@@ -0,0 +1,200 @@
+.pb-page {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  overflow-x: hidden;
+}
+.pb-page .pb-section {
+  display: flex;
+  position: relative;
+  width: 100%;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.pb-page .pb-section .pb-block {
+  display: flex;
+  min-width: 1px;
+  position: relative;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100%;
+}
+.pb-page .pb-section .pb-block .pb-widget {
+  position: relative;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100%;
+}
+.pb-page .pb-section .pb-block .pb-widget .children {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.pb-page .pb-section .pb-block .pb-text-widget {
+  width: 100%;
+  height: fit-content;
+}
+.pb-page .pb-section .pb-block .pb-text-widget .text {
+  display: block;
+  color: #333;
+}
+.pb-page .pb-section .pb-block .pb-text-widget .placeholder {
+  padding: 4px 0;
+  font-size: 18px;
+  text-align: center;
+  color: #999;
+}
+.pb-page .pb-section .pb-block .pb-media-widget {
+  width: 100%;
+}
+.pb-page .pb-section .pb-block .pb-media-widget .image-container {
+  margin: 0;
+  padding: 0;
+}
+.pb-page .pb-section .pb-block .pb-media-widget .image {
+  width: 100%;
+}
+.pb-page .pb-section .pb-block .pb-media-widget .video {
+  width: 100%;
+}
+.pb-page .pb-section .pb-block .pb-media-widget .placeholder {
+  height: 100px;
+  background-color: #eee;
+  text-align: center;
+}
+.pb-page .pb-section .pb-block .pb-media-widget .placeholder span {
+  font-size: 40px;
+  color: #999;
+  line-height: 100px;
+  vertical-align: middle;
+}
+.pb-page .pb-section .pb-block .pb-html-widget {
+  width: 100%;
+  height: fit-content;
+}
+.pb-page .pb-section .pb-block .pb-html-widget .placeholder {
+  padding: 4px 0;
+  font-size: 18px;
+  text-align: center;
+  color: #999;
+}
+.pb-page .pb-section .pb-block .pb-iframe-widget {
+  width: 100%;
+  height: fit-content;
+}
+.pb-page .pb-section .pb-block .pb-iframe-widget .placeholder {
+  padding: 4px 0;
+  font-size: 18px;
+  text-align: center;
+  color: #999;
+}
+.pb-page .pb-section .pb-block .pb-youtube-widget {
+  width: 100%;
+}
+.pb-page .pb-section .pb-block .pb-youtube-widget .youtube {
+  width: 100%;
+  height: 100%;
+}
+.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder {
+  height: 100px;
+  background-color: #eee;
+  text-align: center;
+}
+.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder span {
+  font-size: 40px;
+  color: #999;
+  line-height: 100px;
+  vertical-align: middle;
+}
+.pb-page .pb-section .pb-block .pb-container-widget {
+  width: 100%;
+}
+.pb-page .pb-section .pb-block .pb-container-widget .placeholder {
+  height: 100px;
+  background-color: #eee;
+  text-align: center;
+}
+.pb-page .pb-section .pb-block .pb-container-widget .placeholder span {
+  font-size: 40px;
+  color: #999;
+  line-height: 100px;
+  vertical-align: middle;
+}
+.pb-page .pb-section .pb-block .pb-product-list-widget {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {
+  width: 25%;
+}
+.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .product {
+  width: 95%;
+  margin: 0 auto;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper img {
+  width: 100%;
+}
+.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .name {
+  margin-top: 8px;
+  font-size: 14px;
+}
+.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .price {
+  margin-top: 8px;
+  font-size: 14px;
+  font-weight: bold;
+}
+.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .empty {
+  height: 200px;
+  background-color: #eee;
+  text-align: center;
+}
+.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .empty span {
+  font-size: 40px;
+  color: #999;
+  line-height: 200px;
+  vertical-align: middle;
+}
+@media (max-width: 768px) {
+  .pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {
+    width: 50%;
+  }
+}
+.pb-page .pb-section .pb-block .mobile .pb-product-list-widget .product-wrapper {
+  width: 50%;
+}
+.pb-page .pb-section .pb-block .pb-login-widget {
+  height: 200px;
+  text-align: center;
+}
+.pb-page .pb-section .pb-block .pb-login-widget h3 {
+  padding: 0;
+  margin: 0;
+  font-size: 32px;
+  font-weight: bold;
+  color: #ccc;
+  line-height: 200px;
+  vertical-align: middle;
+}
+.pb-page * {
+  box-sizing: border-box;
+}
+
+.pb-viewer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  overflow-y: auto;
+}

package/dist/PageBuilderEditor.vue.d.ts

@@ -1,18 +1,29 @@
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+import { PageBuilderToolbarPlugin } from './model/plugin.ts';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     instanceId?: string | undefined;
     title?: string | undefined;
-    editMode?: string | undefined;
-    pageContent?: any;
-    language?: string | undefined;
-}>, {
-    getLocalDesignPartContent: () => any[] | undefined;
-}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    pageContent?: string | undefined;
+    locales?: string[] | undefined;
+    locale?: string | undefined;
+    toolbarPlugin?: PageBuilderToolbarPlugin | undefined;
+    plugin?: unknown;
+}>>, {
+    getPageContent: () => string;
+    pastePageContent: (contentJson: string) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update-model": (modified: boolean) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     instanceId?: string | undefined;
     title?: string | undefined;
-    editMode?: string | undefined;
-    pageContent?: any;
-    language?: string | undefined;
-}>>>, {}, {}>;
+    pageContent?: string | undefined;
+    locales?: string[] | undefined;
+    locale?: string | undefined;
+    toolbarPlugin?: PageBuilderToolbarPlugin | undefined;
+    plugin?: unknown;
+}>>> & Readonly<{
+    "onUpdate-model"?: ((modified: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {