@10yun/cv-mobile-ui 0.5.19 → 0.5.21

package/uni-ui/lib/uni-th/uni-th.vue

@@ -1 +1,224 @@
-<template>
  <!-- #ifdef H5 -->
  <th
    :rowspan="rowspan"
    :colspan="colspan"
    class="uni-table-th"
    :class="{ 'table--border': border }"
    :style="{ width: customWidth + 'px', 'text-align': align }"
  >
    <view class="uni-table-th-row">
      <view class="uni-table-th-content" :style="{ 'justify-content': contentAlign }" @click="sort">
        <slot></slot>
        <view v-if="sortable" class="arrow-box">
          <text class="arrow up" :class="{ active: ascending }" @click.stop="ascendingFn"></text>
          <text class="arrow down" :class="{ active: descending }" @click.stop="descendingFn"></text>
        </view>
      </view>
      <dropdown
        v-if="filterType || filterData.length"
        :filterDefaultValue="filterDefaultValue"
        :filterData="filterData"
        :filterType="filterType"
        @change="ondropdown"
      ></dropdown>
    </view>
  </th>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <view class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }">
    <slot></slot>
  </view>
  <!-- #endif -->
 * Th 表头
 * @description 表格内的表头单元格组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
 * @property {Number | String} 	width 	单元格宽度（支持纯数字、携带单位px或rpx）
 * @property {Boolean} 	sortable 					是否启用排序
 * @property {Number} 	align = [left|center|right]	单元格对齐方式
 * @value left   	单元格文字左侧对齐
 * @value center	单元格文字居中
 * @value right		单元格文字右侧对齐
 * @property {Array}	filterData 筛选数据
 * @property {String}	filterType	[search|select] 筛选类型
 * @value search	关键字搜素
 * @value select	条件选择
 * @event {Function} sort-change 排序触发事件
 */
  name: 'uniTh',
  options: {
    virtualHost: true
  },
  components: {
    // #ifdef H5
    dropdown
    // #endif
  },
  emits: ['sort-change', 'filter-change'],
  props: {
    width: {
      type: [String, Number],
      default: ''
    },
    align: {
      type: String,
      default: 'left'
    },
    rowspan: {
      type: [Number, String],
      default: 1
    },
    colspan: {
      type: [Number, String],
      default: 1
    },
    sortable: {
      type: Boolean,
      default: false
    },
    filterType: {
      type: String,
      default: ''
    },
    filterData: {
      type: Array,
      default() {
        return [];
      }
    },
    filterDefaultValue: {
      type: [Array, String],
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      border: false,
      ascending: false,
      descending: false
    };
  },
  computed: {
    // 根据props中的width属性 自动匹配当前th的宽度(px)
    customWidth() {
      if (typeof this.width === 'number') {
        return this.width;
      } else if (typeof this.width === 'string') {
        let regexHaveUnitPx = new RegExp(/^[1-9][0-9]*px$/g);
        let regexHaveUnitRpx = new RegExp(/^[1-9][0-9]*rpx$/g);
        let regexHaveNotUnit = new RegExp(/^[1-9][0-9]*$/g);
        if (this.width.match(regexHaveUnitPx) !== null) {
          // 携带了 px
          return this.width.replace('px', '');
        } else if (this.width.match(regexHaveUnitRpx) !== null) {
          // 携带了 rpx
          let numberRpx = Number(this.width.replace('rpx', ''));
          let widthCoe = uni.getSystemInfoSync().screenWidth / 750;
          return Math.round(numberRpx * widthCoe);
        } else if (this.width.match(regexHaveNotUnit) !== null) {
          // 未携带 rpx或px 的纯数字 String
          return this.width;
        } else {
          // 不符合格式
          return '';
        }
      } else {
        return '';
      }
    },
    contentAlign() {
      let align = 'left';
      switch (this.align) {
        case 'left':
          align = 'flex-start';
          break;
        case 'center':
          align = 'center';
          break;
        case 'right':
          align = 'flex-end';
          break;
      }
      return align;
    }
  },
  created() {
    this.root = this.getTable('uniTable');
    this.rootTr = this.getTable('uniTr');
    this.rootTr.minWidthUpdate(this.customWidth ? this.customWidth : 140);
    this.border = this.root.border;
    this.root.thChildren.push(this);
  },
  methods: {
    sort() {
      if (!this.sortable) return;
      this.clearOther();
      if (!this.ascending && !this.descending) {
        this.ascending = true;
        this.$emit('sort-change', { order: 'ascending' });
        return;
      }
      if (this.ascending && !this.descending) {
        this.ascending = false;
        this.descending = true;
        this.$emit('sort-change', { order: 'descending' });
        return;
      }
      if (!this.ascending && this.descending) {
        this.ascending = false;
        this.descending = false;
        this.$emit('sort-change', { order: null });
      }
    },
    ascendingFn() {
      this.clearOther();
      this.ascending = !this.ascending;
      this.descending = false;
      this.$emit('sort-change', { order: this.ascending ? 'ascending' : null });
    },
    descendingFn() {
      this.clearOther();
      this.descending = !this.descending;
      this.ascending = false;
      this.$emit('sort-change', { order: this.descending ? 'descending' : null });
    },
    clearOther() {
      this.root.thChildren.map((item) => {
        if (item !== this) {
          item.ascending = false;
          item.descending = false;
        }
        return item;
      });
    },
    ondropdown(e) {
      this.$emit('filter-change', e);
    },
    /**
     * 获取父元素实例
     */
    getTable(name) {
      let parent = this.$parent;
      let parentName = parent.$options.name;
      while (parentName !== name) {
        parent = parent.$parent;
        if (!parent) return false;
        parentName = parent.$options.name;
      }
      return parent;
    }
  }
