@ecolovo/uniapp-components 1.0.10 → 2.0.1

package/components/popover/popover-content.vue

@@ -1,14 +1,15 @@
 <template>
 	<view
 		:class="[
-			componentClassNames,
+			...classNames,
+			$style['PopoverContent'],
 			$style['PopoverContent--at-' + usingPosition],
 			{
 				[$style['PopoverContent--fullscreen']]: fullscreen,
 				[$style['PopoverContent--content-initialized']]: initialized,
 			},
 		]"
-		:style="styleStr"
+		:style="inlineCssVar"
 	>
 		<slot name="custom">
 			<!-- 使用自定义插槽时需要注意内容部分的尺寸，太长的内容需要手动添加 scroll-view 包裹 -->
@@ -35,78 +36,68 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
-import windowInfoMixin from '../../mixins/windowInfo';
+<script lang="ts" setup>
+import { ref, computed, nextTick, onMounted } from 'vue';
+import useClassNames from '../../composable/component-name';
+import { navBarBottomOffset, safeAreaInsetBottom } from '../../utils/windowInfo';
 import IconCpn from '../icon/icon.vue';
 
-export default {
-	name: 'PopoverContent',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { IconCpn },
-	mixins: [componentName, windowInfoMixin],
-	props: {
-		/** 弹出框位置，可选值为 top、bottom、left、right、center */
-		position: {
-			type: String,
-			default: 'bottom',
-		},
-		/** 是否占满屏幕 */
-		fullscreen: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否显示 loading 动画 */
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			/**
-			 * 弹出框是否已初始化
-			 * - 由于计算属性 usingPosition 在模拟器上会使动画显示不正常（计算属性计算滞后），
-			 * 故添加此标识在初始化完成前不作任何动画
-			 */
-			initialized: false,
-		};
-	},
-	computed: {
-		/** 计算后的位置值 */
-		usingPosition() {
-			return ['top', 'bottom', 'left', 'right', 'center'].includes(this.position) ? this.position : 'bottom';
-		},
-		styleStr() {
-			return [
-				`--header-bar-bottom: ${this.navBarBottomOffset}px;`,
-				`--safe-area-bottom: ${this.safeAreaInsetBottom}px;`,
-			].join(' ');
-		},
-	},
-	mounted() {
-		this.$nextTick(() => {
-			this.initialized = true;
-		});
-	},
+});
+
+const classNames = useClassNames('popover-content');
+
+type _Props = {
+	/** 弹出框位置，可选值为 top、bottom、left、right、center */
+	position?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+	/** 是否占满屏幕 */
+	fullscreen?: boolean;
+	/** 是否显示 loading 动画 */
+	loading?: boolean;
 };
+
+const props = withDefaults(defineProps<_Props>(), {
+	position: 'center',
+	fullscreen: false,
+	loading: false,
+});
+
+/**
+ * 弹出框是否已初始化
+ * - 由于计算属性 usingPosition 在模拟器上会使动画显示不正常（计算属性计算滞后），
+ * 故添加此标识在初始化完成前不作任何动画
+ */
+const initialized = ref(false);
+
+/** 计算后的位置值 */
+const usingPosition = computed(() => {
+	return ['top', 'bottom', 'left', 'right', 'center'].includes(props.position) ? props.position : 'center';
+});
+
+const inlineCssVar = computed(() => {
+	return [`--page-header-bottom: ${navBarBottomOffset}px;`, `--safe-area-bottom: ${safeAreaInsetBottom}px;`].join(
+		' '
+	);
+});
+
+onMounted(() => {
+	nextTick(() => {
+		initialized.value = true;
+	});
+});
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './popover' as *;
 
 // 定义外部变量
-$component-name: 'popover';
-$component-vars: $popover;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
-}
-
-:host {
-	display: block;
+	@include UTILS__DEFINE_COMPONENT_VARS($popover, 'popover');
 }
 
 .PopoverContent {
@@ -195,8 +186,8 @@ $component-vars: $popover;
 		}
 		// 顶部安全区域
 		@at-root %safe-top #{UTILS__LAST_SELECTOR(&)} {
