uview-pro 0.5.0 → 0.5.2

package/components/u-form/u-form.vue

@@ -121,7 +121,7 @@ defineExpose({
         if (!fields.value.includes(field)) fields.value.push(field);
     },
     removeField(field: any) {
-        fields.value = fields.value.filter(f => f.prop !== field.prop)
+        fields.value = fields.value.filter(f => f.prop !== field.prop);
     },
     fields,
     rules,

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

@@ -27,7 +27,7 @@
                 }"
             >
                 <!-- 为了块对齐 -->
-                <view class="u-form-item--left__content" v-if="required || leftIcon || label">
+                <view class="u-form-item--left__content" v-if="required || leftIcon || label || $slots.label">
                     <!-- nvue不支持伪元素before -->
                     <text v-if="required" class="u-form-item--left__content--required">*</text>
                     <view class="u-form-item--left__content__icon" v-if="leftIcon">
@@ -47,7 +47,9 @@
                             }
                         ]"
                     >
-                        {{ label }}
+                        <slot name="label">
+                            {{ label }}
+                        </slot>
                     </view>
                 </view>
             </view>
@@ -88,7 +90,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick, useSlots } from 'vue';
 import { $u, useChildren, useParent } from '../..';
 // @ts-ignore
 import schema from '../../libs/util/async-validator';
@@ -119,6 +121,9 @@ const { broadcast } = useParent('u-form-item');
 
 const props = defineProps(FormItemProps);
 
+// 插槽
+const $slots = useSlots();
+
 const { parentExposed } = useChildren('u-form-item', 'u-form');
 
 // 组件状态
