@ecolovo/uniapp-components 1.0.10 → 2.0.1

package/components/tab/tab.vue

@@ -1,18 +1,18 @@
 <template>
-	<view :class="[componentClassNames, { [$style['Tab--evenly']]: evenly }]" :style="styleStr">
+	<view :class="[...classNames, $style['Tab'], { [$style['Tab--evenly']]: evenly }]" :style="inlineStyle">
 		<scroll-view scroll-x :class="$style['Tab--tab-scroll']">
 			<view :class="$style['Tab--tab-wrapper']">
 				<view
 					v-for="(tab, index) in tabLabels"
 					:key="index"
-					:class="[[$style['Tab--tab']], { [$style['Tab--tab-active']]: index === tabIndex }]"
+					:class="[[$style['Tab--tab']], { [$style['Tab--tab-active']]: index === selectedIndex }]"
 					@click="onChangeTab(index)"
 				>
 					<view :class="$style['Tab--tab-text']">{{ tab }}</view>
 				</view>
 				<view
 					v-if="indicator"
-					:class="[$style['Tab--indicator'], { [$style['Tab--initialing']]: !initialized }]"
+					:class="[$style['Tab--indicator'], { [$style['Tab--indicator-animation']]: hasAnimation }]"
 				>
 				</view>
 			</view>
@@ -20,160 +20,166 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import { computed, getCurrentInstance, nextTick, onMounted, ref, useCssModule, watch } from 'vue';
+import useClassNames from '../../composable/component-name';
 
