uview-plus 3.2.3 → 3.2.5

package/changelog.md

@@ -1,3 +1,10 @@
+## 3.2.5（2024-04-13）
+调整分段器尺寸及修复窗口大小改变时重新计算尺寸
+
+多个组件支持cursor-pointer增强PC端体验
+
+## 3.2.4（2024-04-12）
+初步支持typescript
 ## 3.2.3（2024-04-12）
 fix: 修复square属性在小程序下无效问题
 

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

@@ -1,12 +1,12 @@
 <template>
 	<view
-	    class="u-checkbox"
+	    class="u-checkbox cursor-pointer"
 	    :style="[checkboxStyle]"
 	    @tap.stop="wrapperClickHandler"
 	    :class="[`u-checkbox-label--${parentData.iconPlacement}`, parentData.borderBottom && parentData.placement === 'column' && 'u-border-bottom']"
 	>
 		<view
-		    class="u-checkbox__icon-wrap"
+		    class="u-checkbox__icon-wrap cursor-pointer"
 		    @tap.stop="iconClickHandler"
 		    :class="iconClasses"
 		    :style="[iconWrapStyle]"

package/components/u-number-box/u-number-box.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="u-number-box">
 		<view
-		    class="u-number-box__slot"
+		    class="u-number-box__slot cursor-pointer"
 		    @tap.stop="clickHandler('minus')"
 		    @touchstart="onTouchStart('minus')"
 		    @touchend.stop="clearTimeout"
@@ -11,7 +11,7 @@
 		</view>
 		<view
 		    v-else-if="showMinus"
-		    class="u-number-box__minus"
+		    class="u-number-box__minus cursor-pointer"
 		    @tap.stop="clickHandler('minus')"
 		    @touchstart="onTouchStart('minus')"
 		    @touchend.stop="clearTimeout"
@@ -60,7 +60,7 @@
 			<!-- #endif -->
 		</slot>
 		<view
-		    class="u-number-box__slot"
+		    class="u-number-box__slot cursor-pointer"
 		    @tap.stop="clickHandler('plus')"
 		    @touchstart="onTouchStart('plus')"
 		    @touchend.stop="clearTimeout"
@@ -70,7 +70,7 @@
 		</view>
 		<view
 		    v-else-if="showPlus"
-		    class="u-number-box__plus"
+		    class="u-number-box__plus cursor-pointer"
 		    @tap.stop="clickHandler('plus')"
 		    @touchstart="onTouchStart('plus')"
 		    @touchend.stop="clearTimeout"

package/components/u-picker/u-picker.vue

@@ -80,7 +80,7 @@
  */
 import props from './props.js';
 import mpMixin from '../../libs/mixin/mpMixin.js';
