@gmcb/uv-ui 0.2.26

package/components/uv-icon/icons.js

@@ -0,0 +1,160 @@
+export default {
+	'uvicon-level': 'e68f',
+	'uvicon-checkbox-mark': 'e659',
+	'uvicon-folder': 'e694',
+	'uvicon-movie': 'e67c',
+	'uvicon-star-fill': 'e61e',
+	'uvicon-star': 'e618',
+	'uvicon-phone-fill': 'e6ac',
+	'uvicon-phone': 'e6ba',
+	'uvicon-apple-fill': 'e635',
+	'uvicon-backspace': 'e64d',
+	'uvicon-attach': 'e640',
+	'uvicon-empty-data': 'e671',
+	'uvicon-empty-address': 'e68a',
+	'uvicon-empty-favor': 'e662',
+	'uvicon-empty-car': 'e657',
+	'uvicon-empty-order': 'e66b',
+	'uvicon-empty-list': 'e672',
+	'uvicon-empty-search': 'e677',
+	'uvicon-empty-permission': 'e67d',
+	'uvicon-empty-news': 'e67e',
+	'uvicon-empty-history': 'e685',
+	'uvicon-empty-coupon': 'e69b',
+	'uvicon-empty-page': 'e60e',
+	'uvicon-empty-wifi-off': 'e6cc',
+	'uvicon-reload': 'e627',
+	'uvicon-order': 'e695',
+	'uvicon-server-man': 'e601',
+	'uvicon-search': 'e632',
+	'uvicon-more-dot-fill': 'e66f',
+	'uvicon-scan': 'e631',
+	'uvicon-map': 'e665',
+	'uvicon-map-fill': 'e6a8',
+	'uvicon-tags': 'e621',
+	'uvicon-tags-fill': 'e613',
+	'uvicon-eye': 'e664',
+	'uvicon-eye-fill': 'e697',
+	'uvicon-eye-off': 'e69c',
+	'uvicon-eye-off-outline': 'e688',
+	'uvicon-mic': 'e66d',
+	'uvicon-mic-off': 'e691',
+	'uvicon-calendar': 'e65c',
+	'uvicon-trash': 'e623',
+	'uvicon-trash-fill': 'e6ce',
+	'uvicon-play-left': 'e6bf',
+	'uvicon-play-right': 'e6b3',
+	'uvicon-minus': 'e614',
+	'uvicon-plus': 'e625',
+	'uvicon-info-circle': 'e69f',
+	'uvicon-info-circle-fill': 'e6a7',
+	'uvicon-question-circle': 'e622',
+	'uvicon-question-circle-fill': 'e6bc',
+	'uvicon-close': 'e65a',
+	'uvicon-checkmark': 'e64a',
+	'uvicon-checkmark-circle': 'e643',
+	'uvicon-checkmark-circle-fill': 'e668',
+	'uvicon-setting': 'e602',
+	'uvicon-setting-fill': 'e6d0',
+	'uvicon-heart': 'e6a2',
+	'uvicon-heart-fill': 'e68b',
+	'uvicon-camera': 'e642',
+	'uvicon-camera-fill': 'e650',
+	'uvicon-more-circle': 'e69e',
+	'uvicon-more-circle-fill': 'e684',
+	'uvicon-chat': 'e656',
+	'uvicon-chat-fill': 'e63f',
+	'uvicon-bag': 'e647',
+	'uvicon-error-circle': 'e66e',
+	'uvicon-error-circle-fill': 'e655',
+	'uvicon-close-circle': 'e64e',
+	'uvicon-close-circle-fill': 'e666',
+	'uvicon-share': 'e629',
+	'uvicon-share-fill': 'e6bb',
+	'uvicon-share-square': 'e6c4',
+	'uvicon-shopping-cart': 'e6cb',
+	'uvicon-shopping-cart-fill': 'e630',
+	'uvicon-bell': 'e651',
+	'uvicon-bell-fill': 'e604',
+	'uvicon-list': 'e690',
+	'uvicon-list-dot': 'e6a9',
+	'uvicon-zhifubao-circle-fill': 'e617',
+	'uvicon-weixin-circle-fill': 'e6cd',
+	'uvicon-weixin-fill': 'e620',
+	'uvicon-qq-fill': 'e608',
+	'uvicon-qq-circle-fill': 'e6b9',
+	'uvicon-moments-circel-fill': 'e6c2',
+	'uvicon-moments': 'e6a0',
+	'uvicon-car': 'e64f',
+	'uvicon-car-fill': 'e648',
+	'uvicon-warning-fill': 'e6c7',
+	'uvicon-warning': 'e6c1',
+	'uvicon-clock-fill': 'e64b',
+	'uvicon-clock': 'e66c',
+	'uvicon-edit-pen': 'e65d',
+	'uvicon-edit-pen-fill': 'e679',
+	'uvicon-email': 'e673',
+	'uvicon-email-fill': 'e683',
+	'uvicon-minus-circle': 'e6a5',
+	'uvicon-plus-circle': 'e603',
+	'uvicon-plus-circle-fill': 'e611',
+	'uvicon-file-text': 'e687',
+	'uvicon-file-text-fill': 'e67f',
+	'uvicon-pushpin': 'e6d1',
+	'uvicon-pushpin-fill': 'e6b6',
+	'uvicon-grid': 'e68c',
+	'uvicon-grid-fill': 'e698',
+	'uvicon-play-circle': 'e6af',
+	'uvicon-play-circle-fill': 'e62a',
+	'uvicon-pause-circle-fill': 'e60c',
+	'uvicon-pause': 'e61c',
+	'uvicon-pause-circle': 'e696',
+	'uvicon-gift-fill': 'e6b0',
+	'uvicon-gift': 'e680',
+	'uvicon-kefu-ermai': 'e660',
+	'uvicon-server-fill': 'e610',
+	'uvicon-coupon-fill': 'e64c',
+	'uvicon-coupon': 'e65f',
+	'uvicon-integral': 'e693',
+	'uvicon-integral-fill': 'e6b1',
+	'uvicon-home-fill': 'e68e',
+	'uvicon-home': 'e67b',
+	'uvicon-account': 'e63a',
+	'uvicon-account-fill': 'e653',
+	'uvicon-thumb-down-fill': 'e628',
+	'uvicon-thumb-down': 'e60a',
+	'uvicon-thumb-up': 'e612',
+	'uvicon-thumb-up-fill': 'e62c',
+	'uvicon-lock-fill': 'e6a6',
+	'uvicon-lock-open': 'e68d',
+	'uvicon-lock-opened-fill': 'e6a1',
+	'uvicon-lock': 'e69d',
+	'uvicon-red-packet': 'e6c3',
+	'uvicon-photo-fill': 'e6b4',
+	'uvicon-photo': 'e60d',
+	'uvicon-volume-off-fill': 'e6c8',
+	'uvicon-volume-off': 'e6bd',
+	'uvicon-volume-fill': 'e624',
+	'uvicon-volume': 'e605',
+	'uvicon-download': 'e670',
+	'uvicon-arrow-up-fill': 'e636',
+	'uvicon-arrow-down-fill': 'e638',
+	'uvicon-play-left-fill': 'e6ae',
+	'uvicon-play-right-fill': 'e6ad',
+	'uvicon-arrow-downward': 'e634',
+	'uvicon-arrow-leftward': 'e63b',
+	'uvicon-arrow-rightward': 'e644',
+	'uvicon-arrow-upward': 'e641',
+	'uvicon-arrow-down': 'e63e',
+	'uvicon-arrow-right': 'e63c',
+	'uvicon-arrow-left': 'e646',
+	'uvicon-arrow-up': 'e633',
+	'uvicon-skip-back-left': 'e6c5',
+	'uvicon-skip-forward-right': 'e61f',
+	'uvicon-arrow-left-double': 'e637',
+	'uvicon-man': 'e675',
+	'uvicon-woman': 'e626',
+	'uvicon-en': 'e6b8',
+	'uvicon-twitte': 'e607',
+	'uvicon-twitter-circle-fill': 'e6cf'
+}

