@ecolovo/uniapp-components 1.0.6 → 1.0.9

package/README.md

@@ -0,0 +1,117 @@
+# @ecolovo/uniapp-components
+
+Ecolovo UniApp 组件库
+
+
+## Installation
+
+使用 npm / yarn 安装
+
+```bash
+  npm install @ecolovo/uniapp-components
+```
+
+同时需要使用 `uni-pages-hot-modules` 用来动态配置
+
+```bash
+  npm install uni-pages-hot-modules --save-dev
+```
+
+## Usage
+
+### 1. 配置 `vue.config.js` 文件
+
+```javascript
+// vue.config.js
+
+module.exports = {
+  // configs...
+  transpileDependencies: ['@ecolovo/uniapp-components'],
+  // other configs...
+}
+```
+
+### 2. 在 `src/main.js` 文件中初始化组件库
+
+```javascript
+// src/main.js
+
+import init from '@ecolovo/uniapp-components/init';
+
+init({
+  // 配置组件前缀
+  // 在使用时加上前缀，如 button 组件，使用 <ui-button>
+  componentPrefix: 'ui',
+});
+```
+
+### 3. 配置 `src/pages.js` 文件，
+
+```javascript
+// src/pages.js
+
+const mergeWith = require('lodash/mergeWith');
+const { hot } = require('uni-pages-hot-modules');
+const componentEasyCom = require('@ecolovo/uniapp-components/easyCom');
+
+module.exports = hot((pagesJson) => {
+  const pagesConfig = require('./pagesDef');
+
+  return mergeWith(
+    // pages.json 中的配置
+    pagesJson,
+    pagesConfig,
+    componentEasyCom('ui'), // 填入和步骤 2 中同样的前缀
+    function (objValue, srcValue) {
+      if (Array.isArray(objValue)) {
+        return objValue.concat(srcValue);
+      }
+    }
+  );
+});
+```
+
+### 4. 配置样式
+
+#### 全局样式
+
+```html
+<!-- App.vue -->
+
+<style lang="scss">
+@use '@ecolovo/uniapp-components/styles/global';
+</style>
+```
+
+#### 自定义组件配置
+
+```css
+/* src/styles/prepend.scss */
+
+@forward '@ecolovo/uniapp-components/styles/var/theme' with (
+  $component-prefix: 'ui', // 推荐修改为与组件前缀一致
+  $themes: (
+    primary: #d92e20,
+  )
+);
+
+@forward '@ecolovo/uniapp-components/styles';
+```
+
+```javascript
+// vue.config.js
+
+const sass = require('sass');
+
+module.exports = {
+  // configs...
+  css: {
+    loaderOptions: {
+      scss: {
+        prependData: '@use "@/styles/prepend" as *;'
+      },
+    },
+  },
+  // other configs...
+};
+```

package/components/aspect/aspect.vue

@@ -1,6 +1,6 @@
 <template>
 	<view :class="componentClassNames">
-		<view :class="$style['Aspect--content-wrapper']" :style="{ paddingTop: 100 / ratio + '%' }">
+		<view :class="$style['Aspect--content-wrapper']" :style="{ paddingTop: 100 * ratio + '%' }">
 			<view :class="$style['Aspect--content']" @click="$emit('click')">
 				<slot></slot>
 			</view>
