tianheng-ui 0.1.0 → 0.1.2

package/packages/Workflow/theme/process-designer.scss

@@ -0,0 +1,157 @@
+@import "~bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
+@import "~bpmn-js-token-simulation/assets/css/font-awesome.min.css";
+@import "~bpmn-js-token-simulation/assets/css/normalize.css";
+@import "~diagram-js-minimap/assets/diagram-js-minimap.css";
+
+// 边框被 token-simulation 样式覆盖了
+.djs-palette {
+  background: var(--palette-background-color);
+  border: solid 1px var(--palette-border-color) !important;
+  border-radius: 2px;
+}
+
+.my-process-designer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  .my-process-designer__header {
+    width: 100%;
+    min-height: 36px;
+    .el-button {
+      text-align: center;
+    }
+    .el-button-group {
+      margin: 4px;
+    }
+    .el-tooltip__popper {
+      .el-button {
+        width: 100%;
+        text-align: left;
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+      .el-button:hover {
+        background: rgba(64, 158, 255, 0.8);
+        color: #ffffff;
+      }
+    }
+    .align {
+      position: relative;
+      i {
+        &:after {
+          content: "|";
+          position: absolute;
+          transform: rotate(90deg) translate(200%, 60%);
+        }
+      }
+    }
+    .align.align-left i {
+      transform: rotate(90deg);
+    }
+    .align.align-right i {
+      transform: rotate(-90deg);
+    }
+    .align.align-top i {
+      transform: rotate(180deg);
+    }
+    .align.align-bottom i {
+      transform: rotate(0deg);
+    }
+    .align.align-center i {
+      transform: rotate(90deg);
+      &:after {
+        transform: rotate(90deg) translate(0, 60%);
+      }
+    }
+    .align.align-middle i {
+      transform: rotate(0deg);
+      &:after {
+        transform: rotate(90deg) translate(0, 60%);
+      }
+    }
+  }
+  .my-process-designer__container {
+    display: inline-flex;
+    width: 100%;
+    flex: 1;
+    .my-process-designer__canvas {
+      flex: 1;
+      height: 100%;
+      position: relative;
+      background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")
+      repeat !important;
+      div.toggle-mode {
+        display: none;
+      }
+    }
+    .my-process-designer__property-panel {
+      height: 100%;
+      overflow: scroll;
+      overflow-y: auto;
+      z-index: 10;
+      * {
+        box-sizing: border-box;
+      }
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      min-height: 100%;
+      overflow: hidden;
+    }
+  }
+}
+
+//侧边栏配置
+.djs-palette.open {
+  .djs-palette-entries {
+    div[class^="bpmn-icon-"]:before,
+    div[class*="bpmn-icon-"]:before {
+      line-height: unset;
+    }
+    div.entry {
+      position: relative;
+    }
+    div.entry:hover {
+      &::after {
+        width: max-content;
+        content: attr(title);
+        vertical-align: text-bottom;
+        position: absolute;
+        right: -10px;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+        transform: translateX(100%);
+        font-size: 0.5em;
+        display: inline-block;
+        text-decoration: inherit;
+        font-variant: normal;
+        text-transform: none;
+        background: #fafafa;
+        box-shadow: 0 0 6px #eeeeee;
+        border: 1px solid #cccccc;
+        box-sizing: border-box;
+        padding: 0 16px;
+        border-radius: 4px;
+        z-index: 100;
+      }
+    }
+  }
+}
+pre {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  max-height: calc(80vh - 32px);
+  overflow-y: auto;
+}
+.hljs {
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+.hljs * {
+  font-family: Consolas, Monaco, monospace;
+}

package/packages/Workflow/theme/process-panel.scss

@@ -0,0 +1,107 @@
+.process-panel__container {
+  box-sizing: border-box;
+  padding: 0 8px;
+  border-left: 1px solid #eeeeee;
+  box-shadow: 0 0 8px #cccccc;
+  max-height: 100%;
+  overflow-y: scroll;
+}
+.panel-tab__title {
+  font-weight: 600;
+  padding: 0 8px;
+  font-size: 1.1em;
+  line-height: 1.2em;
+  i {
+    margin-right: 8px;
+    font-size: 1.2em;
+  }
+}
+.panel-tab__content {
+  width: 100%;
+  box-sizing: border-box;
+  border-top: 1px solid #eeeeee;
+  padding: 8px 16px;
+  .panel-tab__content--title {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 8px;
+    span {
+      flex: 1;
+      text-align: left;
+    }
+  }
+}
+.element-property {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  margin: 8px 0;
+  .element-property__label {
+    display: block;
+    width: 90px;
+    text-align: right;
+    overflow: hidden;
+    padding-right: 12px;
+    line-height: 32px;
+    font-size: 14px;
+    box-sizing: border-box;
+  }
+  .element-property__value {
+    flex: 1;
+    line-height: 32px;
+  }
+  .el-form-item {
+    width: 100%;
+    margin-bottom: 0;
+    padding-bottom: 18px;
+  }
+}
+.list-property {
+  flex-direction: column;
+  .element-listener-item {
+    width: 100%;
+    display: inline-grid;
+    grid-template-columns: 16px auto 32px 32px;
+    grid-column-gap: 8px;
+  }
+  .element-listener-item + .element-listener-item {
+    margin-top: 8px;
+  }
+}
+.listener-filed__title {
+  display: inline-flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 0;
+  span {
+    width: 200px;
+    text-align: left;
+    font-size: 14px;
+  }
+  i {
+    margin-right: 8px;
+  }
+}
+.element-drawer__button {
+  margin-top: 8px;
+  width: 100%;
+  display: inline-flex;
+  justify-content: space-around;
+}
+.element-drawer__button > .el-button {
+  width: 100%;
+}
+
+.el-collapse-item__content {
+  padding-bottom: 0;
+}
+.el-input.is-disabled .el-input__inner {
+  color: #999999;
+}
+.el-form-item.el-form-item--mini {
+  margin-bottom: 0;
+  & + .el-form-item {
+    margin-top: 16px;
+  }
+}

package/packages/Workflow/translations.js

@@ -0,0 +1,25 @@
+/**
+ * This is a sample file that should be replaced with the actual translation.
+ *
+ * Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
+ * translations and labels to translate.
+ */
+export default {
+  "Exclusive Gateway": "Exklusives Gateway",
+  "Parallel Gateway": "Paralleles Gateway",
+  "Inclusive Gateway": "Inklusives Gateway",
+  "Complex Gateway": "Komplexes Gateway",
+  "Event based Gateway": "Ereignis-basiertes Gateway",
+  "Message Start Event": "消息启动事件",
+  "Timer Start Event": "定时启动事件",
+  "Conditional Start Event": "条件启动事件",
+  "Signal Start Event": "信号启动事件",
+  "Error Start Event": "错误启动事件",
+  "Escalation Start Event": "升级启动事件",
+  "Compensation Start Event": "补偿启动事件",
+  "Message Start Event (non-interrupting)": "消息启动事件 (非中断)",
+  "Timer Start Event (non-interrupting)": "定时启动事件 (非中断)",
+  "Conditional Start Event (non-interrupting)": "条件启动事件 (非中断)",
+  "Signal Start Event (non-interrupting)": "信号启动事件 (非中断)",
+  "Escalation Start Event (non-interrupting)": "升级启动事件 (非中断)"
+};

package/packages/Workflow/utils.js

@@ -0,0 +1,71 @@
+// 创建监听器实例
+export function createListenerObject(options, isTask, prefix) {
+  const listenerObj = Object.create(null);
+  listenerObj.event = options.event;
+  isTask && (listenerObj.id = options.id); // 任务监听器特有的 id 字段
+  switch (options.listenerType) {
+    case "scriptListener":
+      listenerObj.script = createScriptObject(options, prefix);
+      break;
+    case "expressionListener":
+      listenerObj.expression = options.expression;
+      break;
+    case "delegateExpressionListener":
+      listenerObj.delegateExpression = options.delegateExpression;
+      break;
+    default:
+      listenerObj.class = options.class;
+  }
+  // 注入字段
+  if (options.fields) {
+    listenerObj.fields = options.fields.map(field => {
+      return createFieldObject(field, prefix);
+    });
+  }
+  // 任务监听器的 定时器 设置
+  if (isTask && options.event === "timeout" && !!options.eventDefinitionType) {
+    const timeDefinition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", {
+      body: options.eventTimeDefinitions
+    });
+    const TimerEventDefinition = window.bpmnInstances.moddle.create("bpmn:TimerEventDefinition", {
+      id: `TimerEventDefinition_${uuid(8)}`,
+      [`time${options.eventDefinitionType.replace(/^\S/, s => s.toUpperCase())}`]: timeDefinition
+    });
+    listenerObj.eventDefinitions = [TimerEventDefinition];
+  }
+  return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj);
+}
+
+// 创建 监听器的注入字段 实例
+export function createFieldObject(option, prefix) {
+  const { name, fieldType, string, expression } = option;
+  const fieldConfig = fieldType === "string" ? { name, string } : { name, expression };
+  return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig);
+}
+
+// 创建脚本实例
+export function createScriptObject(options, prefix) {
+  const { scriptType, scriptFormat, value, resource } = options;
+  const scriptConfig = scriptType === "inlineScript" ? { scriptFormat, value } : { scriptFormat, resource };
+  return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig);
+}
+
+// 更新元素扩展属性
+export function updateElementExtensions(element, extensionList) {
+  const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
+    values: extensionList
+  });
+  window.bpmnInstances.modeling.updateProperties(element, {
+    extensionElements: extensions
+  });
+}
+
+// 创建一个id
+export function uuid(length = 8, chars) {
+  let result = "";
+  let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  for (let i = length; i > 0; --i) {
+    result += charsString[Math.floor(Math.random() * charsString.length)];
+  }
+  return result;
+}

