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

package/uview-ui/components/u-loading-icon/style.scss

@@ -1,153 +0,0 @@
-@import '../../libs/css/components.scss';
-$u-loading-icon-color: #c8c9cc !default;
-$u-loading-icon-text-margin-left: 4px !default;
-$u-loading-icon-text-color: $u-content-color !default;
-$u-loading-icon-text-font-size: 14px !default;
-$u-loading-icon-text-line-height: 20px !default;
-$u-loading-width: 30px !default;
-$u-loading-height: 30px !default;
-$u-loading-max-width: 100% !default;
-$u-loading-max-height: 100% !default;
-$u-loading-semicircle-border-width: 2px !default;
-$u-loading-semicircle-border-color: transparent !default;
-$u-loading-semicircle-border-top-right-radius: 100px !default;
-$u-loading-semicircle-border-top-left-radius: 100px !default;
-$u-loading-semicircle-border-bottom-left-radius: 100px !default;
-$u-loading-semicircle-border-bottom-right-radiu: 100px !default;
-$u-loading-semicircle-border-style: solid !default;
-$u-loading-circle-border-top-right-radius: 100px !default;
-$u-loading-circle-border-top-left-radius: 100px !default;
-$u-loading-circle-border-bottom-left-radius: 100px !default;
-$u-loading-circle-border-bottom-right-radiu: 100px !default;
-$u-loading-circle-border-width: 2px !default;
-$u-loading-circle-border-top-color: #e5e5e5 !default;
-$u-loading-circle-border-right-color: $u-loading-circle-border-top-color !default;
-$u-loading-circle-border-bottom-color: $u-loading-circle-border-top-color !default;
-$u-loading-circle-border-left-color: $u-loading-circle-border-top-color !default;
-$u-loading-circle-border-style: solid !default;
-$u-loading-icon-host-font-size: 0px !default;
-$u-loading-icon-host-line-height: 1 !default;
-$u-loading-icon-vertical-margin: 6px 0 0 !default;
-$u-loading-icon-dot-top: 0 !default;
-$u-loading-icon-dot-left: 0 !default;
-$u-loading-icon-dot-width: 100% !default;
-$u-loading-icon-dot-height: 100% !default;
-$u-loading-icon-dot-before-width: 2px !default;
-$u-loading-icon-dot-before-height: 25% !default;
-$u-loading-icon-dot-before-margin: 0 auto !default;
-$u-loading-icon-dot-before-background-color: currentColor !default;
-$u-loading-icon-dot-before-border-radius: 40% !default;
-
-.u-loading-icon {
-  /* #ifndef APP-NVUE */
-  // display: inline-flex;
-  /* #endif */
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  color: $u-loading-icon-color;
-
-  &__text {
-    margin-left: $u-loading-icon-text-margin-left;
-    color: $u-loading-icon-text-color;
-    font-size: $u-loading-icon-text-font-size;
-    line-height: $u-loading-icon-text-line-height;
-  }
-
-  &__spinner {
-    width: $u-loading-width;
-    height: $u-loading-height;
-    position: relative;
-    /* #ifndef APP-NVUE */
-    box-sizing: border-box;
-    max-width: $u-loading-max-width;
-    max-height: $u-loading-max-height;
-    animation: u-rotate 1s linear infinite;
-    /* #endif */
-  }
-
-  &__spinner--semicircle {
-    border-width: $u-loading-semicircle-border-width;
-    border-color: $u-loading-semicircle-border-color;
-    border-top-right-radius: $u-loading-semicircle-border-top-right-radius;
-    border-top-left-radius: $u-loading-semicircle-border-top-left-radius;
-    border-bottom-left-radius: $u-loading-semicircle-border-bottom-left-radius;
-    border-bottom-right-radius: $u-loading-semicircle-border-bottom-right-radiu;
-    border-style: $u-loading-semicircle-border-style;
-  }
-
-  &__spinner--circle {
-    border-top-right-radius: $u-loading-circle-border-top-right-radius;
-    border-top-left-radius: $u-loading-circle-border-top-left-radius;
-    border-bottom-left-radius: $u-loading-circle-border-bottom-left-radius;
-    border-bottom-right-radius: $u-loading-circle-border-bottom-right-radiu;
-    border-width: $u-loading-circle-border-width;
-    border-top-color: $u-loading-circle-border-top-color;
-    border-right-color: $u-loading-circle-border-right-color;
-    border-bottom-color: $u-loading-circle-border-bottom-color;
-    border-left-color: $u-loading-circle-border-left-color;
-    border-style: $u-loading-circle-border-style;
-  }
-
-  &--vertical {
-    flex-direction: column;
-  }
-}
-
-/* #ifndef APP-NVUE */
-:host {
-  font-size: $u-loading-icon-host-font-size;
-  line-height: $u-loading-icon-host-line-height;
-}
-
-.u-loading-icon {
-  &__spinner--spinner {
-    animation-timing-function: steps(12);
-  }
-
-  &__text:empty {
-    display: none;
-  }
-
-  &--vertical &__text {
-    margin: $u-loading-icon-vertical-margin;
-    color: $u-content-color;
-  }
-
-  &__dot {
-    position: absolute;
-    top: $u-loading-icon-dot-top;
-    left: $u-loading-icon-dot-left;
-    width: $u-loading-icon-dot-width;
-    height: $u-loading-icon-dot-height;
-
-    &:before {
-      display: block;
-      width: $u-loading-icon-dot-before-width;
-      height: $u-loading-icon-dot-before-height;
-      margin: $u-loading-icon-dot-before-margin;
-      background-color: $u-loading-icon-dot-before-background-color;
-      border-radius: $u-loading-icon-dot-before-border-radius;
-      content: ' ';
-    }
-  }
-}
-
-@for $i from 1 through 12 {
-  .u-loading-icon__dot:nth-of-type(#{$i}) {
-    transform: rotate($i * 30deg);
-    opacity: 1 - 0.0625 * ($i - 1);
-  }
-}
-
-@keyframes u-rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-/* #endif */