package/components/uv-icon/props.js

@@ -0,0 +1,90 @@
+export default {
+	props: {
+		// 图标类名
+		name: {
+			type: String,
+			default: ''
+		},
+		// 图标颜色，可接受主题色
+		color: {
+			type: String,
+			default: ''
+		},
+		// 字体大小，单位px
+		size: {
+			type: [String, Number],
+			default: '16px'
+		},
+		// 是否显示粗体
+		bold: {
+			type: Boolean,
+			default: false
+		},
+		// 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
+		index: {
+			type: [String, Number],
+			default: null
+		},
+		// 触摸图标时的类名
+		hoverClass: {
+			type: String,
+			default: ''
+		},
+		// 自定义扩展前缀，方便用户扩展自己的图标库
+		customPrefix: {
+			type: String,
+			default: 'uvicon'
+		},
+		// 图标右边或者下面的文字
+		label: {
+			type: [String, Number],
+			default: ''
+		},
+		// label的位置，只能右边或者下边
+		labelPos: {
+			type: String,
+			default: 'right'
+		},
+		// label的大小
+		labelSize: {
+			type: [String, Number],
+			default: '15px'
+		},
+		// label的颜色
+		labelColor: {
+			type: String,
+			default: '#606266'
+		},
+		// label与图标的距离
+		space: {
+			type: [String, Number],
+			default: '3px'
+		},
+		// 图片的mode
+		imgMode: {
+			type: String,
+			default: 'aspectFit'
+		},
+		// 用于显示图片小图标时，图片的宽度
+		width: {
+			type: [String, Number],
+			default: ''
+		},
+		// 用于显示图片小图标时，图片的高度
+		height: {
+			type: [String, Number],
+			default: ''
+		},
+		// 用于解决某些情况下，让图标垂直居中的用途
+		top: {
+			type: [String, Number],
+			default: 0
+		},
+		// 是否阻止事件传播
+		stop: {
+			type: Boolean,
+			default: false
+		},
+		...uni.$uv?.props?.icon
+	}
+}

