@10yun/cv-mobile-ui 0.5.18 → 0.5.20

package/uview-ui/components/u-avatar-group/style.css

@@ -0,0 +1,39 @@
+/* #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-avatar-group {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
+.u-avatar-group__item {
+  margin-left: -10px;
+  position: relative;
+}
+.u-avatar-group__item--no-indent {
+  margin-left: 0;
+}
+.u-avatar-group__item__show-more {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100px;
+}

package/uview-ui/components/u-avatar-group/style.scss

@@ -0,0 +1,28 @@
+@import '../../libs/css/components.scss';
+
+.u-avatar-group {
+  @include flex;
+
+  &__item {
+    margin-left: -10px;
+    position: relative;
+
+    &--no-indent {
+      // 如果你想质疑作者不会使用:first-child，说明你太年轻，因为nvue不支持
+      margin-left: 0;
+    }
+
+    &__show-more {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: rgba(0, 0, 0, 0.3);
+      @include flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 100px;
+    }
+  }
+}

package/uview-ui/components/u-avatar-group/u-avatar-group.vue

@@ -0,0 +1,74 @@
+<template>
+  <view class="u-avatar-group">
+    <view
+      class="u-avatar-group__item"
+      v-for="(item, index) in showUrl"
+      :key="index"
+      :style="{
+        marginLeft: index === 0 ? 0 : $u.addUnit(-size * gap)
+      }"
+    >
+      <u-avatar
+        :size="size"
+        :shape="shape"
+        :mode="mode"
+        :src="$u.test.object(item) ? (keyName && item[keyName]) || item.url : item"
+      ></u-avatar>
+      <view
+        class="u-avatar-group__item__show-more"
+        v-if="showMore && index === showUrl.length - 1 && (urls.length > maxCount || extraValue > 0)"
+        @tap="clickHandler"
+      >
+        <u--text
+          color="#ffffff"
+          :size="size * 0.4"
+          :text="`+${extraValue || urls.length - showUrl.length}`"
+          align="center"
+          customStyle="justify-content: center"
+        ></u--text>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import props from './props.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+/**
+ * AvatarGroup  头像组
+ * @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
+ * @tutorial https://ijry.github.io/uview-plus/components/avatar.html
+ *
+ * @property {Array}           urls     头像图片组 （默认 [] ）
+ * @property {String | Number} maxCount 最多展示的头像数量 （ 默认 5 ）
+ * @property {String}          shape    头像形状（ 'circle' (默认) | 'square' ）
+ * @property {String}          mode     图片裁剪模式（默认 'scaleToFill' ）
+ * @property {Boolean}         showMore 超出maxCount时是否显示查看更多的提示 （默认 true ）
+ * @property {String | Number} size      头像大小 （默认 40 ）
+ * @property {String}          keyName  指定从数组的对象元素中读取哪个属性作为图片地址
+ * @property {String | Number} gap      头像之间的遮挡比例（0.4代表遮挡40%）  （默认 0.5 ）
+ * @property {String | Number} extraValue  需额外显示的值
+ * @event    {Function}        showMore 头像组更多点击
+ * @example  <u-avatar-group:urls="urls" size="35" gap="0.4" ></u-avatar-group:urls=>
+ */
+export default {
+  name: 'u-avatar-group',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {};
+  },
+  computed: {
+    showUrl() {
+      return this.urls.slice(0, this.maxCount);
+    }
+  },
+  methods: {
+    clickHandler() {
+      this.$emit('showMore');
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-ui/components/u-back-top/props.js

@@ -0,0 +1,55 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // 返回顶部的形状，circle-圆形，square-方形
+    mode: {
+      type: String,
+      default: defprops.backtop.mode
+    },
+    // 自定义图标
+    icon: {
+      type: String,
+      default: defprops.backtop.icon
+    },
+    // 提示文字
+    text: {
+      type: String,
+      default: defprops.backtop.text
+    },
+    // 返回顶部滚动时间
+    duration: {
+      type: [String, Number],
+      default: defprops.backtop.duration
+    },
+    // 滚动距离
+    scrollTop: {
+      type: [String, Number],
+      default: defprops.backtop.scrollTop
+    },
+    // 距离顶部多少距离显示，单位px
+    top: {
+      type: [String, Number],
+      default: defprops.backtop.top
+    },
+    // 返回顶部按钮到底部的距离，单位px
+    bottom: {
+      type: [String, Number],
+      default: defprops.backtop.bottom
+    },
+    // 返回顶部按钮到右边的距离，单位px
+    right: {
+      type: [String, Number],
+      default: defprops.backtop.right
+    },
+    // 层级
+    zIndex: {
+      type: [String, Number],
+      default: defprops.backtop.zIndex
+    },
+    // 图标的样式，对象形式
+    iconStyle: {
+      type: Object,
+      default: defprops.backtop.iconStyle
+    }
+  }
+};