package/uview-ui/components/u-loading-icon/u-loading-icon.vue

@@ -1 +0,0 @@
-<template>
  <view class="u-loading-icon" :style="[$u.addStyle(customStyle)]" :class="[vertical && 'u-loading-icon--vertical']" v-if="show">
    <view
      v-if="!webviewHide"
      class="u-loading-icon__spinner"
      :class="[`u-loading-icon__spinner--${mode}`]"
      ref="ani"
      :style="{
        color: color,
        width: $u.addUnit(size),
        height: $u.addUnit(size),
        borderTopColor: color,
        borderBottomColor: otherBorderColor,
        borderLeftColor: otherBorderColor,
        borderRightColor: otherBorderColor,
        'animation-duration': `${duration}ms`,
        'animation-timing-function': mode === 'semicircle' || mode === 'circle' ? timingFunction : ''
      }"
    >
      <block v-if="mode === 'spinner'">
        <!-- #ifndef APP-NVUE -->
        <view v-for="(item, index) in array12" :key="index" class="u-loading-icon__dot"></view>
        <!-- #endif -->
        <!-- #ifdef APP-NVUE -->
        <!-- 此组件内部图标部分无法设置宽高，即使通过width和height配置了也无效 -->
        <loading-indicator
          v-if="!webviewHide"
          class="u-loading-indicator"
          :animating="true"
          :style="{
            color: color,
            width: $u.addUnit(size),
            height: $u.addUnit(size)
          }"
        />
        <!-- #endif -->
      </block>
    </view>
    <text
      v-if="text"
      class="u-loading-icon__text"
      :style="{
        fontSize: $u.addUnit(textSize),
        color: textColor
      }"
    >
      {{ text }}
    </text>
  </view>
 * loading 加载动画
 * @description 警此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
 * @tutorial https://ijry.github.io/uview-plus/components/loading.html
 * @property {Boolean}			show			是否显示组件  (默认 true)
 * @property {String}			color			动画活动区域的颜色，只对 mode = flower 模式有效（默认color['u-tips-color']）
 * @property {String}			textColor		提示文本的颜色（默认color['u-tips-color']）
 * @property {Boolean}			vertical		文字和图标是否垂直排列 (默认 false )
 * @property {String}			mode			模式选择，见官网说明（默认 'circle' ）
 * @property {String | Number}	size			加载图标的大小，单位px （默认 24 ）
 * @property {String | Number}	textSize		文字大小（默认 15 ）
 * @property {String | Number}	text			文字内容
 * @property {String}			timingFunction	动画模式 （默认 'ease-in-out' ）
 * @property {String | Number}	duration		动画执行周期时间（默认 1200）
 * @property {String}			inactiveColor	mode=circle时的暗边颜色
 * @property {Object}			customStyle		定义需要用到的外部样式
 * @example <u-loading mode="circle"></u-loading>
 */
  name: 'u-loading-icon',
  mixins: [mpMixin, mixin, props],
  data() {
    return {
      // Array.form可以通过一个伪数组对象创建指定长度的数组
      // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
      array12: Array.from({
        length: 12
      }),
      // 这里需要设置默认值为360，否则在安卓nvue上，会延迟一个duration周期后才执行
      // 在iOS nvue上，则会一开始默认执行两个周期的动画
      aniAngel: 360, // 动画旋转角度
      webviewHide: false, // 监听webview的状态，如果隐藏了页面，则停止动画，以免性能消耗
      loading: false // 是否运行中，针对nvue使用
    };
  },
  computed: {
    // 当为circle类型时，给其另外三边设置一个更轻一些的颜色
    // 之所以需要这么做的原因是，比如父组件传了color为红色，那么需要另外的三个边为浅红色
    // 而不能是固定的某一个其他颜色(因为这个固定的颜色可能浅蓝，导致效果没有那么细腻良好)
    otherBorderColor() {
      const lightColor = uni.$u.colorGradient(this.color, '#ffffff', 100)[80];
      if (this.mode === 'circle') {
        return this.inactiveColor ? this.inactiveColor : lightColor;
      } else {
        return 'transparent';
      }
      // return this.mode === 'circle' ? this.inactiveColor ? this.inactiveColor : lightColor : 'transparent'
    }
  },
  watch: {
    show(n) {
      // nvue中，show为true，且为非loading状态，就重新执行动画模块
      // #ifdef APP-NVUE
      if (n && !this.loading) {
        setTimeout(() => {
          this.startAnimate();
        }, 30);
      }
      // #endif
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      setTimeout(() => {
        // #ifdef APP-NVUE
        this.show && this.nvueAnimate();
        // #endif
        // #ifdef APP-PLUS
        this.show && this.addEventListenerToWebview();
        // #endif
      }, 20);
    },
    // 监听webview的显示与隐藏
    addEventListenerToWebview() {
      // webview的堆栈
      const pages = getCurrentPages();
      // 当前页面
      const page = pages[pages.length - 1];
      // 当前页面的webview实例
      const currentWebview = page.$getAppWebview();
      // 监听webview的显示与隐藏，从而停止或者开始动画(为了性能)
      currentWebview.addEventListener('hide', () => {
        this.webviewHide = true;
      });
      currentWebview.addEventListener('show', () => {
        this.webviewHide = false;
      });
    },
    // #ifdef APP-NVUE
    nvueAnimate() {
      // nvue下，非spinner类型时才需要旋转，因为nvue的spinner类型，使用了weex的
      // loading-indicator组件，自带旋转功能
      this.mode !== 'spinner' && this.startAnimate();
    },
    // 执行nvue的animate模块动画
    startAnimate() {
      this.loading = true;
      const ani = this.$refs.ani;
      if (!ani) return;
      animation.transition(
        ani,
        {
          // 进行角度旋转
          styles: {
            transform: `rotate(${this.aniAngel}deg)`,
            transformOrigin: 'center center'
          },
          duration: this.duration,
          timingFunction: this.timingFunction
          // delay: 10
        },
        () => {
          // 每次增加360deg，为了让其重新旋转一周
          this.aniAngel += 360;
          // 动画结束后，继续循环执行动画，需要同时判断webviewHide变量
          // nvue安卓，页面隐藏后依然会继续执行startAnimate方法
          this.show && !this.webviewHide ? this.startAnimate() : (this.loading = false);
        }
      );
    }
    // #endif
  }

