uview-ultra-plus 1.0.0

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

@@ -0,0 +1,304 @@
+<template>
+	<view class="up-toast">
+		<up-overlay
+			:show="isShow"
+			:zIndex="tmpConfig.overlay ? tmpConfig.zIndex : -1"
+			:custom-style="overlayStyle"
+		>
+			<view
+				class="up-toast__content"
+				:style="[contentStyle]"
+				:class="['up-type-' + tmpConfig.type, (tmpConfig.type === 'loading' || tmpConfig.loading) ?  'up-toast__content--loading' : '']"
+			>
+				<up-loading-icon
+					v-if="tmpConfig.type === 'loading'"
+					mode="circle"
+					color="rgb(255, 255, 255)"
+					inactiveColor="rgb(120, 120, 120)"
+					size="25"
+				></up-loading-icon>
+				<up-icon
+					v-else-if="tmpConfig.type !== 'defalut' && iconName"
+					:name="iconName"
+					size="17"
+					:color="tmpConfig.type"
+					:customStyle="iconStyle"
+				></up-icon>
+				<up-gap
+					v-if="tmpConfig.type === 'loading' || tmpConfig.loading"
+					height="12"
+					bgColor="transparent"
+				></up-gap>
+				<text
+					class="up-toast__content__text"
+					:class="['up-toast__content__text--' + tmpConfig.type]"
+					style="max-width: 400rpx;"
+				>{{ tmpConfig.message }}</text>
+			</view>
+		</up-overlay>
+	</view>
+</template>
+
+<script>
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { os, getWindowInfo, deepMerge, type2icon } from '../../libs/function/index';
+	import color from '../../libs/config/color';
+	import { hexToRgb } from '../../libs/function/colorGradient';
+	/**
+	 * toast 消息提示
+	 * @description 此组件表现形式类似uni的uni.showToastAPI，但也有不同的地方。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/toast.html
+	 * @property {String | Number}	zIndex		toast展示时的zIndex值 (默认 10090 )
+	 * @property {Boolean}			loading		是否加载中 （默认 false ）
+	 * @property {String | Number}	message		显示的文字内容
+	 * @property {String}			icon		图标，或者绝对路径的图片
+	 * @property {String}			type		主题类型 （默认 default）
+	 * @property {Boolean}			show		是否显示该组件 （默认 false）
+	 * @property {Boolean}			overlay		是否显示透明遮罩，防止点击穿透 （默认 true ）
+	 * @property {String}			position	位置 （默认 'center' ）
+	 * @property {Object}			params		跳转的参数 
+	 * @property {String | Number}  duration	展示时间，单位ms （默认 2000 ）
+	 * @property {Boolean}			isTab		是否返回的为tab页面 （默认 false ）
+	 * @property {String}			url			toast消失后是否跳转页面，有则跳转，优先级高于back参数 
+	 * @property {Function}			complete	执行完后的回调函数 
+	 * @property {Boolean}			back		结束toast是否自动返回上一页 （默认 false ）
+	 * @property {Object}			customStyle	组件的样式，对象形式
+	 * @event {Function} show 显示toast，如需一进入页面就显示toast，请在onReady生命周期调用
+	 * @example <up-toast ref="uToast" />
+	 */
+	export default {
+		name: 'up-toast',
+		mixins: [mpMixin, mixin],
+		data() {
+			return {
+				isShow: false,
+				timer: null, // 定时器
+				config: {
+					message: '', // 显示文本
+					type: '', // 主题类型，primary，success，error，warning，black
+					zIndex: 10090, // 层级
+					duration: 2000, // 显示的时间，毫秒
+					icon: true, // 显示的图标
+					position: 'center', // toast出现的位置
+					complete: null, // 执行完后的回调函数
+					overlay: true, // 是否防止触摸穿透
+					loading: false, // 是否加载中状态
+				},
+				tmpConfig: {}, // 将用户配置和内置配置合并后的临时配置变量
+			}
+		},
+		computed: {
+			iconName() {
+				// 只有不为none，并且type为error|warning|succes|info时候，才显示图标
+				if(!this.tmpConfig.icon || this.tmpConfig.icon == 'none') {
+					return '';
+				}
+				if (this.tmpConfig.icon === true) {
+					if (['error', 'warning', 'success', 'primary'].includes(this.tmpConfig.type)) {
+						return type2icon(this.tmpConfig.type)
+					} else {
+						return ''
+					}
+				} else {
+					return this.tmpConfig.icon
+				}
+			},
+			overlayStyle() {
+				const style = {
+					justifyContent: 'center',
+					alignItems: 'center',
+					display: 'flex'
+				}
+				// 将遮罩设置为100%透明度，避免出现灰色背景
+				style.backgroundColor = 'rgba(0, 0, 0, 0)'
+				return style
+			},
+			iconStyle() {
+				const style = {}
+				// 图标需要一个右边距，以跟右边的文字有隔开的距离
+				style.marginRight = '4px'
+				// #ifdef APP-NVUE
+				// iOSAPP下，图标有1px的向下偏移，这里进行修正
+				if (os() === 'ios') {
+					style.marginTop = '-1px'
+				}
+				// #endif
+				return style
+			},
+			loadingIconColor() {
+				let colorTmp = 'rgb(255, 255, 255)'
+				if (['error', 'warning', 'success', 'primary'].includes(this.tmpConfig.type)) {
+					// loading-icon组件内部会对color参数进行一个透明度处理，该方法要求传入的颜色值
+					// 必须为rgb格式的，所以这里做一个处理
+					colorTmp = hexToRgb(color[this.tmpConfig.type])
+				}
+				return colorTmp
+			},
+			// 内容盒子的样式
+			contentStyle() {
+				const windowHeight = getWindowInfo().windowHeight, style = {}
+				let value = 0
+				// 根据top和bottom，对Y轴进行窗体高度的百分比偏移
+				if(this.tmpConfig.position === 'top') {
+					value = - windowHeight * 0.25
+				} else if(this.tmpConfig.position === 'bottom') {
+					value = windowHeight * 0.25
+				}
+				style.transform = `translateY(${value}px)`
+				return style
+			}
+		},
+		created() {
+			// 通过主题的形式调用toast，批量生成方法函数
+			['primary', 'success', 'error', 'warning', 'default', 'loading'].map(item => {
+				this[item] = message => this.show({
+					type: item,
+					message
+				})
+			})
+		},
+		methods: {
+			// 显示toast组件，由父组件通过this.$refs.xxx.show(options)形式调用
+			show(options) {
+				// 不将结果合并到this.config变量，避免多次调用up-toast，前后的配置造成混乱
+				this.tmpConfig = deepMerge(this.config, options)
+				// 清除定时器
+				this.clearTimer()
+				this.isShow = true
+				// -1时不自动关闭
+				if (this.tmpConfig.duration !== -1) {
+					this.timer = setTimeout(() => {
+						// 倒计时结束，清除定时器，隐藏toast组件
+						this.clearTimer()
+						// 判断是否存在callback方法，如果存在就执行
+						typeof(this.tmpConfig.complete) === 'function' && this.tmpConfig.complete()
+					}, this.tmpConfig.duration)
+				}
+			},
+			// 隐藏toast组件，由父组件通过this.$refs.xxx.hide()形式调用
+			hide() {
+				this.clearTimer()
+			},
+			clearTimer() {
+				this.isShow = false
+				// 清除定时器
+				clearTimeout(this.timer)
+				this.timer = null
+			}
+		},
+		beforeUnmount() {
+			this.clearTimer()
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+
+	$up-toast-color:#fff !default;
+	$up-toast-border-radius:4px !default;
+	$up-toast-border-background-color:#585858 !default;
+	$up-toast-border-font-size:14px !default;
+	$up-toast-border-padding:12px 20px !default;
+	$up-toast-loading-border-padding: 20px 20px !default;
+	$up-toast-content-text-color:#fff !default;
+	$up-toast-content-text-font-size:15px !default;
+	$up-toast-up-icon:10rpx !default;
+	$up-toast-up-type-primary-color:$up-primary !default;
+	$up-toast-up-type-primary-background-color:#ecf5ff !default;
+	$up-toast-up-type-primary-border-color:rgb(215, 234, 254) !default;
+	$up-toast-up-type-primary-border-width:1px !default;
+	$up-toast-up-type-success-color: $up-success !default;
+	$up-toast-up-type-success-background-color: #dbf1e1 !default;
+	$up-toast-up-type-success-border-color: #BEF5C8 !default;
+	$up-toast-up-type-success-border-width: 1px !default;
+	$up-toast-up-type-error-color:$up-error !default;
+	$up-toast-up-type-error-background-color:#fef0f0 !default;
+	$up-toast-up-type-error-border-color:#fde2e2 !default;
+	$up-toast-up-type-error-border-width: 1px !default;
+	$up-toast-up-type-warning-color:$up-warning !default;
+	$up-toast-up-type-warning-background-color:#fdf6ec !default;
+	$up-toast-up-type-warning-border-color:#faecd8 !default;
+	$up-toast-up-type-warning-border-width: 1px !default;
+	$up-toast-up-type-default-color:#fff !default;
+	$up-toast-up-type-default-background-color:#585858 !default;
+
+	.up-toast {
+		&__content {
+			@include flex;
+			padding: $up-toast-border-padding;
+			border-radius: $up-toast-border-radius;
+			background-color: $up-toast-border-background-color;
+			color: $up-toast-color;
+			align-items: center;
+			/* #ifndef APP-NVUE */
+			max-width: 600rpx;
+			/* #endif */
+			position: relative;
+
+			&--loading {
+				flex-direction: column;
+				padding: $up-toast-loading-border-padding;
+			}
+
+			&__text {
+				color: $up-toast-content-text-color;
+				font-size: $up-toast-content-text-font-size;
+				line-height: $up-toast-content-text-font-size;
+
+				&--default {
+					color: $up-toast-content-text-color;
+				}
+
+				&--error {
+					color: $up-error;
+				}
+
+				&--primary {
+					color: $up-primary;
+				}
+
+				&--success {
+					color: $up-success;
+				}
+
+				&--warning {
+					color: $up-warning;
+				}
+			}
+		}
+	}
+
+	.up-type-primary {
+		color: $up-toast-up-type-primary-color;
+		background-color: $up-toast-up-type-primary-background-color;
+		border-color: $up-toast-up-type-primary-border-color;
+		border-width: $up-toast-up-type-primary-border-width;
+	}
+
+	.up-type-success {
+		color: $up-toast-up-type-success-color;
+		background-color: $up-toast-up-type-success-background-color;
+		border-color: $up-toast-up-type-success-border-color;
+		border-width: 1px;
+	}
+
+	.up-type-error {
+		color: $up-toast-up-type-error-color;
+		background-color: $up-toast-up-type-error-background-color;
+		border-color: $up-toast-up-type-error-border-color;
+		border-width: $up-toast-up-type-error-border-width;
+	}
+
+	.up-type-warning {
+		color: $up-toast-up-type-warning-color;
+		background-color: $up-toast-up-type-warning-background-color;
+		border-color: $up-toast-up-type-warning-border-color;
+		border-width: 1px;
+	}
+
+	.up-type-default {
+		color: $up-toast-up-type-default-color;
+		background-color: $up-toast-up-type-default-background-color;
+	}
+</style>

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

@@ -0,0 +1,41 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 是否展示工具条
+        show: {
+            type: Boolean,
+            default: () => defProps.toolbar.show
+        },
+        // 取消按钮的文字
+        cancelText: {
+            type: String,
+            default: () => defProps.toolbar.cancelText
+        },
+        // 确认按钮的文字
+        confirmText: {
+            type: String,
+            default: () => defProps.toolbar.confirmText
+        },
+        // 取消按钮的颜色
+        cancelColor: {
+            type: String,
+            default: () => defProps.toolbar.cancelColor
+        },
+        // 确认按钮的颜色
+        confirmColor: {
+            type: String,
+            default: () => defProps.toolbar.confirmColor
+        },
+        // 标题文字
+        title: {
+            type: String,
+            default: () => defProps.toolbar.title
+        },
+        // 开启右侧插槽
+        rightSlot: {
+            type: Boolean,
+            default: false
+        }
+    }
+})

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

