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

package/uview-plus/components/u-form-item/props.js

@@ -1,44 +1,55 @@
-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: {
     // input的label提示语
     label: {
       type: String,
-      default: defprops.formItem.label
+      default: () => defProps.formItem.label
     },
     // 绑定的值
     prop: {
       type: String,
-      default: defprops.formItem.prop
+      default: () => defProps.formItem.prop
+    },
+    // 绑定的规则
+    rules: {
+      type: Array,
+      default: () => defProps.formItem.rules
     },
     // 是否显示表单域的下划线边框
     borderBottom: {
       type: [String, Boolean],
-      default: defprops.formItem.borderBottom
+      default: () => defProps.formItem.borderBottom
+    },
+    // label的位置，left-左边，top-上边
+    labelPosition: {
+      type: String,
+      default: () => defProps.formItem.labelPosition
     },
     // label的宽度，单位px
     labelWidth: {
       type: [String, Number],
-      default: defprops.formItem.labelWidth
+      default: () => defProps.formItem.labelWidth
     },
     // 右侧图标
     rightIcon: {
       type: String,
-      default: defprops.formItem.rightIcon
+      default: () => defProps.formItem.rightIcon
     },
     // 左侧图标
     leftIcon: {
       type: String,
-      default: defprops.formItem.leftIcon
+      default: () => defProps.formItem.leftIcon
     },
     // 是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置
     required: {
       type: Boolean,
-      default: defprops.formItem.required
+      default: () => defProps.formItem.required
     },
     leftIconStyle: {
       type: [String, Object],
-      default: defprops.formItem.leftIconStyle
+      default: () => defProps.formItem.leftIconStyle
     }
   }
-};
+});

package/uview-plus/components/u-form-item/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;
@@ -75,13 +90,11 @@ view, scroll-view, swiper-item {
 }
 .u-form-item__body__right__content__slot {
   flex: 1;
-  /* #ifndef MP */
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
   flex-direction: row;
   align-items: center;
-  /* #endif */
 }
 .u-form-item__body__right__content__icon {
   margin-left: 10rpx;
@@ -92,4 +105,4 @@ view, scroll-view, swiper-item {
   font-size: 12px;
   line-height: 12px;
   color: var(--u-error);
-}
+}

package/uview-plus/components/u-form-item/style.scss

@@ -53,10 +53,8 @@
 
         &__slot {
           flex: 1;
-          /* #ifndef MP */
           @include flex;
           align-items: center;
-          /* #endif */
         }
 
         &__icon {

package/uview-plus/components/u-form-item/u-form-item.vue

@@ -1,12 +1,12 @@
 <template>
-  <view class="u-form-item">
+  <view class="u-form-item" :class="{ 'u-form-item--error': !!message && parentData.errorType === 'message' }">
     <view
       class="u-form-item__body"
       @tap="clickHandler"
       :style="[
-        $u.addStyle(customStyle),
+        addStyle(customStyle),
         {
-          flexDirection: parentData.labelPosition === 'left' ? 'row' : 'column'
+          flexDirection: (labelPosition || parentData.labelPosition) === 'left' ? 'row' : 'column'
         }
       ]"
     >
@@ -17,7 +17,7 @@
           class="u-form-item__body__left"
           v-if="required || leftIcon || label"
           :style="{
-            width: $u.addUnit(labelWidth || parentData.labelWidth),
+            width: addUnit(labelWidth || parentData.labelWidth),
             marginBottom: parentData.labelPosition === 'left' ? 0 : '5px'
           }"
         >
@@ -59,7 +59,7 @@
         v-if="!!message && parentData.errorType === 'message'"
         class="u-form-item__body__right__message"
         :style="{
-          marginLeft: $u.addUnit(parentData.labelPosition === 'top' ? 0 : labelWidth || parentData.labelWidth)
+          marginLeft: addUnit(parentData.labelPosition === 'top' ? 0 : labelWidth || parentData.labelWidth)
         }"
       >
         {{ message }}
@@ -67,26 +67,30 @@
     </slot>
     <u-line
       v-if="borderBottom"
-      :color="message && parentData.errorType === 'border-bottom' ? $u.color.error : propsLine.color"
+      :color="message && parentData.errorType === 'border-bottom' ? color.error : propsLine.color"
       :customStyle="`margin-top: ${message && parentData.errorType === 'message' ? '5px' : 0}`"
     ></u-line>
   </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 defProps from '../../libs/config/props.js';
