@ecolovo/uniapp-components 1.0.9 → 2.0.0

package/components/searching/searching.vue

@@ -1,5 +1,5 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['Searching']]">
 		<image v-if="image" :src="image" :class="$style['Searching--image']" />
 		<view v-else :class="$style['Searching--search-icon-animation']">
 			<icon-cpn icon="search" :class="$style['Searching--search-icon']" />
@@ -10,52 +10,36 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import useClassNames from '../../composable/component-name';
 import IconCpn from '../icon/icon.vue';
 
-export default {
-	name: 'Searching',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { IconCpn },
-	mixins: [componentName],
-	props: {
-		/** 图片 */
-		image: {
-			type: String,
-			default: '',
-		},
-		/** 文本 */
-		text: {
-			type: String,
-			default: '数据加载中',
-		},
-	},
+});
+
+const classNames = useClassNames('searching');
+
+type _Props = {
+	/** 图片 */
+	image?: string;
+	/** 文本 */
+	text?: string;
 };
+
+withDefaults(defineProps<_Props>(), {
+	image: '',
+	text: '数据加载中',
+});
 </script>
 
 <style lang="scss" module>
 @use '../../styles/index' as *;
 
-// 自定义样式变量前缀，与组件名称一致
-$component-prefix: '#{$ec-component-prefix}-searching';
-// 自定义样式变量
-%external-vars {
-	@include define-component-vars(
-		$image-size: 300rpx,
-		$image-width: var(--image-size),
-		$image-height: var(--image-size),
-		$space: get-value('size-m'),
-		$color: get-value('color-info'),
-		$font-size: get-value('size-font-m')
-	);
-}
-
 .Searching {
-	@extend %external-vars;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -63,8 +47,8 @@ $component-prefix: '#{$ec-component-prefix}-searching';
 }
 .Searching--image {
 	position: relative;
-	width: var(--image-width);
-	height: var(--image-height);
+	width: 300rpx;
+	height: 300rpx;
 }
 .Searching--search-icon-animation {
 	width: 100rpx;
@@ -75,12 +59,21 @@ $component-prefix: '#{$ec-component-prefix}-searching';
 .Searching--search-icon {
 	position: absolute;
 	font-size: 60rpx;
-	color: var(--color);
+	color: #999;
 	animation: circle 1.5s linear infinite reverse;
 }
 .Searching--text {
-	margin-top: var(--space);
-	color: var(--color);
-	font-size: var(--font-size);
+	margin-top: 20rpx;
+	color: #999;
+	font-size: 28rpx;
+}
+
+@keyframes circle {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
 }
 </style>

package/components/selector/selector.vue

@@ -1,11 +1,8 @@
 <template>
-	<view :class="componentClassNames" @click="onClick">
-		<text v-if="isReadonly || value" :class="$style['Selector--text']">
-			<slot>
-				{{ value || '' }}
-			</slot>
+	<view :class="[...classNames, $style['Selector']]" @click="onClick">
+		<text v-if="isReadonly || modelValue" :class="$style['Selector--text']">
+			<slot>{{ modelValue || '' }}</slot>
 		</text>
-
 		<text v-else :class="[$style['Selector--text'], $style['Selector--placeholder']]">
 			{{ placeholder }}
 		</text>
@@ -13,54 +10,52 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
-import { isFormReadonly } from '../form/mixin';
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+import useClassNames from '../../composable/component-name';
 import IconCpn from '../icon/icon.vue';
 
-export default {
-	name: 'Selector',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { IconCpn },
-	mixins: [componentName, isFormReadonly],
-	props: {
-		/** 绑定值 */
-		value: {
-			type: [String, null],
-			default: '',
-		},
-		/** 是否禁用 */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否只读 */
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-		/** 占位文本 */
-		placeholder: {
-			type: String,
-			default: '请选择',
-		},
-	},
-	computed: {
-		isReadonly() {
-			return this.readonly || this.isFormReadonly;
-		},
-	},
-	methods: {
-		onClick() {
-			if (this.disabled || this.isReadonly) {
-				return;
-			}
-			this.$emit('click');
-		},
-	},
+});
+
+const classNames = useClassNames('selector');
+
+type _Props = {
+	/** 绑定值 */
+	modelValue?: string | null;
+	/** 是否禁用 */
+	disabled?: boolean;
+	/** 是否只读 */
+	readonly?: boolean;
+	/** 占位文本 */
+	placeholder?: string;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: '',
+	disabled: false,
+	readonly: false,
+	placeholder: '请选择',
+});
+
+const emit = defineEmits<{
+	(e: 'click'): void;
+}>();
+
+const isFormReadonly = inject(
+	'ecolovo/form/readonly',
+	computed(() => false)
+);
+
+const isReadonly = computed(() => props.readonly || isFormReadonly.value);
+
+const onClick = () => {
+	if (props.disabled || isReadonly.value) return;
+	emit('click');
 };
 </script>
 

package/components/switch/switch.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use '../../styles/utils' as *;
+
+// 可配置的变量
+$switch: () !default;
+$switch-default: (
+	width: 92rpx,
+	height: 48rpx,
+	active-color: UTILS__GLOBAL_VAR(theme, primary),
+	indicator-size: 42rpx,
+);
+$switch: map.merge($switch-default, $switch);

package/components/switch/switch.vue

@@ -1,10 +1,11 @@
 <template>
 	<view
 		:class="[
-			componentClassNames,
+			...classNames,
+			$style['Switch'],
 			{
 				[$style['Switch--disabled']]: disabled || loading,
-				[$style['Switch--switch-on']]: value === valueOn,
+				[$style['Switch--switch-on']]: modelValue === valueOn,
 			},
 		]"
 		@click.stop="toggle"
