@ecolovo/uniapp-components 1.0.0

package/components/picker/picker.vue

@@ -0,0 +1,151 @@
+<template>
+	<view :class="componentClassNames">
+		<selector-cpn
+			:value="valueStr"
+			:readonly="isReadonly"
+			:disabled="disabled"
+			:placeholder="placeholder"
+			@click="showPicker"
+		/>
+
+		<slot name="popup">
+			<picker-popup-cpn
+				v-if="isPickerVisible"
+				v-model="isPickerVisible"
+				:title="popupTitle"
+				:options="options"
+				:multiple="multiple"
+				:checked="checkedOptions"
+				:value-key="valueKey"
+				:label-key="labelKey"
+				@confirm="onConfirm"
+			/>
+		</slot>
+	</view>
+</template>
+
+<script>
+import isEqual from 'lodash-es/isEqual';
+import componentName from '../../mixins/componentName';
+import { isFormReadonly } from '../form/mixin';
+import SelectorCpn from '../selector/selector.vue';
+import PickerPopupCpn from './picker-popup.vue';
+
+export default {
+	name: 'AppPicker',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { SelectorCpn, PickerPopupCpn },
+	mixins: [componentName, isFormReadonly],
+	props: {
+		/** 绑定值 */
+		value: {
+			type: [String, Number, Boolean, Object, Array],
+			default: null,
+		},
+		/** 绑定值文本 */
+		valueText: {
+			type: String,
+			default: '',
+		},
+		/** 选项唯一标识 */
+		valueKey: {
+			type: String,
+			default: 'id',
+		},
+		/** 选项标签字段 */
+		labelKey: {
+			type: String,
+			default: 'label',
+		},
+		/** 是否禁用 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否只读 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		/** 占位文本 */
+		placeholder: {
+			type: String,
+			default: '请选择',
+		},
+		/** 弹出框标题 */
+		popupTitle: {
+			type: String,
+			default: '请选择',
+		},
+		/** 选项 */
+		options: {
+			type: Array,
+			default: () => [],
+		},
+		/** 是否多选 */
+		multiple: {
+			type: Boolean,
+			default: false,
+		},
+		/** 多选时选项拼接的分隔符 */
+		joinText: {
+			type: String,
+			default: '、',
+		},
+	},
+	data() {
+		return {
+			/** 选择框是否可见 */
+			isPickerVisible: false,
+		};
+	},
+	computed: {
+		isReadonly() {
+			return this.readonly || this.isFormReadonly;
+		},
+		checkedOptions() {
+			if (this.multiple) {
+				return this.options.filter((item) => this.value.includes(item[this.valueKey]));
+			}
+			return this.options.filter((item) => item[this.valueKey] === this.value);
+		},
+		valueStr() {
+			if (this.valueText) return this.valueText;
+			if (this.value === null) return '';
+			return this.checkedOptions.map((item) => item[this.labelKey]).join(this.joinText);
+		},
+	},
+	methods: {
+		showPicker() {
+			if (this.disabled || this.isReadonly) {
+				return;
+			}
+
+			this.isPickerVisible = true;
+			this.$emit('show');
+		},
+
+		onConfirm(checked) {
+			const checkedValue = this.multiple ? checked.map((item) => item[this.valueKey]) : checked[this.valueKey];
+
+			this.$emit('input', checkedValue);
+			this.$emit('pick', checked);
+
+			if (isEqual(checkedValue, this.value)) return;
+			this.$emit('change', checkedValue, checked);
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+.Picker {
+	width: 100%;
+	height: 100%;
+}
+</style>

package/components/popover/popover-content.vue

@@ -0,0 +1,255 @@
+<template>
+	<view
+		:class="[
+			componentClassNames,
+			$style['PopoverContent--at-' + usingPosition],
+			{
+				[$style['PopoverContent--fullscreen']]: fullscreen,
+				[$style['PopoverContent--content-initialized']]: initialized,
+			},
+		]"
+		:style="styleStr"
+	>
+		<slot name="custom">
+			<!-- 使用自定义插槽时需要注意内容部分的尺寸，太长的内容需要手动添加 scroll-view 包裹 -->
+			<view :class="$style['PopoverContent--content']">
+				<!-- header 插槽 -->
+				<slot name="header"></slot>
+
+				<scroll-view :class="$style['PopoverContent--body-scroll']" scroll-y="true">
+					<view :class="$style['PopoverContent--body']">
+						<!-- 默认插槽 -->
+						<slot></slot>
+					</view>
+				</scroll-view>
+
+				<!-- footer 插槽 -->
+				<slot name="footer"></slot>
+			</view>
+		</slot>
+
+		<!-- loading 动画 -->
+		<view v-if="loading" :class="$style['PopoverContent--loading']">
+			<icon-cpn icon="loading-dot-spinner"></icon-cpn>
+		</view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import windowInfoMixin from '../../mixins/windowInfo';
+import IconCpn from '../icon/icon.vue';
+
+export default {
+	name: 'AppPopoverContent',
+	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;
+		});
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'popover';
+$component-vars: $popover;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+:host {
+	display: block;
+}
+
+.PopoverContent {
+	@extend %external-vars;
+	position: absolute;
+	opacity: 1;
+	--appear-transform: translate(0, 0) scale(1);
+
+	// 区别各个方向的动画效果和位置
+	&.PopoverContent--at-top {
+		top: 0;
+		left: 0;
+		width: 100%;
+		min-height: UTILS__LOCAL_VAR(min-height);
+		max-height: UTILS__LOCAL_VAR(max-height);
+		transform: translate(0, -100%) scale(1);
+		--content-radius: 0 0 #{UTILS__LOCAL_VAR(radius)} #{UTILS__LOCAL_VAR(radius)};
+		--scroll-max-height: #{UTILS__LOCAL_VAR(max-height)};
+	}
+	&.PopoverContent--at-bottom {
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		min-height: UTILS__LOCAL_VAR(min-height);
+		max-height: UTILS__LOCAL_VAR(max-height);
+		transform: translate(0, 100%) scale(1);
+		--content-radius: #{UTILS__LOCAL_VAR(radius)} #{UTILS__LOCAL_VAR(radius)} 0 0;
+		--scroll-max-height: #{UTILS__LOCAL_VAR(max-height)};
+	}
+	&.PopoverContent--at-left {
+		top: 0;
+		left: 0;
+		width: UTILS__LOCAL_VAR(width);
+		height: 100%;
+		transform: translate(-100%, 0) scale(1);
+		--content-radius: 0 #{UTILS__LOCAL_VAR(radius)} #{UTILS__LOCAL_VAR(radius)} 0;
+		--scroll-max-height: 100vh;
+	}
+	&.PopoverContent--at-right {
+		top: 0;
+		right: 0;
+		width: UTILS__LOCAL_VAR(width);
+		height: 100%;
+		transform: translate(100%, 0) scale(1);
+		--content-radius: #{UTILS__LOCAL_VAR(radius)} 0 0 #{UTILS__LOCAL_VAR(radius)};
+		--scroll-max-height: 100vh;
+	}
+	&.PopoverContent--at-center {
+		inset: UTILS__LOCAL_VAR(position);
+		width: UTILS__LOCAL_VAR(width);
+		min-height: UTILS__LOCAL_VAR(min-height);
+		max-height: UTILS__LOCAL_VAR(max-height);
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0.8);
+		--appear-transform: translate(-50%, -50%) scale(1);
+		--content-radius: #{UTILS__LOCAL_VAR(radius)};
+		--scroll-max-height: #{UTILS__LOCAL_VAR(max-height)};
+	}
+	&.PopoverContent--fullscreen {
+		width: 100vw;
+		height: 100vh;
+		max-height: 100vh;
+		--content-radius: 0;
+		--scroll-max-height: 100vh;
+	}
+
+	// 内容部分显示动画
+	&.PopoverContent--content-initialized {
+		transition: transform 0.3s, opacity 0.3s;
+	}
+	:global(.PopoverMask--visible) &.PopoverContent--content-initialized {
+		opacity: 1;
+		transform: var(--appear-transform);
+	}
+
+	.PopoverContent--content {
+		background: UTILS__LOCAL_VAR(background);
+		border-radius: var(--content-radius, #{UTILS__LOCAL_VAR(radius)});
+		// 宽度占满
+		@at-root %full-width #{UTILS__LAST_SELECTOR(&)} {
+			width: 100%;
+		}
+		// 高度占满
+		@at-root %full-height #{UTILS__LAST_SELECTOR(&)} {
+			height: 100%;
+		}
+		// 顶部安全区域
+		@at-root %safe-top #{UTILS__LAST_SELECTOR(&)} {
+			padding-top: var(--header-bar-bottom);
+			--safe-top-padding: var(--header-bar-bottom);
+		}
+		// 底部安全区域
+		@at-root %safe-bottom #{UTILS__LAST_SELECTOR(&)} {
+			padding-bottom: var(--safe-area-bottom);
+			--safe-bottom-padding: var(--safe-area-bottom);
+		}
+		// 不需要安全区域
+		@at-root %no-safe-area #{UTILS__LAST_SELECTOR(&)} {
+			--safe-top-padding: 0px;
+			--safe-bottom-padding: 0px;
+		}
+	}
+	&.PopoverContent--at-center:not(.PopoverContent--fullscreen) {
+		@extend %no-safe-area;
+	}
+	&.PopoverContent--at-top {
+		@extend %full-width;
+		@extend %safe-top;
+	}
+	&.PopoverContent--at-bottom {
+		@extend %full-width;
+		@extend %safe-bottom;
+	}
+	&.PopoverContent--at-left,
+	&.PopoverContent--at-right,
+	&.PopoverContent--fullscreen {
+		@extend %full-height;
+		@extend %safe-top;
+		@extend %safe-bottom;
+	}
+
+	// scroll-view
+	.PopoverContent--body-scroll {
+		$header-padding: calc(var(--safe-top-padding, 0px) + #{UTILS__LOCAL_VAR(header-height)});
+		$footer-padding: calc(var(--safe-bottom-padding, 0px) + #{UTILS__LOCAL_VAR(footer-height)});
+		min-height: max(calc(#{UTILS__LOCAL_VAR(min-height)} - #{$header-padding} - #{$footer-padding}), 0px);
+		max-height: calc(var(--scroll-max-height) - #{$header-padding} - #{$footer-padding});
+	}
+
+	.PopoverContent--body {
+		padding: UTILS__LOCAL_VAR(padding);
+	}
+
+	.PopoverContent--loading {
+		position: absolute;
+		inset: 0;
+		border-radius: var(--content-radius);
+		color: #999;
+		background: #ffffff80;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 60rpx;
+	}
+}
+</style>

package/components/popover/popover-mask.vue

@@ -0,0 +1,113 @@
+<template>
+	<view
+		:class="[
+			componentClassNames,
+			{ [$style['PopoverMask--visible']]: isVisible, 'PopoverMask--visible': isVisible },
+		]"
+		@touchmove.stop.prevent="doNothing"
+	>
+		<!-- 遮罩层 -->
+		<view
+			:class="[$style['PopoverMask--mask'], { [$style['PopoverMask--animated']]: isInitialized }]"
+			@click="onMask()"
+		></view>
+
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+
+export default {
+	name: 'AppPopoverMask',
+	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);
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'popover';
+$component-vars: $popover;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+:host {
+	display: block;
+}
+
+.PopoverMask {
+	@extend %external-vars;
+	position: fixed;
+	inset: 0;
+	z-index: UTILS__z-index();
+
+	// 遮罩层
+	.PopoverMask--mask {
+		position: absolute;
+		inset: 0;
+		background-color: UTILS__LOCAL_VAR(mask-color);
+		opacity: 0;
+		&.PopoverMask--animated {
+			transition: opacity 0.3s;
+		}
+	}
+	&.PopoverMask--visible .PopoverMask--mask {
+		transition: opacity 0.3s;
+		opacity: 1;
+	}
+}
+</style>

package/components/popover/popover.vue

@@ -0,0 +1,84 @@
+<template>
+	<view :class="componentClassNames">
+		<popover-mask-cpn
+			v-if="value"
+			ref="mask"
+			:value="value"
+			:modal="modal || loading"
+			@input="$emit('input', $event)"
+			@close="$emit('close')"
+			@closed="$emit('closed')"
+		>
+			<popover-content-cpn v-if="$slots.custom" :position="position" :fullscreen="fullscreen" :loading="loading">
+				<template #custom>
+					<slot name="custom"></slot>
+				</template>
+			</popover-content-cpn>
+			<popover-content-cpn v-else :position="position" :fullscreen="fullscreen" :loading="loading">
+				<template v-if="$slots.header" #header>
+					<slot name="header"></slot>
+				</template>
+
+				<slot></slot>
+
+				<template v-if="$slots.footer" #footer>
+					<slot name="footer"></slot>
+				</template>
+			</popover-content-cpn>
+		</popover-mask-cpn>
+	</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';
+
+export default {
+	name: 'AppPopover',
+	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);
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+</style>