tianheng-ui 0.0.56 → 0.0.57

package/package.json

@@ -1,28 +1,41 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.0.56",
+  "version": "0.0.57",
   "author": "shu lang <403732931@qq.com>",
   "license": "MIT",
   "private": false,
   "main": "./lib/tianheng-ui.js",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
+    "build:test": "cross-env NODE_ENV=test webpack --progress --hide-modules"
   },
   "dependencies": {
     "ace-builds": "^1.4.13",
     "axios": "^0.27.2",
+    "bpmn-js-sketchy": "^0.5.3",
+    "bpmn-js-task-resize": "^1.2.0",
+    "bpmn-js-token-simulation": "^0.10.0",
     "clipboard": "^2.0.11",
+    "diagram-js-minimap": "^2.0.4",
     "element-ui": "^2.15.6",
+    "highlight.js": "^10.5.0",
+    "min-dash": "^3.5.2",
+    "mini-css-extract-plugin": "^2.6.1",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
+    "vant": "^2.12.50",
     "viewerjs": "^1.10.5",
     "vue": "^2.5.11",
     "vue-i18n": "^5.0.3",
     "vue-router": "^3.5.3",
     "vue2-editor": "^2.10.3",
-    "vuedraggable": "^2.24.3"
+    "vuedraggable": "^2.24.3",
+    "vuex": "^3.6.2",
+    "x2js": "^3.4.2",
+    "xlsx": "^0.18.5",
+    "xml-js": "^1.6.11"
   },
   "browserslist": [
     "> 1%",
@@ -37,13 +50,20 @@
     "@babel/plugin-syntax-import-meta": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@types/ace": "0.0.42",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
+    "@vue/babel-preset-jsx": "^1.4.0",
     "babel-loader": "^8.2.5",
+    "babel-plugin-import": "^1.13.5",
+    "bpmn-js": "^8.8.3",
+    "bpmn-js-properties-panel": "^0.37.2",
+    "camunda-bpmn-moddle": "^4.4.1",
     "cross-env": "^5.0.5",
     "css-loader": "^0.28.7",
     "file-loader": "^1.1.4",
+    "html-webpack-plugin": "^4.5.0",
     "less": "^3.9.0",
     "less-loader": "^4.1.0",
-    "sass": "^1.26.5",
+    "sass": "^1.55.0",
     "sass-loader": "^7.3.1",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "vue-loader": "^14.2.4",

package/packages/Button/index.js

@@ -0,0 +1,8 @@
+import Button from "./index.vue";
+
+/* istanbul ignore next */
+Button.install = function(Vue) {
+  Vue.component(Button.name, Button);
+};
+
+export default Button;

package/packages/Button/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <button
+    class="th-button"
+    :class="selfClass"
+    :disabled="buttonDisabled || loading"
+    :autofocus="autofocus"
+    :type="nativeType"
+    @click="handleClick"
+  >
+    <i class="el-icon-loading" v-if="loading"></i>
+    <i :class="icon" v-if="icon && !loading"></i>
+    <span v-if="$slots.default"><slot></slot></span>
+  </button>
+</template>
+<script>
+export default {
+  name: "ThButton",
+
+  inject: {
+    thForm: { default: "" },
+    thFormItem: { default: "" }
+  },
+
+  props: {
+    type: {
+      type: String,
+      default: "default"
+    },
+    size: String,
+    icon: {
+      type: String,
+      default: ""
+    },
+    nativeType: {
+      type: String,
+      default: "button"
+    },
+    loading: Boolean,
+    disabled: Boolean,
+    plain: Boolean,
+    autofocus: Boolean,
+    round: Boolean,
+    circle: Boolean
+  },
+
+  computed: {
+    selfClass() {
+      let className = [
+        this.type ? "th-button-" + this.type : "",
+        this.buttonSize ? "th-button-size-" + this.buttonSize : "",
+        {
+          "is-disabled": this.buttonDisabled,
+          "is-loading": this.loading,
+          "is-plain": this.plain,
+          "is-round": this.round,
+          "is-circle": this.circle
+        }
+      ];
+      return className;
+    },
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize;
+    },
+    buttonSize() {
+      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+    },
+    buttonDisabled() {
+      return this.$options.propsData.hasOwnProperty("disabled")
+        ? this.disabled
+        : (this.elForm || {}).disabled;
+    }
+  },
+
+  methods: {
+    handleClick(evt) {
+      this.$emit("click", evt);
+    }
+  }
+};
+</script>

