fusions-ui 1.2.6 → 1.2.8

package/components/fu-rate/props.js

@@ -1,103 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description value / v-model 当前评分
-		 */
-		value: {
-			type: [Number, String],
-			default: 0
-		},
-		modelValue: {
-			type: [Number, String],
-			default: 0
-		},
-		/**
-		 * @description  星星的类型，是否镂空
-		 * @default true
-		 */
-		isFill: {
-			type: [Boolean, String],
-			default: true
-		},
-		/**
-		 * @description 星星选中状态颜色
-		 * @default '#ffca3e'
-		 */
-		activeColor: {
-			type: String,
-			default: "#ffca3e"
-		},
-		/**
-		 * @description 星星未选中的颜色
-		 * @default '#ececec'
-		 */
-		inactiveColor: {
-			type: String,
-			default: "#ececec"
-		},
-		/**
-		 * @description 星星禁用状态颜色
-		 * @default "#c0c0c0"
-		 */
-		disabledColor: {
-			type: String,
-			default: "#c0c0c0"
-		},
-		/**
-		 * @description 星星的大小
-		 * @default 24
-		 */
-		size: {
-			type: [Number, String],
-			default: 24
-		},
-		/**
-		 * @description 最大评分
-		 * @default 5
-		 */
-		max: {
-			type: [Number, String],
-			default: 5
-		},
-		/**
-		 * @description 星星的间距
-		 * @default 0
-		 */
-		margin: {
-			type: [Number, String],
-			default: 0
-		},
-		/**
-		 * @description 是否可点击
-		 * @default false
-		 */
-		disabled: {
-			type: [Boolean, String],
-			default: false
-		},
-		/**
-		 * @description 是否只读
-		 * @default false
-		 */
-		readonly: {
-			type: [Boolean, String],
-			default: false
-		},
-		/**
-		 * @description 是否显示半星
-		 * @default false
-		 */
-		allowHalf: {
-			type: [Boolean, String],
-			default: false
-		},
-		/**
-		 * @description 是否支持滑动手势
-		 * @default true
-		 */
-		touchable: {
-			type: [Boolean, String],
-			default: true
-		}
-	}
-}

package/components/fu-read-more/fu-read-more.vue

