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

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

@@ -1,234 +0,0 @@
-<template>
-  <view
-    class="u-radio"
-    @tap.stop="wrapperClickHandler"
-    :style="[radioStyle]"
-    :class="[
-      `u-radio-label--${parentData.iconPlacement}`,
-      parentData.borderBottom && parentData.placement === 'column' && 'u-border-bottom'
-    ]"
-  >
-    <view class="u-radio__icon-wrap" @tap.stop="iconClickHandler" :class="iconClasses" :style="[iconWrapStyle]">
-      <slot name="icon">
-        <u-icon class="u-radio__icon-wrap__icon" name="checkbox-mark" :size="elIconSize" :color="elIconColor" />
-      </slot>
-    </view>
-    <slot>
-      <text
-        class="u-radio__text"
-        @tap.stop="labelClickHandler"
-        :style="{
-          color: elDisabled ? elInactiveColor : elLabelColor,
-          fontSize: elLabelSize,
-          lineHeight: elLabelSize
-        }"
-      >
-        {{ label }}
-      </text>
-    </slot>
-  </view>
-</template>
-<script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
-/**
- * radio 单选框
- * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配u-radio-group使用
- * @tutorial https://ijry.github.io/uview-plus/components/radio.html
- * @property {String | Number}	name			radio的名称
- * @property {String}			shape			形状，square为方形，circle为圆型
- * @property {Boolean}			disabled		是否禁用
- * @property {String | Boolean}	labelDisabled	是否禁止点击提示语选中单选框
- * @property {String}			activeColor		选中时的颜色，如设置parent的active-color将失效
- * @property {String}			inactiveColor	未选中的颜色
- * @property {String | Number}	iconSize		图标大小，单位px
- * @property {String | Number}	labelSize		label字体大小，单位px
- * @property {String | Number}	label			label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式
- * @property {String | Number}	size			整体的大小
- * @property {String}			iconColor		图标颜色
- * @property {String}			labelColor		label的颜色
- * @property {Object}			customStyle		组件的样式，对象形式
- *
- * @event {Function} change 某个radio状态发生变化时触发(选中状态)
- * @example <u-radio :labelDisabled="false">门掩黄昏，无计留春住</u-radio>
- */
-export default {
-  name: 'u-radio',
-  mixins: [mpMixin, mixin, props],
-  data() {
-    return {
-      checked: false,
-      // 当你看到这段代码的时候，
-      // 父组件的默认值，因为头条小程序不支持在computed中使用this.parent.shape的形式
-      // 故只能使用如此方法
-      parentData: {
-        iconSize: 12,
-        labelDisabled: null,
-        disabled: null,
-        shape: null,
-        activeColor: null,
-        inactiveColor: null,
-        size: 18,
-        value: null,
-        iconColor: null,
-        placement: 'row',
-        borderBottom: false,
-        iconPlacement: 'left'
-      }
-    };
-  },
-  computed: {
-    // 是否禁用，如果父组件u-raios-group禁用的话，将会忽略子组件的配置
-    elDisabled() {
-      return this.disabled !== '' ? this.disabled : this.parentData.disabled !== null ? this.parentData.disabled : false;
-    },
-    // 是否禁用label点击
-    elLabelDisabled() {
-      return this.labelDisabled !== ''
-        ? this.labelDisabled
-        : this.parentData.labelDisabled !== null
-          ? this.parentData.labelDisabled
-          : false;
-    },
-    // 组件尺寸，对应size的值，默认值为21px
-    elSize() {
-      return this.size ? this.size : this.parentData.size ? this.parentData.size : 21;
-    },
-    // 组件的勾选图标的尺寸，默认12px
-    elIconSize() {
-      return this.iconSize ? this.iconSize : this.parentData.iconSize ? this.parentData.iconSize : 12;
-    },
-    // 组件选中激活时的颜色
-    elActiveColor() {
-      return this.activeColor ? this.activeColor : this.parentData.activeColor ? this.parentData.activeColor : '#2979ff';
-    },
-    // 组件选未中激活时的颜色
-    elInactiveColor() {
-      return this.inactiveColor ? this.inactiveColor : this.parentData.inactiveColor ? this.parentData.inactiveColor : '#c8c9cc';
-    },
-    // label的颜色
-    elLabelColor() {
-      return this.labelColor ? this.labelColor : this.parentData.labelColor ? this.parentData.labelColor : '#606266';
-    },
-    // 组件的形状
-    elShape() {
-      return this.shape ? this.shape : this.parentData.shape ? this.parentData.shape : 'circle';
-    },
-    // label大小
-    elLabelSize() {
-      return uni.$u.addUnit(this.labelSize ? this.labelSize : this.parentData.labelSize ? this.parentData.labelSize : '15');
-    },
-    elIconColor() {
-      const iconColor = this.iconColor ? this.iconColor : this.parentData.iconColor ? this.parentData.iconColor : '#ffffff';
-      // 图标的颜色
-      if (this.elDisabled) {
-        // disabled状态下，已勾选的radio图标改为elInactiveColor
-        return this.checked ? this.elInactiveColor : 'transparent';
-      } else {
-        return this.checked ? iconColor : 'transparent';
-      }
-    },
-    iconClasses() {
-      let classes = [];
-      // 组件的形状
-      classes.push('u-radio__icon-wrap--' + this.elShape);
-      if (this.elDisabled) {
-        classes.push('u-radio__icon-wrap--disabled');
-      }
-      if (this.checked && this.elDisabled) {
-        classes.push('u-radio__icon-wrap--disabled--checked');
-      }
-      // 支付宝，头条小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
-      // #ifdef MP-ALIPAY || MP-TOUTIAO
-      classes = classes.join(' ');
-      // #endif
-      return classes;
-    },
-    iconWrapStyle() {
-      // radio的整体样式
-      const style = {};
-      style.backgroundColor = this.checked && !this.elDisabled ? this.elActiveColor : '#ffffff';
-      style.borderColor = this.checked && !this.elDisabled ? this.elActiveColor : this.elInactiveColor;
-      style.width = uni.$u.addUnit(this.elSize);
-      style.height = uni.$u.addUnit(this.elSize);
-      // 如果是图标在右边的话，移除它的右边距
-      if (this.parentData.iconPlacement === 'right') {
-        style.marginRight = 0;
-      }
-      return style;
-    },
-    radioStyle() {
-      const style = {};
-      if (this.parentData.borderBottom && this.parentData.placement === 'row') {
-        uni.$u.error('检测到您将borderBottom设置为true，需要同时将u-radio-group的placement设置为column才有效');
-      }
-      // 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
-      if (this.parentData.borderBottom && this.parentData.placement === 'column') {
-        // ios像素密度高，需要多一点的距离
-        style.paddingBottom = uni.$u.os() === 'ios' ? '12px' : '8px';
-      }
-      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
-    }
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
-      this.updateParentData();
-      if (!this.parent) {
-        uni.$u.error('u-radio必须搭配u-radio-group组件使用');
-      }
-      // 设置初始化时，是否默认选中的状态
-      this.checked = this.name === this.parentData.value;
-    },
-    updateParentData() {
-      this.getParentData('u-radio-group');
-    },
-    // 点击图标
-    iconClickHandler(e) {
-      this.preventEvent(e);
-      // 如果整体被禁用，不允许被点击
-      if (!this.elDisabled) {
-        this.setRadioCheckedStatus();
-      }
-    },
-    // 横向两端排列时，点击组件即可触发选中事件
-    wrapperClickHandler(e) {
-      this.parentData.iconPlacement === 'right' && this.iconClickHandler(e);
-    },
-    // 点击label
-    labelClickHandler(e) {
-      this.preventEvent(e);
-      // 如果按钮整体被禁用或者label被禁用，则不允许点击文字修改状态
-      if (!this.elLabelDisabled && !this.elDisabled) {
-        this.setRadioCheckedStatus();
-      }
-    },
-    emitEvent() {
-      // u-radio的checked不为true时(意味着未选中)，才发出事件，避免多次点击触发事件
-      if (!this.checked) {
-        this.$emit('change', this.name);
-        // 尝试调用u-form的验证方法，进行一定延迟，否则微信小程序更新可能会不及时
-        this.$nextTick(() => {
-          uni.$u.formValidate(this, 'change');
-        });
-      }
-    },
-    // 改变组件选中状态
-    // 这里的改变的依据是，更改本组件的checked值为true，同时通过父组件遍历所有u-radio实例
-    // 将本组件外的其他u-radio的checked都设置为false(都被取消选中状态)，因而只剩下一个为选中状态
-    setRadioCheckedStatus() {
-      this.emitEvent();
-      // 将本组件标记为选中状态
-      this.checked = true;
-      typeof this.parent.unCheckedOther === 'function' && this.parent.unCheckedOther(this);
-    }
-  }
-};
-</script>
-<style scoped>
-@import './style.css';
-</style>