-export default {
-	name: 'Tab',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	mixins: [componentName],
-	props: {
-		value: {
-			type: [String, Number, null],
-			default: null,
-		},
-		tabs: {
-			type: Array,
-			default: () => [],
-		},
-		/** 是否均分大小 */
-		evenly: {
-			type: Boolean,
-			default: true,
-		},
-		/** 是否显示指示器 */
-		indicator: {
-			type: Boolean,
-			default: true,
-		},
-	},
-	data() {
-		return {
-			/** 组件内部记录的索引值 */
-			innerIndex: 0,
-			/** 左边距 */
-			boundingLeft: 0,
-			/** 标签的绘制信息 */
-			tabRects: [],
-			/** 是否已初始化 */
-			initialized: false,
-		};
-	},
-	computed: {
-		/** 当前选中的索引 */
-		selectedIndex: {
-			get: function () {
-				return this.value === null ? this.innerIndex : this.value;
-			},
-			set: function (value) {
-				this.$emit('input', value);
-				this.innerIndex = value;
-				this.$emit('change', this.innerIndex);
-			},
-		},
-		isTabsNotEmpty() {
-			return this.tabs && this.tabs.length > 0;
-		},
-		isStringTabs() {
-			return this.tabs.every((item) => typeof item === 'string');
-		},
-		tabLabels() {
-			return this.tabs.map((item) => (typeof item === 'string' ? item : item.label));
-		},
-		/** 当前值对应的索引 */
-		tabIndex() {
-			if (!this.isTabsNotEmpty) return 0;
-			return this.isStringTabs
-				? Number(this.selectedIndex) || 0
-				: this.tabs.findIndex((item) => item.value === this.selectedIndex);
-		},
-		/** 指示器宽度 */
-		indicatorWidth() {
-			const rect = this.tabRects[this.tabIndex];
-			if (!rect) return 0;
-			return rect.width;
-		},
-		/** 指示器中心点 */
-		indicatorCenter() {
-			const rect = this.tabRects[this.tabIndex];
-			if (!rect) return 0;
-			return rect.left + rect.width / 2 - this.boundingLeft;
-		},
-		styleStr() {
-			return [
-				`--tab-count: ${this.tabs.length};`,
-				`--tab-text-width: ${this.indicatorWidth}px;`,
-				`--indicator-center: ${this.indicatorCenter}px;`,
-			].join(' ');
-		},
-	},
-	watch: {
-		tabs: {
-			handler() {
-				if (this.isStringTabs) {
-					this.selectedIndex = Math.min(this.selectedIndex, this.tabs.length - 1);
-					return;
-				}
-				if (this.isTabsNotEmpty && this.tabIndex < 0) {
-					this.selectedIndex = this.tabs[0].value;
-				}
-			},
-			immediate: true,
-		},
+});
+
+const classNames = useClassNames('tab');
+const $style = useCssModule();
+
+type _TabItem = {
+	/** 标题 */
+	label: string;
+	/** 值 */
+	value: string | number;
+};
+
+type _Props = {
+	/** 绑定值，当前所选 tab 的索引 */
+	modelValue?: number;
+	/** 值，当前所选 tab 的值，当 tabs 为字符串列表时，不使用该值 */
+	value?: string | number;
+	/** 页签配置 */
+	tabs?: string[] | _TabItem[];
+	/** 是否均分大小 */
+	evenly?: boolean;
+	/** 是否显示指示器 */
+	indicator?: boolean;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: undefined,
+	value: undefined,
+	tabs: () => [],
+	evenly: true,
+	indicator: true,
+});
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', payload: number): void;
+	(e: 'update:value', payload: string | number | undefined): void;
+	(e: 'change', payload: number): void;
+}>();
+
+/** 组件内部记录索引用的值 */
+const innerIndex = ref<number>(0);
+/** 组件左边距 */
+const boundingLeft = ref(0);
+/** 标签文本的尺寸信息 */
+const tabTextRects = ref<UniApp.NodeInfo[]>([]);
+/** 标签移动是否应用动画 */
+const hasAnimation = ref(false);
+
+/** 标签标题列表 */
+const tabLabels = computed(() => props.tabs.map((item) => (typeof item === 'string' ? item : item.label)));
+/** 当前选中的索引 */
+const selectedIndex = computed<number>({
+	get: () => (props.modelValue === undefined ? innerIndex.value : props.modelValue),
+	set: (value) => {
+		emit('update:modelValue', value);
+		innerIndex.value = value;
 	},
-	mounted() {
-		uni.createSelectorQuery()
-			.in(this)
-			.select('.' + this.$style['Tab--tab-wrapper'])
-			.boundingClientRect((rect) => {
-				this.boundingLeft = rect.left;
-			})
-			.exec();
-		uni.createSelectorQuery()
-			.in(this)
-			.selectAll('.' + this.$style['Tab--tab-text'])
-			.boundingClientRect((rects) => {
-				if (!rects[this.tabIndex]) return;
-				this.tabRects = rects;
-				this.$nextTick(() => {
-					this.initialized = true;
-				});
-			})
-			.exec();
+});
+
+// 监听选项、索引、值的变化，以保证 tab 选择始终是对应的
+watch(
+	[() => props.tabs, selectedIndex, () => props.value],
+	([nTabs, nIdx, nVal], [_t, _i, oVal]) => {
+		// 如果值改变了，查找对应的索引
+		if (nVal !== oVal && nVal !== undefined) {
+			nIdx = nTabs.findIndex((i) => (typeof i === 'string' ? nVal === i : nVal === i.value));
+		}
+		if (nIdx < 0) nIdx = 0;
+		const tab = nTabs[nIdx];
+		// 再度获取对应索引位置的值，如果是字符串类型标签，则为 undefined
+		nVal = typeof tab === 'string' ? undefined : tab?.value;
+		const idx = nIdx < 0 || nIdx >= nTabs.length ? 0 : nIdx;
+		if (selectedIndex.value !== idx) {
+			// 更新索引和值
+			selectedIndex.value = nIdx < 0 || nIdx >= nTabs.length ? 0 : nIdx;
+			emit('change', idx);
+		}
+		emit('update:value', nVal);
 	},
-	methods: {
-		/** 改变标签响应 */
-		onChangeTab(index) {
-			if (this.isStringTabs) {
-				if (this.selectedIndex === index) return;
-
-				this.selectedIndex = index;
-			} else {
-				if (this.selectedIndex === this.tabs[index].value) return;
-
-				this.selectedIndex = this.tabs[index].value;
-			}
-			this.$emit('change', this.selectedIndex);
+	{ immediate: true, deep: true }
+);
+
+/** 指示器宽度 */
+const indicatorWidth = computed(() => {
+	const rect = tabTextRects.value[selectedIndex.value];
+	if (!rect) return 0;
+	return rect.width;
+});
+
+/** 指示器中心点 */
+const indicatorCenter = computed(() => {
+	const rect = tabTextRects.value[selectedIndex.value];
+	if (!rect || !rect.width) return 0;
+	return (rect.left || 0) + rect.width / 2 - boundingLeft.value;
+});
+
+const inlineStyle = computed(() => {
+	return [
+		`--tab-count: ${props.tabs.length};`,
+		`--tab-text-width: ${indicatorWidth.value}px;`,
+		`--indicator-center: ${indicatorCenter.value}px;`,
+	].join(' ');
+});
+
+const vm = getCurrentInstance();
+
+onMounted(() => {
+	uni.createSelectorQuery()
+		.in(vm)
+		.select('.' + $style['Tab--tab-wrapper'])
+		.boundingClientRect((rect) => {
+			boundingLeft.value = (rect as UniApp.NodeInfo).left || 0;
+		})
+		.exec();
+
+	// 选项发生变化，重新计算各个选项的尺寸信息
+	watch(
+		() => props.tabs,
+		() => {
+			hasAnimation.value = false;
+			nextTick(() => {
+				uni.createSelectorQuery()
+					.in(vm)
+					.selectAll('.' + $style['Tab--tab-text'])
+					.boundingClientRect((rects) => {
+						tabTextRects.value = rects as UniApp.NodeInfo[];
+						nextTick(() => {
+							hasAnimation.value = true;
+						});
+					})
+					.exec();
+			});
 		},
-	},
+		{ immediate: true, deep: true }
+	);
+});
+
+/** 改变标签响应 */
+const onChangeTab = (index: number) => {
+	selectedIndex.value = index;
+	// emit('change', selectedIndex.value);
 };
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './tab' as *;
 
 // 定义外部变量
-$component-name: 'tab';
-$component-vars: $tab;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
-}
-
-:host {
-	display: block;
+	@include UTILS__DEFINE_COMPONENT_VARS($tab, 'tab');
 }
 
 .Tab {
@@ -226,9 +232,9 @@ $component-vars: $tab;
 	border-radius: 10rpx;
 	background: UTILS__LOCAL_VAR(indicator-color);
 	transform: translateX(-50%);
-	&:not(.Tab--initialing) {
-		left: var(--indicator-center);
-		width: UTILS__LOCAL_VAR(indicator-width, var(--tab-text-width));
+	left: var(--indicator-center, 0);
+	width: UTILS__LOCAL_VAR(indicator-width, var(--tab-text-width, 0));
+	&.Tab--indicator-animation {
 		transition: left 0.3s, width 0.3s;
 	}
 }

package/components/textarea/textarea.vue

@@ -1,16 +1,16 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['Textarea']]">
 		<template v-if="!isReadonly">
 			<textarea
-				:value="value"
+				:value="modelValue"
 				:maxlength="maxlength"
 				:auto-height="autoHeight"
 				:class="$style['Textarea--input']"
-				@input="$emit('input', $event.detail.value)"
-				@blur="$_trim"
+				@input="onInput"
+				@blur="trimValue"
 			>
 			</textarea>
-			<view v-if="!value" :class="$style['Textarea--placeholder']">
+			<view v-if="!modelValue" :class="$style['Textarea--placeholder']">
 				<slot name="placeholder">
 					<icon-cpn icon="textarea-edit" :class="$style['Textarea--icon']" />
 					<text> {{ placeholder }} </text>
@@ -19,125 +19,123 @@
 			<view :class="$style['Textarea--counter']"> 已输入 {{ count }}/{{ maxlength }} </view>
 		</template>
 		<!-- 只读文本展示 -->
-		<view v-else-if="value" :class="$style['Textarea--readonly']">
-			<view :class="{ [$style['Textarea--fold']]: fold && isFolded }"> {{ value }} </view>
+		<view v-else-if="modelValue" :class="$style['Textarea--readonly']">
+			<view :class="{ [$style['Textarea--fold']]: fold && isFolded }"> {{ modelValue }} </view>
 			<view v-if="fold && hasFoldButton" :class="$style['Textarea--fold-button']" @click="isFolded = !isFolded">
 				<text v-if="isFolded"> <icon-cpn icon="arrow-down" /> 展开 </text>
 				<text v-else> <icon-cpn icon="arrow-up" /> 收起 </text>
 			</view>
 			<!-- 隐藏文字，用于计算是否显示收起展开按钮 -->
-			<view v-if="fold" :class="[$style['Textarea--hidden-text'], $style['Textarea--fold']]"> {{ value }} </view>
-			<view v-if="fold" :class="$style['Textarea--hidden-text']"> {{ value }} </view>
+			<view v-if="fold" :class="[$style['Textarea--hidden-text'], $style['Textarea--fold']]">
+				{{ modelValue }}
+			</view>
+			<view v-if="fold" :class="$style['Textarea--hidden-text']"> {{ modelValue }} </view>
 		</view>
 		<!-- 空文本展示 -->
 		<view v-else :class="[$style['Textarea--readonly'], $style['Textarea--empty']]"> 未填写 </view>
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
-import { isFormReadonly } from '../form/mixin';
+<script lang="ts" setup>
+import { computed, getCurrentInstance, inject, nextTick, ref, useCssModule, watch } from 'vue';
+import useClassNames from '../../composable/component-name';
 import IconCpn from '../icon/icon.vue';
 
-export default {
-	name: 'Textarea',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { IconCpn },
-	mixins: [componentName, isFormReadonly],
-	props: {
-		/** 绑定值 */
-		value: {
-			type: String,
-			default: '',
-		},
-		/** 最大输入文本长度 */
-		maxlength: {
-			type: Number,
-			default: 300,
-		},
-		/** 占位文本 */
-		placeholder: {
-			type: String,
-			default: '请输入',
-		},
-		/** 是否自动调整高度 */
-		autoHeight: {
-			type: Boolean,
-			default: true,
-		},
-		/** 是否只读 */
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-		/** 当只读时，如果文字过多，是否折叠 */
-		fold: {
-			type: Boolean,
-			default: true,
-		},
-	},
-	data() {
-		return {
-			/** 是否有收起展开按钮 */
-			hasFoldButton: false,
-			/** 当前是否处于收起状态 */
-			isFolded: true,
-		};
-	},
-	computed: {
-		/** 是否只读 */
-		isReadonly() {
-			return this.readonly || this.isFormReadonly;
-		},
-		/** 已输入字符长度 */
-		count() {
-			return this.value.length;
-		},
-	},
-	watch: {
-		isReadonly: {
-			handler(newVal) {
-				if (newVal && this.fold) {
-					this.$nextTick(() => {
-						this.shouldShowFold();
-					});
-				}
-			},
-			immediate: true,
-		},
-	},
-	methods: {
-		/** 去除头尾空白字符 */
-		$_trim(event) {
-			this.$emit('input', event.detail.value.trim());
-		},
-		/** 计算是否需要显示收起展开按钮 */
-		shouldShowFold() {
-			uni.createSelectorQuery()
-				.in(this)
-				.selectAll('.' + this.$style['Textarea--hidden-text'])
-				.boundingClientRect((rects) => {
-					this.hasFoldButton = rects.length === 2 && rects[1].height > rects[0].height;
-				})
-				.exec();
-		},
+});
+
+const classNames = useClassNames('textarea');
+const $style = useCssModule();
+
+type _Props = {
+	/** 绑定值 */
+	modelValue?: string;
+	/** 最大输入文本长度 */
+	maxlength?: number;
+	/** 占位文本 */
+	placeholder?: string;
+	/** 是否自动调整高度 */
+	autoHeight?: boolean;
+	/** 是否只读 */
+	readonly?: boolean;
+	/** 当只读时，如果文字过多，是否折叠 */
+	fold?: boolean;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: '',
+	maxlength: 300,
+	placeholder: '请输入',
+	autoHeight: true,
+	readonly: false,
+	fold: true,
+});
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', val: string): void;
+}>();
+
+/** 表单是否只读 */
+const isFormReadonly = inject(
+	'ecolovo/form/readonly',
+	computed(() => false)
+);
+
+/** 是否有收起展开按钮 */
+const hasFoldButton = ref(false);
+/** 当前是否处于收起状态 */
+const isFolded = ref(true);
+
+/** 是否只读 */
+const isReadonly = computed(() => props.readonly || isFormReadonly.value);
+
+/** 已输入字符长度 */
+const count = computed(() => props.modelValue.length);
+
+const vm = getCurrentInstance();
+
+/** 计算是否需要显示收起展开按钮 */
+const shouldShowFold = () => {
+	uni.createSelectorQuery()
+		.in(vm)
+		.selectAll('.' + $style['Textarea--hidden-text'])
+		.boundingClientRect((rects) => {
+			if (!Array.isArray(rects)) return;
+			hasFoldButton.value = rects.length === 2 && (rects[1]?.height || 0) > (rects[0]?.height || 0);
+		})
+		.exec();
+};
+
+watch(
+	() => isReadonly.value,
+	(newVal) => {
+		if (newVal && props.fold) {
+			nextTick(() => {
+				shouldShowFold();
+			});
+		}
 	},
+	{ immediate: true }
+);
+
+/** 输入响应 */
+const onInput = (e: Event) => {
+	emit('update:modelValue', (e as CustomEvent).detail.value);
+};
+
+/** 去除头尾空白字符 */
+const trimValue = (e: Event) => {
+	emit('update:modelValue', (e as CustomEvent).detail.value.trim());
 };
 </script>
 
 <style lang="scss" module>
 @use '../../styles/index' as *;
 
