tianheng-ui 0.1.0 → 0.1.2

package/package.json

@@ -1,48 +1,86 @@
-{
-  "name": "tianheng-ui",
-  "version": "0.1.0",
-  "private": false,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "core-js": "^3.6.5",
-    "element-ui": "^2.15.6",
-    "vue": "2.6.11"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "babel-eslint": "^10.1.0",
-    "babel-plugin-component": "^1.1.1",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "2.6.11"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ],
-  "main": "babel.config.js",
-  "author": "shulang",
-  "license": "ISC",
-  "description": ""
-}
+{
+  "name": "tianheng-ui",
+  "description": "A Vue.js project",
+  "version": "0.1.2",
+  "author": "shu lang <403732931@qq.com>",
+  "license": "MIT",
+  "private": false,
+  "main": "./lib/tianheng-ui.js",
+  "style": "lib/theme-chalk/index.css",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --mode=development",
+    "build": "cross-env NODE_ENV=preview webpack --progress --hide-modules --mode=production",
+    "build:npm": "cross-env NODE_ENV=production webpack --progress --hide-modules --mode=production"
+  },
+  "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": "^1.6.2",
+    "normalize.css": "^8.0.1",
+    "nprogress": "^0.2.0",
+    "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",
+    "vuex": "^3.6.2",
+    "x2js": "^3.4.2",
+    "xlsx": "^0.18.5",
+    "xml-js": "^1.6.11"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-json-strings": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@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-component": "^1.1.1",
+    "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.55.0",
+    "sass-loader": "^7.3.1",
+    "style-loader": "^2.0.0",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "vue-loader": "^14.2.4",
+    "vue-template-compiler": "^2.4.4",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.3"
+  },
+  "files": [
+    "lib",
+    "packages"
+  ],
+  "homepage": "https://tianhengui.demo.tianhengyun.com/",
+  "keywords": [
+    "tianheng",
+    "tianheng-ui"
+  ]
+}

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;
+    },
+    _thFormItemSize() {
+      return (this.thFormItem || {}).thFormItemSize;
+    },
+    buttonSize() {
+      return this.size || this._thFormItemSize || (this.$ELEMENT || {}).size;
+    },
+    buttonDisabled() {
+      return this.$options.propsData.hasOwnProperty("disabled")
+        ? this.disabled
+        : (this.thForm || {}).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.js

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

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/index.js

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

package/packages/CodeEditor/index.vue

@@ -0,0 +1,177 @@
+<template>
+  <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-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/mode-html";
+import "ace-builds/src-min-noconflict/mode-sql";
+
+import jsWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-javascript";
+ace.config.setModuleUrl("ace/mode/javascript_worker", jsWorkerUrl);
+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: "ThCodeEditor",
+  model: {
+    event: "change"
+  },
+  props: {
+    // 编辑器内容
+    value: String,
+    // 默认语言
+    language: {
+      type: String,
+      default: "javascript"
+    },
+    // 主题，对应主题库 JS 需要提前引入
+    theme: {
+      type: String,
+      default: "textmate"
+    },
+    height: String | Number,
+    // 是否只读
+    readonly: Boolean,
+    // 最大行数
+    maxLines: Number,
+    // 自定义提示
+    completions: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    showGutter: { type: Boolean, default: true },
+    highlightActiveLine: { type: Boolean, default: true },
+    highlightSelectedWord: { type: Boolean, default: true }
+  },
+  data() {
+    return {
+      editor: null,
+      generateId:
+        "id_" +
+        Math.random()
+          .toString(36)
+          .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) {
+      if (this.editor.getValue() !== val) {
+        this.editor.setValue(val);
+        this.editor.clearSelection();
+      }
+    }
+  },
+  methods: {
+    // 初始化
+    initEditor() {
+      // 创建实例
+      this.editor = ace.edit(this.$refs[this.generateId], {
+        mode: `ace/mode/${this.language}`,
+        theme: `ace/theme/${this.theme}`,
+        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({
+        enableBasicAutocompletion: true,
+        enableSnippets: true,
+        enableLiveAutocompletion: true,
+        wrap: true,
+        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);
+    },
+    // resize编辑器
+    resize() {
+      this.editor.resize();
+    },
+    destroy() {
+      if (this.editor) {
+        this.editor.destroy();
+        this.editor = null;
+      }
+    }
+  },
+  beforeDestroy() {
+    this.destroy();
+  }
+};
+</script>

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,43 @@
+<template>
+  <div class="th-col" :class="selfClass" :style="selfStyle">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ThCol",
+  props: {
+    span: { type: Number | String, 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() {
+      let 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 lang="scss">
+@import "../../lib/theme-chalk/styles/col.scss";
+</style>

package/packages/Dialog/index.js

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