Merge branch 'develop' of github.com:opentiny/tiny-engine into fix/ca…

…nvas-row-cutter-position

packages/blockToWebComponentTemplate/package.json

@@ -32,9 +32,9 @@
   "dependencies": {
     "@opentiny/tiny-engine-i18n-host": "workspace:*",
     "@opentiny/tiny-engine-webcomponent-core": "workspace:*",
-    "@opentiny/vue": "~3.11.0",
-    "@opentiny/vue-icon": "~3.11.0",
-    "@opentiny/vue-theme": "~3.11.0",
+    "@opentiny/vue": "~3.14.0",
+    "@opentiny/vue-icon": "~3.14.0",
+    "@opentiny/vue-theme": "~3.14.0",
     "@vue/shared": "^3.3.11",
     "vue": "^3.4.15",
     "vue-i18n": "^9.9.0"

packages/blockToWebComponentTemplate/vite.config.js

@@ -43,7 +43,7 @@ export default defineConfig(({ command, mode }) => {
   }
 
   const vuePluginConfig = {}
-  const styleLinks = ['https://npm.onmicrosoft.cn/@opentiny/vue-theme@3.11/index.css']
+  const styleLinks = ['https://npm.onmicrosoft.cn/@opentiny/vue-theme@3.14/index.css']
 
   config.publicDir = false
 

packages/builtinComponent/package.json

@@ -20,12 +20,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@opentiny/vue": "~3.10.0",
     "vite-plugin-css-injected-by-js": "^3.3.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "vite": "^4.5.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.15"
   }
 }

packages/canvas/package.json

@@ -32,9 +32,6 @@
     "@opentiny/tiny-engine-i18n-host": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
     "@opentiny/tiny-engine-webcomponent-core": "workspace:*",
-    "@opentiny/vue": "~3.10.0",
-    "@opentiny/vue-icon": "~3.10.0",
-    "@opentiny/vue-renderless": "~3.10.0",
     "@vue/babel-plugin-jsx": "1.1.1",
     "@vue/shared": "^3.3.4",
     "@vueuse/core": "^9.6.0"
@@ -46,6 +43,9 @@
     "vite": "^4.3.7"
   },
   "peerDependencies": {
+    "@opentiny/vue": "^3.14.0",
+    "@opentiny/vue-icon": "^3.14.0",
+    "@opentiny/vue-renderless": "^3.14.0",
     "vue": "^3.4.15",
     "vue-i18n": "^9.9.0"
   }

packages/canvas/src/components/container/CanvasContainer.vue

@@ -6,7 +6,7 @@
     :windowGetClickEventTarget="target"
     :resize="canvasState.type === 'absolute'"
     @select-slot="selectSlot"
-    @setting="settingModle"
+    @setting="settingModel"
   ></canvas-action>
   <canvas-divider :selectState="selectState"></canvas-divider>
   <canvas-resize-border :iframe="iframe"></canvas-resize-border>
