@ecolovo/uniapp-components 1.0.10 → 2.0.1

package/styles/var/component.scss

@@ -1,245 +1,21 @@
-@use 'sass:map';
-@use '../utils' as *;
-
-$badge: () !default;
-$badge-default: (
-	// 相对于右上角偏移量
-	translate: 40% -40%,
-	// 字号
-	font-size: UTILS__GLOBAL_VAR(font-size, small),
-	// 文字颜色
-	color: #fff,
-	// 背景色
-	background: #ff0000,
-	// 边框
-	border: none,
-	// 高度
-	height: calc(#{UTILS__LOCAL_VAR(font-size)} + 12rpx),
-	// 圆角
-	border-radius: 40rpx
-);
-$badge: map.merge($badge-default, $badge);
-
-$page-header: () !default;
-$page-header-default: (
-	// 背景色
-	background: #fff,
-	// 字体大小
-	font-size: 28rpx,
-	// 标题栏下的额外内容高度，有内容时需设置次值
-	extra-height: 0px,
-	// 亮色主题下的文本颜色
-	color-light: #000,
-	// 暗色主题下的文本颜色
-	color-dark: #fff
-);
-$page-header: map.merge($page-header-default, $page-header);
-
-$page-body: () !default;
-$page-body-default: (
-	// 可视区域背景
-	background: transparent,
-	padding: 20rpx,
-	padding-top: null,
-	padding-right: null,
-	padding-bottom: null,
-	padding-left: null
-);
-$page-body: map.merge($page-body-default, $page-body);
-
-$page-footer: () !default;
-$page-footer-default: (
-	// 背景色
-	background: #fff,
-	// 高度
-	height: 100rpx,
-	// 横向两端间距
-	spacing-horizontal: 30rpx
-);
-$page-footer: map.merge($page-footer-default, $page-footer);
-
-$page: () !default;
-$page-default: (
-	// 页面背景
-	background: transparent
-);
-$page: map.merge($page-default, $page);
-
-$button: () !default;
-$button-default: (
-	// 按钮主题颜色，默认取值组件 props 中的 type
-	theme: var(--theme-from-prop),
-	// 按钮文本颜色
-	text-color: #fff,
-	// 按钮激活态遮罩颜色
-	active-mask: #ffffff,
-	// plain 按钮的边框宽度
-	border-width: 3rpx
-);
-$button: map.merge($button-default, $button);
-
-$data-list: () !default;
-$data-list-default: (
-	// 触发加载更多的区域高度
-	observer-height: 100vh
-);
-$data-list: map.merge($data-list-default, $data-list);
-
-$empty: () !default;
-$empty-default: (
-	image-size: 300rpx,
-	image-width: UTILS__LOCAL_VAR(image-size),
-	image-height: UTILS__LOCAL_VAR(image-size),
-	space: 20rpx,
-	color: #ccc,
-	font-size: UTILS__GLOBAL_VAR(font-size, normal),
-);
-$empty: map.merge($empty-default, $empty);
-
-$load-more: () !default;
-$load-more-default: (
-	height: 60rpx,
-	space: 40rpx,
-	color: #ccc,
-	font-size: UTILS__GLOBAL_VAR(font-size, normal),
-);
-$load-more: map.merge($load-more-default, $load-more);
-
-$checkbox: () !default;
-$checkbox-default: (
-	checked-color: UTILS__GLOBAL_VAR(theme, primary),
-	unchecked-color: UTILS__GLOBAL_VAR(color, foreground),
-);
-$checkbox: map.merge($checkbox-default, $checkbox);
-
-$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);
-
-$dialog: () !default;
-$dialog-default: (
-	// 标题栏高度
-	header-height: 100rpx,
-	// 操作栏高度
-	footer-height: 134rpx
-);
-$dialog: map.merge($dialog-default, $dialog);
-
-$popup: () !default;
-$popup-default: (
-	// 标题栏高度
-	header-height: 100rpx,
-	// 操作栏高度
-	footer-height: 102rpx
-);
-$popup: map.merge($popup-default, $popup);
-
-$form-item: () !default;
-$form-item-default: (
-	// label 宽度
-	label-width: 6em,
-	// 高度
-	height: 80rpx
-);
-$form-item: map.merge($form-item-default, $form-item);
-
-$switch: () !default;
-$switch-default: (
-	width: 92rpx,
-	height: 48rpx,
-	active-color: UTILS__GLOBAL_VAR(theme, primary),
-	indicator-size: 42rpx,
-);
-$switch: map.merge($switch-default, $switch);
-
-$number-input: () !default;
-$number-input-default: (
-	font-size: inherit,
-	text-align: center,
-);
-$number-input: map.merge($number-input-default, $number-input);
-
-$numpad: () !default;
-$numpad-default: (
-	row-gap: 20rpx,
-	col-gap: 20rpx,
-);
-$numpad: map.merge($numpad-default, $numpad);
-
-$number-dialog: () !default;
-$number-dialog-default: (
-	// 按钮尺寸
-	button-size: 48rpx
-);
-$number-dialog: map.merge($number-dialog-default, $number-dialog);
-
-$tab: () !default;
-$tab-default: (
-	height: 88rpx,
-	tab-padding: 0 10rpx,
-	tab-gaps: 0,
-	color: UTILS__GLOBAL_VAR(color, foreground),
-	font-size: UTILS__GLOBAL_VAR(font-size, large),
-	font-weight: 600,
-	background: #ffffff,
-	border-radius: 0,
-	active-color: UTILS__LOCAL_VAR(color),
-	indicator-color: UTILS__GLOBAL_VAR(theme, primary),
-	indicator-width: null,
-);
-$tab: map.merge($tab-default, $tab);
-
-$search: () !default;
-$search-default: (
-	background: UTILS__GLOBAL_VAR(color, background),
-	border-radius: 8rpx,
-	height: 64rpx,
-	padding: 0 20rpx,
-);
-$search: map.merge($search-default, $search);
-
-$price: () !default;
-$price-default: (
-	color: inherit,
-	font-size: inherit,
-	font-weight: inherit,
-	integer-color: UTILS__LOCAL_VAR(color),
-	integer-font-size: UTILS__LOCAL_VAR(font-size),
-	integer-font-weight: UTILS__LOCAL_VAR(font-weight),
-	decimal-color: UTILS__LOCAL_VAR(color),
-	decimal-font-size: UTILS__LOCAL_VAR(font-size),
-	decimal-font-weight: UTILS__LOCAL_VAR(font-weight),
-	unit-color: UTILS__LOCAL_VAR(color),
-	unit-font-size: UTILS__LOCAL_VAR(font-size),
-	unit-font-weight: UTILS__LOCAL_VAR(font-weight),
-);
-$price: map.merge($price-default, $price);
-
-// $page: () !default;
-// $page-default: ();
-// $page: map.merge($page-default, $page);
-
-// $page: () !default;
-// $page-default: ();
-// $page: map.merge($page-default, $page);
+// @forward '../../components/badge/badge.scss';
+@forward '../../components/button/button.scss';
+// @forward '../../components/checkbox/checkbox.scss';
+// @forward '../../components/data-list/data-list.scss';
+// @forward '../../components/dialog/dialog.scss';
+// @forward '../../components/empty/empty.scss';
+// @forward '../../components/form-item/form-item.scss';
+// @forward '../../components/load-more/load-more.scss';
+// @forward '../../components/number-dialog/number-dialog.scss';
+// @forward '../../components/number-input/number-input.scss';
+// @forward '../../components/numpad/numpad.scss';
+// @forward '../../components/page/page.scss';
+// @forward '../../components/page/page-header.scss';
+// @forward '../../components/page/page-body.scss';
+// @forward '../../components/page/page-footer.scss';
+// @forward '../../components/popover/popover.scss';
+// @forward '../../components/popup/popup.scss';
+// @forward '../../components/price/price.scss';
+// @forward '../../components/search/search.scss';
+// @forward '../../components/switch/switch.scss';
+// @forward '../../components/tab/tab.scss';

