uview-pro 0.1.0 → 0.2.0

package/components/common/props.ts

@@ -0,0 +1,22 @@
+import type { PropType } from 'vue';
+
+export const stringProp = <T>(defaultVal: T) => ({
+    type: String as unknown as PropType<T>,
+    default: defaultVal
+});
+
+export const stringOrObjectProp = <T>(defaultVal: T) => ({
+    type: [String, Object] as PropType<string | Record<string, any>>,
+    default: defaultVal
+});
+
+export const baseProps = {
+    /**
+     * 自定义根节点样式
+     */
+    customStyle: stringOrObjectProp(''),
+    /**
+     * 自定义根节点样式类
+     */
+    customClass: stringProp('')
+};

package/components/u-action-sheet/types.ts

@@ -1,35 +1,35 @@
-import { type ExtractPropTypes, type PropType } from 'vue';
-import type { ActionSheetItem, ActionSheetTips } from '../../types/global';
-
-/**
- * actionSheet 操作菜单
- * @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
- */
-export const ActionSheetProps = {
-    /** 点击遮罩是否可以关闭actionsheet */
-    maskCloseAble: { type: Boolean, default: true },
-    /** 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx */
-    list: {
-        type: Array as unknown as PropType<ActionSheetItem[]>,
-        default: () => []
-    },
-    /** 顶部的提示文字 */
-    tips: {
-        type: Object as unknown as PropType<ActionSheetTips>,
-        default: () => ({ text: '', color: '', fontSize: '26' })
-    },
-    /** 底部的取消按钮 */
-    cancelBtn: { type: Boolean, default: true },
-    /** 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 */
-    safeAreaInsetBottom: { type: Boolean, default: false },
-    /** 通过双向绑定控制组件的弹出与收起 */
-    modelValue: { type: Boolean, default: false },
-    /** 弹出的顶部圆角值 */
-    borderRadius: { type: [String, Number], default: 0 },
-    /** 弹出的z-index值 */
-    zIndex: { type: [String, Number], default: 0 },
-    /** 取消按钮的文字提示 */
-    cancelText: { type: String, default: '取消' }
-};
-
-export type ActionSheetProps = ExtractPropTypes<typeof ActionSheetProps>;
+import { type ExtractPropTypes, type PropType } from 'vue';
+import type { ActionSheetItem, ActionSheetTips } from '../../types/global';
+
+/**
+ * actionSheet 操作菜单
+ * @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
+ */
+export const ActionSheetProps = {
+    /** 点击遮罩是否可以关闭actionsheet */
+    maskCloseAble: { type: Boolean, default: true },
+    /** 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx */
+    list: {
+        type: Array as unknown as PropType<ActionSheetItem[]>,
+        default: () => []
+    },
+    /** 顶部的提示文字 */
+    tips: {
+        type: Object as unknown as PropType<ActionSheetTips>,
+        default: () => ({ text: '', color: '', fontSize: '26' })
+    },
+    /** 底部的取消按钮 */
+    cancelBtn: { type: Boolean, default: true },
+    /** 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 */
+    safeAreaInsetBottom: { type: Boolean, default: false },
+    /** 通过双向绑定控制组件的弹出与收起 */
+    modelValue: { type: Boolean, default: false },
+    /** 弹出的顶部圆角值 */
+    borderRadius: { type: [String, Number], default: 0 },
+    /** 弹出的z-index值 */
+    zIndex: { type: [String, Number], default: 0 },
+    /** 取消按钮的文字提示 */
+    cancelText: { type: String, default: '取消' }
+};
+
+export type ActionSheetProps = ExtractPropTypes<typeof ActionSheetProps>;

package/components/u-action-sheet/u-action-sheet.vue

