@ecolovo/uniapp-components 1.0.6 → 1.0.8

package/README.md

@@ -0,0 +1,124 @@
+# @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 (
+  $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...
+};
+```
+
+## Components
+
+### Aspect
+
+#### 属性
+
+- ratio: `string | number` 纵横比，默认为 `1` ，即宽高相等

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

package/components/checkbox/checkbox.vue

@@ -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',

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

@@ -51,7 +51,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

@@ -31,7 +31,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',

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',

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',

package/components/page/page-header.vue

@@ -59,7 +59,7 @@ import windowInfoMixin from '../../mixins/windowInfo';
 import IconCpn from '../icon/icon.vue';
 
 export default {
-	name: 'AppPageHeader',
+	name: 'PageHeader',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/page/page.vue

@@ -37,7 +37,7 @@ import PageFooterCpn from './page-footer.vue';
 import PageHeaderCpn from './page-header.vue';
 
 export default {
-	name: 'AppPage',
+	name: 'Page',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/picker/picker-popup.vue

@@ -74,7 +74,7 @@ import PopupContentCpn from '../popup/popup-content.vue';
 import SearchCpn from '../search/search.vue';
 
 export default {
-	name: 'AppPickerPopup',
+	name: 'PickerPopup',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/picker/picker.vue

@@ -32,7 +32,7 @@ import SelectorCpn from '../selector/selector.vue';
 import PickerPopupCpn from './picker-popup.vue';
 
 export default {
-	name: 'AppPicker',
+	name: 'Picker',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/popover/popover-content.vue

@@ -41,7 +41,7 @@ import windowInfoMixin from '../../mixins/windowInfo';
 import IconCpn from '../icon/icon.vue';
 
 export default {
-	name: 'AppPopoverContent',
+	name: 'PopoverContent',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/popover/popover-mask.vue

@@ -20,7 +20,7 @@
 import componentName from '../../mixins/componentName';
 
 export default {
-	name: 'AppPopoverMask',
+	name: 'PopoverMask',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/popover/popover.vue

@@ -36,7 +36,7 @@ import popoverContentCpn from './popover-content.vue';
 import popoverMaskCpn from './popover-mask.vue';
 
 export default {
-	name: 'AppPopover',
+	name: 'Popover',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/popup/popup-content.vue

@@ -51,7 +51,7 @@ import IconCpn from '../icon/icon.vue';
 import PopoverContentCpn from '../popover/popover-content.vue';
 
 export default {
-	name: 'AppPopupContent',
+	name: 'PopupContent',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/popup/popup.vue

@@ -33,7 +33,7 @@ import PopoverMaskCpn from '../popover/popover-mask.vue';
 import PopupContentCpn from './popup-content.vue';
 
 export default {
-	name: 'AppPopup',
+	name: 'Popup',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/price/price.vue

@@ -25,7 +25,7 @@ import componentName from '../../mixins/componentName';
 import { formatPrice } from '../../utils/price';
 
 export default {
-	name: 'AppPrice',
+	name: 'Price',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/search/search.vue

@@ -49,7 +49,7 @@ import ButtonCpn from '../button/button.vue';
 import IconCpn from '../icon/icon.vue';
 
 export default {
-	name: 'AppSearch',
+	name: 'Search',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/searching/searching.vue

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

package/components/selector/selector.vue

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

package/components/switch/switch.vue

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

package/components/tab/tab.vue

@@ -24,7 +24,7 @@
 import componentName from '../../mixins/componentName';
 
 export default {
-	name: 'AppTab',
+	name: 'Tab',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/table/table.vue

@@ -27,7 +27,7 @@ import componentName from '../../mixins/componentName';
 import { floor2 } from '../../utils/floor';
 
 export default {
-	name: 'AppTable',
+	name: 'Table',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/textarea/textarea.vue

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

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

@@ -27,7 +27,7 @@ import { formatDate } from '../../utils/date';
 const hourOptions = range(0, 24).map((item) => ('' + item).padStart(2, '0'));
 
 export default {
-	name: 'AppTimePickerView',
+	name: 'TimePickerView',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

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

@@ -37,7 +37,7 @@ import SelectorCpn from '../selector/selector.vue';
 import TimePickerViewCpn from './time-picker-view.vue';
 
 export default {
-	name: 'AppTimePicker',
+	name: 'TimePicker',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/uploader/file-uploader.vue

@@ -17,7 +17,7 @@ import ButtonCpn from '../button/button.vue';
 import UploadMixin from './mixin';
 
 export default {
-	name: 'AppUploader',
+	name: 'Uploader',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/uploader/media-uploader.vue

@@ -66,7 +66,7 @@ import LoadingCpn from '../loading/animations/loading-animation4.vue';
 import UploadMixin from './mixin';
 
 export default {
-	name: 'AppUploader',
+	name: 'Uploader',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/uploader/upload-button.vue

@@ -9,7 +9,7 @@ import componentName from '../../mixins/componentName';
 import ButtonCpn from '../button/button.vue';
 
 export default {
-	name: 'AppUploadButton',
+	name: 'UploadButton',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/components/uploader/uploader.vue

@@ -40,7 +40,7 @@ import ButtonCpn from '../button/button.vue';
 import ImageCpn from '../image/image.vue';
 
 export default {
-	name: 'AppUploader',
+	name: 'Uploader',
 	options: {
 		virtualHost: true,
 		styleIsolation: 'shared',

package/configs/index.js

@@ -12,6 +12,7 @@ const iconMap = new Map();
 /** 添加单个图标 */
 function addIconToMap(fontFamily, prefix, name) {
 	if (iconMap.has(name)) {
+		// eslint-disable-next-line no-console
 		console.error(
 			`图标库 "${fontFamily}" 中的图标 "${name}" 在图标库 "${
 				iconMap.get(name).fontFamily

