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

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

@@ -1,276 +0,0 @@
-<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

@@ -1,28 +0,0 @@
-<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

@@ -1,93 +0,0 @@
-<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

@@ -1,270 +0,0 @@
-<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>