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

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

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

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

@@ -1,166 +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: '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

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