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

package/uview-ui/components/u-swiper-indicator/u-swiper-indicator.vue

@@ -1,70 +0,0 @@
-<template>
-  <view class="u-swiper-indicator">
-    <view
-      class="u-swiper-indicator__wrapper"
-      v-if="indicatorMode === 'line'"
-      :class="[`u-swiper-indicator__wrapper--${indicatorMode}`]"
-      :style="{
-        width: $u.addUnit(lineWidth * length),
-        backgroundColor: indicatorInactiveColor
-      }"
-    >
-      <view class="u-swiper-indicator__wrapper--line__bar" :style="[lineStyle]"></view>
-    </view>
-    <view class="u-swiper-indicator__wrapper" v-if="indicatorMode === 'dot'">
-      <view
-        class="u-swiper-indicator__wrapper__dot"
-        v-for="(item, index) in length"
-        :key="index"
-        :class="[index === current && 'u-swiper-indicator__wrapper__dot--active']"
-        :style="[dotStyle(index)]"
-      ></view>
-    </view>
-  </view>
-</template>
-<script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
-/**
- * SwiperIndicator 轮播图指示器
- * @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用，
- * @tutorial https://ijry.github.io/uview-plus/components/swiper.html
- * @property {String | Number}	length					轮播的长度（默认 0 ）
- * @property {String | Number}	current					当前处于活动状态的轮播的索引（默认 0 ）
- * @property {String}			indicatorActiveColor	指示器非激活颜色
- * @property {String}			indicatorInactiveColor	指示器的激活颜色
- * @property {String}			indicatorMode			指示器模式（默认 'line' ）
- * @example	<u-swiper :list="list4" indicator keyName="url" :autoplay="false"></u-swiper>
- */
-export default {
-  name: 'u-swiper-indicator',
-  mixins: [mpMixin, mixin, props],
-  data() {
-    return {
-      lineWidth: 22
-    };
-  },
-  computed: {
-    // 指示器为线型的样式
-    lineStyle() {
-      let style = {};
-      style.width = uni.$u.addUnit(this.lineWidth);
-      style.transform = `translateX(${uni.$u.addUnit(this.current * this.lineWidth)})`;
-      style.backgroundColor = this.indicatorActiveColor;
-      return style;
-    },
-    // 指示器为点型的样式
-    dotStyle() {
-      return (index) => {
-        let style = {};
-        style.backgroundColor = index === this.current ? this.indicatorActiveColor : this.indicatorInactiveColor;
-        return style;
-      };
-    }
-  }
-};
-</script>
-<style scoped>
-@import './style.css';
-</style>

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

@@ -1,55 +0,0 @@
-import defprops from '../../libs/config/props';
-export default {
-  props: {
-    // 是否为加载中状态
-    loading: {
-      type: Boolean,
-      default: defprops.switch.loading
-    },
-    // 是否为禁用装填
-    disabled: {
-      type: Boolean,
-      default: defprops.switch.disabled
-    },
-    // 开关尺寸，单位px
-    size: {
-      type: [String, Number],
-      default: defprops.switch.size
-    },
-    // 打开时的背景颜色
-    activeColor: {
-      type: String,
-      default: defprops.switch.activeColor
-    },
-    // 关闭时的背景颜色
-    inactiveColor: {
-      type: String,
-      default: defprops.switch.inactiveColor
-    },
-    // 通过v-model双向绑定的值
-    value: {
-      type: [Boolean, String, Number],
-      default: defprops.switch.value
-    },
-    // switch打开时的值
-    activeValue: {
-      type: [String, Number, Boolean],
-      default: defprops.switch.activeValue
-    },
-    // switch关闭时的值
-    inactiveValue: {
-      type: [String, Number, Boolean],
-      default: defprops.switch.inactiveValue
-    },
-    // 是否开启异步变更，开启后需要手动控制输入值
-    asyncChange: {
-      type: Boolean,
-      default: defprops.switch.asyncChange
-    },
-    // 圆点与外边框的距离
-    space: {
-      type: [String, Number],
-      default: defprops.switch.space
-    }
-  }
-};

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