-:host {
-	display: block;
-}
-:host(.display-inline) {
-	display: inline;
-}
-
 .Textarea {
 	flex: 1;
 	position: relative;
@@ -173,7 +171,12 @@ export default {
 	overflow: hidden;
 }
 .Textarea--fold {
-	@include UTILS__ELLIPSIS(5);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 5;
+	line-clamp: 5;
+	-webkit-box-orient: vertical;
 }
 .Textarea--fold-button {
 	text-align: right;

package/composable/component-name.d.ts

@@ -0,0 +1,2 @@
+declare const useClassNames: (componentName: string) => [string, string];
+export default useClassNames;

package/composable/component-name.js

@@ -0,0 +1,8 @@
+import { kebabCase, pascalCase } from 'case-anything';
+import { componentPrefix } from '../configs';
+const useClassNames = (componentName) => {
+	const pascalCaseClass = pascalCase(componentPrefix) + pascalCase(componentName);
+	const kebabCaseClass = kebabCase(pascalCaseClass);
+	return [pascalCaseClass, kebabCaseClass];
+};
+export default useClassNames;

package/composable/component-name.ts

@@ -0,0 +1,10 @@
+import { kebabCase, pascalCase } from 'case-anything';
+import { componentPrefix } from '../configs';
+
+const useClassNames = (componentName: string): [string, string] => {
+	const pascalCaseClass = pascalCase(componentPrefix) + pascalCase(componentName);
+	const kebabCaseClass = kebabCase(pascalCaseClass);
+	return [pascalCaseClass, kebabCaseClass];
+};
+
+export default useClassNames;

package/configs/index.d.ts

@@ -2,21 +2,36 @@
 declare let componentPrefix: string;
 /** 首页路径 */
 declare let homePath: string;
-/** 设置组件前缀 */
-declare const setComponentPrefix: (prefix: string) => void;
-/** 设置首页路径 */
-declare const setHomePath: (path: string) => void;
+/**
+ * 设置组件前缀
+ * @param prefix 组件前缀
+ */
+declare function setComponentPrefix(prefix?: string): void;
+/**
+ * 设置首页路径
+ * @param path 首页路径
+ */
+declare function setHomePath(path?: string): void;
+interface IconInfo {
+	/** 字体文件名 */
+	fontFamily: string;
+	/** 图标前缀 */
+	prefix: string;
+	/** 图标名称 */
+	name: string;
+}
 /** iconfont 图标 map */
-declare let iconMap: Map<string, { fontFamily: string; prefix: string; name: string }>;
-interface IconFontJson {
+declare const iconMap: Map<string, IconInfo>;
+export interface IconFontJson {
 	font_family: string;
 	css_prefix_text: string;
-	glyphs: { font_class: string }[];
+	glyphs: {
+		font_class: string;
+	}[];
 }
 /**
  * 添加一组图标，传入 iconfont.json 文件内容
  * @param iconJson iconfont.json 文件内容
  */
-declare const addIcons: (iconJson: IconFontJson) => void;
-
-export { componentPrefix, homePath, IconFontJson, setComponentPrefix, setHomePath, iconMap, addIcons };
+declare function addIcons(iconJson: IconFontJson): void;
+export { componentPrefix, homePath, setComponentPrefix, setHomePath, iconMap, addIcons };