-			padding-top: var(--header-bar-bottom);
-			--safe-top-padding: var(--header-bar-bottom);
+			padding-top: var(--page-header-bottom);
+			--safe-top-padding: var(--page-header-bottom);
 		}
 		// 底部安全区域
 		@at-root %safe-bottom #{UTILS__LAST_SELECTOR(&)} {

package/components/popover/popover-mask.vue

@@ -1,12 +1,12 @@
 <template>
 	<view
 		:class="[
-			componentClassNames,
+			...classNames,
+			$style['PopoverMask'],
 			{ [$style['PopoverMask--visible']]: isVisible, 'PopoverMask--visible': isVisible },
 		]"
-		@touchmove.stop.prevent="doNothing"
+		@touchmove.stop.prevent
 	>
-		<!-- 遮罩层 -->
 		<view
 			:class="[$style['PopoverMask--mask'], { [$style['PopoverMask--animated']]: isInitialized }]"
 			@click="onMask()"
@@ -16,84 +16,84 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import { ref, nextTick, onMounted } from 'vue';
+import useClassNames from '../../composable/component-name';
 
-export default {
-	name: 'PopoverMask',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	mixins: [componentName],
-	props: {
-		/** v-model 绑定值，控制弹出框是否可见 */
-		value: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否模态弹出框 */
-		modal: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			/** 弹出框是否可见 */
-			isVisible: false,
-			/** 控制是否有动画，其实没必要，只是在模拟器上显示不正常 */
-			isInitialized: false,
-		};
-	},
-	mounted() {
-		this.$nextTick(() => {
-			this.isVisible = true;
-			this.isInitialized = true;
-		});
-	},
-	methods: {
-		doNothing() {},
-		/** 点击遮罩层 */
-		onMask() {
-			if (this.modal) return;
-
-			this.close();
-		},
-		/** 关闭弹出框 */
-		close(onClosed) {
-			this.$emit('close');
-			this.isVisible = false;
-
-			setTimeout(() => {
-				onClosed?.();
-				this.$emit('input', false);
-				this.$emit('closed');
-			}, 300);
-		},
-	},
+});
+
+const classNames = useClassNames('popover-mask');
+
+type _Props = {
+	/** v-model 绑定值，控制弹出框是否可见 */
+	modelValue?: boolean;
+	/** 是否模态弹出框 */
+	modal?: boolean;
+};
+
+const props = withDefaults(defineProps<_Props>(), {
+	modelValue: false,
+	modal: false,
+});
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', val: boolean): void;
+	(e: 'close'): void;
+	(e: 'closed'): void;
+}>();
+
+/** 弹出框是否可见 */
+const isVisible = ref(false);
+/** 控制是否有动画，其实没必要，只是在模拟器上显示不正常 */
+const isInitialized = ref(false);
+
+onMounted(() => {
+	nextTick(() => {
+		isVisible.value = true;
+		isInitialized.value = true;
+	});
+});
+
+/** 关闭弹出框 */
+const close = (onClosed?: VoidFunction) => {
+	emit('close');
+	isVisible.value = false;
+
+	setTimeout(() => {
+		onClosed?.();
+		emit('update:modelValue', false);
+		emit('closed');
+	}, 300);
 };
+
+/** 点击遮罩层 */
+const onMask = () => {
+	if (props.modal) return;
+	close();
+};
+
+defineExpose({ close });
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './popover' as *;
 
 // 定义外部变量