package/components/uv-icon/uv-icon.vue

@@ -0,0 +1,226 @@
+<template>
+	<view
+	  class="uv-icon"
+	  @tap="clickHandler"
+	  :class="['uv-icon--' + labelPos]"
+	>
+		<image
+		  class="uv-icon__img"
+		  v-if="isImg"
+		  :src="name"
+		  :mode="imgMode"
+		  :style="[imgStyle, $uv.addStyle(customStyle)]"
+		></image>
+		<text
+		  v-else
+		  class="uv-icon__icon"
+		  :class="uClasses"
+		  :style="[iconStyle, $uv.addStyle(customStyle)]"
+		  :hover-class="hoverClass"
+		>{{icon}}</text>
+		<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
+		<text
+		  v-if="label !== ''" 
+		  class="uv-icon__label"
+		  :style="{
+			color: labelColor,
+			fontSize: $uv.addUnit(labelSize),
+			marginLeft: labelPos == 'right' ? $uv.addUnit(space) : 0,
+			marginTop: labelPos == 'bottom' ? $uv.addUnit(space) : 0,
+			marginRight: labelPos == 'left' ? $uv.addUnit(space) : 0,
+			marginBottom: labelPos == 'top' ? $uv.addUnit(space) : 0
+		}"
+		>{{ label }}</text>
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	// #ifdef APP-NVUE
+	// nvue通过weex的dom模块引入字体，相关文档地址如下：
+	// https://weex.apache.org/zh/docs/modules/dom.html#addrule
+	import iconUrl from './uvicons.ttf';
+	const domModule = weex.requireModule('dom')
+	domModule.addRule('fontFace', {
+		'fontFamily': "uvicon-iconfont",
+		'src': "url('" + iconUrl + "')"
+	})
+	// #endif
+	// 引入图标名称，已经对应的unicode
+	import icons from './icons';
+	import props from './props.js';
+	/**
+	 * icon 图标
+	 * @description 基于字体的图标集，包含了大多数常见场景的图标。
+	 * @tutorial https://www.uvui.cn/components/icon.html
+	 * @property {String}			name			图标名称，见示例图标集
+	 * @property {String}			color			图标颜色,可接受主题色 （默认 color['uv-content-color'] ）
+	 * @property {String | Number}	size			图标字体大小，单位px （默认 '16px' ）
+	 * @property {Boolean}			bold			是否显示粗体 （默认 false ）
+	 * @property {String | Number}	index			点击图标的时候传递事件出去的index（用于区分点击了哪一个）
+	 * @property {String}			hoverClass		图标按下去的样式类，用法同uni的view组件的hoverClass参数，详情见官网
+	 * @property {String}			customPrefix	自定义扩展前缀，方便用户扩展自己的图标库 （默认 'uicon' ）
+	 * @property {String | Number}	label			图标右侧的label文字
+	 * @property {String}			labelPos		label相对于图标的位置，只能right或bottom （默认 'right' ）
+	 * @property {String | Number}	labelSize		label字体大小，单位px （默认 '15px' ）
+	 * @property {String}			labelColor		图标右侧的label文字颜色 （ 默认 color['uv-content-color'] ）
+	 * @property {String | Number}	space			label与图标的距离，单位px （默认 '3px' ）
+	 * @property {String}			imgMode			图片的mode
+	 * @property {String | Number}	width			显示图片小图标时的宽度
+	 * @property {String | Number}	height			显示图片小图标时的高度
+	 * @property {String | Number}	top				图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途  （默认 0 ）
+	 * @property {Boolean}			stop			是否阻止事件传播 （默认 false ）
+	 * @property {Object}			customStyle		icon的样式，对象形式
+	 * @event {Function} click 点击图标时触发
+	 * @event {Function} touchstart 事件触摸时触发
+	 * @example <uv-icon name="photo" color="#2979ff" size="28"></uv-icon>
+	 */
+	export default {
+		name: 'uv-icon',
+		emits: ['click'],
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				colorType: [
+					'primary',
+					'success',
+					'info',
+					'error',
+					'warning'
+				]
+			}
+		},
+		computed: {
+			uClasses() {
+				let classes = []
+				classes.push(this.customPrefix)
+				classes.push(this.customPrefix + '-' + this.name)
+				// 主题色，通过类配置
+				if (this.color && this.colorType.includes(this.color)) classes.push('uv-icon__icon--' + this.color)
+				// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
+				// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
+				//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
+				classes = classes.join(' ')
+				//#endif
+				return classes
+			},
+			iconStyle() {
+				let style = {}
+				style = {
+					fontSize: this.$uv.addUnit(this.size),
+					lineHeight: this.$uv.addUnit(this.size),
+					fontWeight: this.bold ? 'bold' : 'normal',
+					// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
+					top: this.$uv.addUnit(this.top)
+				}
+				// 非主题色值时，才当作颜色值
+				if (this.color && !this.colorType.includes(this.color)) style.color = this.color
+				return style
+			},
+			// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
+			isImg() {
+				const isBase64 = this.name.indexOf('data:') > -1 && this.name.indexOf('base64') > -1;
+				return this.name.indexOf('/') !== -1 || isBase64;
+			},
+			imgStyle() {
+				let style = {}
+				// 如果设置width和height属性，则优先使用，否则使用size属性
+				style.width = this.width ? this.$uv.addUnit(this.width) : this.$uv.addUnit(this.size)
+				style.height = this.height ? this.$uv.addUnit(this.height) : this.$uv.addUnit(this.size)
+				return style
+			},
+			// 通过图标名，查找对应的图标
+			icon() {
+				// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
+				const code = icons['uvicon-' + this.name];
+				// #ifdef APP-NVUE
+				if(!code) {
+					return code ? unescape(`%u${code}`) : ['uvicon'].indexOf(this.customPrefix) > -1 ? unescape(`%u${this.name}`) : '';
+				}
+				// #endif
+				return code ? unescape(`%u${code}`) : ['uvicon'].indexOf(this.customPrefix) > -1 ? this.name : '';
+			}
+		},
+		methods: {
+			clickHandler(e) {
+				this.$emit('click', this.index)
+				// 是否阻止事件冒泡
+				this.stop && this.preventEvent(e)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	@import '../../libs/css/color.scss';
+	// 变量定义
+	$uv-icon-primary: $uv-primary !default;
+	$uv-icon-success: $uv-success !default;
+	$uv-icon-info: $uv-info !default;
+	$uv-icon-warning: $uv-warning !default;
+	$uv-icon-error: $uv-error !default;
+	$uv-icon-label-line-height: 1 !default;
+	/* #ifndef APP-NVUE */
+	// 非nvue下加载字体
+	@font-face {
+		font-family: 'uvicon-iconfont';
+		src: url('./uvicons.ttf') format('truetype');
+	}
+	/* #endif */
+	.uv-icon {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		align-items: center;
+		&--left {
+			flex-direction: row-reverse;
+			align-items: center;
+		}
+		&--right {
+			flex-direction: row;
+			align-items: center;
+		}
+		&--top {
+			flex-direction: column-reverse;
+			justify-content: center;
+		}
+		&--bottom {
+			flex-direction: column;
+			justify-content: center;
+		}
+		&__icon {
+			font-family: uvicon-iconfont;
+			position: relative;
+			@include flex;
+			align-items: center;
+			&--primary {
+				color: $uv-icon-primary;
+			}
+			&--success {
+				color: $uv-icon-success;
+			}
+			&--error {
+				color: $uv-icon-error;
+			}
+			&--warning {
+				color: $uv-icon-warning;
+			}
+			&--info {
+				color: $uv-icon-info;
+			}
+		}
+		&__img {
+			/* #ifndef APP-NVUE */
+			height: auto;
+			will-change: transform;
+			/* #endif */
+		}
+		&__label {
+			/* #ifndef APP-NVUE */
+			line-height: $uv-icon-label-line-height;
+			/* #endif */
+		}
+	}
+</style>

package/components/uv-image/props.js

@@ -0,0 +1,100 @@
+export default {
+	props: {
+		// 图片地址
+		src: {
+			type: String,
+			default: ''
+		},
+		// 裁剪模式
+		mode: {
+			type: String,
+			default: 'aspectFill'
+		},
+		// 宽度，单位任意
+		width: {
+			type: [String, Number],
+			default: '300'
+		},
+		// 高度，单位任意
+		height: {
+			type: [String, Number],
+			default: '225'
+		},
+		// 图片形状，circle-圆形，square-方形
+		shape: {
+			type: String,
+			default: 'square'
+		},
+		// 圆角，单位任意
+		radius: {
+			type: [String, Number],
+			default: 0
+		},
+		// 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
+		lazyLoad: {
+			type: Boolean,
+			default: true
+		},
+		// 是否开启observer懒加载，nvue不生效
+		observeLazyLoad: {
+			type: Boolean,
+			default: false
+		},
+		// 开启长按图片显示识别微信小程序码菜单
+		showMenuByLongpress: {
+			type: Boolean,
+			default: true
+		},
+		// 加载中的图标，或者小图片
+		loadingIcon: {
+			type: String,
+			default: 'photo'
+		},
+		// 加载失败的图标，或者小图片
+		errorIcon: {
+			type: String,
+			default: 'error-circle'
+		},
+		// 是否显示加载中的图标或者自定义的slot
+		showLoading: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示加载错误的图标或者自定义的slot
+		showError: {
+			type: Boolean,
+			default: true
+		},
+		// 是否需要淡入效果
+		fade: {
+			type: Boolean,
+			default: true
+		},
+		// 只支持网络资源，只对微信小程序有效
+		webp: {
+			type: Boolean,
+			default: false
+		},
+		// 过渡时间，单位ms
+		duration: {
+			type: [String, Number],
+			default: 500
+		},
+		// 背景颜色，用于深色页面加载图片时，为了和背景色融合
+		bgColor: {
+			type: String,
+			default: '#f3f4f6'
+		},
+		// nvue模式下 是否直接显示，在uv-list等cell下面使用就需要设置
+		cellChild: {
+			type: Boolean,
+			default: false
+		},
+		// 是否压缩图片
+		compress: {
+			type: Boolean,
+			default: true
+		},
+		...uni.$uv?.props?.image
+	}
+}