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

package/ui-cv/cv-tag/cv-tag.vue

@@ -0,0 +1,276 @@
+<template>
+  <text class="uni-tag" v-if="text" :class="classes" :style="customStyle" @click="onClick">
+    <slot />
+    {{ text }}
+    <slot name="right" />
+  </text>
+</template>
+
+<script>
+/**
+ * Tag 标签
+ * @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=35
+ * @property {String} text 标签内容
+ * @property {String} size = [normal|small] 大小尺寸
+ * 	@value normal 正常
+ * 	@value small 小尺寸
+ * @property {String} type = [default|primary|success｜warning｜error｜royal]  颜色类型
+ * 	@value default 灰色
+ * 	@value primary 蓝色
+ * 	@value success 绿色
+ * 	@value warning 黄色
+ * 	@value error 红色
+ * 	@value royal 紫色
+ * @property {Boolean} disabled = [true|false] 是否为禁用状态
+ * @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签）
+ * @property {Boolean} circle = [true|false] 是否为圆角
+ * @event {Function} click 点击 Tag 触发事件
+ */
+
+export default {
+  name: 'cvTag',
+  emits: ['click'],
+  props: {
+    type: {
+      // 标签类型default、primary、success、warning、error、royal
+      type: String,
+      default: 'default'
+    },
+    size: {
+      // 标签大小 normal, small
+      type: String,
+      default: 'normal'
+    },
+    // 标签内容
+    text: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      // 是否为禁用状态
+      type: [Boolean, String],
+      default: false
+    },
+    inverted: {
+      // 是否为空心
+      type: [Boolean, String],
+      default: false
+    },
+    circle: {
+      // 是否为圆角样式
+      type: [Boolean, String],
+      default: false
+    },
+    mark: {
+      // 是否为标记样式
+      type: [Boolean, String],
+      default: false
+    },
+    customStyle: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    classes() {
+      const { type, disabled, inverted, circle, mark, size, isTrue } = this;
+      const classArr = [
+        'uni-tag--' + type,
+        isTrue(disabled) ? 'uni-tag--disabled' : '',
+        isTrue(inverted) ? type + '-uni-tag--inverted' : '',
+        isTrue(circle) ? 'uni-tag--circle' : '',
+        isTrue(mark) ? 'uni-tag--mark' : '',
+        'uni-tag--' + size,
+        type === 'default' ? 'uni-tag--default' : 'uni-tag-text',
+        isTrue(inverted) ? 'uni-tag-text--' + type : '',
+        size === 'small' ? 'uni-tag-text--small' : ''
+      ];
+      return classArr.join(' ');
+    }
+  },
+  methods: {
+    isTrue(value) {
+      return value === true || value === 'true';
+    },
+    onClick() {
+      if (this.isTrue(this.disabled)) return;
+      this.$emit('click');
+    }
+  }
+};
+</script>
+
+<style scoped>
+.uni-tag {
+  /* #ifndef APP-NVUE */
+  display: inline-block;
+  /* #endif */
+  /* #ifdef APP-NVUE */
+  align-self: flex-start;
+  /* #endif */
+  padding: 0px 16px;
+  line-height: 30px;
+  color: #333;
+  border-radius: 3px;
+  background-color: #f8f8f8;
+  border-width: 1rpx;
+  border-style: solid;
+  border-color: #f8f8f8;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+
+.uni-tag--circle {
+  border-radius: 15px;
+}
+
+.uni-tag--mark {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 15px;
+  border-bottom-right-radius: 15px;
+}
+
+.uni-tag--disabled {
+  opacity: 0.5;
+  /* #ifdef H5 */
+  cursor: not-allowed;
+  /* #endif */
+}
+
+.uni-tag--small {
+  height: 20px;
+  padding: 0px 8px;
+  line-height: 20px;
+  font-size: 12px;
+}
+
+.uni-tag--default {
+  color: #333;
+  font-size: 14px;
+}
+
+.uni-tag--royal {
+  color: #333;
+  font-size: 14px;
+}
+
+.uni-tag-text--small {
+  font-size: 12px;
+}
+
+.uni-tag-text {
+  color: #fff;
+  font-size: 14px;
+}
+
+.uni-tag-text--primary {
+  color: #007aff;
+}
+
+.uni-tag-text--success {
+  color: #4cd964;
+}
+
+.uni-tag-text--warning {
+  color: #f0ad4e;
+}
+
+.uni-tag-text--error {
+  color: #dd524d;
+}
+
+.uni-tag-text--royal {
+  color: #4335d6;
+}
+
+.uni-tag--primary {
+  color: #fff;
+  background-color: #007aff;
+  border-width: 1rpx;
+  border-style: solid;
+  border-color: #007aff;
+}
+
+.primary-uni-tag--inverted {
+  color: #007aff;
+  background-color: #ffffff;
+  border-width: 1rpx;
+  border-style: solid;
+  border-color: #007aff;
+}
+
+.uni-tag--success {
+  color: #fff;
+  background-color: #4cd964;
+  border-width: 1rpx;
+  border-style: solid;
+  border-color: #4cd964;
+}
+
+.success-uni-tag--inverted {
+  color: #4cd964;
+  background-color: #ffffff;
+  border-width: 1rpx;
+  border-style: solid;
+  border-color: #4cd964;
+}
+
+.uni-tag--warning {
+  color: #fff;
+  background-color: #f0ad4e;
+  border-width: 1rpx;
+  border-style: solid;
+  border-color: #f0ad4e;
+}
+
+.warning-uni-tag--inverted {
+  color: #f0ad4e;
+  background-color: #ffffff;
+  border-width: 1rpx;
+  border-style: solid;
+  border-color: #f0ad4e;
+}
+
+.uni-tag--error {
+  color: #fff;
+  background-color: #dd524d;
+  border-width: 1rpx;
+  border-style: solid;
+  border-color: #dd524d;
+}
+
+.error-uni-tag--inverted {
+  color: #dd524d;
+  background-color: #ffffff;
+  border-width: 1rpx;
+  border-style: solid;
+  border-color: #dd524d;
+}
+
+.uni-tag--royal {
+  color: #fff;
+  background-color: #4335d6;
+  border-width: 1rpx;
+  border-style: solid;
+  border-color: #4335d6;
+}
+
+.royal-uni-tag--inverted {
+  color: #4335d6;
+  background-color: #ffffff;
+  border-width: 1rpx;
+  border-style: solid;
+  border-color: #4335d6;
+}
+
+.uni-tag--inverted {
+  color: #333;
+  background-color: #ffffff;
+  border-width: 1rpx;
+  border-style: solid;
+  border-color: #f8f8f8;
+}
+</style>

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-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>