package/mixins/componentName.js

@@ -17,7 +17,7 @@ export default {
 		},
 		/** 添加前缀后的组件名-大驼峰模式 */
 		componentClass() {
-			return this.componentPrefix + this.$options.name.replace(/^App/, '');
+			return this.componentPrefix + this.$options.name;
 		},
 		/** 添加前缀后的组件名-短横线模式 */
 		componentKebabClass() {
@@ -25,7 +25,7 @@ export default {
 		},
 		/** 合并后的组件类名 */
 		componentClassNames() {
-			const baseClass = this.$style?.[this.$options.name.replace(/^App/, '')];
+			const baseClass = this.$style?.[this.$options.name];
 			return [...(baseClass ? [baseClass] : []), this.componentClass, this.componentKebabClass];
 		},
 	},

package/package.json

@@ -1,7 +1,10 @@
 {
 	"name": "@ecolovo/uniapp-components",
-	"version": "1.0.6",
+	"version": "1.0.8",
 	"description": "Ecolovo UniApp 组件库",
+	"scripts": {
+		"lint": "eslint . --fix"
+	},
 	"keywords": [
 		"uniapp",
 		"components"
@@ -11,5 +14,15 @@
 	"dependencies": {
 		"case-anything": "3.1.2",
 		"lodash-es": "4.17.21"
+	},
+	"devDependencies": {
+		"@eslint/js": "^10.0.1",
+		"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",
+		"prettier": "^2.8.8",
+		"vue-eslint-parser": "^10.4.0"
 	}
 }

package/styles/global.scss

@@ -3,7 +3,7 @@
 @use './utils' as *;
 
 page {
-	@each $name, $value in $component-themes {
+	@each $name, $value in $themes {
 		@for $i from 9 through 1 {
 			#{DO_NOT_USE__global-var-name(theme, $name + '-dark' + $i)}: #{color.scale($value, $blackness: $i * 10%)};
 		}
@@ -12,13 +12,13 @@ page {
 			#{DO_NOT_USE__global-var-name(theme, $name + '-light' + $i)}: #{color.scale($value, $whiteness: $i * 10%)};
 		}
 	}
-	@each $name, $value in $component-colors {
+	@each $name, $value in $colors {
 		#{DO_NOT_USE__global-var-name(color, $name)}: #{$value};
 	}
-	@each $name, $value in $component-font-sizes {
+	@each $name, $value in $font-sizes {
 		#{DO_NOT_USE__global-var-name(font-size, $name)}: #{$value};
 	}
-	@each $name, $value in $component-vars {
+	@each $name, $value in $others {
 		#{DO_NOT_USE__global-var-name(other, $name)}: #{$value};
 	}
 }

package/styles/utils/z-index.scss

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

package/styles/var/theme.scss

@@ -2,39 +2,49 @@
 
 $component-prefix: 'app' !default;
 
-$component-z-index-maps: (
+$z-index-maps: () !default;
+$z-index-maps-default: (
 	loading: 9999,
 	dialog: 4000,
 	dropdown: 3000,
 	popover: 3000,
 	page-header: 2000,
 	page-footer: 2000,
-) !default;
+);
+$z-index-maps: map.merge($z-index-maps-default, $z-index-maps);
 
-$component-themes: (
+$themes: () !default;
+$themes-default: (
 	primary: #f26f24,
 	secondary: #1e87e9,
 	success: #6fe633,
 	warning: #f3bb2d,
 	danger: #ff0000,
 	info: #9a9a99,
-) !default;
+);
+$themes: map.merge($themes-default, $themes);
 
-$component-colors: (
+$colors: () !default;
+$colors-default: (
 	foreground: #333,
 	background: #f4f5f6,
 	placeholder: #9a9a99,
 	disabled: c3c4c5,
-) !default;
+);
+$colors: map.merge($colors-default, $colors);
 
-$component-font-sizes: (
+$font-sizes: () !default;
+$font-sizes-default: (
 	small: 24rpx,
 	normal: 28rpx,
 	large: 32rpx,
-) !default;
+);
+$font-sizes: map.merge($font-sizes-default, $font-sizes);
 
-$component-vars: (
+$others: () !default;
+$others-default: (
 	font-size-small: 24rpx,
 	font-size-normal: 28rpx,
 	font-size-large: 32rpx,
-) !default;
+);
+$others: map.merge($others-default, $others);