@ecolovo/uniapp-components 1.0.10 → 2.0.1

package/components/datetime-picker/datetime-picker.vue

@@ -1,235 +0,0 @@
-<template>
-	<view :class="componentClassNames">
-		<selector-cpn
-			:value="showText"
-			:readonly="isReadonly"
-			:disabled="disabled"
-			:placeholder="placeholder"
-			@click="showPicker"
-		/>
-
-		<!-- 选择器弹框 -->
-		<popup-cpn
-			v-if="isShowPopup"
-			ref="popup"
-			v-model="isShowPopup"
-			:cancel="false"
-			title="选择时间"
-			@click.native.stop.prevent="doNothing"
-			@confirm="onConfirm"
-		>
-			<view v-show="checkedDateType === 'start'">
-				<datetime-picker-view-cpn
-					v-model="startStr"
-					:min="min"
-					:max="max"
-					:minute-step="minuteStep"
-					@change="onChangeStart"
-				/>
-			</view>
-			<view v-if="range" v-show="checkedDateType === 'end'">
-				<datetime-picker-view-cpn
-					v-model="endStr"
-					:min="min"
-					:max="max"
-					:minute-step="minuteStep"
-					@change="onChangeEnd"
-				/>
-			</view>
-		</popup-cpn>
-	</view>
-</template>
-
-<script>
-import componentName from '../../mixins/componentName';
-import { isFormReadonly } from '../form/mixin';
-import { formatDate, toDate } from '../../utils/date';
-import PopupCpn from '../popup/popup.vue';
-import SelectorCpn from '../selector/selector.vue';
-import DatetimePickerViewCpn from './datetime-picker-view.vue';
-
-const DATE_FORMAT = formatDate.DATE_MINUTE_WITH_YEAR;
-
-export default {
-	name: 'DatetimePicker',
-	options: {
-		virtualHost: true,
-		styleIsolation: 'shared',
-	},
-	components: { PopupCpn, SelectorCpn, DatetimePickerViewCpn },
-	mixins: [componentName, isFormReadonly],
-	props: {
-		/** 绑定值 */
-		value: {
-			type: [String, null, Array],
-			default: null,
-		},
-		/** 是否禁用 */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否只读 */
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-		/** 占位文本 */
-		placeholder: {
-			type: String,
-			default: '请选择',
-		},
-		/** 是否日期范围选择器 */
-		range: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否在选择开始日期时，同步修改结束日期，且保持时间差 */
-		keepDiff: {
-			type: Boolean,
-			default: false,
-		},
-		/** 结束日期是否可以与开始日期相同 */
-		canSame: {
-			type: Boolean,
-			default: true,
-		},
-		/** 在选择的日期后面拼接时间字符串，如果传入的是数组，会分别对应添加到范围日期值后 */
-		timeAppend: {
-			type: [String, Array],
-			default: '',
-		},
-		/** 最小日期 */
-		min: {
-			type: String,
-			default: '',
-		},
-		/** 最大日期 */
-		max: {
-			type: String,
-			default: '',
-		},
-		/** 分钟步长 */
-		minuteStep: {
-			type: Number,
-			default: 5,
-		},
-	},
-	data() {
-		return {
-			/** 选择框是否可见 */
-			isShowPopup: false,
-			/** 开始日期 */
-			startStr: '',
-			/** 结束日期 */
-			endStr: '',
-			/** 当前选中的日期类型 */
-			checkedDateType: 'start',
-		};
-	},
-	computed: {
-		isReadonly() {
-			return this.readonly || this.isFormReadonly;
-		},
-		startDate() {
-			return formatDate(
-				toDate(this.range && Array.isArray(this.value) ? this.value[0] : this.value),
-				DATE_FORMAT
-			);
-		},
-		endDate() {
-			return formatDate(toDate(this.range && Array.isArray(this.value) ? this.value[1] : ''), DATE_FORMAT);
-		},
-		showText() {
-			return this.range && this.startDate && this.endDate
-				? `${this.startDate} 至 ${this.endDate}`
-				: this.startDate;
-		},
-	},
-	methods: {
-		doNothing() {},
-		/** 显示选择器弹出框 */
-		showPicker() {
-			if (this.disabled || this.isReadonly) {
-				return;
-			}
-
-			this.checkedDateType = 'start';
-
-			let [start, end] = [this.startDate, this.endDate];
-			this.startStr = start || formatDate(new Date(), DATE_FORMAT);
-			this.endStr = end || formatDate(new Date(Date.now() + (this.canSame ? 0 : 8.64e7)), DATE_FORMAT);
-
-			this.isShowPopup = true;
-			this.$emit('show');
-		},
-		/** 选中日期类型 */
-		selectDateType(type) {
-			if (this.checkedDateType !== type) this.checkedDateType = type;
-		},
-		onChangeStart(dateStr) {
-			if (!this.range) return;
-
-			const timeDiff = toDate(this.endStr).getTime() - toDate(dateStr).getTime();
-			if (this.endStr <= dateStr || this.keepDiff) {
-				if (this.keepDiff) {
-					this.endStr = formatDate(new Date(toDate(dateStr).getTime() + timeDiff), DATE_FORMAT);
-				} else if (!this.canSame) {
-					this.endStr = formatDate(new Date(toDate(dateStr).getTime() + 8.64e7), DATE_FORMAT);
-				} else {
-					this.endStr = dateStr;
-				}
-			}
-		},
-		onChangeEnd(dateStr) {
-			if (dateStr <= this.startStr) {
-				if (this.canSame) {
-					this.endStr = this.startStr;
-				} else {
-					this.endStr = formatDate(new Date(toDate(this.startStr).getTime() + 8.64e7), DATE_FORMAT);
-				}
-			}
-		},
-		onConfirm() {
-			this.$refs.popup.close();
-			const startAppend = Array.isArray(this.timeAppend) ? this.timeAppend[0] : this.timeAppend;
-			const endAppend = Array.isArray(this.timeAppend) ? this.timeAppend[1] : this.timeAppend;
-			const start = startAppend ? `${this.startStr} ${startAppend}` : this.startStr;
-			const end = endAppend ? `${this.endStr} ${endAppend}` : this.endStr;
-			this.$emit('input', this.range ? [start, end] : start);
-			this.$emit('change', this.range ? [start, end] : start);
-		},
-	},
-};
-</script>
-
-<style lang="scss" module>
-@use '../../styles/index' as *;
-
-.DatetimePicker {
-	width: 100%;
-	height: 100%;
-}
-.DatetimePicker--date-input {
-	flex: 1;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 72rpx;
-	background: UTILS__GLOBAL_VAR(color, background);
-	border-radius: 12rpx;
-	transition: color 0.3s, background 0.3s;
-	&.DatetimePicker--date-checked {
-		background: UTILS__GLOBAL_VAR(theme, primary);
-		color: #fff;
-	}
-}
-.DatetimePicker--date-separator {
-	margin: 0 20rpx;
-}
-.DatetimePicker--date-selector {
-	margin-top: 20rpx;
-	display: flex;
-	align-items: center;
-}
-</style>

