@10yun/cv-mobile-ui 0.4.1 → 0.4.2

package/ui-cv/cv-fab/uni-fab.vue

@@ -1,443 +0,0 @@
-<template>
-	<view class="uni-cursor-point">
-		<view v-if="popMenu && (leftBottom||rightBottom||leftTop||rightTop) && content.length > 0" :class="{
-        'uni-fab--leftBottom': leftBottom,
-        'uni-fab--rightBottom': rightBottom,
-        'uni-fab--leftTop': leftTop,
-        'uni-fab--rightTop': rightTop
-      }" class="uni-fab">
-			<view :class="{
-          'uni-fab__content--left': horizontal === 'left',
-          'uni-fab__content--right': horizontal === 'right',
-          'uni-fab__content--flexDirection': direction === 'vertical',
-          'uni-fab__content--flexDirectionStart': flexDirectionStart,
-          'uni-fab__content--flexDirectionEnd': flexDirectionEnd,
-		  'uni-fab__content--other-platform': !isAndroidNvue
-        }" :style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }" class="uni-fab__content" elevation="5">
-				<view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" />
-				<view v-for="(item, index) in content" :key="index" :class="{ 'uni-fab__item--active': isShow }" class="uni-fab__item" @click="_onItemClick(index, item)">
-					<image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image" mode="widthFix" />
-					<text class="uni-fab__item-text" :style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text>
-				</view>
-				<view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" />
-			</view>
-		</view>
-		<view :class="{
-		  'uni-fab__circle--leftBottom': leftBottom,
-		  'uni-fab__circle--rightBottom': rightBottom,
-		  'uni-fab__circle--leftTop': leftTop,
-		  'uni-fab__circle--rightTop': rightTop,
-		  'uni-fab__content--other-platform': !isAndroidNvue
-		}" class="uni-fab__circle uni-fab__plus" :style="{ 'background-color': styles.buttonColor }" @click="_onClick">
-			<view class="fab-circle-v" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view>
-			<view class="fab-circle-h" :class="{'uni-fab__plus--active': isShow  && content.length > 0}"></view>
-		</view>
-	</view>
-</template>
-
-<script>
-	let platform = 'other'
-	// #ifdef APP-NVUE
-	platform = uni.getSystemInfoSync().platform
-	// #endif
-
-	/**
-	 * Fab 悬浮按钮
-	 * @description 点击可展开一个图形按钮菜单
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=144
-	 * @property {Object} pattern 可选样式配置项
-	 * @property {Object} horizontal = [left | right] 水平对齐方式
-	 * 	@value left 左对齐
-	 * 	@value right 右对齐
-	 * @property {Object} vertical = [bottom | top] 垂直对齐方式
-	 * 	@value bottom 下对齐
-	 * 	@value top 上对齐
-	 * @property {Object} direction = [horizontal | vertical] 展开菜单显示方式
-	 * 	@value horizontal 水平显示
-	 * 	@value vertical 垂直显示
-	 * @property {Array} content 展开菜单内容配置项
-	 * @property {Boolean} popMenu 是否使用弹出菜单
-	 * @event {Function} trigger 展开菜单点击事件，返回点击信息
-	 * @event {Function} fabClick 悬浮按钮点击事件
-	 */
-	export default {
-		name: 'UniFab',
-		emits: ['fabClick', 'trigger'],
-		props: {
-			pattern: {
-				type: Object,
-				default () {
-					return {}
-				}
-			},
-			horizontal: {
-				type: String,
-				default: 'left'
-			},
-			vertical: {
-				type: String,
-				default: 'bottom'
-			},
-			direction: {
-				type: String,
-				default: 'horizontal'
-			},
-			content: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			show: {
-				type: Boolean,
-				default: false
-			},
-			popMenu: {
-				type: Boolean,
-				default: true
-			}
-		},
-		data() {
-			return {
-				fabShow: false,
-				isShow: false,
-				isAndroidNvue: platform === 'android',
-				styles: {
-					color: '#3c3e49',
-					selectedColor: '#007AFF',
-					backgroundColor: '#fff',
-					buttonColor: '#007AFF'
-				}
-			}
-		},
-		computed: {
-			contentWidth(e) {
-				return (this.content.length + 1) * 55 + 10 + 'px'
-			},
-			contentWidthMin() {
-				return 55 + 'px'
-			},
-			// 动态计算宽度
-			boxWidth() {
-				return this.getPosition(3, 'horizontal')
-			},
-			// 动态计算高度
-			boxHeight() {
-				return this.getPosition(3, 'vertical')
-			},
-			// 计算左下位置
-			leftBottom() {
-				return this.getPosition(0, 'left', 'bottom')
-			},
-			// 计算右下位置
-			rightBottom() {
-				return this.getPosition(0, 'right', 'bottom')
-			},
-			// 计算左上位置
-			leftTop() {
-				return this.getPosition(0, 'left', 'top')
-			},
-			rightTop() {
-				return this.getPosition(0, 'right', 'top')
-			},
-			flexDirectionStart() {
-				return this.getPosition(1, 'vertical', 'top')
-			},
-			flexDirectionEnd() {
-				return this.getPosition(1, 'vertical', 'bottom')
-			},
-			horizontalLeft() {
-				return this.getPosition(2, 'horizontal', 'left')
-			},
-			horizontalRight() {
-				return this.getPosition(2, 'horizontal', 'right')
-			}
-		},
-		watch: {
-			pattern(newValue, oldValue) {
-				//console.log(JSON.stringify(newValue))
-				this.styles = Object.assign({}, this.styles, newValue)
-			}
-		},
-		created() {
-			this.isShow = this.show
-			if (this.top === 0) {
-				this.fabShow = true
-			}
-			// 初始化样式
-			this.styles = Object.assign({}, this.styles, this.pattern)
-		},
-		methods: {
-			_onClick() {
-				this.$emit('fabClick')
-				if (!this.popMenu) {
-					return
-				}
-				this.isShow = !this.isShow
-			},
-			open() {
-				this.isShow = true
-			},
-			close() {
-				this.isShow = false
-			},
-			/**
-			 * 按钮点击事件
-			 */
-			_onItemClick(index, item) {
-				this.$emit('trigger', {
-					index,
-					item
-				})
-			},
-			/**
-			 * 获取 位置信息
-			 */
-			getPosition(types, paramA, paramB) {
-				if (types === 0) {
-					return this.horizontal === paramA && this.vertical === paramB
-				} else if (types === 1) {
-					return this.direction === paramA && this.vertical === paramB
-				} else if (types === 2) {
-					return this.direction === paramA && this.horizontal === paramB
-				} else {
-					return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin
-				}
-			}
-		}
-	}
-</script>
-
-<style scoped>
-	.uni-fab {
-		position: fixed;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		justify-content: center;
-		align-items: center;
-		z-index: 10;
-	}
-
-	.uni-cursor-point {
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
-	}
-
-	.uni-fab--active {
-		opacity: 1;
-	}
-
-	.uni-fab--leftBottom {
-		left: 5px;
-		bottom: 20px;
-		/* #ifdef H5 */
-		left: calc(5px + var(--window-left));
-		bottom: calc(20px + var(--window-bottom));
-		/* #endif */
-		padding: 10px;
-	}
-
-	.uni-fab--leftTop {
-		left: 5px;
-		top: 30px;
-		/* #ifdef H5 */
-		left: calc(5px + var(--window-left));
-		top: calc(30px + var(--window-top));
-		/* #endif */
-		padding: 10px;
-	}
-
-	.uni-fab--rightBottom {
-		right: 5px;
-		bottom: 20px;
-		/* #ifdef H5 */
-		right: calc(5px + var(--window-right));
-		bottom: calc(20px + var(--window-bottom));
-		/* #endif */
-		padding: 10px;
-	}
-
-	.uni-fab--rightTop {
-		right: 5px;
-		top: 30px;
-		/* #ifdef H5 */
-		right: calc(5px + var(--window-right));
-		top: calc(30px + var(--window-top));
-		/* #endif */
-		padding: 10px;
-	}
-
-	.uni-fab__circle {
-		position: fixed;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		justify-content: center;
-		align-items: center;
-		width: 55px;
-		height: 55px;
-		background-color: #3c3e49;
-		border-radius: 55px;
-		z-index: 11;
-	}
-
-	.uni-fab__circle--leftBottom {
-		left: 15px;
-		bottom: 30px;
-		/* #ifdef H5 */
-		left: calc(15px + var(--window-left));
-		bottom: calc(30px + var(--window-bottom));
-		/* #endif */
-	}
-
-	.uni-fab__circle--leftTop {
-		left: 15px;
-		top: 40px;
-		/* #ifdef H5 */
-		left: calc(15px + var(--window-left));
-		top: calc(40px + var(--window-top));
-		/* #endif */
-	}
-
-	.uni-fab__circle--rightBottom {
-		right: 15px;
-		bottom: 30px;
-		/* #ifdef H5 */
-		right: calc(15px + var(--window-right));
-		bottom: calc(30px + var(--window-bottom));
-		/* #endif */
-	}
-
-	.uni-fab__circle--rightTop {
-		right: 15px;
-		top: 40px;
-		/* #ifdef H5 */
-		right: calc(15px + var(--window-right));
-		top: calc(40px + var(--window-top));
-		/* #endif */
-	}
-
-	.uni-fab__circle--left {
-		left: 0;
-	}
-
-	.uni-fab__circle--right {
-		right: 0;
-	}
-
-	.uni-fab__circle--top {
-		top: 0;
-	}
-
-	.uni-fab__circle--bottom {
-		bottom: 0;
-	}
-
-	.uni-fab__plus {
-		font-weight: bold;
-	}
-
-	.fab-circle-v {
-		position: absolute;
-		width: 3px;
-		height: 31px;
-		left: 26px;
-		top: 12px;
-		background-color: white;
-		transform: rotate(0deg);
-		transition: transform 0.3s;
-	}
-
-	.fab-circle-h {
-		position: absolute;
-		width: 31px;
-		height: 3px;
-		left: 12px;
-		top: 26px;
-		background-color: white;
-		transform: rotate(0deg);
-		transition: transform 0.3s;
-	}
-
-	.uni-fab__plus--active {
-		transform: rotate(135deg);
-	}
-
-	.uni-fab__content {
-		/* #ifndef APP-NVUE */
-		box-sizing: border-box;
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		border-radius: 55px;
-		overflow: hidden;
-		transition-property: width, height;
-		transition-duration: 0.2s;
-		width: 55px;
-		border-color: #DDDDDD;
-		border-width: 1rpx;
-		border-style: solid;
-	}
-
-	.uni-fab__content--other-platform {
-		border-width: 0px;
-		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
-	}
-
-	.uni-fab__content--left {
-		justify-content: flex-start;
-	}
-
-	.uni-fab__content--right {
-		justify-content: flex-end;
-	}
-
-	.uni-fab__content--flexDirection {
-		flex-direction: column;
-		justify-content: flex-end;
-	}
-
-	.uni-fab__content--flexDirectionStart {
-		flex-direction: column;
-		justify-content: flex-start;
-	}
-
-	.uni-fab__content--flexDirectionEnd {
-		flex-direction: column;
-		justify-content: flex-end;
-	}
-
-	.uni-fab__item {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		width: 55px;
-		height: 55px;
-		opacity: 0;
-		transition: opacity 0.2s;
-	}
-
-	.uni-fab__item--active {
-		opacity: 1;
-	}
-
-	.uni-fab__item-image {
-		width: 25px;
-		height: 25px;
-		margin-bottom: 3px;
-	}
-
-	.uni-fab__item-text {
-		color: #FFFFFF;
-		font-size: 12px;
-	}
-
-	.uni-fab__item--first {
-		width: 55px;
-	}
-</style>