package/uview-ui/components/u-loading-page/props.js

@@ -1,50 +0,0 @@
-import defprops from '../../libs/config/props';
-export default {
-  props: {
-    // 提示内容
-    loadingText: {
-      type: [String, Number],
-      default: defprops.loadingPage.loadingText
-    },
-    // 文字上方用于替换loading动画的图片
-    image: {
-      type: String,
-      default: defprops.loadingPage.image
-    },
-    // 加载动画的模式，circle-圆形，spinner-花朵形，semicircle-半圆形
-    loadingMode: {
-      type: String,
-      default: defprops.loadingPage.loadingMode
-    },
-    // 是否加载中
-    loading: {
-      type: Boolean,
-      default: defprops.loadingPage.loading
-    },
-    // 背景色
-    bgColor: {
-      type: String,
-      default: defprops.loadingPage.bgColor
-    },
-    // 文字颜色
-    color: {
-      type: String,
-      default: defprops.loadingPage.color
-    },
-    // 文字大小
-    fontSize: {
-      type: [String, Number],
-      default: defprops.loadingPage.fontSize
-    },
-    // 图标大小
-    iconSize: {
-      type: [String, Number],
-      default: defprops.loadingPage.fontSize
-    },
-    // 加载中图标的颜色，只能rgb或者十六进制颜色值
-    loadingColor: {
-      type: String,
-      default: defprops.loadingPage.loadingColor
-    }
-  }
-};

