@ecolovo/uniapp-components 1.0.0

package/components/popup/popup-content.vue

@@ -0,0 +1,162 @@
+<template>
+	<view :class="componentClassNames">
+		<popover-content-cpn position="bottom" :loading="loading">
+			<!-- 内容上方标题 -->
+			<template #header>
+				<slot v-if="$slots.header" name="header"></slot>
+				<view v-else-if="title || showClose" :class="$style['PopupContent--header']">
+					<view
+						:class="[
+							$style['PopupContent--title'],
+							{ [$style['PopupContent--title-center']]: centerTitle },
+						]"
+					>
+						<slot name="title">
+							<text>{{ title }}</text>
+						</slot>
+					</view>
+					<view v-if="showClose" :class="$style['PopupContent--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['PopupContent--footer']">
+					<view v-if="cancel" :class="$style['PopupContent--button']">
+						<button-cpn plain @click="$emit('cancel')">
+							{{ cancel }}
+						</button-cpn>
+					</view>
+					<view v-if="confirm" :class="$style['PopupContent--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: 'AppPopupContent',
+	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: '确认',
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'popup';
+$component-vars: $popup;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+:host {
+	display: block;
+}
+
+.PopupContent {
+	@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;
+
+	.PopupContent--header {
+		position: relative;
+		box-sizing: border-box;
+		height: UTILS__LOCAL_VAR(header-height);
+		padding: 20rpx 30rpx 0rpx;
+		display: flex;
+		align-items: center;
+	}
+	.PopupContent--title {
+		flex: 1;
+		font-size: UTILS__GLOBAL_VAR(font-size, large);
+		font-weight: 600;
+		&.PopupContent--title-center {
+			text-align: center;
+		}
+	}
+	.PopupContent--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;
+	}
+
+	.PopupContent--footer {
+		box-sizing: border-box;
+		height: UTILS__LOCAL_VAR(footer-height);
+		padding: 0 30rpx;
+		display: flex;
+		align-items: center;
+	}
+	.PopupContent--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/popup/popup.vue