package/uview-ui/components/u-radio-group/props.js

@@ -1,86 +0,0 @@
-import defprops from '../../libs/config/props';
-export default {
-  props: {
-    // 绑定的值
-    value: {
-      type: [String, Number, Boolean],
-      default: defprops.radioGroup.value
-    },
-
-    // 是否禁用全部radio
-    disabled: {
-      type: Boolean,
-      default: defprops.radioGroup.disabled
-    },
-    // 形状，circle-圆形，square-方形
-    shape: {
-      type: String,
-      default: defprops.radioGroup.shape
-    },
-    // 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
-    activeColor: {
-      type: String,
-      default: defprops.radioGroup.activeColor
-    },
-    // 未选中的颜色
-    inactiveColor: {
-      type: String,
-      default: defprops.radioGroup.inactiveColor
-    },
-    // 标识符
-    name: {
-      type: String,
-      default: defprops.radioGroup.name
-    },
-    // 整个组件的尺寸，默认px
-    size: {
-      type: [String, Number],
-      default: defprops.radioGroup.size
-    },
-    // 布局方式，row-横向，column-纵向
-    placement: {
-      type: String,
-      default: defprops.radioGroup.placement
-    },
-    // label的文本
-    label: {
-      type: [String],
-      default: defprops.radioGroup.label
-    },
-    // label的颜色 （默认 '#303133' ）
-    labelColor: {
-      type: [String],
-      default: defprops.radioGroup.labelColor
-    },
-    // label的字体大小，px单位
-    labelSize: {
-      type: [String, Number],
-      default: defprops.radioGroup.labelSize
-    },
-    // 是否禁止点击文本操作checkbox(默认 false )
-    labelDisabled: {
-      type: Boolean,
-      default: defprops.radioGroup.labelDisabled
-    },
-    // 图标颜色
-    iconColor: {
-      type: String,
-      default: defprops.radioGroup.iconColor
-    },
-    // 图标的大小，单位px
-    iconSize: {
-      type: [String, Number],
-      default: defprops.radioGroup.iconSize
-    },
-    // 竖向配列时，是否显示下划线
-    borderBottom: {
-      type: Boolean,
-      default: defprops.radioGroup.borderBottom
-    },
-    // 图标与文字的对齐方式
-    iconPlacement: {
-      type: String,
-      default: defprops.radio.iconPlacement
-    }
-  }
-};

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

