@g1cloud/page-builder-editor 1.0.0-alpha.1

package/dist/style.css

@@ -0,0 +1,173 @@
+.pb-page {
+  margin: 0 auto;
+  margin-top: 20px;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.pb-page .pb-section {
+  position: relative;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-color: #fff;
+}
+.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 {
+  color: #333;
+}
+.pb-page .pb-section .pb-block .pb-text-widget.empty .text {
+  color: #999;
+}
+.pb-page .pb-section .pb-block .pb-image-widget {
+  width: 100%;
+}
+.pb-page .pb-section .pb-block .pb-image-widget .image {
+  width: 100%;
+}
+.pb-page .pb-section .pb-block .pb-image-widget .empty {
+  height: 100px;
+  background-color: #eee;
+  text-align: center;
+}
+.pb-page .pb-section .pb-block .pb-image-widget .empty 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 {
+  width: 95%;
+  margin: 0 auto;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.pb-page .pb-section .pb-block .pb-product-list-widget img {
+  width: 100%;
+}
+.pb-page .pb-section .pb-block .pb-product-list-widget .name {
+  margin-top: 8px;
+  font-size: 14px;
+}
+.pb-page .pb-section .pb-block .pb-product-list-widget .price {
+  margin-top: 8px;
+  font-size: 14px;
+  font-weight: bold;
+}
+.pb-page .pb-section .pb-block .pb-product-list-widget .empty {
+  height: 200px;
+  background-color: #eee;
+  text-align: center;
+}
+.pb-page .pb-section .pb-block .pb-product-list-widget .empty span {
+  font-size: 40px;
+  color: #999;
+  line-height: 200px;
+  vertical-align: middle;
+}
+.pb-page .pb-section .pb-block .pb-page .mobile .pb-product-list-widget .product-wrapper {
+  width: 50%;
+}
+.pb-page .pb-section .pb-block .pb-page .pc .pb-product-list-widget .product-wrapper {
+  width: 25%;
+}
+.pb-page .pb-section .pb-block .pb-login-widget {
+  height: 200px;
+  text-align: center;
+}
+.pb-page .pb-section .pb-block .pb-login-widget h3 {
+  font-size: 32px;
+  font-weight: bold;
+  color: #ccc;
+  line-height: 200px;
+  vertical-align: middle;
+}
+.pb-page .pb-section .pb-block .pb-editor {
+  outline: 1px dashed #ccc;
+}
+.pb-page .pb-section .pb-block:hover:not(:has(.pb-widget:hover)) {
+  background-color: #f0f0f0;
+}
+.pb-page .pb-section .pb-block.selected {
+  outline: 1px solid #8e44ad;
+  outline-offset: 1px;
+  z-index: 999;
+}
+.pb-page .pb-section .pb-editor {
+  outline: 1px dashed #ccc;
+}
+.pb-page .pb-section:hover:not(:has(.pb-block:hover)) {
+  background-color: #f0f0f0;
+}
+.pb-page .pb-section.selected {
+  outline: 1px solid #e67e22;
+  outline-offset: 1px;
+  z-index: 999;
+}
+.pb-page .pb-section.pb-section-static {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+}
+.pb-page .pb-section.pb-section-static:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.pb-page .pb-section-static .pb-widget {
+  outline: none;
+}
+.pb-page .pb-page-content.selected {
+  outline: 2px solid #4998f8;
+  outline-offset: 5px;
+}
+.pb-page * {
+  box-sizing: border-box;
+}
+.pb-viewer {
+  width: 100%;
+}
+.pb-editor .pb-editor-body {
+  height: 100%;
+}
+.pb-editor .pb-editor-body .tab-bar {
+  padding: 0;
+}

package/dist/utils/mouse-tracker.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'vue';
+
+type MouseMoveCallback = (event: MouseEvent) => void;
+export declare class MouseTracker {
+    iframe: Ref<HTMLIFrameElement | undefined>;
+    constructor(iframe: Ref<HTMLIFrameElement | undefined>);
+    capture(callback: MouseMoveCallback): void;
+}
+export declare const provideMouseTracker: (iframe: Ref<HTMLIFrameElement | undefined>) => void;
+export declare const useMouseTracker: () => MouseTracker;
+export {};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@g1cloud/page-builder-editor",
+  "private": false,
+  "version": "1.0.0-alpha.1",
+  "engins": {
+    "node": ">= 20.0.0"
+  },
+  "files": [
+    "dist",
+    "css"
+  ],
+  "type": "module",
+  "module": "dist/page-builder-editor.js",
+  "main": "dist/page-builder-editor.js",
+  "types": "dist/index.d.ts",
+  "author": "zag@g1project.net",
+  "license": "LicenseRef-LICENSE",
+  "peerDependencies": {
+    "@g1cloud/bluesea": "5.0.0-alpha.38"
+  },
+  "dependencies": {
+    "@ckpack/vue-color": "^1.5.0",
+    "dayjs": "^1.11.11",
+    "mitt": "^3.0.1",
+    "short-unique-id": "^5.0.3",
+    "vue": "^3.4.26",
+    "vue-router": "^4.3.2",
+    "vue3-click-away": "^1.2.4",
+    "yjs": "^13.6.14",
+    "@g1cloud/page-builder-viewer": "1.0.0-alpha.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.7",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "jsdom": "^24.0.0",
+    "sass": "^1.75.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vite-plugin-dts": "^3.9.0",
+    "vitest": "^1.5.0",
+    "vitest-canvas-mock": "^0.3.3",
+    "vue-tsc": "^1.8.27"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  }
+}