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

package/uni-ui/lib/uni-rate/style.css

@@ -0,0 +1,29 @@
+.uni-rate {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  line-height: 1;
+  font-size: 0;
+  flex-direction: row;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+.uni-rate__icon {
+  position: relative;
+  line-height: 1;
+  font-size: 0;
+}
+.uni-rate__icon-on {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  line-height: 1;
+  text-align: left;
+}
+.uni-cursor-not-allowed {
+  /* #ifdef H5 */
+  cursor: not-allowed !important;
+  /* #endif */
+}

package/uni-ui/lib/uni-rate/style.scss

@@ -0,0 +1,33 @@
+
+.uni-rate {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  line-height: 1;
+  font-size: 0;
+  flex-direction: row;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+
+.uni-rate__icon {
+  position: relative;
+  line-height: 1;
+  font-size: 0;
+}
+
+.uni-rate__icon-on {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  line-height: 1;
+  text-align: left;
+}
+
+.uni-cursor-not-allowed {
+  /* #ifdef H5 */
+  cursor: not-allowed !important;
+  /* #endif */
+}

package/uni-ui/lib/uni-rate/uni-rate.vue

@@ -0,0 +1 @@
+<template>
  <view>
    <view ref="uni-rate" class="uni-rate">
      <view
        class="uni-rate__icon"
        :class="{ 'uni-cursor-not-allowed': disabled }"
        :style="{ 'margin-right': marginNumber + 'px' }"
        v-for="(star, index) in stars"
        :key="index"
        @touchstart.stop="touchstart"
        @touchmove.stop="touchmove"
        @mousedown.stop="mousedown"
        @mousemove.stop="mousemove"
        @mouseleave="mouseleave"
      >
        <uni-icons :color="color" :size="size" :type="isFill ? 'star-filled' : 'star'" />
        <!-- #ifdef APP-NVUE -->
        <view :style="{ width: (star.activeWitch.replace('%', '') * size) / 100 + 'px' }" class="uni-rate__icon-on">
          <uni-icons style="text-align: left" :color="disabled ? '#ccc' : activeColor" :size="size" type="star-filled" />
        </view>
        <!-- #endif -->
        <!-- #ifndef APP-NVUE -->
        <view :style="{ width: star.activeWitch }" class="uni-rate__icon-on">
          <uni-icons :color="disabled ? disabledColor : activeColor" :size="size" type="star-filled" />
        </view>
        <!-- #endif -->
      </view>
    </view>
  </view>
 * Rate 评分
 * @description 评分组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=33
 * @property {Boolean} 	isFill = [true|false] 		星星的类型，是否为实心类型, 默认为实心
 * @property {String} 	color 						未选中状态的星星颜色，默认为 "#ececec"
 * @property {String} 	activeColor 				选中状态的星星颜色，默认为 "#ffca3e"
 * @property {String} 	disabledColor 				禁用状态的星星颜色，默认为 "#c0c0c0"
 * @property {Number} 	size 						星星的大小
 * @property {Number} 	value/v-model 				当前评分
 * @property {Number} 	max 						最大评分评分数量，目前一分一颗星
 * @property {Number} 	margin 						星星的间距，单位 px
 * @property {Boolean} 	disabled = [true|false] 	是否为禁用状态，默认为 false
 * @property {Boolean} 	readonly = [true|false] 	是否为只读状态，默认为 false
 * @property {Boolean} 	allowHalf = [true|false] 	是否实现半星，默认为 false
 * @property {Boolean} 	touchable = [true|false] 	是否支持滑动手势，默认为 true
 * @event {Function} change 						uniRate 的 value 改变时触发事件，e={value:Number}
 */
  name: 'UniRate',
  props: {
    isFill: {
      // 星星的类型，是否镂空
      type: [Boolean, String],
      default: true
    },
    color: {
      // 星星未选中的颜色
      type: String,
      default: '#ececec'
    },
    activeColor: {
      // 星星选中状态颜色
      type: String,
      default: '#ffca3e'
    },
    disabledColor: {
      // 星星禁用状态颜色
      type: String,
      default: '#c0c0c0'
    },
    size: {
      // 星星的大小
      type: [Number, String],
      default: 24
    },
    value: {
      // 当前评分
      type: [Number, String],
      default: 0
    },
    modelValue: {
      // 当前评分
      type: [Number, String],
      default: 0
    },
    max: {
      // 最大评分
      type: [Number, String],
      default: 5
    },
    margin: {
      // 星星的间距
      type: [Number, String],
      default: 0
    },
    disabled: {
      // 是否可点击
      type: [Boolean, String],
      default: false
    },
    readonly: {
      // 是否只读
      type: [Boolean, String],
      default: false
    },
    allowHalf: {
      // 是否显示半星
      type: [Boolean, String],
      default: false
    },
    touchable: {
      // 是否支持滑动手势
      type: [Boolean, String],
      default: true
    }
  },
  data() {
    return {
      valueSync: '',
      userMouseFristMove: true,
      userRated: false,
      userLastRate: 1
    };
  },
  watch: {
    value(newVal) {
      this.valueSync = Number(newVal);
    },
    modelValue(newVal) {
      this.valueSync = Number(newVal);
    }
  },
  computed: {
    stars() {
      const value = this.valueSync ? this.valueSync : 0;
      const starList = [];
      const floorValue = Math.floor(value);
      const ceilValue = Math.ceil(value);
      for (let i = 0; i < this.max; i++) {
        if (floorValue > i) {
          starList.push({
            activeWitch: '100%'
          });
        } else if (ceilValue - 1 === i) {
          starList.push({
            activeWitch: (value - floorValue) * 100 + '%'
          });
        } else {
          starList.push({
            activeWitch: '0'
          });
        }
      }
      return starList;
    },
    marginNumber() {
      return Number(this.margin);
    }
  },
  created() {
    this.valueSync = Number(this.value || this.modelValue);
    this._rateBoxLeft = 0;
    this._oldValue = null;
  },
  mounted() {
    setTimeout(() => {
      this._getSize();
    }, 100);
    // #ifdef H5
    this.PC = this.IsPC();
    // #endif
  },
  methods: {
    touchstart(e) {
      // #ifdef H5
      if (this.IsPC()) return;
      // #endif
      if (this.readonly || this.disabled) return;
      const { clientX, screenX } = e.changedTouches[0];
      // TODO 做一下兼容，只有 Nvue 下才有 screenX，其他平台式 clientX
      this._getRateCount(clientX || screenX);
    },
    touchmove(e) {
      // #ifdef H5
      if (this.IsPC()) return;
      // #endif
      if (this.readonly || this.disabled || !this.touchable) return;
      const { clientX, screenX } = e.changedTouches[0];
      this._getRateCount(clientX || screenX);
    },
    /**
     * 兼容 PC @tian
     */
    mousedown(e) {
      // #ifdef H5
      if (!this.IsPC()) return;
      if (this.readonly || this.disabled) return;
      const { clientX } = e;
      this.userLastRate = this.valueSync;
      this._getRateCount(clientX);
      this.userRated = true;
      // #endif
    },
    mousemove(e) {
      // #ifdef H5
      if (!this.IsPC()) return;
      if (this.userRated) return;
      if (this.userMouseFristMove) {
        console.log('---mousemove----', this.valueSync);
        this.userLastRate = this.valueSync;
        this.userMouseFristMove = false;
      }
      if (this.readonly || this.disabled || !this.touchable) return;
      const { clientX } = e;
      this._getRateCount(clientX);
      // #endif
    },
    mouseleave(e) {
      // #ifdef H5
      if (!this.IsPC()) return;
      if (this.readonly || this.disabled || !this.touchable) return;
      if (this.userRated) {
        this.userRated = false;
        return;
      }
      this.valueSync = this.userLastRate;
      // #endif
    },
    // #ifdef H5
    IsPC() {
      var userAgentInfo = navigator.userAgent;
      var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
      var flag = true;
      for (let v = 0; v < Agents.length - 1; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    },
    // #endif
    /**
     * 获取星星个数
     */
    _getRateCount(clientX) {
      const _this = this;
      this._getSize(function () {
        const size = Number(_this.size);
        if (isNaN(size)) {
          return new Error('size 属性只能设置为数字');
        }
        const rateMoveRange = clientX - _this._rateBoxLeft;
        let index = parseInt(rateMoveRange / (size + _this.marginNumber));
        index = index < 0 ? 0 : index;
        index = index > _this.max ? _this.max : index;
        const range = parseInt(rateMoveRange - (size + _this.marginNumber) * index);
        let value = 0;
        if (_this._oldValue === index && !_this.PC) return;
        _this._oldValue = index;
        if (_this.allowHalf) {
          if (range > size / 2) {
            value = index + 1;
          } else {
            value = index + 0.5;
          }
        } else {
          value = index + 1;
        }
        value = Math.max(0.5, Math.min(value, _this.max));
        _this.valueSync = value;
        _this._onChange();
      });
    },
    /**
     * 触发动态修改
     */
    _onChange() {
      this.$emit('input', this.valueSync);
      this.$emit('update:modelValue', this.valueSync);
      this.$emit('change', {
        value: this.valueSync
      });
    },
    /**
     * 获取星星距离屏幕左侧距离
     */
    _getSize(fn) {
      // #ifndef APP-NVUE
      uni
        .createSelectorQuery()
        .in(this)
        .select('.uni-rate')
        .boundingClientRect()
        .exec((ret) => {
          if (ret) {
            this._rateBoxLeft = ret[0].left;
            fn && fn();
          }
        });
      // #endif
      // #ifdef APP-NVUE
      dom.getComponentRect(this.$refs['uni-rate'], (ret) => {
        const size = ret.size;
        if (size) {
          this._rateBoxLeft = size.left;
          fn && fn();
        }
      });
      // #endif
    }
  }

package/uni-ui/lib/uni-row/style.css

@@ -0,0 +1,58 @@
+.uni-row {
+  position: relative;
+  flex-direction: row;
+  /* #ifdef APP-NVUE */
+  flex: 1;
+  /* #endif */
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+}
+/* #ifndef APP-NVUE */
+.uni-row::before,
+.uni-row::after {
+  display: table;
+  content: '';
+}
+.uni-row::after {
+  clear: both;
+}
+/* #endif */
+/* #ifndef MP-QQ || MP-TOUTIAO || MP-BAIDU */
+.uni-row--flex {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  flex-wrap: wrap;
+  flex: 1;
+}
+.uni-row--flex:before, .uni-row--flex:after {
+  /* #ifndef APP-NVUE */
+  display: none;
+  /* #endif */
+}
+.uni-row--flex-justify-center {
+  justify-content: center;
+}
+.uni-row--flex-justify-end {
+  justify-content: flex-end;
+}
+.uni-row--flex-justify-space-between {
+  justify-content: space-between;
+}
+.uni-row--flex-justify-space-around {
+  justify-content: space-around;
+}
+.uni-row--flex-align-middle {
+  align-items: center;
+}
+.uni-row--flex-align-bottom {
+  align-items: flex-end;
+}
+/* #endif */
+/* #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ */
+:host {
+  display: block;
+}
+/* #endif */

package/uni-ui/lib/uni-row/style.scss

@@ -0,0 +1,104 @@
+
+$layout-namespace: '.uni-';
+$row: $layout-namespace + 'row';
+$modifier-separator: '--';
+
+@mixin utils-clearfix {
+  $selector: &;
+
+  @at-root {
+    /* #ifndef APP-NVUE */
+    #{$selector}::before,
+    #{$selector}::after {
+      display: table;
+      content: '';
+    }
+
+    #{$selector}::after {
+      clear: both;
+    }
+
+    /* #endif */
+  }
+}
+
+@mixin utils-flex($direction: row) {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: $direction;
+}
+
+@mixin set-flex($state) {
+  @at-root &-#{$state} {
+    @content;
+  }
+}
+
+#{$row} {
+  position: relative;
+  flex-direction: row;
+
+  /* #ifdef APP-NVUE */
+  flex: 1;
+  /* #endif */
+
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+
+  // 非nvue使用float布局
+  @include utils-clearfix;
+
+  // 在QQ、字节、百度小程序平台，编译后使用shadow dom，不可使用flex布局，使用float
+  @at-root {
+    /* #ifndef MP-QQ || MP-TOUTIAO || MP-BAIDU */
+    &#{$modifier-separator}flex {
+      @include utils-flex;
+      flex-wrap: wrap;
+      flex: 1;
+
+      &:before,
+      &:after {
+        /* #ifndef APP-NVUE */
+        display: none;
+        /* #endif */
+      }
+
+      @include set-flex(justify-center) {
+        justify-content: center;
+      }
+
+      @include set-flex(justify-end) {
+        justify-content: flex-end;
+      }
+
+      @include set-flex(justify-space-between) {
+        justify-content: space-between;
+      }
+
+      @include set-flex(justify-space-around) {
+        justify-content: space-around;
+      }
+
+      @include set-flex(align-middle) {
+        align-items: center;
+      }
+
+      @include set-flex(align-bottom) {
+        align-items: flex-end;
+      }
+    }
+
+    /* #endif */
+  }
+}
+
+// 字节、QQ配置后不生效
+// 此处用法无法使用
+/* #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ */
+:host {
+  display: block;
+}
+
+/* #endif */

