tianheng-ui 0.0.6 → 0.0.10

package/packages/cell/index.vue

@@ -1,144 +1,56 @@
 <template>
-  <div>
-    <el-skeleton :loading="loading" animated>
-      <template slot="template">
-        <div class="skeleton">
-          <el-skeleton-item class="skeleton-icon" variant="image" />
-          <div class="skeleton-content">
-            <el-skeleton-item class="skeleton-title" variant="h4" />
-            <el-skeleton-item class="skeleton-label" variant="text" />
-          </div>
-          <el-skeleton-item class="skeleton-value" variant="text" />
-        </div>
-      </template>
-    </el-skeleton>
-    <div v-if="!loading" class="th-cell" :style="customStyle">
-      <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">{{ title }}</div>
-        <slot v-else name="title" />
-        <div v-if="label" class="th-cell-label">{{ label }}</div>
-        <slot v-else name="label" />
+  <div
+    class="th-cell"
+    :class="[customClass, center ? 'is-center' : '']"
+    :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"
+        :class="titleClass"
+        :style="titleStyle"
+      >
+        {{ title }}
       </div>
-      <div v-if="value" class="th-cell-value">{{ value }}</div>
-      <slot v-else />
+      <slot v-else name="title" />
+      <div v-if="label" class="th-cell-label" :class="labelClass">
+        {{ label }}
+      </div>
+      <slot v-else name="label" />
+    </div>
+    <div v-if="value" class="th-cell-value" :class="valueClass">
+      {{ value }}
     </div>
+    <slot v-else />
   </div>
 </template>
 
 <script>
 export default {
-  name:'ThCell',
+  name: "ThCell",
   props: {
-    title: {
-      type: String,
-      default: () => {
-        return "";
-      },
-    },
-    value: {
-      type: String,
-      default: () => {
-        return "";
-      },
-    },
-    label: {
-      type: String,
-      default: () => {
-        return "";
-      },
-    },
-    icon: {
-      type: String,
-      default: () => {
-        return "";
-      },
-    },
-    customStyle: {
-      type: String,
-      default: () => {
-        return "";
-      },
-    },
-    loading: {
-      type: Boolean,
-      default: () => {
-        return false;
-      },
-    },
-  },
-};
-</script>
+    title: Number | String,
+    value: Number | String,
+    label: String,
+    icon: String,
+    center: Boolean,
 
-<style lang="less" scoped>
-.th-cell {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 10px 15px;
-  border-radius: 4px;
-  border: 1px solid #ebeef5;
-  background-color: white;
-  overflow: hidden;
-  transition: 0.3s;
-  .th-cell-icon {
-    margin-right: 10px;
-    font-size: 18px;
-  }
-  .th-cell-content {
-    flex: 1;
-  }
-  &-title {
-    font-size: 16px;
-    color: #333333;
-  }
-  &-label {
-    margin-top: 5px;
-    font-size: 14px;
-    color: #666666;
-    word-wrap: break-word;
-    word-break: break-all;
-  }
-  &-value {
-    margin-left: 10px;
-    max-width: 50%;
-    font-size: 14px;
-    color: #999999;
-    word-wrap: break-word;
-    word-break: break-all;
-  }
-}
-.th-cell:hover {
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
+    customClass: String | Object,
+    titleClass: String | Object,
+    labelClass: String | Object,
+    valueClass: String | Object,
 
-.skeleton {
-  display: flex;
-  align-items: center;
-  // height: 64px;
-  margin-bottom: 20px;
-  padding: 10px 15px;
-  border-radius: 4px;
-  border: 1px solid #ebeef5;
-  &-icon {
-    width: 30px;
-    height: 30px;
-    margin-right: 10px;
-    font-size: 18px;
-  }
-  &-content {
-    flex: 1;
-  }
-  &-title {
-    width: 100px;
-  }
-  &-label {
-    margin-top: 5px;
-  }
-  &-value {
-    margin-left: 10px;
-    width: 100px;
+    customStyle: String | Object,
+    titleStyle: String | Object
+  },
+  methods: {
+    handleClick(evt) {
+      this.$emit("click", evt);
+    }
   }
-}
-</style>
+};
+</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,212 @@
+<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>
+</template>
+<script>
+// 引入全局实例
+import ace from "ace-builds";
+// 主题风格，引入主题后还需要在 options 中指定主题才会生效
+import "ace-builds/src-min-noconflict/theme-monokai";
+import "ace-builds/src-min-noconflict/theme-dracula";
+// 支持代码格式， 需要引入具体的语法高亮库才会有对应的语法高亮效果
+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 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")
+);
+ace.config.setModuleUrl(
+  "ace/snippets/css",
+  require("file-loader!ace-builds/src-noconflict/snippets/css.js")
+);
+
+export default {
+  name: "CodeEditor",
+  model: {
+    event: "change",
+  },
+  props: {
+    // 编辑器内容
+    value: String,
+    // 默认语言
+    language: {
+      type: String,
+      default: "javascript",
+    },
+    // 主题，对应主题库 JS 需要提前引入
+    theme: {
+      type: String,
+      default: "monokai",
+    },
+    // 是否只读
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    // 最大行数
+    maxLines: Number,
+    // 是否显示全屏按钮
+    withFullscreenBtn: {
+      type: Boolean,
+      default: false,
+    },
+    withFooterBtns: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      editor: null,
+      generateId:
+        "id_" +
+        Math.random()
+          .toString(36)
+          .substr(2, 4),
+      isVisible: false,
+      dialogValue: "",
+    };
+  },
+  mounted() {
+    // 初始化
+    this.initEditor();
+  },
+  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: 12,
+        tabSize: 2,
+        value: this.value,
+        selectionStyle: "text",
+        maxLines: this.maxLines,
+        readOnly: this.readonly,
+      });
+      // 设置属性等，具体需要可根据官方参数自行设置
+      this.editor.setOptions({
+        enableBasicAutocompletion: true,
+        enableSnippets: true,
+        enableLiveAutocompletion: true,
+        wrap: true,
+        setShowPrintMargin: false,
+      });
+      // 设置值改变监听
+      this.editor.on("change", () => {
+        this.$emit("change", this.editor.getValue());
+      });
+    },
+    // 实例方法，高亮某一行
+    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);
+    },
+    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/table/index.vue