package/uview-ui/components/u-loading-page/style.css

@@ -1,44 +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-loading-page {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: column;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-}
-.u-loading-page__warpper {
-  margin-top: -150px;
-  justify-content: center;
-  align-items: center;
-  /* #ifndef APP-NVUE */
-  color: rgb(200, 200, 200);
-  font-size: 19px;
-  /* #endif */
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: column;
-}
-.u-loading-page__warpper__loading-icon {
-  margin-bottom: 10px;
-}
-.u-loading-page__warpper__loading-icon__img {
-  width: 40px;
-  height: 40px;
-}
-.u-loading-page__warpper__text {
-  font-size: 19px;
-  color: rgb(200, 200, 200);
-}

package/uview-ui/components/u-loading-page/style.scss

@@ -1,37 +0,0 @@
-@import '../../libs/css/components.scss';
-
-$text-color: rgb(200, 200, 200) !default;
-$text-size: 19px !default;
-$u-loading-icon-margin-bottom: 10px !default;
-
-.u-loading-page {
-  @include flex(column);
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-
-  &__warpper {
-    margin-top: -150px;
-    justify-content: center;
-    align-items: center;
-    /* #ifndef APP-NVUE */
-    color: $text-color;
-    font-size: $text-size;
-    /* #endif */
-    @include flex(column);
-
-    &__loading-icon {
-      margin-bottom: $u-loading-icon-margin-bottom;
-
-      &__img {
-        width: 40px;
-        height: 40px;
-      }
-    }
-
-    &__text {
-      font-size: $text-size;
-      color: $text-color;
-    }
-  }
-}

package/uview-ui/components/u-loading-page/u-loading-page.vue

@@ -1,75 +0,0 @@
-<template>
-  <u-transition
-    :show="loading"
-    :custom-style="{
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      backgroundColor: bgColor,
-      display: 'flex'
-    }"
-  >
-    <view class="u-loading-page">
-      <view class="u-loading-page__warpper">
-        <view class="u-loading-page__warpper__loading-icon">
-          <image
-            v-if="image"
-            :src="image"
-            class="u-loading-page__warpper__loading-icon__img"
-            mode="widthFit"
-            :style="{
-              width: $u.addUnit(iconSize),
-              height: $u.addUnit(iconSize)
-            }"
-          ></image>
-          <u-loading-icon v-else :mode="loadingMode" :size="$u.addUnit(iconSize)" :color="loadingColor"></u-loading-icon>
-        </view>
-        <slot>
-          <text
-            class="u-loading-page__warpper__text"
-            :style="{
-              fontSize: $u.addUnit(fontSize),
-              color: color
-            }"
-          >
-            {{ loadingText }}
-          </text>
-        </slot>
-      </view>
-    </view>
-  </u-transition>
-</template>
-<script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
-/**
- * loadingPage 加载动画
- * @description 警此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
- * @tutorial https://ijry.github.io/uview-plus/components/loading.html
- * @property {String | Number}	loadingText		提示内容  (默认 '正在加载' )
- * @property {String}			image			文字上方用于替换loading动画的图片
- * @property {String}			loadingMode		加载动画的模式，circle-圆形，spinner-花朵形，semicircle-半圆形 （默认 'circle' ）
- * @property {Boolean}			loading			是否加载中 （默认 false ）
- * @property {String}			bgColor			背景色 （默认 '#ffffff' ）
- * @property {String}			color			文字颜色 （默认 '#C8C8C8' ）
- * @property {String | Number}	fontSize		文字大小 （默认 19 ）
- * @property {String | Number}	iconSize		图标大小 （默认 28 ）
- * @property {String}			loadingColor	加载中图标的颜色，只能rgb或者十六进制颜色值 （默认 '#C8C8C8' ）
- * @property {Object}			customStyle		自定义样式
- * @example <u-loading mode="circle"></u-loading>
- */
-export default {
-  name: 'u-loading-page',
-  mixins: [mpMixin, mixin, props],
-  data() {
-    return {};
-  },
-  methods: {}
-};
-</script>
-<style scoped>
-@import './style.css';
-</style>

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

