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

package/uni-ui/lib/uni-tr/table-checkbox.vue

@@ -1 +1,79 @@
-<template>
  <view class="uni-table-checkbox" @click="selected">
    <view v-if="!indeterminate" class="checkbox__inner" :class="{ 'is-checked': isChecked, 'is-disable': isDisabled }">
      <view class="checkbox__inner-icon"></view>
    </view>
    <view v-else class="checkbox__inner checkbox--indeterminate">
      <view class="checkbox__inner-icon"></view>
    </view>
  </view>
  name: 'TableCheckbox',
  emits: ['checkboxSelected'],
  props: {
    indeterminate: {
      type: Boolean,
      default: false
    },
    checked: {
      type: [Boolean, String],
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      default: -1
    },
    cellData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  watch: {
    checked(newVal) {
      if (typeof this.checked === 'boolean') {
        this.isChecked = newVal;
      } else {
        this.isChecked = true;
      }
    },
    indeterminate(newVal) {
      this.isIndeterminate = newVal;
    }
  },
  data() {
    return {
      isChecked: false,
      isDisabled: false,
      isIndeterminate: false
    };
  },
  created() {
    if (typeof this.checked === 'boolean') {
      this.isChecked = this.checked;
    }
    this.isDisabled = this.disabled;
  },
  methods: {
    selected() {
      if (this.isDisabled) return;
      this.isIndeterminate = false;
      this.isChecked = !this.isChecked;
      this.$emit('checkboxSelected', {
        checked: this.isChecked,
        data: this.cellData
      });
    }
  }
+<template>
+  <view class="uni-table-checkbox" @click="selected">
+    <view v-if="!indeterminate" class="checkbox__inner" :class="{ 'is-checked': isChecked, 'is-disable': isDisabled }">
+      <view class="checkbox__inner-icon"></view>
+    </view>
+    <view v-else class="checkbox__inner checkbox--indeterminate">
+      <view class="checkbox__inner-icon"></view>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  name: 'TableCheckbox',
+  emits: ['checkboxSelected'],
+  props: {
+    indeterminate: {
+      type: Boolean,
+      default: false
+    },
+    checked: {
+      type: [Boolean, String],
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    index: {
+      type: Number,
+      default: -1
+    },
+    cellData: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  watch: {
+    checked(newVal) {
+      if (typeof this.checked === 'boolean') {
+        this.isChecked = newVal;
+      } else {
+        this.isChecked = true;
+      }
+    },
+    indeterminate(newVal) {
+      this.isIndeterminate = newVal;
+    }
+  },
+  data() {
+    return {
+      isChecked: false,
+      isDisabled: false,
+      isIndeterminate: false
+    };
+  },
+  created() {
+    if (typeof this.checked === 'boolean') {
+      this.isChecked = this.checked;
+    }
+    this.isDisabled = this.disabled;
+  },
+  methods: {
+    selected() {
+      if (this.isDisabled) return;
+      this.isIndeterminate = false;
+      this.isChecked = !this.isChecked;
+      this.$emit('checkboxSelected', {
+        checked: this.isChecked,
+        data: this.cellData
+      });
+    }
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>

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

@@ -1 +1,135 @@
-<template>
  <!-- #ifdef H5 -->
  <tr class="uni-table-tr">
    <th v-if="selection === 'selection' && ishead" class="checkbox" :class="{ 'tr-table--border': border }">
      <table-checkbox
        :checked="checked"
        :indeterminate="indeterminate"
        :disabled="disabled"
        @checkboxSelected="checkboxSelected"
      ></table-checkbox>
    </th>
    <slot></slot>
    <!-- <uni-th class="th-fixed">123</uni-th> -->
  </tr>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <view class="uni-table-tr">
    <view v-if="selection === 'selection'" class="checkbox" :class="{ 'tr-table--border': border }">
      <table-checkbox
        :checked="checked"
        :indeterminate="indeterminate"
        :disabled="disabled"
        @checkboxSelected="checkboxSelected"
      ></table-checkbox>
    </view>
    <slot></slot>
  </view>
  <!-- #endif -->
 * Tr 表格行组件
 * @description 表格行组件 仅包含 th,td 组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=
 */
  name: 'uniTr',
  components: { tableCheckbox },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    keyValue: {
      type: [String, Number],
      default: ''
    }
  },
  options: {
    virtualHost: true
  },
  data() {
    return {
      value: false,
      border: false,
      selection: false,
      widthThArr: [],
      ishead: true,
      checked: false,
      indeterminate: false
    };
  },
  created() {
    this.root = this.getTable();
    this.head = this.getTable('uniThead');
    if (this.head) {
      this.ishead = false;
      this.head.init(this);
    }
    this.border = this.root.border;
    this.selection = this.root.type;
    this.root.trChildren.push(this);
    const rowData = this.root.data.find((v) => v[this.root.rowKey] === this.keyValue);
    if (rowData) {
      this.rowData = rowData;
    }
    this.root.isNodata();
  },
  mounted() {
    if (this.widthThArr.length > 0) {
      const selectionWidth = this.selection === 'selection' ? 50 : 0;
      this.root.minWidth = this.widthThArr.reduce((a, b) => Number(a) + Number(b)) + selectionWidth;
    }
  },
  // #ifndef VUE3
  destroyed() {
    const index = this.root.trChildren.findIndex((i) => i === this);
    this.root.trChildren.splice(index, 1);
    this.root.isNodata();
  },
  // #endif
  // #ifdef VUE3
  unmounted() {
    const index = this.root.trChildren.findIndex((i) => i === this);
    this.root.trChildren.splice(index, 1);
    this.root.isNodata();
  },
  // #endif
  methods: {
    minWidthUpdate(width) {
      this.widthThArr.push(width);
    },
    // 选中
    checkboxSelected(e) {
      let rootData = this.root.data.find((v) => v[this.root.rowKey] === this.keyValue);
      this.checked = e.checked;
      this.root.check(rootData || this, e.checked, rootData ? this.keyValue : null);
    },
    change(e) {
      this.root.trChildren.forEach((item) => {
        if (item === this) {
          this.root.check(this, e.detail.value.length > 0 ? true : false);
        }
      });
    },
    /**
     * 获取父元素实例
     */
    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 -->
+  <tr class="uni-table-tr">
+    <th v-if="selection === 'selection' && ishead" class="checkbox" :class="{ 'tr-table--border': border }">
+      <table-checkbox
+        :checked="checked"
+        :indeterminate="indeterminate"
+        :disabled="disabled"
+        @checkboxSelected="checkboxSelected"
+      ></table-checkbox>
+    </th>
+    <slot></slot>
+    <!-- <uni-th class="th-fixed">123</uni-th> -->
+  </tr>
+  <!-- #endif -->
+  <!-- #ifndef H5 -->
+  <view class="uni-table-tr">
+    <view v-if="selection === 'selection'" class="checkbox" :class="{ 'tr-table--border': border }">
+      <table-checkbox
+        :checked="checked"
+        :indeterminate="indeterminate"
+        :disabled="disabled"
+        @checkboxSelected="checkboxSelected"
+      ></table-checkbox>
+    </view>
+    <slot></slot>
+  </view>
+  <!-- #endif -->
+</template>
+<script>
+import tableCheckbox from './table-checkbox.vue';
+/**
+ * Tr 表格行组件
+ * @description 表格行组件 仅包含 th,td 组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=
+ */
+export default {
+  name: 'uniTr',
+  components: { tableCheckbox },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    keyValue: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  options: {
+    virtualHost: true
+  },
+  data() {
+    return {
+      value: false,
+      border: false,
+      selection: false,
+      widthThArr: [],
+      ishead: true,
+      checked: false,
+      indeterminate: false
+    };
+  },
+  created() {
+    this.root = this.getTable();
+    this.head = this.getTable('uniThead');
+    if (this.head) {
+      this.ishead = false;
+      this.head.init(this);
+    }
+    this.border = this.root.border;
+    this.selection = this.root.type;
+    this.root.trChildren.push(this);
+    const rowData = this.root.data.find((v) => v[this.root.rowKey] === this.keyValue);
+    if (rowData) {
+      this.rowData = rowData;
+    }
+    this.root.isNodata();
+  },
+  mounted() {
+    if (this.widthThArr.length > 0) {
+      const selectionWidth = this.selection === 'selection' ? 50 : 0;
+      this.root.minWidth = this.widthThArr.reduce((a, b) => Number(a) + Number(b)) + selectionWidth;
+    }
+  },
+  // #ifndef VUE3
+  destroyed() {
+    const index = this.root.trChildren.findIndex((i) => i === this);
+    this.root.trChildren.splice(index, 1);
+    this.root.isNodata();
+  },
+  // #endif
+  // #ifdef VUE3
+  unmounted() {
+    const index = this.root.trChildren.findIndex((i) => i === this);
+    this.root.trChildren.splice(index, 1);
+    this.root.isNodata();
+  },
+  // #endif
+  methods: {
+    minWidthUpdate(width) {
+      this.widthThArr.push(width);
+    },
+    // 选中
+    checkboxSelected(e) {
+      let rootData = this.root.data.find((v) => v[this.root.rowKey] === this.keyValue);
+      this.checked = e.checked;
+      this.root.check(rootData || this, e.checked, rootData ? this.keyValue : null);
+    },
+    change(e) {
+      this.root.trChildren.forEach((item) => {
+        if (item === this) {
+          this.root.check(this, e.detail.value.length > 0 ? true : false);
+        }
+      });
+    },
+    /**
+     * 获取父元素实例
+     */
+    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>