package/packages/index.js

@@ -0,0 +1,160 @@
+import drawerStore from "../lib/theme-chalk/js/store/store";
+
+/**
+ * Cell : 单元格
+ * Icons : 图标选择器
+ * Table : 表格
+ * TableAction : 表格行操作
+ * TableSearch ：表格搜索
+ * TableTools ：表格公共操作
+ * Empty : 空状态
+ * Dialog : 对话框
+ * Card : 卡片
+ * CodeEditor : 编辑器
+ * Button : 按钮
+ * Image : 图片
+ * ImagePreview : 大图预览
+ * Row : loyout行
+ * Col : loyout列
+ * Upload : 上传
+ * MakingForm : 表单设计器
+ * GenerateForm : 表单渲染器
+ * Workflow : 工作流设计
+ */
+
+import Cell from "./Cell/index.js";
+import Icons from "./Icons/index.js";
+import Table from "./Table/index.js";
+import TableAction from "./Table/action.js";
+import TableSearch from "./Table/search.js";
+import TableTools from "./Table/tools.js";
+import Empty from "./Empty/index.js";
+import Dialog from "./Dialog/index.js";
+import Card from "./Card/index.js";
+import Grid from "./Grid/index.js";
+import GridItem from "./GridItem/index.js";
+import CodeEditor from "./CodeEditor/index.js";
+import VueEditor from "./VueEditor/index.js";
+import Button from "./Button/index.js";
+import Image from "./Image/index.js";
+import ImagePreview from "./ImagePreview/index.js";
+import Row from "./Row/index.js";
+import Col from "./Col/index.js";
+import Upload from "./Upload/index.js";
+import FormMaking from "./FormMaking/making.js";
+import FormGenerate from "./FormMaking/generate.js";
+import TableMaking from "./TableMaking/making.js";
+import TableGenerate from "./TableMaking/generate.js";
+import Workflow from "../packages/Workflow/index.js";
+
+const components = [
+  Cell,
+  Icons,
+  Table,
+  TableAction,
+  TableSearch,
+  TableTools,
+  Empty,
+  Dialog,
+  Card,
+  Grid,
+  GridItem,
+  CodeEditor,
+  VueEditor,
+  Button,
+  Image,
+  ImagePreview,
+  Row,
+  Col,
+  Upload,
+  FormMaking,
+  FormGenerate,
+  TableMaking,
+  TableGenerate,
+  Workflow
+];
+
+// 这一步判断window.Vue是否存在，因为直接引用vue.min.js， 它会把Vue绑到Window上，我们直接引用打包好的js才能正常跑起来。
+if (typeof window !== "undefined" && window.Vue) {
+  window.Vue.component("v-drawer", components);
+}
+
+const install = function(Vue, opts = {}) {
+  if (!opts.store) {
+    console.log("Please provide a store!");
+  } else {
+    // 动态注册store
+    opts.store.registerModule("drawer", drawerStore);
+  }
+
+  components.forEach(component => {
+    Vue.component(component.name, component);
+  });
+
+  Vue.prototype.$TIANHENG = {
+    size: opts.size || "",
+    zIndex: opts.zIndex || 2000
+  };
+};
+
+if (typeof window !== "undefined" && window.Vue) {
+  install(window.Vue);
+}
+
+const version = require("../package.json").version;
+export default {
+  version: version,
+  install,
+  Cell,
+  Icons,
+  Table,
+  TableAction,
+  TableSearch,
+  TableTools,
+  Empty,
+  Dialog,
+  Card,
+  Grid,
+  GridItem,
+  CodeEditor,
+  VueEditor,
+  Button,
+  Image,
+  ImagePreview,
+  Row,
+  Col,
+  Upload,
+  FormMaking,
+  FormGenerate,
+  TableMaking,
+  TableGenerate,
+  Workflow
+};
+
+export {
+  install,
+  Cell,
+  Icons,
+  Table,
+  TableAction,
+  TableSearch,
+  TableTools,
+  Empty,
+  Dialog,
+  Card,
+  Grid,
+  GridItem,
+  CodeEditor,
+  VueEditor,
+  Button,
+  Image,
+  ImagePreview,
+  Row,
+  Col,
+  Upload,
+  FormMaking,
+  FormGenerate,
+  TableMaking,
+  TableGenerate,
+  Workflow
+};

package/babel.config.js

@@ -1,15 +0,0 @@
-module.exports = {
-  presets: [
-    "@vue/cli-plugin-babel/preset",
-    ["@babel/preset-env", { modules: false }],
-  ],
-  plugins: [
-    [
-      "component",
-      {
-        libraryName: "element-ui",
-        styleLibraryName: "theme-chalk",
-      },
-    ],
-  ],
-};

package/index.js

@@ -1,11 +0,0 @@
-import Main from "./src/components/HelloWorld";
-
-// 这一步判断window.Vue是否存在，因为直接引用vue.min.js， 它会把Vue绑到Window上，我们直接引用打包好的js才能正常跑起来。
-if (typeof window !== "undefined" && window.Vue) {
-  window.Vue.component("yyl-npm-practice", Main);
-}
-//这样就可以使用Vue.use进行全局安装了。
-Main.install = function (Vue) {
-  Vue.component(Main.name, Main);
-};
-export default Main;

package/public/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

package/src/App.vue

@@ -1,28 +0,0 @@
-<template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

package/src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

package/src/main.js

@@ -1,8 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-
-Vue.config.productionTip = false
-
-new Vue({
-  render: h => h(App),
-}).$mount('#app')