-	import mixin from '../../libs/mixin/mixin.js';
+import mixin from '../../libs/mixin/mixin.js';
 export default {
 	name: 'u-picker',
 	mixins: [mpMixin, mixin, props],

package/components/u-radio/u-radio.vue

@@ -1,12 +1,12 @@
 <template>
 	<view
-	    class="u-radio"
+	    class="u-radio cursor-pointer"
 		@tap.stop="wrapperClickHandler"
 	    :style="[radioStyle]"
 	    :class="[`u-radio-label--${parentData.iconPlacement}`, parentData.borderBottom && parentData.placement === 'column' && 'u-border-bottom']"
 	>
 		<view
-		    class="u-radio__icon-wrap"
+		    class="u-radio__icon-wrap cursor-pointer"
 		    @tap.stop="iconClickHandler"
 		    :class="iconClasses"
 		    :style="[iconWrapStyle]"

package/components/u-rate/u-rate.vue

@@ -11,7 +11,7 @@
             @touchend.stop="touchEnd"
         >
             <view
-                class="u-rate__content__item"
+                class="u-rate__content__item cursor-pointer"
                 v-for="(item, index) in Number(count)"
                 :key="index"
                 :class="[elClass]"

package/components/u-subsection/u-subsection.vue

@@ -83,7 +83,8 @@ export default {
                 width: 0,
                 height: 0,
             },
-            innerCurrent: ''
+            innerCurrent: '',
+            windowResizeCallback: {}
         };
     },
     watch: {
@@ -179,6 +180,13 @@ export default {
     },
     mounted() {
         this.init();
+        this.windowResizeCallback = (res) => {
+            this.init();
+        }
+        uni.onWindowResize(this.windowResizeCallback)
+    },
+    beforeUnmount() {
+        uni.offWindowResize(this.windowResizeCallback)
     },
 	emits: ["change"],
     methods: {
@@ -227,20 +235,20 @@ export default {
 	/* #endif */
 
     &--button {
-        height: 32px;
+        height: 34px;
         background-color: rgb(238, 238, 239);
         padding: 3px;
-        border-radius: 3px;
+        border-radius: 4px;
         align-items: stretch;
 
         &__bar {
             background-color: #ffffff;
-            border-radius: 3px !important;
+            border-radius: 4px !important;
         }
     }
 
     &--subsection {
-        height: 30px;
+        height: 32px;
     }
 
     &__bar {
@@ -252,8 +260,8 @@ export default {
         /* #endif */
 
         &--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;
         }
@@ -268,8 +276,8 @@ export default {
         &--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;
         }
     }
 
@@ -286,18 +294,18 @@ export default {
         }
 
         &--first {
-            border-top-left-radius: 3px;
-            border-bottom-left-radius: 3px;
+            border-top-left-radius: 4px;
+            border-bottom-left-radius: 4px;
         }
 
         &--last {
-            border-top-right-radius: 3px;
-            border-bottom-right-radius: 3px;
+            border-top-right-radius: 4px;
+            border-bottom-right-radius: 4px;
         }
 
         &__text {
             font-size: 12px;
-            line-height: 12px;
+            line-height: 14px;
             @include flex;
             align-items: center;
             transition-property: color;

package/components/u-switch/u-switch.vue

@@ -1,6 +1,6 @@
 <template>
 	<view
-	    class="u-switch"
+	    class="u-switch cursor-pointer"
 	    :class="[disabled && 'u-switch--disabled']"
 	    :style="[switchStyle, $u.addStyle(customStyle)]"
 	    @tap="clickHandler"

package/components/u-tabbar-item/u-tabbar-item.vue

@@ -1,6 +1,6 @@
 <template>
 	<view
-	    class="u-tabbar-item"
+	    class="u-tabbar-item cursor-pointer"
 	    :style="[$u.addStyle(customStyle)]"
 	    @tap="clickHandler"
 	>

package/components/u-tag/u-tag.vue

@@ -4,7 +4,7 @@
 		:show="show"
 		style="display: inline-flex;"
 	>
-		<view class="u-tag-wrapper">
+		<view class="u-tag-wrapper cursor-pointer">
 			<view
 				class="u-tag"
 				:class="[`u-tag--${shape}`, !plain && `u-tag--${type}`, plain && `u-tag--${type}--plain`, `u-tag--${size}`, plain && plainFill && `u-tag--${type}--plain--fill`]"

package/index.js

@@ -34,8 +34,11 @@ import color from './libs/config/color.js'
 import platform from './libs/function/platform'
 
 // 导出
+const http = new Request()
+let themeType = ['primary', 'success', 'error', 'warning', 'info'];
+export { route, http, debounce, throttle, platform, themeType, mixin, mpMixin, props, color, test, zIndex }
 export * from './libs/function/index.js'
-export const http = new Request()
+export * from './libs/function/colorGradient.js'
 
 const $u = {
     route,
@@ -45,7 +48,7 @@ const $u = {
     rgbToHex: colorGradient.rgbToHex,
     colorToRgba: colorGradient.colorToRgba,
     test,
-    type: ['primary', 'success', 'error', 'warning', 'info'],
+    type: themeType,
     http,
     config, // uview-plus配置信息相关，比如版本号
     zIndex,

package/libs/css/common.scss

@@ -95,3 +95,6 @@
 	opacity: 0.7;
 }
 
+.cursor-pointer {
+    cursor: pointer;
+}

package/libs/mixin/mpShare.js

@@ -1,13 +1,15 @@
-export default {
-    onLoad() {
-        // 设置默认的转发参数
-        uni.$u.mpShare = {
-            title: '', // 默认为小程序名称
-            path: '', // 默认为当前页面路径
-            imageUrl: '' // 默认为当前页面的截图
-        }
-    },
-    onShareAppMessage() {
-        return uni.$u.mpShare
-    }
-}
+
+export default {
+    data() {
+        return {
+            mpShare: {
+                title: '', // 默认为小程序名称
+                path: '', // 默认为当前页面路径
+                imageUrl: '' // 默认为当前页面的截图 
+            }
+        }
+    },
+    onShareAppMessage() {
+        return this.mpShare;
+    }
+}

package/package.json

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

package/types/comps/_common.d.ts

@@ -0,0 +1,9 @@
+export interface AllowedComponentProps {
+  class?: unknown;
+  style?: unknown;
+}
+
+export interface VNodeProps {
+  key?: string | number | symbol;
+  ref?: unknown;
+}

package/types/comps/actionSheet.d.ts

@@ -0,0 +1,121 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+declare interface ActionSheetProps {
+  /**
+   * 是否展示
+   * @default false
+   */
+  show?: boolean
+  /**
+   * 设置标题
+   */
+  title?: string
+  /**
+   * 选项上方的描述信息
+   */
+  description?: string
+  /**
+   * 按钮的文字数组
+   * @default []
+   */
+  actions?: any[]
+  /**
+   * 取消按钮的文字，不为空时显示按钮
+   */
+  cancelText?: string
+  /**
+   * 点击某个菜单项时是否关闭弹窗
+   */
+  closeOnClickAction?: string
+  /**
+   * 是否开启底部安全区适配
+   * @default false
+   */
+  safeAreaInsetBottom?: boolean
+  /**
+   * 小程序的打开方式
+   */
+  openType?: string
+  /**
+   * 点击遮罩是否允许关闭
+   */
+  closeOnClickOverlay?: boolean
+  /**
+   * 圆角值，默认无圆角
+   * @default 0
+   */
+  round?: string | number
+  /**
+   * 指定返回用户信息的语言
+   * @default "en"
+   */
+  lang?: 'zh_CN' | 'zh_TW' | 'en'
+  /**
+   * 会话来源，open-type="contact"时有效。只微信小程序有效
+   */
+  sessionFrom?: string
+  /**
+   * 会话内消息卡片标题，openType="contact"时有效
+   */
+  sendMessageTitle?: string
+  /**
+   * 会话内消息卡片点击跳转小程序路径，openType="contact"时有效
+   */
+  sendMessagePath?: string
+  /**
+   * 会话内消息卡片图片，openType="contact"时有效
+   */
+  sendMessageImg?: string
+  /**
+   * 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效
+   * @default false
+   */
+  showMessageCard?: boolean
+  /**
+   * 打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效
+   */
+  appParameter?: string
+  /**
+   * 点击ActionSheet列表项时触发
+   */
+  onSelect?: () => any
+  /**
+   * 点击取消按钮时触发
+   */
+  onClose?: () => any
+  /**
+   * 获取用户信息回调，openType="getUserInfo"时有效
+   * @param detail 用户信息
+   */
+  onGetuserinfo?: (detail: any) => any
+  /**
+   * 客服消息回调，openType="contact"时有效
+   */
+  onContact?: () => any
+  /**
+   * 获取用户手机号回调，openType="getPhoneNumber"时有效
+   */
+  onGetphonenumber?: () => any
+  /**
+   * 当使用开放能力时，发生错误的回调
+   */
+  onError?: (...args: any) => any
+  /**
+   * 在打开授权设置页并关闭后回调
+   */
+  onOpensetting?: (...args: any) => any
+  /**
+   * 打开 APP 成功的回调
+   */
+  onLaunchapp?: (...args: any) => any
+}
+
+declare interface _ActionSheet {
+  new (): {
+    $props: AllowedComponentProps &
+      VNodeProps &
+      ActionSheetProps
+  }
+}
+
+export declare const ActionSheet: _ActionSheet

package/types/comps/album.d.ts

@@ -0,0 +1,72 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+declare interface AlbumProps {
+  /**
+   * 图片地址列表
+   */
+  urls?: string[] | Record<string, any>[]
+  /**
+   * 指定从数组的对象元素中读取哪个属性作为图片地址
+   */
+  keyName?: string
+  /**
+   * 单图时，图片长边的长度
+   * @default 180
+   */
+  singleSize?: string | number
+  /**
+   * 多图时，图片边长
+   * @default 70
+   */
+  multipleSize?: string | number
+  /**
+   * 多图时，图片水平和垂直之间的间隔
+   * @default 6
+   */
+  space?: string | number
+  /**
+   * 单图时，图片缩放裁剪的模式
+   * @default "scaleToFill"
+   */
+  singleMode?: ImageMode
+  /**
+   * 多图时，图片缩放裁剪的模式
+   * @default "aspectFill"
+   */
+  multipleMode?: ImageMode
+  /**
+   * 最多展示的图片数量，超出时最后一个位置将会显示剩余图片数量
+   * @default 9
+   */
+  maxCount?: string | number
+  /**
+   * 是否可以预览图片
+   * @default true
+   */
+  previewFullImage?: boolean
+  /**
+   * 每行展示图片数量，如设置，singleSize和multipleSize将会无效
+   * @default 3
+   */
+  rowCount?: string | number
+  /**
+   * 超出maxCount时是否显示查看更多的提示
+   * @default true
+   */
+  showMore?: boolean
+  /**
+   * 某些特殊的情况下，需要让文字与相册的宽度相等，这里事件的形式对外发送
+   * @param width 宽度
+   */
+  onAlbumWidth?: (width: any) => any
+}
+
+declare interface _Album {
+  new (): {
+    $props: AllowedComponentProps &
+      VNodeProps &
+      AlbumProps
+  }
+}
+
+export declare const Album: _Album

package/types/comps/alert.d.ts

@@ -0,0 +1,55 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+declare interface AlertProps {
+  /**
+   * 显示的文字
+   */
+  title?: string
+  /**
+   * 使用预设的颜色
+   * @default "warning"
+   */
+  type?: 'warning' | 'success' | 'primary' | 'error' | 'info'
+  /**
+   * 辅助性文字，颜色比`title`浅一点，字号也小一点，可选
+   */
+  description?: string
+  /**
+   * 关闭按钮(默认为叉号icon图标)
+   * @default false
+   */
+  closable?: boolean
+  /**
+   * 是否显示左边的辅助图标
+   * @default false
+   */
+  showIcon?: boolean
+  /**
+   * 多图时，图片缩放裁剪的模式
+   */
+  effect?: 'light' | 'dark'
+  /**
+   * 文字是否居中
+   * @default false
+   */
+  center?: boolean
+  /**
+   * 字体大小
+   * @default 14
+   */
+  fontSize?: string | number
+  /**
+   * 点击组件时触发
+   */
+  onClick?: () => any
+}
+
+declare interface _Alert {
+  new (): {
+    $props: AllowedComponentProps &
+      VNodeProps &
+      AlertProps
+  }
+}
+
+export declare const Alert: _Alert

package/types/comps/avatar.d.ts

@@ -0,0 +1,85 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+import { ImageMode } from './image'
+
+declare interface AvatarProps {
+  /**
+   * 头像路径，如加载失败，将会显示默认头像(不能为相对路径)
+   */
+  src?: string
+  /**
+   * 头像形状
+   * @default "circle"
+   */
+  shape?: 'circle' | 'square'
+  /**
+   * 头像尺寸
+   * @default 40
+   */
+  size?: 'large' | 'default' | 'mini' | number
+  /**
+   * 裁剪类型
+   * @default "scaleToFill"
+   */
+  mode?: ImageMode
+  /**
+   * 用文字替代图片，级别优先于`src`
+   */
+  text?: string
+  /**
+   * 背景颜色
+   * @default "#c0c4cc"
+   */
+  bgColor?: string
+  /**
+   * 文字颜色
+   * @default "#fff"
+   */
+  color?: string
+  /**
+   * 文字大小
+   * @default 18
+   */
+  fontSize?: string | number
+  /**
+   * 显示的图标
+   */
+  icon?: string
+  /**
+   * 显示小程序头像，只对百度，微信，QQ小程序有效
+   * @default false
+   */
+  mpAvatar?: boolean
+  /**
+   * 是否使用随机背景色
+   * @default false
+   */
+  randomBgColor?: boolean
+  /**
+   * 加载失败的默认头像(组件有内置默认图片)
+   */
+  defaultUrl?: string
+  /**
+   * 如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间
+   */
+  colorIndex?: string | number
+  /**
+   * 组件标识符
+   * @default "level"
+   */
+  name?: string
+  /**
+   * 头像被点击
+   * @param index 用户传递的标识符
+   */
+  onClick?: (index: any) => any
+}
+
+declare interface _Avatar {
+  new (): {
+    $props: AllowedComponentProps &
+      VNodeProps &
+      AvatarProps
+  }
+}
+
+export declare const Avatar: _Avatar