uview-ultra-plus 1.0.0

package/uview-ultra/components/up-box/up-box.uvue

@@ -0,0 +1,137 @@
+<template>
+	<view class="up-box" :style="[{height: height}, $upAddStyle(customStyle)]">
+        <view class="up-box__left" :style="{borderRadius: borderRadius, backgroundColor: bgColors[0]}">
+            <slot name="left">
+                <view class="flex flex-row items-center justify-center">
+                    <up-icon size="36" :name="leftIcon"></up-icon>
+                    <text class="ml-2 text-16px">{{leftTitle}}</text>
+                </view>
+            </slot>
+        </view>
+        <view class="up-box__gap" :style="{width: gap, height: height}"></view>
+        <view class="up-box__right">
+            <view class="up-box__right-top" :style="{borderRadius: borderRadius, backgroundColor: bgColors[1]}">
+                <slot name="rightTop">
+                    <view class="flex flex-row items-center justify-center">
+                        <up-icon size="36" :name="rightTopIcon"></up-icon>
+                        <text class="ml-2 text-15px">{{rightTopTitle}}</text>
+                    </view>
+                </slot>
+            </view>
+            <view class="up-box__right-gap" :style="{height: gap}"></view>
+            <view class="up-box__right-bottom" :style="{borderRadius: borderRadius, backgroundColor: bgColors[2]}">
+                <slot name="rightBottom">
+                    <view class="flex flex-row items-center justify-center">
+                        <up-icon size="36" :name="rightBottomIcon"></up-icon>
+                        <text class="ml-2 text-15px">{{rightBottomTitle}}</text>
+                    </view>
+                </slot>
+            </view>
+        </view>
+	</view>
+</template>
+
+<script setup lang="uts">
+    import type { PropType } from 'vue'
+	import { addStyle } from '../../libs/function/index.uts'
+    import defProps from './box.uts'
+	
+    // options
+	defineOptions({
+	  name: 'up-box'
+	})
+
+	const props = defineProps({
+		// 背景色
+		bgColors: {
+            type: Array as PropType<string[]>,
+			default: defProps.getArray<string>('box.bgColors')
+		},
+		// 高度
+		height: {
+			type: String,
+			default: () => defProps.getString('box.height')
+		},
+		// 圆角
+		borderRadius: {
+			type: String,
+			default: () => defProps.getString('box.borderRadius')
+		},
+		// 间隔
+		gap: {
+			type: String,
+			default: () => defProps.getString('box.gap')
+		},
+		// 左侧图标
+		leftIcon: {
+			type: String,
+			default: () => defProps.getString('box.leftIcon')
+		},
+		// 左侧文案
+		leftTitle: {
+			type: String,
+			default: () => defProps.getString('box.leftTitle')
+		},
+		// 右上图标
+		rightTopIcon: {
+			type: String,
+			default: () => defProps.getString('box.rightTopIcon')
+		},
+		// 右上文案
+		rightTopTitle: {
+			type: String,
+			default: () => defProps.getString('box.rightTopTitle')
+		},
+		// 右下图标
+		rightBottomIcon: {
+			type: String,
+			default: () => defProps.getString('box.rightBottomIcon')
+		},
+		// 右下文案
+		rightBottomTitle: {
+			type: String,
+			default: () => defProps.getString('box.rightBottomTitle')
+		}
+	});
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.up-box {
+        /* #ifndef APP-NVUE */
+        /* #endif */
+        @include flex();
+        flex: 1;
+
+		&__left {
+            @include flex();
+            justify-content: center;
+            align-items: center;
+            flex: 1;
+        }
+        &__gap {
+            @include flex();
+            flex-direction: column;
+        }
+        &__right {
+            @include flex();
+            flex-direction: column;
+            flex: 1;
+        }
+
+        &__right-top {
+            @include flex();
+            flex: 1;
+            justify-content: center;
+            align-items: center;
+        }
+
+        &__right-bottom {
+            @include flex();
+            flex: 1;
+            justify-content: center;
+            align-items: center;
+        }
+	}
+</style>

package/uview-ultra/components/up-box/up-box.vue