+import color from '../../libs/config/color';
+import { addStyle, addUnit, getProperty, setProperty, error } from '../../libs/function/index';
 /**
  * Form 表单
  * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
  * @tutorial https://ijry.github.io/uview-plus/components/form.html
  * @property {String}			label			input的label提示语
  * @property {String}			prop			绑定的值
+ * @property {Array}			rules			绑定的规则
  * @property {String | Boolean}	borderBottom	是否显示表单域的下划线边框
  * @property {String | Number}	labelWidth		label的宽度，单位px
  * @property {String}			rightIcon		右侧图标
  * @property {String}			leftIcon		左侧图标
- * @property {String | Object} leftIconStyle 左侧图标的样式
+ * @property {String | Object} leftIconStyle    左侧图标的样式
  * @property {Boolean}			required		是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置 (默认 false )
  *
  * @example <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1"></u-form-item>
@@ -109,25 +113,48 @@ export default {
         labelWidth: 45,
         // 错误提示方式
         errorType: 'message'
-      }
+      },
+      color: color,
+      itemRules: []
     };
   },
   // 组件创建完成时，将当前实例保存到u-form中
   computed: {
     propsLine() {
-      return uni.$u.props.line;
+      return defProps.line;
     }
   },
   mounted() {
     this.init();
   },
+  emits: ['click'],
+  watch: {
+    // 监听规则的变化
+    rules: {
+      immediate: true,
+      handler(n) {
+        this.setRules(n);
+      }
+    }
+  },
   methods: {
+    addStyle,
+    addUnit,
     init() {
       // 父组件的实例
       this.updateParentData();
       if (!this.parent) {
-        uni.$u.error('u-form-item需要结合u-form组件使用');
+        error('u-form-item需要结合u-form组件使用');
+      }
+    },
+    // 手动设置校验的规则，如果规则中有函数的话，微信小程序中会过滤掉，所以只能手动调用设置规则
+    setRules(rules) {
+      // 判断是否有规则
+      if (rules.length === 0) {
+        this.itemRules = [];
+        return;
       }
+      this.itemRules = rules;
     },
     // 获取父组件的参数
     updateParentData() {
@@ -141,9 +168,9 @@ export default {
     // 清空当前的组件的校验结果，并重置为初始值
     resetField() {
       // 找到原始值
-      const value = uni.$u.getProperty(this.parent.originalModel, this.prop);
+      const value = getProperty(this.parent.originalModel, this.prop);
       // 将u-form的model的prop属性链还原原始值
-      uni.$u.setProperty(this.parent.model, this.prop, value);
+      setProperty(this.parent.model, this.prop, value);
       // 移除校验结果
       this.message = null;
     },

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

@@ -1,25 +1,26 @@
-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: {
     // 背景颜色（默认transparent）
     bgColor: {
       type: String,
-      default: defprops.gap.bgColor
+      default: () => defProps.gap.bgColor
     },
     // 分割槽高度，单位px（默认30）
     height: {
       type: [String, Number],
-      default: defprops.gap.height
+      default: () => defProps.gap.height
     },
     // 与上一个组件的距离
     marginTop: {
       type: [String, Number],
-      default: defprops.gap.marginTop
+      default: () => defProps.gap.marginTop
     },
     // 与下一个组件的距离
     marginBottom: {
       type: [String, Number],
-      default: defprops.gap.marginBottom
+      default: () => defProps.gap.marginBottom
     }
   }
-};
+});

package/uview-plus/components/u-gap/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;
@@ -8,4 +23,4 @@ view, scroll-view, swiper-item {
   align-items: stretch;
   align-content: flex-start;
 }
-/* #endif */
+/* #endif */

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

@@ -2,9 +2,10 @@
   <view class="u-gap" :style="[gapStyle]"></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 } from '../../libs/function/index.js';
 /**
  * gap 间隔槽
  * @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
@@ -24,11 +25,11 @@ export default {
     gapStyle() {
       const style = {
         backgroundColor: this.bgColor,
-        height: uni.$u.addUnit(this.height),
-        marginTop: uni.$u.addUnit(this.marginTop),
-        marginBottom: uni.$u.addUnit(this.marginBottom)
+        height: addUnit(this.height),
+        marginTop: addUnit(this.marginTop),
+        marginBottom: addUnit(this.marginBottom)
       };
-      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+      return deepMerge(style, addStyle(this.customStyle));
     }
   }
 };

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

@@ -1,20 +1,26 @@
-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: {
     // 分成几列
     col: {
       type: [String, Number],
-      default: defprops.grid.col
+      default: () => defProps.grid.col
     },
     // 是否显示边框
     border: {
       type: Boolean,
-      default: defprops.grid.border
+      default: () => defProps.grid.border
     },
     // 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右
     align: {
       type: String,
-      default: defprops.grid.align
+      default: () => defProps.grid.align
+    },
+    // 间隔
+    gap: {
+      type: String,
+      default: '0px'
     }
   }
-};
+});

package/uview-plus/components/u-grid/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;
@@ -10,7 +25,7 @@ view, scroll-view, swiper-item {
 }
 /* #endif */
 .u-grid {
-  /* #ifdef MP */
+  /* #ifdef APP-NVUE */
   width: 100%;
   position: relative;
   box-sizing: border-box;
@@ -24,4 +39,9 @@ view, scroll-view, swiper-item {
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
-}
+  /* #ifndef APP-NVUE */
+  display: grid;
+  grid-gap: v-bind(gap);
+  grid-template-columns: repeat(v-bind(col), 1fr);
+  /* #endif */
+}

