@vtj/materials 0.10.1-alpha.6 → 0.10.1

package/src/uni-ui/lib/uni-table/uni-table.vue

@@ -0,0 +1,496 @@
+<template>
+  <view
+    class="uni-table-scroll"
+    :class="{ 'table--border': border, 'border-none': !noData }">
+    <!-- #ifdef H5 -->
+    <table
+      class="uni-table"
+      border="0"
+      cellpadding="0"
+      cellspacing="0"
+      :class="{ 'table--stripe': stripe }"
+      :style="{ 'min-width': minWidth + 'px' }">
+      <slot></slot>
+      <tr v-if="noData" class="uni-table-loading">
+        <td class="uni-table-text" :class="{ 'empty-border': border }">
+          {{ emptyText }}
+        </td>
+      </tr>
+      <view
+        v-if="loading"
+        class="uni-table-mask"
+        :class="{ 'empty-border': border }"
+        ><div class="uni-table--loader"></div
+      ></view>
+    </table>
+    <!-- #endif -->
+    <!-- #ifndef H5 -->
+    <!-- <view class="uni-table" :style="{ 'min-width': minWidth + 'px' }" :class="{ 'table--stripe': stripe }">
+			<slot></slot>
+			<view v-if="noData" class="uni-table-loading">
+				<view class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</view>
+			</view>
+			<view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }"><div class="uni-table--loader"></div></view>
+		</view> -->
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+  /**
+   * Table 表格
+   * @description 用于展示多条结构类似的数据
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
+   * @property {Boolean} 	border 				是否带有纵向边框
+   * @property {Boolean} 	stripe 				是否显示斑马线
+   * @property {Boolean} 	type 					是否开启多选
+   * @property {String} 	emptyText 			空数据时显示的文本内容
+   * @property {Boolean} 	loading 			显示加载中
+   * @event {Function} 	selection-change 	开启多选时，当选择项发生变化时会触发该事件
+   */
+  export default {
+    name: 'uniTable',
+    options: {
+      // #ifdef MP-TOUTIAO
+      virtualHost: false,
+      // #endif
+      // #ifndef MP-TOUTIAO
+      virtualHost: true
+      // #endif
+    },
+    emits: ['selection-change'],
+    props: {
+      data: {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+      // 是否有竖线
+      border: {
+        type: Boolean,
+        default: false
+      },
+      // 是否显示斑马线
+      stripe: {
+        type: Boolean,
+        default: false
+      },
+      // 多选
+      type: {
+        type: String,
+        default: ''
+      },
+      // 没有更多数据
+      emptyText: {
+        type: String,
+        default: '没有更多数据'
+      },
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      rowKey: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        noData: true,
+        minWidth: 0,
+        multiTableHeads: []
+      };
+    },
+    watch: {
+      loading(val) {},
+      data(newVal) {
+        let theadChildren = this.theadChildren;
+        let rowspan = 1;
+        if (this.theadChildren) {
+          rowspan = this.theadChildren.rowspan;
+        }
+
+        // this.trChildren.length - rowspan
+        this.noData = false;
+        // this.noData = newVal.length === 0
+      }
+    },
+    created() {
+      // 定义tr的实例数组
+      this.trChildren = [];
+      this.thChildren = [];
+      this.theadChildren = null;
+      this.backData = [];
+      this.backIndexData = [];
+    },
+
+    methods: {
+      isNodata() {
+        let theadChildren = this.theadChildren;
+        let rowspan = 1;
+        if (this.theadChildren) {
+          rowspan = this.theadChildren.rowspan;
+        }
+        this.noData = this.trChildren.length - rowspan <= 0;
+      },
+      /**
+       * 选中所有
+       */
+      selectionAll() {
+        let startIndex = 1;
+        let theadChildren = this.theadChildren;
+        if (!this.theadChildren) {
+          theadChildren = this.trChildren[0];
+        } else {
+          startIndex = theadChildren.rowspan - 1;
+        }
+        let isHaveData = this.data && this.data.length > 0;
+        theadChildren.checked = true;
+        theadChildren.indeterminate = false;
+        this.trChildren.forEach((item, index) => {
+          if (!item.disabled) {
+            item.checked = true;
+            if (isHaveData && item.keyValue) {
+              const row = this.data.find(
+                (v) => v[this.rowKey] === item.keyValue
+              );
+              if (
+                !this.backData.find((v) => v[this.rowKey] === row[this.rowKey])
+              ) {
+                this.backData.push(row);
+              }
+            }
+            if (
+              index > startIndex - 1 &&
+              this.backIndexData.indexOf(index - startIndex) === -1
+            ) {
+              this.backIndexData.push(index - startIndex);
+            }
+          }
+        });
+        // this.backData = JSON.parse(JSON.stringify(this.data))
+        this.$emit('selection-change', {
+          detail: {
+            value: this.backData,
+            index: this.backIndexData
+          }
+        });
+      },
+      /**
+       * 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
+       */
+      toggleRowSelection(row, selected) {
+        // if (!this.theadChildren) return
+        row = [].concat(row);
+
+        this.trChildren.forEach((item, index) => {
+          // if (item.keyValue) {
+
+          const select = row.findIndex((v) => {
+            //
+            if (typeof v === 'number') {
+              return v === index - 1;
+            } else {
+              return v[this.rowKey] === item.keyValue;
+            }
+          });
+          let ischeck = item.checked;
+          if (select !== -1) {
+            if (typeof selected === 'boolean') {
+              item.checked = selected;
+            } else {
+              item.checked = !item.checked;
+            }
+            if (ischeck !== item.checked) {
+              this.check(
+                item.rowData || item,
+                item.checked,
+                item.rowData ? item.keyValue : null,
+                true
+              );
+            }
+          }
+          // }
+        });
+        this.$emit('selection-change', {
+          detail: {
+            value: this.backData,
+            index: this.backIndexData
+          }
+        });
+      },
+
+      /**
+       * 用于多选表格，清空用户的选择
+       */
+      clearSelection() {
+        let theadChildren = this.theadChildren;
+        if (!this.theadChildren) {
+          theadChildren = this.trChildren[0];
+        }
+        // if (!this.theadChildren) return
+        theadChildren.checked = false;
+        theadChildren.indeterminate = false;
+        this.trChildren.forEach((item) => {
+          // if (item.keyValue) {
+          item.checked = false;
+          // }
+        });
+        this.backData = [];
+        this.backIndexData = [];
+        this.$emit('selection-change', {
+          detail: {
+            value: [],
+            index: []
+          }
+        });
+      },
+      /**
+       * 用于多选表格，切换所有行的选中状态
+       */
+      toggleAllSelection() {
+        let list = [];
+        let startIndex = 1;
+        let theadChildren = this.theadChildren;
+        if (!this.theadChildren) {
+          theadChildren = this.trChildren[0];
+        } else {
+          startIndex = theadChildren.rowspan - 1;
+        }
+        this.trChildren.forEach((item, index) => {
+          if (!item.disabled) {
+            if (index > startIndex - 1) {
+              list.push(index - startIndex);
+            }
+          }
+        });
+        this.toggleRowSelection(list);
+      },
+
+      /**
+       * 选中\取消选中
+       * @param {Object} child
+       * @param {Object} check
+       * @param {Object} rowValue
+       */
+      check(child, check, keyValue, emit) {
+        let theadChildren = this.theadChildren;
+        if (!this.theadChildren) {
+          theadChildren = this.trChildren[0];
+        }
+
+        let childDomIndex = this.trChildren.findIndex(
+          (item, index) => child === item
+        );
+        if (childDomIndex < 0) {
+          childDomIndex =
+            this.data.findIndex((v) => v[this.rowKey] === keyValue) + 1;
+        }
+        const dataLen = this.trChildren.filter(
+          (v) => !v.disabled && v.keyValue
+        ).length;
+        if (childDomIndex === 0) {
+          check ? this.selectionAll() : this.clearSelection();
+          return;
+        }
+
+        if (check) {
+          if (keyValue) {
+            this.backData.push(child);
+          }
+          this.backIndexData.push(childDomIndex - 1);
+        } else {
+          const index = this.backData.findIndex(
+            (v) => v[this.rowKey] === keyValue
+          );
+          const idx = this.backIndexData.findIndex(
+            (item) => item === childDomIndex - 1
+          );
+          if (keyValue) {
+            this.backData.splice(index, 1);
+          }
+          this.backIndexData.splice(idx, 1);
+        }
+
+        const domCheckAll = this.trChildren.find(
+          (item, index) => index > 0 && !item.checked && !item.disabled
+        );
+        if (!domCheckAll) {
+          theadChildren.indeterminate = false;
+          theadChildren.checked = true;
+        } else {
+          theadChildren.indeterminate = true;
+          theadChildren.checked = false;
+        }
+
+        if (this.backIndexData.length === 0) {
+          theadChildren.indeterminate = false;
+        }
+
+        if (!emit) {
+          this.$emit('selection-change', {
+            detail: {
+              value: this.backData,
+              index: this.backIndexData
+            }
+          });
+        }
+      }
+    }
+  };
+</script>
+
+<style lang="scss">
+  $border-color: #ebeef5;
+
+  .uni-table-scroll {
+    width: 100%;
+    /* #ifndef APP-NVUE */
+    overflow-x: auto;
+    /* #endif */
+  }
+
+  .uni-table {
+    position: relative;
+    width: 100%;
+    border-radius: 5px;
+    // box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    display: table;
+    overflow-x: auto;
+    ::v-deep .uni-table-tr:nth-child(n + 2) {
+      &:hover {
+        background-color: #f5f7fa;
+      }
+    }
+    ::v-deep .uni-table-thead {
+      .uni-table-tr {
+        // background-color: #f5f7fa;
+        &:hover {
+          background-color: #fafafa;
+        }
+      }
+    }
+    /* #endif */
+  }
+
+  .table--border {
+    border: 1px $border-color solid;
+    border-right: none;
+  }
+
+  .border-none {
+    /* #ifndef APP-NVUE */
+    border-bottom: none;
+    /* #endif */
+  }
+
+  .table--stripe {
+    /* #ifndef APP-NVUE */
+    ::v-deep .uni-table-tr:nth-child(2n + 3) {
+      background-color: #fafafa;
+    }
+    /* #endif */
+  }
+
+  /* 表格加载、无数据样式 */
+  .uni-table-loading {
+    position: relative;
+    /* #ifndef APP-NVUE */
+    display: table-row;
+    /* #endif */
+    height: 50px;
+    line-height: 50px;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+  .empty-border {
+    border-right: 1px $border-color solid;
+  }
+  .uni-table-text {
+    position: absolute;
+    right: 0;
+    left: 0;
+    text-align: center;
+    font-size: 14px;
+    color: #999;
+  }
+
+  .uni-table-mask {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(255, 255, 255, 0.8);
+    z-index: 99;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    margin: auto;
+    transition: all 0.5s;
+    /* #endif */
+    justify-content: center;
+    align-items: center;
+  }
+
+  .uni-table--loader {
+    width: 30px;
+    height: 30px;
+    border: 2px solid #aaa;
+    // border-bottom-color: transparent;
+    border-radius: 50%;
+    /* #ifndef APP-NVUE */
+    animation: 2s uni-table--loader linear infinite;
+    /* #endif */
+    position: relative;
+  }
+
+  @keyframes uni-table--loader {
+    0% {
+      transform: rotate(360deg);
+    }
+
+    10% {
+      border-left-color: transparent;
+    }
+
+    20% {
+      border-bottom-color: transparent;
+    }
+
+    30% {
+      border-right-color: transparent;
+    }
+
+    40% {
+      border-top-color: transparent;
+    }
+
+    50% {
+      transform: rotate(0deg);
+    }
+
+    60% {
+      border-top-color: transparent;
+    }
+
+    70% {
+      border-left-color: transparent;
+    }
+
+    80% {
+      border-bottom-color: transparent;
+    }
+
+    90% {
+      border-right-color: transparent;
+    }
+
+    100% {
+      transform: rotate(-360deg);
+    }
+  }
+</style>

package/src/uni-ui/lib/uni-td/uni-td.vue

@@ -0,0 +1,99 @@
+<template>
+  <!-- #ifdef H5 -->
+  <td
+    class="uni-table-td"
+    :rowspan="rowspan"
+    :colspan="colspan"
+    :class="{ 'table--border': border }"
+    :style="{ width: width + 'px', 'text-align': align }">
+    <slot></slot>
+  </td>
+  <!-- #endif -->
+  <!-- #ifndef H5 -->
+  <!-- :class="{'table--border':border}"  -->
+  <!-- <view class="uni-table-td" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
+		<slot></slot>
+	</view> -->
+  <!-- #endif -->
+</template>
+
+<script>
+  /**
+   * Td 单元格
+   * @description 表格中的标准单元格组件
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
+   * @property {Number} 	align = [left|center|right]	单元格对齐方式
+   */
+  export default {
+    name: 'uniTd',
+    options: {
+      // #ifdef MP-TOUTIAO
+      virtualHost: false,
+      // #endif
+      // #ifndef MP-TOUTIAO
+      virtualHost: true
+      // #endif
+    },
+    props: {
+      width: {
+        type: [String, Number],
+        default: ''
+      },
+      align: {
+        type: String,
+        default: 'left'
+      },
+      rowspan: {
+        type: [Number, String],
+        default: 1
+      },
+      colspan: {
+        type: [Number, String],
+        default: 1
+      }
+    },
+    data() {
+      return {
+        border: false
+      };
+    },
+    created() {
+      this.root = this.getTable();
+      this.border = this.root.border;
+    },
+    methods: {
+      /**
+       * 获取父元素实例
+       */
+      getTable() {
+        let parent = this.$parent;
+        let parentName = parent.$options.name;
+        while (parentName !== 'uniTable') {
+          parent = parent.$parent;
+          if (!parent) return false;
+          parentName = parent.$options.name;
+        }
+        return parent;
+      }
+    }
+  };
+</script>
+
+<style lang="scss">
+  $border-color: #ebeef5;
+
+  .uni-table-td {
+    display: table-cell;
+    padding: 8px 10px;
+    font-size: 14px;
+    border-bottom: 1px $border-color solid;
+    font-weight: 400;
+    color: #606266;
+    line-height: 23px;
+    box-sizing: border-box;
+  }
+
+  .table--border {
+    border-right: 1px $border-color solid;
+  }
+</style>