@10yun/cv-mobile-ui 0.5.44 → 0.5.45

package/uview-ui/components/u-sticky/u-sticky.vue

@@ -1,201 +0,0 @@
-<template>
-  <view class="u-sticky" :id="elId" :style="[style]">
-    <view :style="[stickyContent]" class="u-sticky__content">
-      <slot />
-    </view>
-  </view>
-</template>
-<script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
-/**
- * sticky 吸顶
- * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
- * @tutorial https://ijry.github.io/uview-plus/components/sticky.html
- * @property {String ｜ Number}	offsetTop		吸顶时与顶部的距离，单位px（默认 0 ）
- * @property {String ｜ Number}	customNavHeight	自定义导航栏的高度 （h5 默认44  其他默认 0 ）
- * @property {Boolean}			disabled		是否开启吸顶功能 （默认 false ）
- * @property {String}			bgColor			组件背景颜色（默认 '#ffffff' ）
- * @property {String ｜ Number}	zIndex			吸顶时的z-index值
- * @property {String ｜ Number}	index			自定义标识，用于区分是哪一个组件
- * @property {Object}			customStyle		组件的样式，对象形式
- * @event {Function} fixed		组件吸顶时触发
- * @event {Function} unfixed	组件取消吸顶时触发
- * @example <u-sticky offsetTop="200"><view>塞下秋来风景异，衡阳雁去无留意</view></u-sticky>
- */
-export default {
-  name: 'u-sticky',
-  mixins: [mpMixin, mixin, props],
-  data() {
-    return {
-      cssSticky: false, // 是否使用css的sticky实现
-      stickyTop: 0, // 吸顶的top值，因为可能受自定义导航栏影响，最终的吸顶值非offsetTop值
-      elId: uni.$u.guid(),
-      left: 0, // js模式时，吸顶的内容因为处于postition: fixed模式，为了和原来保持一致的样式，需要记录并重新设置它的left，height，width属性
-      width: 'auto',
-      height: 'auto',
-      fixed: false // js模式时，是否处于吸顶模式
-    };
-  },
-  computed: {
-    style() {
-      const style = {};
-      if (!this.disabled) {
-        if (this.cssSticky) {
-          style.position = 'sticky';
-          style.zIndex = this.uZindex;
-          style.top = uni.$u.addUnit(this.stickyTop);
-        } else {
-          style.height = this.fixed ? this.height + 'px' : 'auto';
-        }
-      } else {
-        // 无需吸顶时，设置会默认的relative(nvue)和非nvue的static静态模式即可
-        // #ifdef APP-NVUE
-        style.position = 'relative';
-        // #endif
-        // #ifndef APP-NVUE
-        style.position = 'static';
-        // #endif
-      }
-      style.backgroundColor = this.bgColor;
-      return uni.$u.deepMerge(uni.$u.addStyle(this.customStyle), style);
-    },
-    // 吸顶内容的样式
-    stickyContent() {
-      const style = {};
-      if (!this.cssSticky) {
-        style.position = this.fixed ? 'fixed' : 'static';
-        style.top = this.stickyTop + 'px';
-        style.left = this.left + 'px';
-        style.width = this.width == 'auto' ? 'auto' : this.width + 'px';
-        style.zIndex = this.uZindex;
-      }
-      return style;
-    },
-    uZindex() {
-      return this.zIndex ? this.zIndex : uni.$u.zIndex.sticky;
-    }
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      this.getStickyTop();
-      // 判断使用的模式
-      this.checkSupportCssSticky();
-      // 如果不支持css sticky，则使用js方案，此方案性能比不上css方案
-      if (!this.cssSticky) {
-        !this.disabled && this.initObserveContent();
-      }
-    },
-    initObserveContent() {
-      // 获取吸顶内容的高度，用于在js吸顶模式时，给父元素一个填充高度，防止"塌陷"
-      this.$uGetRect('#' + this.elId).then((res) => {
-        this.height = res.height;
-        this.left = res.left;
-        this.width = res.width;
-        this.$nextTick(() => {
-          this.observeContent();
-        });
-      });
-    },
-    observeContent() {
-      // 先断掉之前的观察
-      this.disconnectObserver('contentObserver');
-      const contentObserver = uni.createIntersectionObserver({
-        // 检测的区间范围
-        thresholds: [0.95, 0.98, 1]
-      });
-      // 到屏幕顶部的高度时触发
-      contentObserver.relativeToViewport({
-        top: -this.stickyTop
-      });
-      // 绑定观察的元素
-      contentObserver.observe(`#${this.elId}`, (res) => {
-        this.setFixed(res.boundingClientRect.top);
-      });
-      this.contentObserver = contentObserver;
-    },
-    setFixed(top) {
-      // 判断是否出于吸顶条件范围
-      const fixed = top <= this.stickyTop;
-      this.fixed = fixed;
-    },
-    disconnectObserver(observerName) {
-      // 断掉观察，释放资源
-      const observer = this[observerName];
-      observer && observer.disconnect();
-    },
-    getStickyTop() {
-      this.stickyTop = uni.$u.getPx(this.offsetTop) + uni.$u.getPx(this.customNavHeight);
-    },
-    async checkSupportCssSticky() {
-      // #ifdef H5
-      // H5，一般都是现代浏览器，是支持css sticky的，这里使用创建元素嗅探的形式判断
-      if (this.checkCssStickyForH5()) {
-        this.cssSticky = true;
-      }
-      // #endif
-      // 如果安卓版本高于8.0，依然认为是支持css sticky的(因为安卓7在某些机型，可能不支持sticky)
-      if (uni.$u.os() === 'android' && Number(uni.$u.sys().system) > 8) {
-        this.cssSticky = true;
-      }
-      // APP-Vue和微信平台，通过computedStyle判断是否支持css sticky
-      // #ifdef APP-VUE || MP-WEIXIN
-      this.cssSticky = await this.checkComputedStyle();
-      // #endif
-      // ios上，从ios6开始，都是支持css sticky的
-      if (uni.$u.os() === 'ios') {
-        this.cssSticky = true;
-      }
-      // nvue，是支持css sticky的
-      // #ifdef APP-NVUE
-      this.cssSticky = true;
-      // #endif
-    },
-    // 在APP和微信小程序上，通过uni.createSelectorQuery可以判断是否支持css sticky
-    checkComputedStyle() {
-      // 方法内进行判断，避免在其他平台生成无用代码
-      // #ifdef APP-VUE || MP-WEIXIN
-      return new Promise((resolve) => {
-        uni
-          .createSelectorQuery()
-          .in(this)
-          .select('.u-sticky')
-          .fields({
-            computedStyle: ['position']
-          })
-          .exec((e) => {
-            resolve('sticky' === e[0].position);
-          });
-      });
-      // #endif
-    },
-    // H5通过创建元素的形式嗅探是否支持css sticky
-    // 判断浏览器是否支持sticky属性
-    checkCssStickyForH5() {
-      // 方法内进行判断，避免在其他平台生成无用代码
-      // #ifdef H5
-      const vendorList = ['', '-webkit-', '-ms-', '-moz-', '-o-'],
-        vendorListLength = vendorList.length,
-        stickyElement = document.createElement('div');
-      for (let i = 0; i < vendorListLength; i++) {
-        stickyElement.style.position = vendorList[i] + 'sticky';
-        if (stickyElement.style.position !== '') {
-          return true;
-        }
-      }
-      return false;
-      // #endif
-    }
-  },
-  beforeDestroy() {
-    this.disconnectObserver('contentObserver');
-  }
-};
-</script>
-<style scoped>
-@import './style.css';
-</style>