package/components/form/mixin.js

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

package/components/list-page/list-page.js

@@ -1,10 +0,0 @@
-const pulldownRefreshMixin = {
-	onPullDownRefresh() {
-		this.$refs.page.onRefresh();
-	},
-	onReachBottom() {
-		this.$refs.page.onLoadMore();
-	},
-};
-
-export { pulldownRefreshMixin };

package/components/table/table.vue

@@ -1,112 +0,0 @@
-<template>
-	<view :class="componentClassNames">
-		<view :class="[$style['Table--row'], $style['Table--header']]">
-			<view
-				v-for="(h, i) in headers"
-				:key="i"
-				:class="[$style['Table--cell'], $style['Table--cell-align'] + (aligns[i] || 2)]"
-			>
-				<view>{{ h }}</view>
-			</view>
-		</view>
-		<view v-for="(row, i) in value" :key="i" :class="$style['Table--row']">
-			<view
-				v-for="(col, j) in row"
-				:key="j"
-				:class="[$style['Table--cell'], $style['Table--cell-align'] + (aligns[j] || 2)]"
-				:style="i === 0 && j < row.length - 1 ? { width: widths[j] || colWidth } : ''"
-			>
-				<view>{{ col }}</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-import componentName from '../../mixins/componentName';
-import { floor2 } from '../../utils/floor';
-
-export default {
-	name: 'Table',
-	options: {
-		virtualHost: true,
-		styleIsolation: 'shared',
-	},
-	mixins: [componentName],
-	props: {
-		/** 各个列的数据 */
-		value: {
-			type: Array,
-			default: () => [],
-		},
-		/** 定义各个列的表头 */
-		headers: {
-			type: Array,
-			default: () => [],
-		},
-		/** 定义各个列的对齐方式，默认居中对齐，1左对齐，2居中，3右对齐 */
-		aligns: {
-			type: Array,
-			default: () => [],
-		},
-		/** 定义各个列的宽度百分比 */
-		widths: {
-			type: Array,
-			default: () => [],
-		},
-	},
-	computed: {
-		/** 总列数 */
-		colCount() {
-			return this.value[0]?.length || 0;
-		},
-		/** 每列所占宽度百分比 */
-		colWidth() {
-			return floor2(100 / this.colCount) + '%';
-		},
-	},
-};
-</script>
-
-<style lang="scss" module>
-@use '../../styles/index' as *;
-
-// 自定义样式变量前缀，与组件名称一致
-$component-prefix: '#{$ec-component-prefix}-table';
-// 自定义样式变量
-%external-vars {
-	@include define-component-vars($cell-padding: get-value('size-l') get-value('size-xxs'));
-}
-
-.Table {
-	@extend %external-vars;
-	display: table;
-	width: 100%;
-	border: 2rpx solid get-value('color-background');
-	border-radius: get-value('size-radius-s');
-	overflow: hidden;
-}
-.Table--header {
-	color: get-value('color-info-6');
-}
-.Table--row {
-	display: table-row;
-	&:nth-child(odd) {
-		background: get-value('color-background');
-	}
-}
-.Table--cell {
-	display: table-cell;
-	padding: var(--cell-padding);
-	vertical-align: middle;
-}
-.Table--cell-align1 {
-	text-align: start;
-}
-.Table--cell-align2 {
-	text-align: center;
-}
-.Table--cell-align3 {
-	text-align: end;
-}
-</style>

