@10yun/cv-mobile-ui 0.5.27 → 0.5.29

package/uview-plus/components/u-cell-group/u-cell-group.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :style="[$u.addStyle(customStyle)]" :class="[customClass]" class="u-cell-group">
+  <view :style="[addStyle(customStyle)]" :class="[customClass]" class="u-cell-group">
     <view v-if="title" class="u-cell-group__title">
       <slot name="title">
         <text class="u-cell-group__title__text">{{ title }}</text>
@@ -12,13 +12,14 @@
   </view>
 </template>
 <script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle } from '../../libs/function/index';
 /**
  * cellGroup  单元格
  * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。
- * @tutorial https://uviewui.com/components/cell.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/cell.html
  *
  * @property {String}	title		分组标题
  * @property {Boolean}	border		是否显示外边框 (默认 true )
@@ -29,7 +30,10 @@ import mixin from '../../libs/mixin/mixin.js';
  */
 export default {
   name: 'u-cell-group',
-  mixins: [mpMixin, mixin, props]
+  mixins: [mpMixin, mixin, props],
+  methods: {
+    addStyle
+  }
 };
 </script>
 <style scoped>

package/uview-plus/components/u-checkbox/props.js

@@ -1,70 +1,76 @@
-import defprops from '../../libs/config/props';
-export default {
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+export const props = defineMixin({
   props: {
     // checkbox的名称
     name: {
       type: [String, Number, Boolean],
-      default: defprops.checkbox.name
+      default: () => defProps.checkbox.name
     },
     // 形状，square为方形，circle为圆型
     shape: {
       type: String,
-      default: defprops.checkbox.shape
+      default: () => defProps.checkbox.shape
     },
     // 整体的大小
     size: {
       type: [String, Number],
-      default: defprops.checkbox.size
+      default: () => defProps.checkbox.size
     },
     // 是否默认选中
     checked: {
       type: Boolean,
-      default: defprops.checkbox.checked
+      default: () => defProps.checkbox.checked
     },
     // 是否禁用
     disabled: {
       type: [String, Boolean],
-      default: defprops.checkbox.disabled
+      default: () => defProps.checkbox.disabled
     },
     // 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
     activeColor: {
       type: String,
-      default: defprops.checkbox.activeColor
+      default: () => defProps.checkbox.activeColor
     },
     // 未选中的颜色
     inactiveColor: {
       type: String,
-      default: defprops.checkbox.inactiveColor
+      default: () => defProps.checkbox.inactiveColor
     },
     // 图标的大小，单位px
     iconSize: {
       type: [String, Number],
-      default: defprops.checkbox.iconSize
+      default: () => defProps.checkbox.iconSize
     },
     // 图标颜色
     iconColor: {
       type: String,
-      default: defprops.checkbox.iconColor
+      default: () => defProps.checkbox.iconColor
     },
     // label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式
     label: {
       type: [String, Number],
-      default: defprops.checkbox.label
+      default: () => defProps.checkbox.label
     },
     // label的字体大小，px单位
     labelSize: {
       type: [String, Number],
-      default: defprops.checkbox.labelSize
+      default: () => defProps.checkbox.labelSize
     },
     // label的颜色
     labelColor: {
       type: String,
-      default: defprops.checkbox.labelColor
+      default: () => defProps.checkbox.labelColor
     },
     // 是否禁止点击提示语选中复选框
     labelDisabled: {
       type: [String, Boolean],
-      default: defprops.checkbox.labelDisabled
+      default: () => defProps.checkbox.labelDisabled
+    },
+    // 是否独立使用
+    usedAlone: {
+      type: [Boolean],
+      default: () => false
     }
   }
-};
+});

package/uview-plus/components/u-checkbox/style.css