package/uni-ui/lib/uni-row/uni-row.vue

@@ -0,0 +1,83 @@
+<template>
+  <view
+    :class="['uni-row', typeClass, justifyClass, alignClass]"
+    :style="{
+      marginLeft: `${Number(marginValue)}rpx`,
+      marginRight: `${Number(marginValue)}rpx`
+    }"
+  >
+    <slot></slot>
+  </view>
+</template>
+<script>
+const ComponentClass = 'uni-row';
+const modifierSeparator = '--';
+/**
+ * Row	布局-行
+ * @description	流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。
+ * @tutorial	https://ext.dcloud.net.cn/plugin?id=3958
+ *
+ * @property	{gutter} type = Number 栅格间隔
+ * @property	{justify} type = String flex 布局下的水平排列方式
+ * 						可选	start/end/center/space-around/space-between	start
+ * 						默认值	start
+ * @property	{align} type = String flex 布局下的垂直排列方式
+ * 						可选	top/middle/bottom
+ * 						默认值	top
+ * @property	{width} type = String|Number nvue下需要自行配置宽度用于计算
+ * 						默认值 750
+ */
+export default {
+  name: 'uniRow',
+  componentName: 'uniRow',
+  // #ifdef MP-WEIXIN
+  options: {
+    virtualHost: true // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现，可使用flex布局
+  },
+  // #endif
+  props: {
+    type: String,
+    gutter: Number,
+    justify: {
+      type: String,
+      default: 'start'
+    },
+    align: {
+      type: String,
+      default: 'top'
+    },
+    // nvue如果使用span等属性，需要配置宽度
+    width: {
+      type: [String, Number],
+      default: 750
+    }
+  },
+  created() {
+    // #ifdef APP-NVUE
+    this.type = 'flex';
+    // #endif
+  },
+  computed: {
+    marginValue() {
+      // #ifndef APP-NVUE
+      if (this.gutter) {
+        return -(this.gutter / 2);
+      }
+      // #endif
+      return 0;
+    },
+    typeClass() {
+      return this.type === 'flex' ? `${ComponentClass + modifierSeparator}flex` : '';
+    },
+    justifyClass() {
+      return this.justify !== 'start' ? `${ComponentClass + modifierSeparator}flex-justify-${this.justify}` : '';
+    },
+    alignClass() {
+      return this.align !== 'top' ? `${ComponentClass + modifierSeparator}flex-align-${this.align}` : '';
+    }
+  }
+};
+</script>
+<style>
+@import './style.css';
+</style>

package/uni-ui/lib/uni-scss/changelog.md

@@ -0,0 +1,8 @@
+## 1.0.3（2022-01-21）
+- 优化 组件示例
+## 1.0.2（2021-11-22）
+- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
+## 1.0.1（2021-11-22）
+- 修复 vue3中scss语法兼容问题
+## 1.0.0（2021-11-18）
+- init

package/uni-ui/lib/uni-scss/index.scss

@@ -0,0 +1 @@
+@import './styles/index.scss';