@@ -0,0 +1,168 @@
+<template>
+	<view :class="componentClassNames">
+		<popover-mask-cpn
+			ref="mask"
+			:value="value"
+			:modal="modal || isLoading"
+			@input="$emit('input', $event)"
+			@close="$emit('close')"
+			@closed="$emit('closed')"
+		>
+			<slot name="content">
+				<popup-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>
+				</popup-content-cpn>
+			</slot>
+		</popover-mask-cpn>
+	</view>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import PopoverMaskCpn from '../popover/popover-mask.vue';
+import PopupContentCpn from './popup-content.vue';
+
+export default {
+	name: 'AppPopup',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { PopoverMaskCpn, PopupContentCpn },
+	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: true,
+		},
+		/** 取消按钮文本，为 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/price/price.vue

@@ -0,0 +1,104 @@
+<template>
+	<text :class="componentClassNames">
+		<text v-if="prefixUnit" :class="$style['Price--unit']">
+			<!-- 默认插槽用于放置单位 -->
+			<slot>
+				<text :class="$style['Price--default-prefix-unit']">¥</text>
+			</slot>
+		</text>
+		<text v-if="showSymbol || formattedPrice.negative" :class="$style['Price--integer']">
+			{{ formattedPrice.negative ? '-' : '+' }}
+		</text>
+		<text :class="$style['Price--integer']"> {{ formattedPrice.integer }} </text>
+		<text v-if="alwaysShowDecimal || formattedPrice.decimal !== '00'" :class="$style['Price--decimal']">
+			.{{ formattedPrice.decimal }}
+		</text>
+		<text v-if="!prefixUnit" :class="$style['Price--unit']">
+			<!-- 默认插槽用于放置单位 -->
+			<slot></slot>
+		</text>
+	</text>
+</template>
+
+<script>
+import componentName from '../../mixins/componentName';
+import { formatPrice } from '../../utils/price';
+
+export default {
+	name: 'AppPrice',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	mixins: [componentName],
+	props: {
+		/** 价格 */
+		value: {
+			type: [Number, String],
+			default: 0,
+		},
+		/** 前置单位 */
+		prefixUnit: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否一直显示符号 */
+		showSymbol: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否始终显示小数 */
+		alwaysShowDecimal: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	computed: {
+		/** 格式化后的价格 */
+		formattedPrice() {
+			return formatPrice(this.value);
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'price';
+$component-vars: $price;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+:host {
+	display: inline;
+}
+
+.Price {
+	@extend %external-vars;
+	color: UTILS__LOCAL_VAR(color);
+	font-size: UTILS__LOCAL_VAR(font-size);
+	font-weight: UTILS__LOCAL_VAR(font-weight);
+}
+.Price--default-prefix-unit {
+	margin-left: 0.25em;
+	margin-right: 0.25em;
+}
+.Price--integer {
+	color: UTILS__LOCAL_VAR(integer-color);
+	font-size: UTILS__LOCAL_VAR(integer-font-size);
+	font-weight: UTILS__LOCAL_VAR(integer-font-weight);
+}
+.Price--decimal {
+	color: UTILS__LOCAL_VAR(decimal-color);
+	font-size: UTILS__LOCAL_VAR(decimal-font-size);
+	font-weight: UTILS__LOCAL_VAR(decimal-font-weight);
+}
+.Price--unit {
+	color: UTILS__LOCAL_VAR(unit-color);
+	font-size: UTILS__LOCAL_VAR(unit-font-size);
+	font-weight: UTILS__LOCAL_VAR(unit-font-weight);
+}
+</style>

package/components/search/search.vue

@@ -0,0 +1,220 @@
+<template>
+	<view :class="componentClassNames">
+		<view :class="$style['Search--wrapper']">
+			<icon-cpn icon="search" :class="[$style['Search--icon'], $style['Search--prefix-icon']]"> </icon-cpn>
+			<view
+				v-if="readonly"
+				:class="[
+					$style['Search--text'],
+					{ [$style['Search--ellipsis']]: ellipsis, [$style['Search--placeholder']]: !searchValue },
+				]"
+			>
+				{{ searchValue || placeholder }}
+			</view>
+			<input
+				v-else
+				:value="searchValue"
+				:disabled="disabled"
+				:maxlength="maxlength"
+				:placeholder="placeholder"
+				confirm-type="search"
+				:class="$style['Search--input']"
+				@input="onInput"
+				@confirm="onConfirm"
+			/>
+			<icon-cpn
+				v-if="clearable && searchValue"
+				icon="close-circle-filled"
+				:class="[$style['Search--icon'], $style['Search--close-icon']]"
+				@click.native="onClear"
+			>
+			</icon-cpn>
+		</view>
+		<button-cpn
+			v-if="cancelButton"
+			text
+			:disabled="!searchValue"
+			:class="$style['Search--cancel-button']"
+			@click="onCancel"
+		>
+			取消
+		</button-cpn>
+	</view>
+</template>
+
+<script>
+import debounce from 'lodash-es/debounce';
+import componentName from '../../mixins/componentName';
+import ButtonCpn from '../button/button.vue';
+import IconCpn from '../icon/icon.vue';
+
+export default {
+	name: 'AppSearch',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared',
+	},
+	components: { ButtonCpn, IconCpn },
+	mixins: [componentName],
+	props: {
+		/** 搜索文本 */
+		value: {
+			type: [String, null],
+			default: '',
+		},
+		/** 最大输入文本长度 */
+		maxlength: {
+			type: Number,
+			default: 140,
+		},
+		/** 占位文本 */
+		placeholder: {
+			type: String,
+			default: '请输入搜索内容',
+		},
+		/** 防抖时长 */
+		debounce: {
+			type: Number,
+			default: 300,
+		},
+		/** 是否有清空按钮 */
+		clearable: {
+			type: Boolean,
+			default: true,
+		},
+		/** 是否只读 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		/** 是否显示搜索按钮 */
+		cancelButton: {
+			type: Boolean,
+			default: false,
+		},
+		/** 当前状态是否可以搜索，仅 `cancelButton` 为 `true` 时有效 */
+		searchable: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	data() {
+		return {
+			/** 内部搜索值 */
+			innerSearchValue: '',
+		};
+	},
+	computed: {
+		/** 当前搜索值 */
+		searchValue: {
+			get: function () {
+				return this.value === null ? this.innerSearchValue : this.value;
+			},
+			set: function (value) {
+				this.$emit('input', value);
+				this.innerSearchValue = value;
+				this.$emit('change', this.innerSearchValue);
+			},
+		},
+	},
+	created() {
+		this.debouncedInput = debounce((value) => {
+			this.$emit('input-search', value);
+		}, this.debounce);
+	},
+	methods: {
+		/** 输入响应 */
+		onInput(event) {
+			this.searchValue = event.detail.value;
+			this.debouncedInput(event.detail.value);
+		},
+		/** 点击键盘搜索按钮响应 */
+		onConfirm() {
+			this.$emit('search', this.searchValue);
+		},
+		/** 点击清除按钮响应 */
+		onClear() {
+			this.searchValue = '';
+			this.$emit('clear', '');
+		},
+		/** 点击取消按钮响应 */
+		onCancel() {
+			this.searchValue = '';
+			this.searchValue = '';
+			this.$emit('cancel', '');
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+@use '../../styles/index' as *;
+
+// 定义外部变量
+$component-name: 'search';
+$component-vars: $search;
+%external-vars {
+	@include UTILS__DEFINE_COMPONENT_VARS();
+}
+
+:host {
+	display: block;
+}
+:host(.display-inline) {
+	display: inline;
+}
+
+.Search {
+	@extend %external-vars;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: UTILS__LOCAL_VAR(height);
+}
+.Search--wrapper {
+	flex: 1 0 auto;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	background: UTILS__LOCAL_VAR(background);
+	border-radius: UTILS__LOCAL_VAR(border-radius);
+}
+.Search--input,
+.Search--placeholder {
+	flex: 1 0 auto;
+	width: 0;
+	min-width: 0;
+}
+.Search--ellipsis {
+	overflow-x: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.Search--placeholder {
+	color: UTILS__GLOBAL_VAR(color, placeholder);
+}
+.Search--icon {
+	flex: 0 0 auto;
+	position: relative;
+	font-size: UTILS__GLOBAL_VAR(font-size, large);
+	color: UTILS__GLOBAL_VAR(color, placeholder);
+	// &::after {
+	//   content: '';
+	//   position: absolute;
+	//   @include absolute-center(UTILS__LOCAL_VAR(height));
+	// }
+}
+.Search--divider {
+	height: 1em;
+	border-right: 2rpx solid #ccc;
+}
+.Search--cancel-button {
+	flex: none;
+	font-size: UTILS__GLOBAL_VAR(font-size, normal);
+	height: 100%;
+	#{UTILS__VAR_NAME(color, button)}: #999;
+	#{UTILS__VAR_NAME(padding, button)}: 0 0 0 24rpx;
+}
+</style>