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

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>

package/ui-cv/cv-title/cv-title.vue

@@ -0,0 +1,168 @@
+<template>
+  <view class="uni-title__box" :style="{ 'align-items': textAlign }">
+    <text class="uni-title__base" :class="['uni-' + type]" :style="{ color: color }">{{ title }}</text>
+  </view>
+</template>
+
+<script>
+/**
+ * Title 章节标题
+ * @description 章节标题，通常用于记录页面标题，使用当前组件，uni-app 如果开启统计，将会自动统计页面标题
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=1066
+ * @property {String} type = [h1|h2|h3|h4|h5] 标题类型
+ * 	@value h1 一级标题
+ * 	@value h2 二级标题
+ * 	@value h3 三级标题
+ * 	@value h4 四级标题
+ * 	@value h5 五级标题
+ * @property {String} title 章节标题内容
+ * @property {String} align = [left|center|right] 对齐方式
+ * 	@value left 做对齐
+ * 	@value center 居中对齐
+ * 	@value right 右对齐
+ * @property {String} color 字体颜色
+ * @property {Boolean} stat = [true|false] 是否开启统计功能呢，如不填写type值，默认为开启，填写 type 属性，默认为关闭
+ */
+export default {
+  name: 'cvTitle',
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    align: {
+      type: String,
+      default: 'left'
+    },
+    color: {
+      type: String,
+      default: '#333333'
+    },
+    stat: {
+      type: [Boolean, String],
+      default: ''
+    }
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    textAlign() {
+      let align = 'center';
+      switch (this.align) {
+        case 'left':
+          align = 'flex-start';
+          break;
+        case 'center':
+          align = 'center';
+          break;
+        case 'right':
+          align = 'flex-end';
+          break;
+      }
+      return align;
+    }
+  },
+  watch: {
+    title(newVal) {
+      if (this.isOpenStat()) {
+        // 上报数据
+        if (uni.report) {
+          uni.report('title', this.title);
+        }
+      }
+    }
+  },
+  mounted() {
+    if (this.isOpenStat()) {
+      // 上报数据
+      if (uni.report) {
+        uni.report('title', this.title);
+      }
+    }
+  },
+  methods: {
+    isOpenStat() {
+      if (this.stat === '') {
+        this.isStat = false;
+      }
+      let stat_type = (typeof this.stat === 'boolean' && this.stat) || (typeof this.stat === 'string' && this.stat !== '');
+      if (this.type === '') {
+        this.isStat = true;
+        if (this.stat.toString() === 'false') {
+          this.isStat = false;
+        }
+      }
+
+      if (this.type !== '') {
+        this.isStat = true;
+        if (stat_type) {
+          this.isStat = true;
+        } else {
+          this.isStat = false;
+        }
+      }
+      return this.isStat;
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* .uni-title {
+
+} */
+.uni-title__box {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 8px 0;
+  flex: 1;
+}
+
+.uni-title__base {
+  font-size: 15px;
+  color: #333;
+  font-weight: 500;
+}
+
+.uni-h1 {
+  font-size: 20px;
+  color: #333;
+  font-weight: bold;
+}
+
+.uni-h2 {
+  font-size: 18px;
+  color: #333;
+  font-weight: bold;
+}
+
+.uni-h3 {
+  font-size: 16px;
+  color: #333;
+  font-weight: bold;
+  /* font-weight: 400; */
+}
+
+.uni-h4 {
+  font-size: 14px;
+  color: #333;
+  font-weight: bold;
+  /* font-weight: 300; */
+}
+
+.uni-h5 {
+  font-size: 12px;
+  color: #333;
+  font-weight: bold;
+  /* font-weight: 200; */
+}
+</style>

package/ui-cv/cv-tr/cv-tr.vue

@@ -0,0 +1,166 @@
+<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: 'cvTr',
+  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 scoped>
+.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 #ebeef5 solid;
+  font-size: 14px;
+}
+
+.tr-table--border {
+  border-right: 1px #ebeef5 solid;
+}
+
+/* #ifndef APP-NVUE */
+/* #endif */
+</style>

package/ui-cv/cv-transition/cv-transition.vue

@@ -0,0 +1,279 @@
+<template>
+  <view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+import { createAnimation } from './createAnimation';
+
+/**
+ * Transition 过渡动画
+ * @description 简单过渡动画组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=985
+ * @property {Boolean} show = [false|true] 控制组件显示或隐藏
+ * @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
+ *  @value fade 渐隐渐出过渡
+ *  @value slide-top 由上至下过渡
+ *  @value slide-right 由右至左过渡
+ *  @value slide-bottom 由下至上过渡
+ *  @value slide-left 由左至右过渡
+ *  @value zoom-in 由小到大过渡
+ *  @value zoom-out 由大到小过渡
+ * @property {Number} duration 过渡动画持续时间
+ * @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
+ */
+export default {
+  name: 'cvTransition',
+  emits: ['click', 'change'],
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    modeClass: {
+      type: [Array, String],
+      default() {
+        return 'fade';
+      }
+    },
+    duration: {
+      type: Number,
+      default: 300
+    },
+    styles: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    customClass: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      isShow: false,
+      transform: '',
+      opacity: 1,
+      animationData: {},
+      durationTime: 300,
+      config: {}
+    };
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.open();
+        } else {
+          // 避免上来就执行 close,导致动画错乱
+          if (this.isShow) {
+            this.close();
+          }
+        }
+      },
+      immediate: true
+    }
+  },
+  computed: {
+    // 生成样式数据
+    stylesObject() {
+      let styles = {
+        ...this.styles,
+        'transition-duration': this.duration / 1000 + 's'
+      };
+      let transform = '';
+      for (let i in styles) {
+        let line = this.toLine(i);
+        transform += line + ':' + styles[i] + ';';
+      }
+      return transform;
+    },
+    // 初始化动画条件
+    transformStyles() {
+      return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject;
+    }
+  },
+  created() {
+    // 动画默认配置
+    this.config = {
+      duration: this.duration,
+      timingFunction: 'ease',
+      transformOrigin: '50% 50%',
+      delay: 0
+    };
+    this.durationTime = this.duration;
+  },
+  methods: {
+    /**
+     *  ref 触发 初始化动画
+     */
+    init(obj = {}) {
+      if (obj.duration) {
+        this.durationTime = obj.duration;
+      }
+      this.animation = createAnimation(Object.assign(this.config, obj));
+    },
+    /**
+     * 点击组件触发回调
+     */
+    onClick() {
+      this.$emit('click', {
+        detail: this.isShow
+      });
+    },
+    /**
+     * ref 触发 动画分组
+     * @param {Object} obj
+     */
+    step(obj, config = {}) {
+      if (!this.animation) return;
+      for (let i in obj) {
+        try {
+          if (typeof obj[i] === 'object') {
+            this.animation[i](...obj[i]);
+          } else {
+            this.animation[i](obj[i]);
+          }
+        } catch (e) {
+          console.error(`方法 ${i} 不存在`);
+        }
+      }
+      this.animation.step(config);
+      return this;
+    },
+    /**
+     *  ref 触发 执行动画
+     */
+    run(fn) {
+      if (!this.animation) return;
+      this.animation.run(fn);
+    },
+    // 开始过度动画
+    open() {
+      clearTimeout(this.timer);
+      this.transform = '';
+      this.isShow = true;
+      let { opacity, transform } = this.styleInit(false);
+      if (typeof opacity !== 'undefined') {
+        this.opacity = opacity;
+      }
+      this.transform = transform;
+      // 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
+      this.$nextTick(() => {
+        // TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
+        this.timer = setTimeout(() => {
+          this.animation = createAnimation(this.config, this);
+          this.tranfromInit(false).step();
+          this.animation.run();
+          this.$emit('change', {
+            detail: this.isShow
+          });
+        }, 20);
+      });
+    },
+    // 关闭过度动画
+    close(type) {
+      if (!this.animation) return;
+      this.tranfromInit(true)
+        .step()
+        .run(() => {
+          this.isShow = false;
+          this.animationData = null;
+          this.animation = null;
+          let { opacity, transform } = this.styleInit(false);
+          this.opacity = opacity || 1;
+          this.transform = transform;
+          this.$emit('change', {
+            detail: this.isShow
+          });
+        });
+    },
+    // 处理动画开始前的默认样式
+    styleInit(type) {
+      let styles = {
+        transform: ''
+      };
+      let buildStyle = (type, mode) => {
+        if (mode === 'fade') {
+          styles.opacity = this.animationType(type)[mode];
+        } else {
+          styles.transform += this.animationType(type)[mode] + ' ';
+        }
+      };
+      if (typeof this.modeClass === 'string') {
+        buildStyle(type, this.modeClass);
+      } else {
+        this.modeClass.forEach((mode) => {
+          buildStyle(type, mode);
+        });
+      }
+      return styles;
+    },
+    // 处理内置组合动画
+    tranfromInit(type) {
+      let buildTranfrom = (type, mode) => {
+        let aniNum = null;
+        if (mode === 'fade') {
+          aniNum = type ? 0 : 1;
+        } else {
+          aniNum = type ? '-100%' : '0';
+          if (mode === 'zoom-in') {
+            aniNum = type ? 0.8 : 1;
+          }
+          if (mode === 'zoom-out') {
+            aniNum = type ? 1.2 : 1;
+          }
+          if (mode === 'slide-right') {
+            aniNum = type ? '100%' : '0';
+          }
+          if (mode === 'slide-bottom') {
+            aniNum = type ? '100%' : '0';
+          }
+        }
+        this.animation[this.animationMode()[mode]](aniNum);
+      };
+      if (typeof this.modeClass === 'string') {
+        buildTranfrom(type, this.modeClass);
+      } else {
+        this.modeClass.forEach((mode) => {
+          buildTranfrom(type, mode);
+        });
+      }
+
+      return this.animation;
+    },
+    animationType(type) {
+      return {
+        fade: type ? 1 : 0,
+        'slide-top': `translateY(${type ? '0' : '-100%'})`,
+        'slide-right': `translateX(${type ? '0' : '100%'})`,
+        'slide-bottom': `translateY(${type ? '0' : '100%'})`,
+        'slide-left': `translateX(${type ? '0' : '-100%'})`,
+        'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
+        'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
+      };
+    },
+    // 内置动画类型与实际动画对应字典
+    animationMode() {
+      return {
+        fade: 'opacity',
+        'slide-top': 'translateY',
+        'slide-right': 'translateX',
+        'slide-bottom': 'translateY',
+        'slide-left': 'translateX',
+        'zoom-in': 'scale',
+        'zoom-out': 'scale'
+      };
+    },
+    // 驼峰转中横线
+    toLine(name) {
+      return name.replace(/([A-Z])/g, '-$1').toLowerCase();
+    }
+  }
+};
+</script>
+
+<style scoped></style>