@@ -5,7 +5,7 @@
       v-loading="loading"
       :data="data"
       :row-key="rowKey"
-      stripe
+      :stripe="stripe"
       :highlight-current-row="selectType === 'single'"
       :tree-props="treeProps"
       @current-change="handleSingleSelect"
@@ -93,86 +93,92 @@
 import TableColumn from "./column.vue";
 
 export default {
-  name:'ThTable',
+  name: "ThTable",
   components: {
-    TableColumn,
+    TableColumn
   },
   props: {
     data: {
       type: Array,
       default: () => {
         return [];
-      },
+      }
     },
     options: {
       type: Array,
       default: () => {
         return [];
-      },
+      }
     },
     // single:单行选中    multiple:多行选中
     selectType: {
       type: String,
       default: () => {
         return "";
-      },
+      }
     },
     // 行双击事件
     dblclick: {
       type: Function,
       default: () => {
         return null;
-      },
+      }
+    },
+    stripe: {
+      type: Boolean,
+      default: () => {
+        return false;
+      }
     },
     treeProps: {
       type: Object,
       default: function() {
         return {};
-      },
+      }
     },
     // 对象，不传表示没有分页,包含三个参数,均必填pageSize：每页展示的条数。currentPage：当前页码。pageCount：总页数
     pageInfo: {
       type: Object,
       default: function() {
         return {};
-      },
+      }
     },
     loading: {
       type: Boolean,
       default: () => {
         return false;
-      },
+      }
     },
     height: {
       type: String,
       default: () => {
         return "";
-      },
+      }
     },
     rowKey: {
       type: String,
       default: () => {
         return "";
-      },
+      }
     },
     showPage: {
       type: Boolean,
       default: () => {
         return true;
-      },
+      }
     },
     emptyText: {
       type: String,
       default: () => {
         return "暂无数据";
-      },
+      }
     },
     loadingText: {
       type: String,
       default: () => {
         return "加载中";
-      },
-    },
+      }
+    }
   },
   data() {
     return {};
@@ -229,8 +235,8 @@ export default {
     },
     getTable() {
       return this.$refs["th_table"];
-    },
-  },
+    }
+  }
 };
 </script>
 

package/src/App.vue

@@ -1,31 +0,0 @@
-<template>
-  <div id="app">
-    <th-cell
-      v-for="(item, index) in list"
-      :key="index"
-      :title="item.title" :label="item.label"
-    ></th-cell>
-  </div>
-</template>
-
-<script>
-import ThCell from "../packages/cell/index.vue";
-export default {
-  name: "app",
-  components: { ThCell },
-  data() {
-    return {
-      list: [{ title: "张三", label: "18岁" }]
-    };
-  }
-};
-</script>
-
-<style lang="scss">
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-}
-</style>

package/src/main.js

@@ -1,11 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
-Vue.use(ElementUI);
-
-new Vue({
-  el: '#app',
-  render: h => h(App)
-})