package/utils/date.d.ts

@@ -0,0 +1,47 @@
+type ValidDateValue = Date | number | string;
+/**
+ * 将Date 对象、时间戳或时间格式字符串转为 Date 对象
+ * @param   dateValue Date 对象、时间戳或时间格式字符串
+ * @returns Date 对象
+ */
+export declare function toDate(dateValue: ValidDateValue | null | undefined): Date | null;
+type FormatFn = {
+	(date: Date | null | undefined, format?: string): string;
+	DATE: string;
+	DATE_WITH_YEAR: string;
+	TIME: string;
+	TIME_MS: string;
+	TIME_MINUTE: string;
+	DATE_TIME: string;
+	DATE_TIME_MS: string;
+	DATE_TIME_WITH_YEAR: string;
+	DATE_TIME_MS_WITH_YEAR: string;
+	DATE_MINUTE: string;
+	DATE_MINUTE_WITH_YEAR: string;
+};
+/**
+ * 格式化日期
+ *
+ * format 参数说明：
+ * - Y: 年
+ * - M: 月
+ * - D: 日
+ * - H: 时
+ * - m: 分
+ * - s: 秒
+ * - S: 毫秒
+ * - w: 星期
+ * - W: 星期（中文）
+ * @param   date 要格式化的日期对象
+ * @param   format 格式化参数 默认值 YYYY-MM-DD
+ * @returns 格式化后的日期
+ */
+export declare const formatDate: FormatFn;
+/**
+ * 获取两个时间的天数差
+ * @param   day1 时间1
+ * @param   day2 时间2
+ * @returns 天数差，负数: day1 < day2
+ */
+export declare function daysDiff(day1: ValidDateValue, day2: ValidDateValue): number;
+export {};

