@ecolovo/uniapp-components 1.0.9 → 2.0.0

package/components/flex/flex.vue

@@ -1,68 +1,59 @@
 <template>
-	<view :class="componentClassNames" :style="styleStr">
+	<view :class="[...classNames, $style['Flex']]" :style="flexStyle">
 		<slot></slot>
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import { computed } from 'vue';
+import useClassNames from '../../composable/component-name';
 
-export default {
-	name: 'Flex',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	mixins: [componentName],
-	props: {
-		/** 排版方向 */
-		direction: {
-			type: String,
-			Validator: (value) => ['row', 'row-reverse', 'column', 'column-reverse'].includes(value),
-			default: 'row',
-		},
-		/** 当前轴对齐方式 */
-		justify: {
-			type: String,
-			Validator: (value) =>
-				['start', 'center', 'end', 'space-between', 'space-around', 'space-evenly'].includes(value),
-			default: 'start',
-		},
-		/** 交叉轴对齐方式 */
-		align: {
-			type: String,
-			Validator: (value) => ['start', 'center', 'end', 'baseline', 'stretch'].includes(value),
-			default: 'center',
-		},
-		/** 是否换行 */
-		wrap: {
-			type: Boolean,
-			default: false,
-		},
-		/** 间距 */
-		gap: {
-			type: [String, Number, Array],
-			default: '0px',
-		},
-	},
-	computed: {
-		gapValue() {
-			if (Array.isArray(this.gap)) {
-				return this.gap.map((item) => (typeof item === 'number' ? uni.upx2px(item) + 'px' : item)).join(' ');
-			}
-			return typeof this.gap === 'number' ? uni.upx2px(this.gap) + 'px' : this.gap;
-		},
-		styleStr() {
-			return [
-				`flex-direction: ${this.direction};`,
-				`justify-content: ${this.justify};`,
-				`align-items: ${this.align};`,
-				`flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'};`,
-				`gap: ${this.gapValue};`,
-			].join(' ');
-		},
-	},
+});
+
+const classNames = useClassNames('flex');
+
+type _Props = {
+	/** 排版方向 */
+	direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+	/** 当前轴对齐方式 */
+	justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+	/** 交叉轴对齐方式 */
+	align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+	/** 是否换行 */
+	wrap?: boolean;
+	/** 间距 */
+	gap?: string | number | (string | number)[];
 };
+
+const props = withDefaults(defineProps<_Props>(), {
+	direction: 'row',
+	justify: 'start',
+	align: 'center',
+	wrap: false,
+	gap: '0px',
+});
+
+const gapValue = computed(() => {
+	if (Array.isArray(props.gap)) {
+		return props.gap.map((item) => (typeof item === 'number' ? uni.upx2px(item) + 'px' : item)).join(' ');
+	}
+	return typeof props.gap === 'number' ? uni.upx2px(props.gap) + 'px' : props.gap;
+});
+
+const flexStyle = computed(() => {
+	return [
+		`flex-direction: ${props.direction};`,
+		`justify-content: ${props.justify};`,
+		`align-items: ${props.align};`,
+		`flex-wrap: ${props.wrap ? 'wrap' : 'nowrap'};`,
+		`gap: ${gapValue.value};`,
+	].join('');
+});
 </script>
 
 <style lang="scss" module>

package/components/form/form.vue

@@ -1,35 +1,40 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames]">
 		<slot></slot>
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import { computed, provide } from 'vue';
+import useClassNames from '../../composable/component-name';
 