package/uview-ui/components/u-subsection/props.js

@@ -1,50 +0,0 @@
-import defprops from '../../libs/config/props';
-export default {
-  props: {
-    // tab的数据
-    list: {
-      type: Array,
-      default: defprops.subsection.list
-    },
-    // 当前活动的tab的index
-    current: {
-      type: [String, Number],
-      default: defprops.subsection.current
-    },
-    // 激活的颜色
-    activeColor: {
-      type: String,
-      default: defprops.subsection.activeColor
-    },
-    // 未激活的颜色
-    inactiveColor: {
-      type: String,
-      default: defprops.subsection.inactiveColor
-    },
-    // 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
-    mode: {
-      type: String,
-      default: defprops.subsection.mode
-    },
-    // 字体大小
-    fontSize: {
-      type: [String, Number],
-      default: defprops.subsection.fontSize
-    },
-    // 激活tab的字体是否加粗
-    bold: {
-      type: Boolean,
-      default: defprops.subsection.bold
-    },
-    // mode = button时，组件背景颜色
-    bgColor: {
-      type: String,
-      default: defprops.subsection.bgColor
-    },
-    // 从list元素对象中读取的键名
-    keyName: {
-      type: String,
-      default: defprops.subsection.keyName
-    }
-  }
-};

package/uview-ui/components/u-subsection/style.css