@@ -54,7 +54,8 @@ import {
   initCanvas,
   clearLineState,
   querySelectById,
-  getCurrent
+  getCurrent,
+  canvasApi
 } from './container'
 
 export default {
@@ -70,7 +71,7 @@ export default {
     const insertPanel = ref(null)
     const insertPosition = ref(false)
     const loading = computed(() => useCanvas().isLoading())
-    let showSettingModle = ref(false)
+    let showSettingModel = ref(false)
     let target = ref(null)
 
     const setCurrentNode = async (event) => {
@@ -104,6 +105,8 @@ export default {
       }
     }
 
+    useCanvas().initCanvasApi(canvasApi)
+
     const beforeCanvasReady = () => {
       if (iframe.value) {
         const win = iframe.value.contentWindow
@@ -118,7 +121,6 @@ export default {
         iframeMonitoring()
 
         initCanvas({ emit, renderer: detail, iframe: iframe.value, controller: props.controller })
-        useCanvas().renderer.value = { ...detail, ...window.canvasApi }
 
         const doc = iframe.value.contentDocument
         const win = iframe.value.contentWindow
@@ -178,8 +180,8 @@ export default {
       }
     }
     // 设置弹窗
-    const settingModle = () => {
-      showSettingModle.value = true
+    const settingModel = () => {
+      showSettingModel.value = true
     }
 
     const updateI18n = (message) => {
@@ -236,9 +238,9 @@ export default {
       canvasState,
       insertComponent,
       insertPanel,
-      settingModle,
+      settingModel,
       target,
-      showSettingModle,
+      showSettingModel,
       insertPosition,
       loading
     }

packages/canvas/src/components/container/CanvasFooter.vue

@@ -17,7 +17,7 @@ export default {
   props: {
     data: {
       type: Array,
-      default: []
+      default: () => []
     }
   },
   emits: ['click']
@@ -44,37 +44,23 @@ export default {
       li {
         width: unset !important;
         background: var(--ti-lowcode-breadcrumb-bg);
-        a {
+        .label {
           padding: 0 3px 0 16px;
           border-top: 0;
           color: var(--ti-lowcode-breadcrumb-color);
           transition: 0.3s;
-          &::after {
-            display: inline-block;
-            right: -6px;
-            border-left: 6px solid var(--ti-lowcode-breadcrumb-bg);
-            transition: 0.3s;
-          }
-          &::before {
-            display: inline-block;
-            right: -7px;
-            left: unset;
-            border-left: 6px solid var(--ti-lowcode-breadcrumb-icon-color);
-            transition: 0.3s;
-            z-index: 1;
-          }
           &:hover {
-            background: var(--ti-lowcode-breadcrumb-hover-bg);
+            cursor: pointer;
             &::after {
-              border-left-color: var(--ti-lowcode-breadcrumb-hover-bg);
+              border-left-color: var(--ti-steps-advanced-li-hover-bg-color);
             }
           }
         }
-        &:last-child a {
+        &:last-child .label {
           border-right: 0px solid var(--ti-lowcode-breadcrumb-color);
           border-radius: 0;
         }
-        &:first-child a {
+        &:first-child .label {
           border-right: 0px solid var(--ti-lowcode-breadcrumb-color);
           border-radius: 0;
           border-left: unset;

packages/canvas/src/components/container/container.js

@@ -20,14 +20,16 @@ import {
   NODE_LOOP
 } from '../common'
 import { useCanvas, useLayout, useResource, useTranslate } from '@opentiny/tiny-engine-controller'
+import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
+import Builtin from '../builtin/builtin.json'
+
 export const POSITION = Object.freeze({
   TOP: 'top',
   BOTTOM: 'bottom',
   LEFT: 'left',
   RIGHT: 'right',
   IN: 'in'
 })
-import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
 
 const initialDragState = {
   keydown: false,
@@ -846,6 +848,49 @@ export const canvasDispatch = (name, data, doc = getDocument()) => {
   doc.dispatchEvent(new CustomEvent(name, data))
 }
 
+export const canvasApi = {
+  dragStart,
+  updateRect,
+  getContext,
+  getNodePath,
+  dragMove,
+  setLocales,
+  setState,
+  deleteState,
+  getRenderer,
+  clearSelect,
+  selectNode,
+  hoverNode,
+  insertNode,
+  removeNode,
+  addComponent,
+  setPageCss,
+  addScript,
+  addStyle,
+  getNode,
+  getCurrent,
+  setSchema,
+  setUtils,
+  updateUtils,
+  deleteUtils,
+  getSchema,
+  setI18n,
+  getCanvasType,
+  setCanvasType,
+  setProps,
+  setGlobalState,
+  getGlobalState,
+  getDocument,
+  canvasDispatch,
+  Builtin,
+  setDataSourceMap: (...args) => {
+    return canvasState.renderer.setDataSourceMap(...args)
+  },
+  getDataSourceMap: (...args) => {
+    return canvasState.renderer.getDataSourceMap(...args)
+  }
+}
+
 export const initCanvas = ({ renderer, iframe, emit, controller }) => {
   const currentSchema = getSchema()
 

packages/canvas/src/components/render/RenderMain.js

@@ -18,8 +18,6 @@ import { generateFunction } from '@opentiny/tiny-engine-controller/utils'
 import renderer, { parseData, setConfigure, setController, globalNotify, isStateAccessor } from './render'
 import { getNode as getNodeById, clearNodes, getRoot, setContext, getContext, setCondition, context } from './context'
 import CanvasEmpty from './CanvasEmpty.vue'
-import { getCurrent, setLocales, updateRect, addStyle, addScript, canvasDispatch } from '../container/container'
-import Builtin from '../builtin/builtin.json'
 
 const { BROADCAST_CHANNEL } = constants
 
@@ -426,17 +424,3 @@ export const api = {
   setDataSourceMap,
   setGlobalState
 }
-
-const canvasApi = {
-  getCurrent,
-  setLocales,
-  getNodeById: getNode,
-  updateRect,
-  addStyle,
-  addScript,
-  canvasDispatch
-}
-
-window.api = api
-window.canvasApi = canvasApi
-window.Builtin = Builtin

packages/canvas/src/components/render/render.js

@@ -598,6 +598,20 @@ const getLoopScope = ({ scope, index, item, loopArgs }) => {
   }
 }
 
+const injectPlaceHolder = (componentName, children) => {
+  const isEmptyArr = Array.isArray(children) && !children.length
+
+  if (configure[componentName]?.isContainer && (!children || isEmptyArr)) {
+    return [
+      {
+        componentName: 'CanvasPlaceholder'
+      }
+    ]
+  }
+
+  return children
+}
+
 const renderGroup = (children, scope, parent) => {
   return children.map?.((schema) => {
     const { componentName, children, loop, loopArgs, condition, id } = schema
@@ -617,30 +631,24 @@ const renderGroup = (children, scope, parent) => {
         return null
       }
 
+      const renderChildren = injectPlaceHolder(componentName, children)
+
       return h(
         getComponent(componentName),
         getBindProps(schema, mergeScope),
-        Array.isArray(children) ? renderSlot(children, mergeScope, schema) : parseData(children, mergeScope)
+        Array.isArray(renderChildren)
+          ? renderSlot(renderChildren, mergeScope, schema)
+          : parseData(renderChildren, mergeScope)
       )
     }
 
     return loopList?.length ? loopList.map(renderElement) : renderElement()
   })
 }
 
-const ContainerComponent = ['CanvasCol', 'CanvasRow', 'CanvasRowColContainer']
-
 const getChildren = (schema, mergeScope) => {
   const { componentName, children } = schema
-  let renderChildren = children
-
-  if (ContainerComponent.includes(componentName) && !renderChildren?.length) {
-    renderChildren = [
-      {
-        componentName: 'CanvasPlaceholder'
-      }
-    ]
-  }
+  const renderChildren = injectPlaceHolder(componentName, children)
 
   const component = getComponent(componentName)
   const isNative = typeof component === 'string'