@@ -1,26 +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-radio-group {
-  flex: 1;
-}
-.u-radio-group--row {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-}
-.u-radio-group--column {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: column;
-}

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

@@ -1,13 +0,0 @@
-@import '../../libs/css/components.scss';
-
-.u-radio-group {
-  flex: 1;
-
-  &--row {
-    @include flex;
-  }
-
-  &--column {
-    @include flex(column);
-  }
-}

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

@@ -1,97 +0,0 @@
-<template>
-  <view class="u-radio-group" :class="bemClass">
-    <slot></slot>
-  </view>
-</template>
-<script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
-/**
- * radioRroup 单选框父组件
- * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配u-radio使用
- * @tutorial https://ijry.github.io/uview-plus/components/radio.html
- * @property {String | Number | Boolean}	value 			绑定的值
- * @property {Boolean}						disabled		是否禁用所有radio（默认 false ）
- * @property {String}						shape			外观形状，shape-方形，circle-圆形(默认 circle )
- * @property {String}						activeColor		选中时的颜色，应用到所有子Radio组件（默认 '#2979ff' ）
- * @property {String}						inactiveColor	未选中的颜色 (默认 '#c8c9cc' )
- * @property {String}						name			标识符
- * @property {String | Number}				size			组件整体的大小，单位px（默认 18 ）
- * @property {String}						placement		布局方式，row-横向，column-纵向 （默认 'row' ）
- * @property {String}						label			文本
- * @property {String}						labelColor		label的颜色 （默认 '#303133' ）
- * @property {String | Number}				labelSize		label的字体大小，px单位 （默认 14 ）
- * @property {Boolean}						labelDisabled	是否禁止点击文本操作checkbox(默认 false )
- * @property {String}						iconColor		图标颜色 （默认 '#ffffff' ）
- * @property {String | Number}				iconSize		图标的大小，单位px （默认 12 ）
- * @property {Boolean}						borderBottom	placement为row时，是否显示下边框 （默认 false ）
- * @property {String}						iconPlacement	图标与文字的对齐方式 （默认 'left' ）
- * @property {Object}						customStyle		组件的样式，对象形式
- * @event {Function} change 任一个radio状态发生变化时触发
- * @example <u-radio-group v-model="value"></u-radio-group>
- */
-export default {
-  name: 'u-radio-group',
-  mixins: [mpMixin, mixin, props],
-  computed: {
-    // 这里computed的变量，都是子组件u-radio需要用到的，由于头条小程序的兼容性差异，子组件无法实时监听父组件参数的变化
-    // 所以需要手动通知子组件，这里返回一个parentData变量，供watch监听，在其中去通知每一个子组件重新从父组件(u-radio-group)
-    // 拉取父组件新的变化后的参数
-    parentData() {
-      return [
-        this.value,
-        this.disabled,
-        this.inactiveColor,
-        this.activeColor,
-        this.size,
-        this.labelDisabled,
-        this.shape,
-        this.iconSize,
-        this.borderBottom,
-        this.placement
-      ];
-    },
-    bemClass() {
-      // this.bem为一个computed变量，在mixin中
-      return this.bem('radio-group', ['placement']);
-    }
-  },
-  watch: {
-    // 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
-    parentData() {
-      if (this.children.length) {
-        this.children.map((child) => {
-          // 判断子组件(u-radio)如果有init方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
-          typeof child.init === 'function' && child.init();
-        });
-      }
-    }
-  },
-  data() {
-    return {};
-  },
-  created() {
-    this.children = [];
-  },
-  methods: {
-    // 将其他的radio设置为未选中的状态
-    unCheckedOther(childInstance) {
-      this.children.map((child) => {
-        // 所有子radio中，被操作组件实例的checked的值无需修改
-        if (childInstance !== child) {
-          child.checked = false;
-        }
-      });
-      const { name } = childInstance;
-      // 通过emit事件，设置父组件通过v-model双向绑定的值
-      this.$emit('input', name);
-      // 发出事件
-      this.$emit('change', name);
-    }
-  }
-};
-</script>
-<style scoped>
-@import './style.css';
-</style>

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

