@ecolovo/uniapp-components 1.0.9 → 2.0.0

package/configs/index.ts

@@ -0,0 +1,82 @@
+import defaultIconfonts from '../resources/iconfont/uniapp_ui_icon/iconfont.json';
+
+/** 组件前缀 */
+let componentPrefix = 'app';
+/** 首页路径 */
+let homePath = '/pages/index/index';
+
+/**
+ * 设置组件前缀
+ * @param prefix 组件前缀
+ */
+function setComponentPrefix(prefix: string = 'app') {
+	if (!prefix) throw new Error('组件前缀不能为空');
+	componentPrefix = prefix;
+}
+
+/**
+ * 设置首页路径
+ * @param path 首页路径
+ */
+function setHomePath(path: string = '/pages/index/index') {
+	if (!path) throw new Error('app 首页不能为空');
+	homePath = path;
+}
+
+interface IconInfo {
+	/** 字体文件名 */
+	fontFamily: string;
+	/** 图标前缀 */
+	prefix: string;
+	/** 图标名称 */
+	name: string;
+}
+
+/** iconfont 图标 map */
+const iconMap: Map<string, IconInfo> = new Map();
+
+/**
+ * 添加单个图标
+ * @param fontFamily 字体文件名
+ * @param prefix 图标前缀
+ * @param name 图标名称
+ */
+function addIconToMap(fontFamily: string, prefix: string, name: string) {
+	if (iconMap.has(name)) {
+		// eslint-disable-next-line no-console
+		console.warn(
+			`图标库 "${fontFamily}" 中的图标 "${name}" 在图标库 "${
+				iconMap.get(name)!.fontFamily
+			}" 中已存在，新的图标将会覆盖已存在的同名图标`
+		);
+	}
+	iconMap.set(name, {
+		fontFamily,
+		prefix,
+		name,
+	});
+}
+
+export interface IconFontJson {
+	font_family: string;
+	css_prefix_text: string;
+	glyphs: { font_class: string }[];
+}
+
+/**
+ * 添加一组图标，传入 iconfont.json 文件内容
+ * @param iconJson iconfont.json 文件内容
+ */
+function addIcons(iconJson: IconFontJson) {
+	const fontFamily = iconJson.font_family;
+	const prefix = iconJson.css_prefix_text;
+	const glyphs = iconJson.glyphs;
+	glyphs.forEach((glyph) => {
+		addIconToMap(fontFamily, prefix, glyph.font_class);
+	});
+}
+
+// 添加内部图标库
+addIcons(defaultIconfonts);
+
+export { componentPrefix, homePath, setComponentPrefix, setHomePath, iconMap, addIcons };

package/{easyCom.js → easyCom.ts}

@@ -28,4 +28,4 @@ function componentEasyCom(componentPrefix = 'app') {
 }
 
 // 导出 easycom 配置
-module.exports = componentEasyCom;
+export default componentEasyCom;

package/index.ts

@@ -0,0 +1 @@
+export { default as init } from './init';

package/init.ts

@@ -0,0 +1,34 @@
+import { setComponentPrefix, setHomePath, addIcons } from './configs';
+import type { IconFontJson } from './configs';
+
+/** 组件库初始化配置 */
+interface InitOptions {
+	/** 组件前缀 */
+	componentPrefix?: string;
+	/** 首页路径 */
+	homePath?: string;
+	/** iconfont 图标 json 文件 */
+	iconfont?: IconFontJson | IconFontJson[];
+}
+
+/**
+ * 组件库初始化方法，在使用组件库前调用
+ * @param options 组件库初始化配置
+ */
+function init(options: InitOptions = {}) {
+	if (options.componentPrefix) {
+		setComponentPrefix(options.componentPrefix);
+	}
+	if (options.homePath) {
+		setHomePath(options.homePath);
+	}
+	if (options.iconfont) {
+		if (Array.isArray(options.iconfont)) {
+			options.iconfont.forEach(addIcons);
+		} else {
+			addIcons(options.iconfont);
+		}
+	}
+}
+
+export default init;

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "@ecolovo/uniapp-components",
-	"version": "1.0.9",
-	"description": "Ecolovo UniApp 组件库",
+	"version": "2.0.0",
+	"description": "Ecolovo UniApp Vue3 组件库",
 	"scripts": {
-		"lint": "eslint . --fix"
+		"lint": "eslint --fix"
 	},
 	"keywords": [
 		"uniapp",
@@ -12,18 +12,26 @@
 	"author": "Yang",
 	"license": "ISC",
 	"dependencies": {
+		"@ecolovo/utils": "^1.0.7",
 		"case-anything": "3.1.2",
-		"lodash-es": "4.17.21"
+		"lodash-es": "4.17.21",
+		"vue": "^3.4.21"
 	},
 	"devDependencies": {
 		"@dcloudio/types": "^3.4.30",
 		"@eslint/js": "^10.0.1",
+		"@types/lodash-es": "^4.17.12",
+		"@vue/eslint-config-prettier": "^10.2.0",
+		"@vue/eslint-config-typescript": "^14.8.0",
+		"@vue/tsconfig": "^0.1.3",
 		"eslint": "^10.0.3",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-prettier": "^5.5.5",
 		"eslint-plugin-vue": "^10.8.0",
 		"globals": "^17.4.0",
+		"miniprogram-api-typings": "^5.2.1",
 		"prettier": "^2.8.8",
+		"typescript": "^4.9.4",
 		"vue-eslint-parser": "^10.4.0"
 	}
 }

