@ecolovo/uniapp-components 1.0.9 → 2.0.0

package/components/loading/animations/loading-animation4.vue

@@ -1,20 +1,20 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['LoadingAnimation4']]">
 		<view :class="$style['LoadingAnimation4--animation']"></view>
 	</view>
 </template>
 
-<script>
-import componentName from '../../../mixins/componentName';
+<script lang="ts" setup>
+import useClassNames from '../../../composable/component-name';
 
-export default {
-	name: 'LoadingAnimation4',
+defineOptions({
 	options: {
-		virtualHost: true,
 		styleIsolation: 'shared',
+		virtualHost: true,
 	},
-	mixins: [componentName],
-};
+});
+
+const classNames = useClassNames('loading-animation4');
 </script>
 
 <style lang="scss" module>

package/components/loading/loading.vue

@@ -1,5 +1,5 @@
 <template>
-	<view :class="componentClassNames" @touchmove.stop.prevent="doNothing">
+	<view :class="[...classNames, $style['Loading']]" @touchmove.stop.prevent="doNothing">
 		<!-- #ifdef APP-PLUS -->
 		<cover-view :class="$style['Loading--wrapper-cover']" @touchmove.stop.prevent="doNothing"></cover-view>
 		<!-- #endif -->
@@ -12,35 +12,34 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import useClassNames from '../../composable/component-name';
 import LoadingAnimation3 from './animations/loading-animation3.vue';
 
-export default {
-	name: 'Loading',
+defineOptions({
 	options: {
-		virtualHost: true,
 		styleIsolation: 'shared',
+		virtualHost: true,
 	},
-	components: { LoadingAnimation3 },
-	mixins: [componentName],
-	props: {
-		title: {
-			type: String,
-			default: '加载中...',
-		},
-	},
-	methods: {
-		doNothing() {},
-	},
+});
+
+const classNames = useClassNames('loading');
+
+type _Props = {
+	/** 加载文本 */
+	title?: string;
 };
+
+withDefaults(defineProps<_Props>(), {
+	title: '加载中...',
+});
+
+const doNothing = () => {};
 </script>
 
 <style lang="scss" module>
 @use '../../styles/index' as *;
 
-$component-name: 'badge';
-
 .Loading {
 	position: fixed;
 	top: 0;
@@ -50,7 +49,7 @@ $component-name: 'badge';
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	z-index: UTILS__z-index();
+	z-index: UTILS__z-index('loading');
 	background: #0000004d;
 
 	/* #ifdef APP-PLUS */

package/components/message-box/message-box.vue

@@ -1,60 +1,78 @@
 <template>
 	<dialog-cpn
-		:value="value"
+		:model-value="isVisible"
 		:cancel="false"
-		hide-on-confirm
 		confirm="我知道了"
 		modal
 		:title="title"
-		:class="componentClassNames"
-		@input="$emit('input', $event)"
-		@confirm="$_onConfirm()"
+		:class="[...classNames, $style['MessageBox']]"
+		@update:model-value="emit('update:modelValue', $event)"
+		@confirm="onConfirm()"
+		@closed="isVisible = false"
 	>
 		{{ content }}
 	</dialog-cpn>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import { ref, useCssModule, watch } from 'vue';
+import useClassNames from '../../composable/component-name';
 import DialogCpn from '../dialog/dialog.vue';
 
-export default {
-	name: 'MessageBox',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { DialogCpn },
-	mixins: [componentName],
-	props: {
-		/** 是否可见 */
-		value: {
-			type: Boolean,
-			default: false,
-		},
-		/** 对话框标题 */
-		title: {
-			type: String,
-			default: '提示',
-		},
-		/** 是否模态 */
-		content: {
-			type: String,
-			default: '',
-		},
-	},
-	created() {
-		this._promise = new Promise((resolve) => {
-			this._resolve = resolve;
-		});
-	},
-	methods: {
-		show() {
-			return this._promise;
-		},
-		$_onConfirm() {
-			this._resolve();
-		},
-	},
+});
+
+const classNames = useClassNames('message-box');
+const $style = useCssModule();
+
+type _Props = {
+	/** 是否可见 */
+	modelValue?: boolean;
+	/** 对话框标题 */
+	title?: string;
+	/** 内容 */
+	content?: string;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: false,
+	title: '提示',
+	content: '',
+});
+
+const isVisible = ref(false);
+
+watch(
+	() => props.modelValue,
+	(v) => {
+		isVisible.value = v;
+	}
+);
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', val: boolean): void;
+}>();
+
+let resolvePromise: PromiseWithResolvers<void>['resolve'] | undefined;
+
+const show = () => {
+	emit('update:modelValue', (isVisible.value = true));
+	const { promise, resolve } = Promise.withResolvers();
+	resolvePromise = resolve;
+	return promise;
 };
+
+const onConfirm = () => {
+	resolvePromise?.();
+};
+
+defineExpose({ show });
 </script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+</style>

package/components/number-dialog/number-dialog.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+
+// 可配置的变量
+$number-dialog: () !default;
+$number-dialog-default: (
+	// 按钮尺寸
+	button-size: 48rpx
+);
+$number-dialog: map.merge($number-dialog-default, $number-dialog);