package/utils/date.js

@@ -1,25 +1,18 @@
 /**
  * 将Date 对象、时间戳或时间格式字符串转为 Date 对象
- * @param {Date | number | string} dateValue Date 对象、时间戳或时间格式字符串
- * @returns {Date} Date 对象
+ * @param   dateValue Date 对象、时间戳或时间格式字符串
+ * @returns Date 对象
  */
 export function toDate(dateValue) {
 	if (dateValue instanceof Date) return new Date(dateValue);
 	if (typeof dateValue === 'number') return new Date(dateValue);
-	if (!dateValue) {
-		return null;
-	}
-	if (typeof dateValue !== 'string') {
-		throw new Error("dateValue's type is invalid");
-	}
+	if (!dateValue) return null;
+	if (typeof dateValue !== 'string') throw new Error("dateValue's type is invalid");
 	// 兼容 iOS 日期格式
 	const result = new Date(dateValue.replace(/-/g, '/'));
-	if (isNaN(result.getTime())) {
-		throw new Error('dateValue cannot be parsed to Date object');
-	}
+	if (isNaN(result.getTime())) throw new Error('dateValue cannot be parsed to Date object');
 	return result;
 }
-
 /**
  * 格式化日期
  *
@@ -33,14 +26,12 @@ export function toDate(dateValue) {
  * - S: 毫秒
  * - w: 星期
  * - W: 星期（中文）
- * @param {Date | undefined} date 要格式化的日期对象
- * @param {string} format 格式化参数 默认值 YYYY-MM-DD
- * @returns {string} 格式化后的日期
+ * @param   date 要格式化的日期对象
+ * @param   format 格式化参数 默认值 YYYY-MM-DD
+ * @returns 格式化后的日期
  */