+<template>
+  <!-- #ifdef H5 -->
+  <th
+    :rowspan="rowspan"
+    :colspan="colspan"
+    class="uni-table-th"
+    :class="{ 'table--border': border }"
+    :style="{ width: customWidth + 'px', 'text-align': align }"
+  >
+    <view class="uni-table-th-row">
+      <view class="uni-table-th-content" :style="{ 'justify-content': contentAlign }" @click="sort">
+        <slot></slot>
+        <view v-if="sortable" class="arrow-box">
+          <text class="arrow up" :class="{ active: ascending }" @click.stop="ascendingFn"></text>
+          <text class="arrow down" :class="{ active: descending }" @click.stop="descendingFn"></text>
+        </view>
+      </view>
+      <dropdown
+        v-if="filterType || filterData.length"
+        :filterDefaultValue="filterDefaultValue"
+        :filterData="filterData"
+        :filterType="filterType"
+        @change="ondropdown"
+      ></dropdown>
+    </view>
+  </th>
+  <!-- #endif -->
+  <!-- #ifndef H5 -->
+  <view class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }">
+    <slot></slot>
+  </view>
+  <!-- #endif -->
+</template>
+<script>
+// #ifdef H5
+import dropdown from './filter-dropdown.vue';
+// #endif
+/**
+ * Th 表头
+ * @description 表格内的表头单元格组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
+ * @property {Number | String} 	width 	单元格宽度（支持纯数字、携带单位px或rpx）
+ * @property {Boolean} 	sortable 					是否启用排序
+ * @property {Number} 	align = [left|center|right]	单元格对齐方式
+ * @value left   	单元格文字左侧对齐
+ * @value center	单元格文字居中
+ * @value right		单元格文字右侧对齐
+ * @property {Array}	filterData 筛选数据
+ * @property {String}	filterType	[search|select] 筛选类型
+ * @value search	关键字搜素
+ * @value select	条件选择
+ * @event {Function} sort-change 排序触发事件
+ */
+export default {
+  name: 'uniTh',
+  options: {
+    virtualHost: true
+  },
+  components: {
+    // #ifdef H5
+    dropdown
+    // #endif
+  },
+  emits: ['sort-change', 'filter-change'],
+  props: {
+    width: {
+      type: [String, Number],
+      default: ''
+    },
+    align: {
+      type: String,
+      default: 'left'
+    },
+    rowspan: {
+      type: [Number, String],
+      default: 1
+    },
+    colspan: {
+      type: [Number, String],
+      default: 1
+    },
+    sortable: {
+      type: Boolean,
+      default: false
+    },
+    filterType: {
+      type: String,
+      default: ''
+    },
+    filterData: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    filterDefaultValue: {
+      type: [Array, String],
+      default() {
+        return '';
+      }
+    }
+  },
+  data() {
+    return {
+      border: false,
+      ascending: false,
+      descending: false
+    };
+  },
+  computed: {
+    // 根据props中的width属性 自动匹配当前th的宽度(px)
+    customWidth() {
+      if (typeof this.width === 'number') {
+        return this.width;
+      } else if (typeof this.width === 'string') {
+        let regexHaveUnitPx = new RegExp(/^[1-9][0-9]*px$/g);
+        let regexHaveUnitRpx = new RegExp(/^[1-9][0-9]*rpx$/g);
+        let regexHaveNotUnit = new RegExp(/^[1-9][0-9]*$/g);
+        if (this.width.match(regexHaveUnitPx) !== null) {
+          // 携带了 px
+          return this.width.replace('px', '');
+        } else if (this.width.match(regexHaveUnitRpx) !== null) {
+          // 携带了 rpx
+          let numberRpx = Number(this.width.replace('rpx', ''));
+          let widthCoe = uni.getSystemInfoSync().screenWidth / 750;
+          return Math.round(numberRpx * widthCoe);
+        } else if (this.width.match(regexHaveNotUnit) !== null) {
+          // 未携带 rpx或px 的纯数字 String
+          return this.width;
+        } else {
+          // 不符合格式
+          return '';
+        }
+      } else {
+        return '';
+      }
+    },
+    contentAlign() {
+      let align = 'left';
+      switch (this.align) {
+        case 'left':
+          align = 'flex-start';
+          break;
+        case 'center':
+          align = 'center';
+          break;
+        case 'right':
+          align = 'flex-end';
+          break;
+      }
+      return align;
+    }
+  },
+  created() {
+    this.root = this.getTable('uniTable');
+    this.rootTr = this.getTable('uniTr');
+    this.rootTr.minWidthUpdate(this.customWidth ? this.customWidth : 140);
+    this.border = this.root.border;
+    this.root.thChildren.push(this);
+  },
+  methods: {
+    sort() {
+      if (!this.sortable) return;
+      this.clearOther();
+      if (!this.ascending && !this.descending) {
+        this.ascending = true;
+        this.$emit('sort-change', { order: 'ascending' });
+        return;
+      }
+      if (this.ascending && !this.descending) {
+        this.ascending = false;
+        this.descending = true;
+        this.$emit('sort-change', { order: 'descending' });
+        return;
+      }
+      if (!this.ascending && this.descending) {
+        this.ascending = false;
+        this.descending = false;
+        this.$emit('sort-change', { order: null });
+      }
+    },
+    ascendingFn() {
+      this.clearOther();
+      this.ascending = !this.ascending;
+      this.descending = false;
+      this.$emit('sort-change', { order: this.ascending ? 'ascending' : null });
+    },
+    descendingFn() {
+      this.clearOther();
+      this.descending = !this.descending;
+      this.ascending = false;
+      this.$emit('sort-change', { order: this.descending ? 'descending' : null });
+    },
+    clearOther() {
+      this.root.thChildren.map((item) => {
+        if (item !== this) {
+          item.ascending = false;
+          item.descending = false;
+        }
+        return item;
+      });
+    },
+    ondropdown(e) {
+      this.$emit('filter-change', e);
+    },
+    /**
+     * 获取父元素实例
+     */
+    getTable(name) {
+      let parent = this.$parent;
+      let parentName = parent.$options.name;
+      while (parentName !== name) {
+        parent = parent.$parent;
+        if (!parent) return false;
+        parentName = parent.$options.name;
+      }
+      return parent;
+    }
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>

package/uni-ui/lib/uni-thead/uni-thead.vue

@@ -1 +1,77 @@
-<template>
  <!-- #ifdef H5 -->
  <thead class="uni-table-thead">
    <tr class="uni-table-tr">
      <th :rowspan="rowspan" colspan="1" class="checkbox" :class="{ 'tr-table--border': border }">
        <table-checkbox :indeterminate="indeterminate" :checked="checked" @checkboxSelected="checkboxSelected"></table-checkbox>
      </th>
    </tr>
    <slot></slot>
  </thead>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <view class="uni-table-thead"><slot></slot></view>
  <!-- #endif -->
  name: 'uniThead',
  components: {
    tableCheckbox
  },
  options: {
    virtualHost: true
  },
  data() {
    return {
      border: false,
      selection: false,
      rowspan: 1,
      indeterminate: false,
      checked: false
    };
  },
  created() {
    this.root = this.getTable();
    // #ifdef H5
    this.root.theadChildren = this;
    // #endif
    this.border = this.root.border;
    this.selection = this.root.type;
  },
  methods: {
    init(self) {
      this.rowspan++;
    },
    checkboxSelected(e) {
      this.indeterminate = false;
      const backIndexData = this.root.backIndexData;
      const data = this.root.trChildren.filter((v) => !v.disabled && v.keyValue);
      if (backIndexData.length === data.length) {
        this.checked = false;
        this.root.clearSelection();
      } else {
        this.checked = true;
        this.root.selectionAll();
      }
    },
    /**
     * 获取父元素实例
     */
    getTable(name = 'uniTable') {
      let parent = this.$parent;
      let parentName = parent.$options.name;
      while (parentName !== name) {
        parent = parent.$parent;
        if (!parent) return false;
        parentName = parent.$options.name;
      }
      return parent;
    }
  }
+<template>
+  <!-- #ifdef H5 -->
+  <thead class="uni-table-thead">
+    <tr class="uni-table-tr">
+      <th :rowspan="rowspan" colspan="1" class="checkbox" :class="{ 'tr-table--border': border }">
+        <table-checkbox :indeterminate="indeterminate" :checked="checked" @checkboxSelected="checkboxSelected"></table-checkbox>
+      </th>
+    </tr>
+    <slot></slot>
+  </thead>
+  <!-- #endif -->
+  <!-- #ifndef H5 -->
+  <view class="uni-table-thead"><slot></slot></view>
+  <!-- #endif -->
+</template>
+<script>
+import tableCheckbox from '../uni-tr/table-checkbox.vue';
+export default {
+  name: 'uniThead',
+  components: {
+    tableCheckbox
+  },
+  options: {
+    virtualHost: true
+  },
+  data() {
+    return {
+      border: false,
+      selection: false,
+      rowspan: 1,
+      indeterminate: false,
+      checked: false
+    };
+  },
+  created() {
+    this.root = this.getTable();
+    // #ifdef H5
+    this.root.theadChildren = this;
+    // #endif
+    this.border = this.root.border;
+    this.selection = this.root.type;
+  },
+  methods: {
+    init(self) {
+      this.rowspan++;
+    },
+    checkboxSelected(e) {
+      this.indeterminate = false;
+      const backIndexData = this.root.backIndexData;
+      const data = this.root.trChildren.filter((v) => !v.disabled && v.keyValue);
+      if (backIndexData.length === data.length) {
+        this.checked = false;
+        this.root.clearSelection();
+      } else {
+        this.checked = true;
+        this.root.selectionAll();
+      }
+    },
+    /**
+     * 获取父元素实例
+     */
+    getTable(name = 'uniTable') {
+      let parent = this.$parent;
+      let parentName = parent.$options.name;
+      while (parentName !== name) {
+        parent = parent.$parent;
+        if (!parent) return false;
+        parentName = parent.$options.name;
+      }
+      return parent;
+    }
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>