fusions-ui 1.2.7 → 1.2.8

package/components/number-box/src/composables/use-number-box.ts

@@ -0,0 +1,84 @@
+import { ref, watch, type SetupContext } from 'vue';
+import type { NumberBoxProps, NumberBoxEmits } from '../number-box';
+
+export const useNumberBox = (props: NumberBoxProps, $emit: SetupContext<NumberBoxEmits>['emit']) => {
+	const inputValue = ref(props.modelValue);
+	
+	const handleDecimalScale = (): number => {
+		let scale = 1;
+		// 浮点型
+		if (~~props.step !== props.step) {
+			scale = Math.pow(10, String(props.step).split(".")[1].length);
+		}
+		return scale;
+	};
+	
+	const handleCalcValue = (type: 'minus' | 'plus') => {
+		if (props.disabled) {
+			return;
+		}
+		const scale = handleDecimalScale();
+		let value = Number(inputValue.value) * scale;
+		let step = props.step * scale;
+		if (type === "minus") {
+			value -= step;
+			if (value < (props.min * scale)) {
+				return;
+			}
+			if (value > (props.max * scale)) {
+				value = props.max * scale
+			}
+		}
+
+		if (type === "plus") {
+			value += step;
+			if (value > (props.max * scale)) {
+				return;
+			}
+			if (value < (props.min * scale)) {
+				value = props.min * scale
+			}
+		}
+
+		inputValue.value = (value / scale).toFixed(String(scale).length - 1);
+		$emit("input", +inputValue.value);
+		$emit("update:modelValue", +inputValue.value);
+		$emit("change", +inputValue.value);
+	};
+	
+	const handleBlur = (e: any) => {
+		$emit('blur', e)
+		let value = e.detail.value;
+		if (isNaN(value)) {
+			inputValue.value = props.min;
+			return;
+		}
+		value = +value;
+		if (value > props.max) {
+			value = props.max;
+		} else if (value < props.min) {
+			value = props.min;
+		}
+		const scale = handleDecimalScale();
+		inputValue.value = value.toFixed(String(scale).length - 1);
+		$emit("input", +inputValue.value);
+		$emit("update:modelValue", +inputValue.value);
+		$emit("change", +inputValue.value);
+	};
+	
+	const handleFocus = (e: any) => {
+		$emit('focus', e)
+	};
+	
+	// watch监听事件
+	watch(() => props.modelValue, (newVal: string | number) => {
+	    inputValue.value = newVal;
+	}, { immediate: true });
+	
+	return {
+		inputValue,
+		handleCalcValue,
+		handleBlur,
+		handleFocus
+	}
+}

package/components/number-box/src/number-box.ts

@@ -0,0 +1,98 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const numberBoxProps = {
+	/**
+	 * @description v-model 输入框当前值
+	 */
+	modelValue: {
+		type: [Number, String],
+		default: 0
+	},
+	/**
+	 * @description 设置最小值
+	 * @default 0
+	 */
+	min: {
+		type: Number,
+		default: 0
+	},
+	/**
+	 * @description 设置最大值
+	 * @default 100
+	 */
+	max: {
+		type: Number,
+		default: 100
+	},
+	/**
+	 * @description 每次点击改变的间隔大小
+	 * @default 1
+	 */
+	step: {
+		type: Number,
+		default: 1
+	},
+	/**
+	 * @description 背景颜色
+	 * @default '#f5f5f5'
+	 */
+	bgColor: {
+		type: String,
+		default: '#f5f5f5'
+	},
+	/**
+	 * @description 字体颜色（前景色）
+	 * @default '#333333'
+	 */
+	color: {
+		type: String,
+		default: '#333333'
+	},
+	/**
+	 * @description 是否为禁用状态
+	 * @default false
+	 */
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 字体大小
+	 * @default 14
+	 */
+	size: {
+		type: [Number, String],
+		default: 14
+	},
+	/**
+	 * @description input是否为禁用状态
+	 * @default false
+	 */
+	inputDisabled: {
+		type: Boolean,
+		default: false
+	}
+};
+
+export const numberBoxEmits = {
+	'update:modelValue': (_e: any) => true,
+	/**
+	 * @description 输入框值改变时触发
+	 */
+	change: (_e: any) => true,
+	/**
+	 * @description 输入事件
+	 */
+	input: (_e: any) => true,
+	/**
+	 * @description 输入框聚焦时触发
+	 */
+	focus: (_e: any) => true,
+	/**
+	 * @description 输入框失焦时触发
+	 */
+	blur: (_e: any) => true
+};
+
+export type NumberBoxProps = ExtractPropTypes<typeof numberBoxProps>;
+export type NumberBoxEmits = typeof numberBoxEmits;

package/components/number-box/src/number-box.vue

