@vtj/materials 0.13.16 → 0.13.18

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

@@ -1,322 +0,0 @@
-<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: {
-      // #ifdef MP-TOUTIAO
-      virtualHost: false,
-      // #endif
-      // #ifndef MP-TOUTIAO
-      virtualHost: true
-      // #endif
-    },
-    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', ''));
-            // #ifdef MP-WEIXIN
-            let widthCoe = uni.getWindowInfo().screenWidth / 750;
-            // #endif
-            // #ifndef MP-WEIXIN
-            // let widthCoe = uni.getSystemInfoSync().screenWidth / 750
-            // #endif
-            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 lang="scss">
-  $border-color: #ebeef5;
-  $uni-primary: #007aff !default;
-
-  .uni-table-th {
-    padding: 12px 10px;
-    /* #ifndef APP-NVUE */
-    display: table-cell;
-    box-sizing: border-box;
-    /* #endif */
-    font-size: 14px;
-    font-weight: bold;
-    color: #909399;
-    border-bottom: 1px $border-color solid;
-  }
-
-  .uni-table-th-row {
-    /* #ifndef APP-NVUE */
-    display: flex;
-    /* #endif */
-    flex-direction: row;
-  }
-
-  .table--border {
-    border-right: 1px $border-color solid;
-  }
-  .uni-table-th-content {
-    display: flex;
-    align-items: center;
-    flex: 1;
-  }
-  .arrow-box {
-  }
-  .arrow {
-    display: block;
-    position: relative;
-    width: 10px;
-    height: 8px;
-    // border: 1px red solid;
-    left: 5px;
-    overflow: hidden;
-    cursor: pointer;
-  }
-  .down {
-    top: 3px;
-    ::after {
-      content: '';
-      width: 8px;
-      height: 8px;
-      position: absolute;
-      left: 2px;
-      top: -5px;
-      transform: rotate(45deg);
-      background-color: #ccc;
-    }
-    &.active {
-      ::after {
-        background-color: $uni-primary;
-      }
-    }
-  }
-  .up {
-    ::after {
-      content: '';
-      width: 8px;
-      height: 8px;
-      position: absolute;
-      left: 2px;
-      top: 5px;
-      transform: rotate(45deg);
-      background-color: #ccc;
-    }
-    &.active {
-      ::after {
-        background-color: $uni-primary;
-      }
-    }
-  }
-</style>

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

@@ -1,181 +0,0 @@
-<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 lang="scss">
-  $uni-primary: #007aff !default;
-  $border-color: #dcdfe6;
-  $disable: 0.4;
-
-  .uni-table-checkbox {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    margin: 5px 0;
-    cursor: pointer;
-
-    // 多选样式
-    .checkbox__inner {
-      /* #ifndef APP-NVUE */
-      flex-shrink: 0;
-      box-sizing: border-box;
-      /* #endif */
-      position: relative;
-      width: 16px;
-      height: 16px;
-      border: 1px solid $border-color;
-      border-radius: 2px;
-      background-color: #fff;
-      z-index: 1;
-
-      .checkbox__inner-icon {
-        position: absolute;
-        /* #ifdef APP-NVUE */
-        top: 2px;
-        /* #endif */
-        /* #ifndef APP-NVUE */
-        top: 2px;
-        /* #endif */
-        left: 5px;
-        height: 7px;
-        width: 3px;
-        border: 1px solid #fff;
-        border-left: 0;
-        border-top: 0;
-        opacity: 0;
-        transform-origin: center;
-        transform: rotate(45deg);
-        box-sizing: content-box;
-      }
-
-      &.checkbox--indeterminate {
-        border-color: $uni-primary;
-        background-color: $uni-primary;
-
-        .checkbox__inner-icon {
-          position: absolute;
-          opacity: 1;
-          transform: rotate(0deg);
-          height: 2px;
-          top: 0;
-          bottom: 0;
-          margin: auto;
-          left: 0px;
-          right: 0px;
-          bottom: 0;
-          width: auto;
-          border: none;
-          border-radius: 2px;
-          transform: scale(0.5);
-          background-color: #fff;
-        }
-      }
-      &:hover {
-        border-color: $uni-primary;
-      }
-      // 禁用
-      &.is-disable {
-        /* #ifdef H5 */
-        cursor: not-allowed;
-        /* #endif */
-        background-color: #f2f6fc;
-        border-color: $border-color;
-      }
-
-      // 选中
-      &.is-checked {
-        border-color: $uni-primary;
-        background-color: $uni-primary;
-
-        .checkbox__inner-icon {
-          opacity: 1;
-          transform: rotate(45deg);
-        }
-
-        // 选中禁用
-        &.is-disable {
-          opacity: $disable;
-        }
-      }
-    }
-  }
-</style>

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

@@ -1,208 +0,0 @@
-<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: {
-      // #ifdef MP-TOUTIAO
-      // virtualHost: false,
-      // #endif
-      // #ifndef MP-TOUTIAO
-      virtualHost: true
-      // #endif
-    },
-    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 =
-          Number(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);
-        if (this.widthThArr.length > 0) {
-          const selectionWidth = this.selection === 'selection' ? 50 : 0;
-          this.root.minWidth =
-            Number(this.widthThArr.reduce((a, b) => Number(a) + Number(b))) +
-            selectionWidth;
-        }
-      },
-      // 选中
-      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 lang="scss">
-  $border-color: #ebeef5;
-
-  .uni-table-tr {
-    /* #ifndef APP-NVUE */
-    display: table-row;
-    transition: all 0.3s;
-    box-sizing: border-box;
-    /* #endif */
-  }
-
-  .checkbox {
-    padding: 0 8px;
-    width: 26px;
-    padding-left: 12px;
-    /* #ifndef APP-NVUE */
-    display: table-cell;
-    vertical-align: middle;
-    /* #endif */
-    color: #333;
-    font-weight: 500;
-    border-bottom: 1px $border-color solid;
-    font-size: 14px;
-    // text-align: center;
-  }
-
-  .tr-table--border {
-    border-right: 1px $border-color solid;
-  }
-
-  /* #ifndef APP-NVUE */
-  .uni-table-tr {
-    ::v-deep .uni-table-th {
-      &.table--border:last-child {
-        // border-right: none;
-      }
-    }
-
-    ::v-deep .uni-table-td {
-      &.table--border:last-child {
-        // border-right: none;
-      }
-    }
-  }
-
-  /* #endif */
-</style>