@@ -1,5 +1,20 @@
 /* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -83,4 +98,4 @@ view, scroll-view, swiper-item {
 }
 .u-checkbox__label--disabled {
   color: #c8c9cc;
-}
+}

package/uview-plus/components/u-checkbox/u-checkbox.vue

@@ -1,6 +1,6 @@
 <template>
   <view
-    class="u-checkbox"
+    class="u-checkbox cursor-pointer"
     :style="[checkboxStyle]"
     @tap.stop="wrapperClickHandler"
     :class="[
@@ -8,31 +8,36 @@
       parentData.borderBottom && parentData.placement === 'column' && 'u-border-bottom'
     ]"
   >
-    <view class="u-checkbox__icon-wrap" @tap.stop="iconClickHandler" :class="iconClasses" :style="[iconWrapStyle]">
-      <slot name="icon">
+    <view class="u-checkbox__icon-wrap cursor-pointer" @tap.stop="iconClickHandler" :class="iconClasses" :style="[iconWrapStyle]">
+      <slot name="icon" :elIconSize="elIconSize" :elIconColor="elIconColor">
         <u-icon class="u-checkbox__icon-wrap__icon" name="checkbox-mark" :size="elIconSize" :color="elIconColor" />
       </slot>
     </view>
-    <text
-      @tap.stop="labelClickHandler"
-      :style="{
-        color: elDisabled ? elInactiveColor : elLabelColor,
-        fontSize: elLabelSize,
-        lineHeight: elLabelSize
-      }"
-    >
-      {{ label }}
-    </text>
+    <view class="u-checkbox__label-wrap cursor-pointer" @tap.stop="labelClickHandler">
+      <slot name="label" :label="label" :elDisabled="elDisabled">
+        <text
+          :style="{
+            color: elDisabled ? elInactiveColor : elLabelColor,
+            fontSize: elLabelSize,
+            lineHeight: elLabelSize
+          }"
+        >
+          {{ label }}
+        </text>
+      </slot>
+    </view>
   </view>
 </template>
 <script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle, addUnit, deepMerge, formValidate, error } from '../../libs/function/index';
+import test from '../../libs/function/test';
 /**
  * checkbox  复选框
  * @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
- * @tutorial https://uviewui.com/components/checkbox.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/checkbox.html
  * @property {String | Number | Boolean}	name			checkbox组件的标示符
  * @property {String}						shape			形状，square为方形，circle为圆型
  * @property {String | Number}				size			整体的大小
@@ -81,7 +86,7 @@ export default {
     };
   },
   computed: {
-    // 是否禁用，如果父组件u-raios-group禁用的话，将会忽略子组件的配置
+    // 是否禁用，如果父组件u-radios-group禁用的话，将会忽略子组件的配置
     elDisabled() {
       return this.disabled !== '' ? this.disabled : this.parentData.disabled !== null ? this.parentData.disabled : false;
     },
@@ -90,8 +95,8 @@ export default {
       return this.labelDisabled !== ''
         ? this.labelDisabled
         : this.parentData.labelDisabled !== null
-        ? this.parentData.labelDisabled
-        : false;
+          ? this.parentData.labelDisabled
+          : false;
     },
     // 组件尺寸，对应size的值，默认值为21px
     elSize() {
@@ -119,7 +124,7 @@ export default {
     },
     // label大小
     elLabelSize() {
-      return uni.$u.addUnit(this.labelSize ? this.labelSize : this.parentData.labelSize ? this.parentData.labelSize : '15');
+      return 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';
@@ -152,50 +157,61 @@ export default {
       const style = {};
       style.backgroundColor = this.isChecked && !this.elDisabled ? this.elActiveColor : '#ffffff';
       style.borderColor = this.isChecked && !this.elDisabled ? this.elActiveColor : this.elInactiveColor;
-      style.width = uni.$u.addUnit(this.elSize);
-      style.height = uni.$u.addUnit(this.elSize);
+      style.width = addUnit(this.elSize);
+      style.height = addUnit(this.elSize);
       // 如果是图标在右边的话，移除它的右边距
-      if (this.parentData.iconPlacement === 'right') {
-        style.marginRight = 0;
+      if (!this.usedAlone) {
+        if (this.parentData.iconPlacement === 'right') {
+          style.marginRight = 0;
+        }
       }
       return style;
     },
     checkboxStyle() {
       const style = {};
-      if (this.parentData.borderBottom && this.parentData.placement === 'row') {
-        uni.$u.error('检测到您将borderBottom设置为true，需要同时将u-checkbox-group的placement设置为column才有效');
-      }
-      // 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
-      if (this.parentData.borderBottom && this.parentData.placement === 'column') {
-        style.paddingBottom = '8px';
+      if (!this.usedAlone) {
+        if (this.parentData.borderBottom && this.parentData.placement === 'row') {
+          error('检测到您将borderBottom设置为true，需要同时将u-checkbox-group的placement设置为column才有效');
+        }
+        // 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
+        if (this.parentData.borderBottom && this.parentData.placement === 'column') {
+          style.paddingBottom = '8px';
+        }
       }
-      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+      return deepMerge(style, addStyle(this.customStyle));
     }
   },
   mounted() {
     this.init();
   },
+  emits: ['change', 'update:checked'],
   methods: {
     init() {
-      // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
-      this.updateParentData();
-      if (!this.parent) {
-        uni.$u.error('u-checkbox必须搭配u-checkbox-group组件使用');
-      }
-      // #ifdef VUE2
-      const value = this.parentData.value;
-      // #endif
-      // #ifdef VUE3
-      const value = this.parentData.modelValue;
-      // #endif
-      // 设置初始化时，是否默认选中的状态，父组件u-checkbox-group的value可能是array，所以额外判断
-      if (this.checked) {
-        this.isChecked = true;
-      } else if (uni.$u.test.array(value)) {
-        // 查找数组是是否存在this.name元素值
-        this.isChecked = value.some((item) => {
-          return item === this.name;
-        });
+      if (!this.usedAlone) {
+        // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
+        this.updateParentData();
+        if (!this.parent) {
+          error('u-checkbox必须搭配u-checkbox-group组件使用');
+        }
+        // #ifdef VUE2
+        const value = this.parentData.value;
+        // #endif
+        // #ifdef VUE3
+        const value = this.parentData.modelValue;
+        // #endif
+        // 设置初始化时，是否默认选中的状态，父组件u-checkbox-group的value可能是array，所以额外判断
+        if (this.checked) {
+          this.isChecked = true;
+        } else if (!this.usedAlone && test.array(value)) {
+          // 查找数组是是否存在this.name元素值
+          this.isChecked = value.some((item) => {
+            return item === this.name;
+          });
+        }
+      } else {
+        if (this.checked) {
+          this.isChecked = true;
+        }
       }
     },
     updateParentData() {
@@ -203,7 +219,11 @@ export default {
     },
     // 横向两端排列时，点击组件即可触发选中事件
     wrapperClickHandler(e) {
-      this.parentData.iconPlacement === 'right' && this.iconClickHandler(e);
+      if (!this.usedAlone) {
+        this.parentData.iconPlacement === 'right' && this.iconClickHandler(e);
+      } else {
+        this.iconClickHandler(e);
+      }
     },
     // 点击图标
     iconClickHandler(e) {
@@ -222,10 +242,16 @@ export default {
       }
     },
     emitEvent() {
-      this.$emit('change', this.isChecked);
+      this.$emit('change', this.isChecked, {
+        name: this.name
+      });
+      // 双向绑定
+      if (this.usedAlone) {
+        this.$emit('update:checked', this.isChecked);
+      }
       // 尝试调用u-form的验证方法，进行一定延迟，否则微信小程序更新可能会不及时
       this.$nextTick(() => {
-        uni.$u.formValidate(this, 'change');
+        formValidate(this, 'change');
       });
     },
     // 改变组件选中状态
@@ -235,12 +261,16 @@ export default {
       // 将本组件标记为与原来相反的状态
       this.isChecked = !this.isChecked;
       this.emitEvent();
-      typeof this.parent.unCheckedOther === 'function' && this.parent.unCheckedOther(this);
+      if (!this.usedAlone) {
+        typeof this.parent.unCheckedOther === 'function' && this.parent.unCheckedOther(this);
+      }
     }
   },
   watch: {
-    checked() {
-      this.isChecked = this.checked;
+    checked(newValue, oldValue) {
+      if (newValue !== this.isChecked) {
+        this.isChecked = newValue;
+      }
     }
   }
 };

package/uview-plus/{libs/config/props → components/u-checkbox-group}/checkboxGroup.js

@@ -11,7 +11,7 @@ export default {
     // checkbox-group组件
     checkboxGroup: {
         name: '',
-        value: () => [],
+        value: [],
         shape: 'square',
         disabled: false,
         activeColor: '#2979ff',

package/uview-plus/components/u-checkbox-group/props.js

@@ -1,91 +1,93 @@
-import defprops from '../../libs/config/props';
-export default {
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+
+export const props = defineMixin({
   props: {
     // 标识符
     name: {
       type: String,
-      default: defprops.checkboxGroup.name
+      default: () => defProps.checkboxGroup.name
     },
     // #ifdef VUE3
     // 绑定的值
     modelValue: {
       type: Array,
-      default: defprops.checkboxGroup.value
+      default: () => defProps.checkboxGroup.value
     },
     // #endif
     // #ifdef VUE2
     // 绑定的值
     value: {
       type: Array,
-      default: defprops.checkboxGroup.value
+      default: () => defProps.checkboxGroup.value
     },
     // #endif
     // 形状，circle-圆形，square-方形
     shape: {
       type: String,
-      default: defprops.checkboxGroup.shape
+      default: () => defProps.checkboxGroup.shape
     },
     // 是否禁用全部checkbox
     disabled: {
       type: Boolean,
-      default: defprops.checkboxGroup.disabled
+      default: () => defProps.checkboxGroup.disabled
     },
 
     // 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
     activeColor: {
       type: String,
-      default: defprops.checkboxGroup.activeColor
+      default: () => defProps.checkboxGroup.activeColor
     },
     // 未选中的颜色
     inactiveColor: {
       type: String,
-      default: defprops.checkboxGroup.inactiveColor
+      default: () => defProps.checkboxGroup.inactiveColor
     },
 
     // 整个组件的尺寸，默认px
     size: {
       type: [String, Number],
-      default: defprops.checkboxGroup.size
+      default: () => defProps.checkboxGroup.size
     },
     // 布局方式，row-横向，column-纵向
     placement: {
       type: String,
-      default: defprops.checkboxGroup.placement
+      default: () => defProps.checkboxGroup.placement
     },
     // label的字体大小，px单位
     labelSize: {
       type: [String, Number],
-      default: defprops.checkboxGroup.labelSize
+      default: () => defProps.checkboxGroup.labelSize
     },
     // label的字体颜色
     labelColor: {
       type: [String],
-      default: defprops.checkboxGroup.labelColor
+      default: () => defProps.checkboxGroup.labelColor
     },
     // 是否禁止点击文本操作
     labelDisabled: {
       type: Boolean,
-      default: defprops.checkboxGroup.labelDisabled
+      default: () => defProps.checkboxGroup.labelDisabled
     },
     // 图标颜色
     iconColor: {
       type: String,
-      default: defprops.checkboxGroup.iconColor
+      default: () => defProps.checkboxGroup.iconColor
     },
     // 图标的大小，单位px
     iconSize: {
       type: [String, Number],
-      default: defprops.checkboxGroup.iconSize
+      default: () => defProps.checkboxGroup.iconSize
     },
     // 勾选图标的对齐方式，left-左边，right-右边
     iconPlacement: {
       type: String,
-      default: defprops.checkboxGroup.iconPlacement
+      default: () => defProps.checkboxGroup.iconPlacement
     },
     // 竖向配列时，是否显示下划线
     borderBottom: {
       type: Boolean,
-      default: defprops.checkboxGroup.borderBottom
+      default: () => defProps.checkboxGroup.borderBottom
     }
   }
-};
+});

package/uview-plus/components/u-checkbox-group/style.css

@@ -1,5 +1,20 @@
 /* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -20,4 +35,4 @@ view, scroll-view, swiper-item {
   display: flex;
   /* #endif */
   flex-direction: column;
