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

package/uview-plus/components/u-steps/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;
@@ -21,4 +36,8 @@ view, scroll-view, swiper-item {
 .u-steps--row {
   flex-direction: row;
   flex: 1;
-}
+  /* #ifdef MP */
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  /* #endif */
+}

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

@@ -10,5 +10,9 @@
   &--row {
     flex-direction: row;
     flex: 1;
+    /* #ifdef MP */
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    /* #endif */
   }
 }

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

@@ -4,13 +4,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 test from '../../libs/function/test';
 /**
  * Steps 步骤条
  * @description 该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
- * @tutorial https://uviewui.com/components/steps.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/steps.html
  * @property {String}			direction		row-横向，column-竖向 (默认 'row' )
  * @property {String | Number}	current			设置当前处于第几步 (默认 0 )
  * @property {String}			activeColor		激活状态颜色 (默认 '#3c9cff' )
@@ -45,7 +46,7 @@ export default {
     updateChildData() {
       this.children.map((child) => {
         // 先判断子组件是否存在对应的方法
-        uni.$u.test.func((child || {}).updateFromParent()) && child.updateFromParent();
+        test.func((child || {}).updateFromParent()) && child.updateFromParent();
       });
     },
     // 接受子组件的通知，去修改其他子组件的数据
@@ -55,6 +56,9 @@ export default {
   },
   created() {
     this.children = [];
+  },
+  options: {
+    virtualHost: false
   }
 };
 </script>

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

@@ -1,25 +1,31 @@
-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: {
     // 标题
     title: {
       type: [String, Number],
-      default: defprops.stepsItem.title
+      default: () => defProps.stepsItem.title
     },
     // 描述文本
     desc: {
       type: [String, Number],
-      default: defprops.stepsItem.desc
+      default: () => defProps.stepsItem.desc
     },
     // 图标大小
     iconSize: {
       type: [String, Number],
-      default: defprops.stepsItem.iconSize
+      default: () => defProps.stepsItem.iconSize
     },
     // 当前步骤是否处于失败状态
     error: {
       type: Boolean,
-      default: defprops.stepsItem.error
+      default: () => defProps.stepsItem.error
+    },
+    // 自定义样式
+    itemStyle: {
+      type: [Object],
+      default: {}
     }
   }
-};
+});

package/uview-plus/components/u-steps-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;
@@ -36,17 +51,18 @@ view, scroll-view, swiper-item {
   align-items: center;
   position: relative;
   background-color: #fff;
+  border-radius: 50px;
 }
 .u-steps-item__wrapper--column {
   width: 20px;
-  height: 32px;
+  height: 20px;
 }
 .u-steps-item__wrapper--column--dot {
   height: 20px;
   width: 20px;
 }
 .u-steps-item__wrapper--row {
-  width: 32px;
+  width: 20px;
   height: 20px;
 }
 .u-steps-item__wrapper--row--dot {

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

@@ -23,10 +23,11 @@
     align-items: center;
     position: relative;
     background-color: #fff;
+    border-radius: 50px;
 
     &--column {
       width: 20px;
-      height: 32px;
+      height: 20px;
 
       &--dot {
         height: 20px;
@@ -35,7 +36,7 @@
     }
 
     &--row {
-      width: 32px;
+      width: 20px;
       height: 20px;
 
       &--dot {

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

@@ -12,6 +12,7 @@
         `u-steps-item__wrapper--${parentData.direction}`,
         parentData.dot && `u-steps-item__wrapper--${parentData.direction}--dot`
       ]"
+      :style="[itemStyleInner]"
     >
       <slot name="icon">
         <view
@@ -54,16 +55,31 @@
         </view>
       </slot>
     </view>
-    <view class="u-steps-item__content" :class="[`u-steps-item__content--${parentData.direction}`]" :style="[contentStyle]">
-      <u--text
-        :text="title"
-        :type="parentData.current == index ? 'main' : 'content'"
-        lineHeight="20px"
-        :size="parentData.current == index ? 14 : 13"
-      ></u--text>
-      <slot name="desc">
-        <u--text :text="desc" type="tips" size="12"></u--text>
-      </slot>
+    <view
+      class="u-steps-item__content"
+      :class="[
+        `u-steps-item__content--${parentData.direction}`,
+        parentData.current == index ? 'u-steps-item__content--current' : ''
+      ]"
+      :style="[contentStyle]"
+    >
+      <slot name="content" :index="index"></slot>
+      <template v-if="!$slots['content']">
+        <view class="u-steps-item__content__title">
+          <slot name="title"></slot>
+          <up-text
+            v-if="!$slots['title']"
+            :text="title"
+            :type="parentData.current == index ? 'main' : 'content'"
+            lineHeight="20px"
+            :size="parentData.current == index ? 14 : 13"
+          ></up-text>
+        </view>
+        <view class="u-steps-item__content__desc">
+          <slot name="desc"></slot>
+          <up-text v-if="!$slots['desc']" :text="desc" type="tips" size="12"></up-text>
+        </view>
+      </template>
     </view>
     <!-- <view
 		    class="u-steps-item__line"
@@ -74,16 +90,18 @@
   </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 { sleep, error } from '../../libs/function/index';
+import color from '../../libs/config/color';
 // #ifdef APP-NVUE
 const dom = uni.requireNativePlugin('dom');
 // #endif
 /**
  * StepsItem 步骤条的子组件
  * @description 本组件需要和u-steps配合使用
- * @tutorial https://uviewui.com/components/steps.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/steps.html
  * @property {String}			title			标题文字
  * @property {String}			current			描述文本
  * @property {String | Number}	iconSize		图标大小  (默认 17 )
@@ -119,6 +137,11 @@ export default {
   created() {
     this.init();
   },
+  // #ifdef MP-TOUTIAO
+  options: {
+    virtualHost: false
+  },
+  // #endif
   computed: {
     lineStyle() {
       const style = {};
@@ -130,12 +153,17 @@ export default {
         // style.top = this.size.height / 2 + 'px'
       }
       style.backgroundColor = this.parent.children?.[this.index + 1]?.error
-        ? uni.$u.color.error
+        ? color.error
         : this.index < this.parentData.current
-        ? this.parentData.activeColor
-        : this.parentData.inactiveColor;
+          ? this.parentData.activeColor
+          : this.parentData.inactiveColor;
       return style;
     },
+    itemStyleInner() {
+      return {
+        ...this.itemStyle
+      };
+    },
     statusClass() {
       const { index, error } = this;
       const { current } = this.parentData;
@@ -150,22 +178,22 @@ export default {
       }
     },
     statusColor() {
-      let color = '';
+      let colorTmp = '';
       switch (this.statusClass) {
         case 'finish':
-          color = this.parentData.activeColor;
+          colorTmp = this.parentData.activeColor;
           break;
         case 'error':
-          color = uni.$u.color.error;
+          colorTmp = color.error;
           break;
         case 'process':
-          color = this.parentData.dot ? this.parentData.activeColor : 'transparent';
+          colorTmp = this.parentData.dot ? this.parentData.activeColor : 'transparent';
           break;
         default:
-          color = this.parentData.inactiveColor;
+          colorTmp = this.parentData.inactiveColor;
           break;
       }
-      return color;
+      return colorTmp;
     },
     contentStyle() {
       const style = {};
@@ -181,7 +209,7 @@ export default {
   },
   mounted() {
     this.parent && this.parent.updateFromChild();
-    uni.$u.sleep().then(() => {
+    sleep().then(() => {
       this.getStepsItemRect();
     });
   },
@@ -190,7 +218,7 @@ export default {
       // 初始化数据
       this.updateParentData();
       if (!this.parent) {
-        return uni.$u.error('u-steps-item必须要搭配u-steps组件使用');
+        return error('u-steps-item必须要搭配u-steps组件使用');
       }
       this.index = this.parent.children.indexOf(this);
       this.childLength = this.parent.children.length;

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

@@ -1,10 +1,11 @@
-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: {
     // 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px
     offsetTop: {
       type: [String, Number],
-      default: defprops.sticky.offsetTop
+      default: () => defProps.sticky.offsetTop
     },
     // 自定义导航栏的高度
     customNavHeight: {
@@ -14,28 +15,28 @@ export default {
       default: 44,
       // #endif
       // #ifndef H5
-      default: defprops.sticky.customNavHeight
+      default: () => defProps.sticky.customNavHeight
       // #endif
     },
     // 是否开启吸顶功能
     disabled: {
       type: Boolean,
-      default: defprops.sticky.disabled
+      default: () => defProps.sticky.disabled
     },
     // 吸顶区域的背景颜色
     bgColor: {
       type: String,
-      default: defprops.sticky.bgColor
+      default: () => defProps.sticky.bgColor
     },
     // z-index值
     zIndex: {
       type: [String, Number],
-      default: defprops.sticky.zIndex
+      default: () => defProps.sticky.zIndex
     },
     // 列表中的索引值
     index: {
       type: [String, Number],
-      default: defprops.sticky.index
+      default: () => defProps.sticky.index
     }
   }
-};
+});

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

@@ -1,14 +1,16 @@
 <template>
-  <view class="u-sticky" :id="elId" :style="[style]">
-    <view :style="[stickyContent]" class="u-sticky__content">
+  <view class="u-sticky" :style="[style]">
+    <view :id="elId" :style="[stickyContent]" class="u-sticky__content">
       <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 { addUnit, addStyle, deepMerge, getPx, guid, getDeviceInfo, os } from '../../libs/function/index';
+import zIndex from '../../libs/config/zIndex';
 /**
  * sticky 吸顶
  * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
@@ -31,7 +33,7 @@ export default {
     return {
       cssSticky: false, // 是否使用css的sticky实现
       stickyTop: 0, // 吸顶的top值，因为可能受自定义导航栏影响，最终的吸顶值非offsetTop值
-      elId: uni.$u.guid(),
+      elId: guid(),
       left: 0, // js模式时，吸顶的内容因为处于postition: fixed模式，为了和原来保持一致的样式，需要记录并重新设置它的left，height，width属性
       width: 'auto',
       height: 'auto',
@@ -45,7 +47,7 @@ export default {
         if (this.cssSticky) {
           style.position = 'sticky';
           style.zIndex = this.uZindex;
-          style.top = uni.$u.addUnit(this.stickyTop);
+          style.top = addUnit(this.stickyTop);
         } else {
           style.height = this.fixed ? this.height + 'px' : 'auto';
         }
@@ -59,7 +61,7 @@ export default {
         // #endif
       }
       style.backgroundColor = this.bgColor;
-      return uni.$u.deepMerge(uni.$u.addStyle(this.customStyle), style);
+      return deepMerge(addStyle(this.customStyle), style);
     },
     // 吸顶内容的样式
     stickyContent() {
@@ -74,12 +76,17 @@ export default {
       return style;
     },
     uZindex() {
-      return this.zIndex ? this.zIndex : uni.$u.zIndex.sticky;
+      return this.zIndex ? this.zIndex : zIndex.sticky;
     }
   },
   mounted() {
     this.init();
   },
+  watch: {
+    offsetTop(nval) {
+      this.getStickyTop();
+    }
+  },
   methods: {
     init() {
       this.getStickyTop();
@@ -104,7 +111,7 @@ export default {
     observeContent() {
       // 先断掉之前的观察
       this.disconnectObserver('contentObserver');
-      const contentObserver = uni.createIntersectionObserver({
+      const contentObserver = uni.createIntersectionObserver(this, {
         // 检测的区间范围
         thresholds: [0.95, 0.98, 1]
       });
@@ -129,7 +136,7 @@ export default {
       observer && observer.disconnect();
     },
     getStickyTop() {
-      this.stickyTop = uni.$u.getPx(this.offsetTop) + uni.$u.getPx(this.customNavHeight);
+      this.stickyTop = getPx(this.offsetTop) + getPx(this.customNavHeight);
     },
     async checkSupportCssSticky() {
       // #ifdef H5
@@ -139,7 +146,7 @@ export default {
       }
       // #endif
       // 如果安卓版本高于8.0，依然认为是支持css sticky的(因为安卓7在某些机型，可能不支持sticky)
-      if (uni.$u.os() === 'android' && Number(uni.$u.sys().system) > 8) {
+      if (os() === 'android' && Number(getDeviceInfo().system) > 8) {
         this.cssSticky = true;
       }
       // APP-Vue和微信平台，通过computedStyle判断是否支持css sticky
@@ -147,7 +154,7 @@ export default {
       this.cssSticky = await this.checkComputedStyle();
       // #endif
       // ios上，从ios6开始，都是支持css sticky的
-      if (uni.$u.os() === 'ios') {
+      if (os() === 'ios') {
         this.cssSticky = true;
       }
       // nvue，是支持css sticky的
@@ -191,7 +198,7 @@ export default {
       // #endif
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.disconnectObserver('contentObserver');
   }
 };

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

@@ -1,50 +1,51 @@
-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: {
     // tab的数据
     list: {
       type: Array,
-      default: defprops.subsection.list
+      default: () => defProps.subsection.list
     },
     // 当前活动的tab的index
     current: {
       type: [String, Number],
-      default: defprops.subsection.current
+      default: () => defProps.subsection.current
     },
     // 激活的颜色
     activeColor: {
       type: String,
-      default: defprops.subsection.activeColor
+      default: () => defProps.subsection.activeColor
     },
     // 未激活的颜色
     inactiveColor: {
       type: String,
-      default: defprops.subsection.inactiveColor
+      default: () => defProps.subsection.inactiveColor
     },
     // 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
     mode: {
       type: String,
-      default: defprops.subsection.mode
+      default: () => defProps.subsection.mode
     },
     // 字体大小
     fontSize: {
       type: [String, Number],
-      default: defprops.subsection.fontSize
+      default: () => defProps.subsection.fontSize
     },
     // 激活tab的字体是否加粗
     bold: {
       type: Boolean,
-      default: defprops.subsection.bold
+      default: () => defProps.subsection.bold
     },
     // mode = button时，组件背景颜色
     bgColor: {
       type: String,
-      default: defprops.subsection.bgColor
+      default: () => defProps.subsection.bgColor
     },
     // 从list元素对象中读取的键名
     keyName: {
       type: String,
-      default: defprops.subsection.keyName
+      default: () => defProps.subsection.keyName
     }
   }
-};
+});

package/uview-plus/components/u-subsection/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;
@@ -22,18 +37,18 @@ view, scroll-view, swiper-item {
   /* #endif */
 }
 .u-subsection--button {
-  height: 32px;
-  background-color: #eeeeef;
+  height: 34px;
+  background-color: rgb(238, 238, 239);
   padding: 3px;
-  border-radius: 3px;
+  border-radius: 4px;
   align-items: stretch;
 }
 .u-subsection--button__bar {
   background-color: #ffffff;
-  border-radius: 3px !important;
+  border-radius: 4px !important;
 }
 .u-subsection--subsection {
-  height: 30px;
+  height: 32px;
 }
 .u-subsection__bar {
   position: absolute;
@@ -44,8 +59,8 @@ view, scroll-view, swiper-item {
   /* #endif */
 }
 .u-subsection__bar--first {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }
@@ -58,8 +73,8 @@ view, scroll-view, swiper-item {
 .u-subsection__bar--last {
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 .u-subsection__item {
   /* #ifndef APP-NVUE */
@@ -75,16 +90,16 @@ view, scroll-view, swiper-item {
   border-right-width: 0 !important;
 }
 .u-subsection__item--first {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
 }
 .u-subsection__item--last {
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 .u-subsection__item__text {
   font-size: 12px;
-  line-height: 12px;
+  line-height: 14px;
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
@@ -92,4 +107,4 @@ view, scroll-view, swiper-item {
   align-items: center;
   transition-property: color;
   transition-duration: 0.3s;
-}
+}