-export default {
-	name: 'Form',
+defineOptions({
 	options: {
-		virtualHost: true,
 		styleIsolation: 'shared',
+		virtualHost: true,
 	},
-	mixins: [componentName],
-	provide() {
-		return {
-			formProps: this.$props,
-		};
-	},
-	props: {
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-		/** 显示类型 */
-		type: {
-			type: String,
-			validator: (val) => !val || ['line', 'next', 'block'].includes(val),
-			default: 'line',
-		},
-	},
+});
+
+const classNames = useClassNames('form');
+
+type _Props = {
+	/** 是否只读 */
+	readonly?: boolean;
+	/** 表单显示类型 */
+	type?: 'line' | 'next' | 'block';
 };
+
+const props = withDefaults(defineProps<_Props>(), {
+	readonly: false,
+	type: 'line',
+});
+
+provide(
+	'ecolovo/form/readonly',
+	computed(() => props.readonly)
+);
+provide(
+	'ecolovo/form/type',
+	computed(() => props.type)
+);
 </script>

package/components/form-item/form-item.scss

@@ -0,0 +1,11 @@
+@use 'sass:map';
+
+// 可配置的变量
+$form-item: () !default;
+$form-item-default: (
+	// label 宽度
+	label-width: 6em,
+	// 高度
+	height: 80rpx
+);
+$form-item: map.merge($form-item-default, $form-item);

package/components/form-item/form-item.vue

@@ -1,7 +1,8 @@
 <template>
 	<view
 		:class="[
-			componentClassNames,
+			...classNames,
+			$style['FormItem'],
 			{
 				[$style['FormItem--line']]: usingType === 'line',
 				[$style['FormItem--next']]: usingType === 'next',
@@ -19,56 +20,58 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
-import { isFormReadonly } from '../form/mixin';
+<script lang="ts" setup>
+import { computed, ComputedRef, inject } from 'vue';
+import useClassNames from '../../composable/component-name';
 
-export default {
-	name: 'FormItem',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	mixins: [componentName, isFormReadonly],
-	props: {
-		/** 标签文本 */
-		label: {
-			type: String,
-			default: '',
-		},
-		/** 副标签文本 */
-		subLabel: {
-			type: String,
-			default: '',
-		},
-		/** 是否必填 */
-		required: {
-			type: Boolean,
-			default: false,
-		},
-		/** 显示类型 */
-		type: {
-			type: String,
-			validator: (val) => !val || ['line', 'next', 'block'].includes(val),
-			default: '',
-		},
-	},
-	computed: {
-		usingType() {
-			return this.type || this.formProps.type || 'line';
-		},
-	},
+});
+
+const classNames = useClassNames('form-item');
+
+type _Props = {
+	/** 标签文本 */
+	label?: string;
+	/** 副标签文本 */
+	subLabel?: string;
+	/** 是否必填 */
+	required?: boolean;
+	/** 显示类型 */
+	type?: 'line' | 'next' | 'block';
 };
+
+const props = withDefaults(defineProps<_Props>(), {
+	label: '',
+	subLabel: '',
+	required: false,
+	type: undefined,
+});
+
+/** 表单是否只读 */
+const isFormReadonly = inject<ComputedRef<boolean>>(
+	'ecolovo/form/readonly',
+	computed(() => false)
+);
+/** 表单显示类型 */
+const formType = inject<ComputedRef<'line' | 'next' | 'block'>>(
+	'ecolovo/form/type',
+	computed<'line' | 'next' | 'block'>(() => 'line')
+);
+
+/** 显示类型 */
+const usingType = computed(() => props.type || formType.value);
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './form-item' as *;
 
-// 定义外部变量
-$component-name: 'form-item';
-$component-vars: $form-item;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
+	@include UTILS__DEFINE_COMPONENT_VARS($form-item, 'form-item');
 }
 
 .FormItem {

package/components/icon/icon.vue

@@ -1,108 +1,93 @@
 <template>
 	<text
-		:class="[componentClassNames, iconClass, loadingAnimation, { [$style['Icon--expand-tap-size']]: tapSize }]"
-		:style="styleStr"
-		@click="$emit('click')"
-	>
-	</text>
+		:class="[
+			...classNames,
+			...iconClass,
+			$style['Icon'],
+			{
+				[$style['Icon--spinning']]: spinning,
+			},
+		]"
+	></text>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import { computed } from 'vue';
+import useClassNames from '../../composable/component-name';
 import { iconMap } from '../../configs';
 
