fusions-ui 1.2.7 → 1.2.8

package/components/index-list/src/index-list.vue

@@ -0,0 +1,178 @@
+<template>
+	<view class="fu-index-list">
+		<!-- #ifdef APP-NVUE -->
+		<list 
+			ref="fuIndexList" 
+			:scrollTop="scrollTop" 
+			enable-back-to-top 
+			:offset-accuracy="1" 
+			:style="{maxHeight: $fu.addUnit(scrollViewHeight,'px')}" 
+			@scroll="scrollHandler">
+			<cell ref="header">
+				<slot name="header" />
+			</cell>
+			<slot />
+			<cell>
+				<slot name="footer" />
+			</cell>
+		</list>
+		<!-- #endif -->
+		<!-- #ifndef APP-NVUE -->
+		<scroll-view 
+			ref="fuIndexList" 
+			:scrollTop="scrollTop" 
+			:scrollIntoView="scrollIntoView" 
+			:offset-accuracy="1" 
+			:style="{maxHeight: $fu.addUnit(scrollViewHeight, 'px')}" 
+			scroll-y 
+			@scroll="scrollHandler">
+			<view>
+				<slot name="header" />
+			</view>
+			<slot />
+			<view>
+				<slot name="footer" />
+			</view>
+		</scroll-view>
+		<!-- #endif -->
+		<view 
+			ref="fu-index-list__letter"
+			class="fu-index-list__letter"
+			:style="{ top: $fu.addUnit(letterInfo.top || 100, 'px') }" 
+			@touchstart="touchStart"
+			@touchmove.stop.prevent="touchMove" 
+			@touchend.stop.prevent="touchEnd" 
+			@touchcancel.stop.prevent="touchEnd">
+			<view 
+				class="fu-index-list__letter__item" 
+				v-for="(item, index) in indexLetterList" :key="index" 
+				:style="{backgroundColor: activeIndex === index ? activeColor : 'transparent'}">
+				<text class="fu-index-list__letter__item__index" :style="{color: activeIndex === index ? '#fff' : inactiveColor}">{{ item }}</text>
+			</view>
+		</view>
+		<fu-transition 
+			mode="fade" 
+			:show="touching" 
+			:customStyle="{
+				position: 'fixed',
+				right: '40px',
+				top: $fu.addUnit(indicatorTop,'px'),
+				zIndex: 2
+			}">
+			<view class="fu-index-list__indicator__box">
+				<view 
+					class="fu-index-list__indicator" 
+					:class="['fu-index-list__indicator--show']" 
+					:style="{
+						height: $fu.addUnit(indicatorHeight, 'px'),
+						width: $fu.addUnit(indicatorHeight, 'px')
+					}">
+					<text class="fu-index-list__indicator__text">{{ indexLetterList[activeIndex] }}</text>
+				</view>
+			</view>
+		</fu-transition>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * IndexList 索引列表
+	 * @description 此组件通过折叠面板收纳内容区域
+	 * @tutorial http://www.fusions.top/components/index-list.html
+	 * @property {String} inactiveColor	右边锚点非激活的颜色 (默认 '#606266')
+	 * @property {String} activeColor 右边锚点激活的颜色 (默认 '#2979ff')
+	 * @property {Array} indexList 索引字符列表，数组形式
+	 * @property {Boolean} sticky = [true|false] 是否开启锚点自动吸顶 (默认 true)
+	 * @property {String | Number} customNavHeight 自定义导航栏的高度 (默认 0)
+	 * 
+	 * @event {Function} select 选中右边索引字符时触发
+	 * */
+	import { indexListEmits, indexListProps } from './index-list';
+	import { useIndexList } from './composables';
+	 
+	defineOptions({ name: 'FuIndexList', options: { virtualHost: true } });
+	
+	const props = defineProps(indexListProps);
+	const $emit = defineEmits(indexListEmits);
+	
+	const {
+		activeIndex,
+		letterInfo,
+		touching,
+		scrollTop,
+		scrollViewHeight,
+		scrollIntoView,
+		indicatorHeight,
+		indexLetterList,
+		indicatorTop,
+		touchStart,
+		touchMove,
+		touchEnd,
+		scrollHandler
+	} = useIndexList(props, $emit);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	@use '../../../style/color.scss' as *;
+
+	.fu-index-list {
+
+		&__letter {
+			position: fixed;
+			right: 0;
+			text-align: center;
+			z-index: 3;
+			padding: 0 6px;
+
+			&__item {
+				width: 16px;
+				height: 16px;
+				border-radius: 100px;
+				margin: 1px 0;
+				@include components.flex;
+				align-items: center;
+				justify-content: center;
+
+				&--active {
+					background-color: $fu-color-primary;
+				}
+
+				&__index {
+					font-size: 12px;
+					text-align: center;
+					line-height: 12px;
+				}
+			}
+		}
+
+		&__indicator__box {
+			width: 65px;
+			height: 65px;
+			padding: 6px;
+			transform: rotate(-45deg);
+			box-sizing: border-box;
+		}
+
+		&__indicator {
+			width: 50px;
+			height: 50px;
+			border-radius: 100px 100px 0 100px;
+			text-align: center;
+			color: #ffffff;
+			background-color: #c9c9c9;
+			@include components.flex;
+			justify-content: center;
+			align-items: center;
+
+			&__text {
+				font-size: 28px;
+				line-height: 28px;
+				font-weight: bold;
+				color: #fff;
+				transform: rotate(45deg);
+				text-align: center;
+			}
+		}
+	}
+</style>