package/components/time-picker/time-picker-view.vue

@@ -1,127 +0,0 @@
-<template>
-	<picker-view
-		immediate-change
-		:value="pickerValue"
-		:class="componentClassNames"
-		@change="handlePickerChange"
-		@pickend="onPickEnd"
-	>
-		<picker-view-column>
-			<view v-for="item in hourOptions" :key="item" :class="$style['TimePickerView--option']">
-				{{ item }} 时
-			</view>
-		</picker-view-column>
-		<picker-view-column>
-			<view v-for="item in minuteOptions" :key="item" :class="$style['TimePickerView--option']">
-				{{ item }} 分
-			</view>
-		</picker-view-column>
-	</picker-view>
-</template>
-
-<script>
-import range from 'lodash-es/range';
-import componentName from '../../mixins/componentName';
-import { formatDate } from '../../utils/date';
-
-const hourOptions = range(0, 24).map((item) => ('' + item).padStart(2, '0'));
-
-export default {
-	name: 'TimePickerView',
-	options: {
-		virtualHost: true,
-		styleIsolation: 'shared',
-	},
-	mixins: [componentName],
-	props: {
-		/** 绑定值 */
-		value: {
-			type: [String, null],
-			default: null,
-		},
-		/** 分钟步长 */
-		step: {
-			type: Number,
-			default: 5,
-		},
-	},
-	data() {
-		return {
-			innerValue: '',
-			/** 小时选项列表 */
-			hourOptions,
-			/** 分钟选项列表 */
-			minuteOptions: [],
-			/** picker-view 绑定值 */
-			pickerValue: [0, 0],
-		};
-	},
-	computed: {
-		currentValue: {
-			get: function () {
-				return this.value === null ? this.innerValue : this.value;
-			},
-			set: function (value) {
-				this.$emit('input', value);
-				this.innerValue = value;
-				this.$emit('change', value);
-			},
-		},
-	},
-	created() {
-		this.minuteOptions = range(0, 60, this.step);
-	},
-	mounted() {
-		this.$nextTick(() => {
-			this.syncPickerValue(this.currentValue || new Date());
-		});
-	},
-	methods: {
-		/** 同步 picker-view 选中索引 */
-		syncPickerValue(time) {
-			const [h, m] = time.split(':');
-			const i1 = this.hourOptions.indexOf(h);
-			const i2 = Math.max(this.minuteOptions.indexOf(Math.round(Number(m) / this.step) * this.step), 0);
-			this.$nextTick(() => {
-				this.pickerValue =
-					typeof this.pickerValue[0] === 'number' ? [i1, i2].map((item) => item.toString()) : [i1, i2];
-			});
-		},
-		/** picker-view 选项值变化处理 */
-		handlePickerChange(e) {
-			const newPickerValue = e.detail.value;
-			const hour = this.hourOptions[newPickerValue[0]];
-			const minute = this.step >= 0 ? this.minuteOptions[newPickerValue[1]] : '00';
-			this.pickerValue = newPickerValue;
-			const dateValue = new Date(0, 0, 1, hour, minute, 0, 0);
-			let dateStr = formatDate(dateValue, formatDate.TIME_MINUTE);
-			this.currentValue = dateStr;
-		},
-		/** 滑动结束处理，保持选择器显示值与输入框值一致 */
-		onPickEnd() {
-			this.$nextTick(() => {
-				this.syncPickerValue(this.currentValue);
-			});
-		},
-	},
-};
-</script>
-
-<style lang="scss" module>
-@use '../../styles/index' as *;
-
-:host {
-	display: flex;
-}
-
-.TimePickerView {
-	margin-top: 24rpx;
-	height: 300rpx;
-}
-.TimePickerView--option {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	white-space: nowrap;
-}
-</style>