@@ -15,115 +16,117 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
-import { isFormReadonly } from '../form/mixin';
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue';
+import useClassNames from '../../composable/component-name';
 import IconCpn from '../icon/icon.vue';
 
-export default {
-	name: 'Switch',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { IconCpn },
-	mixins: [componentName, isFormReadonly],
-	props: {
-		/** 绑定值 */
-		value: {
-			type: [Boolean, Number, String],
-			default: false,
-		},
-		/** 是否异步事件 */
-		async: {
-			type: Boolean,
-			default: false,
-		},
-		/** 开启状态的值 */
-		valueOn: {
-			type: [Boolean, Number, String],
-			default: true,
-		},
-		/** 关闭状态的值 */
-		valueOff: {
-			type: [Boolean, Number, String],
-			default: false,
-		},
-		/** 是否禁用 */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否只读 */
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			/** 是否加载中状态 */
-			loading: false,
-		};
-	},
-	computed: {
-		isReadonly() {
-			return this.readonly || this.isFormReadonly;
-		},
-		/** 按钮是否可点击 */
-		isNotClickable() {
-			return this.disabled || this.isReadonly || this.loading;
-		},
-	},
-	methods: {
-		/** 开启或关闭 */
-		toggle() {
-			if (this.isNotClickable) return;
-
-			if (!this.async) {
-				this.$_toggle();
-				return;
-			}
+});
+
+const classNames = useClassNames('switch');
+
+type _Props = {
+	/** 绑定值 */
+	modelValue?: boolean | number | string;
+	/** 是否异步事件 */
+	async?: boolean;
+	/** 开启状态的值 */
+	valueOn?: boolean | number | string;
+	/** 关闭状态的值 */
+	valueOff?: boolean | number | string;
+	/** 是否禁用 */
+	disabled?: boolean;
+	/** 是否只读 */
+	readonly?: boolean;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: false,
+	async: false,
+	valueOn: true,
+	valueOff: false,
+	disabled: false,
+	readonly: false,
+});
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', val: boolean | number | string): void;
+	(
+		e: 'async',
+		payload: {
+			value: boolean | number | string;
+			resolve: (value: unknown) => void;
+			reject: (reason?: unknown) => void;
+		}
+	): void;
+}>();
+
+/** 表单是否只读 */
+const isFormReadonly = inject(
+	'ecolovo/form/readonly',
+	computed(() => false)
+);
 
-			this.loading = true;
-			const nextValue = this.value !== this.valueOn ? this.valueOn : this.valueOff;
-			const { promise, resolve, reject } = Promise.withResolvers();
-			promise
-				.then((isOk = true) => {
-					if (isOk === false) return;
-					this.$_toggle();
-				})
-				.catch((err) => {
-					if (process.env.NODE_ENV === 'development') {
-						// eslint-disable-next-line no-console
-						console.warn(`${this.componentClass} unresolved error:`, err);
-					}
-				})
-				.finally(() => {
-					this.loading = false;
-				});
-			this.$emit('async', { value: nextValue, resolve, reject });
-		},
-		/** 开启或关闭，组件内部调用 */
-		$_toggle() {
-			if (this.value !== this.valueOn) {
-				this.$emit('input', this.valueOn);
-			} else {
-				this.$emit('input', this.valueOff);
+/** 是否加载中状态 */
+const loading = ref(false);
+
+/** 是否只读 */
+const isReadonly = computed(() => props.readonly || isFormReadonly.value);
+
+/** 按钮是否可点击 */
+const isNotClickable = computed(() => props.disabled || isReadonly.value || loading.value);
+
+/** 开启或关闭 */
+const toggle = () => {
+	if (isNotClickable.value) return;
+
+	if (!props.async) {
+		$_toggle();
+		return;
+	}
+
+	loading.value = true;
+	const nextValue = props.modelValue !== props.valueOn ? props.valueOn : props.valueOff;
+	const { promise, resolve, reject } = Promise.withResolvers();
+	promise
+		.then((isOk = true) => {
+			if (isOk === false) return;
+			$_toggle();
+		})
+		.catch((err) => {
+			if (import.meta.env.DEV) {
+				// eslint-disable-next-line no-console
+				console.warn(`${classNames[0]} unresolved error:`, err);
 			}
-		},
-	},
+		})
+		.finally(() => {
+			loading.value = false;
+		});
+	emit('async', { value: nextValue, resolve, reject });
+};
+
+/** 开启或关闭，组件内部调用 */
+const $_toggle = () => {
+	if (props.modelValue !== props.valueOn) {
+		emit('update:modelValue', props.valueOn);
+	} else {
+		emit('update:modelValue', props.valueOff);
+	}
 };
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './switch' as *;
 
 // 定义外部变量
-$component-name: 'switch';
-$component-vars: $switch;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
+	@include UTILS__DEFINE_COMPONENT_VARS($switch, 'switch');
 }
 
 .Switch {

package/components/tab/tab.scss

@@ -0,0 +1,19 @@
+@use 'sass:map';
+@use '../../styles/utils' as *;
+
+// 可配置的变量
+$tab: () !default;
+$tab-default: (
+	height: 88rpx,
+	tab-padding: 0 10rpx,
+	tab-gaps: 0,
+	color: UTILS__GLOBAL_VAR(color, foreground),
+	font-size: UTILS__GLOBAL_VAR(font-size, large),
+	font-weight: 600,
+	background: #ffffff,
+	border-radius: 0,
+	active-color: UTILS__LOCAL_VAR(color),
+	indicator-color: UTILS__GLOBAL_VAR(theme, primary),
+	indicator-width: null,
+);
+$tab: map.merge($tab-default, $tab);