package/components/index.ts

@@ -0,0 +1,62 @@
+export * from './avatar'
+export * from './avatar-group'
+export * from './badge'
+export * from './banner-arc'
+export * from './button'
+export * from './cell'
+export * from './cell-group'
+export * from './checkbox'
+export * from './code-input'
+export * from './code-verify'
+export * from './collapse'
+export * from './collapse-item'
+export * from './countdown'
+export * from './datetime-picker'
+export * from './form'
+export * from './form-item'
+export * from './grid'
+export * from './grid-item'
+export * from './icon'
+export * from './image'
+export * from './index-anchor'
+export * from './index-item'
+export * from './index-list'
+export * from './input'
+export * from './keyboard'
+export * from './line'
+export * from './link'
+export * from './loading'
+export * from './loading-more'
+export * from './modal'
+export * from './navbar'
+export * from './notice-bar'
+export * from './number-box'
+export * from './parse'
+export * from './picker'
+export * from './popup'
+export * from './progress'
+export * from './rate'
+export * from './read-more'
+export * from './safe-bottom'
+export * from './scroll-list'
+export * from './search'
+export * from './section'
+export * from './sign-board'
+export * from './skeleton'
+export * from './steps'
+export * from './steps-item'
+export * from './sticky'
+export * from './subsection'
+export * from './swipe-action-item'
+export * from './swiper'
+export * from './switch'
+export * from './tabs'
+export * from './tag'
+export * from './text'
+export * from './textarea'
+export * from './timeaxis-item'
+export * from './transition'
+export * from './upload'
+export * from './vtabs'
+export * from './vtabs-item'
+export * from './waterfall'

package/components/input/index.ts

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

package/components/input/src/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './input-custom'
+export * from './use-input'

package/components/input/src/composables/input-custom.ts

@@ -0,0 +1,69 @@
+import { Ref, computed } from 'vue';
+import type { InputProps } from '../input';
+
+export const useInputCustomStyle = (props: InputProps, focused: Ref<boolean>, innerValue: Ref<string | number>) => {
+	// 是否显示清除控件
+	const isShowClear = computed(() => {
+		const { clearable, readonly } = props;
+		
+		return !!clearable && !readonly && !!focused.value && innerValue.value !== "";
+	});
+	
+	// 组件的类名
+	const inputClass = computed(() => {
+		let classes = [], { border, shape } = props;
+		border === 'surround' && (classes = classes.concat(['fu-border']));
+		classes.push(`fu-input-${shape}`);
+		border === 'bottom' && (classes = classes.concat(['fu-border-bottom', 'fu-input-no-radius']));
+		
+		return classes.join(' ');
+	});
+	
+	// 组件的样式
+	const wrapperStyle = computed(() => {
+		const style: Record<string, any> = {
+			margin: props.margin
+		};
+		// 禁用状态下，被背景色加上对应的样式
+		if (props.disabled) {
+			style.backgroundColor = props.disabledColor;
+		}
+		// 无边框时，去除内边距
+		if (props.border === "none") {
+			style.padding = "0";
+		} else {
+			// 由于uni-app的iOS开发者能力有限，导致需要分开写才有效
+			style.paddingTop = '10px';
+			style.paddingBottom = '10px';
+			style.paddingLeft = '8px';
+			style.paddingRight = '8px';
+		}
+		
+		return uni.$fu.deepMerge(style, uni.$fu.addStyle(props.customStyle));
+	});
+	
+	// 输入框的样式
+	const inputStyle = computed(() => {
+		let style: Record<string, any> = {
+			color: props.color,
+			fontSize: uni.$fu.addUnit(props.size),
+			textAlign: props.align,
+		};
+		if(props.disabled || props.readonly) {
+			style['pointer-events'] = 'none';
+			// 禁用状态下，被背景色加上对应的样式 兼容支付宝小程序
+			if (props.disabled) {
+				style.backgroundColor = props.disabledColor;
+			}
+		}
+		
+		return style;
+	})
+		
+	return {
+		isShowClear,
+		inputClass,
+		wrapperStyle,
+		inputStyle
+	}
+}