-}
+}

package/uview-plus/components/u-checkbox-group/u-checkbox-group.vue

@@ -4,9 +4,9 @@
   </view>
 </template>
 <script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
 /**
  * checkboxGroup 复选框组
  * @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
@@ -94,8 +94,6 @@ export default {
           values.push(child.name);
         }
       });
-      // 发出事件
-      this.$emit('change', values);
       // 修改通过v-model绑定的值
       // #ifdef VUE3
       this.$emit('update:modelValue', values);
@@ -103,6 +101,8 @@ export default {
       // #ifdef VUE2
       this.$emit('input', values);
       // #endif
+      // 放在最后更新，否则change事件传出去的values不会更新
+      this.$emit('change', values);
     }
   }
 };

package/uview-plus/components/u-circle-progress/props.js

@@ -1,9 +1,10 @@
-import defprops from '../../libs/config/props';
-export default {
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+export const props = defineMixin({
   props: {
     percentage: {
       type: [String, Number],
-      default: defprops.circleProgress.percentage
+      default: () => defProps.circleProgress.percentage
     }
   }
-};
+});

package/uview-plus/components/u-circle-progress/style.css

@@ -1,5 +1,20 @@
 /* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -18,7 +33,7 @@ view, scroll-view, swiper-item {
   border-radius: 100px;
   height: 100px;
   width: 100px;
-  background-color: #c8c8c8;
+  background-color: rgb(200, 200, 200);
   overflow: hidden;
   justify-content: space-between;
 }
@@ -27,7 +42,7 @@ view, scroll-view, swiper-item {
   height: 90px;
   width: 90px;
   transform: translate(-50%, -50%);
-  background-color: white;
+  background-color: rgb(255, 255, 255);
   left: 50px;
   top: 50px;
   position: absolute;
@@ -47,8 +62,8 @@ view, scroll-view, swiper-item {
   border-top-left-radius: 50px;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
-  border-top-color: #42b983;
-  border-right-color: #42b983;
+  border-top-color: rgb(66, 185, 131);
+  border-right-color: rgb(66, 185, 131);
   border-width: 5px;
   width: 100px;
   height: 100px;
@@ -70,11 +85,11 @@ view, scroll-view, swiper-item {
   border-top-left-radius: 50px;
   border-bottom-left-radius: 50px;
   border-bottom-right-radius: 50px;
-  border-left-color: #c8c8c8;
-  border-bottom-color: #c8c8c8;
+  border-left-color: rgb(200, 200, 200);
+  border-bottom-color: rgb(200, 200, 200);
   border-width: 5px;
   width: 100px;
   height: 100px;
   transform: rotate(45deg);
   transform-origin: center center;
-}
+}