@ecolovo/uniapp-components 1.0.8 → 1.0.9

package/README.md

@@ -89,6 +89,7 @@ module.exports = hot((pagesJson) => {
 /* src/styles/prepend.scss */
 
 @forward '@ecolovo/uniapp-components/styles/var/theme' with (
+  $component-prefix: 'ui', // 推荐修改为与组件前缀一致
   $themes: (
     primary: #d92e20,
   )
@@ -114,11 +115,3 @@ module.exports = {
   // other configs...
 };
 ```
-
-## Components
-
-### Aspect
-
-#### 属性
-
-- ratio: `string | number` 纵横比，默认为 `1` ，即宽高相等

package/components/button/button.vue

@@ -346,6 +346,10 @@ $button-sizes: (
 	}
 }
 
+.Button--round {
+	border-radius: 100vh;
+}
+
 .Button--icon {
 	position: relative;
 	margin-right: 10rpx;

package/components/checkbox/checkbox.vue

@@ -1,7 +1,7 @@
 <template>
 	<view :class="componentClassNames" @click="toggle()">
 		<icon-cpn
-			v-if="checkboxGroupProps.icon"
+			v-if="hasIcon"
 			:icon="usingIcon || ''"
 			tap-size="50rpx"
 			:class="[$style['Checkbox--icon'], { [$style['Checkbox--checked']]: isChecked }]"
@@ -39,7 +39,7 @@ export default {
 		/** checkbox-group 组件的 props 对象，用于读取 radio 和图标 */
 		checkboxGroupProps: {
 			from: 'checkboxGroupProps',
-			default: {},
+			default: { icon: true, radio: false },
 		},
 	},
 	props: {
@@ -53,6 +53,16 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/** 类型 */
+		radio: {
+			type: [Boolean, null],
+			default: null,
+		},
+		/** 是否显示勾选图标 */
+		icon: {
+			type: [Boolean, null],
+			default: null,
+		},
 		/** 选中时的图标 */
 		checkedIcon: {
 			type: String,
@@ -78,9 +88,13 @@ export default {
 		isInGroup() {
 			return !!this.checkboxGroupData;
 		},
+		/** 是否显示勾选图标 */
+		hasIcon() {
+			return this.icon === null ? this.checkboxGroupProps.icon : this.icon;
+		},
 		/** 是否为单选 */
 		isRadio() {
-			return !!this.checkboxGroupProps.radio;
+			return this.radio === null ? this.checkboxGroupProps.radio : this.radio;
 		},
 		/** checkbox-group 的值 */
 		groupCheckedValue() {

package/components/dialog/dialog-content.vue

@@ -29,14 +29,18 @@
 				<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>
+						<slot name="cancel">
+							<button-cpn plain @click="$emit('cancel')">
+								{{ cancel }}
+							</button-cpn>
+						</slot>
 					</view>
 					<view v-if="confirm" :class="$style['DialogContent--button']">
-						<button-cpn @click="$emit('confirm')">
-							{{ confirm }}
-						</button-cpn>
+						<slot name="confirm">
+							<button-cpn @click="$emit('confirm')">
+								{{ confirm }}
+							</button-cpn>
+						</slot>
 					</view>
 				</view>
 			</template>

package/components/dialog/dialog.vue

@@ -8,19 +8,21 @@
 			@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>
+			<slot name="content">
+				<dialog-content-cpn
+					:loading="isLoading"
+					:title="title"
+					:center-title="centerTitle"
+					:show-close="showClose"
+					:cancel="cancel"
+					:confirm="confirm"
+					@close="onClose()"
+					@cancel="onCancel()"
+					@confirm="onConfirm()"
+				>
+					<slot></slot>
+				</dialog-content-cpn>
+			</slot>
 		</popover-mask-cpn>
 	</view>
 </template>
@@ -116,6 +118,12 @@ export default {
 
 			this.close();
 		},
+		onCancel() {
+			this.onButton('cancel', this.closeOnCancel);
+		},
+		onConfirm() {
+			this.onButton('confirm', this.closeOnConfirm);
+		},
 		/** 点击取消或确认按钮
 		 * @param {'cancel' | 'confirm'} btnType 按钮类型
 		 * @param {boolean} shouldClose 是否自动关闭对话框

package/components/page/page-body.vue

@@ -214,14 +214,19 @@ $component-vars: $page-body;
 	position: relative;
 	width: 100%;
 	min-height: 100%;
-	padding: UTILS__LOCAL_VAR(padding-y) UTILS__LOCAL_VAR(padding-x);
+	padding: UTILS__LOCAL_VAR(padding-top, UTILS__LOCAL_VAR(padding))
+		UTILS__LOCAL_VAR(padding-right, UTILS__LOCAL_VAR(padding))
+		UTILS__LOCAL_VAR(padding-bottom, UTILS__LOCAL_VAR(padding))
+		UTILS__LOCAL_VAR(padding-left, UTILS__LOCAL_VAR(padding));
 	box-sizing: border-box;
 
 	flex: 1;
 	display: flex;
 	flex-direction: column;
 	.PageBody--scroll-body & {
-		padding-bottom: calc(var(--padding-y) + var(--bottom-safe-height));
+		padding-bottom: calc(
+			#{UTILS__LOCAL_VAR(padding-bottom, UTILS__LOCAL_VAR(padding))} + var(--bottom-safe-height)
+		);
 	}
 }
 </style>

package/components/page/page-header.vue

@@ -57,6 +57,7 @@
 import componentName from '../../mixins/componentName';
 import windowInfoMixin from '../../mixins/windowInfo';
 import IconCpn from '../icon/icon.vue';
+import { homePath } from '../../configs';
 
 export default {
 	name: 'PageHeader',
@@ -84,27 +85,42 @@ export default {
 		},
 		/** 导航按钮类型: 0 = 不显示，1 = 返回，2 = 首页，3 = 返回|首页 */
 		navType: {
-			type: Number,
-			default: 1,
+			type: [Number, null],
+			default: null,
 		},
 	},
 	computed: {
 		/** 首页路径 */
 		homePageUrl() {
-			// TODO HOME_PATH
-			return process.env.VUE_APP_HOME_PATH;
+			return homePath;
 		},
 		/** 是否显示返回按钮 */
 		hasBack() {
-			return this.navType & 1;
+			// 如果指定了导航按钮类型，则根据类型判断
+			if (this.navType !== null) return !!(this.navType & 1);
+			const pages = getCurrentPages();
+			// 在首页不显示返回按钮
+			if (this.homePageUrl === '/' + pages[0].route) return false;
+			// 页面栈只有一个时不显示返回按钮
+			if (pages.length === 1) return false;
+			// 其他情况均显示返回按钮
+			return true;
 		},
 		/** 是否显示首页按钮 */
 		hasHome() {
-			return this.navType & 2;
+			// 如果指定了导航按钮类型，则根据类型判断
+			if (this.navType !== null) return !!(this.navType & 2);
+			const pages = getCurrentPages();
+			// 在首页不显示返回首页按钮
+			if (this.homePageUrl === '/' + pages[0].route) return false;
+			// 页面栈只有一个时显示返回按钮
+			if (pages.length === 1) return true;
+			// 其他情况均不显示返回按钮
+			return false;
 		},
 		/** 导航按钮个数 */
 		iconCount() {
-			return Math.ceil(this.navType / 2);
+			return (this.hasBack ? 1 : 0) + (this.hasHome ? 1 : 0);
 		},
 		styleStr() {
 			return [

package/components/page/page.vue

@@ -11,7 +11,7 @@
 			:has-custom-nav="custom"
 			:has-footer="hasFooter && $slots.footer"
 			:use-scroll="useScroll"
-			:is-tab-page="isTabPage"
+			:is-tab-page="tabbar"
 			:enable-refresh="enableRefresh"
 			:refreshing="refreshing"
 			@scroll="$emit('scroll', $event)"
@@ -21,7 +21,7 @@
 			<slot></slot>
 		</page-body-cpn>
 
-		<page-footer-cpn v-if="hasFooter && $slots.footer" :is-tab-page="isTabPage">
+		<page-footer-cpn v-if="hasFooter && $slots.footer" :is-tab-page="tabbar">
 			<slot name="footer"></slot>
 		</page-footer-cpn>
 
@@ -95,10 +95,10 @@ export default {
 			type: String,
 			default: 'light',
 		},
-	},
-	computed: {
-		isTabPage() {
-			return false;
+		/** 是否是 tabbar 页面，且 tabbar 未隐藏 */
+		tabbar: {
+			type: Boolean,
+			default: false,
 		},
 	},
 };

package/configs/index.d.ts

@@ -0,0 +1,22 @@
+/** 组件前缀 */
+declare let componentPrefix: string;
+/** 首页路径 */
+declare let homePath: string;
+/** 设置组件前缀 */
+declare const setComponentPrefix: (prefix: string) => void;
+/** 设置首页路径 */
+declare const setHomePath: (path: string) => void;
+/** iconfont 图标 map */
+declare let iconMap: Map<string, { fontFamily: string; prefix: string; name: string }>;
+interface IconFontJson {
+	font_family: string;
+	css_prefix_text: string;
+	glyphs: { font_class: string }[];
+}
+/**
+ * 添加一组图标，传入 iconfont.json 文件内容
+ * @param iconJson iconfont.json 文件内容
+ */
+declare const addIcons: (iconJson: IconFontJson) => void;
+
+export { componentPrefix, homePath, IconFontJson, setComponentPrefix, setHomePath, iconMap, addIcons };

package/configs/index.js

@@ -1,15 +1,33 @@
 /** 组件前缀 */
 let componentPrefix = 'app';
+/** 首页路径 */
+let homePath = '/pages/index/index';
 
-/** 设置组件前缀 */
+/**
+ * 设置组件前缀
+ * @param {string} prefix 组件前缀
+ */
 function setComponentPrefix(prefix) {
 	componentPrefix = prefix;
 }
 
+/**
+ * 设置首页路径
+ * @param {string} path 首页路径
+ */
+function setHomePath(path) {
+	homePath = path;
+}
+
 /** iconfont 图标 map */
 const iconMap = new Map();
 
-/** 添加单个图标 */
+/**
+ * 添加单个图标
+ * @param {string} fontFamily 字体文件名
+ * @param {string} prefix 图标前缀
+ * @param {string} name 图标名称
+ */
 function addIconToMap(fontFamily, prefix, name) {
 	if (iconMap.has(name)) {
 		// eslint-disable-next-line no-console
@@ -27,7 +45,14 @@ function addIconToMap(fontFamily, prefix, name) {
 	});
 }
 
-/** 添加一组图标，传入 iconfont.json 文件内容 */
+/**
+ * 添加一组图标，传入 iconfont.json 文件内容
+ * @param {object} iconJson iconfont.json 文件内容
+ * @param {string} iconJson.font_family
+ * @param {string} iconJson.css_prefix_text
+ * @param {object[]} iconJson.glyphs
+ * @param {string} iconJson.glyphs.font_class
+ */
 function addIcons(iconJson) {
 	const fontFamily = iconJson.font_family;
 	const prefix = iconJson.css_prefix_text;
@@ -37,6 +62,7 @@ function addIcons(iconJson) {
 	});
 }
 
+// 添加内部图标库
 addIcons(require('../resources/iconfont/uniapp_ui_icon/iconfont.json'));
 
-export { componentPrefix, setComponentPrefix, iconMap, addIcons };
+export { componentPrefix, homePath, setComponentPrefix, setHomePath, iconMap, addIcons };

package/init.d.ts

@@ -0,0 +1,19 @@
+import { IconFontJson } from './configs';
+
+/** 组件库初始化配置 */
+interface InitOptions {
+	/** 组件前缀 */
+	componentPrefix?: string;
+	/** 首页路径 */
+	homePath?: string;
+	/** iconfont 图标 json 文件 */
+	iconfont?: IconFontJson | IconFontJson[];
+}
+
+/**
+ * 初始化组件库
+ * @param {InitOptions} options 组件库初始化配置
+ */
+declare const init: (options: InitOptions) => void;
+
+export default init;

package/init.js

@@ -1,10 +1,13 @@
-const { setComponentPrefix, addIcons } = require('./configs');
+const { setComponentPrefix, setHomePath, addIcons } = require('./configs');
 
 /** 组件库初始化方法，在 main.js 中调用 */
 function init(options = {}) {
 	if (options.componentPrefix) {
 		setComponentPrefix(options.componentPrefix);
 	}
+	if (options.homePath) {
+		setHomePath(options.homePath);
+	}
 	if (options.iconfont) {
 		if (Array.isArray(options.iconfont)) {
 			options.iconfont.forEach(addIcons);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ecolovo/uniapp-components",
-	"version": "1.0.8",
+	"version": "1.0.9",
 	"description": "Ecolovo UniApp 组件库",
 	"scripts": {
 		"lint": "eslint . --fix"
@@ -16,6 +16,7 @@
 		"lodash-es": "4.17.21"
 	},
 	"devDependencies": {
+		"@dcloudio/types": "^3.4.30",
 		"@eslint/js": "^10.0.1",
 		"eslint": "^10.0.3",
 		"eslint-config-prettier": "^10.1.8",

package/styles/utils/css-var.scss

@@ -12,8 +12,13 @@ $component-vars: null !default;
 	@return string.unquote('--#{$component-prefix}-#{$component}--#{$name}');
 }
 
-// 设置组件外部变量值
-@mixin UTILS__SET_VAR($component, $values) {
+// 设置组件单个外部变量值
+@mixin UTILS__SET_VAR($component, $name, $value) {
+	#{UTILS__VAR_NAME($name, $component)}: $value;
+}
+
+// 设置组件一组外部变量值
+@mixin UTILS__SET_VAR_LIST($component, $values) {
 	@each $name, $value in $values {
 		#{UTILS__VAR_NAME($name, $component)}: $value;
 	}

package/styles/var/component.scss

@@ -39,8 +39,11 @@ $page-body: () !default;
 $page-body-default: (
 	// 可视区域背景
 	background: transparent,
-	padding-x: 20rpx,
-	padding-y: 20rpx
+	padding: 20rpx,
+	padding-top: null,
+	padding-right: null,
+	padding-bottom: null,
+	padding-left: null
 );
 $page-body: map.merge($page-body-default, $page-body);
 

package/utils/windowInfo.js

@@ -62,10 +62,6 @@ const windowInfoMixin = {
 	},
 };
 
-/**
- * @typedef {ComponentDefinition<{}, {}, ComputedDefinition<typeof windowInfoMixin['computed']>>['$vm']} WindowInfoMixin
- */
-
 export {
 	menuButton,
 	windowInfo,