@@ -1,70 +0,0 @@
-import defprops from '../../libs/config/props';
-export default {
-  props: {
-    // 用于v-model双向绑定选中的星星数量
-    value: {
-      type: [String, Number],
-      default: defprops.rate.value
-    },
-    // 要显示的星星数量
-    count: {
-      type: [String, Number],
-      default: defprops.rate.count
-    },
-    // 是否不可选中
-    disabled: {
-      type: Boolean,
-      default: defprops.rate.disabled
-    },
-    // 是否只读
-    readonly: {
-      type: Boolean,
-      default: defprops.rate.readonly
-    },
-    // 星星的大小，单位px
-    size: {
-      type: [String, Number],
-      default: defprops.rate.size
-    },
-    // 未选中时的颜色
-    inactiveColor: {
-      type: String,
-      default: defprops.rate.inactiveColor
-    },
-    // 选中的颜色
-    activeColor: {
-      type: String,
-      default: defprops.rate.activeColor
-    },
-    // 星星之间的间距，单位px
-    gutter: {
-      type: [String, Number],
-      default: defprops.rate.gutter
-    },
-    // 最少能选择的星星个数
-    minCount: {
-      type: [String, Number],
-      default: defprops.rate.minCount
-    },
-    // 是否允许半星
-    allowHalf: {
-      type: Boolean,
-      default: defprops.rate.allowHalf
-    },
-    // 选中时的图标(星星)
-    activeIcon: {
-      type: String,
-      default: defprops.rate.activeIcon
-    },
-    // 未选中时的图标(星星)
-    inactiveIcon: {
-      type: String,
-      default: defprops.rate.inactiveIcon
-    },
-    // 是否可以通过滑动手势选择评分
-    touchable: {
-      type: Boolean,
-      default: defprops.rate.touchable
-    }
-  }
-};

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

@@ -1,43 +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-rate {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  align-items: center;
-  margin: 0;
-  padding: 0;
-  /* #ifndef APP-NVUE */
-  touch-action: none;
-  /* #endif */
-}
-.u-rate__content {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-}
-.u-rate__content__item {
-  position: relative;
-}
-.u-rate__content__item__icon-wrap--half {
-  position: absolute;
-  overflow: hidden;
-  top: 0;
-  left: 0;
-}
-.u-icon {
-  /* #ifndef APP-NVUE */
-  box-sizing: border-box;
-  /* #endif */
-}

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

@@ -1,38 +0,0 @@
-@import '../../libs/css/components.scss';
-$u-rate-margin: 0 !default;
-$u-rate-padding: 0 !default;
-$u-rate-item-icon-wrap-half-top: 0 !default;
-$u-rate-item-icon-wrap-half-left: 0 !default;
-
-.u-rate {
-  @include flex;
-  align-items: center;
-  margin: $u-rate-margin;
-  padding: $u-rate-padding;
-  /* #ifndef APP-NVUE */
-  touch-action: none;
-  /* #endif */
-
-  &__content {
-    @include flex;
-
-    &__item {
-      position: relative;
-
-      &__icon-wrap {
-        &--half {
-          position: absolute;
-          overflow: hidden;
-          top: $u-rate-item-icon-wrap-half-top;
-          left: $u-rate-item-icon-wrap-half-left;
-        }
-      }
-    }
-  }
-}
-
-.u-icon {
-  /* #ifndef APP-NVUE */
-  box-sizing: border-box;
-  /* #endif */
-}