-export function formatDate(date, format = formatDate.DATE_WITH_YEAR) {
-	if (!date) {
-		return '';
-	}
+export const formatDate = (date, format = formatDate.DATE_WITH_YEAR) => {
+	if (!date) return '';
 	const fullYear = date.getFullYear().toString();
 	const year = fullYear.substring(fullYear.length - 2);
 	const month = (date.getMonth() + 1).toString();
@@ -74,7 +65,6 @@ export function formatDate(date, format = formatDate.DATE_WITH_YEAR) {
 			weekCN = '六';
 			break;
 	}
-
 	const replacement = [
 		{ reg: 'Y{3,4}', val: fullYear, pad: 0 },
 		{ reg: 'Y{1,2}', val: year, pad: 0 },
@@ -87,16 +77,14 @@ export function formatDate(date, format = formatDate.DATE_WITH_YEAR) {
 		{ reg: 'w', val: week, pad: 0 },
 		{ reg: 'W', val: weekCN, pad: 0 },
 	];
-
 	for (let i = 0; i < replacement.length; i++) {
 		const r = replacement[i];
-		format = format.replace(new RegExp(r.reg, 'g'), function (m) {
-			return r.pad > 0 ? r.val.padStart(Math.min(r.pad, m.length), '0') : r.val;
-		});
+		format = format.replace(new RegExp(r.reg, 'g'), (m) =>
+			r.pad > 0 ? r.val.padStart(Math.min(r.pad, m.length), '0') : r.val
+		);
 	}
 	return format;
-}
-
+};
 /** 月日 */
 formatDate.DATE = 'MM-DD';
 /** 年月日 */
@@ -119,32 +107,24 @@ formatDate.DATE_TIME_MS_WITH_YEAR = 'YYYY-MM-DD HH:mm:ss.SSS';
 formatDate.DATE_MINUTE = 'MM-DD HH:mm';
 /** 年月日 时分 */
 formatDate.DATE_MINUTE_WITH_YEAR = 'YYYY-MM-DD HH:mm';
-
 /** 时区差 */
 const TIMEZONE_OFFSET = new Date().getTimezoneOffset() * 60 * 1000;
-
 /**
  * 获取时间的UTC相对时间戳
- * @param {number | string | Date} date 时间
- * @returns {number} 毫秒数
+ * @param   date 时间
+ * @returns 毫秒数
  */
 function toDayTimestamp(date) {
-	let d = null;
-	if (typeof date === 'number') {
-		return date - TIMEZONE_OFFSET;
-	} else if (typeof date === 'string') {
-		d = toDate(date);
-	} else if (!(date instanceof Date)) {
-		d = new Date();
-	}
-	return d.getTime() - TIMEZONE_OFFSET;
+	if (typeof date === 'number') return date - TIMEZONE_OFFSET;
+	if (typeof date === 'string') return toDate(date).getTime() - TIMEZONE_OFFSET;
+	if (date instanceof Date) return date.getTime() - TIMEZONE_OFFSET;
+	return Date.now() - TIMEZONE_OFFSET;
 }
-
 /**
  * 获取两个时间的天数差
- * @param {number | string | Date} day1 时间1
- * @param {number | string | Date} day2 时间2
- * @returns {number} 天数差，负数: day1 < day2
+ * @param   day1 时间1
+ * @param   day2 时间2
+ * @returns 天数差，负数: day1 < day2
  */
 export function daysDiff(day1, day2) {
 	return Math.floor(toDayTimestamp(day1) / 8.64e7) - Math.floor(toDayTimestamp(day2) / 8.64e7);

package/utils/date.ts

@@ -0,0 +1,153 @@
+type ValidDateValue = Date | number | string;
+
+/**
+ * 将Date 对象、时间戳或时间格式字符串转为 Date 对象
+ * @param   dateValue Date 对象、时间戳或时间格式字符串
+ * @returns Date 对象
+ */
+export function toDate(dateValue: ValidDateValue | null | undefined): Date | null {
+	if (dateValue instanceof Date) return new Date(dateValue);
+	if (typeof dateValue === 'number') return new Date(dateValue);
+	if (!dateValue) return null;
+	if (typeof dateValue !== 'string') throw new Error("dateValue's type is invalid");
+
+	// 兼容 iOS 日期格式
+	const result = new Date(dateValue.replace(/-/g, '/'));
+	if (isNaN(result.getTime())) throw new Error('dateValue cannot be parsed to Date object');
+	return result;
+}
+
+type FormatFn = {
+	(date: Date | null | undefined, format?: string): string;
+	DATE: string;
+	DATE_WITH_YEAR: string;
+	TIME: string;
+	TIME_MS: string;
+	TIME_MINUTE: string;
+	DATE_TIME: string;
+	DATE_TIME_MS: string;
+	DATE_TIME_WITH_YEAR: string;
+	DATE_TIME_MS_WITH_YEAR: string;
+	DATE_MINUTE: string;
+	DATE_MINUTE_WITH_YEAR: string;
+};
+/**
+ * 格式化日期
+ *
+ * format 参数说明：
+ * - Y: 年
+ * - M: 月
+ * - D: 日
+ * - H: 时
+ * - m: 分
+ * - s: 秒
+ * - S: 毫秒
+ * - w: 星期
+ * - W: 星期（中文）
+ * @param   date 要格式化的日期对象
+ * @param   format 格式化参数 默认值 YYYY-MM-DD
+ * @returns 格式化后的日期
+ */
+export const formatDate: FormatFn = (date, format = formatDate.DATE_WITH_YEAR) => {
+	if (!date) return '';
+	const fullYear = date.getFullYear().toString();
+	const year = fullYear.substring(fullYear.length - 2);
+	const month = (date.getMonth() + 1).toString();
+	const day = date.getDate().toString();
+	const hour = date.getHours().toString();
+	const min = date.getMinutes().toString();
+	const sec = date.getSeconds().toString();
+	const ms = date.getMilliseconds().toString();
+	const week = date.getDay().toString();
+	let weekCN = '';
+	switch (week) {
+		case '0':
+			weekCN = '日';
+			break;
+		case '1':
+			weekCN = '一';
+			break;
+		case '2':
+			weekCN = '二';
+			break;
+		case '3':
+			weekCN = '三';
+			break;
+		case '4':
+			weekCN = '四';
+			break;
+		case '5':
+			weekCN = '五';
+			break;
+		case '6':
+			weekCN = '六';
+			break;
+	}
+	const replacement = [
+		{ reg: 'Y{3,4}', val: fullYear, pad: 0 },
+		{ reg: 'Y{1,2}', val: year, pad: 0 },
+		{ reg: 'M{1,2}', val: month, pad: 2 },
+		{ reg: 'D{1,2}', val: day, pad: 2 },
+		{ reg: 'H{1,2}', val: hour, pad: 2 },
+		{ reg: 'm{1,2}', val: min, pad: 2 },
+		{ reg: 's{1,2}', val: sec, pad: 2 },
+		{ reg: 'S{1,3}', val: ms, pad: 3 },
+		{ reg: 'w', val: week, pad: 0 },
+		{ reg: 'W', val: weekCN, pad: 0 },
+	];
+	for (let i = 0; i < replacement.length; i++) {
+		const r = replacement[i]!;
+		format = format.replace(new RegExp(r.reg, 'g'), (m) =>
+			r.pad > 0 ? r.val.padStart(Math.min(r.pad, m.length), '0') : r.val
+		);
+	}
+	return format;
+};
+
+/** 月日 */
+formatDate.DATE = 'MM-DD';
+/** 年月日 */
+formatDate.DATE_WITH_YEAR = 'YYYY-MM-DD';
+/** 时分秒 */
+formatDate.TIME = 'HH:mm:ss';
+/** 时分秒.毫秒 */
+formatDate.TIME_MS = 'HH:mm:ss.SSS';
+/** 时分 */
+formatDate.TIME_MINUTE = 'HH:mm';
+/** 月日 时分秒 */
+formatDate.DATE_TIME = 'MM-DD HH:mm:ss';
+/** 月日 时分秒.毫秒 */
+formatDate.DATE_TIME_MS = 'MM-DD HH:mm:ss.SSS';
+/** 年月日 时分秒 */
+formatDate.DATE_TIME_WITH_YEAR = 'YYYY-MM-DD HH:mm:ss';
+/** 年月日 时分秒.毫秒 */
+formatDate.DATE_TIME_MS_WITH_YEAR = 'YYYY-MM-DD HH:mm:ss.SSS';
+/** 月日 时分 */
+formatDate.DATE_MINUTE = 'MM-DD HH:mm';
+/** 年月日 时分 */
+formatDate.DATE_MINUTE_WITH_YEAR = 'YYYY-MM-DD HH:mm';
+
+/** 时区差 */
+const TIMEZONE_OFFSET = new Date().getTimezoneOffset() * 60 * 1000;
+
+/**
+ * 获取时间的UTC相对时间戳
+ * @param   date 时间
+ * @returns 毫秒数
+ */
+function toDayTimestamp(date: ValidDateValue): number {
+	if (typeof date === 'number') return date - TIMEZONE_OFFSET;
+	if (typeof date === 'string') return toDate(date)!.getTime() - TIMEZONE_OFFSET;
+	if (date instanceof Date) return date.getTime() - TIMEZONE_OFFSET;
+	return Date.now() - TIMEZONE_OFFSET;
+}
+
+/**
+ * 获取两个时间的天数差
+ * @param   day1 时间1
+ * @param   day2 时间2
+ * @returns 天数差，负数: day1 < day2
+ */
+export function daysDiff(day1: ValidDateValue, day2: ValidDateValue): number {
+	return Math.floor(toDayTimestamp(day1) / 8.64e7) - Math.floor(toDayTimestamp(day2) / 8.64e7);
+}

package/utils/freezeDeep.d.ts

@@ -0,0 +1 @@
+export declare function freezeDeep<T>(obj: T): Readonly<T>;

package/utils/freezeDeep.js

@@ -1,19 +1,9 @@
-/**
- * 深度冻结一个对象
- *
- * 注意：传入的对象和返回的对象是同一个引用，慎用！！
- *
- * @template T
- * @param {T} obj 要被冻结的对象
- * @returns {Readonly<T>}
- */
 export function freezeDeep(obj) {
 	if (!(typeof obj === 'object' && obj)) {
 		return obj;
-	} else {
-		for (let key in obj) {
-			freezeDeep(obj[key]);
-		}
-		return Object.freeze(obj);
 	}
+	for (const key in obj) {
+		freezeDeep(obj[key]);
+	}
+	return Object.freeze(obj);
 }

package/utils/freezeDeep.ts

@@ -0,0 +1,9 @@
+export function freezeDeep<T>(obj: T): Readonly<T> {
+	if (!(typeof obj === 'object' && obj)) {
+		return obj;
+	}
+	for (const key in obj) {
+		freezeDeep((obj as Record<string, unknown>)[key]);
+	}
+	return Object.freeze(obj);
+}

package/utils/price.d.ts

@@ -0,0 +1,24 @@
+interface FormatPriceOption {
+	/** 精度，默认为 2 */
+	precision: number;
+	/** 是否补齐小数部分 0 */
+	padDecimal: boolean;
+}
+interface FormatPriceResult {
+	/** 格式化的价格字符串 */
+	price: string;
+	/** 是否负值 */
+	negative: boolean;
+	/** 整数部分价格 */
+	integer: string;
+	/** 小数部分价格 */
+	decimal: string;
+	/** 价格对应数值 */
+	number: number;
+}
+/**
+ * 格式化价格
+ * @param price 价格
+ */
+export declare function formatPrice(price: number | string, option?: FormatPriceOption): FormatPriceResult;
+export {};

package/utils/price.js

@@ -1,10 +1,9 @@
 /**
  * 格式化价格
- * @param {number} price 价格
- * @returns {FormattedPrice}
+ * @param price 价格
  */
-export function formatPrice(price) {
-	if (isNaN(price)) {
+export function formatPrice(price, option) {
+	if (isNaN(Number(price))) {
 		return {
 			price: '',
 			negative: false,
@@ -20,13 +19,20 @@ export function formatPrice(price) {
 		price = -price;
 	}
 	const integer = Math.floor(price).toString();
-	const decimal = (Math.round(+price + 'e' + 2) % 100).toString().padStart(2, '0');
+	const decimalNum = Math.round(Number(price + 'e' + (option?.precision ?? 2))) % 100;
+	let decimal;
+	if (option?.padDecimal ?? true) {
+		decimal = '.' + decimalNum.toString().padStart(option?.precision ?? 2, '0');
+	} else {
+		if (decimalNum === 0) decimal = '';
+		else decimal = decimalNum.toString().slice(1);
+	}
 	const formattedPrice = `${negative ? '-' : ''}${integer}.${decimal}`;
 	return {
-		price: formattedPrice, // 价格字符串
+		price: formattedPrice,
 		negative,
-		integer, // 整数部分
-		decimal, // 小数部分
+		integer,
+		decimal,
 		number: Number(formattedPrice),
 	};
 }