package/components/time-picker/time-picker.vue

@@ -1,140 +0,0 @@
-<template>
-	<view :class="componentClassNames">
-		<selector-cpn
-			:value="showText"
-			:readonly="isReadonly"
-			:disabled="disabled"
-			:placeholder="placeholder"
-			@click="showPicker"
-		/>
-
-		<!-- 选择器弹框 -->
-		<popup-cpn
-			v-if="isShowPopup"
-			ref="popup"
-			v-model="isShowPopup"
-			:cancel="false"
-			title="选择时间"
-			@click.native.stop.prevent="doNothing"
-			@confirm="onConfirm"
-		>
-			<view class="TimePicker--picker-area">
-				<time-picker-view-cpn v-model="startStr" :step="step" />
-				<template v-if="range">
-					<view>至</view>
-					<time-picker-view-cpn v-model="endStr" :step="step" />
-				</template>
-			</view>
-		</popup-cpn>
-	</view>
-</template>
-
-<script>
-import componentName from '../../mixins/componentName';
-import { isFormReadonly } from '../form/mixin';
-import PopupCpn from '../popup/popup.vue';
-import SelectorCpn from '../selector/selector.vue';
-import TimePickerViewCpn from './time-picker-view.vue';
-
-export default {
-	name: 'TimePicker',
-	options: {
-		virtualHost: true,
-		styleIsolation: 'shared',
-	},
-	components: { PopupCpn, SelectorCpn, TimePickerViewCpn },
-	mixins: [componentName, isFormReadonly],
-	props: {
-		/** 绑定值 */
-		value: {
-			type: [String, null, Array],
-			default: null,
-		},
-		/** 是否禁用 */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		/** 是否只读 */
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-		/** 占位文本 */
-		placeholder: {
-			type: String,
-			default: '请选择',
-		},
-		/** 是否时间范围选择器 */
-		range: {
-			type: Boolean,
-			default: false,
-		},
-		/** 分钟步长 */
-		step: {
-			type: Number,
-			default: 5,
-		},
-	},
-	data() {
-		return {
-			/** 选择框是否可见 */
-			isShowPopup: false,
-			/** 开始日期 */
-			startStr: '',
-			/** 结束日期 */
-			endStr: '',
-		};
-	},
-	computed: {
-		isReadonly() {
-			return this.readonly || this.isFormReadonly;
-		},
-		startTime() {
-			return this.range && Array.isArray(this.value) ? this.value[0] : this.value;
-		},
-		endTime() {
-			return this.range && Array.isArray(this.value) ? this.value[1] : '';
-		},
-		showText() {
-			return this.range && this.startTime && this.endTime
-				? `${this.startTime} 至 ${this.endTime}`
-				: this.startTime;
-		},
-	},
-	methods: {
-		doNothing() {},
-		/** 显示选择器弹出框 */
-		showPicker() {
-			if (this.disabled || this.isReadonly) {
-				return;
-			}
-
-			this.startStr = this.startTime;
-			this.endStr = this.endTime;
-
-			this.isShowPopup = true;
-			this.$emit('show');
-		},
-		onConfirm() {
-			this.$refs.popup.close();
-			this.$emit('input', this.range ? [this.startStr, this.endStr] : this.startStr);
-			this.$emit('change', this.range ? [this.startStr, this.endStr] : this.startStr);
-		},
-	},
-};
-</script>
-
-<style lang="scss" module>
-@use '../../styles/index' as *;
-
-.TimePicker {
-	width: 100%;
-	height: 100%;
-}
-
-.TimePicker--picker-area {
-	display: flex;
-	align-items: center;
-}
-</style>