@@ -1,191 +0,0 @@
-<template>
-	<view class="fu-read-more">
-		<!-- 内容 -->
-		<view :id="elId" class="fu-read-more__content" :style="[contentStyle]">
-			<slot></slot>
-		</view>
-	
-		<!-- 展开收起按钮 -->
-		<view class="fu-read-more__show-more__wrap" :class="{'fu-read-more__show-more': showMore}" :style="[innerShadowStyle]" @tap="toggleReadMore" v-if="isLongContent">
-			<text class="fu-read-more__show-more--text" :style="[fontStyle]">{{ showMore ? closeText : openText }}</text>
-			<view class="fu-read-more__show-more--icon" v-if="showMore || openIcon">
-				<fu-icon :name="showMore? closeIcon: openIcon? openIcon: ''" :size="fontStyle.fontSize" :color="fontStyle.color" />
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import props from './props.js'
-	/**
-	 * ReadMore 组件
-	 * @description 此组件查看更多 一般用于内容过多，或者限制部分查看
-	 * @property {Number} showHeight 默认占位高度（默认 400） 
-	 * @property {Boolean} closeBtn = [true|false] 显示收起按钮（默认 false）
-	 * @property {String} openText 展开提示文字（默认 '展开阅读全文'） 
-	 * @property {String} closeText 收起提示文字（默认 '收起'） 
-	 * @property {String} openIcon 展开提示图标（默认 'down'） 
-	 * @property {String} closeIcon 收起提示图标（默认 'up'） 
-	 * @property {Object} shadowStyle 阴影样式
-	 * @property {String,Number} index 组件标识 
-	 * @property {String} color 字体颜色（默认 '#e1534e'）
-	 * @property {String,Number} size 字体大小（默认 14）
-	 * 
-	 * @event {Function} open 点击展开时触发
-	 * @event {Function} close 点击收起时触发
-	 * @example <fu-read-more>...</fu-read-more>
-	 */
-	export default {
-		name: 'FuReadMore',
-		mixins: [mpMixin, props],
-		emits: ['open', 'close'],
-		data() {
-			const elId = this.$fu.uuid();
-			return {
-				elId: elId,
-				// 标记是否已经初始化高度完成
-				initHeight: false,
-				// 是否需要隐藏一部分内容
-				isLongContent: false,
-				// 当前展开的打开、关闭状态
-				showMore: false,
-				// 内容的高度
-				contentHeight: 0
-			}
-		},
-		computed: {
-			paramsChange() {
-				return `${this.open}-${this.showHeight}`
-			},
-			contentStyle() {
-				let style = {}
-				if (this.isLongContent && !this.showMore) {
-					style.height = `${this.showHeight}rpx`;
-				} else {
-					if (!this.initHeight) {
-						style.height = 'auto';
-					} else {
-						style.height = `${this.contentHeight}px`;
-					}
-				}
-				return style
-			},
-			innerShadowStyle() {
-				let style = {}
-				// 折叠时才需要阴影样式
-				if (!this.showMore) {
-					style = Object.assign(style, this.shadowStyle)
-				}
-				return style
-			},
-			fontStyle() {
-				return {
-					color: this.color,
-					fontSize: this.$fu.addUnit(this.size)
-				}
-			}
-		},
-		mounted() {
-			this.$nextTick(() => {
-				this.init()
-			})
-		},
-		methods: {
-			// 初始化组件
-			init() {
-				// 判断高度，如果真实内容的高度大于占位高度，则显示展开与收起的控制按钮
-				this._fuGetRect('#' + this.elId).then(res => {
-					this.contentHeight = res.height
-					this.initHeight = true
-					if (res.height > uni.upx2px(this.showHeight)) {
-						this.isLongContent = true
-						this.showMore = false
-					}
-				})
-			},
-
-			/**
-			 * 查询节点信息
-			 * 当前方法在支付宝小程序中无法获取组件跟接点的尺寸
-			 * 解决办法：为组件根部再套一个没有任何作用的view元素
-			 */
-			_fuGetRect(selector, all) {
-				return new Promise((resolve) => {
-					uni.createSelectorQuery().in(this)[all ? 'selectAll' : 'select'](selector).boundingClientRect(
-						rect => {
-							if (all && Array.isArray(rect) && rect.length) {
-								resolve(rect)
-							}
-							if (!all && rect) {
-								resolve(rect)
-							}
-						}).exec()
-				})
-			},
-
-			// 展开或者收起内容
-			toggleReadMore() {
-				this.showMore = !this.showMore
-				// 是否显示收起按钮
-				if (!this.closeBtn) this.isLongContent = false
-
-				this.$emit(this.showMore ? 'open' : 'close', this.index)
-			}
-		},
-		watch: {
-			paramsChange(value) {
-				this.initHeight = false
-				this.isLongContent = false
-				this.showMore = true
-				this.$nextTick(() => {
-					this.init()
-				})
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	
-	.fu-read-more {
-
-		&__content {
-			font-size: 28rpx;
-			color: #333333;
-			line-height: 1.8;
-			text-align: left;
-			/* #ifndef APP-NVUE */
-			overflow: hidden;
-			/* #endif */
-			transition: all 0.3s linear;
-		}
-
-		&__show-more {
-			padding-top: 0;
-			background: none;
-			margin-top: 20rpx;
-
-			&__wrap {
-				@include flex(row);
-				position: relative;
-				width: 100%;
-				align-items: center;
-				justify-content: center;
-				padding-bottom: 26rpx;
-			}
-
-			&--text {
-				@include flex(row);
-				align-items: center;
-				justify-content: center;
-				line-height: 1;
-			}
-
-			&--icon {
-				margin-left: 14rpx;
-			}
-		}
-	}
-</style>

package/components/fu-read-more/props.js

@@ -1,72 +0,0 @@
-export default {
-	props: {
-		// 默认占位高度
-		showHeight: {
-			type: Number,
-			default: 400
-		},
-		// 显示收起按钮
-		closeBtn: {
-			type: Boolean,
-			default: false
-		},
-		// 展开提示文字
-		openText: {
-			type: String,
-			default: '展开阅读全文'
-		},
-		// 收起提示文字
-		closeText: {
-			type: String,
-			default: '收起'
-		},
-		// 展开提示图标
-		openIcon: {
-			type: String,
-			default: 'down'
-		},
-		/**
-		 * @description 收起提示图标
-		 */
-		closeIcon: {
-			type: String,
-			default: 'up'
-		},
-		/**
-		 * @description 阴影样式
-		 */
-		shadowStyle: {
-			type: Object,
-			default () {
-				return {
-					backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
-					paddingTop: "300rpx",
-					marginTop: "-300rpx"
-				}
-			}
-		},
-		/**
-		 * @description 组件标识
-		 */
-		index: {
-			type: [String, Number],
-			default: ''
-		},
-		/**
-		 * @description 字体颜色
-		 * @default '#e1534e'
-		 */
-		color: {
-			type: String,
-			default: '#e1534e'
-		},
-		/**
-		 * @description 字体大小
-		 * @default 14
-		 */
-		size: {
-			type: [String,Number],
-			default: 14
-		}
-	}
-}

package/components/fu-ribbon/fu-ribbon.vue

@@ -1,106 +0,0 @@
-<template>
-	<view class="fu-ribbon" :class="customClass" :style="[modeStyle, $fu.addStyle(customStyle)]">
-		<span class="fu-ribbon__span" :style="[itemStyle, afterStyle]">
-			<slot></slot>
-		</span>
-	</view>
-</template>
-
-<script>
-	import mixin from '../../libs/mixin/mixin.js'
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import props from './props.js'
-	/**
-	 * Ribbon 丝带
-	 * @description Ribbon 通常用于促销活动，品牌标识，节日主题等场景
-	 * @property {String} mode = [left|right] 位置类型
-	 * 	@value left 左侧显示
-	 * 	@value right 右侧显示
-	 * @property {String} bgColor 背景色
-	 * @property {String,Number} size 字体大小（默认 10）
-	 * @property {String} color 字体颜色
-	 * @property {String} customClass 定义需要用到的外部样式
-	 * @property {Object,String} customStyle 定义需要用到的外部样式
-	 * 
-	 * @template <fu-ribbon mode="left" bgColor="red">审核中</fu-ribbon>
-	 */
-	export default {
-		name: "FuRibbon",
-		mixins: [mixin, mpMixin, props],
-		computed: {
-			modeStyle() {
-				return {
-					[this.mode === 'left' ? 'left' : 'right']: "-5px",
-					color: this.color,
-					fontSize: this.$fu.addUnit(this.size)
-				};
-			},
-			itemStyle() {
-				return {
-					transform: this.mode === 'left' ? "rotate(-45deg)" : "rotate(45deg)",
-					'-webkit-transform': this.mode === 'left' ? "rotate(-45deg)" : "rotate(45deg)",
-					[this.mode === 'left'? 'left': 'right']: '-21px',
-					background: this.bgColor || '#2979ff'
-				};
-			},
-			afterStyle() {
-				return {
-					'--left-color': this.bgColor || '#2979ff',
-					'--top-color': this.bgColor || '#2979ff',
-					'--right-color': this.bgColor || '#2979ff'
-				}
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.fu-ribbon {
-		position: absolute;
-		top: -5px;
-		z-index: 1;
-		/* #ifndef APP-NVUE */
-		overflow: hidden;
-		/* #endif */
-		width: 75px;
-		height: 75px;
-		text-align: right;
-		
-		&__span {
-			font-weight: bold;
-			color: #FFF;
-			text-transform: uppercase;
-			text-align: center;
-			line-height: 20px;
-			width: 100px;
-			display: block;
-			box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
-			position: absolute;
-			top: 19px;
-			
-			&::before {
-				content: "";
-				position: absolute;
-				left: 0px;
-				top: 100%;
-				z-index: -1;
-				border-left: 3px solid var(--left-color);
-				border-right: 3px solid transparent;
-				border-bottom: 3px solid transparent;
-				border-top: 3px solid var(--top-color);
-			}
-			
-			&::after {
-				content: "";
-				position: absolute;
-				right: 0px;
-				top: 100%;
-				z-index: -1;
-				border-left: 3px solid transparent;
-				border-right: 3px solid var(--right-color);
-				border-bottom: 3px solid transparent;
-				border-top: 3px solid var(--top-color);
-			}
-		}
-	}
-</style>

package/components/fu-ribbon/props.js

@@ -1,35 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 位置类型
-		 * @values 'left' - 左侧, 'right' - 右侧
-		 * @default 'right'
-		 */
-		mode: {
-			type: String,
-			default: 'right'
-		},
-		/**
-		 * @description 背景颜色
-		 */
-		bgColor: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 字体大小
-		 * @default 10
-		 */
-		size: {
-			type: [String,Number],
-			default: 10
-		},
-		/**
-		 * @description 字体颜色
-		 */
-		color: {
-			type: String,
-			default: ''
-		}
-	}
-}

package/components/fu-safe-area/fu-safe-area.vue

@@ -1,61 +0,0 @@
-<template>
-	<view 
-		class="fu-safe-area"
-		:style="[safeAreaStyle]"
-		:class="[!isNvue && `fu-safe-area-inset-${mode}`]">
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	/**
-	 * SafeArea 安全区
-	 * @description 主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
-	 * @property {String} mode = [top|bottom] 安全区方向
-	 * 	@value top 顶部安全区
-	 * 	@value bottom 底部安全区
-	 * @property {String,Object} customStyle 定义需要用到的外部样式
-	 * @example <fu-safe-area></fu-safe-area>
-	 */
-	export default {
-		name: "FuSafeArea",
-		mixins: [mpMixin, mixin],
-		props: {
-			mode: {
-				type: String,
-				default: 'bottom'
-			}
-		},
-		data() {
-			return {
-				safeAreaBottomHeight: 0,
-				isNvue: false
-			}
-		},
-		computed: {
-			safeAreaStyle() {
-				let style = {};
-				// #ifdef APP-NVUE || MP-TOUTIAO || MP-LARK
-				// nvue下，高度使用js计算填充
-				style.height = this.$fu.addUnit(`${this.$fu.sys()?.safeAreaInsets[this.mode] || 0}px`);
-				// #endif
-				return this.$fu.deepMerge(style, this.$fu.addStyle(this.customStyle));
-			}
-		},
-		mounted() {
-			// #ifdef APP-NVUE
-			// 标识是否为nvue
-			this.isNvue = true;
-			// #endif
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.fu-safe-area {
-		/* #ifndef APP-NVUE */
-		width: 100%;
-		/* #endif */
-	}
-</style>