@@ -1,95 +0,0 @@
-import defprops from '../../libs/config/props';
-export default {
-  props: {
-    // 组件状态，loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
-    status: {
-      type: String,
-      default: defprops.loadmore.status
-    },
-    // 组件背景色
-    bgColor: {
-      type: String,
-      default: defprops.loadmore.bgColor
-    },
-    // 是否显示加载中的图标
-    icon: {
-      type: Boolean,
-      default: defprops.loadmore.icon
-    },
-    // 字体大小
-    fontSize: {
-      type: [String, Number],
-      default: defprops.loadmore.fontSize
-    },
-    // 图标大小
-    iconSize: {
-      type: [String, Number],
-      default: defprops.loadmore.iconSize
-    },
-    // 字体颜色
-    color: {
-      type: String,
-      default: defprops.loadmore.color
-    },
-    // 加载中状态的图标，spinner-花朵状图标，circle-圆圈状，semicircle-半圆
-    loadingIcon: {
-      type: String,
-      default: defprops.loadmore.loadingIcon
-    },
-    // 加载前的提示语
-    loadmoreText: {
-      type: String,
-      default: defprops.loadmore.loadmoreText
-    },
-    // 加载中提示语
-    loadingText: {
-      type: String,
-      default: defprops.loadmore.loadingText
-    },
-    // 没有更多的提示语
-    nomoreText: {
-      type: String,
-      default: defprops.loadmore.nomoreText
-    },
-    // 在“没有更多”状态下，是否显示粗点
-    isDot: {
-      type: Boolean,
-      default: defprops.loadmore.isDot
-    },
-    // 加载中图标的颜色
-    iconColor: {
-      type: String,
-      default: defprops.loadmore.iconColor
-    },
-    // 上边距
-    marginTop: {
-      type: [String, Number],
-      default: defprops.loadmore.marginTop
-    },
-    // 下边距
-    marginBottom: {
-      type: [String, Number],
-      default: defprops.loadmore.marginBottom
-    },
-    // 高度，单位px
-    height: {
-      type: [String, Number],
-      default: defprops.loadmore.height
-    },
-    // 是否显示左边分割线
-    line: {
-      type: Boolean,
-      default: defprops.loadmore.line
-    },
-    // 线条颜色
-    lineColor: {
-      type: String,
-      default: defprops.loadmore.lineColor
-    },
-    // 是否虚线，true-虚线，false-实线
-    dashed: {
-      type: Boolean,
-      default: defprops.loadmore.dashed
-    }
-  }
-};

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

@@ -1,40 +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-loadmore {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-}
-.u-loadmore__content {
-  margin: 0 15px;
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-.u-loadmore__content__icon-wrap {
-  margin-right: 8px;
-}
-.u-loadmore__content__text {
-  font-size: 14px;
-  color: var(--u-content-color);
-}
-.u-loadmore__content__dot-text {
-  font-size: 15px;
-  color: var(--u-tips-color);
-}

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

@@ -1,29 +0,0 @@
-@import '../../libs/css/components.scss';
-
-.u-loadmore {
-  @include flex(row);
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-
-  &__content {
-    margin: 0 15px;
-    @include flex(row);
-    align-items: center;
-    justify-content: center;
-
-    &__icon-wrap {
-      margin-right: 8px;
-    }
-
-    &__text {
-      font-size: 14px;
-      color: $u-content-color;
-    }
-
-    &__dot-text {
-      font-size: 15px;
-      color: $u-tips-color;
-    }
-  }
-}