@@ -1,95 +0,0 @@
-/* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: auto;
-  align-items: stretch;
-  align-content: flex-start;
-}
-/* #endif */
-.u-subsection {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  position: relative;
-  overflow: hidden;
-  /* #ifndef APP-NVUE */
-  width: 100%;
-  box-sizing: border-box;
-  /* #endif */
-}
-.u-subsection--button {
-  height: 32px;
-  background-color: rgb(238, 238, 239);
-  padding: 3px;
-  border-radius: 3px;
-  align-items: stretch;
-}
-.u-subsection--button__bar {
-  background-color: #ffffff;
-  border-radius: 3px !important;
-}
-.u-subsection--subsection {
-  height: 30px;
-}
-.u-subsection__bar {
-  position: absolute;
-  /* #ifndef APP-NVUE */
-  transition-property: transform, color;
-  transition-duration: 0.3s;
-  transition-timing-function: ease-in-out;
-  /* #endif */
-}
-.u-subsection__bar--first {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
-}
-.u-subsection__bar--center {
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
-}
-.u-subsection__bar--last {
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-.u-subsection__item {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-.u-subsection__item--no-border-right {
-  border-right-width: 0 !important;
-}
-.u-subsection__item--first {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-.u-subsection__item--last {
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-.u-subsection__item__text {
-  font-size: 12px;
-  line-height: 12px;
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  align-items: center;
-  transition-property: color;
-  transition-duration: 0.3s;
-}

package/uview-ui/components/u-subsection/style.scss

@@ -1,90 +0,0 @@
-@import '../../libs/css/components.scss';
-
-.u-subsection {
-  @include flex;
-  position: relative;
-  overflow: hidden;
-  /* #ifndef APP-NVUE */
-  width: 100%;
-  box-sizing: border-box;
-  /* #endif */
-
-  &--button {
-    height: 32px;
-    background-color: rgb(238, 238, 239);
-    padding: 3px;
-    border-radius: 3px;
-    align-items: stretch;
-
-    &__bar {
-      background-color: #ffffff;
-      border-radius: 3px !important;
-    }
-  }
-
-  &--subsection {
-    height: 30px;
-  }
-
-  &__bar {
-    position: absolute;
-    /* #ifndef APP-NVUE */
-    transition-property: transform, color;
-    transition-duration: 0.3s;
-    transition-timing-function: ease-in-out;
-    /* #endif */
-
-    &--first {
-      border-top-left-radius: 3px;
-      border-bottom-left-radius: 3px;
-      border-top-right-radius: 0px;
-      border-bottom-right-radius: 0px;
-    }
-
-    &--center {
-      border-top-left-radius: 0px;
-      border-bottom-left-radius: 0px;
-      border-top-right-radius: 0px;
-      border-bottom-right-radius: 0px;
-    }
-
-    &--last {
-      border-top-left-radius: 0px;
-      border-bottom-left-radius: 0px;
-      border-top-right-radius: 3px;
-      border-bottom-right-radius: 3px;
-    }
-  }
-
-  &__item {
-    @include flex;
-    flex: 1;
-    justify-content: center;
-    align-items: center;
-    // vue环境下，需要设置相对定位，因为滑块为绝对定位，item需要在滑块的上面
-    position: relative;
-
-    &--no-border-right {
-      border-right-width: 0 !important;
-    }
-
-    &--first {
-      border-top-left-radius: 3px;
-      border-bottom-left-radius: 3px;
-    }
-
-    &--last {
-      border-top-right-radius: 3px;
-      border-bottom-right-radius: 3px;
-    }
-
-    &__text {
-      font-size: 12px;
-      line-height: 12px;
-      @include flex;
-      align-items: center;
-      transition-property: color;
-      transition-duration: 0.3s;
-    }
-  }
-}

package/uview-ui/components/u-subsection/u-subsection.vue

@@ -1,188 +0,0 @@
-<template>
-  <view
-    class="u-subsection"
-    ref="u-subsection"
-    :class="[`u-subsection--${mode}`]"
-    :style="[$u.addStyle(customStyle), wrapperStyle]"
-  >
-    <view
-      class="u-subsection__bar"
-      ref="u-subsection__bar"
-      :style="[barStyle]"
-      :class="[
-        mode === 'button' && 'u-subsection--button__bar',
-        current === 0 && mode === 'subsection' && 'u-subsection__bar--first',
-        current > 0 && current < list.length - 1 && mode === 'subsection' && 'u-subsection__bar--center',
-        current === list.length - 1 && mode === 'subsection' && 'u-subsection__bar--last'
-      ]"
-    ></view>
-    <view
-      class="u-subsection__item"
-      :class="[
-        `u-subsection__item--${index}`,
-        index < list.length - 1 && 'u-subsection__item--no-border-right',
-        index === 0 && 'u-subsection__item--first',
-        index === list.length - 1 && 'u-subsection__item--last'
-      ]"
-      :ref="`u-subsection__item--${index}`"
-      :style="[itemStyle(index)]"
-      @tap="clickHandler(index)"
-      v-for="(item, index) in list"
-      :key="index"
-    >
-      <text class="u-subsection__item__text" :style="[textStyle(index)]">{{ getText(item) }}</text>
-    </view>
-  </view>
-</template>
-<script>
-// #ifdef APP-NVUE
-const dom = uni.requireNativePlugin('dom');
-const animation = uni.requireNativePlugin('animation');
-// #endif
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
-/**
- * Subsection 分段器
- * @description 该分段器一般用于用户从几个选项中选择某一个的场景
- * @tutorial https://ijry.github.io/uview-plus/components/subsection.html
- * @property {Array}			list			tab的数据
- * @property {String ｜ Number}	current			当前活动的tab的index（默认 0 ）
- * @property {String}			activeColor		激活时的颜色（默认 '#3c9cff' ）
- * @property {String}			inactiveColor	未激活时的颜色（默认 '#303133' ）
- * @property {String}			mode			模式选择，mode=button为按钮形式，mode=subsection时为分段模式（默认 'button' ）
- * @property {String ｜ Number}	fontSize		字体大小，单位px（默认 12 ）
- * @property {Boolean}			bold			激活选项的字体是否加粗（默认 true ）
- * @property {String}			bgColor			组件背景颜色，mode为button时有效（默认 '#eeeeef' ）
- * @property {Object}			customStyle		定义需要用到的外部样式
- * @property {String}	        keyName	        从`list`元素对象中读取的键名（默认 'name' ）
- *
- * @event {Function} change		分段器选项发生改变时触发  回调 index：选项的index索引值，从0开始
- * @example <u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
- */
-export default {
-  name: 'u-subsection',
-  mixins: [mpMixin, mixin, props],
-  data() {
-    return {
-      // 组件尺寸
-      itemRect: {
-        width: 0,
-        height: 0
-      }
-    };
-  },
-  watch: {
-    list(newValue, oldValue) {
-      this.init();
-    },
-    current: {
-      immediate: true,
-      handler(n) {
-        // #ifdef APP-NVUE
-        // 在安卓nvue上，如果通过translateX进行位移，到最后一个时，会导致右侧无法绘制圆角
-        // 故用animation模块进行位移
-        const ref = this.$refs?.['u-subsection__bar']?.ref;
-        // 不存在ref的时候(理解为第一次初始化时，需要渲染dom，进行一定延时再获取ref)，这里的100ms是经过测试得出的结果(某些安卓需要延时久一点)，勿随意修改
-        uni.$u.sleep(ref ? 0 : 100).then(() => {
-          animation.transition(this.$refs['u-subsection__bar'].ref, {
-            styles: {
-              transform: `translateX(${n * this.itemRect.width}px)`,
-              transformOrigin: 'center center'
-            },
-            duration: 300
-          });
-        });
-        // #endif
-      }
-    }
-  },
-  computed: {
-    wrapperStyle() {
-      const style = {};
-      // button模式时，设置背景色
-      if (this.mode === 'button') {
-        style.backgroundColor = this.bgColor;
-      }
-      return style;
-    },
-    // 滑块的样式
-    barStyle() {
-      const style = {};
-      style.width = `${this.itemRect.width}px`;
-      style.height = `${this.itemRect.height}px`;
-      // 通过translateX移动滑块，其移动的距离为索引*item的宽度
-      // #ifndef APP-NVUE
-      style.transform = `translateX(${this.current * this.itemRect.width}px)`;
-      // #endif
-      if (this.mode === 'subsection') {
-        // 在subsection模式下，需要动态设置滑块的圆角，因为移动滑块使用的是translateX，无法通过父元素设置overflow: hidden隐藏滑块的直角
-        style.backgroundColor = this.activeColor;
-      }
-      return style;
-    },
-    // 分段器item的样式
-    itemStyle(index) {
-      return (index) => {
-        const style = {};
-        if (this.mode === 'subsection') {
-          // 设置border的样式
-          style.borderColor = this.activeColor;
-          style.borderWidth = '1px';
-          style.borderStyle = 'solid';
-        }
-        return style;
-      };
-    },
-    // 分段器文字颜色
-    textStyle(index) {
-      return (index) => {
-        const style = {};
-        style.fontWeight = this.bold && this.current === index ? 'bold' : 'normal';
-        style.fontSize = uni.$u.addUnit(this.fontSize);
-        // subsection模式下，激活时默认为白色的文字
-        if (this.mode === 'subsection') {
-          style.color = this.current === index ? '#fff' : this.inactiveColor;
-        } else {
-          // button模式下，激活时文字颜色默认为activeColor
-          style.color = this.current === index ? this.activeColor : this.inactiveColor;
-        }
-        return style;
-      };
-    }
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      uni.$u.sleep().then(() => this.getRect());
-    },
-    // 判断展示文本
-    getText(item) {
-      return typeof item === 'object' ? item[this.keyName] : item;
-    },
-    // 获取组件的尺寸
-    getRect() {
-      // #ifndef APP-NVUE
-      this.$uGetRect('.u-subsection__item--0').then((size) => {
-        this.itemRect = size;
-      });
-      // #endif
-      // #ifdef APP-NVUE
-      const ref = this.$refs['u-subsection__item--0'][0];
-      ref &&
-        dom.getComponentRect(ref, (res) => {
-          this.itemRect = res.size;
-        });
-      // #endif
-    },
-    clickHandler(index) {
-      this.$emit('change', index);
-    }
-  }
-};
-</script>
-<style scoped>
-@import './style.css';
-</style>

package/uview-ui/components/u-swipe-action/props.js

@@ -1,10 +0,0 @@
-import defprops from '../../libs/config/props';
-export default {
-  props: {
-    // 是否自动关闭其他swipe按钮组
-    autoClose: {
-      type: Boolean,
-      default: defprops.swipeAction.autoClose
-    }
-  }
-};

package/uview-ui/components/u-swipe-action/u-swipe-action.vue

@@ -1,65 +0,0 @@
-<template>
-  <view class="u-swipe-action">
-    <slot></slot>
-  </view>
-</template>
-<script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
-/**
- * SwipeAction 滑动单元格
- * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作
- * @tutorial https://ijry.github.io/uview-plus/components/swipeAction.html
- * @property {Boolean}	autoClose	是否自动关闭其他swipe按钮组
- * @event {Function(index)}	click	点击组件时触发
- * @example	<u-swipe-action><u-swipe-action-item :rightOptions="options1" ></u-swipe-action-item></u-swipe-action>
- */
-export default {
-  name: 'u-swipe-action',
-  mixins: [mpMixin, mixin, props],
-  data() {
-    return {};
-  },
-  provide() {
-    return {
-      swipeAction: this
-    };
-  },
-  computed: {
-    // 这里computed的变量，都是子组件u-swipe-action-item需要用到的，由于头条小程序的兼容性差异，子组件无法实时监听父组件参数的变化
-    // 所以需要手动通知子组件，这里返回一个parentData变量，供watch监听，在其中去通知每一个子组件重新从父组件(u-swipe-action-item)
-    // 拉取父组件新的变化后的参数
-    parentData() {
-      return [this.autoClose];
-    }
-  },
-  watch: {
-    // 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
-    parentData() {
-      if (this.children.length) {
-        this.children.map((child) => {
-          // 判断子组件(u-swipe-action-item)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
-          typeof child.updateParentData === 'function' && child.updateParentData();
-        });
-      }
-    }
-  },
-  created() {
-    this.children = [];
-  },
-  methods: {
-    closeOther(child) {
-      if (this.autoClose) {
-        // 历遍所有的单元格，找出非当前操作中的单元格，进行关闭
-        this.children.map((item, index) => {
-          if (child !== item) {
-            item.closeHandler();
-          }
-        });
-      }
-    }
-  }
-};
-</script>
-<style scoped></style>