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

package/uview-plus/components/u-safe-bottom/_doc/package.json

@@ -0,0 +1,86 @@
+{
+  "id": "u-safe-bottom",
+  "displayName": "u-safe-bottom底部安全区 全端兼容 无论平台 一致体验",
+  "version": "1.0.2",
+  "description": "针对一些底部带指示条的机型，操作区域与页面底部重合，容易误操作，因此本插件对这些机型进行底部安全区适配",
+  "keywords": [
+    "u-ui",
+    "wuui",
+    "u-safe-bottom",
+    "safe-bottom",
+    "底部安全区"
+  ],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.4.15"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y",
+          "钉钉": "n",
+          "快手": "n",
+          "飞书": "n",
+          "京东": "n"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        }
+      }
+    }
+  }
+}

package/uview-plus/components/u-safe-bottom/_doc/readme.md

@@ -0,0 +1,16 @@
+## u-safe-bottom 底部安全区
+
+> **组件名：u-safe-bottom**
+
+这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
+
+## [查看文档](https://ijry.github.io/uview-plus/components/safeAreaInset.html)
+
+## [更多组件, 请查看 `u-ui` 组件库](https://ext.dcloud.net.cn/plugin?name=u--ui)
+(请勿下载插件zip)
+
+<a href="https://ext.dcloud.net.cn/plugin?name=u--ui">
+	<img src="https://wuui.cn/intr.png">
+</a>
+
+**如使用过程中有任何问题，或者您对u-ui有一些好的建议。<br>欢迎加入 [u-ui 交流群](https://ijry.github.io/uview-plus/components/qqFeedBack.html)**

package/uview-plus/components/u-safe-bottom/props.js

@@ -1,4 +1,6 @@
-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: {}
-};
+});

package/uview-plus/components/u-safe-bottom/u-safe-bottom.vue

@@ -1 +1,3 @@
-<template>
  <view class="u-safe-bottom" :style="[style]" :class="[!isNvue && 'u-safe-area-inset-bottom']"></view>
 * SafeBottom 底部安全区
 * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
 * @tutorial https://ijry.github.io/uview-plus/components/safeAreaInset.html
 * @property {type}		prop_name
 * @property {Object}	customStyle	定义需要用到的外部样式
 *
 * @event {Function()}
 * @example <u-status-bar></u-status-bar>
 */
  name: 'u-safe-bottom',
  mixins: [mpMixin, mixin, props],
  data() {
    return {
      safeAreaBottomHeight: 0,
      isNvue: false
    };
  },
  computed: {
    style() {
      const style = {};
      // #ifdef APP-NVUE
      // nvue下，高度使用js计算填充
      style.height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px');
      // #endif
      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
    }
  },
  mounted() {
    // #ifdef APP-NVUE
    // 标识为是否nvue
    this.isNvue = true;
    // #endif
  }
+<template>
  <view class="u-safe-bottom" :style="[style]" :class="[!isNvue && 'u-safe-area-inset-bottom']"></view>
 * SafeBottom 底部安全区
 * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
 * @tutorial https://ijry.github.io/uview-plus/components/safeAreaInset.html
 * @property {type}		prop_name
 * @property {Object}	customStyle	定义需要用到的外部样式
 *
 * @event {Function()}
 * @example <u-status-bar></u-status-bar>
 */
  name: 'u-safe-bottom',
  mixins: [mpMixin, mixin, props],
  data() {
    return {
      safeAreaBottomHeight: 0,
      isNvue: false
    };
  },
  computed: {
    style() {
      const style = {};
      // #ifdef APP-NVUE || MP-TOUTIAO
      // nvue下，高度使用js计算填充
      style.height = addUnit(getWindowInfo().safeAreaInsets.bottom, 'px');
      // #endif
      return deepMerge(style, addStyle(this.customStyle));
    }
  },
  mounted() {
    // #ifdef APP-NVUE
    // 标识为是否nvue
    this.isNvue = true;
    // #endif
  }
+@import './style.css';
+</style>

package/uview-plus/components/u-scroll-list/nvue.js

