feat: 更新Vue/Element版本

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["eamodio.gitlens", "esbenp.prettier-vscode"]
+}

.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.tabSize": 2,
+  "prettier.printWidth": 120,
+  "prettier.tabWidth": 2,
+  "prettier.useTabs": false,
+  "prettier.semi": true,
+  "prettier.singleQuote": true,
+  "prettier.quoteProps": "as-needed",
+  "prettier.jsxSingleQuote": false,
+  "prettier.trailingComma": "all",
+  "prettier.bracketSpacing": true,
+  "prettier.arrowParens": "always",
+  "prettier.requirePragma": false,
+  "prettier.insertPragma": false,
+  "prettier.proseWrap": "preserve",
+  "prettier.htmlWhitespaceSensitivity": "css",
+  "prettier.vueIndentScriptAndStyle": false,
+  "prettier.endOfLine": "lf",
+  "prettier.embeddedLanguageFormatting": "auto",
+  "prettier.singleAttributePerLine": true
+}

package.json

@@ -22,7 +22,7 @@
     "debugParser": "node ./src/test/parserJsCode.js"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^0.2.6",
+    "@element-plus/icons-vue": "^2.3.1",
     "@vitejs/plugin-vue": "^1.10.0",
     "@vue/compiler-sfc": "^3.2.22",
     "ant-design-vue": "^3.0.0-alpha.14",
@@ -33,7 +33,7 @@
     "css": "^3.0.0",
     "css-scoped": "^1.0.0",
     "ejs": "^3.1.6",
-    "element-plus": "^1.2.0-beta.3",
+    "element-plus": "^2.4.3",
     "escodegen": "^2.0.0",
     "espree": "^7.3.0",
     "eventemitter3": "^4.0.7",
@@ -47,7 +47,7 @@
     "split.js": "^1.6.2",
     "vant": "^3.3.7",
     "vite": "^2.6.14",
-    "vue": "^3.2.22",
+    "vue": "^3.3.10",
     "vue-github-button": "^1.3.0",
     "vue-template-compiler": "^2.6.14",
     "vuedraggable": "^4.1.0",

src/components-v2/VCC.vue

@@ -116,10 +116,10 @@ export default {
     currentEditRawInfo(newValue) {
       const attributeContainter = document.querySelector(".attribute");
       if (newValue) {
-        attributeContainter.style = "right:10px; display:block;";
+        attributeContainter.style = "right:10px;";
         this.$refs['attributeInput'].onShow();
       } else {
-        attributeContainter.style = "right: calc(-300px - 20px); display:none;";
+        attributeContainter.style = "right: var(--init-right)";
         this.$refs['attributeInput'].onHide();
       }
     },
@@ -309,7 +309,7 @@ export default {
     },
 
     help() {
-      window.open('/doc')
+      window.open('https://vcc3-docs.surge.sh/#/')
     }
   },
   fillter: {},
@@ -339,15 +339,19 @@ export default {
 }
 
 .attribute {
-  width: 300px;
+
+  --init-right:calc(-500px - 20px);
+  width: 400px;
   border-radius: 10px;
   margin-left: 10px;
   position: absolute;
-  right: calc(-300px - 20px);
+  right:var(--init-right) ;
   top: 10px;
   background: white;
   max-height: calc(80% - 20px);
-  transition: right 0.5s;
+  transition-property: right;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
   overflow: scroll;
   z-index: 2;
 }