@@ -0,0 +1,107 @@
+<template>
+	<view class="up-box" :style="[{height: height}, addStyle(customStyle)]">
+        <view class="up-box__left" :style="{borderRadius: borderRadius, backgroundColor: bgColors[0]}">
+            <slot name="left">
+                <view class="flex flex-row items-center justify-center">
+                    <up-icon size="36" :name="leftIcon"></up-icon>
+                    <text class="ml-2 text-16px">{{leftTitle}}</text>
+                </view>
+            </slot>
+        </view>
+        <view class="up-box__gap" :style="{width: gap, height: height}"></view>
+        <view class="up-box__right">
+            <view class="up-box__right-top" :style="{borderRadius: borderRadius, backgroundColor: bgColors[1]}">
+                <slot name="rightTop">
+                    <view class="flex flex-row items-center justify-center">
+                        <up-icon size="36" :name="rightTopIcon"></up-icon>
+                        <text class="ml-2 text-15px">{{rightTopTitle}}</text>
+                    </view>
+                </slot>
+            </view>
+            <view class="up-box__right-gap" :style="{height: gap}"></view>
+            <view class="up-box__right-bottom" :style="{borderRadius: borderRadius, backgroundColor: bgColors[2]}">
+                <slot name="rightBottom">
+                    <view class="flex flex-row items-center justify-center">
+                        <up-icon size="36" :name="rightBottomIcon"></up-icon>
+                        <text class="ml-2 text-15px">{{rightBottomTitle}}</text>
+                    </view>
+                </slot>
+            </view>
+        </view>
+	</view>
+</template>
+
+<script>
+	import { props } from './props.js';
+	import { mpMixin } from '../../libs/mixin/mpMixin.js';
+	import { mixin } from '../../libs/mixin/mixin.js';
+	import { addStyle } from '../../libs/function/index.js';
+	import test from '../../libs/function/test.js';
+	/**
+	 * box 盒子
+	 * @description box盒子一般为左边一个盒子，右侧两个等高的半盒组成，常用于App首页座位重点突出。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/box.html
+	 * @property {Array}	bgColors			背景色
+	 * @property {String}	height			    高度
+     * @property {String}	borderRadius		圆角
+	 * @property {Object}   customStyle		    定义需要用到的外部样式
+	 * 
+	 * @event {Function}			click			点击cell列表时触发
+	 * @example <up-box colors=['blue', 'red', 'yellow'] height="200px"></up-box>
+	 */
+	export default {
+		name: 'up-box',
+		data() {
+			return {
+			}
+		},
+		mixins: [props],
+		computed: {
+		},
+		emits: [],
+		methods: {
+			addStyle,
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.up-box {
+        /* #ifndef APP-NVUE */
+        /* #endif */
+        @include flex();
+        flex: 1;
+
+		&__left {
+            @include flex();
+            justify-content: center;
+            align-items: center;
+            flex: 1;
+        }
+        &__gap {
+            @include flex();
+            flex-direction: column;
+        }
+        &__right {
+            @include flex();
+            flex-direction: column;
+            flex: 1;
+        }
+
+        &__right-top {
+            @include flex();
+            flex: 1;
+            justify-content: center;
+            align-items: center;
+        }
+
+        &__right-bottom {
+            @include flex();
+            flex: 1;
+            justify-content: center;
+            align-items: center;
+        }
+	}
+</style>

package/uview-ultra/components/up-button/button.js

@@ -0,0 +1,42 @@
+/*
+ * @Author       : LQ,jry
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-20 14:20:58
+ * @FilePath     : /uview-ultra/libs/config/props/button.js
+ */
+export default {
+    // button组件
+    button: {
+        hairline: false,
+        type: 'info',
+        size: 'normal',
+        shape: 'square',
+        plain: false,
+        disabled: false,
+        loading: false,
+        loadingText: '',
+        loadingMode: 'spinner',
+        loadingSize: 15,
+        openType: '',
+        formType: '',
+        appParameter: '',
+        hoverStopPropagation: true,
+        lang: 'en',
+        sessionFrom: '',
+        sendMessageTitle: '',
+        sendMessagePath: '',
+        sendMessageImg: '',
+        showMessageCard: false,
+        dataName: '',
+        throttleTime: 0,
+        hoverStartTime: 0,
+        hoverStayTime: 200,
+        text: '',
+        icon: '',
+        iconColor: '',
+        color: ''
+    }
+}

package/uview-ultra/components/up-button/button.uts

@@ -0,0 +1,42 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 12:27:20
+ * @FilePath     : /uview-ultra/libs/config/props/button.js
+ */
+export default {
+    // button组件
+    button: {
+        hairline: false,
+        type: 'info',
+        size: 'normal',
+        shape: 'square',
+        plain: false,
+        disabled: false,
+        loading: false,
+        loadingText: '',
+        loadingMode: 'spinner',
+        loadingSize: 15,
+        openType: '',
+        formType: '',
+        appParameter: '',
+        hoverStopPropagation: true,
+        lang: 'en',
+        sessionFrom: '',
+        sendMessageTitle: '',
+        sendMessagePath: '',
+        sendMessageImg: '',
+        showMessageCard: false,
+        dataName: '',
+        throttleTime: 0,
+        hoverStartTime: 0,
+        hoverStayTime: 200,
+        text: '',
+        icon: '',
+        iconColor: '',
+        color: ''
+    }
+} as UTSJSONObject

package/uview-ultra/components/up-button/props.js

@@ -0,0 +1,155 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+
+export const props = defineMixin({
+    props: {
+        // 是否细边框
+        hairline: {
+            type: Boolean,
+            default: () => defProps.button.hairline
+        },
+        // 按钮的预置样式，info，primary，error，warning，success
+        type: {
+            type: String,
+            default: () => defProps.button.type
+        },
+        // 按钮尺寸，large，normal，small，mini
+        size: {
+            type: String,
+            default: () => defProps.button.size
+        },
+        // 按钮形状，circle（两边为半圆），square（带圆角）
+        shape: {
+            type: String,
+            default: () => defProps.button.shape
+        },
+        // 按钮是否镂空
+        plain: {
+            type: Boolean,
+            default: () => defProps.button.plain
+        },
+        // 是否禁止状态
+        disabled: {
+            type: Boolean,
+            default: () => defProps.button.disabled
+        },
+        // 是否加载中
+        loading: {
+            type: Boolean,
+            default: () => defProps.button.loading
+        },
+        // 加载中提示文字
+        loadingText: {
+            type: [String, Number],
+            default: () => defProps.button.loadingText
+        },
+        // 加载状态图标类型
+        loadingMode: {
+            type: String,
+            default: () => defProps.button.loadingMode
+        },
+        // 加载图标大小
+        loadingSize: {
+            type: [String, Number],
+            default: () => defProps.button.loadingSize
+        },
+        // 开放能力，具体请看uniapp稳定关于button组件部分说明
+        // https://uniapp.dcloud.io/component/button
+        openType: {
+            type: String,
+            default: () => defProps.button.openType
+        },
+        // 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+        // 取值为submit（提交表单），reset（重置表单）
+        formType: {
+            type: String,
+            default: () => defProps.button.formType
+        },
+        // 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
+        // 只微信小程序、QQ小程序有效
+        appParameter: {
+            type: String,
+            default: () => defProps.button.appParameter
+        },
+        // 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效
+        hoverStopPropagation: {
+            type: Boolean,
+            default: () => defProps.button.hoverStopPropagation
+        },
+        // 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效
+        lang: {
+            type: String,
+            default: () => defProps.button.lang
+        },
+        // 会话来源，open-type="contact"时有效。只微信小程序有效
+        sessionFrom: {
+            type: String,
+            default: () => defProps.button.sessionFrom
+        },
+        // 会话内消息卡片标题，open-type="contact"时有效
+        // 默认当前标题，只微信小程序有效
+        sendMessageTitle: {
+            type: String,
+            default: () => defProps.button.sendMessageTitle
+        },
+        // 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
+        // 默认当前分享路径，只微信小程序有效
+        sendMessagePath: {
+            type: String,
+            default: () => defProps.button.sendMessagePath
+        },
+        // 会话内消息卡片图片，open-type="contact"时有效
+        // 默认当前页面截图，只微信小程序有效
+        sendMessageImg: {
+            type: String,
+            default: () => defProps.button.sendMessageImg
+        },
+        // 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，
+        // 用户点击后可以快速发送小程序消息，open-type="contact"时有效
+        showMessageCard: {
+            type: Boolean,
+            default: () => defProps.button.showMessageCard
+        },
+        // 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+        dataName: {
+            type: String,
+            default: () => defProps.button.dataName
+        },
+        // 节流，一定时间内只能触发一次
+        throttleTime: {
+            type: [String, Number],
+            default: () => defProps.button.throttleTime
+        },
+        // 按住后多久出现点击态，单位毫秒
+        hoverStartTime: {
+            type: [String, Number],
+            default: () => defProps.button.hoverStartTime
+        },
+        // 手指松开后点击态保留时间，单位毫秒
+        hoverStayTime: {
+            type: [String, Number],
+            default: () => defProps.button.hoverStayTime
+        },
+        // 按钮文字，之所以通过props传入，是因为slot传入的话
+        // nvue中无法控制文字的样式
+        text: {
+            type: [String, Number],
+            default: () => defProps.button.text
+        },
+        // 按钮图标
+        icon: {
+            type: String,
+            default: () => defProps.button.icon
+        },
+        // 按钮图标
+        iconColor: {
+            type: String,
+            default: () => defProps.button.icon
+        },
+        // 按钮颜色，支持传入linear-gradient渐变色
+        color: {
+            type: String,
+            default: () => defProps.button.color
+        }
+    }
+})

package/uview-ultra/components/up-button/props.uts

@@ -0,0 +1,164 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 12:27:20
+ */
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from './button.uts'
+let btnProp = defProps['button'] as UTSJSONObject
+
+export const propsButton = defineMixin({
+    props: {
+        // 是否细边框
+        hairline: {
+            type: Boolean,
+            default: btnProp['hairline']
+        },
+        // 按钮的预置样式，info，primary，error，warning，success
+        type: {
+            type: String,
+            default: btnProp['type']
+        },
+        // 按钮尺寸，large，normal，small，mini
+        size: {
+            type: String,
+            default: btnProp['size']
+        },
+        // 按钮形状，circle（两边为半圆），square（带圆角）
+        shape: {
+            type: String,
+            default: btnProp['shape']
+        },
+        // 按钮是否镂空
+        plain: {
+            type: Boolean,
+            default: btnProp['plain']
+        },
+        // 是否禁止状态
+        disabled: {
+            type: Boolean,
+            default: btnProp['disabled']
+        },
+        // 是否加载中
+        loading: {
+            type: Boolean,
+            default: btnProp['loading']
+        },
+        // 加载中提示文字
+        loadingText: {
+            type: [String],
+            default: btnProp['loadingText']
+        },
+        // 加载状态图标类型
+        loadingMode: {
+            type: String,
+            default: btnProp['loadingMode']
+        },
+        // 加载图标大小
+        loadingSize: {
+            type: Number,
+            default: btnProp['loadingSize']
+        },
+        // 开放能力，具体请看uniapp稳定关于button组件部分说明
+        // https://uniapp.dcloud.io/component/button
+        openType: {
+            type: String,
+            default: btnProp['openType']
+        },
+        // 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+        // 取值为submit（提交表单），reset（重置表单）
+        formType: {
+            type: String,
+            default: btnProp['formType']
+        },
+        // 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
+        // 只微信小程序、QQ小程序有效
+        appParameter: {
+            type: String,
+            default: btnProp['appParameter']
+        },
+        // 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效
+        hoverStopPropagation: {
+            type: Boolean,
+            default: btnProp['hoverStopPropagation']
+        },
+        // 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效
+        lang: {
+            type: String,
+            default: btnProp['lang']
+        },
+        // 会话来源，open-type="contact"时有效。只微信小程序有效
+        sessionFrom: {
+            type: String,
+            default: btnProp['sessionFrom']
+        },
+        // 会话内消息卡片标题，open-type="contact"时有效
+        // 默认当前标题，只微信小程序有效
+        sendMessageTitle: {
+            type: String,
+            default: btnProp['sendMessageTitle']
+        },
+        // 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
+        // 默认当前分享路径，只微信小程序有效
+        sendMessagePath: {
+            type: String,
+            default: btnProp['sendMessagePath']
+        },
+        // 会话内消息卡片图片，open-type="contact"时有效
+        // 默认当前页面截图，只微信小程序有效
+        sendMessageImg: {
+            type: String,
+            default: btnProp['sendMessageImg']
+        },
+        // 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，
+        // 用户点击后可以快速发送小程序消息，open-type="contact"时有效
+        showMessageCard: {
+            type: Boolean,
+            default: btnProp['showMessageCard']
+        },
+        // 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+        dataName: {
+            type: String,
+            default: btnProp['dataName']
+        },
+        // 节流，一定时间内只能触发一次
+        throttleTime: {
+            type: Number,
+            default: btnProp['throttleTime']
+        },
+        // 按住后多久出现点击态，单位毫秒
+        hoverStartTime: {
+            type: Number,
+            default: btnProp['hoverStartTime']
+        },
+        // 手指松开后点击态保留时间，单位毫秒
+        hoverStayTime: {
+            type: Number,
+            default: btnProp['hoverStayTime']
+        },
+        // 按钮文字，之所以通过props传入，是因为slot传入的话
+        // nvue中无法控制文字的样式
+        text: {
+            type: [String],
+            default: btnProp['text']
+        },
+        // 按钮图标
+        icon: {
+            type: String,
+            default: btnProp['icon']
+        },
+        // 按钮图标
+        iconColor: {
+            type: String,
+            default: btnProp['iconColor']
+        },
+        // 按钮颜色，支持传入linear-gradient渐变色
+        color: {
+            type: String,
+            default: btnProp['color']
+        }
+    }
+});