-$component-name: 'popover';
-$component-vars: $popover;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
-}
-
-:host {
-	display: block;
+	@include UTILS__DEFINE_COMPONENT_VARS($popover, 'popover');
 }
 
 .PopoverMask {
 	@extend %external-vars;
 	position: fixed;
 	inset: 0;
-	z-index: UTILS__z-index();
+	z-index: UTILS__z-index('popover');
 
 	// 遮罩层
 	.PopoverMask--mask {

package/components/popover/popover.scss

@@ -0,0 +1,28 @@
+@use 'sass:map';
+@use '../../styles/utils' as *;
+
+// 可配置的变量
+$popover: () !default;
+$popover-default: (
+	// 遮罩层颜色
+	mask-color: #00000080,
+	// 背景色
+	background: #fff,
+	// 位置，position 为 center 时有效
+	position: 50% auto auto 50%,
+	// 宽度，position 为 left 、 right 或 center 时有效
+	width: 80vw,
+	// 最小高度，position 为 top 、 bottom 或 center 时有效
+	min-height: 0px,
+	// 最大高度，position 为 top 、 bottom 或 center 时有效
+	max-height: 75vh,
+	// 内边距
+	padding: 20rpx,
+	// 边框圆角
+	radius: 20rpx,
+	// 头高度
+	header-height: 0px,
+	// 尾高度
+	footer-height: 0px
+);
+$popover: map.merge($popover-default, $popover);

package/components/popover/popover.vue

@@ -1,11 +1,11 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['Popover']]">
 		<popover-mask-cpn
-			v-if="value"
-			ref="mask"
-			:value="value"
+			v-if="modelValue"
+			ref="maskRef"
+			:model-value="modelValue"
 			:modal="modal || loading"
-			@input="$emit('input', $event)"
+			@update:model-value="$emit('update:modelValue', $event)"
 			@close="$emit('close')"
 			@closed="$emit('closed')"
 		>
@@ -29,54 +29,56 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
-import windowInfoMixin from '../../mixins/windowInfo';
-import popoverContentCpn from './popover-content.vue';
-import popoverMaskCpn from './popover-mask.vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
+import useClassNames from '../../composable/component-name';
+import PopoverContentCpn from './popover-content.vue';
+import PopoverMaskCpn from './popover-mask.vue';
 
-export default {
-	name: 'Popover',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { popoverContentCpn, popoverMaskCpn },
-	mixins: [componentName, windowInfoMixin],
-	props: {
-		/** v-model 绑定值，控制弹出框是否可见 */
-		value: {
-			type: Boolean,
-			default: false,
-		},
-		/** 弹出框位置，可选值为 top、bottom、left、right、center */
-		position: {
-			type: String,
-			default: 'bottom',
-		},
-		/** 是否占满屏幕 */
-		fullscreen: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否模态弹出框 */
-		modal: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否显示 loading 动画 */
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	methods: {
-		/** 关闭弹出框 */
-		close(onClosed) {
-			this.$refs.mask.close(onClosed);
-		},
-	},
+});
+
+const classNames = useClassNames('popover');
+
+type _Props = {
+	/** v-model 绑定值，控制弹出框是否可见 */
+	modelValue?: boolean;
+	/** 弹出框位置，可选值为 top、bottom、left、right、center */
+	position?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+	/** 是否占满屏幕 */
+	fullscreen?: boolean;
+	/** 是否模态弹出框 */
+	modal?: boolean;
+	/** 是否显示 loading 动画 */
+	loading?: boolean;
+};
+
+withDefaults(defineProps<_Props>(), {
+	modelValue: false,
+	position: 'bottom',
+	fullscreen: false,
+	modal: false,
+	loading: false,
+});
+
+defineEmits<{
+	(e: 'update:modelValue', val: boolean): void;
+	(e: 'close'): void;
+	(e: 'closed'): void;
+}>();
+
+const maskRef = ref<InstanceType<typeof PopoverMaskCpn>>();
+
+/** 关闭弹出框 */
+const close = (onClosed?: VoidFunction) => {
+	maskRef.value?.close(onClosed);
 };
+
+defineExpose({ close });
 </script>
 
 <style lang="scss" module>

package/components/popup/popup-content.vue

@@ -1,5 +1,5 @@
 <template>
-	<view :class="componentClassNames">
+	<view :class="[...classNames, $style['PopupContent']]">
 		<popover-content-cpn position="bottom" :loading="loading">
 			<!-- 内容上方标题 -->
 			<template #header>
@@ -29,14 +29,18 @@
 				<slot v-if="$slots.footer" name="footer"></slot>
 				<view v-else-if="cancel || confirm" :class="$style['PopupContent--footer']">
 					<view v-if="cancel" :class="$style['PopupContent--button']">
-						<button-cpn plain @click="$emit('cancel')">
-							{{ cancel }}
-						</button-cpn>
+						<slot name="cancel">
+							<button-cpn plain @click="$emit('cancel')">
+								{{ cancel }}
+							</button-cpn>
+						</slot>
 					</view>
 					<view v-if="confirm" :class="$style['PopupContent--button']">
-						<button-cpn @click="$emit('confirm')">
-							{{ confirm }}
-						</button-cpn>
+						<slot name="confirm">
+							<button-cpn @click="$emit('confirm')">
+								{{ confirm }}
+							</button-cpn>
+						</slot>
 					</view>
 				</view>
 			</template>
@@ -44,67 +48,59 @@
 	</view>
 </template>
 
-<script>
-import componentName from '../../mixins/componentName';
+<script lang="ts" setup>
+import useClassNames from '../../composable/component-name';
 import ButtonCpn from '../button/button.vue';
 import IconCpn from '../icon/icon.vue';
 import PopoverContentCpn from '../popover/popover-content.vue';
 
-export default {
-	name: 'PopupContent',
+defineOptions({
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { ButtonCpn, IconCpn, PopoverContentCpn },
-	mixins: [componentName],
-	props: {
-		/** 是否显示 loading 动画 */
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-		/** 标题 */
-		title: {
-			type: String,
-			default: '',
-		},
-		/** 是否居中标题 */
-		centerTitle: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否显示关闭按钮 */
-		showClose: {
-			type: Boolean,
-			default: true,
-		},
-		/** 取消按钮文本，为 falsy 时( false 或 '' )不显示 */
-		cancel: {
-			type: [String, Boolean],
-			default: '取消',
-		},
-		/** 确认按钮文本，为 falsy 时( false 或 '' )不显示 */
-		confirm: {
-			type: [String, Boolean],
-			default: '确认',
-		},
-	},
+});
+
+const classNames = useClassNames('popup-content');
+
+type _Props = {
+	/** 是否显示 loading 动画 */
+	loading?: boolean;
+	/** 标题 */
+	title?: string;
+	/** 是否居中标题 */
+	centerTitle?: boolean;
+	/** 是否显示关闭按钮 */
+	showClose?: boolean;
+	/** 取消按钮文本，为 falsy 时( false 或 '' )不显示 */
+	cancel?: string | boolean;
+	/** 确认按钮文本，为 falsy 时( false 或 '' )不显示 */
+	confirm?: string | boolean;
 };
+
+withDefaults(defineProps<_Props>(), {
+	loading: false,
+	title: '',
+	centerTitle: false,
+	showClose: true,
+	cancel: '取消',
+	confirm: '确认',
+});
+
+defineEmits<{
+	(e: 'close'): void;
+	(e: 'cancel'): void;
+	(e: 'confirm'): void;
+}>();
 </script>
 
 <style lang="scss" module>
-@use '../../styles/index' as *;
+@use '../../styles/utils' as *;
+@use './popup' as *;
 
 // 定义外部变量
-$component-name: 'popup';
-$component-vars: $popup;
 %external-vars {
-	@include UTILS__DEFINE_COMPONENT_VARS();
-}
-
-:host {
-	display: block;
+	@include UTILS__DEFINE_COMPONENT_VARS($popup, 'popup');
 }
 
 .PopupContent {

package/components/popup/popup.scss

@@ -0,0 +1,11 @@
+@use 'sass:map';
+
+// 可配置的变量
+$popup: () !default;
+$popup-default: (
+	// 标题栏高度
+	header-height: 100rpx,
+	// 操作栏高度
+	footer-height: 102rpx
+);
+$popup: map.merge($popup-default, $popup);