@@ -388,6 +392,7 @@ export default {
   margin-left: 10px;
   border: 0px;
   box-sizing: border-box;
+  cursor: pointer;
 }
 
 .icon-js {

src/components/AttributeInput.vue

@@ -10,10 +10,10 @@
     <div style="margin-top: 20px;">
       <div name="1" v-show="!editMode">
         <div>
-          <div class="item" v-for="(item, index) in localAttributes" :key="index">
+          <div class="item" v-for="(item, index) in localAttributes" :key="item.key">
-            <el-input v-model="item.key" :placeholder="'key' + index" class="half-width"></el-input>
+            <el-input v-model="item.key" :placeholder="'key' + index" class="half-width" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
             <div class="split">:</div>
-            <el-input v-model="item.value" :placeholder="'value' + index" class="half-width" style="flex-grow: 3;"></el-input>
+            <el-input v-model="item.value" type="textarea" :placeholder="'value' + index" class="half-width" style="flex-grow: 4;" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
             <el-icon @click="deleteItem(index)" style="margin-left: 5px;"><l-minus /></el-icon>
           </div>
 
@@ -270,8 +270,7 @@ export default {
 }
 
 .half-width {
-  width: 0%;
+  width: 100px;
-  flex-grow: 2;
 }
 
 .center {

src/components/Code.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="代码预览" v-model="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose" :center=true>
+  <el-dialog title="代码预览" v-model="dialogVisible" width="70%" top="10vh" :before-close="handleClose" :center=true>
     <!-- 这里加v-if是因为CodeEditor内部不支持watch数据监测 -->
     <CodeEditor v-if="codeDialogVisible" style="max-height: 55vh;" ref="codeEditor" :initCode="outputCode"
       mode="text/html"></CodeEditor>
@@ -144,6 +144,14 @@ export default {
       return this.isVueMode ? this.prettyCode : this.singleIndex;
     },
 
+    dialogVisible:{
+      get(){
+        return this.codeDialogVisible;
+      },
+      set (){ 
+        this.$emit('update:codeDialogVisible', false)
+      }
+    },
 
     prettyCode() {
       try {

src/components/JSCodeEditorDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="JS逻辑编辑" v-model="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose" :center=true>
+  <el-dialog title="JS逻辑编辑"  v-model="dialogVisible" width="70%" top="10vh" :before-close="handleClose" :center=true>
     <CodeEditor style="max-height: 65vh;" ref="codeEditor" :initCode="code" mode="text/javascript"></CodeEditor>
 
     <div style="padding: 10px; display:flex;justify-content: flex-end;align-items: center;">
@@ -9,7 +9,7 @@
       </div>
 
       <div style="margin-left: 5px;">
-        <el-link href="https://vcc.sahadev.tech/doc/#/improve/logic?id=%e9%80%bb%e8%be%91%e6%a8%a1%e6%9d%bf"
+        <el-link href="https://vcc3-docs.surge.sh/#/improve/logic?id=%e9%80%bb%e8%be%91%e6%a8%a1%e6%9d%bf"
           target="_blank">
           <el-icon>
             <question-filled />
@@ -114,6 +114,14 @@ export default {
   watch: {
   },
   computed: {
+    dialogVisible:{
+      get(){
+        return this.codeDialogVisible;
+      },
+      set (){ 
+        this.$emit('update:codeDialogVisible', false)
+      }
+    }
   },
   fillter: {},
 };

src/components/RawComponents.vue

@@ -139,7 +139,7 @@ export default {
 
     handleCommand(command) {
       if (command === 'help') {
-        window.open('/doc')
+        window.open('https://vcc3-docs.surge.sh/#/')
       } else if (command === 'chat') {
         window.open('https://gitter.im/low_code_generator/community?utm_source=share-link&utm_medium=link&utm_campaign=share-link')
       } else if (command == 'lcg') {

src/components/VueCodeParseDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="Vue二次编辑" v-model="vueDialogVisible" width="70%" top="10vh" :before-close="handleClose"
+  <el-dialog title="Vue二次编辑" v-model="dialogVisible" width="70%" top="10vh" :before-close="handleClose"
     :center=true>
     <CodeEditor style="max-height: 65vh;" ref="codeEditor" :initCode="code" mode="text/html"></CodeEditor>
 
@@ -45,7 +45,7 @@ export default {
   destroyed() { },
   methods: {
     handleClose() {
-      this.$emit("update:vueDialogVisible", false);
+      this.dialogVisible = false;
     },
     async compile() {
       try {
@@ -81,6 +81,17 @@ export default {
   watch: {
   },
   computed: {
+
+
+    dialogVisible:{
+      get(){
+        return this.vueDialogVisible;
+      },
+      set (){ 
+        this.$emit('update:vueDialogVisible', false)
+      }
+    },
+
   },
   fillter: {},
 };