package/ui-cv/cv-fav/uni-fav.vue

@@ -1,136 +0,0 @@
-<template>
-	<view :class="[circle === true || circle === 'true' ? 'uni-fav--circle' : '']" :style="[{ backgroundColor: checked ? bgColorChecked : bgColor }]" @click="onClick" class="uni-fav">
-		<!-- #ifdef MP-ALIPAY -->
-		<view class="uni-fav-star" v-if="!checked && (star === true || star === 'true')">
-			<uni-icons :color="fgColor" :style="{color: checked ? fgColorChecked : fgColor}" size="14" type="star-filled" />
-		</view>
-		<!-- #endif -->
-		<!-- #ifndef MP-ALIPAY -->
-		<uni-icons :color="fgColor" :style="{color: checked ? fgColorChecked : fgColor}" class="uni-fav-star" size="14" type="star-filled" v-if="!checked && (star === true || star === 'true')" />
-		<!-- #endif -->
-		<text :style="{color: checked ? fgColorChecked : fgColor}" class="uni-fav-text">{{ checked ? contentText.contentFav : contentText.contentDefault }}</text>
-	</view>
-</template>
-
-<script>
-	/**
-	 * Fav 收藏按钮
-	 * @description 用于收藏功能，可点击切换选中、不选中的状态
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=864
-	 * @property {Boolean} star = [true|false] 按钮是否带星星
-	 * @property {String} bgColor 未收藏时的背景色
-	 * @property {String} bgColorChecked 已收藏时的背景色
-	 * @property {String} fgColor 未收藏时的文字颜色
-	 * @property {String} fgColorChecked 已收藏时的文字颜色
-	 * @property {Boolean} circle = [true|false] 是否为圆角
-	 * @property {Boolean} checked = [true|false] 是否为已收藏
-	 * @property {Object} contentText = [true|false] 收藏按钮文字
-	 * @event {Function} click 点击 fav按钮触发事件
-	 * @example <uni-fav :checked="true"/>
-	 */
-	export default {
-		name: "UniFav",
-		// TODO 兼容 vue3，需要注册事件
-		emits: ['click'],
-		props: {
-			star: {
-				type: [Boolean, String],
-				default: true
-			},
-			bgColor: {
-				type: String,
-				default: "#eeeeee"
-			},
-			fgColor: {
-				type: String,
-				default: "#666666"
-			},
-			bgColorChecked: {
-				type: String,
-				default: "#007aff"
-			},
-			fgColorChecked: {
-				type: String,
-				default: "#FFFFFF"
-			},
-			circle: {
-				type: [Boolean, String],
-				default: false
-			},
-			checked: {
-				type: Boolean,
-				default: false
-			},
-			contentText: {
-				type: Object,
-				default () {
-					return {
-						contentDefault: "收藏",
-						contentFav: "已收藏"
-					};
-				}
-			}
-		},
-		watch: {
-			checked() {
-				if (uni.report) {
-					if (this.checked) {
-						uni.report("收藏", "收藏");
-					} else {
-						uni.report("取消收藏", "取消收藏");
-					}
-				}
-			}
-		},
-		methods: {
-			onClick() {
-				this.$emit("click");
-			}
-		}
-	};
-</script>
-
-<style scoped>
-	.uni-fav {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		width: 60px;
-		height: 25px;
-		line-height: 25px;
-		text-align: center;
-		border-radius: 3px;
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
-	}
-
-	.uni-fav--circle {
-		border-radius: 30px;
-	}
-
-	.uni-fav-star {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		height: 25px;
-		line-height: 24px;
-		margin-right: 3px;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.uni-fav-text {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		height: 25px;
-		line-height: 25px;
-		align-items: center;
-		justify-content: center;
-		font-size: 14px;
-	}
-</style>