@10yun/cv-mobile-ui 0.3.26 → 0.4.2

package/ui-cv/cv-tbody/cv-tbody.vue

@@ -0,0 +1,28 @@
+<template>
+  <!-- #ifdef H5 -->
+  <tbody>
+    <slot></slot>
+  </tbody>
+  <!-- #endif -->
+  <!-- #ifndef H5 -->
+  <view>
+    <slot></slot>
+  </view>
+  <!-- #endif -->
+</template>
+
+<script>
+export default {
+  name: 'cvBody',
+  options: {
+    virtualHost: true
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {}
+};
+</script>
+
+<style scoped></style>

package/ui-cv/cv-td/cv-td.vue

@@ -0,0 +1,93 @@
+<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: 'cvTd',
+  options: {
+    virtualHost: true
+  },
+  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 scoped>
+.uni-table-td {
+  display: table-cell;
+  padding: 8px 10px;
+  font-size: 14px;
+  border-bottom: 1px #ebeef5 solid;
+  font-weight: 400;
+  color: #606266;
+  line-height: 23px;
+  box-sizing: border-box;
+}
+
+.table--border {
+  border-right: 1px #ebeef5 solid;
+}
+</style>

package/ui-cv/cv-textarea/cv-textarea.vue

@@ -1,38 +1,28 @@
 <template>
-  <cv-form-item
-    :tip="tip"
-    :label="label"
-    :must="must"
-    :message="message"
-    :messageDisplay="messageDisplay"
-    :labelWidth="localLabelWidth"
-    :layout="localLayout"
-    :onQClear="onQClear"
-    :input-value="localVal"
-  >
-    <view class="cv-textarea">
+  <view class="cv-textarea-wrap" :class="{ 'cv-textarea__border': border }">
+    <view class="cv-textarea__box">
       <textarea
-        class="cv-textarea-item"
+        class="cv-textarea__content"
         v-model="localVal"
         :maxlength="maxlength"
         :placeholder="placeholder"
-        placeholder-class="cv-textarea-placeholder"
-        @input="updateInput"
+        placeholder-class="cv-textarea__placeholder"
+        @input="funcOnInput"
         auto-height
+        border
       />
-      <view class="cv-textarea-maxlength" v-if="maxlength >= 1">
-        <text>{{ tempLength }}</text>
-        /
-        <text>{{ maxlength }}</text>
-      </view>
     </view>
-  </cv-form-item>
+
+    <view class="cv-textarea__maxlength" v-if="maxlength >= 1">
+      <text>{{ tempLength }}</text>
+      /
+      <text>{{ maxlength }}</text>
+    </view>
+  </view>
 </template>
 
 <script>
-import MixinsCommon from '../mixins/mixins-common.js';
 export default {
-  mixins: [MixinsCommon],
   name: 'cvTextArea',
   inject: {
     cvFormGroup: {
@@ -50,21 +40,17 @@ export default {
       type: [Number, String],
       default: -1
     },
-    tip: {
-      type: String,
-      default: ''
+    placeholder: {
+      type: [String],
+      default: '请输入文本'
     },
-    onQClear: {
+    clearable: {
       type: Boolean,
       default: false
     },
-    message: {
-      type: String,
-      default: ''
-    },
-    messageDisplay: {
+    border: {
       type: Boolean,
-      default: false
+      default: true
     }
   },
 
@@ -80,38 +66,67 @@ export default {
       this.tempLength = this.localVal.length;
     }
   },
-  created: function () {
+  created() {
     this.localVal = this.value;
   },
   methods: {
-    updateInput(e) {
+    funcOnInput(e) {
       this.tempLength = this.localVal.length;
       this.$emit('input', this.localVal);
     },
     /* 监听自己清除按钮点击事件 */
     onEmpty() {
       this.localVal = '';
-      this.updateInput();
+      this.funcOnInput();
     }
   }
 };
 </script>
 
 <style>
-.cv-textarea-item {
+.cv-textarea-wrap {
+  border-radius: 4px;
+  background-color: #fff;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  padding: 9px;
+  align-items: stretch;
+  align-content: flex-start;
+}
+.cv-textarea__box {
+  flex: 1;
+  font-size: 15px;
+  color: #606266;
+  width: 100%;
+}
+.cv-textarea__content {
   min-height: 65px;
   line-height: 1.5em;
-  padding-top: 7px;
   font-size: 14px;
   width: auto;
-  margin-right: 20px;
 }
-.cv-textarea-maxlength {
+.cv-textarea__border {
+  border-width: 0.5px !important;
+  border-color: #dadbde !important;
+  border-style: solid;
+  padding-left: 10px;
+}
+
+.cv-textarea__maxlength {
   font-size: 14px;
   color: rgba(0, 0, 0, 0.4);
   text-align: right;
+  position: absolute;
+  right: 5px;
+  bottom: 2px;
+  font-size: 12px;
+  color: #909193;
+  background-color: #fff;
+  padding: 1px 4px;
 }
-.cv-textarea-placeholder {
+.cv-textarea__placeholder {
   font-size: 14px;
 }
 </style>

package/ui-cv/cv-th/cv-th.vue

@@ -0,0 +1,270 @@
+<template>
+  <!-- #ifdef H5 -->
+  <th
+    :rowspan="rowspan"
+    :colspan="colspan"
+    class="uni-table-th"
+    :class="{ 'table--border': border }"
+    :style="{ width: width + '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"
+        :filterData="filterData"
+        :filterType="filterType"
+        @change="ondropdown"
+      ></dropdown>
+    </view>
+  </th>
+  <!-- #endif -->
+  <!-- #ifndef H5 -->
+  <view class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: width + 'px', 'text-align': align }">
+    <slot></slot>
+  </view>
+  <!-- #endif -->
+</template>
+
+<script>
+import dropdown from './filter-dropdown.vue';
+/**
+ * Th 表头
+ * @description 表格内的表头单元格组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
+ * @property {Number} 	width 						单元格宽度
+ * @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: 'cvTh',
+  options: {
+    virtualHost: true
+  },
+  components: {
+    dropdown
+  },
+  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 [];
+      }
+    }
+  },
+  data() {
+    return {
+      border: false,
+      ascending: false,
+      descending: false
+    };
+  },
+  computed: {
+    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.width ? this.width : 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 scoped>
+.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 #ebeef5 solid;
+}
+
+.uni-table-th-row {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
+
+.table--border {
+  border-right: 1px #ebeef5 solid;
+}
+
+.uni-table-th-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.arrow {
+  display: block;
+  position: relative;
+  width: 10px;
+  height: 8px;
+  left: 5px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.down {
+  top: 3px;
+}
+
+.down ::after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  left: 2px;
+  top: -5px;
+  transform: rotate(45deg);
+  background-color: #ccc;
+}
+
+.down.active ::after {
+  background-color: #007aff;
+}
+
+.up ::after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  left: 2px;
+  top: 5px;
+  transform: rotate(45deg);
+  background-color: #ccc;
+}
+
+.up.active ::after {
+  background-color: #007aff;
+}
+</style>

package/ui-cv/cv-thead/cv-thead.vue

@@ -0,0 +1,114 @@
+<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: 'cvThead',
+  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 scoped>
+.uni-table-thead {
+  display: table-header-group;
+}
+
+.uni-table-tr {
+  /* #ifndef APP-NVUE */
+  display: table-row;
+  transition: all 0.3s;
+  box-sizing: border-box;
+  /* #endif */
+  border: 1px red solid;
+  background-color: #fafafa;
+}
+
+.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 #ebeef5 solid;
+  font-size: 14px;
+}
+
+.tr-table--border {
+  border-right: 1px #ebeef5 solid;
+}
+
+/* #ifndef APP-NVUE */
+/* #endif */
+</style>