package/components/input/src/composables/use-input.ts

@@ -0,0 +1,117 @@
+import { ref, nextTick, type SetupContext, watch } from 'vue';
+import type { InputProps, InputEmits } from '../input';
+
+export const useInput = (props: InputProps, $emit: SetupContext<InputEmits>['emit']) => {
+	// 输入框的值
+	const innerValue = ref<any>('');
+	// H5端的blur会先于点击清除控件的点击click事件触发，导致focused瞬间为false，从而隐藏了清除控件而无法被点击到
+	const focused = ref(false);
+	// value是否第一次变化，在watch中，由于加入immediate属性，会在第一次触发，此时不应该认为value发生了变化
+	const firstChange = ref(true);
+	// value绑定值的变化是由内部还是外部引起的
+	const changeFromInner = ref(false);
+	// 过滤处理方法
+	const innerFormatter = ref<(value: string) => string>((value) => value)
+	
+	 // 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
+	const setFormatter = (e: (value: string) => string) => {
+		innerFormatter.value = e
+	};
+	
+	// 当键盘输入时，触发input事件
+	const handleInput = (e: any) => {
+		let { value = '' } = e.detail || {};
+		// 格式化过滤方法
+		const formatter = props.formatter || innerFormatter.value;
+		const formatValue = formatter(value)
+		// 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效
+		innerValue.value = value
+		nextTick(() => {
+			innerValue.value = formatValue;
+			valueChange();
+		})
+	};
+	
+	// 内容发生变化，进行处理
+	const valueChange = () => {
+		const value = innerValue.value;
+		nextTick(() => {
+			$emit('input', value);
+			$emit('update:modelValue', value);
+			// 标识value值的变化是由内部引起的
+			changeFromInner.value = true;
+			$emit('change', value);
+		});
+	};
+	
+	// 输入框失去焦点时触发
+	const handleBlur = (e: any) => {
+		$emit("blur", e.detail.value);
+		// H5端的blur会先于点击清除控件的点击click事件触发，导致focused
+		// 瞬间为false，从而隐藏了清除控件而无法被点击到
+		uni.$fu.sleep(50).then(() => {
+			focused.value = false;
+		});
+	};
+	
+	// 输入框聚焦时触发
+	const handleFocus = () => {
+		focused.value = true;
+		$emit("focus");
+	};
+	
+	// 点击清除控件
+	const handleClear = () => {
+		innerValue.value = "";
+		nextTick(() => {
+			valueChange();
+			$emit("clear");
+		});
+	};
+	
+	// 点击完成按钮时触发
+	const handleConfirm = () => {
+		$emit("confirm", innerValue.value);
+	};
+	
+	// 点击input时触发（仅readonly=true时生效）
+	const handleClick = (e: any) => {
+		e.stopPropagation(); // 阻止事件向上传播
+		if(props.readonly) {
+			$emit('click')
+		}
+	};
+	
+	// 键盘高度发生变化的时候触发此事件
+	// 兼容性：微信小程序2.7.0+、App 3.1.0+
+	const handleKeyboardheightchange = () => {
+		$emit("keyboardheightchange");
+	};
+	
+	// watch监听事件
+	watch(() => props.modelValue, (newVal) => {
+		innerValue.value = newVal;
+		/* #ifdef H5 */
+		// 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
+		if (firstChange.value === false && changeFromInner.value === false) {
+			valueChange();
+		}
+		/* #endif */
+		firstChange.value = false;
+		// 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
+		changeFromInner.value = false;
+	}, { immediate: true });
+	  
+	return {
+		innerValue,
+		focused,
+		setFormatter,
+		handleInput,
+		handleBlur,
+		handleFocus,
+		handleClear,
+		handleConfirm,
+		handleClick,
+		handleKeyboardheightchange
+	}
+}