@@ -0,0 +1,43 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from './toolbar'
+let crtProp = defProps['toolbar'] as UTSJSONObject
+
+export const propsToolbar = defineMixin({
+    props: {
+        // 是否展示工具条
+        show: {
+            type: Boolean,
+            default: crtProp['show']
+        },
+        // 取消按钮的文字
+        cancelText: {
+            type: String,
+            default: crtProp['cancelText']
+        },
+        // 确认按钮的文字
+        confirmText: {
+            type: String,
+            default: crtProp['confirmText']
+        },
+        // 取消按钮的颜色
+        cancelColor: {
+            type: String,
+            default: crtProp['cancelColor']
+        },
+        // 确认按钮的颜色
+        confirmColor: {
+            type: String,
+            default: crtProp['confirmColor']
+        },
+        // 标题文字
+        title: {
+            type: String,
+            default: crtProp['title']
+        },
+        // 开启右侧插槽
+        rightSlot: {
+            type: Boolean,
+            default: false
+        }
+    }
+})

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

@@ -0,0 +1,21 @@
+/*
+ * @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/toolbar.js
+ */
+export default {
+    // toolbar 组件
+    toolbar: {
+        show: true,
+        cancelText: '取消',
+        confirmText: '确认',
+        cancelColor: '#909193',
+        confirmColor: '#3c9cff',
+        title: ''
+    }
+
+}

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