package/uview-ui/components/u-back-top/style.css

@@ -0,0 +1,27 @@
+/* #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-back-top {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  height: 100%;
+  justify-content: center;
+  background-color: #e1e1e1;
+}
+.u-back-top__tips {
+  font-size: 12px;
+  transform: scale(0.8);
+}

package/uview-ui/components/u-back-top/style.scss

@@ -0,0 +1,19 @@
+@import '../../libs/css/components.scss';
+$u-back-top-flex: 1 !default;
+$u-back-top-height: 100% !default;
+$u-back-top-background-color: #e1e1e1 !default;
+$u-back-top-tips-font-size: 12px !default;
+.u-back-top {
+  @include flex;
+  flex-direction: column;
+  align-items: center;
+  flex: $u-back-top-flex;
+  height: $u-back-top-height;
+  justify-content: center;
+  background-color: $u-back-top-background-color;
+
+  &__tips {
+    font-size: $u-back-top-tips-font-size;
+    transform: scale(0.8);
+  }
+}

package/uview-ui/components/u-back-top/u-back-top.vue

@@ -0,0 +1,95 @@
+<template>
+  <u-transition mode="fade" :customStyle="backTopStyle" :show="show">
+    <view class="u-back-top" :style="[contentStyle]" v-if="!$slots.default && !$slots.$default" @click="backToTop">
+      <u-icon :name="icon" :custom-style="iconStyle"></u-icon>
+      <text v-if="text" class="u-back-top__text">{{ text }}</text>
+    </view>
+    <slot v-else />
+  </u-transition>
+</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 = weex.requireModule('dom');
+// #endif
+/**
+ * backTop 返回顶部
+ * @description 本组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。
+ * @tutorial https://uviewui.com/components/backTop.html
+ *
+ * @property {String}			mode  		返回顶部的形状，circle-圆形，square-方形 （默认 'circle' ）
+ * @property {String} 			icon 		自定义图标 （默认 'arrow-upward' ） 见官方文档示例
+ * @property {String} 			text 		提示文字
+ * @property {String | Number}  duration	返回顶部滚动时间 （默认 100）
+ * @property {String | Number}  scrollTop	滚动距离 （默认 0 ）
+ * @property {String | Number}  top  		距离顶部多少距离显示，单位px （默认 400 ）
+ * @property {String | Number}  bottom  	返回顶部按钮到底部的距离，单位px （默认 100 ）
+ * @property {String | Number}  right  		返回顶部按钮到右边的距离，单位px （默认 20 ）
+ * @property {String | Number}  zIndex 		层级   （默认 9 ）
+ * @property {Object<Object>}  	iconStyle 	图标的样式，对象形式   （默认 {color: '#909399',fontSize: '19px'}）
+ * @property {Object}			customStyle	定义需要用到的外部样式
+ *
+ * @example <u-back-top :scrollTop="scrollTop"></u-back-top>
+ */
+export default {
+  name: 'u-back-top',
+  mixins: [mpMixin, mixin, props],
+  computed: {
+    backTopStyle() {
+      // 动画组件样式
+      const style = {
+        bottom: uni.$u.addUnit(this.bottom),
+        right: uni.$u.addUnit(this.right),
+        width: '40px',
+        height: '40px',
+        position: 'fixed',
+        zIndex: 10
+      };
+      return style;
+    },
+    show() {
+      return uni.$u.getPx(this.scrollTop) > uni.$u.getPx(this.top);
+    },
+    contentStyle() {
+      const style = {};
+      let radius = 0;
+      // 是否圆形
+      if (this.mode === 'circle') {
+        radius = '100px';
+      } else {
+        radius = '4px';
+      }
+      // 为了兼容安卓nvue，只能这么分开写
+      style.borderTopLeftRadius = radius;
+      style.borderTopRightRadius = radius;
+      style.borderBottomLeftRadius = radius;
+      style.borderBottomRightRadius = radius;
+      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+    }
+  },
+  methods: {
+    backToTop() {
+      // #ifdef APP-NVUE
+      if (!this.$parent.$refs['u-back-top']) {
+        uni.$u.error(`nvue页面需要给页面最外层元素设置"ref='u-back-top'`);
+      }
+      dom.scrollToElement(this.$parent.$refs['u-back-top'], {
+        offset: 0
+      });
+      // #endif
+      // #ifndef APP-NVUE
+      uni.pageScrollTo({
+        scrollTop: 0,
+        duration: this.duration
+      });
+      // #endif
+      this.$emit('click');
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

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

@@ -0,0 +1,73 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // 是否显示圆点
+    isDot: {
+      type: Boolean,
+      default: defprops.badge.isDot
+    },
+    // 显示的内容
+    value: {
+      type: [Number, String],
+      default: defprops.badge.value
+    },
+    // 是否显示
+    show: {
+      type: Boolean,
+      default: defprops.badge.show
+    },
+    // 最大值，超过最大值会显示 '{max}+'
+    max: {
+      type: [Number, String],
+      default: defprops.badge.max
+    },
+    // 主题类型，error|warning|success|primary
+    type: {
+      type: String,
+      default: defprops.badge.type
+    },
+    // 当数值为 0 时，是否展示 Badge
+    showZero: {
+      type: Boolean,
+      default: defprops.badge.showZero
+    },
+    // 背景颜色，优先级比type高，如设置，type参数会失效
+    bgColor: {
+      type: [String, null],
+      default: defprops.badge.bgColor
+    },
+    // 字体颜色
+    color: {
+      type: [String, null],
+      default: defprops.badge.color
+    },
+    // 徽标形状，circle-四角均为圆角，horn-左下角为直角
+    shape: {
+      type: String,
+      default: defprops.badge.shape
+    },
+    // 设置数字的显示方式，overflow|ellipsis|limit
+    // overflow会根据max字段判断，超出显示`${max}+`
+    // ellipsis会根据max判断，超出显示`${max}...`
+    // limit会依据1000作为判断条件，超出1000，显示`${value/1000}K`，比如2.2k、3.34w，最多保留2位小数
+    numberType: {
+      type: String,
+      default: defprops.badge.numberType
+    },
+    // 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
+    offset: {
+      type: Array,
+      default: defprops.badge.offset
+    },
+    // 是否反转背景和字体颜色
+    inverted: {
+      type: Boolean,
+      default: defprops.badge.inverted
+    },
+    // 是否绝对定位
+    absolute: {
+      type: Boolean,
+      default: defprops.badge.absolute
+    }
+  }
+};

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

@@ -0,0 +1,68 @@
+/* #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-badge {
+  border-top-right-radius: 100px;
+  border-top-left-radius: 100px;
+  border-bottom-left-radius: 100px;
+  border-bottom-right-radius: 100px;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  line-height: 11px;
+  text-align: center;
+  font-size: 11px;
+  color: #ffffff;
+}
+.u-badge--dot {
+  height: 8px;
+  width: 8px;
+}
+.u-badge--inverted {
+  font-size: 13px;
+}
+.u-badge--not-dot {
+  padding: 2px 5px;
+}
+.u-badge--horn {
+  border-bottom-left-radius: 0;
+}
+.u-badge--primary {
+  background-color: var(--u-primary);
+}
+.u-badge--primary--inverted {
+  color: var(--u-primary);
+}
+.u-badge--error {
+  background-color: var(--u-error);
+}
+.u-badge--error--inverted {
+  color: var(--u-error);
+}
+.u-badge--success {
+  background-color: var(--u-success);
+}
+.u-badge--success--inverted {
+  color: var(--u-success);
+}
+.u-badge--info {
+  background-color: var(--u-info);
+}
+.u-badge--info--inverted {
+  color: var(--u-info);
+}
+.u-badge--warning {
+  background-color: var(--u-warning);
+}
+.u-badge--warning--inverted {
+  color: var(--u-warning);
+}

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

@@ -0,0 +1,85 @@
+@import '../../libs/css/components.scss';
+
+$u-badge-primary: $u-primary !default;
+$u-badge-error: $u-error !default;
+$u-badge-success: $u-success !default;
+$u-badge-info: $u-info !default;
+$u-badge-warning: $u-warning !default;
+$u-badge-dot-radius: 100px !default;
+$u-badge-dot-size: 8px !default;
+$u-badge-dot-right: 4px !default;
+$u-badge-dot-top: 0 !default;
+$u-badge-text-font-size: 11px !default;
+$u-badge-text-right: 10px !default;
+$u-badge-text-padding: 2px 5px !default;
+$u-badge-text-align: center !default;
+$u-badge-text-color: #ffffff !default;
+
+.u-badge {
+  border-top-right-radius: $u-badge-dot-radius;
+  border-top-left-radius: $u-badge-dot-radius;
+  border-bottom-left-radius: $u-badge-dot-radius;
+  border-bottom-right-radius: $u-badge-dot-radius;
+  @include flex;
+  line-height: $u-badge-text-font-size;
+  text-align: $u-badge-text-align;
+  font-size: $u-badge-text-font-size;
+  color: $u-badge-text-color;
+
+  &--dot {
+    height: $u-badge-dot-size;
+    width: $u-badge-dot-size;
+  }
+
+  &--inverted {
+    font-size: 13px;
+  }
+
+  &--not-dot {
+    padding: $u-badge-text-padding;
+  }
+
+  &--horn {
+    border-bottom-left-radius: 0;
+  }
+
+  &--primary {
+    background-color: $u-badge-primary;
+  }
+
+  &--primary--inverted {
+    color: $u-badge-primary;
+  }
+
+  &--error {
+    background-color: $u-badge-error;
+  }
+
+  &--error--inverted {
+    color: $u-badge-error;
+  }
+
+  &--success {
+    background-color: $u-badge-success;
+  }
+
+  &--success--inverted {
+    color: $u-badge-success;
+  }
+
+  &--info {
+    background-color: $u-badge-info;
+  }
+
+  &--info--inverted {
+    color: $u-badge-info;
+  }
+
+  &--warning {
+    background-color: $u-badge-warning;
+  }
+
+  &--warning--inverted {
+    color: $u-badge-warning;
+  }
+}

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

@@ -0,0 +1,96 @@
+<template>
+  <text
+    v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)"
+    :class="[
+      isDot ? 'u-badge--dot' : 'u-badge--not-dot',
+      inverted && 'u-badge--inverted',
+      shape === 'horn' && 'u-badge--horn',
+      `u-badge--${type}${inverted ? '--inverted' : ''}`
+    ]"
+    :style="[$u.addStyle(customStyle), badgeStyle]"
+    class="u-badge"
+  >
+    {{ isDot ? '' : showValue }}
+  </text>
+</template>
+<script>
+import props from './props.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+/**
+ * badge 徽标数
+ * @description 该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
+ * @tutorial https://uviewui.com/components/badge.html
+ *
+ * @property {Boolean} 			isDot 		是否显示圆点 （默认 false ）
+ * @property {String | Number} 	value 		显示的内容
+ * @property {Boolean} 			show 		是否显示 （默认 true ）
+ * @property {String | Number} 	max 		最大值，超过最大值会显示 '{max}+'  （默认999）
+ * @property {String} 			type 		主题类型，error|warning|success|primary （默认 'error' ）
+ * @property {Boolean} 			showZero	当数值为 0 时，是否展示 Badge （默认 false ）
+ * @property {String} 			bgColor 	背景颜色，优先级比type高，如设置，type参数会失效
+ * @property {String} 			color 		字体颜色 （默认 '#ffffff' ）
+ * @property {String} 			shape 		徽标形状，circle-四角均为圆角，horn-左下角为直角 （默认 'circle' ）
+ * @property {String} 			numberType	设置数字的显示方式，overflow|ellipsis|limit  （默认 'overflow' ）
+ * @property {Array}} 			offset		设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
+ * @property {Boolean} 			inverted	是否反转背景和字体颜色（默认 false ）
+ * @property {Boolean} 			absolute	是否绝对定位（默认 false ）
+ * @property {Object}			customStyle	定义需要用到的外部样式
+ * @example <u-badge :type="type" :count="count"></u-badge>
+ */
+export default {
+  name: 'u-badge',
+  mixins: [mpMixin, props, mixin],
+  computed: {
+    // 是否将badge中心与父组件右上角重合
+    boxStyle() {
+      let style = {};
+      return style;
+    },
+    // 整个组件的样式
+    badgeStyle() {
+      const style = {};
+      if (this.color) {
+        style.color = this.color;
+      }
+      if (this.bgColor && !this.inverted) {
+        style.backgroundColor = this.bgColor;
+      }
+      if (this.absolute) {
+        style.position = 'absolute';
+        // 如果有设置offset参数
+        if (this.offset.length) {
+          // top和right分为为offset的第一个和第二个值，如果没有第二个值，则right等于top
+          const top = this.offset[0];
+          const right = this.offset[1] || top;
+          style.top = uni.$u.addUnit(top);
+          style.right = uni.$u.addUnit(right);
+        }
+      }
+      return style;
+    },
+    showValue() {
+      switch (this.numberType) {
+        case 'overflow':
+          return Number(this.value) > Number(this.max) ? this.max + '+' : this.value;
+          break;
+        case 'ellipsis':
+          return Number(this.value) > Number(this.max) ? '...' : this.value;
+          break;
+        case 'limit':
+          return Number(this.value) > 999
+            ? Number(this.value) >= 9999
+              ? Math.floor((this.value / 1e4) * 100) / 100 + 'w'
+              : Math.floor((this.value / 1e3) * 100) / 100 + 'k'
+            : this.value;
+          break;
+        default:
+          return Number(this.value);
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-ui/components/u-button/nvue-parse.scss

@@ -0,0 +1,27 @@
+.u-button--active {
+  opacity: 0.75;
+}
+.u-button--active--plain {
+  background-color: #d9d9d9;
+}
+.u-button__loading-text {
+  margin-left: 4px;
+}
+.u-button__text, .u-button__loading-text {
+  color: #FFFFFF;
+}
+.u-button__text--plain--error {
+  color: var(--u-error);
+}
+.u-button__text--plain--warning {
+  color: var(--u-warning);
+}
+.u-button__text--plain--success {
+  color: var(--u-success);
+}
+.u-button__text--plain--info {
+  color: var(--u-info);
+}
+.u-button__text--plain--primary {
+  color: var(--u-primary);
+}

package/uview-ui/components/u-button/nvue.scss

@@ -0,0 +1 @@
+$u-button-active-opacity:0.75 !default;