@@ -0,0 +1,123 @@
+<template>
+	<view class="fu-numbox">
+		<view @click="handleCalcValue('minus')" class="fu-numbox__minus fu-numbox-btns" :style="{background: bgColor}">
+			<slot name="minus">
+				<text class="fu-numbox--text" :class="{ 'fu-numbox--disabled': inputValue <= min || disabled }" :style="{color}">-</text>
+			</slot>
+		</view>
+		<slot name="input">
+			<input 
+				:value="inputValue"
+				class="fu-numbox__value" 
+				:style="[inputStyle]"
+				:disabled="inputDisabled" 
+				@focus="handleFocus" 
+				@blur="handleBlur" 
+				type="number" />
+		</slot>
+		<view @click="handleCalcValue('plus')" class="fu-numbox__plus fu-numbox-btns" :style="{background: bgColor}">
+			<slot name="plus">
+				<text class="fu-numbox--text" :class="{ 'fu-numbox--disabled': inputValue >= max || disabled }" :style="{color}">+</text>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * NumberBox 数字输入框
+	 * @description 此组件带加减按钮的数字输入框
+	 * @tutorial http://www.fusions.top/components/numberBox.html
+	 * @property {Number | String} v-model 输入框当前值
+	 * @property {Number} min 设置最小值（默认 0）
+	 * @property {Number} max 设置最大值（默认 100）
+	 * @property {Number} step 每次点击改变的间隔大小（默认 1）
+	 * @property {String} bgColor 背景颜色
+	 * @property {String} color 字体颜色（前景色）
+	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
+	 * @property {Boolean} inputDisabled = [true|false]  input是否为禁用状态
+	 * @property {Number | String} size 自定义字体大小（默认 14）
+	 * 
+	 * @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
+	 * @event {Function} focus 输入框聚焦时触发的事件，参数为 event 对象
+	 * @event {Function} blur 输入框失焦时触发的事件，参数为 event 对象
+	 * @example <fu-number-box></fu-number-box>
+	 */
+	import { numberBoxEmits, numberBoxProps } from './number-box';
+	import { useNumberBox, useNumberBoxCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuNumberBox', options: { virtualHost: true } });
+	
+	const props = defineProps(numberBoxProps);
+	const $emit = defineEmits(numberBoxEmits);
+	
+	const {
+		inputValue,
+		handleCalcValue,
+		handleBlur,
+		handleFocus
+	} = useNumberBox(props, $emit);
+	
+	const {
+		inputStyle
+	} = useNumberBoxCustomStyle(props);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	$box-height: 26px;
+	$bg: #f5f5f5;
+	$br: 2px;
+	$color: #333;
+
+	.fu-numbox {
+		@include components.flex(row);
+	}
+
+	.fu-numbox-btns {
+		@include components.flex(row);
+		align-items: center;
+		justify-content: center;
+		padding: 0 8px;
+		background-color: $bg;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.fu-numbox__value {
+		margin: 0 2px;
+		background-color: $bg;
+		width: 40px;
+		height: $box-height;
+		text-align: center;
+		font-size: 14px;
+		border-left-width: 0;
+		border-right-width: 0;
+		color: $color;
+	}
+
+	.fu-numbox__minus {
+		border-top-left-radius: $br;
+		border-bottom-left-radius: $br;
+	}
+
+	.fu-numbox__plus {
+		border-top-right-radius: $br;
+		border-bottom-right-radius: $br;
+	}
+
+	.fu-numbox--text {
+		line-height: 20px;
+		font-size: 20px;
+		font-weight: 300;
+		color: $color;
+	}
+
+	.fu-numbox .fu-numbox--disabled {
+		color: #c0c0c0 !important;
+		/* #ifdef H5 */
+		cursor: not-allowed;
+		/* #endif */
+	}
+</style>

package/components/parse/index.ts

@@ -0,0 +1 @@
+export * from './src/parse'

package/components/parse/src/app-plus/html/js/handler.js

@@ -0,0 +1,254 @@
+// 等待初始化完毕
+document.addEventListener('UniAppJSBridgeReady', () => {
+	document.body.onclick = () =>
+		uni.postMessage({
+			data: {
+				action: 'onClick'
+			}
+		})
+	uni.postMessage({
+		data: {
+			action: 'onJSBridgeReady'
+		}
+	})
+})
+
+let options
+let medias = []
+
+/**
+ * @description 获取标签的所有属性
+ * @param {Element} ele
+ */
+function getAttrs(ele) {
+	const attrs = Object.create(null)
+	for (let i = ele.attributes.length; i--;) {
+		attrs[ele.attributes[i].name] = ele.attributes[i].value
+	}
+	return attrs
+}
+
+/**
+ * @description 图片加载出错
+ */
+function onImgError() {
+	if (options[1]) {
+		this.src = options[1]
+		this.onerror = null
+	}
+	// 取消监听点击
+	this.onclick = null
+	this.ontouchstart = null
+	uni.postMessage({
+		data: {
+			action: 'onError',
+			source: 'img',
+			attrs: getAttrs(this)
+		}
+	})
+}
+
+/**
+ * @description 检查是否所有图片加载完毕
+ */
+function checkReady() {
+	window.unloadimgs -= 1
+	if (window.unloadimgs === 0) {
+		// 所有图片加载完毕
+		uni.postMessage({
+			data: {
+				action: 'onReady'
+			}
+		})
+	}
+}
+
+/**
+ * @description 创建 dom 结构
+ * @param {object[]} nodes 节点数组
+ * @param {Element} parent 父节点
+ * @param {string} namespace 命名空间
+ */
+function createDom(nodes, parent, namespace) {
+	for (let i = 0; i < nodes.length; i++) {
+		const node = nodes[i]
+		let ele
+		if (!node.type || node.type === 'node') {
+			let name = node.name
+			// svg 需要设置 namespace
+			if (name === 'svg') {
+				namespace = 'http://www.w3.org/2000/svg'
+			}
+			if (name === 'html' || name === 'body') {
+				name = 'div'
+			}
+			// 创建标签
+			if (!namespace) {
+				ele = document.createElement(name)
+			} else {
+				ele = document.createElementNS(namespace, name)
+			}
+			// 设置属性
+			for (const item in node.attrs) {
+				ele.setAttribute(item, node.attrs[item])
+			}
+			// 递归创建子节点
+			if (node.children) {
+				createDom(node.children, ele, namespace)
+			}
+
+			// 处理图片
+			if (name === 'img') {
+				window.unloadimgs += 1
+				ele.onload = checkReady
+				ele.onerror = checkReady
+				if (!ele.src && ele.getAttribute('data-src')) {
+					ele.src = ele.getAttribute('data-src')
+				}
+				if (!node.attrs.ignore) {
+					// 监听图片点击事件
+					ele.onclick = function(e) {
+						e.stopPropagation()
+						uni.postMessage({
+							data: {
+								action: 'onImgTap',
+								attrs: getAttrs(this)
+							}
+						})
+					}
+				}
+				if (options[2]) {
+					const image = new Image()
+					image.src = ele.src
+					ele.src = options[2]
+					image.onload = function() {
+						ele.src = this.src
+					}
+					image.onerror = function() {
+						ele.onerror()
+					}
+				}
+				ele.onerror = onImgError
+			} else if (name === 'a') {
+				// 处理链接
+				ele.addEventListener('click', function(e) {
+					e.stopPropagation()
+					e.preventDefault() // 阻止默认跳转
+					const href = this.getAttribute('href')
+					let offset
+					if (href && href[0] === '#') {
+						offset = (document.getElementById(href.substr(1)) || {}).offsetTop
+					}
+					uni.postMessage({
+						data: {
+							action: 'onLinkTap',
+							attrs: getAttrs(this),
+							offset
+						}
+					})
+				}, true)
+			} else if (name === 'video' || name === 'audio') {
+				// 处理音视频
+				medias.push(ele)
+				if (!node.attrs.autoplay && !node.attrs.controls) {
+					ele.setAttribute('controls', 'true')
+				}
+				ele.onplay = function() {
+					uni.postMessage({
+						data: {
+							action: 'onPlay'
+						}
+					})
+					if (options[3]) {
+						for (let i = 0; i < medias.length; i++) {
+							if (medias[i] !== this) {
+								medias[i].pause()
+							}
+						}
+					}
+				}
+				ele.onerror = function() {
+					uni.postMessage({
+						data: {
+							action: 'onError',
+							source: name,
+							attrs: getAttrs(this)
+						}
+					})
+				}
+			} else if (name === 'table' && options[4] && !ele.style.cssText.includes('inline')) {
+				// 处理表格
+				const div = document.createElement('div')
+				div.style.overflow = 'auto'
+				div.appendChild(ele)
+				ele = div
+			} else if (name === 'svg') {
+				namespace = undefined
+			}
+		} else {
+			ele = document.createTextNode(node.text.replace(/&amp;/g, '&'))
+		}
+		parent.appendChild(ele)
+	}
+}
+
+// 设置 html 内容
+window.setContent = function(nodes, opts, append) {
+	const ele = document.getElementById('content')
+
+	// 容器样式
+	if (opts[0]) {
+		document.body.style.cssText = opts[0]
+	}
+
+	// 长按复制
+	if (!opts[5]) {
+		ele.style.userSelect = 'none'
+	}
+
+	if (!append) {
+		ele.innerHTML = '' // 不追加则先清空
+		medias = []
+	}
+
+	options = opts
+	window.unloadimgs = 0
+	const fragment = document.createDocumentFragment()
+	createDom(nodes, fragment)
+	ele.appendChild(fragment)
+
+	// 触发事件
+	let height = ele.scrollHeight
+	uni.postMessage({
+		data: {
+			action: 'onLoad',
+			height
+		}
+	})
+	if (!window.unloadimgs) {
+		uni.postMessage({
+			data: {
+				action: 'onReady',
+				height
+			}
+		})
+	}
+
+	clearInterval(window.timer)
+	window.timer = setInterval(() => {
+		if (ele.scrollHeight !== height) {
+			height = ele.scrollHeight
+			uni.postMessage({
+				data: {
+					action: 'onHeightChange',
+					height: height
+				}
+			})
+		}
+	}, 350)
+}
+
+// 回收计时器
+window.onunload = function() {
+	clearInterval(window.timer)
+}