@@ -163,7 +168,7 @@ watch(
 const uLabelWidth = computed(() => {
     // 如果用户设置label为空字符串(微信小程序空字符串最终会变成字符串的'true')，意味着要将label的位置宽度设置为auto
     return elLabelPosition.value == 'left'
-        ? props.label === 'true' || props.label === ''
+        ? (props.label === 'true' || props.label === '') && !$slots.label
             ? 'auto'
             : $u.addUnit(elLabelWidth.value)
         : '100%';
@@ -249,7 +254,9 @@ function getPropByPath(obj: any, path: string) {
 function getRules() {
     // 父组件的所有规则
     let rules = parentExposed?.value?.rules?.value || {};
-    rules = rules ? rules[props.prop] || getPropByPath(rules,props.prop.replace(/(\.|^)(\d+)\./,'.defaultField.fields.')).v : [];
+    rules = rules
+        ? rules[props.prop] || getPropByPath(rules, props.prop.replace(/(\.|^)(\d+)\./, '.defaultField.fields.')).v
+        : [];
     // 保证返回的是一个数组形式
     return [].concat(rules || []);
 }

package/components/u-full-screen/u-full-screen.vue

@@ -4,8 +4,8 @@
         :class="customClass"
         :style="$u.toStyle(customStyle)"
         :show-cancel-button="true"
-        :confirm-text="t('fullScreen.upgrade')"
-        :title="title || t('fullScreen.title')"
+        :confirm-text="t('uFullScreen.upgrade')"
+        :title="title || t('uFullScreen.title')"
         @cancel="cancel"
         @confirm="confirm"
     >

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

@@ -38,9 +38,9 @@ const props = defineProps(GapProps);
 const gapStyle = computed(() => {
     return {
         backgroundColor: props.bgColor,
-        height: props.height + 'rpx',
-        marginTop: props.marginTop + 'rpx',
-        marginBottom: props.marginBottom + 'rpx'
+        height: $u.addUnit(props.height),
+        marginTop: $u.addUnit(props.marginTop),
+        marginBottom: $u.addUnit(props.marginBottom)
     };
 });
 </script>

package/components/u-input/types.ts

@@ -30,7 +30,7 @@ export const InputProps = {
     /** placeholder显示值(默认 '请输入内容') */
     placeholder: {
         type: String,
-        default: () => t('input.placeholder')
+        default: () => t('uInput.placeholder')
     },
     /** 是否禁用输入框(默认false) */
     disabled: {

package/components/u-keyboard/types.ts

@@ -35,9 +35,9 @@ export const KeyboardProps = {
     /** z-index值 */
     zIndex: { type: [Number, String] as PropType<string | number>, default: '' },
     /** 取消按钮的文字 */
-    cancelText: { type: String, default: () => t('keyboard.cancelText') },
+    cancelText: { type: String, default: () => t('uKeyboard.cancelText') },
     /** 确认按钮的文字 */
-    confirmText: { type: String, default: () => t('keyboard.confirmText') }
+    confirmText: { type: String, default: () => t('uKeyboard.confirmText') }
 };
 
 export type KeyboardProps = ExtractPropTypes<typeof KeyboardProps>;

package/components/u-keyboard/u-keyboard.vue

@@ -20,10 +20,10 @@
                     tips
                         ? tips
                         : mode == 'number'
-                          ? t('keyboard.number')
+                          ? t('uKeyboard.number')
                           : mode == 'card'
-                            ? t('keyboard.idCard')
-                            : t('keyboard.plate')
+                            ? t('uKeyboard.idCard')
+                            : t('uKeyboard.plate')
                 }}
             </view>
             <view

package/components/u-link/types.ts

@@ -31,7 +31,7 @@ export const LinkProps = {
     /** 小程序中复制到粘贴板的提示语 */
     mpTips: {
         type: String,
-        default: () => t('link.mpTips')
+        default: () => t('uLink.mpTips')
     },
     /** 下划线颜色 */
     lineColor: {

package/components/u-loadmore/types.ts

@@ -44,9 +44,9 @@ export const LoadmoreProps = {
     loadText: {
         type: Object as PropType<LoadmoreText>,
         default: () => ({
-            loadmore: t('loadmore.loadmore'),
-            loading: t('loadmore.loading'),
-            nomore: t('loadmore.nomore')
+            loadmore: t('uLoadmore.loadmore'),
+            loading: t('uLoadmore.loading'),
+            nomore: t('uLoadmore.nomore')
         })
     },
     /** 在“没有更多”状态下，是否显示粗点 */

package/components/u-modal/types.ts

@@ -23,7 +23,7 @@ export const ModalProps = {
     /** 标题 */
     title: {
         type: String,
-        default: () => t('modal.title')
+        default: () => t('uModal.title')
     },
     /** 弹窗宽度 */
     width: {
@@ -33,7 +33,7 @@ export const ModalProps = {
     /** 弹窗内容 */
     content: {
         type: String,
-        default: () => t('modal.content')
+        default: () => t('uModal.content')
     },
     /** 是否显示标题 */
     showTitle: {
@@ -53,12 +53,12 @@ export const ModalProps = {
     /** 确认文案 */
     confirmText: {
         type: String,
-        default: () => t('modal.confirmText')
+        default: () => t('uModal.confirmText')
     },
     /** 取消文案 */
     cancelText: {
         type: String,
-        default: () => t('modal.cancelText')
+        default: () => t('uModal.cancelText')
     },
     /** 确认按钮颜色 */
     confirmColor: {

package/components/u-navbar/u-navbar.vue

@@ -95,7 +95,6 @@ import { NavbarProps } from './types';
 const props = defineProps(NavbarProps);
 // 获取系统状态栏的高度
 const systemInfo = uni.getSystemInfoSync();
-const windowInfo = uni.getWindowInfo();
 
 let menuButtonInfo: any = {};
 // 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
@@ -104,7 +103,14 @@ menuButtonInfo = uni.getMenuButtonBoundingClientRect();
 // #endif
 
 // 状态栏高度
-const statusBarHeight = ref(windowInfo.statusBarHeight);
+const statusBarHeight = ref(0);
+// #ifdef APP || H5 || MP-ALIPAY || MP-WEIXIN
+const windowInfo = uni.getWindowInfo();
+statusBarHeight.value = windowInfo.statusBarHeight;
+// #endif
+// #ifndef APP || H5 || MP-ALIPAY || MP-WEIXIN
+statusBarHeight.value = systemInfo.statusBarHeight;
+// #endif
 
 // 转换字符数值为真正的数值
 const navbarHeight = computed(() => {

package/components/u-no-network/types.ts

@@ -12,7 +12,7 @@ export const NoNetworkProps = {
     /** 页面文字提示 */
     tips: {
         type: String,
-        default: () => t('noNetwork.tips')
+        default: () => t('uNoNetwork.tips')
     },
     /** 一个z-index值，用于设置没有网络这个组件的层次 */
     zIndex: {

package/components/u-no-network/u-no-network.vue

@@ -8,14 +8,14 @@
             <!-- 只有APP平台，才能跳转设置页，因为需要调用plus环境 -->
             <!-- #ifdef APP-PLUS -->
             <view class="u-to-setting">
-                {{ t('noNetwork.checkNetwork') }}
+                {{ t('uNoNetwork.checkNetwork') }}
                 <text class="u-setting-btn" @tap="openSettings">
-                    {{ t('noNetwork.setting') }}
+                    {{ t('uNoNetwork.setting') }}
                 </text>
             </view>
             <!-- #endif -->
             <view class="u-retry" :hover-stay-time="150" @tap="retry" hover-class="u-retry-hover">
-                {{ t('noNetwork.retry') }}
+                {{ t('uNoNetwork.retry') }}
             </view>
         </view>
     </view>
@@ -98,14 +98,14 @@ function retry() {
             networkType.value = res.networkType;
             if (res.networkType == 'none') {
                 uni.showToast({
-                    title: t('noNetwork.noConnection'),
+                    title: t('uNoNetwork.noConnection'),
                     icon: 'none',
                     position: 'top'
                 });
                 isConnected.value = false;
             } else {
                 uni.showToast({
-                    title: t('noNetwork.connected'),
+                    title: t('uNoNetwork.connected'),
                     icon: 'none',
                     position: 'top'
                 });

package/components/u-pagination/types.ts

@@ -12,9 +12,9 @@ const { t } = useLocale();
 export const PaginationProps = {
     ...baseProps,
     /** 左侧按钮文字 */
-    prevText: { type: String, default: () => t('pagination.prevText') },
+    prevText: { type: String, default: () => t('uPagination.prevText') },
     /** 右侧按钮文字 */
-    nextText: { type: String, default: () => t('pagination.nextText') },
+    nextText: { type: String, default: () => t('uPagination.nextText') },
     /** 总条目数 */
     total: Number,
     /** 每页数据量 */

package/components/u-picker/types.ts

@@ -122,12 +122,12 @@ export const PickerProps = {
     /** 取消按钮的文字 */
     cancelText: {
         type: String,
-        default: () => t('picker.cancelText')
+        default: () => t('uPicker.cancelText')
     },
     /** 确认按钮的文字 */
     confirmText: {
         type: String,
-        default: () => t('picker.confirmText')
+        default: () => t('uPicker.confirmText')
     }
 };
 

package/components/u-radio/types.ts

@@ -8,6 +8,8 @@ import { baseProps } from '../common/props';
  */
 export const RadioProps = {
     ...baseProps,
+    label: { type: String, default: '' },
+    value: { type: [String, Number] as PropType<string | number>, default: '' },
     /** radio的名称 */
     name: { type: [String, Number] as PropType<string | number>, default: '' },
     /** 形状，square为方形，circle为圆形 */

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

@@ -10,7 +10,9 @@
                 fontSize: $u.addUnit(labelSize)
             }"
         >
-            <slot />
+            <slot>
+                {{ label }}
+            </slot>
         </view>
     </view>
 </template>
@@ -55,6 +57,12 @@ const emit = defineEmits(['change']);
 // 使用组件关系 hooks 获取父组件
 const { parentExposed } = useChildren('u-radio', 'u-radio-group');
 
+// radio 的value值，id
+const radioValue = computed(() => {
+    if (props.value !== '') return props.value;
+    return props.name;
+});
+
 // 父组件的默认值（兼容没有父组件的场景）
 const parentData = computed(() => {
     return (
@@ -127,7 +135,7 @@ const elShape = computed(() =>
  */
 const iconStyle = computed(() => {
     let style: Record<string, string> = {};
-    if (elActiveColor.value && parentData.value.value == props.name && !elDisabled.value) {
+    if (elActiveColor.value && parentData.value.value == radioValue.value && !elDisabled.value) {
         style.borderColor = elActiveColor.value;
         style.backgroundColor = elActiveColor.value;
     }
@@ -136,14 +144,15 @@ const iconStyle = computed(() => {
     return style;
 });
 
-const iconColor = computed(() => (props.name == parentData.value.value ? 'var(--u-white-color)' : 'transparent'));
+const iconColor = computed(() => (radioValue.value == parentData.value.value ? 'var(--u-white-color)' : 'transparent'));
 
 const iconClass = computed(() => {
     let classes: string[] = [];
     classes.push('u-radio__icon-wrap--' + elShape.value);
-    if (props.name == parentData.value.value) classes.push('u-radio__icon-wrap--checked');
+    if (radioValue.value == parentData.value.value) classes.push('u-radio__icon-wrap--checked');
     if (elDisabled.value) classes.push('u-radio__icon-wrap--disabled');
-    if (props.name == parentData.value.value && elDisabled.value) classes.push('u-radio__icon-wrap--disabled--checked');
+    if (radioValue.value == parentData.value.value && elDisabled.value)
+        classes.push('u-radio__icon-wrap--disabled--checked');
     // 支付宝小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
     return classes.join(' ');
 });
@@ -192,7 +201,7 @@ function toggle() {
  */
 function emitEvent() {
     // u-radio的name不等于父组件的v-model的值时(意味着未选中)，才发出事件，避免多次点击触发事件
-    if (parentData.value.value != props.name) emit('change', props.name);
+    if (parentData.value.value != radioValue.value) emit('change', radioValue.value);
 }
 /**
  * 改变组件选中状态
@@ -201,7 +210,7 @@ function emitEvent() {
  */
 function setRadioCheckedStatus() {
     emitEvent();
-    parentExposed?.value?.setValue(props.name);
+    parentExposed?.value?.setValue(radioValue.value);
 }
 </script>
 

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

@@ -63,7 +63,7 @@ function getData() {
 
 /**
  * 设置选中值
- * @param val 选中的 radio 的 name
+ * @param val 选中的 radio 的 value 值
  */
 function setValue(val: string | number) {
     // 通过emit事件，设置父组件通过v-model双向绑定的值

package/components/u-read-more/types.ts

@@ -15,9 +15,9 @@ export const ReadMoreProps = {
     /** 展开后是否显示"收起"按钮 */
     toggle: { type: Boolean, default: false },
     /** 关闭时的提示文字 */
-    closeText: { type: String, default: () => t('readMore.closeText') },
+    closeText: { type: String, default: () => t('uReadMore.closeText') },
     /** 展开时的提示文字 */
-    openText: { type: String, default: () => t('readMore.openText') },
+    openText: { type: String, default: () => t('uReadMore.openText') },
     /** 提示的文字颜色 */
     color: { type: String, default: () => getColor('primary') },
     /** 提示文字的大小 */

package/components/u-search/types.ts

@@ -16,7 +16,7 @@ export const SearchProps = {
     /** 搜索框背景色，默认值var(--u-bg-gray-light) */
     bgColor: { type: String, default: 'var(--u-bg-gray-light)' },
     /** 占位提示文字 */
-    placeholder: { type: String, default: () => t('search.placeholder') },
+    placeholder: { type: String, default: () => t('uSearch.placeholder') },
     /** 是否启用清除控件 */
     clearabled: { type: Boolean, default: true },
     /** 是否自动聚焦 */
@@ -26,7 +26,7 @@ export const SearchProps = {
     /** 右边控件的样式 */
     actionStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
     /** 取消按钮文字 */
-    actionText: { type: String, default: () => t('search.actionText') },
+    actionText: { type: String, default: () => t('uSearch.actionText') },
     /** 输入框内容对齐方式，可选值为 left|center|right */
     inputAlign: { type: String as PropType<InputAlign>, default: 'left' },
     /** 是否启用输入框 */
@@ -52,7 +52,9 @@ export const SearchProps = {
     /** 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx"、"30rpx 20rpx"等写法 */
     margin: { type: String, default: '0' },
     /** 左边输入框的图标，可以为uView图标名称或图片路径 */
-    searchIcon: { type: String, default: 'search' }
+    searchIcon: { type: String, default: 'search' },
+    /** 弹出键盘时是否自动调节高度，uni-app默认值是true */
+    adjustPosition: { type: Boolean, default: true }
 };
 
 export type SearchProps = ExtractPropTypes<typeof SearchProps>;

package/components/u-search/u-search.vue

@@ -34,6 +34,7 @@
                 placeholder-class="u-placeholder-class"
                 :placeholder="placeholder"
                 :placeholder-style="`color: ${placeholderColor}`"
+                :adjust-position="adjustPosition"
                 class="u-input"
                 type="text"
                 :style="[

package/components/u-section/types.ts

@@ -15,7 +15,7 @@ export const SectionProps = {
     /** 标题信息 */
     title: { type: String, default: '' },
     /** 右边副标题内容 */
-    subTitle: { type: String, default: () => t('section.subTitle') },
+    subTitle: { type: String, default: () => t('uSection.subTitle') },
     /** 是否显示右边的内容 */
     right: { type: Boolean, default: true },
     /** 主标题的字体大小 */

package/components/u-select/types.ts

@@ -42,9 +42,9 @@ export const SelectProps = {
     /** 顶部标题 */
     title: { type: String, default: '' },
     /** 取消按钮的文字 */
-    cancelText: { type: String, default: () => t('select.cancelText') },
+    cancelText: { type: String, default: () => t('uSelect.cancelText') },
     /** 确认按钮的文字 */
-    confirmText: { type: String, default: () => t('select.confirmText') }
+    confirmText: { type: String, default: () => t('uSelect.confirmText') }
 };
 
 export type SelectProps = ExtractPropTypes<typeof SelectProps>;

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

@@ -330,7 +330,7 @@ function containerStyle(index: number) {
         const iconSizeRaw = getIconSize(index);
         const numericSize = parseFloat(String(iconSizeRaw)) || parseFloat(String(props.midButtonSize as any)) || 100;
         // paddingTop: 半个图标高度 + 10rpx 的缓冲间距
-        style.paddingTop = $u.addUnit(numericSize / 2 + 10);
+        style.paddingTop = $u.addUnit(numericSize / 2 + 8);
         style.boxSizing = 'border-box';
     }
     return $u.toStyle(style);

package/components/u-text/u-text.vue

@@ -28,9 +28,9 @@
         <u-link v-else-if="props.mode === 'link'" :href="props.href" underLine>
             <slot>{{ displayValue }}</slot>
         </u-link>
-        <template v-else-if="props.openType && isMp">
+        <template v-else-if="props.openType">
             <button
-                class="u-reset-button u-text__value"
+                class="u-reset-button u-text__value u-text__button"
                 :class="props.type && `u-text__value--${props.type}`"
                 :style="textValueStyle"
                 :openType="props.openType"
@@ -296,6 +296,11 @@ function onOpenSetting(event) {
         display: flex;
     }
 
+    &--block &__button {
+        display: block;
+        width: 100%;
+    }
+
     &__price {
         font-size: 14px;
         color: $u-content-color;

package/components/u-toast/u-toast.vue

@@ -51,17 +51,20 @@ const isShow = ref(false);
 // 定时器
 let timer: ReturnType<typeof setTimeout> | null = null;
 // 内置配置
-const config = ref({
-    params: {}, // URL跳转的参数，对象
-    title: '', // 显示文本
-    type: '', // 主题类型，primary，success，error，warning，black
-    duration: 2000, // 显示的时间，毫秒
-    isTab: false, // 是否跳转tab页面
-    url: '', // toast消失后是否跳转页面，有则跳转，优先级高于back参数
-    icon: true, // 显示的图标
-    position: 'center', // toast出现的位置
-    callback: null as null | (() => void), // 执行完后的回调函数
-    back: false // 结束toast是否自动返回上一页
+const config = computed(() => {
+    return {
+        zIndex: props.zIndex, // z-index值
+        type: props.type, // 主题类型，primary，success，error，warning，black
+        duration: props.duration, // 显示的时间，毫秒
+        icon: props.icon, // 显示的图标
+        position: props.position, // toast出现的位置
+        callback: props.callback, // 执行完后的回调函数
+        back: props.back, // 结束toast是否自动返回上一页
+        isTab: props.isTab, // 是否跳转tab页面
+        url: props.url, // toast消失后是否跳转页面，有则跳转，优先级高于back参数
+        params: props.params, // URL跳转的参数，对象
+        title: '' // 显示文本
+    };
 });
 // 合并后的临时配置变量
 const tmpConfig = ref<any>({ ...config.value });

package/components/u-transition/types.ts

@@ -0,0 +1,35 @@
+import type { PropType } from 'vue';
+import { baseProps } from '../common/props';
+import type { TransitionDuration, TransitionPreset } from '../../types/global';
+
+export const TransitionProps = {
+    ...baseProps,
+    show: {
+        type: Boolean,
+        default: true
+    },
+    name: {
+        type: String as PropType<TransitionPreset>,
+        default: 'fade'
+    },
+    mode: {
+        type: String as PropType<'out-in' | 'in-out' | ''>,
+        default: ''
+    },
+    duration: {
+        type: [Number, Object] as PropType<number | TransitionDuration>,
+        default: 300
+    },
+    timingFunction: {
+        type: String,
+        default: 'cubic-bezier(0.2, 0.8, 0.2, 1)'
+    },
+    delay: {
+        type: Number,
+        default: 0
+    },
+    appear: {
+        type: Boolean,
+        default: false
+    }
+};