package/packages/Card/index.js

@@ -0,0 +1,8 @@
+import Card from "./index.vue";
+
+/* istanbul ignore next */
+Card.install = function(Vue) {
+  Vue.component(Card.name, Card);
+};
+
+export default Card;

package/packages/Card/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="th-card" :class="seflClass">
+    <template v-if="showHeader">
+      <slot v-if="$slots.header" name="header" />
+      <div v-else class="th-card-header">
+        <span v-if="title">{{ title }}</span>
+        <slot v-else name="title" />
+        <span v-if="label">{{ label }}</span>
+        <slot v-else name="label" />
+      </div>
+    </template>
+    <div class="th-card-body" :style="bodyStyle">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ThCard",
+  props: {
+    showHeader: { type: Boolean, default: true },
+    title: String,
+    label: String,
+    bodyStyle: String | Object,
+    shadow: { type: String, default: "always" }, // always / hover / never
+    border: Boolean
+  },
+  computed: {
+    seflClass() {
+      let className = `${this.shadow}-shadow`;
+      if (this.border) className = `${className} th-is_border`;
+      return className;
+    }
+  }
+};
+</script>

package/packages/Cell/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div :class="selfCellClass" :style="customStyle" @click="handleClick">
+    <i v-if="icon" class="th-cell-icon" :class="icon"></i>
+    <slot v-else name="icon" />
+    <div class="th-cell-content">
+      <div
+        v-if="title"
+        :class="['th-cell-title', titleClass]"
+        :style="titleStyle"
+      >
+        {{ title }}
+      </div>
+      <slot v-else name="title" />
+      <div v-if="label" :class="['th-cell-label', labelClass]">
+        {{ label }}
+      </div>
+      <slot v-else name="label" />
+    </div>
+    <div v-if="value" :class="['th-cell-value', valueClass]">
+      {{ value }}
+    </div>
+    <slot v-else />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ThCell",
+  props: {
+    title: Number | String,
+    value: Number | String,
+    label: String,
+    icon: String,
+
+    customStyle: String | Object,
+    titleStyle: String | Object,
+
+    customClass: String,
+    titleClass: String,
+    labelClass: String,
+    valueClass: String,
+
+    activeClass: String,
+    hoverClass: String,
+
+    center: Boolean,
+    hover: Boolean,
+    active: Boolean
+  },
+  computed: {
+    selfCellClass() {
+      let className = "th-cell";
+      if (this.customClass) className = `${className} ${this.customClass}`;
+      if (this.center) className = `${className} th-is_alignItemsCenter`;
+      if (this.active)
+        className = `${className} ${this.activeClass || "th-is_active"}`;
+      if (this.hover)
+        className = `${className} ${this.hoverClass || "th-is_hover"}`;
+      return className;
+    }
+  },
+  methods: {
+    handleClick(evt) {
+      this.$emit("click", evt);
+    }
+  }
+};
+</script>

package/packages/{codeEditor → CodeEditor}/index.vue

@@ -1,59 +1,48 @@
 <template>
-  <div class="wrap">
-    <div class="code-editor" :ref="generateId"></div>
-    <span v-if="withFullscreenBtn" title="全屏显示">
-      <svg-icon
-        class="icon-fullscreen"
-        icon-class="fullscreen"
-        :style="{ bottom: (withFooterBtns ? 47 : 10) + 'px' }"
-        @click.native="fullscreen"
-      ></svg-icon>
-    </span>
-
-    <el-dialog
-      ref="dialog"
-      custom-class="code-dialog"
-      :visible.sync="isVisible"
-      title="脚本编辑"
-      fullscreen
-      append-to-body
-      :show-footer="false"
-      @close="closeEditCode"
-    >
-      <code-editor v-model="dialogValue"></code-editor>
-    </el-dialog>
-  </div>
+  <div class="th-codeEditor" :style="selfStyle" :ref="generateId" />
 </template>
 <script>
 // 引入全局实例
 import ace from "ace-builds";
 // 主题风格，引入主题后还需要在 options 中指定主题才会生效