@@ -1,3 +1 @@
-// 引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损
    methods: {
        // 此处不写注释，请自行体会
        nvueScrollHandler(e) {
            const anchor = this.$refs['u-scroll-list__scroll-view'].ref
            const element = this.$refs['u-scroll-list__indicator__line__bar'].ref
            const scrollLeft = e.contentOffset.x
            const contentSize = e.contentSize.width
            const { scrollWidth } = this
            const barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth
-            // 在安卓和iOS上，需要除的倍数不一样，iOS需要除以2
-            const actionNum = uni.$u.os() === 'ios' ? 2 : 1
            const expression = `(x / ${actionNum}) / ${contentSize - scrollWidth} * ${barAllMoveWidth}`
            BindingX.bind({
                anchor,
                eventType: 'scroll',
                props: [{
                    element,
                    property: 'transform.translateX',
                    expression
                }]
            })
        }
    }
+// 引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损
    methods: {
        // 此处不写注释，请自行体会
        nvueScrollHandler(e) {
            const anchor = this.$refs['u-scroll-list__scroll-view'].ref
            let element = {}
            if (this.$refs['u-scroll-list__indicator__line__bar']) {
                element = this.$refs['u-scroll-list__indicator__line__bar'].ref
            }
            const scrollLeft = e.contentOffset.x
            const contentSize = e.contentSize.width
            const { scrollWidth } = this
            const barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth
            // 在安卓和iOS上，需要除的倍数不一样，iOS需要除以2
            const actionNum = os() === 'ios' ? 2 : 1
            const expression = `(x / ${actionNum}) / ${contentSize - scrollWidth} * ${barAllMoveWidth}`
            BindingX.bind({
                anchor,
                eventType: 'scroll',
                props: [{
                    element,
                    property: 'transform.translateX',
                    expression
                }]
            })
        }
    }

package/uview-plus/components/u-scroll-list/props.js

@@ -1,35 +1,36 @@
-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: {
     // 指示器的整体宽度
     indicatorWidth: {
       type: [String, Number],
-      default: defprops.scrollList.indicatorWidth
+      default: () => defProps.scrollList.indicatorWidth
     },
     // 滑块的宽度
     indicatorBarWidth: {
       type: [String, Number],
-      default: defprops.scrollList.indicatorBarWidth
+      default: () => defProps.scrollList.indicatorBarWidth
     },
     // 是否显示面板指示器
     indicator: {
       type: Boolean,
-      default: defprops.scrollList.indicator
+      default: () => defProps.scrollList.indicator
     },
     // 指示器非激活颜色
     indicatorColor: {
       type: String,
-      default: defprops.scrollList.indicatorColor
+      default: () => defProps.scrollList.indicatorColor
     },
     // 指示器的激活颜色
     indicatorActiveColor: {
       type: String,
-      default: defprops.scrollList.indicatorActiveColor
+      default: () => defProps.scrollList.indicatorActiveColor
     },
     // 指示器样式，可通过bottom，left，right进行定位
     indicatorStyle: {
       type: [String, Object],
-      default: defprops.scrollList.indicatorStyle
+      default: () => defProps.scrollList.indicatorStyle
     }
   }
-};
+});

package/uview-plus/components/u-scroll-list/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;
@@ -17,6 +32,7 @@ view, scroll-view, swiper-item {
   display: flex;
   /* #endif */
   flex-direction: row;
+  align-items: flex-start;
 }
 .u-scroll-list__scroll-view__content {
   /* #ifndef APP-NVUE */
@@ -42,4 +58,4 @@ view, scroll-view, swiper-item {
   width: 20px;
   height: 4px;
   border-radius: 100px;
-}
+}

package/uview-plus/components/u-scroll-list/style.scss