@@ -0,0 +1,20 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-08912 15:46:58
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-09-12 15:46:58
+ * @FilePath     : /uview-ultra/libs/config/props/toolbar
+ */
+export default {
+    // toolbar 组件
+    toolbar: {
+        show: true,
+        cancelText: '取消',
+        confirmText: '确认',
+        cancelColor: '#909193',
+        confirmColor: '#3c9cff',
+        title: ''
+    }
+} as UTSJSONObject

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

@@ -0,0 +1,125 @@
+<template>
+	<view
+		class="up-toolbar"
+		@touchmove.stop="noop"
+		v-if="show"
+	>
+		<view
+			class="up-toolbar__left"
+		>
+			<view
+				class="up-toolbar__cancel__wrapper"
+				hover-class="up-hover-class"
+			>
+				<text
+					class="up-toolbar__wrapper__cancel"
+					@tap="cancel"
+					:style="{
+						color: cancelColor
+					}"
+				>{{ cancelText }}</text>
+			</view>
+		</view>
+		<text
+			class="up-toolbar__title up-line-1"
+			v-if="title"
+		>{{ title }}</text>
+		<view
+			class="up-toolbar__right"
+		>
+			<view
+				v-if="!rightSlot"
+				class="up-toolbar__confirm__wrapper"
+				hover-class="up-hover-class"
+			>
+				<text
+					class="up-toolbar__wrapper__confirm"
+					@tap="confirm"
+					:style="{
+					color: confirmColor
+				}"
+				>{{ confirmText }}</text>
+			</view>
+			<template v-else>
+				<slot name="right">
+				</slot>
+			</template>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { propsToolbar } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	/**
+	 * Toolbar 工具条
+	 * @description 
+	 * @tutorial https://ijry.github.io/uview-plus/components/toolbar.html
+	 * @property {Boolean}	show			是否展示工具条（默认 true ）
+	 * @property {String}	cancelText		取消按钮的文字（默认 '取消' ）
+	 * @property {String}	confirmText		确认按钮的文字（默认 '确认' ）
+	 * @property {String}	cancelColor		取消按钮的颜色（默认 '#909193' ）
+	 * @property {String}	confirmColor	确认按钮的颜色（默认 '#3c9cff' ）
+	 * @property {String}	title			标题文字
+	 * @event {Function} 
+	 * @example 
+	 */
+	export default {
+		name: 'up-toolbar',
+		mixins: [mpMixin, mixin, propsToolbar],
+		emits: ["confirm", "cancel"],
+		created() {
+			// console.log(this.$slots)
+		},
+		methods: {
+			// 点击取消按钮
+			cancel(): void {
+				this.$emit('cancel')
+			},
+			// 点击确定按钮
+			confirm(): void {
+				this.$emit('confirm')
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.up-toolbar {
+		height: 42px;
+		@include flex;
+		justify-content: space-between;
+		align-items: center;
+
+		&__wrapper {
+			&__cancel {
+				color: $up-tips-color;
+				font-size: 15px;
+				padding: 0 15px;
+			}
+		}
+
+		&__title {
+			color: $up-main-color;
+			padding: 0 60rpx;
+			font-size: 16px;
+			flex: 1;
+			text-align: center;
+		}
+
+		&__wrapper {
+			&__left,
+			&__right {
+				@include flex;
+			}
+			&__confirm {
+				color: $up-primary;
+				font-size: 15px;
+				padding: 0 15px;
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,125 @@
+<template>
+	<view
+		class="up-toolbar"
+		@touchmove.stop.prevent="noop"
+		v-if="show"
+	>
+		<view
+			class="up-toolbar__left"
+		>
+			<view
+				class="up-toolbar__cancel__wrapper"
+				hover-class="up-hover-class"
+			>
+				<text
+					class="up-toolbar__wrapper__cancel"
+					@tap="cancel"
+					:style="{
+						color: cancelColor
+					}"
+				>{{ cancelText }}</text>
+			</view>
+		</view>
+		<text
+			class="up-toolbar__title up-line-1"
+			v-if="title"
+		>{{ title }}</text>
+		<view
+			class="up-toolbar__right"
+		>
+			<view
+				v-if="!rightSlot"
+				class="up-toolbar__confirm__wrapper"
+				hover-class="up-hover-class"
+			>
+				<text
+					class="up-toolbar__wrapper__confirm"
+					@tap="confirm"
+					:style="{
+					color: confirmColor
+				}"
+				>{{ confirmText }}</text>
+			</view>
+			<template v-else>
+				<slot name="right">
+				</slot>
+			</template>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { props } from './props.js';
+	import { mpMixin } from '../../libs/mixin/mpMixin.js';
+	import { mixin } from '../../libs/mixin/mixin.js';
+	/**
+	 * Toolbar 工具条
+	 * @description 
+	 * @tutorial https://ijry.github.io/uview-plus/components/toolbar.html
+	 * @property {Boolean}	show			是否展示工具条（默认 true ）
+	 * @property {String}	cancelText		取消按钮的文字（默认 '取消' ）
+	 * @property {String}	confirmText		确认按钮的文字（默认 '确认' ）
+	 * @property {String}	cancelColor		取消按钮的颜色（默认 '#909193' ）
+	 * @property {String}	confirmColor	确认按钮的颜色（默认 '#3c9cff' ）
+	 * @property {String}	title			标题文字
+	 * @event {Function} 
+	 * @example 
+	 */
+	export default {
+		name: 'up-toolbar',
+		mixins: [mpMixin, mixin, props],
+		emits: ["confirm", "cancel"],
+		created() {
+			// console.log(this.$slots)
+		},
+		methods: {
+			// 点击取消按钮
+			cancel() {
+				this.$emit('cancel')
+			},
+			// 点击确定按钮
+			confirm() {
+				this.$emit('confirm')
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.up-toolbar {
+		height: 42px;
+		@include flex;
+		justify-content: space-between;
+		align-items: center;
+
+		&__wrapper {
+			&__cancel {
+				color: $up-tips-color;
+				font-size: 15px;
+				padding: 0 15px;
+			}
+		}
+
+		&__title {
+			color: $up-main-color;
+			padding: 0 60rpx;
+			font-size: 16px;
+			flex: 1;
+			text-align: center;
+		}
+
+		&__wrapper {
+			&__left,
+			&__right {
+				@include flex;
+			}
+			&__confirm {
+				color: $up-primary;
+				font-size: 15px;
+				padding: 0 15px;
+			}
+		}
+	}
+</style>