@@ -1,58 +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-switch {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  /* #ifndef APP-NVUE */
-  box-sizing: border-box;
-  /* #endif */
-  position: relative;
-  background-color: #fff;
-  border-width: 1px;
-  border-radius: 100px;
-  transition: background-color 0.4s;
-  border-color: rgba(0, 0, 0, 0.12);
-  border-style: solid;
-  justify-content: flex-end;
-  align-items: center;
-  overflow: hidden;
-}
-.u-switch__node {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100px;
-  background-color: #fff;
-  border-radius: 100px;
-  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
-  transition-property: transform;
-  transition-duration: 0.4s;
-  transition-timing-function: cubic-bezier(0.3, 1.05, 0.4, 1.05);
-}
-.u-switch__bg {
-  position: absolute;
-  border-radius: 100px;
-  background-color: #ffffff;
-  transition-property: transform;
-  transition-duration: 0.4s;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  transition-timing-function: ease;
-}
-.u-switch--disabled {
-  opacity: 0.6;
-}

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

@@ -1,48 +0,0 @@
-@import '../../libs/css/components.scss';
-
-.u-switch {
-  @include flex(row);
-  /* #ifndef APP-NVUE */
-  box-sizing: border-box;
-  /* #endif */
-  position: relative;
-  background-color: #fff;
-  border-width: 1px;
-  border-radius: 100px;
-  transition: background-color 0.4s;
-  border-color: rgba(0, 0, 0, 0.12);
-  border-style: solid;
-  justify-content: flex-end;
-  align-items: center;
-  // 由于weex为阿里逗着玩的KPI项目，导致bug奇多，这必须要写这一行，
-  // 否则在iOS上，点击页面任意地方，都会触发switch的点击事件
-  overflow: hidden;
-
-  &__node {
-    @include flex(row);
-    align-items: center;
-    justify-content: center;
-    border-radius: 100px;
-    background-color: #fff;
-    border-radius: 100px;
-    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
-    transition-property: transform;
-    transition-duration: 0.4s;
-    transition-timing-function: cubic-bezier(0.3, 1.05, 0.4, 1.05);
-  }
-
-  &__bg {
-    position: absolute;
-    border-radius: 100px;
-    background-color: #ffffff;
-    transition-property: transform;
-    transition-duration: 0.4s;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    transition-timing-function: ease;
-  }
-
-  &--disabled {
-    opacity: 0.6;
-  }
-}

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