package/components/uploader/download.js

@@ -1,81 +0,0 @@
-const STORAGE_KEY = 'cached_files';
-
-function hasFile(url) {
-	const files = uni.getStorageSync(STORAGE_KEY);
-	if (!files || !files[url]) {
-		return false;
-	}
-	try {
-		uni.getFileSystemManager().accessSync(files[url]);
-		return files[url];
-	} catch {
-		return false;
-	}
-}
-
-/**
- * 缓存文件
- * @param {string} url 文件下载路径
- * @param {string} name 带后缀的文件名
- * @returns 缓存后的路口
- */
-function cacheFile(url, name) {
-	const filePath = hasFile(url);
-	if (filePath) {
-		return Promise.resolve(filePath);
-	}
-	return download(url).then((res) => {
-		let filePath = uni.getFileSystemManager().saveFileSync(
-			res.filePath,
-			/* #ifdef MP-WEIXIN */
-			`${wx.env.USER_DATA_PATH}/${name}`,
-			/* #endif */
-			/* #ifdef MP-ALIPAY */
-			`${my.env.USER_DATA_PATH}/${name}`
-			/* #endif */
-		);
-		const files = uni.getStorageSync(STORAGE_KEY) || {};
-		/* #ifdef MP-ALIPAY */
-		filePath = filePath.savedFilePath;
-		/* #endif */
-		files[url] = filePath;
-		uni.setStorageSync(STORAGE_KEY, files);
-
-		return filePath;
-	});
-}
-
-/**
- * 下载文件
- * @param {string} url 文件下载路径
- * @param {string} name 文件下载后名称
- * @returns 下载后的临时路径
- */
-function download(url, name) {
-	return new Promise((resolve, reject) => {
-		uni.downloadFile({
-			url,
-			filePath: name ? `${wx.env.USER_DATA_PATH}/${name}` : undefined,
-			success: function (res) {
-				const filePath = res.filePath || res.tempFilePath;
-				let fileName = name || '';
-				// 从响应头获取文件名
-				if (!fileName && res.header) {
-					const match = /(filename=(.*))|(filename\*=[^']*'[^']*'(.*))/.exec(
-						res.header['Content-Disposition']
-					);
-					if (match) {
-						fileName = decodeURI(match[2] || match[4]);
-						fileName = fileName.replace(/^["']*|["']*$/g, '');
-					}
-				}
-				resolve({ res, filePath, fileName });
-			},
-			fail: function (error) {
-				reject(error);
-			},
-		});
-	});
-}
-
-export { download, cacheFile };