@@ -12,14 +12,14 @@
 import componentName from '../../mixins/componentName';
 
 export default {
-	name: 'AppAspect',
+	name: 'Aspect',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
 	mixins: [componentName],
 	props: {
-		/** 纵横比，默认为 1，即宽高相等 */
+		/** 高与宽的比例，默认为 1，即宽高相等，2 表示高为宽的 2 倍 */
 		ratio: {
 			type: [String, Number],
 			default: 1,

package/components/badge/badge.vue

@@ -19,7 +19,7 @@
 import componentName from '../../mixins/componentName';
 
 export default {
-	name: 'AppBadge',
+	name: 'Badge',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/button/button.vue

@@ -64,7 +64,7 @@ import IconCpn from '../icon/icon.vue';
  * 当 async 为 true 时，需要在父组件监听 click 事件的回调函数中调用传入的 resolve 或 reject 方法，否则按钮将持续处于 loading 状态
  */
 export default {
-	name: 'AppButton',
+	name: 'Button',
 	components: { IconCpn },
 	mixins: [componentName],
 	options: {
@@ -240,7 +240,7 @@ $component-vars: $button;
 }
 
 %button-themes {
-	@each $name, $color in $component-themes {
+	@each $name, $color in $themes {
 		--button-theme-#{$name}: #{$color};
 	}
 }
@@ -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 }]"
@@ -18,7 +18,7 @@ import { isFormReadonly } from '../form/mixin';
 import IconCpn from '../icon/icon.vue';
 
 export default {
-	name: 'AppCheckbox',
+	name: 'Checkbox',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
@@ -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/checkbox-group/checkbox-group.vue

@@ -8,7 +8,7 @@
 import componentName from '../../mixins/componentName';
 
 export default {
-	name: 'AppCheckboxGroup',
+	name: 'CheckboxGroup',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/checkbox-group2/checkbox-group2.vue

@@ -20,7 +20,7 @@ import componentName from '../../mixins/componentName';
 import CheckboxCpn from './checkbox.vue';
 
 export default {
-	name: 'AppCheckboxGroup2',
+	name: 'CheckboxGroup2',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/checkbox-group2/checkbox.vue

@@ -17,7 +17,7 @@ import componentName from '../../mixins/componentName';
 import IconCpn from '../icon/icon.vue';
 
 export default {
-	name: 'AppCheckbox2',
+	name: 'Checkbox2',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/data-list/data-list.vue

@@ -19,7 +19,7 @@ import componentName from '../../mixins/componentName';
 import LoadMoreCpn from '../load-more/load-more.vue';
 
 export default {
-	name: 'AppDataList',
+	name: 'DataList',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

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

@@ -47,7 +47,7 @@ function getDateOptions(date) {
 }
 
 export default {
-	name: 'AppDatePickerView',
+	name: 'DatePickerView',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/date-picker/date-picker.vue

@@ -61,7 +61,7 @@ import SelectorCpn from '../selector/selector.vue';
 import DatePickerViewCpn from './date-picker-view.vue';
 
 export default {
-	name: 'AppDatePicker',
+	name: 'DatePicker',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

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

@@ -57,7 +57,7 @@ function getDateOptions(date) {
 }
 
 export default {
-	name: 'AppDatetimePickerView',
+	name: 'DatetimePickerView',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

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

@@ -51,7 +51,7 @@ import DatetimePickerViewCpn from './datetime-picker-view.vue';
 const DATE_FORMAT = formatDate.DATE_MINUTE_WITH_YEAR;
 
 export default {
-	name: 'AppDatetimePicker',
+	name: 'DatetimePicker',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

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>
@@ -51,7 +55,7 @@ import IconCpn from '../icon/icon.vue';
 import PopoverContentCpn from '../popover/popover-content.vue';
 
 export default {
-	name: 'AppDialogContent',
+	name: 'DialogContent',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

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>
@@ -31,7 +33,7 @@ import PopoverMaskCpn from '../popover/popover-mask.vue';
 import DialogContentCpn from './dialog-content.vue';
 
 export default {
-	name: 'AppDialog',
+	name: 'Dialog',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
@@ -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/dropdown/dropdown.vue

@@ -19,7 +19,7 @@ import componentName from '../../mixins/componentName';
 import IconCpn from '../../icon/icon.vue';
 
 export default {
-	name: 'AppDropdown',
+	name: 'Dropdown',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/empty/empty.vue

@@ -24,7 +24,7 @@ import componentName from '../../mixins/componentName';
 import IconCpn from '../icon/icon.vue';
 
 export default {
-	name: 'AppEmpty',
+	name: 'Empty',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/flex/flex.vue

@@ -8,7 +8,7 @@
 import componentName from '../../mixins/componentName';
 
 export default {
-	name: 'AppFlex',
+	name: 'Flex',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/form/form.vue

@@ -8,7 +8,7 @@
 import componentName from '../../mixins/componentName';
 
 export default {
-	name: 'AppForm',
+	name: 'Form',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/form-item/form-item.vue

@@ -24,7 +24,7 @@ import componentName from '../../mixins/componentName';
 import { isFormReadonly } from '../form/mixin';
 
 export default {
-	name: 'AppFormItem',
+	name: 'FormItem',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/icon/icon.vue

@@ -14,7 +14,7 @@ import { iconMap } from '../../configs';
 const iconListStr = iconMap.keys().toArray().sort().join('\n');
 
 export default {
-	name: 'AppIcon',
+	name: 'Icon',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/image/image.vue

@@ -12,7 +12,7 @@
 import componentName from '../../mixins/componentName';
 
 export default {
-	name: 'AppImage',
+	name: 'Image',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/input/input.vue

@@ -38,7 +38,7 @@ import { isFormReadonly } from '../form/mixin';
 import IconCpn from '../icon/icon.vue';
 
 export default {
-	name: 'AppInput',
+	name: 'Input',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/input/password-input.vue

@@ -25,7 +25,7 @@ import componentName from '../../mixins/componentName';
 import IconCpn from '../icon/icon.vue';
 
 export default {
-	name: 'AppPasswordInput',
+	name: 'PasswordInput',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/list-page/list-page.vue

@@ -36,7 +36,7 @@ import EmptyCpn from '../empty/empty.vue';
 import PageCpn from '../page/page.vue';
 
 export default {
-	name: 'AppListPage',
+	name: 'ListPage',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/load-more/load-more.vue

@@ -16,7 +16,7 @@ import componentName from '../../mixins/componentName';
 import IconCpn from '../icon/icon.vue';
 
 export default {
-	name: 'AppLoadMore',
+	name: 'LoadMore',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/loading/animations/loading-animation1.vue

@@ -9,7 +9,7 @@
 import componentName from '../../../mixins/componentName';
 
 export default {
-	name: 'AppLoadingAnimation1',
+	name: 'LoadingAnimation1',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/loading/animations/loading-animation2.vue

@@ -9,7 +9,7 @@ import componentName from '../../../mixins/componentName';
 import IconCpn from '../../icon/icon.vue';
 
 export default {
-	name: 'AppLoadingAnimation2',
+	name: 'LoadingAnimation2',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/loading/animations/loading-animation3.vue

@@ -8,7 +8,7 @@
 import componentName from '../../../mixins/componentName';
 
 export default {
-	name: 'AppLoadingAnimation3',
+	name: 'LoadingAnimation3',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/loading/animations/loading-animation4.vue

@@ -8,7 +8,7 @@
 import componentName from '../../../mixins/componentName';
 
 export default {
-	name: 'AppLoadingAnimation4',
+	name: 'LoadingAnimation4',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/loading/loading.vue

@@ -17,7 +17,7 @@ import componentName from '../../mixins/componentName';
 import LoadingAnimation3 from './animations/loading-animation3.vue';
 
 export default {
-	name: 'AppLoading',
+	name: 'Loading',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/message-box/message-box.vue

@@ -19,7 +19,7 @@ import componentName from '../../mixins/componentName';
 import DialogCpn from '../dialog/dialog.vue';
 
 export default {
-	name: 'AppMessageBox',
+	name: 'MessageBox',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/number-dialog/number-dialog.vue

@@ -78,7 +78,7 @@ const MIN = 0;
 const MAX = 9999;
 
 export default {
-	name: 'AppNumberDialog',
+	name: 'NumberDialog',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/number-input/number-input.vue

@@ -64,7 +64,7 @@ const MAX = 9999999999;
 const numberReg = /^(-?)(\d*)()(-?)$/;
 
 export default {
-	name: 'AppNumberInput',
+	name: 'NumberInput',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/numpad/numpad.vue

@@ -42,7 +42,7 @@ const buttons = freezeDeep([
 ]);
 
 export default {
-	name: 'AppNumpad',
+	name: 'Numpad',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/page/page-body.vue

@@ -54,7 +54,7 @@ import windowInfoMixin from '../../mixins/windowInfo';
 const SCROLL_ANIMATION_DURATION = 300;
 
 export default {
-	name: 'AppPageBody',
+	name: 'PageBody',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',
@@ -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-footer.vue

@@ -15,7 +15,7 @@ import componentName from '../../mixins/componentName';
 import windowInfoMixin from '../../mixins/windowInfo';
 
 export default {
-	name: 'AppPageFooter',
+	name: 'PageFooter',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',