tianheng-ui 0.0.10 → 0.0.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.0.10",
+  "version": "0.0.14",
   "author": "shu lang <403732931@qq.com>",
   "license": "MIT",
   "private": false,

package/packages/cell/index.vue

@@ -1,7 +1,12 @@
 <template>
   <div
     class="th-cell"
-    :class="[customClass, center ? 'is-center' : '']"
+    :class="[
+      customClass,
+      center ? 'is-center' : '',
+      active ? cellActive : '',
+      hover ? cellHover : ''
+    ]"
     :style="customStyle"
     @click="handleClick"
   >
@@ -11,18 +16,26 @@
       <div
         v-if="title"
         class="th-cell-title"
-        :class="titleClass"
+        :class="[titleClass, active ? titleActive : '', hover ? titleHover : 'title-color']"
         :style="titleStyle"
       >
         {{ title }}
       </div>
       <slot v-else name="title" />
-      <div v-if="label" class="th-cell-label" :class="labelClass">
+      <div
+        v-if="label"
+        class="th-cell-label"
+        :class="[labelClass, active ? labelActive : '', hover ? labelHover : '']"
+      >
         {{ label }}
       </div>
       <slot v-else name="label" />
     </div>
-    <div v-if="value" class="th-cell-value" :class="valueClass">
+    <div
+      v-if="value"
+      class="th-cell-value"
+      :class="[valueClass, active ? valueActive : '', hover ? valueHover : '']"
+    >
       {{ value }}
     </div>
     <slot v-else />
@@ -37,15 +50,62 @@ export default {
     value: Number | String,
     label: String,
     icon: String,
-    center: Boolean,
+
+    customStyle: String | Object,
+    titleStyle: String | Object,
 
     customClass: String | Object,
     titleClass: String | Object,
     labelClass: String | Object,
     valueClass: String | Object,
 
-    customStyle: String | Object,
-    titleStyle: String | Object
+    cellActiveClass: String | Object,
+    titleActiveClass: String | Object,
+    labelActiveClass: String | Object,
+    valueActiveClass: String | Object,
+
+    cellHoverClass: String | Object,
+    titleHoverClass: String | Object,
+    labelHoverClass: String | Object,
+    valueHoverClass: String | Object,
+
+    center: Boolean,
+    hover: Boolean,
+    active: Boolean
+  },
+  computed: {
+    cellActive() {
+      if (this.cellActiveClass) return this.cellActiveClass;
+      else return "is-active";
+    },
+    titleActive() {
+      if (this.titleActiveClass) return this.titleActiveClass;
+      else return "is-active";
+    },
+    labelActive() {
+      if (this.labelActiveClass) return this.labelActiveClass;
+      else return "is-active";
+    },
+    valueActive() {
+      if (this.valueActiveClass) return this.valueActiveClass;
+      else return "is-active";
+    },
+    cellHover() {
+      if (this.cellHoverClass) return this.cellHoverClass;
+      else return "is-hover";
+    },
+    titleHover() {
+      if (this.titleHoverClass) return this.titleHoverClass;
+      else return "is-hover";
+    },
+    labelHover() {
+      if (this.labelHoverClass) return this.labelHoverClass;
+      else return "is-hover";
+    },
+    valueHover() {
+      if (this.valueHoverClass) return this.valueHoverClass;
+      else return "is-hover";
+    }
   },
   methods: {
     handleClick(evt) {

package/packages/table/action.js

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

package/packages/table/action.vue

@@ -69,26 +69,27 @@
 
 <script>
 export default {
+  name: "ThTableAction",
   props: {
     actions: {
       type: Array,
       default: () => {
         return [];
-      },
+      }
     },
     permission: {
       type: Object,
-      required: false,
+      required: false
     },
     msg: {
       type: String,
-      default: "确定删除本条数据吗？",
-    },
+      default: "确定删除本条数据吗？"
+    }
   },
   data() {
     return {
       pop: false,
-      loadingDel: false,
+      loadingDel: false
     };
   },
   methods: {
@@ -109,13 +110,13 @@ export default {
     },
     doDelete(item) {
       this.loadingDel = true;
-      const callback = (bool) => {
+      const callback = bool => {
         this.loadingDel = false;
         this.pop = !bool;
       };
       this.$emit("on-delete", item, callback);
-    },
-  },
+    }
+  }
 };
 </script>
 

package/packages/table/index.js

@@ -1,8 +1,24 @@
 import Table from "./index.vue";
-
 /* istanbul ignore next */
 Table.install = function(Vue) {
   Vue.component(Table.name, Table);
 };
 
-export default Table;
+import TableAction from "./action.vue";
+/* istanbul ignore next */
+TableAction.install = function(Vue) {
+  Vue.component(TableAction.name, TableAction);
+};
+
+import TableTools from "./tools.vue";
+/* istanbul ignore next */
+TableTools.install = function(Vue) {
+  Vue.component(TableTools.name, TableTools);
+};
+
+import TableSearch from "./search.vue";
+/* istanbul ignore next */
+TableSearch.install = function(Vue) {
+  Vue.component(TableSearch.name, TableSearch);
+};
+export default { Table, TableAction, TableTools, TableSearch };

package/packages/table/index.vue

@@ -6,6 +6,7 @@
       :data="data"
       :row-key="rowKey"
       :stripe="stripe"
+      :border="border"
       :highlight-current-row="selectType === 'single'"
       :tree-props="treeProps"
       @current-change="handleSingleSelect"
@@ -178,6 +179,12 @@ export default {
       default: () => {
         return "加载中";
       }
+    },
+    border: {
+      type: Boolean,
+      default: () => {
+        return false;
+      }
     }
   },
   data() {

package/packages/table/search.vue

@@ -49,19 +49,20 @@
 
 <script>
 export default {
+  name: "ThTableSearch",
   props: {
     options: {
       type: Array,
       default: () => {
         return [];
-      },
+      }
     },
     params: {
       type: Object,
       default: () => {
         return {};
-      },
-    },
+      }
+    }
   },
   data() {
     return {
@@ -74,8 +75,8 @@ export default {
         "datetime",
         "datetimerange",
         "daterange",
-        "monthrange",
-      ],
+        "monthrange"
+      ]
     };
   },
   methods: {
@@ -85,8 +86,8 @@ export default {
     doReset() {
       this.params = {};
       this.$emit("on-reset", this.params);
-    },
-  },
+    }
+  }
 };
 </script>
 

package/packages/table/tools.vue

@@ -48,23 +48,24 @@
 
 <script>
 export default {
+  name: "ThTableTools",
   props: {
     options: {
       type: Array,
       default: () => {
         return [];
-      },
+      }
     },
     selectionDisabled: {
       type: Boolean,
       default: () => {
         return true;
-      },
-    },
+      }
+    }
   },
   data() {
     return {
-      loadingDel: false,
+      loadingDel: false
     };
   },
   methods: {
@@ -82,12 +83,12 @@ export default {
     },
     doBatch(item) {
       this.loadingDel = true;
-      const callback = (bool) => {
+      const callback = bool => {
         this.loadingDel = false;
       };
       this.$emit("on-batch", item, callback);
-    },
-  },
+    }
+  }
 };
 </script>