@ecolovo/uniapp-components 1.0.0

package/components/dialog/dialog-content.vue

@@ -0,0 +1,162 @@
+<template>
+	<view :class="componentClassNames">
+		<popover-content-cpn position="center" :loading="loading">
+			<!-- 内容上方标题 -->
+			<template #header>
+				<slot v-if="$slots.header" name="header"></slot>
+				<view v-else-if="title || showClose" :class="$style['DialogContent--header']">
+					<view
+						:class="[
+							$style['DialogContent--title'],
+							{ [$style['DialogContent--title-center']]: centerTitle },
+						]"
+					>
+						<slot name="title">
+							<text>{{ title }}</text>
+						</slot>
+					</view>
+					<view v-if="showClose" :class="$style['DialogContent--close']" @click="$emit('close')">
+						<icon-cpn icon="close" tap-size="80rpx" />
+					</view>
+				</view>
+			</template>
+
+			<!-- 内容区域 -->
+			<slot></slot>
+
+			<!-- 内容下方操作按钮 -->
+			<template #footer>
+				<slot v-if="$slots.footer" name="footer"></slot>
+				<view v-else-if="cancel || confirm" :class="$style['DialogContent--footer']">
+					<view v-if="cancel" :class="$style['DialogContent--button']">
+						<button-cpn plain @click="$emit('cancel')">
+							{{ cancel }}
+						</button-cpn>
+					</view>
+					<view v-if="confirm" :class="$style['DialogContent--button']">
+						<button-cpn @click="$emit('confirm')">
+							{{ confirm }}
+						</button-cpn>
+					</view>
+				</view>
+			</template>
+		</popover-content-cpn>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import ButtonCpn from '../button/button.vue';
+import IconCpn from '../icon/icon.vue';
+import PopoverContentCpn from '../popover/popover-content.vue';
+
+export default {
+	name: 'AppDialogContent',
+	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: false,
+		},
+		/** 取消按钮文本，为 falsy 时( false 或 '' )不显示 */
+		cancel: {
+			type: [String, Boolean],
+			default: '取消',
+		},
+		/** 确认按钮文本，为 falsy 时( false 或 '' )不显示 */
+		confirm: {
+			type: [String, Boolean],
+			default: '确认',
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'dialog';
+$component-vars: $dialog;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+:host {
+	display: block;
+}
+
+.DialogContent {
+	@extend %external-vars;
+	#{UTILS__VAR_NAME(header-height, popover)}: #{UTILS__LOCAL_VAR(header-height)};
+	#{UTILS__VAR_NAME(footer-height, popover)}: #{UTILS__LOCAL_VAR(footer-height)};
+	#{UTILS__VAR_NAME(padding, popover)}: 20rpx 30rpx;
+
+	.DialogContent--header {
+		position: relative;
+		box-sizing: border-box;
+		height: UTILS__LOCAL_VAR(header-height);
+		padding: 20rpx 30rpx 0rpx;
+		display: flex;
+		align-items: center;
+	}
+	.DialogContent--title {
+		flex: 1;
+		font-size: UTILS__GLOBAL_VAR(font-size, large);
+		font-weight: 600;
+		&.DialogContent--title-center {
+			text-align: center;
+		}
+	}
+	.DialogContent--close {
+		position: absolute;
+		top: 0;
+		right: 20rpx;
+		margin-top: 20rpx;
+		width: calc(#{UTILS__LOCAL_VAR(header-height)} - 20rpx);
+		height: calc(#{UTILS__LOCAL_VAR(header-height)} - 20rpx);
+		font-size: 48rpx;
+		color: #999;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.DialogContent--footer {
+		box-sizing: border-box;
+		height: UTILS__LOCAL_VAR(footer-height);
+		padding: 10rpx 30rpx 30rpx;
+		display: flex;
+		align-items: center;
+	}
+	.DialogContent--button {
+		flex: 1;
+		#{UTILS__VAR_NAME(height, button)}: 84rpx;
+		#{UTILS__VAR_NAME(border-radius, button)}: 20rpx;
+		& + #{UTILS__LAST_SELECTOR(&)} {
+			margin-left: 20rpx;
+		}
+	}
+}
+</style>

package/components/dialog/dialog.vue

@@ -0,0 +1,166 @@
+<template>
+	<view :class="componentClassNames">
+		<popover-mask-cpn
+			ref="mask"
+			:value="value"
+			:modal="modal || isLoading"
+			@input="$emit('input', $event)"
+			@close="$emit('close')"
+			@closed="$emit('closed')"
+		>
+			<dialog-content-cpn
+				:loading="isLoading"
+				:title="title"
+				:center-title="centerTitle"
+				:show-close="showClose"
+				:cancel="cancel"
+				:confirm="confirm"
+				@close="onClose()"
+				@cancel="onButton('cancel', closeOnCancel)"
+				@confirm="onButton('confirm', closeOnConfirm)"
+			>
+				<slot></slot>
+			</dialog-content-cpn>
+		</popover-mask-cpn>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import PopoverMaskCpn from '../popover/popover-mask.vue';
+import DialogContentCpn from './dialog-content.vue';
+
+export default {
+	name: 'AppDialog',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { PopoverMaskCpn, DialogContentCpn },
+	mixins: [componentName],
+	props: {
+		/** v-model 绑定值，控制对话框是否可见 */
+		value: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否模态框 */
+		modal: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否显示 loading 动画 */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		/** 标题 */
+		title: {
+			type: String,
+			default: '',
+		},
+		/** 是否居中标题 */
+		centerTitle: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否显示关闭按钮 */
+		showClose: {
+			type: Boolean,
+			default: false,
+		},
+		/** 取消按钮文本，为 falsy 时( false 或 '' )不显示 */
+		cancel: {
+			type: [String, Boolean],
+			default: '取消',
+		},
+		/** 点击确认按钮时是否自动关闭对话框 */
+		closeOnCancel: {
+			type: Boolean,
+			default: true,
+		},
+		/** 确认按钮文本，为 falsy 时( false 或 '' )不显示 */
+		confirm: {
+			type: [String, Boolean],
+			default: '确认',
+		},
+		/** 点击确认按钮时是否自动关闭对话框 */
+		closeOnConfirm: {
+			type: Boolean,
+			default: true,
+		},
+		/** 是否异步关闭，使用内部 loading 属性，需手动调用 close 方法关闭 */
+		async: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			isAsyncLoading: false,
+		};
+	},
+	computed: {
+		/** 按钮 loading */
+		isLoading() {
+			return this.loading || this.isAsyncLoading;
+		},
+	},
+	methods: {
+		close() {
+			this.$refs.mask.close();
+		},
+		/** 隐藏 */
+		onClose() {
+			if (this.isLoading) return;
+
+			this.close();
+		},
+		/** 点击取消或确认按钮
+		 * @param {'cancel' | 'confirm'} btnType 按钮类型
+		 * @param {boolean} shouldClose 是否自动关闭对话框
+		 */
+		onButton(btnType, shouldClose) {
+			if (this.isLoading) return;
+
+			if (btnType === 'confirm' && this.async) {
+				this.isAsyncLoading = true;
+				const { promise, resolve, reject } = Promise.withResolvers();
+				promise
+					.then((willClose = true) => {
+						if (willClose === false) {
+							this.isAsyncLoading = false;
+							return;
+						}
+						this.close();
+					})
+					.catch((err) => {
+						if (process.env.NODE_ENV === 'development') {
+							// eslint-disable-next-line no-console
+							console.warn(`${this.componentClass} unresolved error:`, err);
+						}
+						this.isAsyncLoading = false;
+					});
+				this.$emit(btnType, { resolve, reject });
+				return;
+			}
+
+			if (shouldClose) {
+				this.$emit(btnType);
+				this.close();
+				return;
+			}
+
+			this.$emit(btnType, this.$refs.mask.close.bind(this.$refs.mask));
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+:host {
+	display: block;
+}
+</style>

package/components/dropdown/dropdown.vue

@@ -0,0 +1,145 @@
+<template>
+	<view :class="componentClassNames">
+		<view
+			:class="[
+				$style['Dropdown--input'],
+				{ [$style['Dropdown--placeholder']]: !hasValue, [$style['Dropdown--multiple']]: hasValue },
+			]"
+		>
+			<view class="ellipsis" :class="{ 'flex-1': align !== 'center' }">
+				{{ showValue }}
+			</view>
+			<icon-cpn icon="triangle-down" :class="$style['Dropdown--icon']"></icon-cpn>
+		</view>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import IconCpn from '../../icon/icon.vue';
+
+export default {
+	name: 'AppDropdown',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { IconCpn },
+	mixins: [componentName],
+	props: {
+		/** 当前选择的值 */
+		value: {
+			type: [String, Number, Array, Object],
+			default: null,
+		},
+		/** 未选中时的提示语 */
+		placeholder: {
+			type: String,
+			default: '',
+		},
+		/** 文本对齐方式 */
+		align: {
+			type: String,
+			default: '',
+		},
+		/** 是否多选 */
+		multiple: {
+			type: Boolean,
+			default: true,
+		},
+		/** 展示值格式化函数 */
+		formatter: {
+			type: Function,
+			default: null,
+		},
+	},
+	computed: {
+		/** 是否选择了值 */
+		hasValue() {
+			return this.value !== null && (!Array.isArray(this.value) || this.value.length > 0);
+		},
+		/** 展示值 */
+		showValue() {
+			if (!this.hasValue) {
+				return this.placeholder;
+			}
+			return this.formatter
+				? this.formatter(this.value)
+				: this.multiple && this.value.length > 1
+				? `+${this.value.length}`
+				: this.value;
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 自定义样式变量前缀，与组件名称一致
+$component-prefix: '#{$ec-component-prefix}-dropdown';
+// 自定义样式变量
+%external-vars {
+	@include define-component-vars(
+		$input-background: get-value('color-white'),
+		$dropdown-background: get-value('color-white'),
+		$input-radius: get-value('size-radius-xs'),
+		$dropdown-item-height: 64rpx
+	);
+}
+
+.Dropdown {
+	@extend %external-vars;
+	position: relative;
+	height: 100%;
+	font-size: get-value('size-font-s');
+}
+.Dropdown--modal {
+	position: fixed;
+	@include absolute-size();
+	background-color: #000000;
+	opacity: 0;
+	scale: 0;
+	transition: opacity 0.3s;
+	z-index: UTILS__z-index();
+	.Dropdown--visible & {
+		opacity: 0.5;
+		scale: 1;
+	}
+}
+.Dropdown--input {
+	position: relative;
+	height: 100%;
+	padding: 0 get-value('size-m');
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: var(--input-background);
+	border-radius: var(--input-radius);
+	.Dropdown--visible & {
+		z-index: UTILS__z-index() + 1;
+	}
+}
+.Dropdown--placeholder {
+	color: UTILS__GLOBAL_VAR(color, placeholder);
+}
+.Dropdown--multiple {
+	color: get-value('color-primary');
+}
+.Dropdown--icon {
+	flex: none;
+	font-size: get-value('size-font-xxs');
+	margin-left: get-value('size-xxs');
+}
+.Dropdown--dropdown {
+	position: absolute;
+	top: calc(100% + #{get-value('size-xxs')});
+	left: 0;
+	width: 100%;
+	min-height: var(--dropdown-item-height);
+	max-height: calc(var(--dropdown-item-height) * 6);
+	background: var(--dropdown-background);
+	border-radius: get-value('size-radius-xs');
+	z-index: UTILS__z-index() + 1;
+}
+</style>

package/components/empty/empty.vue

@@ -0,0 +1,102 @@
+<template>
+	<view :class="componentClassNames">
+		<template v-if="loading">
+			<image v-if="loadingImage" :src="loadingImage" :class="$style['Empty--image']" />
+			<view v-else :class="$style['Empty--loading-icon-wrapper']">
+				<icon-cpn icon="search" :class="$style['Empty--loading-icon']" />
+			</view>
+			<view :class="$style['Empty--text']">
+				<slot>{{ loadingText }}</slot>
+			</view>
+		</template>
+		<template v-else>
+			<image v-if="image" :src="image" :class="$style['Empty--image']" />
+			<image v-else :src="require('../../resources/image/empty.svg')" :class="$style['Empty--image']" />
+			<view :class="$style['Empty--text']">
+				<slot>{{ text }}</slot>
+			</view>
+		</template>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import IconCpn from '../icon/icon.vue';
+
+export default {
+	name: 'AppEmpty',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { IconCpn },
+	mixins: [componentName],
+	props: {
+		/** 图片 */
+		image: {
+			type: String,
+			default: '',
+		},
+		/** 文本 */
+		text: {
+			type: String,
+			default: '暂无数据',
+		},
+		/** 数据加载中 */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		/** 数据加载中显示图片 */
+		loadingImage: {
+			type: String,
+			default: '',
+		},
+		/** 文本 */
+		loadingText: {
+			type: String,
+			default: '数据加载中',
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'empty';
+$component-vars: $empty;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+.Empty {
+	@extend %external-vars;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+.Empty--image {
+	width: UTILS__LOCAL_VAR(image-width);
+	height: UTILS__LOCAL_VAR(image-height);
+}
+.Empty--text {
+	margin-top: UTILS__LOCAL_VAR(space);
+	color: UTILS__LOCAL_VAR(color);
+	font-size: UTILS__LOCAL_VAR(font-size);
+}
+.Empty--loading-icon-wrapper {
+	width: 100rpx;
+	height: 100rpx;
+	transform-origin: center center;
+	animation: circle 1.5s infinite linear;
+}
+.Empty--loading-icon {
+	position: absolute;
+	font-size: 60rpx;
+	color: UTILS__LOCAL_VAR(color);
+	animation: circle 1.5s linear infinite reverse;
+}
+</style>

package/components/flex/flex.vue

@@ -0,0 +1,76 @@
+<template>
+	<view :class="componentClassNames" :style="styleStr">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+
+export default {
+	name: 'AppFlex',
+	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(' ');
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+.Flex {
+	width: 100%;
+	height: 100%;
+	display: flex;
+}
+</style>

package/components/form/form.vue

@@ -0,0 +1,43 @@
+<template>
+	<view :class="componentClassNames">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+
+export default {
+	name: 'AppForm',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	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',
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+.Form {
+	background: #fff;
+	padding: 20rpx;
+	border-radius: 20rpx;
+}
+</style>

package/components/form/mixin.js

@@ -0,0 +1,13 @@
+export const isFormReadonly = {
+	inject: {
+		formProps: {
+			from: 'formProps',
+			default: {},
+		},
+	},
+	computed: {
+		isFormReadonly() {
+			return this.formProps.readonly;
+		},
+	},
+};