uview-plus 3.3.24 → 3.3.26

package/changelog.md

@@ -1,3 +1,7 @@
+## 3.3.26（2024-08-22）
+fix: 批量注册全局组件优化
+## 3.3.25（2024-08-21）
+fix: 修复slider在app-vue下样式问题
 ## 3.3.24（2024-08-19）
 fix: 修复时间选择器hasInput模式小程序不生效
 

package/components/u-slider/u-slider.vue

@@ -414,6 +414,8 @@
 
 		&-inner {
 			flex: 1;
+			display: flex;
+			flex-direction: column;
 			position: relative;
 			border-radius: 999px;
 			padding: 10px 18px;

package/index.js

@@ -90,10 +90,8 @@ for (const key in importFn) {
     let component = importFn[key].default;
     if (component.name && component.name.indexOf('u--') !== 0) {
         const name = component.name.replace(/u-([a-zA-Z0-9-_]+)/g, 'up-$1');
-        component.name = name;
-        console.log('component', component.name)
         component.install = function (Vue) {
-            Vue.component(component.name, component);
+            Vue.component(name, component);
         };
         
         // 导入组件

package/libs/config/config.js

@@ -26,7 +26,16 @@ export default {
         'u-main-color': '#303133',
         'u-content-color': '#606266',
         'u-tips-color': '#909399',
-        'u-light-color': '#c0c4cc'
+        'u-light-color': '#c0c4cc',
+        'up-primary': '#2979ff',
+        'up-warning': '#ff9900',
+        'up-success': '#19be6b',
+        'up-error': '#fa3534',
+        'up-info': '#909399',
+        'up-main-color': '#303133',
+        'up-content-color': '#606266',
+        'up-tips-color': '#909399',
+        'up-light-color': '#c0c4cc'
     },
 	// 默认单位，可以通过配置为rpx，那么在用于传入组件大小参数为数值时，就默认为rpx
 	unit: 'px'

package/libs/css/color.scss

@@ -153,3 +153,159 @@
 .u-light-color {
 	color: $u-light-color;
 }
+
+.up-primary-light {
+	color: $u-primary-light;
+}
+
+.up-warning-light {
+	color: $u-warning-light;
+}
+
+.up-success-light {
+	color: $u-success-light;
+}
+
+.up-error-light {
+	color: $u-error-light;
+}
+
+.up-info-light {
+	color: $u-info-light;
+}
+
+.up-primary-light-bg {
+	background-color: $u-primary-light;
+}
+
+.up-warning-light-bg {
+	background-color: $u-warning-light;
+}
+
+.up-success-light-bg {
+	background-color: $u-success-light;
+}
+
+.up-error-light-bg {
+	background-color: $u-error-light;
+}
+
+.up-info-light-bg {
+	background-color: $u-info-light;
+}
+
+.up-primary-dark {
+	color: $u-primary-dark;
+}
+
+.up-warning-dark {
+	color: $u-warning-dark;
+}
+
+.up-success-dark {
+	color: $u-success-dark;
+}
+
+.up-error-dark {
+	color: $u-error-dark;
+}
+
+.up-info-dark {
+	color: $u-info-dark;
+}
+
+.up-primary-dark-bg {
+	background-color: $u-primary-dark;
+}
+
+.up-warning-dark-bg {
+	background-color: $u-warning-dark;
+}
+
+.up-success-dark-bg {
+	background-color: $u-success-dark;
+}
+
+.up-error-dark-bg {
+	background-color: $u-error-dark;
+}
+
+.up-info-dark-bg {
+	background-color: $u-info-dark;
+}
+
+.up-primary-disabled {
+	color: $u-primary-disabled;
+}
+
+.up-warning-disabled {
+	color: $u-warning-disabled;
+}
+
+.up-success-disabled {
+	color: $u-success-disabled;
+}
+
+.up-error-disabled {
+	color: $u-error-disabled;
+}
+
+.up-info-disabled {
+	color: $u-info-disabled;
+}
+
+.up-primary {
+	color: $u-primary;
+}
+
+.up-warning {
+	color: $u-warning;
+}
+
+.up-success {
+	color: $u-success;
+}
+
+.up-error {
+	color: $u-error;
+}
+
+.up-info {
+	color: $u-info;
+}
+
+.up-primary-bg {
+	background-color: $u-primary;
+}
+
+.up-warning-bg {
+	background-color: $u-warning;
+}
+
+.up-success-bg {
+	background-color: $u-success;
+}
+
+.up-error-bg {
+	background-color: $u-error;
+}
+
+.up-info-bg {
+	background-color: $u-info;
+}
+
+.up-main-color {
+	color: $u-main-color;
+}
+
+.up-content-color {
+	color: $u-content-color;
+}
+
+.up-tips-color {
+	color: $u-tips-color;
+}
+
+.up-light-color {
+	color: $u-light-color;
+}

package/libs/css/common.scss

@@ -1,7 +1,8 @@
 // 超出行数，自动显示行尾省略号，最多5行
 // 来自uview-plus的温馨提示：当您在控制台看到此报错，说明需要在App.vue的style标签加上【lang="scss"】
 @for $i from 1 through 5 {
-	.u-line-#{$i} {
+	.u-line-#{$i},
+	.up-line-#{$i} {
 		/* #ifdef APP-NVUE */
 		// nvue下，可以直接使用lines属性，这是weex特有样式
 		lines: $i;
@@ -33,37 +34,43 @@
 // App.vue的样式会被uni-app的view元素的自带border属性覆盖，导致无效
 // 综上，这是uni-app的缺陷导致我们为了多端兼容，而必须要加上!important
 // 移动端兼容性较好，直接使用0.5px去实现细边框，不使用伪元素形式实现
-.u-border {
+.u-border,
+.up-border {
 	border-width: 0.5px!important;
 	border-color: $u-border-color!important;
     border-style: solid;
 }
 
-.u-border-top {
+.u-border-top,
+.up-border-top {
 	border-top-width: 0.5px!important;
 	border-color: $u-border-color!important;
     border-top-style: solid;
 }
 
-.u-border-left {
+.u-border-left,
+.up-border-left {
 	border-left-width: 0.5px!important;
 	border-color: $u-border-color!important;
     border-left-style: solid;
 }
 
-.u-border-right {
+.u-border-right,
+.up-border-right {
 	border-right-width: 0.5px!important;
 	border-color: $u-border-color!important;
     border-right-style: solid;
 }
 
-.u-border-bottom {
+.u-border-bottom,
+.up-border-bottom {
 	border-bottom-width: 0.5px!important;
 	border-color: $u-border-color!important;
     border-bottom-style: solid;
 }
 
-.u-border-top-bottom {
+.u-border-top-bottom,
+.up-border-top-bottom {
 	border-top-width: 0.5px!important;
 	border-bottom-width: 0.5px!important;
 	border-color: $u-border-color!important;
@@ -72,7 +79,8 @@
 }
 
 // 去除button的所有默认样式，让其表现跟普通的view、text元素一样
-.u-reset-button {
+.u-reset-button,
+.up-reset-button {
 	padding: 0;
 	background-color: transparent;
 	/* #ifndef APP-PLUS */
@@ -86,12 +94,14 @@
 }
 
 /* #ifndef APP-NVUE */
-.u-reset-button::after {
+.u-reset-button::after,
+.up-reset-button::after {
    border: none;
 }
 /* #endif */
 
-.u-hover-class {
+.u-hover-class,
+.up-hover-class {
 	opacity: 0.7;
 }
 

package/libs/css/components.scss

@@ -2,8 +2,9 @@
 
 /* #ifndef APP-NVUE */
 // 由于uview-plus是基于nvue环境进行开发的，此环境中普通元素默认为flex-direction: column;
-// 所以在非nvue中，需要对元素进行重置为flex-direction: column; 否则可能会表现异常
-// 2024-04-09由于微信小程序会提示 Some selectors are not allowed in component wxss所以注释以下几行
+// 所以在非nvue中，需要对元素进行重置为flex-direction: column; 否则可能会表现异常
+// 2024-04-09由于微信小程序会提示 Some selectors are not allowed in component wxss所以注释以下几行
+// view,
 // scroll-view,
 // swiper-item,
 .u-empty,
@@ -13,7 +14,15 @@
 .u-tabs__wrapper__scroll-view-wrapper,
 .u-tabs__wrapper__scroll-view,
 .u-tabs__wrapper__nav,
-.u-tabs__wrapper__nav__line {
+.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;

package/libs/css/flex.scss

@@ -30,42 +30,55 @@
 // flex布局
 .u-flex,
 .u-flex-row,
-.u-flex-x {
+.u-flex-x,
+.up-flex,
+.up-flex-row,
+.up-flex-x {
 	@include flex;
 }
 
 .u-flex-y,
-.u-flex-column {
+.u-flex-column,
+.up-flex-y,
+.up-flex-column {
 	@include flex(column);
 }
 
-.u-flex-x-center {
+.u-flex-x-center,
+.up-flex-x-center {
 	@include flex;
 	justify-content: center;
 }
 
-.u-flex-xy-center {
+.u-flex-xy-center,
+.up-flex-xy-center {
 	@include flex;
 	justify-content: center;
 	align-items: center;
 }
 
-.u-flex-y-center {
+.u-flex-y-center,
+.up-flex-y-center {
 	@include flex;
 	align-items: center;
 }
 
-.u-flex-x-left {
+.u-flex-x-left,
+.up-flex-x-left {
 	@include flex;
 }
 
 .u-flex-x-reverse,
-.u-flex-row-reverse {
+.u-flex-row-reverse,
+.up-flex-x-reverse,
+.up-flex-row-reverse  {
 	flex-direction: row-reverse;
 }
 
 .u-flex-y-reverse,
-.u-flex-column-reverse {
+.u-flex-column-reverse,
+.up-flex-y-reverse,
+.up-flex-column-reverse {
 	flex-direction: column-reverse;
 }
 
@@ -74,113 +87,143 @@
 // nvue下只能写成class="u-flex-x u-flex-x-reverse的形式"
 .u-flex.u-flex-reverse,
 .u-flex-row.u-flex-reverse,
-.u-flex-x.u-flex-reverse {
+.u-flex-x.u-flex-reverse,
+.up-flex.up-flex-reverse,
+.up-flex-row.up-flex-reverse,
+.up-flex-x.up-flex-reverse {
 	flex-direction: row-reverse;
 }
 
 .u-flex-column.u-flex-reverse,
-.u-flex-y.u-flex-reverse {
+.u-flex-y.u-flex-reverse,
+.up-flex-column.up-flex-reverse,
+.up-flex-y.up-flex-reverse {
 	flex-direction: column-reverse;
 }
 
 // 自动伸缩
-.u-flex-fill {
+.u-flex-fill,
+.u-flex-fillp {
 	flex: 1 1 auto;
 }
 
 // 边界自动伸缩
 .u-margin-top-auto,
-.u-m-t-auto {
+.u-m-t-auto,
+.up-margin-top-auto,
+.up-m-t-auto {
 	margin-top: auto !important;
 }
 
 .u-margin-right-auto,
-.u-m-r-auto {
+.u-m-r-auto,
+.up-margin-right-auto,
+.up-m-r-auto {
 	margin-right: auto !important;
 }
 
 .u-margin-bottom-auto,
-.u-m-b-auto {
+.u-m-b-auto,
+.up-margin-bottom-auto,
+.up-m-b-auto {
 	margin-bottom: auto !important;
 }
 
 .u-margin-left-auto,
-.u-m-l-auto {
+.u-m-l-auto,
+.up-margin-left-auto,
+.up-m-l-auto {
 	margin-left: auto !important;
 }
 
 .u-margin-center-auto,
-.u-m-c-auto {
+.u-m-c-auto,
+.up-margin-center-auto,
+.up-m-c-auto {
 	margin-left: auto !important;
 	margin-right: auto !important;
 }
 
 .u-margin-middle-auto,
-.u-m-m-auto {
+.u-m-m-auto,
+.up-margin-middle-auto,
+.up-m-m-auto {
 	margin-top: auto !important;
 	margin-bottom: auto !important;
 }
 /* #endif */
 
 // 换行
-.u-flex-wrap {
+.u-flex-wrap,
+.up-flex-wrap {
 	flex-wrap: wrap;
 }
 
 // 反向换行
-.u-flex-wrap-reverse {
+.u-flex-wrap-reverse,
+.up-flex-wrap-reverse {
 	flex-wrap: wrap-reverse;
 }
 
 // 主轴起点对齐
-.u-flex-start {
+.u-flex-start,
+.up-flex-start {
 	justify-content: flex-start;
 }
 
 // 主轴中间对齐
-.u-flex-center {
+.u-flex-center,
+.up-flex-center {
 	justify-content: center;
 }
 
 // 主轴终点对齐
-.u-flex-end {
+.u-flex-end,
+.up-flex-end {
 	justify-content: flex-end;
 }
 
 // 主轴等比间距
-.u-flex-between {
+.u-flex-between,
+.up-flex-between {
 	justify-content: space-between;
 }
 
 // 主轴均分间距
-.u-flex-around {
+.u-flex-around,
+.up-flex-around {
 	justify-content: space-around;
 }
 
 // 交叉轴起点对齐
-.u-flex-items-start {
+.u-flex-items-start,
+.up-flex-items-start {
 	align-items: flex-start;
 }
 
 // 交叉轴中间对齐
-.u-flex-items-center {
+.u-flex-items-center,
+.up-flex-items-center {
 	align-items: center;
 }
 
 // 交叉轴终点对齐
-.u-flex-items-end {
+.u-flex-items-end,
+.up-flex-items-end {
 	align-items: flex-end;
 }
 
 // 交叉轴第一行文字基线对齐
-.u-flex-items-baseline {
+.u-flex-items-baseline,
+.up-flex-items-baseline {
 	/* #ifndef APP-NVUE */
 	align-items: baseline;
 	/* #endif */
 }
 
 // 交叉轴方向拉伸对齐
-.u-flex-items-stretch {
+.u-flex-items-stretch,
+.up-flex-items-stretch {
 	align-items: stretch;
 }
 
@@ -189,27 +232,32 @@
 
 // 子元素交叉轴起点对齐
 /* #ifndef APP-NVUE */
-.u-flex-self-start {
+.u-flex-self-start,
+.up-flex-self-start {
 	align-self: flex-start;
 }
 
 // 子元素交叉轴居中对齐
-.u-flex-self-center {
+.u-flex-self-center,
+.up-flex-self-center {
 	align-self: center;
 }
 
 // 子元素交叉轴终点对齐
-.u-flex-self-end {
+.u-flex-self-end,
+.up-flex-self-end {
 	align-self: flex-end;
 }
 
 // 子元素交叉轴第一行文字基线对齐
-.u-flex-self-baseline {
+.u-flex-self-baseline,
+.up-flex-self-baseline {
 	align-self: baseline;
 }
 
 // 子元素交叉轴方向拉伸对齐
-.u-flex-self-stretch {
+.u-flex-self-stretch,
+.up-flex-self-stretch {
 	align-self: stretch;
 }
 /* #endif */
@@ -217,32 +265,38 @@
 
 // 起点对齐
 /* #ifndef APP-NVUE */
-.u-flex-content-start {
+.u-flex-content-start,
+.up-flex-content-start {
 	align-content: flex-start;
 }
 
 // 居中对齐
-.u-flex-content-center {
+.u-flex-content-center,
+.up-flex-content-center {
 	align-content: center;
 }
 
 // 终点对齐
-.u-flex-content-end {
+.u-flex-content-end,
+.up-flex-content-end {
 	align-content: flex-end;
 }
 
 // 两端对齐
-.u-flex-content-between {
+.u-flex-content-between,
+.up-flex-content-between {
 	align-content: space-between;
 }
 
 // 均分间距
-.u-flex-content-around {
+.u-flex-content-around,
+.up-flex-content-around {
 	align-content: space-around;
 }
 
 // 全部居中对齐
-.u-flex-middle {
+.u-flex-middle,
+.up-flex-middle {
 	justify-content: center;
 	align-items: center;
 	align-self: center;
@@ -250,12 +304,14 @@
 }
 
 // 是否可以放大
-.u-flex-grow {
+.u-flex-grow,
+.up-flex-grow {
 	flex-grow: 1;
 }
 
 // 是否可以缩小
-.u-flex-shrink {
+.u-flex-shrink,
+.up-flex-shrink {
 	flex-shrink: 1;
 }
 
@@ -265,36 +321,42 @@
 @for $i from 0 through 80 {
 	// 只要双数和能被5除尽的数
 	@if $i % 2 == 0 or $i % 5 == 0 {
-		// 得出：u-margin-30或者u-m-30
-		.u-margin-#{$i}, .u-m-#{$i} {
+		// 得出：up-margin-30或者u-m-30
+		.u-margin-#{$i}, .u-m-#{$i},
+		.up-margin-#{$i}, .up-m-#{$i} {
 			margin: $i + rpx!important;
 		}
 		
-		// 得出：u-padding-30或者u-p-30
-		.u-padding-#{$i}, .u-p-#{$i} {
+		// 得出：up-padding-30或者u-p-30
+		.u-padding-#{$i}, .u-p-#{$i},
+		.up-padding-#{$i}, .up-p-#{$i} {
 			padding: $i + rpx!important;
 		}
 		
 		@each $short, $long in l left, t top, r right, b bottom {
-			// 缩写版，结果如： u-m-l-30
+			// 缩写版，结果如： up-m-l-30
 			// 定义外边距
-			.u-m-#{$short}-#{$i} {
+			.u-m-#{$short}-#{$i},
+			.up-m-#{$short}-#{$i} {
 				margin-#{$long}: $i + rpx!important;
 			}
 			
 			// 定义内边距
-			.u-p-#{$short}-#{$i} {
+			.u-p-#{$short}-#{$i},
+			.up-p-#{$short}-#{$i} {
 				padding-#{$long}: $i + rpx!important;
 			}
 			
-			// 完整版，结果如：u-margin-left-30
+			// 完整版，结果如：up-margin-left-30
 			// 定义外边距
-			.u-margin-#{$long}-#{$i} {
+			.u-margin-#{$long}-#{$i},
+			.up-margin-#{$long}-#{$i} {
 				margin-#{$long}: $i + rpx!important;
 			}
 			
 			// 定义内边距
-			.u-padding-#{$long}-#{$i} {
+			.u-padding-#{$long}-#{$i},
+			.up-padding-#{$long}-#{$i} {
 				padding-#{$long}: $i + rpx!important;
 			}
 		}

package/libs/css/vue.scss

@@ -1,20 +1,21 @@
 // 历遍生成4个方向的底部安全区
 @each $d in top, right, bottom, left {
-	.u-safe-area-inset-#{$d} {
+	.u-safe-area-inset-#{$d},
+    .up-safe-area-inset-#{$d} {
 		padding-#{$d}: 0;
 		padding-#{$d}: constant(safe-area-inset-#{$d});  
 		padding-#{$d}: env(safe-area-inset-#{$d});  
 	}
 }
 
-//提升H5端uni.toast()的层级，避免被uView的modal等遮盖
-/* #ifdef H5 */
-uni-toast {
-    z-index: 10090;
-}
-uni-toast .uni-toast {
-   z-index: 10090;
-}
+//提升H5端uni.toast()的层级，避免被uview-plus的modal等遮盖
+/* #ifdef H5 */
+uni-toast {
+    z-index: 10090;
+}
+uni-toast .uni-toast {
+   z-index: 10090;
+}
 /* #endif */
 
 // 隐藏scroll-view的滚动条
@@ -24,4 +25,4 @@ uni-toast .uni-toast {
     height: 0 !important;  
     -webkit-appearance: none;  
     background: transparent;  
-}
+}

package/package.json

@@ -2,7 +2,7 @@
 	"id": "uview-plus",
 	"name": "uview-plus",
 	"displayName": "零云®uview-plus3.0重磅发布，全面的Vue3移动组件库。",
-	"version": "3.3.24",
+	"version": "3.3.26",
 	"description": "零云®uview-plus已兼容vue3，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
 	"keywords": [
         "uview",

package/types/comps/button.d.ts

@@ -15,7 +15,7 @@ declare interface ButtonProps {
    * 按钮的大小
    * @default "normal"
    */
-  size?: 'normal' | 'large' | 'mini'
+  size?: 'normal' | 'large' | 'small' | 'mini'
   /**
    * 按钮外观形状
    * @default "square"

package/types/comps/safeBottom.d.ts

@@ -0,0 +1,16 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+declare interface SafeBottomProps {
+	/**
+	 * 定义需要用到的外部样式
+	 */
+	customStyle?: unknown
+}
+
+declare interface _SafeBottom {
+	new (): {
+		$props: AllowedComponentProps & VNodeProps & SafeBottomProps
+	}
+}
+
+export declare const SafeBottom: _SafeBottom

package/types/comps/statusBar.d.ts

@@ -0,0 +1,22 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+declare interface StatusBarProps {
+
+    /**
+     * 背景色
+     */
+    bgColor?: string
+
+	/**
+	 * 定义需要用到的外部样式
+	 */
+	customStyle?: unknown
+}
+
+declare interface _StatusBar {
+	new (): {
+		$props: AllowedComponentProps & VNodeProps & StatusBarProps
+	}
+}
+
+export declare const StatusBar: _StatusBar

package/types/comps.d.ts

@@ -86,13 +86,15 @@ declare module '@vue/runtime-core' {
     // 其他组件
     ['up-parse']: typeof import('./comps/parse')['Parse']
     ['up-code-input']: typeof import('./comps/codeInput')['CodeInput']
-    ['up-load-more']: typeof import('./comps/loadMore')['LoadMore']
+    ['up-loadmore']: typeof import('./comps/loadMore')['LoadMore']
     ['up-read-more']: typeof import('./comps/readMore')['ReadMore']
     ['up-gap']: typeof import('./comps/gap')['Gap']
     ['up-avatar']: typeof import('./comps/avatar')['Avatar']
     ['up-avatar-group']: typeof import('./comps/avatarGroup')['AvatarGroup']
     ['up-link']: typeof import('./comps/link')['Link']
     ['up-transition']: typeof import('./comps/transition')['Transition']
+    ['up-status-bar']: typeof import('./comps/statusBar')['StatusBar']
+    ['up-safe-bottom']: typeof import('./comps/safeBottom')['SafeBottom']
   }
 }