@@ -1,121 +0,0 @@
-<template>
-  <view
-    class="u-switch"
-    :class="[disabled && 'u-switch--disabled']"
-    :style="[switchStyle, $u.addStyle(customStyle)]"
-    @tap="clickHandler"
-  >
-    <view class="u-switch__bg" :style="[bgStyle]"></view>
-    <view class="u-switch__node" :class="[value && 'u-switch__node--on']" :style="[nodeStyle]" ref="u-switch__node">
-      <u-loading-icon
-        :show="loading"
-        mode="circle"
-        timingFunction="linear"
-        :color="value ? activeColor : '#AAABAD'"
-        :size="size * 0.6"
-      />
-    </view>
-  </view>
-</template>
-<script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
-/**
- * switch 开关选择器
- * @description 选择开关一般用于只有两个选择，且只能选其一的场景。
- * @tutorial https://ijry.github.io/uview-plus/components/switch.html
- * @property {Boolean}						loading			是否处于加载中（默认 false ）
- * @property {Boolean}						disabled		是否禁用（默认 false ）
- * @property {String | Number}				size			开关尺寸，单位px （默认 25 ）
- * @property {String}						activeColor		打开时的背景色 （默认 '#2979ff' ）
- * @property {String} 						inactiveColor	关闭时的背景色 （默认 '#ffffff' ）
- * @property {Boolean | String | Number}	value			通过v-model双向绑定的值 （默认 false ）
- * @property {Boolean | String | Number}	activeValue		打开选择器时通过change事件发出的值 （默认 true ）
- * @property {Boolean | String | Number}	inactiveValue	关闭选择器时通过change事件发出的值 （默认 false ）
- * @property {Boolean}						asyncChange		是否开启异步变更，开启后需要手动控制输入值 （默认 false ）
- * @property {String | Number}				space			圆点与外边框的距离 （默认 0 ）
- * @property {Object}						customStyle		定义需要用到的外部样式
- *
- * @event {Function} change 在switch打开或关闭时触发
- * @example <u-switch v-model="checked" active-color="red" inactive-color="#eee"></u-switch>
- */
-export default {
-  name: 'u-switch',
-  mixins: [mpMixin, mixin, props],
-  watch: {
-    value: {
-      immediate: true,
-      handler(n) {
-        if (n !== this.inactiveValue && n !== this.activeValue) {
-          uni.$u.error('v-model绑定的值必须为inactiveValue、activeValue二者之一');
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      bgColor: '#ffffff'
-    };
-  },
-  computed: {
-    isActive() {
-      return this.value === this.activeValue;
-    },
-    switchStyle() {
-      let style = {};
-      // 这里需要加2，是为了腾出边框的距离，否则圆点node会和外边框紧贴在一起
-      style.width = uni.$u.addUnit(this.size * 2 + 2);
-      style.height = uni.$u.addUnit(Number(this.size) + 2);
-      // style.borderColor = this.value ? 'rgba(0, 0, 0, 0)' : 'rgba(0, 0, 0, 0.12)'
-      // 如果自定义了“非激活”演示，name边框颜色设置为透明(跟非激活颜色一致)
-      // 这里不能简单的设置为非激活的颜色，否则打开状态时，会有边框，所以需要透明
-      if (this.customInactiveColor) {
-        style.borderColor = 'rgba(0, 0, 0, 0)';
-      }
-      style.backgroundColor = this.isActive ? this.activeColor : this.inactiveColor;
-      return style;
-    },
-    nodeStyle() {
-      let style = {};
-      // 如果自定义非激活颜色，将node圆点的尺寸减少两个像素，让其与外边框距离更大一点
-      style.width = uni.$u.addUnit(this.size - this.space);
-      style.height = uni.$u.addUnit(this.size - this.space);
-      const translateX = this.isActive ? uni.$u.addUnit(this.space) : uni.$u.addUnit(this.size);
-      style.transform = `translateX(-${translateX})`;
-      return style;
-    },
-    bgStyle() {
-      let style = {};
-      // 这里配置一个多余的元素在HTML中，是为了让switch切换时，有更良好的背景色扩充体验(见实际效果)
-      style.width = uni.$u.addUnit(Number(this.size) * 2 - this.size / 2);
-      style.height = uni.$u.addUnit(this.size);
-      style.backgroundColor = this.inactiveColor;
-      // 打开时，让此元素收缩，否则反之
-      style.transform = `scale(${this.isActive ? 0 : 1})`;
-      return style;
-    },
-    customInactiveColor() {
-      // 之所以需要判断是否自定义了“非激活”颜色，是为了让node圆点离外边框更宽一点的距离
-      return this.inactiveColor !== '#fff' && this.inactiveColor !== '#ffffff';
-    }
-  },
-  methods: {
-    clickHandler() {
-      if (!this.disabled && !this.loading) {
-        const oldValue = this.isActive ? this.inactiveValue : this.activeValue;
-        if (!this.asyncChange) {
-          this.$emit('input', oldValue);
-        }
-        // 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
-        this.$nextTick(() => {
-          this.$emit('change', oldValue);
-        });
-      }
-    }
-  }
-};
-</script>
-<style scoped>
-@import './style.css';
-</style>

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

@@ -1,45 +0,0 @@
-import defprops from '../../libs/config/props';
-export default {
-  props: {
-    // 当前匹配项的name
-    value: {
-      type: [String, Number, null],
-      default: defprops.tabbar.value
-    },
-    // 是否为iPhoneX留出底部安全距离
-    safeAreaInsetBottom: {
-      type: Boolean,
-      default: defprops.tabbar.safeAreaInsetBottom
-    },
-    // 是否显示上方边框
-    border: {
-      type: Boolean,
-      default: defprops.tabbar.border
-    },
-    // 元素层级z-index
-    zIndex: {
-      type: [String, Number],
-      default: defprops.tabbar.zIndex
-    },
-    // 选中标签的颜色
-    activeColor: {
-      type: String,
-      default: defprops.tabbar.activeColor
-    },
-    // 未选中标签的颜色
-    inactiveColor: {
-      type: String,
-      default: defprops.tabbar.inactiveColor
-    },
-    // 是否固定在底部
-    fixed: {
-      type: Boolean,
-      default: defprops.tabbar.fixed
-    },
-    // fixed定位固定在底部时，是否生成一个等高元素防止塌陷
-    placeholder: {
-      type: Boolean,
-      default: defprops.tabbar.placeholder
-    }
-  }
-};

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

@@ -1,39 +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-tabbar {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: column;
-  flex: 1;
-  justify-content: center;
-}
-.u-tabbar__content {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: column;
-  background-color: #fff;
-}
-.u-tabbar__content__item-wrapper {
-  height: 50px;
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-}
-.u-tabbar--fixed {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}

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

@@ -1,24 +0,0 @@
-@import '../../libs/css/components.scss';
-
-.u-tabbar {
-  @include flex(column);
-  flex: 1;
-  justify-content: center;
-
-  &__content {
-    @include flex(column);
-    background-color: #fff;
-
-    &__item-wrapper {
-      height: 50px;
-      @include flex(row);
-    }
-  }
-
-  &--fixed {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-}

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

@@ -1,115 +0,0 @@
-<template>
-  <view class="u-tabbar">
-    <view
-      class="u-tabbar__content"
-      ref="u-tabbar__content"
-      @touchmove.stop.prevent="noop"
-      :class="[border && 'u-border-top', fixed && 'u-tabbar--fixed']"
-      :style="[tabbarStyle]"
-    >
-      <view class="u-tabbar__content__item-wrapper">
-        <slot />
-      </view>
-      <u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
-    </view>
-    <view
-      class="u-tabbar__placeholder"
-      v-if="placeholder"
-      :style="{
-        height: placeholderHeight + 'px'
-      }"
-    ></view>
-  </view>
-</template>
-<script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
-// #ifdef APP-NVUE
-const dom = uni.requireNativePlugin('dom');
-// #endif
-/**
- * Tabbar 底部导航栏
- * @description 此组件提供了自定义tabbar的能力。
- * @tutorial https://ijry.github.io/uview-plus/components/tabbar.html
- * @property {String | Number}	value				当前匹配项的name
- * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离（默认 true ）
- * @property {Boolean}			border				是否显示上方边框（默认 true ）
- * @property {String | Number}	zIndex				元素层级z-index（默认 1 ）
- * @property {String}			activeColor			选中标签的颜色（默认 '#1989fa' ）
- * @property {String}			inactiveColor		未选中标签的颜色（默认 '#7d7e80' ）
- * @property {Boolean}			fixed				是否固定在底部（默认 true ）
- * @property {Boolean}			placeholder			fixed定位固定在底部时，是否生成一个等高元素防止塌陷（默认 true ）
- * @property {Object}			customStyle			定义需要用到的外部样式
- *
- * @example <u-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"><u-tabbar-item text="首页" icon="home" dot ></u-tabbar-item></u-tabbar>
- */
-export default {
-  name: 'u-tabbar',
-  mixins: [mpMixin, mixin, props],
-  data() {
-    return {
-      placeholderHeight: 0
-    };
-  },
-  computed: {
-    tabbarStyle() {
-      const style = {
-        zIndex: this.zIndex
-      };
-      // 合并来自父组件的customStyle样式
-      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
-    },
-    // 监听多个参数的变化，通过在computed执行对应的操作
-    updateChild() {
-      return [this.value, this.activeColor, this.inactiveColor];
-    },
-    updatePlaceholder() {
-      return [this.fixed, this.placeholder];
-    }
-  },
-  watch: {
-    updateChild() {
-      // 如果updateChildren中的元素发生了变化，则执行子元素初始化操作
-      this.updateChildren();
-    },
-    updatePlaceholder() {
-      // 如果fixed，placeholder等参数发生变化，重新计算占位元素的高度
-      this.setPlaceholderHeight();
-    }
-  },
-  created() {
-    this.children = [];
-  },
-  mounted() {
-    this.setPlaceholderHeight();
-  },
-  methods: {
-    updateChildren() {
-      // 如果存在子元素，则执行子元素的updateFromParent进行更新数据
-      this.children.length && this.children.map((child) => child.updateFromParent());
-    },
-    // 设置用于防止塌陷元素的高度
-    async setPlaceholderHeight() {
-      if (!this.fixed || !this.placeholder) return;
-      // 延时一定时间
-      await uni.$u.sleep(20);
-      // #ifndef APP-NVUE
-      this.$uGetRect('.u-tabbar__content').then(({ height = 50 }) => {
-        // 修复IOS safearea bottom 未填充高度
-        this.placeholderHeight = height;
-      });
-      // #endif
-      // #ifdef APP-NVUE
-      dom.getComponentRect(this.$refs['u-tabbar__content'], (res) => {
-        const { size } = res;
-        this.placeholderHeight = size.height;
-      });
-      // #endif
-    }
-  }
-};
-</script>
-<style scoped>
-@import './style.css';
-</style>

package/uview-ui/components/u-tabbar-item/props.js

@@ -1,35 +0,0 @@
-import defprops from '../../libs/config/props';
-export default {
-  props: {
-    // item标签的名称，作为与u-tabbar的value参数匹配的标识符
-    name: {
-      type: [String, Number, null],
-      default: defprops.tabbarItem.name
-    },
-    // uView内置图标或者绝对路径的图片
-    icon: {
-      icon: String,
-      default: defprops.tabbarItem.icon
-    },
-    // 右上角的角标提示信息
-    badge: {
-      type: [String, Number, null],
-      default: defprops.tabbarItem.badge
-    },
-    // 是否显示圆点，将会覆盖badge参数
-    dot: {
-      type: Boolean,
-      default: defprops.tabbarItem.dot
-    },
-    // 描述文本
-    text: {
-      type: String,
-      default: defprops.tabbarItem.text
-    },
-    // 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
-    badgeStyle: {
-      type: [Object, String],
-      default: defprops.tabbarItem.badgeStyle
-    }
-  }
-};

package/uview-ui/components/u-tabbar-item/style.css

@@ -1,39 +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-tabbar-item {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-}
-.u-tabbar-item__icon {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  position: relative;
-  width: 150rpx;
-  justify-content: center;
-}
-.u-tabbar-item__text {
-  margin-top: 2px;
-  font-size: 12px;
-  color: var(--u-content-color);
-}
-/* #ifdef MP */
-:host {
-  flex: 1;
-}
-/* #endif */

package/uview-ui/components/u-tabbar-item/style.scss

@@ -1,28 +0,0 @@
-@import '../../libs/css/components.scss';
-
-.u-tabbar-item {
-  @include flex(column);
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-
-  &__icon {
-    @include flex;
-    position: relative;
-    width: 150rpx;
-    justify-content: center;
-  }
-
-  &__text {
-    margin-top: 2px;
-    font-size: 12px;
-    color: $u-content-color;
-  }
-}
-
-/* #ifdef MP */
-// 由于小程序都使用shadow DOM形式实现，需要给影子宿主设置flex: 1才能让其撑开
-:host {
-  flex: 1;
-}
-/* #endif */