+import "ace-builds/src-min-noconflict/theme-textmate";
 import "ace-builds/src-min-noconflict/theme-monokai";
-import "ace-builds/src-min-noconflict/theme-dracula";
+import "ace-builds/src-min-noconflict/theme-terminal";
+import "ace-builds/src-min-noconflict/theme-clouds";
+
+// 联想词
+import "ace-builds/src-min-noconflict/ext-language_tools";
 // 支持代码格式， 需要引入具体的语法高亮库才会有对应的语法高亮效果
 import "ace-builds/src-min-noconflict/mode-javascript";
 import "ace-builds/src-min-noconflict/mode-json";
 import "ace-builds/src-min-noconflict/mode-css";
-import "ace-builds/src-min-noconflict/ext-language_tools";
+import "ace-builds/src-min-noconflict/mode-html";
+import "ace-builds/src-min-noconflict/mode-sql";
+
 import jsWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-javascript";
-import jsonWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-json";
-import cssWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-css";
 ace.config.setModuleUrl("ace/mode/javascript_worker", jsWorkerUrl);
-ace.config.setModuleUrl("ace/mode/json_worker", jsonWorkerUrl);
-ace.config.setModuleUrl("ace/mode/css_worker", cssWorkerUrl);
 ace.config.setModuleUrl(
   "ace/snippets/javascript",
   require("file-loader!ace-builds/src-noconflict/snippets/javascript.js")
 );
+
+import cssWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-css";
+ace.config.setModuleUrl("ace/mode/css_worker", cssWorkerUrl);
 ace.config.setModuleUrl(
   "ace/snippets/css",
   require("file-loader!ace-builds/src-noconflict/snippets/css.js")
 );
 