package/styles/utils/css-var.scss

@@ -4,11 +4,8 @@
 @use 'sass:string';
 @use '../var/theme' as *;
 
-$component-name: null !default;
-$component-vars: null !default;
-
 // 返回组件外部变量名
-@function UTILS__VAR_NAME($name, $component: $component-name) {
+@function UTILS__VAR_NAME($name, $component) {
 	@return string.unquote('--#{$component-prefix}-#{$component}--#{$name}');
 }
 
@@ -25,7 +22,7 @@ $component-vars: null !default;
 }
 
 // 返回组件外部变量值
-@function UTILS__VAR($name, $component: $component-name, $default: null) {
+@function UTILS__VAR($name, $component, $default: null) {
 	@if $default != null {
 		@return var(UTILS__VAR_NAME($name, $component), $default);
 	}
@@ -43,17 +40,17 @@ $component-vars: null !default;
 }
 
 // 定义组件变量
-@mixin UTILS__DEFINE_COMPONENT_VARS() {
-	@if not $component-name {
-		@error "请在调用 UTILS__DEFINE_COMPONENT_VARS 之前设置 $component-name";
+@mixin UTILS__DEFINE_COMPONENT_VARS($vars, $name) {
+	@if not $name {
+		@error "请传入 $name";
 	}
 
-	@if (not $component-vars) or (meta.type-of($component-vars) != 'map') {
-		@error "请在调用 UTILS__DEFINE_COMPONENT_VARS 之前设置 $component-vars";
+	@if (not $vars) or (meta.type-of($vars) != 'map') {
+		@error "请传入 $vars";
 	}
 
-	@each $key, $value in $component-vars {
-		@include __DO_NOT_USE__define-component-var($key, $value);
+	@each $key, $value in $vars {
+		@include __DO_NOT_USE__define-component-var($name, $key, $value);
 	}
 }
 
@@ -65,12 +62,12 @@ $component-vars: null !default;
 }
 
 // 定义单个组件变量，不要直接调用
-@mixin __DO_NOT_USE__define-component-var($name, $value) {
+@mixin __DO_NOT_USE__define-component-var($component, $name, $value) {
 	@if not $component-prefix {
 		@error "请在调用 __DO_NOT_USE__define-component-var 之前设置 component-prefix";
 	}
 
-	$var-prefix: '#{$component-prefix}-#{$component-name}';
+	$var-prefix: '#{$component-prefix}-#{$component}';
 
 	$default: false;
 
@@ -78,7 +75,7 @@ $component-vars: null !default;
 		$default: true;
 	}
 
-	$var-name: UTILS__VAR_NAME($name);
+	$var-name: UTILS__VAR_NAME($name, $component);
 	$local-name: __DO_NOT_USE__local-var-name($name);
 
 	@if $default {

package/styles/utils/ellipsis.scss

@@ -1,10 +1,3 @@
-// 单行
-.ellipsis {
-	overflow-x: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
 @mixin UTILS__ELLIPSIS($line: 1) {
 	@if $line < 1 {
 		@error "$line 必须为非 0 正整数";

package/styles/utils/z-index.scss

@@ -5,6 +5,6 @@
 @use '../var/theme' as *;
 @use './css-var' as *;
 
-@function UTILS__z-index($key: $component-name) {
+@function UTILS__z-index($key) {
 	@return map.get($z-index-maps, $key);
 }

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.js → date.ts}

@@ -1,25 +1,36 @@
+type ValidDateValue = Date | number | string;
+
 /**
  * 将Date 对象、时间戳或时间格式字符串转为 Date 对象
- * @param {Date | number | string} dateValue Date 对象、时间戳或时间格式字符串
- * @returns {Date} Date 对象
+ * @param   dateValue Date 对象、时间戳或时间格式字符串
+ * @returns Date 对象
  */
-export function toDate(dateValue) {
+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");
-	}
+	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;
 }
 
+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;
+};
 /**
  * 格式化日期
  *
@@ -33,14 +44,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: 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();
@@ -74,7 +83,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,15 +95,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;
-		});
+		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';
@@ -125,27 +132,22 @@ 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;
+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 {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) {
+export function daysDiff(day1: ValidDateValue, day2: ValidDateValue): number {
 	return Math.floor(toDayTimestamp(day1) / 8.64e7) - Math.floor(toDayTimestamp(day2) / 8.64e7);
 }

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);
+}