@@ -1,160 +1,160 @@
-<template>
-    <u-popup
-        mode="bottom"
-        :border-radius="borderRadius"
-        :popup="false"
-        v-model="popupValue"
-        :maskCloseAble="maskCloseAble"
-        length="auto"
-        :safeAreaInsetBottom="safeAreaInsetBottom"
-        @close="popupClose"
-        :z-index="uZIndex"
-    >
-        <view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">
-            {{ tips.text }}
-        </view>
-        <block v-for="(item, index) in list" :key="index">
-            <view
-                @touchmove.stop.prevent
-                @tap="itemClick(index)"
-                :style="[itemStyle(index)]"
-                class="u-action-sheet-item u-line-1"
-                :class="[index < list.length - 1 ? 'u-border-bottom' : '']"
-                :hover-stay-time="150"
-            >
-                <text>{{ item.text }}</text>
-                <text class="u-action-sheet-item__subtext u-line-1" v-if="item.subText">{{ item.subText }}</text>
-            </view>
-        </block>
-        <view class="u-gab" v-if="cancelBtn"> </view>
-        <view @touchmove.stop.prevent class="u-actionsheet-cancel u-action-sheet-item" hover-class="u-hover-class" :hover-stay-time="150" v-if="cancelBtn" @tap="close">{{
-            cancelText
-        }}</view>
-    </u-popup>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { $u } from '../..';
-import { ActionSheetProps } from './types';
-
-defineOptions({
-    name: 'u-action-sheet'
-});
-
-/**
- * actionSheet 操作菜单
- * @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
- * @tutorial https://uviewpro.cn/zh/components/actionSheet.html
- * @property {Array<{ text: string; subText?: string; color?: string; fontSize?: string; disabled?: boolean }>} list 按钮的文字数组，见官方文档示例
- * @property {{text: string; color?: string; fontSize?: string}} tips 顶部的提示文字，见官方文档示例
- * @property {String} cancel-text 取消按钮的提示文字
- * @property {Boolean} cancel-btn 是否显示底部的取消按钮（默认true）
- * @property {Number String} border-radius 弹出部分顶部左右的圆角值，单位rpx（默认0）
- * @property {Boolean} mask-close-able 点击遮罩是否可以关闭（默认true）
- * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
- * @property {Number String} z-index z-index值（默认1075）
- * @property {String} cancel-text 取消按钮的提示文字
- * @event {Function} click 点击ActionSheet列表项时触发
- * @event {Function} close 点击取消按钮时触发
- * @example <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
- */
-
-const props = defineProps(ActionSheetProps);
-
-const emit = defineEmits(['update:modelValue', 'click', 'close']);
-
-const popupValue = computed({
-    get: () => props.modelValue,
-    set: (val: boolean) => emit('update:modelValue', val)
-});
-
-// 顶部提示的样式
-const tipsStyle = computed(() => {
-    let style: Record<string, string> = {};
-    if (props.tips.color) style.color = props.tips.color;
-    if (props.tips.fontSize) style.fontSize = props.tips.fontSize + 'rpx';
-    return style;
-});
-
-// 操作项目的样式
-const itemStyle = (index: number) => {
-    let style: Record<string, string> = {};
-    if (props.list[index]?.color) style.color = props.list[index].color;
-    if (props.list[index]?.fontSize) style.fontSize = props.list[index].fontSize + 'rpx';
-    // 选项被禁用的样式
-    if (props.list[index]?.disabled) style.color = '#c0c4cc';
-    return style;
-};
-
-// 计算z-index
-const uZIndex = computed(() => {
-    // 如果用户有传递z-index值，优先使用
-    return props.zIndex ? props.zIndex : $u.zIndex.popup;
-});
-
-/**
- * 点击取消按钮
- */
-function close() {
-    // 发送input事件，并不会作用于父组件，而是要设置组件内部通过props传递的value参数
-    // 这是一个vue发送事件的特殊用法
-    popupClose();
-    emit('close');
-}
-
-/**
- * 弹窗关闭
- */
-function popupClose() {
-    emit('update:modelValue', false);
-}
-
-/**
- * 点击某一个item
- * @param index 选项索引
- */
-function itemClick(index: number) {
-    // disabled的项禁止点击
-    if (props.list[index]?.disabled) return;
-    emit('click', index);
-    emit('update:modelValue', false);
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-tips {
-    font-size: 26rpx;
-    text-align: center;
-    padding: 34rpx 0;
-    line-height: 1;
-    color: $u-tips-color;
-}
-
-.u-action-sheet-item {
-    @include vue-flex;
-    line-height: 1;
-    justify-content: center;
-    align-items: center;
-    font-size: 32rpx;
-    padding: 34rpx 0;
-    flex-direction: column;
-}
-
-.u-action-sheet-item__subtext {
-    font-size: 24rpx;
-    color: $u-tips-color;
-    margin-top: 20rpx;
-}
-
-.u-gab {
-    height: 12rpx;
-    background-color: rgb(234, 234, 236);
-}
-
-.u-actionsheet-cancel {
-    color: $u-main-color;
-}
-</style>
+<template>
+    <u-popup
+        mode="bottom"
+        :border-radius="borderRadius"
+        :popup="false"
+        v-model="popupValue"
+        :maskCloseAble="maskCloseAble"
+        length="auto"
+        :safeAreaInsetBottom="safeAreaInsetBottom"
+        @close="popupClose"
+        :z-index="uZIndex"
+    >
+        <view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">
+            {{ tips.text }}
+        </view>
+        <block v-for="(item, index) in list" :key="index">
+            <view
+                @touchmove.stop.prevent
+                @tap="itemClick(index)"
+                :style="[itemStyle(index)]"
+                class="u-action-sheet-item u-line-1"
+                :class="[index < list.length - 1 ? 'u-border-bottom' : '']"
+                :hover-stay-time="150"
+            >
+                <text>{{ item.text }}</text>
+                <text class="u-action-sheet-item__subtext u-line-1" v-if="item.subText">{{ item.subText }}</text>
+            </view>
+        </block>
+        <view class="u-gab" v-if="cancelBtn"> </view>
+        <view @touchmove.stop.prevent class="u-actionsheet-cancel u-action-sheet-item" hover-class="u-hover-class" :hover-stay-time="150" v-if="cancelBtn" @tap="close">{{
+            cancelText
+        }}</view>
+    </u-popup>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { $u } from '../..';
+import { ActionSheetProps } from './types';
+
+defineOptions({
+    name: 'u-action-sheet'
+});
+
+/**
+ * actionSheet 操作菜单
+ * @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
+ * @tutorial https://uviewpro.cn/zh/components/actionSheet.html
+ * @property {Array<{ text: string; subText?: string; color?: string; fontSize?: string; disabled?: boolean }>} list 按钮的文字数组，见官方文档示例
+ * @property {{text: string; color?: string; fontSize?: string}} tips 顶部的提示文字，见官方文档示例
+ * @property {String} cancel-text 取消按钮的提示文字
+ * @property {Boolean} cancel-btn 是否显示底部的取消按钮（默认true）
+ * @property {Number String} border-radius 弹出部分顶部左右的圆角值，单位rpx（默认0）
+ * @property {Boolean} mask-close-able 点击遮罩是否可以关闭（默认true）
+ * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
+ * @property {Number String} z-index z-index值（默认1075）
+ * @property {String} cancel-text 取消按钮的提示文字
+ * @event {Function} click 点击ActionSheet列表项时触发
+ * @event {Function} close 点击取消按钮时触发
+ * @example <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
+ */
+
+const props = defineProps(ActionSheetProps);
+
+const emit = defineEmits(['update:modelValue', 'click', 'close']);
+
+const popupValue = computed({
+    get: () => props.modelValue,
+    set: (val: boolean) => emit('update:modelValue', val)
+});
+
+// 顶部提示的样式
+const tipsStyle = computed(() => {
+    let style: Record<string, string> = {};
+    if (props.tips.color) style.color = props.tips.color;
+    if (props.tips.fontSize) style.fontSize = props.tips.fontSize + 'rpx';
+    return style;
+});
+
+// 操作项目的样式
+const itemStyle = (index: number) => {
+    let style: Record<string, string> = {};
+    if (props.list[index]?.color) style.color = props.list[index].color;
+    if (props.list[index]?.fontSize) style.fontSize = props.list[index].fontSize + 'rpx';
+    // 选项被禁用的样式
+    if (props.list[index]?.disabled) style.color = '#c0c4cc';
+    return style;
+};
+
+// 计算z-index
+const uZIndex = computed(() => {
+    // 如果用户有传递z-index值，优先使用
+    return props.zIndex ? props.zIndex : $u.zIndex.popup;
+});
+
+/**
+ * 点击取消按钮
+ */
+function close() {
+    // 发送input事件，并不会作用于父组件，而是要设置组件内部通过props传递的value参数
+    // 这是一个vue发送事件的特殊用法
+    popupClose();
+    emit('close');
+}
+
+/**
+ * 弹窗关闭
+ */
+function popupClose() {
+    emit('update:modelValue', false);
+}
+
+/**
+ * 点击某一个item
+ * @param index 选项索引
+ */
+function itemClick(index: number) {
+    // disabled的项禁止点击
+    if (props.list[index]?.disabled) return;
+    emit('click', index);
+    emit('update:modelValue', false);
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-tips {
+    font-size: 26rpx;
+    text-align: center;
+    padding: 34rpx 0;
+    line-height: 1;
+    color: $u-tips-color;
+}
+
+.u-action-sheet-item {
+    @include vue-flex;
+    line-height: 1;
+    justify-content: center;
+    align-items: center;
+    font-size: 32rpx;
+    padding: 34rpx 0;
+    flex-direction: column;
+}
+
+.u-action-sheet-item__subtext {
+    font-size: 24rpx;
+    color: $u-tips-color;
+    margin-top: 20rpx;
+}
+
+.u-gab {
+    height: 12rpx;
+    background-color: rgb(234, 234, 236);
+}
+
+.u-actionsheet-cancel {
+    color: $u-main-color;
+}
+</style>

package/components/u-alert-tips/types.ts

@@ -1,39 +1,39 @@
-import { type ExtractPropTypes, type PropType } from 'vue';
-import type { ThemeType } from '../../types/global';
-
-/**
- * alertTips 警告提示
- * @description 警告提示，展现需要关注的信息
- */
-export const AlertTipsProps = {
-    /** 显示文字 */
-    title: { type: String, default: '' },
-    /** 主题，success/warning/info/error */
-    type: { type: String as PropType<ThemeType>, default: 'warning' },
-    /** 辅助性文字 */
-    description: { type: String, default: '' },
-    /** 是否可关闭 */
-    closeAble: { type: Boolean, default: false },
-    /** 关闭按钮自定义文本 */
-    closeText: { type: String, default: '' },
-    /** 是否显示图标 */
-    showIcon: { type: Boolean, default: false },
-    /** 文字颜色，如果定义了color值，icon会失效 */
-    color: { type: String, default: '' },
-    /** 背景颜色 */
-    bgColor: { type: String, default: '' },
-    /** 边框颜色 */
-    borderColor: { type: String, default: '' },
-    /** 是否显示 */
-    show: { type: Boolean, default: true },
-    /** 左边显示的icon */
-    icon: { type: String, default: '' },
-    /** icon的样式 */
-    iconStyle: { type: Object, default: () => ({}) },
-    /** 标题的样式 */
-    titleStyle: { type: Object, default: () => ({}) },
-    /** 描述文字的样式 */
-    descStyle: { type: Object, default: () => ({}) }
-};
-
-export type AlertTipsProps = ExtractPropTypes<typeof AlertTipsProps>;
+import { type ExtractPropTypes, type PropType } from 'vue';
+import type { ThemeType } from '../../types/global';
+
+/**
+ * alertTips 警告提示
+ * @description 警告提示，展现需要关注的信息
+ */
+export const AlertTipsProps = {
+    /** 显示文字 */
+    title: { type: String, default: '' },
+    /** 主题，success/warning/info/error */
+    type: { type: String as PropType<ThemeType>, default: 'warning' },
+    /** 辅助性文字 */
+    description: { type: String, default: '' },
+    /** 是否可关闭 */
+    closeAble: { type: Boolean, default: false },
+    /** 关闭按钮自定义文本 */
+    closeText: { type: String, default: '' },
+    /** 是否显示图标 */
+    showIcon: { type: Boolean, default: false },
+    /** 文字颜色，如果定义了color值，icon会失效 */
+    color: { type: String, default: '' },
+    /** 背景颜色 */
+    bgColor: { type: String, default: '' },
+    /** 边框颜色 */
+    borderColor: { type: String, default: '' },
+    /** 是否显示 */
+    show: { type: Boolean, default: true },
+    /** 左边显示的icon */
+    icon: { type: String, default: '' },
+    /** icon的样式 */
+    iconStyle: { type: Object, default: () => ({}) },
+    /** 标题的样式 */
+    titleStyle: { type: Object, default: () => ({}) },
+    /** 描述文字的样式 */
+    descStyle: { type: Object, default: () => ({}) }
+};
+
+export type AlertTipsProps = ExtractPropTypes<typeof AlertTipsProps>;