+import jsonWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-json";
+ace.config.setModuleUrl("ace/mode/json_worker", jsonWorkerUrl);
+
+import htmlWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-html";
+ace.config.setModuleUrl("ace/mode/html_worker", htmlWorkerUrl);
+
 export default {
   name: "CodeEditor",
   model: {
-    event: "change",
+    event: "change"
   },
   props: {
     // 编辑器内容
@@ -61,29 +50,28 @@ export default {
     // 默认语言
     language: {
       type: String,
-      default: "javascript",
+      default: "javascript"
     },
     // 主题，对应主题库 JS 需要提前引入
     theme: {
       type: String,
-      default: "monokai",
+      default: "textmate"
     },
+    height: String | Number,
     // 是否只读
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
+    readonly: Boolean,
     // 最大行数
     maxLines: Number,
-    // 是否显示全屏按钮
-    withFullscreenBtn: {
-      type: Boolean,
-      default: false,
-    },
-    withFooterBtns: {
-      type: Boolean,
-      default: false,
+    // 自定义提示
+    completions: {
+      type: Array,
+      default: () => {
+        return [];
+      }
     },
+    showGutter: { type: Boolean, default: true },
+    highlightActiveLine: { type: Boolean, default: true },
+    highlightSelectedWord: { type: Boolean, default: true }
   },
   data() {
     return {
@@ -92,14 +80,27 @@ export default {
         "id_" +
         Math.random()
           .toString(36)
-          .substr(2, 4),
-      isVisible: false,
-      dialogValue: "",
+          .substr(2, 4)
     };
   },
   mounted() {
     // 初始化
     this.initEditor();
+    this.setCompleteData();
+  },
+  computed: {
+    selfStyle() {
+      const style = {};
+      if (typeof this.height === "string" && this.height) {
+        style.height = this.height;
+        style.minHeight = "auto";
+      }
+      if (typeof this.height === "number" && this.height != null) {
+        style.height = `${this.height}px`;
+        style.minHeight = "auto";
+      }
+      return style;
+    }
   },
   watch: {
     value(val) {
@@ -107,7 +108,7 @@ export default {
         this.editor.setValue(val);
         this.editor.clearSelection();
       }
-    },
+    }
   },
   methods: {
     // 初始化
@@ -116,12 +117,15 @@ export default {
       this.editor = ace.edit(this.$refs[this.generateId], {
         mode: `ace/mode/${this.language}`,
         theme: `ace/theme/${this.theme}`,
-        fontSize: 12,
+        fontSize: 14,
         tabSize: 2,
         value: this.value,
         selectionStyle: "text",
         maxLines: this.maxLines,
         readOnly: this.readonly,
+        showGutter: this.showGutter,
+        highlightActiveLine: this.highlightActiveLine,
+        highlightSelectedWord: this.highlightSelectedWord
       });
       // 设置属性等，具体需要可根据官方参数自行设置
       this.editor.setOptions({
@@ -129,84 +133,45 @@ export default {
         enableSnippets: true,
         enableLiveAutocompletion: true,
         wrap: true,
-        setShowPrintMargin: false,
+        setShowPrintMargin: false
       });
       // 设置值改变监听
       this.editor.on("change", () => {
         this.$emit("change", this.editor.getValue());
       });
     },
+    setCompleteData() {
+      let langTools = ace.require("ace/ext/language_tools");
+      langTools.addCompleter({
+        getCompletions: (editor, session, pos, prefix, callback) => {
+          if (prefix.length === 0) {
+            return callback(null, []);
+          } else {
+            return callback(null, this.completions);
+          }
+        }
+      });
+    },
+    setShowGutter(bool) {
+      this.editor.renderer.setShowGutter(bool);
+    },
     // 实例方法，高亮某一行
     gotoLine(lineNumber) {
       this.editor.gotoLine(lineNumber);
     },
-    // 全屏编辑
-    fullscreen() {
-      this.dialogValue = JSON.parse(JSON.stringify(this.editor.getValue()));
-      this.isVisible = true;
-    },
-    closeEditCode() {
-      this.editor.setValue(this.dialogValue);
-      this.editor.clearSelection();
-    },
     // resize编辑器
     resize() {
-      this.editor.resize(true);
+      this.editor.resize();
     },
     destroy() {
       if (this.editor) {
         this.editor.destroy();
         this.editor = null;
       }
-    },
+    }
   },
   beforeDestroy() {
     this.destroy();
-  },
+  }
 };
 </script>
-<style lang="scss" scoped>
-.wrap {
-  position: relative;
-  .code-editor {
-    min-height: 150px;
-    height: 100%;
-    border: 1px solid #282f3a;
-    background-color: #0e1013;
-  }
-  .icon-fullscreen {
-    position: absolute;
-    // color: #fff;
-    right: 10px;
-    font-size: 16px;
-    z-index: 9999;
-    cursor: pointer;
-  }
-}
-.code-dialog {
-  &::before {
-    content: "";
-    position: absolute;
-    display: block;
-    top: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 2px;
-    background-image: linear-gradient(270deg, #00deff, #2483ff 74%);
-  }
-  display: flex;
-  flex-direction: column;
-  background-color: #303640;
-  .el-dialog__header {
-    border: none;
-    .el-dialog__title {
-      color: #ccc;
-    }
-  }
-  .el-dialog__body {
-    flex: 1 1 0;
-    padding-top: 10px;
-  }
-}
-</style>

package/packages/Col/index.js

@@ -0,0 +1,8 @@
+import Col from "./index.vue";
+
+/* istanbul ignore next */
+Col.install = function(Vue) {
+  Vue.component(Col.name, Col);
+};
+
+export default Col;

package/packages/Col/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="th-col" :class="selfClass" :style="selfStyle">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ThCol",
+  props: {
+    span: { type: Number, default: 24 },
+    offset: Number
+  },
+  computed: {
+    selfClass() {
+      let className = "";
+      if (this.span) className = `th-col-${this.span}`;
+      if (this.offset) className = `${className} th-col-offset-${this.offset}`;
+      return className;
+    },
+    selfStyle() {
+      const parent = this.$parent;
+      while (parent && parent.$options.name !== "ThRow") {
+        parent = parent.$parent;
+      }
+
+      let gutter = 0;
+      if (parent) gutter = parent.gutter;
+
+      const style = {};
+      if (gutter) {
+        style.paddingLeft = `${gutter / 2}px`;
+        style.paddingRight = style.paddingLeft;
+      }
+      return style;
+    }
+  }
+};
+</script>
+
+<style></style>