-const iconListStr = iconMap.keys().toArray().sort().join('\n');
-
-export default {
-	name: 'Icon',
+defineOptions({
 	options: {
-		virtualHost: true,
 		styleIsolation: 'shared',
+		virtualHost: true,
 	},
-	mixins: [componentName],
-	props: {
-		/** 图标名 */
-		icon: {
-			type: String,
-			default: '',
-		},
-		/** 点击范围 */
-		tapSize: {
-			type: String,
-			default: '',
-		},
-	},
-	computed: {
-		iconClass() {
-			const iconInfo = iconMap.get(this.icon);
-			if (!iconInfo) {
-				/* eslint-disable no-console */
-				console.error(`${this.componentClass} Error: 找不到图标 "${this.icon}"`);
-				if (process.env.NODE_ENV === 'development') {
-					console.groupCollapsed(`%c查看解决方法`, 'color: orange');
-					console.warn(
-						[
-							'请检查是否在 `main.js` 文件中调用了组件库的 `init` 方法，并传入了图标文件的 json 文件',
-							'例：',
-							'```',
-							'// main.js',
-							"import init from '@ecolovo/uniapp-components/init';",
-							"init({ iconfont: require('@/resources/iconfont/some_icon/iconfont.json') });",
-							'\n// App.vue -> <style>',
-							"@import '@/resources/iconfont/iconfont.css';",
-							'```',
-							`\n当前可用图标: `,
-							iconListStr,
-						].join('\n')
-					);
-					console.groupEnd();
-				}
-				/* eslint-enable no-console */
-				return [];
-			}
-			return [iconInfo.fontFamily, iconInfo.prefix + iconInfo.name];
-		},
-		loadingAnimation() {
-			return /(?<![a-zA-Z])loading(?![a-zA-Z])/.test(this.icon) ? this.$style['Icon--spinner'] : '';
-		},
-		styleStr() {
-			return `--tap-size: ${this.tapSize || '100%'};`;
-		},
-	},
+});
+
+const classNames = useClassNames('icon');
+
+type _Props = {
+	/** 图标名 */
+	icon: string;
+	/** 旋转动画 */
+	spinning?: boolean;
 };
+
+const props = withDefaults(defineProps<_Props>(), {
+	spinning: false,
+});
+
+const iconEntry = computed(() => {
+	/* eslint-disable no-console */
+	if (!props.icon) console.error('icon 不能为空');
+
+	const icon = iconMap.get(props.icon);
+
+	if (!icon) {
+		console.error(`${classNames[0]}: 找不到图标 "${props.icon}"`);
+		if (import.meta.env.DEV) {
+			console.groupCollapsed(`%c查看解决方法`, 'color: orange');
+			console.warn(
+				[
+					'请检查是否在 `main.ts` 文件中调用了组件库的 `init` 方法，并传入了图标文件的 json 文件',
+					'例：',
+					'```',
+					'// main.js',
+					"import { init } from '@ecolovo/uniapp-components';",
+					"import iconJson from '@/resources/iconfont/some_icon/iconfont.json';",
+					'init({ iconfont: iconJson });',
+					'\n// App.vue -> <style>',
+					"@import '@/resources/iconfont/iconfont.css';",
+					'```',
+					`\n当前可用的图标列表: `,
+					[...iconMap.keys()].join('\n'),
+				].join('\n')
+			);
+			console.groupEnd();
+		}
+	}
+
+	return icon;
+	/* eslint-enable no-console */
+});
+
+const iconClass = computed(() =>
+	iconEntry.value ? [iconEntry.value.fontFamily, iconEntry.value.prefix + iconEntry.value.name] : []
+);
 </script>
 
 <style lang="scss">
 @import '../../resources/iconfont/uniapp_ui_icon/iconfont.css';
-
-.uniapp_ui_icon {
-	font-size: inherit;
-	line-height: inherit;
-}
 </style>
-
 <style lang="scss" module>
 .Icon {
-	display: inline-block;
 	font-size: inherit;
-	color: inherit;
-}
-.Icon--expand-tap-size {
-	position: relative;
-	&::after {
-		content: '';
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		width: var(--tap-size, 100%);
-		height: var(--tap-size, 100%);
-		transform: translate(-50%, -50%);
-	}
+	line-height: inherit;
 }
-.Icon--spinner {
-	animation: circle var(--animation-duration, 0.75s) linear infinite;
+.Icon--spinning {
+	display: inline-block;
+	animation: Icon--circle var(--animation-duration, 0.75s) linear infinite;
 
-	@keyframes circle {
+	@keyframes Icon--circle {
 		0% {
 			rotate: 0deg;
 		}

package/components/image/image.vue

@@ -2,54 +2,51 @@
 	<image
 		:src="src || ''"
 		:preview-list="previewList"
-		:class="componentClassNames"
+		:class="[...classNames, $style['Image']]"
 		:mode="mode"
 		@click="preview"
 	></image>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import useClassNames from '../../composable/component-name';
 
-export default {
-	name: 'Image',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	mixins: [componentName],
-	props: {
-		/** 图片地址 */
-		src: {
-			type: String,
-			default: '',
-		},
-		/** 图片显示模式 */
-		mode: {
-			type: String,
-			default: '',
-		},
-		/** 预览列表 */
-		previewList: {
-			type: Array,
-			default: () => [],
-		},
-	},
-	methods: {
-		preview() {
-			if (this.previewList.length > 0) {
-				uni.previewImage({
-					current: this.src,
-					urls: this.previewList,
-				});
-				return;
-			}
-			uni.previewImage({
-				current: this.src,
-				urls: [this.src],
-			});
-		},
-	},
+});
+
+const classNames = useClassNames('image');
+
+type _Props = {
+	/** 图片地址 */
+	src?: string;
+	/** 图片显示模式 */
+	mode?: string;
+	/** 预览列表 */
+	previewList?: string[];
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	src: '',
+	mode: '',
+	previewList: () => [],
+});
+
+const preview = () => {
+	if (props.previewList.length > 0) {
+		uni.previewImage({
+			current: props.src,
+			urls: props.previewList,
+		});
+		return;
+	}
+	uni.previewImage({
+		current: props.src,
+		urls: [props.src],
+	});
 };
 </script>