@@ -5,6 +5,8 @@
 
   &__scroll-view {
     @include flex;
+    // 缺少会在enable-flex模式下高度异常
+    align-items: flex-start;
 
     &__content {
       @include flex;

package/uview-plus/components/u-scroll-list/u-scroll-list.vue

@@ -22,14 +22,15 @@
 		<!-- #ifdef MP-WEIXIN || APP-VUE || H5 || MP-QQ -->
 		<!-- 以上平台，支持wxs -->
 		<scroll-view
-			class="u-scroll-list__scroll-view"
+			class="u-scroll-list__scroll-view scroll-view-native"
 			scroll-x
+			enable-flex
 			@scroll="wxs.scroll"
 			@scrolltoupper="wxs.scrolltoupper"
 			@scrolltolower="wxs.scrolltolower"
 			:data-scrollWidth="scrollWidth"
-			:data-barWidth="$u.getPx(indicatorBarWidth)"
-			:data-indicatorWidth="$u.getPx(indicatorWidth)"
+			:data-barWidth="getPx(indicatorBarWidth)"
+			:data-indicatorWidth="getPx(indicatorWidth)"
 			:show-scrollbar="false"
 			:upper-threshold="0"
 			:lower-threshold="0"
@@ -38,7 +39,7 @@
 			<!-- #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ -->
 			<!-- 非以上平台，只能使用普通js实现 -->
 			<scroll-view
-				class="u-scroll-list__scroll-view"
+				class="u-scroll-list__scroll-view scroll-view-js"
 				scroll-x
 				@scroll="scrollHandler"
 				@scrolltoupper="scrolltoupperHandler"
@@ -56,7 +57,7 @@
 			<view
 				class="u-scroll-list__indicator"
 				v-if="indicator"
-				:style="[$u.addStyle(indicatorStyle)]"
+				:style="[addStyle(indicatorStyle)]"
 			>
 				<view
 					class="u-scroll-list__indicator__line"
@@ -95,9 +96,10 @@
 const dom = uni.requireNativePlugin('dom')
 import nvueMixin from "./nvue.js"
 // #endif
-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, getPx, sleep } from '../../libs/function/index';
 export default {
 	name: 'u-scroll-list',
 	// #ifndef APP-NVUE
@@ -130,14 +132,14 @@ export default {
 			style.transform = `translateX(${ x }px)`
 			// #endif
 			// 设置滑块的宽度和背景色，是每个平台都需要的
-			style.width = uni.$u.addUnit(this.indicatorBarWidth)
+			style.width = addUnit(this.indicatorBarWidth)
 			style.backgroundColor = this.indicatorActiveColor
 			return style
 		},
 		lineStyle() {
 			const style = {}
 			// 指示器整体的样式，需要设置其宽度和背景色
-			style.width = uni.$u.addUnit(this.indicatorWidth)
+			style.width = addUnit(this.indicatorWidth)
 			style.backgroundColor = this.indicatorColor
 			return style
 		}
@@ -145,7 +147,10 @@ export default {
 	mounted() {
 		this.init()
 	},
+	emits: ["left", "right"],
 	methods: {
+		addStyle,
+		getPx,
 		init() {
 			this.getComponentWidth()
 		},
@@ -162,7 +167,7 @@ export default {
 			this.scrollEvent('right')
 			// 在普通js方案中，滚动到右边时，通过设置this.scrollInfo，模拟出滚动到右边的情况
 			// 因为上方是用过computed计算的，设置后，会自动调整滑块的位置
-			this.scrollInfo.scrollLeft = uni.$u.getPx(this.indicatorWidth) - uni.$u.getPx(this.indicatorBarWidth)
+			this.scrollInfo.scrollLeft = getPx(this.indicatorWidth) - getPx(this.indicatorBarWidth)
 		},
 		// #endif
 		//
@@ -172,7 +177,7 @@ export default {
 		// 获取组件的宽度
 		async getComponentWidth() {
 			// 延时一定时间，以获取dom尺寸
-			await uni.$u.sleep(30)
+			await sleep(30)
 			// #ifndef APP-NVUE
 			this.$uGetRect('.u-scroll-list').then(size => {
 				this.scrollWidth = size.width

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

@@ -1,123 +1,138 @@
-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: {
     // 搜索框形状，round-圆形，square-方形
     shape: {
       type: String,
-      default: defprops.search.shape
+      default: () => defProps.search.shape
     },
     // 搜索框背景色，默认值#f2f2f2
     bgColor: {
       type: String,
-      default: defprops.search.bgColor
+      default: () => defProps.search.bgColor
     },
     // 占位提示文字
     placeholder: {
       type: String,
-      default: defprops.search.placeholder
+      default: () => defProps.search.placeholder
     },
     // 是否启用清除控件
     clearabled: {
       type: Boolean,
-      default: defprops.search.clearabled
+      default: () => defProps.search.clearabled
     },
     // 是否自动聚焦
     focus: {
       type: Boolean,
-      default: defprops.search.focus
+      default: () => defProps.search.focus
     },
     // 是否在搜索框右侧显示取消按钮
     showAction: {
       type: Boolean,
-      default: defprops.search.showAction
+      default: () => defProps.search.showAction
     },
     // 右边控件的样式
     actionStyle: {
       type: Object,
-      default: defprops.search.actionStyle
+      default: () => defProps.search.actionStyle
     },
     // 取消按钮文字
     actionText: {
       type: String,
-      default: defprops.search.actionText
+      default: () => defProps.search.actionText
     },
     // 输入框内容对齐方式，可选值为 left|center|right
     inputAlign: {
       type: String,
-      default: defprops.search.inputAlign
+      default: () => defProps.search.inputAlign
     },
     // input输入框的样式，可以定义文字颜色，大小等，对象形式
     inputStyle: {
       type: Object,
-      default: defprops.search.inputStyle
+      default: () => defProps.search.inputStyle
     },
     // 是否启用输入框
     disabled: {
       type: Boolean,
-      default: defprops.search.disabled
+      default: () => defProps.search.disabled
     },
     // 边框颜色
     borderColor: {
       type: String,
-      default: defprops.search.borderColor
+      default: () => defProps.search.borderColor
     },
     // 搜索图标的颜色，默认同输入框字体颜色
     searchIconColor: {
       type: String,
-      default: defprops.search.searchIconColor
+      default: () => defProps.search.searchIconColor
     },
     // 输入框字体颜色
     color: {
       type: String,
-      default: defprops.search.color
+      default: () => defProps.search.color
     },
     // placeholder的颜色
     placeholderColor: {
       type: String,
-      default: defprops.search.placeholderColor
+      default: () => defProps.search.placeholderColor
     },
     // 左边输入框的图标，可以为uView图标名称或图片路径
     searchIcon: {
       type: String,
-      default: defprops.search.searchIcon
+      default: () => defProps.search.searchIcon
     },
     searchIconSize: {
       type: [Number, String],
-      default: defprops.search.searchIconSize
+      default: () => defProps.search.searchIconSize
     },
     // 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30px"、"30px 20px"等写法
     margin: {
       type: String,
-      default: defprops.search.margin
+      default: () => defProps.search.margin
     },
     // 开启showAction时，是否在input获取焦点时才显示
     animation: {
       type: Boolean,
-      default: defprops.search.animation
+      default: () => defProps.search.animation
     },
     // 输入框的初始化内容
     modelValue: {
       type: String,
-      default: defprops.search.value
+      default: () => defProps.search.value
     },
     value: {
       type: String,
-      default: defprops.search.value
+      default: () => defProps.search.value
     },
     // 输入框最大能输入的长度，-1为不限制长度(来自uniapp文档)
     maxlength: {
       type: [String, Number],
-      default: defprops.search.maxlength
+      default: () => defProps.search.maxlength
     },
     // 搜索框高度，单位px
     height: {
       type: [String, Number],
-      default: defprops.search.height
+      default: () => defProps.search.height
     },
     // 搜索框左侧文本
     label: {
       type: [String, Number, null],
-      default: defprops.search.label
+      default: () => defProps.search.label
+    },
+    // 键盘弹起时，是否自动上推页面
+    adjustPosition: {
+      type: Boolean,
+      default: () => true
+    },
+    // 键盘收起时，是否自动失去焦点
+    autoBlur: {
+      type: Boolean,
+      default: () => false
+    },
+    iconPosition: {
+      type: String,
+      default: () => defProps.search.iconPosition
     }
   }
-};
+});

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

@@ -16,10 +16,10 @@ export default {
         clearabled: true,
         focus: false,
         showAction: true,
-        actionStyle: () => ({}),
+        actionStyle: {},
         actionText: '搜索',
         inputAlign: 'left',
-        inputStyle: () => ({}),
+        inputStyle: {},
         disabled: false,
         borderColor: 'transparent',
         searchIconColor: '#909399',
@@ -27,6 +27,7 @@ export default {
         color: '#606266',
         placeholderColor: '#909399',
         searchIcon: 'search',
+        iconPosition: 'left',
         margin: '0',
         animation: false,
         value: '',

package/uview-plus/components/u-search/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 */
 /* #ifdef H5 */
-[type='search']::-webkit-search-decoration {
+[type=search]::-webkit-search-decoration {
   display: none;
 }
 /* #endif */
@@ -90,3 +105,9 @@ view, scroll-view, swiper-item {
   width: 40px;
   margin-left: 5px;
 }
+.u-search__reverse .u-search__content__icon {
+  order: 3;
+}
+.u-search__reverse .u-search__content__close {
+  order: 2;
+}

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

@@ -95,4 +95,12 @@ $u-search-action-margin-left: 5px !default;
       margin-left: $u-search-action-margin-left;
     }
   }
+
+  &__reverse &__content__icon {
+    order: 3;
+  }
+
+  &__reverse &__content__close {
+    order: 2;
+  }
 }