package/uview-plus/components/u-grid/style.scss

@@ -1,7 +1,7 @@
 @import '../../libs/css/components.scss';
 $u-grid-width: 100% !default;
 .u-grid {
-  /* #ifdef MP */
+  /* #ifdef APP-NVUE */
   width: $u-grid-width;
   position: relative;
   box-sizing: border-box;
@@ -12,4 +12,11 @@ $u-grid-width: 100% !default;
   @include flex;
   flex-wrap: wrap;
   align-items: center;
+  // 在uni-app中应尽量避免使用flex布局以外的方式,因为nvue/uvue等方案都支持flex布局
+  // 这里使用grid布局使用为目前20240409uni-app在抖音小程序开启virtualHost时有bug，存在事件失效问题。
+  /* #ifndef APP-NVUE */
+  display: grid;
+  grid-gap: v-bind(gap);
+  grid-template-columns: repeat(v-bind(col), 1fr);
+  /* #endif */
 }

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

@@ -4,9 +4,10 @@
   </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, deepMerge } from '../../libs/function/index';
 /**
  * grid 宫格布局
  * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。
@@ -63,10 +64,16 @@ export default {
         default:
           style.justifyContent = 'flex-start';
       }
-      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+      return deepMerge(style, addStyle(this.customStyle));
     }
   },
   emits: ['click'], // 防止事件执行两次
+  // 20240409发现抖音小程序如果开启virtualHost会出现严重问题，几乎所有事件包括created等生命周期事件全部失效。
+  // #ifdef MP-WEIXIN
+  options: {
+    // virtualHost: true ,//将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等
+  },
+  // #endif
   methods: {
     // 此方法由u-grid-item触发，用于在u-grid发出事件
     childClick(name) {

package/uview-plus/components/u-grid-item/props.js

@@ -1,15 +1,16 @@
-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
     name: {
       type: [String, Number, null],
-      default: defprops.gridItem.name
+      default: () => defProps.gridItem.name
     },
     // 背景颜色
     bgColor: {
       type: String,
-      default: defprops.gridItem.bgColor
+      default: () => defProps.gridItem.bgColor
     }
   }
-};
+});

package/uview-plus/components/u-grid-item/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;
@@ -38,4 +53,4 @@ view, scroll-view, swiper-item {
   border-bottom-width: 0.5px;
   border-color: var(--u-border-color);
 }
-/* #endif */
+/* #endif */

package/uview-plus/components/u-grid-item/u-grid-item.vue

@@ -1,6 +1,7 @@
 <template>
   <!-- #ifndef APP-NVUE -->
   <view
+    v-if="parentData.col > 0"
     class="u-grid-item"
     hover-class="u-grid-item--hover-class"
     :hover-stay-time="200"
@@ -18,9 +19,10 @@
   <!-- #endif -->
 </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, deepMerge } from '../../libs/function/index';
 /**
  * gridItem 提示
  * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。搭配u-grid使用
@@ -37,7 +39,7 @@ export default {
   data() {
     return {
       parentData: {
-        col: 3, // 父组件划分的宫格数
+        col: 0, // 父组件划分的宫格数
         border: true // 是否显示边框，根据父组件决定
       },
       // #ifdef APP-NVUE
@@ -51,22 +53,23 @@ export default {
   },
   emits: ['click'],
   //  微信小程序中 options 选项
+  // #ifdef MP-WEIXIN
   options: {
     virtualHost: true //将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等
   },
+  // #endif
   computed: {
-    // #ifndef APP-NVUE
-    // vue下放到computed中，否则会因为延时造成闪烁
-    width() {
-      return 100 / Number(this.parentData.col) + '%';
-    },
-    // #endif
     itemStyle() {
       const style = {
-        background: this.bgColor,
-        width: this.width
+        background: this.bgColor
       };
-      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+      // #ifdef APP-NVUE
+      style['width'] = this.width;
+      // #endif
+      // #ifndef APP-NVUE
+      style['width'] = '100%';
+      // #endif
+      return deepMerge(style, addStyle(this.customStyle));
     }
   },
   methods: {
@@ -154,7 +157,7 @@ export default {
       }
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     // 移除事件监听，释放性能
     uni.$off('$uGridItem');
   }

package/uview-plus/{libs/config/props → components/u-icon}/icon.js

@@ -7,7 +7,7 @@
  * @lastTime     : 2021-08-20 18:00:14
  * @FilePath     : /u-view2.0/uview-ui/libs/config/props/icon.js
  */
-import config from '../config'
+import config from '../../libs/config/config'
 
 const {
     color