@gmcb/uv-ui 0.2.26

package/components/uv-status-bar/uv-status-bar.vue

@@ -0,0 +1,54 @@
+<template>
+	<view
+	    :style="[style]"
+	    class="uv-status-bar"
+	>
+		<slot />
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * StatbusBar 状态栏占位
+	 * @description 本组件主要用于状态填充，比如在自定导航栏的时候，它会自动适配一个恰当的状态栏高度。
+	 * @tutorial https://www.uvui.cn/components/statusBar.html
+	 * @property {String}			bgColor			背景色 (默认 'transparent' )
+	 * @property {String | Object}	customStyle		自定义样式 
+	 * @example <uv-status-bar></uv-status-bar>
+	 */
+	export default {
+		name: 'uv-status-bar',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+			}
+		},
+		computed: {
+			style() {
+				const style = {}
+				// 状态栏高度，由于某些安卓和微信开发工具无法识别css的顶部状态栏变量，所以使用js获取的方式
+				style.height = this.$uv.addUnit(this.$uv.sys().statusBarHeight, 'px')
+				if(this.bgColor){
+					if (this.bgColor.indexOf("gradient") > -1) {// 渐变色
+						style.backgroundImage = this.bgColor;
+					}else{
+						style.background = this.bgColor;
+					}
+				}
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uv-status-bar {
+		// nvue会默认100%，如果nvue下，显式写100%的话，会导致宽度不为100%而异常
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		/* #endif */
+	}
+</style>

package/components/uv-steps/props.js

@@ -0,0 +1,40 @@
+export default {
+	props: {
+		// 排列方向
+		direction: {
+			type: String,
+			default: 'row'
+		},
+		// 设置第几个步骤
+		current: {
+			type: [String, Number],
+			default: 0
+		},
+		// 激活状态颜色
+		activeColor: {
+			type: String,
+			default: '#3c9cff'
+		},
+		// 未激活状态颜色
+		inactiveColor: {
+			type: String,
+			default: '#969799'
+		},
+		// 激活状态的图标
+		activeIcon: {
+			type: String,
+			default: ''
+		},
+		// 未激活状态图标
+		inactiveIcon: {
+			type: String,
+			default: ''
+		},
+		// 是否显示点类型
+		dot: {
+			type: Boolean,
+			default: false
+		},
+		...uni.$uv?.props?.steps
+	}
+}

package/components/uv-steps/uv-steps.vue

@@ -0,0 +1,83 @@
+<template>
+	<view
+	  :class="['uv-steps',`uv-steps--${direction}`]"
+		:style="[$uv.addStyle(customStyle)]"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	import { func } from '../../libs/function/test.js'
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * Steps 步骤条
+	 * @description 该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
+	 * @tutorial https://www.uvui.cn/components/steps.html
+	 * @property {String}			direction		row-横向，column-竖向 (默认 'row' )
+	 * @property {String | Number}	current			设置当前处于第几步 (默认 0 )
+	 * @property {String}			activeColor		激活状态颜色 (默认 '#3c9cff' )
+	 * @property {String}			inactiveColor	未激活状态颜色 (默认 '#969799' )
+	 * @property {String}			activeIcon		激活状态的图标
+	 * @property {String}			inactiveIcon	未激活状态图标 
+	 * @property {Boolean}			dot				是否显示点类型 (默认 false )
+	 * @example <uv-steps current="0"><uv-steps-item title="已出库" desc="10:35" ></uv-steps-item></uv-steps>
+	 */
+	export default {
+		name: 'uv-steps',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+			}
+		},
+		watch: {
+			children() {
+				this.updateChildData()
+			},
+			parentData() {
+				this.updateChildData()
+			}
+		},
+		computed: {
+			// 监听参数的变化，通过watch中，手动去更新子组件的数据，否则子组件不会自动变化
+			parentData() {
+				return [this.current, this.direction, this.activeColor, this.inactiveColor, this.activeIcon, this.inactiveIcon, this.dot]
+			}
+		},
+		methods: {
+			// 更新子组件的数据
+			updateChildData() {
+				this.children.map(child => {
+					// 先判断子组件是否存在对应的方法
+					func((child || {}).updateFromParent()) && child.updateFromParent()
+				})
+			},
+			// 接受子组件的通知，去修改其他子组件的数据
+			updateFromChild() {
+				this.updateChildData()
+			}
+		},
+		created() {
+			this.children = []
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+
+	.uv-steps {
+		@include flex;
+
+		&--column {
+			flex-direction: column
+		}
+
+		&--row {
+			flex-direction: row;
+			flex: 1;
+		}
+	}
+</style>

package/components/uv-steps-item/props.js

@@ -0,0 +1,25 @@
+export default {
+	props: {
+		// 标题
+		title: {
+			type: [String, Number],
+			default: ''
+		},
+		// 描述文本
+		desc: {
+			type: [String, Number],
+			default: ''
+		},
+		// 图标大小
+		iconSize: {
+			type: [String, Number],
+			default: 17
+		},
+		// 当前步骤是否处于失败状态
+		error: {
+			type: Boolean,
+			default: false
+		},
+		...uni.$uv?.props?.stepsItem
+	}
+}

package/components/uv-steps-item/uv-steps-item.vue

@@ -0,0 +1,347 @@
+<template>
+	<view 
+		class="uv-steps-item" 
+		ref="uv-steps-item" 
+		:class="[`uv-steps-item--${parentData.direction}`]"
+		:style="[$uv.addStyle(customStyle)]"
+		>
+		<view 
+			class="uv-steps-item__line" 
+			v-if="index + 1 < childLength"
+			:class="[`uv-steps-item__line--${parentData.direction}`]" 
+			:style="[lineStyle]">
+		</view>
+		<view 
+			:class="[
+				'uv-steps-item__wrapper',
+				`uv-steps-item__wrapper--${parentData.direction}`, 
+				parentData.dot && `uv-steps-item__wrapper--${parentData.direction}--dot`
+			]">
+			<slot name="icon">
+				<view 
+					class="uv-steps-item__wrapper__dot" 
+					v-if="parentData.dot" 
+					:style="{
+						backgroundColor: statusColor
+					}">
+				</view>
+				<view 
+					class="uv-steps-item__wrapper__icon" 
+					v-else-if="parentData.activeIcon || parentData.inactiveIcon">
+					<uv-icon 
+						:name="index <= parentData.current ? parentData.activeIcon : parentData.inactiveIcon"
+						:size="iconSize"
+						:color="index <= parentData.current ? parentData.activeColor : parentData.inactiveColor">
+					</uv-icon>
+				</view>
+				<view 
+					v-else 
+					:style="{
+						backgroundColor: statusClass === 'process' ? parentData.activeColor : 'transparent',
+						borderColor: statusColor
+					}" 
+					class="uv-steps-item__wrapper__circle">
+					<text 
+						v-if="statusClass === 'process' || statusClass === 'wait'"
+						class="uv-steps-item__wrapper__circle__text" 
+						:style="{
+							color: index == parentData.current ? '#ffffff' : parentData.inactiveColor
+						}">{{ index + 1}}</text>
+					<uv-icon 
+						v-else 
+						:color="statusClass === 'error' ? 'error' : parentData.activeColor" 
+						size="12"
+						:name="statusClass === 'error' ? 'close' : 'checkmark'">
+					</uv-icon>
+				</view>
+			</slot>
+		</view>
+		<view 
+			:class="[
+				'uv-steps-item__content',
+				`uv-steps-item__content--${parentData.direction}`
+			]"
+			:style="[contentStyle]"
+		>
+			<slot name="title">
+				<uv-text
+					:text="title" 
+					:type="parentData.current == index ? 'main' : 'content'" 
+					lineHeight="20px"
+					:size="parentData.current == index ? 14 : 13"
+				></uv-text>
+			</slot>
+			<slot name="desc">
+				<uv-text 
+					:text="desc" 
+					type="tips" 
+					size="12"
+				></uv-text>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * StepsItem 步骤条的子组件
+	 * @description 本组件需要和uv-steps配合使用
+	 * @tutorial https://www.uvui.cn/components/steps.html
+	 * @property {String}			title			标题文字
+	 * @property {String}			current			描述文本
+	 * @property {String | Number}	iconSize		图标大小  (默认 17 )
+	 * @property {Boolean}			error			当前步骤是否处于失败状态  (默认 false )
+	 * @example <uv-steps current="0"><uv-steps-item title="已出库" desc="10:35" ></uv-steps-item></uv-steps>
+	 */
+	export default {
+		name: 'uv-steps-item',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				index: 0,
+				childLength: 0,
+				showLine: false,
+				size: {
+					height: 0,
+					width: 0
+				},
+				parentData: {
+					direction: 'row',
+					current: 0,
+					activeColor: '',
+					inactiveColor: '',
+					activeIcon: '',
+					inactiveIcon: '',
+					dot: false
+				}
+			}
+		},
+		watch: {
+			'parentData'(newValue, oldValue) {}
+		},
+		created() {
+			this.init()
+		},
+		computed: {
+			lineStyle() {
+				const style = {}
+				if (this.parentData.direction === 'row') {
+					style.width = this.size.width + 'px'
+					style.left = this.size.width / 2 + 'px'
+				} else {
+					style.height = this.size.height + 'px'
+				}
+				style.backgroundColor = this.parent.children?.[this.index + 1]?.error ? '#f56c6c' : this.index < this.parentData.current ? this.parentData.activeColor : this.parentData.inactiveColor
+				return style
+			},
+			statusClass() {
+				const {
+					index,
+					error
+				} = this
+				const {
+					current
+				} = this.parentData
+				if (current == index) {
+					return error === true ? 'error' : 'process'
+				} else if (error) {
+					return 'error'
+				} else if (current > index) {
+					return 'finish'
+				} else {
+					return 'wait'
+				}
+			},
+			statusColor() {
+				let color = ''
+				switch (this.statusClass) {
+					case 'finish':
+						color = this.parentData.activeColor
+						break
+					case 'error':
+						color = '#f56c6c'
+						break
+					case 'process':
+						color = this.parentData.dot ? this.parentData.activeColor : 'transparent'
+						break
+					default:
+						color = this.parentData.inactiveColor
+						break
+				}
+				return color
+			},
+			contentStyle() {
+				const style = {}
+				if (this.parentData.direction === 'column') {
+					style.marginLeft = this.parentData.dot ? '2px' : '6px'
+					style.marginTop = this.parentData.dot ? '0px' : '6px'
+				} else {
+					style.marginTop = this.parentData.dot ? '2px' : '6px'
+					style.marginLeft = this.parentData.dot ? '2px' : '6px'
+				}
+				return style
+			}
+		},
+		mounted() {
+			this.parent && this.parent.updateFromChild()
+			this.$uv.sleep().then(() => {
+				this.getStepsItemRect()
+			})
+		},
+		methods: {
+			init() {
+				// 初始化数据
+				this.updateParentData()
+				if (!this.parent) {
+					return this.$uv.error('uv-steps-item必须要搭配uv-steps组件使用')
+				}
+				this.index = this.parent.children.indexOf(this)
+				this.childLength = this.parent.children.length
+			},
+			updateParentData() {
+				// 此方法在mixin中
+				this.getParentData('uv-steps')
+			},
+			// 父组件数据发生变化
+			updateFromParent() {
+				this.init()
+			},
+			// 获取组件的尺寸，用于设置横线的位置
+			getStepsItemRect() {
+				// #ifndef APP-NVUE
+				this.$uvGetRect('.uv-steps-item').then(size => {
+					this.size = size
+				})
+				// #endif
+				// #ifdef APP-NVUE
+				dom.getComponentRect(this.$refs['uv-steps-item'], res => {
+					const {
+						size
+					} = res
+					this.size = size
+				})
+				// #endif
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	@import '../../libs/css/color.scss';
+	.uv-steps-item {
+		flex: 1;
+		@include flex;
+
+		&--row {
+			flex-direction: column;
+			align-items: center;
+			position: relative;
+		}
+
+		&--column {
+			position: relative;
+			flex-direction: row;
+			justify-content: flex-start;
+			padding-bottom: 5px;
+		}
+
+		&__wrapper {
+			@include flex;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+			background-color: #fff;
+
+			&--column {
+				width: 20px;
+				height: 32px;
+
+				&--dot {
+					height: 20px;
+					width: 20px;
+				}
+			}
+
+			&--row {
+				width: 32px;
+				height: 20px;
+
+				&--dot {
+					width: 20px;
+					height: 20px;
+				}
+			}
+
+			&__circle {
+				width: 20px;
+				height: 20px;
+				/* #ifndef APP-NVUE */
+				box-sizing: border-box;
+				flex-shrink: 0;
+				/* #endif */
+				border-radius: 100px;
+				border-width: 1px;
+				border-color: $uv-tips-color;
+				border-style: solid;
+				@include flex(row);
+				align-items: center;
+				justify-content: center;
+				transition: background-color 0.3s;
+
+				&__text {
+					color: $uv-tips-color;
+					font-size: 11px;
+					@include flex(row);
+					align-items: center;
+					justify-content: center;
+					text-align: center;
+					line-height: 11px;
+				}
+			}
+
+			&__dot {
+				width: 10px;
+				height: 10px;
+				border-radius: 100px;
+				background-color: $uv-content-color;
+			}
+		}
+
+		&__content {
+			@include flex;
+			flex: 1;
+
+			&--row {
+				flex-direction: column;
+				align-items: center;
+			}
+
+			&--column {
+				flex-direction: column;
+				margin-left: 6px;
+			}
+		}
+
+		&__line {
+			position: absolute;
+			background: $uv-tips-color;
+
+			&--row {
+				top: 10px;
+				height: 1px;
+			}
+
+			&--column {
+				width: 1px;
+				left: 10px;
+			}
+		}
+	}
+</style>

package/components/uv-sticky/props.js

@@ -0,0 +1,41 @@
+export default {
+	props: {
+		// 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px
+		offsetTop: {
+			type: [String, Number],
+			default: 0
+		},
+		// 自定义导航栏的高度
+		customNavHeight: {
+			type: [String, Number],
+			// #ifdef H5
+			// H5端的导航栏属于“自定义”导航栏的范畴，因为它是非原生的，与普通元素一致
+			default: 44,
+			// #endif
+			// #ifndef H5
+			default: 0
+			// #endif
+		},
+		// 是否禁用吸顶功能
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 吸顶区域的背景颜色
+		bgColor: {
+			type: String,
+			default: 'transparent'
+		},
+		// z-index值
+		zIndex: {
+			type: [String, Number],
+			default: ''
+		},
+		// 列表中的索引值
+		index: {
+			type: [String, Number],
+			default: ''
+		},
+		...uni.$uv?.props?.sticky
+	}
+}