重构组件

x-extends · May 21, 2024 · 27407b2 · 27407b2
1 parent 5366e8d
commit 27407b2
Show file tree

Hide file tree

Showing 34 changed files with 279 additions and 164 deletions.
diff --git a/README.en.md b/README.en.md
@@ -7,12 +7,12 @@ Vxe UI core library.
 ## Install
 
 ```shell
-npm install @vxe-ui/vxe-core
+npm install @vxe-ui/core
 ```
 
 ```javascript
 // ...
-import VxeCore from '@vxe-ui/vxe-core'
+import VxeCore from '@vxe-ui/core'
 // ...
 
 VxeCore.setConfig({

diff --git a/README.md b/README.md
@@ -7,12 +7,12 @@ Vxe UI 核心库.
 ## 安装
 
 ```shell
-npm install @vxe-ui/vxe-core
+npm install @vxe-ui/core
 ```
 
 ```javascript
 // ...
-import VxeCore from '@vxe-ui/vxe-core'
+import VxeCore from '@vxe-ui/core'
 // ...
 
 VxeCore.setConfig({

diff --git a/README.zh-TW.md b/README.zh-TW.md
@@ -7,12 +7,12 @@ Vxe UI core library.
 ## Use
 
 ```shell
-npm install @vxe-ui/vxe-core
+npm install @vxe-ui/core
 ```
 
 ```javascript
 // ...
-import VxeCore from '@vxe-ui/vxe-core'
+import VxeCore from '@vxe-ui/core'
 // ...
 
 VxeCore.setConfig({

diff --git a/gulpfile.js b/gulpfile.js
@@ -39,8 +39,8 @@ gulp.task('build_escode', function () {
     'packages_temp/**/*.ts',
     '!packages_temp/index.ts'
   ])
-    .pipe(replace('process.env.VUE_APP_VXE_TABLE_VERSION', `"${pack.version}"`))
-    .pipe(replace('process.env.VUE_APP_VXE_TABLE_ENV', 'process.env.NODE_ENV'))
+    .pipe(replace('process.env.VUE_APP_VXE_VERSION', `"${pack.version}"`))
+    .pipe(replace('process.env.VUE_APP_VXE_ENV', 'process.env.NODE_ENV'))
     .pipe(ts(tsSettings))
     .pipe(gulp.dest(esmOutDir))
 })
@@ -49,8 +49,8 @@ gulp.task('build_esjs', gulp.series('build_escode', function () {
   return gulp.src([
     'packages_temp/index.ts'
   ])
-    .pipe(replace('process.env.VUE_APP_VXE_TABLE_VERSION', `"${pack.version}"`))
-    .pipe(replace('process.env.VUE_APP_VXE_TABLE_ENV', 'process.env.NODE_ENV'))
+    .pipe(replace('process.env.VUE_APP_VXE_VERSION', `"${pack.version}"`))
+    .pipe(replace('process.env.VUE_APP_VXE_ENV', 'process.env.NODE_ENV'))
     .pipe(ts(tsSettings))
     .pipe(rename({
       basename: 'index',
@@ -67,8 +67,8 @@ gulp.task('build_commoncode', function () {
     'packages_temp/**/*.ts',
     '!packages_temp/index.ts'
   ])
-    .pipe(replace('process.env.VUE_APP_VXE_TABLE_VERSION', `"${pack.version}"`))
-    .pipe(replace('process.env.VUE_APP_VXE_TABLE_ENV', 'process.env.NODE_ENV'))
+    .pipe(replace('process.env.VUE_APP_VXE_VERSION', `"${pack.version}"`))
+    .pipe(replace('process.env.VUE_APP_VXE_ENV', 'process.env.NODE_ENV'))
     .pipe(ts(tsSettings))
     .pipe(babel({
       presets: ['@babel/env']
@@ -86,8 +86,8 @@ gulp.task('build_commonjs', gulp.series('build_commoncode', function () {
   return gulp.src([
     'packages_temp/index.ts'
   ])
-    .pipe(replace('process.env.VUE_APP_VXE_TABLE_VERSION', `"${pack.version}"`))
-    .pipe(replace('process.env.VUE_APP_VXE_TABLE_ENV', 'process.env.NODE_ENV'))
+    .pipe(replace('process.env.VUE_APP_VXE_VERSION', `"${pack.version}"`))
+    .pipe(replace('process.env.VUE_APP_VXE_ENV', 'process.env.NODE_ENV'))
     .pipe(ts(tsSettings))
     .pipe(babel({
       presets: ['@babel/env']

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@vxe-ui/vxe-core",
-  "version": "0.0.1",
+  "name": "@vxe-ui/core",
+  "version": "0.1.0",
   "description": "Vxe UI core library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -53,7 +53,7 @@
     "gulp-uglify": "^3.0.2",
     "postcss": "^8.4.38",
     "typescript": "~4.5.5",
-    "vue": "3.3.13"
+    "vue": "3.4.27"
   },
   "repository": {
     "type": "git",

diff --git a/packages/index.ts b/packages/index.ts
@@ -1,11 +1,9 @@
-import VxeCore, { setConfig } from './src/core'
-import XEUtils from 'xe-utils'
+import VxeUI, { setI18n, setTheme } from './src/core'
 import zhCN from './language/zh-CN'
 
 // 默认中文
-setConfig({
-  i18n: (key: string, args: any) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
-})
+setI18n('zh-CN', zhCN)
+setTheme('default')
 
 export * from './src/core'
-export default VxeCore
+export default VxeUI
diff --git a/packages/src/commands.ts b/packages/src/commands.ts
@@ -1,5 +1,5 @@
 import XEUtils from 'xe-utils'
-import { warnLog } from './log'
+import { log } from './log'
 
 import { VxeGlobalCommands } from '../../types'
 
@@ -25,20 +25,20 @@ class VXECommandsStore {
     const conf = this.store[name]
     // 兼容
     if (XEUtils.isFunction(render)) {
-      if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
-        warnLog('vxe.error.delProp', ['commands -> callback', 'commandMethod'])
+      if (process.env.VUE_APP_VXE_ENV === 'development') {
+        log.warn('vxe.error.delProp', ['commands -> callback', 'commandMethod'])
       }
       render = {
         commandMethod: render
       }
     }
 
     // 检测是否覆盖
-    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+    if (process.env.VUE_APP_VXE_ENV === 'development') {
       const confKeys = XEUtils.keys(conf)
       XEUtils.each(render, (item, key) => {
         if (confKeys.includes(key)) {
-          warnLog('vxe.error.coverProp', [name, key])
+          log.warn('vxe.error.coverProp', [name, key])
         }
       })
     }
@@ -57,6 +57,6 @@ class VXECommandsStore {
 
 export const commands = new VXECommandsStore() as VxeGlobalCommands
 
-if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+if (process.env.VUE_APP_VXE_ENV === 'development') {
   Object.assign(commands, { _name: 'Commands' })
 }
diff --git a/packages/src/core.ts b/packages/src/core.ts
@@ -1,8 +1,11 @@
 import XEUtils from 'xe-utils'
 import DomZIndex from 'dom-zindex'
-import globalConfigStore from './globalStore'
-import iconConfigStore from './iconStore'
-import setTheme from './theme'
+import { globalConfigStore } from './globalStore'
+import { iconConfigStore } from './iconStore'
+import { themeConfigStore } from './themeStore'
+import { i18nConfigStore } from './i18nStore'
+import { globalEvents } from './event'
+import { globalResize } from './resize'
 import { getI18n } from './i18n'
 import { renderer } from './renderer'
 import { validators } from './validators'
@@ -11,73 +14,113 @@ import { formats } from './formats'
 import { commands } from './commands'
 import { interceptor } from './interceptor'
 import { clipboard } from './clipboard'
+import { log } from './log'
 import { hooks } from './hooks'
 
-import { VxeCoreExport, VxeGlobalConfig } from '../../types'
+import { VxeUIExport, VxeGlobalConfig, VxeGlobalThemeName, VxeGlobalIcon, VxeGlobalI18nLocale } from '../../types'
+
+export function setTheme (name?: VxeGlobalThemeName) {
+  const theme = name || 'default'
+  themeConfigStore.theme = theme
+  if (typeof document !== 'undefined') {
+    const documentElement = document.documentElement
+    if (documentElement) {
+      documentElement.setAttribute('data-vxe-theme', theme)
+    }
+  }
+  return VxeUI
+}
+
+export function getTheme () {
+  return themeConfigStore.theme
+}
+
+export function setLanguage (locale: VxeGlobalI18nLocale) {
+  i18nConfigStore.language = locale
+  return VxeUI
+}
+
+export function setI18n (locale: VxeGlobalI18nLocale, data: Record<string, any>) {
+  i18nConfigStore.language = locale
+  i18nConfigStore.langMaps[i18nConfigStore.language] = data || {}
+  return VxeUI
+}
 
 /**
 * 全局参数设置
 */
 export function setConfig (options?: VxeGlobalConfig) {
   if (options) {
-    if (options.theme) {
-      setTheme(options)
-    }
     if (options.zIndex) {
       DomZIndex.setCurrent(options.zIndex)
     }
     XEUtils.merge(globalConfigStore, options)
   }
-  return VxeCore
+  return VxeUI
 }
 
 /**
 * 获取全局参数
 */
-export function getConfig (key: string | number | null | undefined, defaultValue?: any) {
+export function getConfig (key: keyof VxeGlobalConfig, defaultValue?: any) {
   return arguments.length ? XEUtils.get(globalConfigStore, key, defaultValue) : globalConfigStore
 }
 
-export function setIcon (options?: any) {
+export function setIcon (options?: VxeGlobalIcon) {
   if (options) {
     Object.assign(iconConfigStore, options)
   }
-  return VxeCore
+  return VxeUI
 }
 
-export function getIcon (key: string) {
+export function getIcon (key: keyof VxeGlobalIcon) {
   return arguments.length ? XEUtils.get(iconConfigStore, key) : iconConfigStore
 }
 
-export const version = process.env.VUE_APP_VXE_TABLE_VERSION as string
+export const coreVersion = process.env.VUE_APP_VXE_VERSION as string
+
+export const VxeUI: VxeUIExport = {
+  coreVersion,
 
-const VxeCore: VxeCoreExport = {
-  version,
+  setTheme,
+  getTheme,
   setConfig,
-  getConfig,
+  getConfig: getConfig as any,
   setIcon,
-  getIcon,
+  getIcon: getIcon as any,
+  setLanguage,
+  setI18n,
   getI18n,
+
+  globalEvents,
+  globalResize,
   renderer,
   validators,
   menus,
   formats,
   commands,
   interceptor,
   clipboard,
+  log,
 
   hooks
 }
 
 setTheme()
 
+export * from './event'
+export * from './resize'
+
 export * from './i18n'
 export * from './renderer'
 export * from './validators'
 export * from './menus'
 export * from './formats'
 export * from './commands'
 export * from './interceptor'
+export * from './clipboard'
+
+export * from './log'
 export * from './hooks'
 
-export default VxeCore
+export default VxeUI
diff --git a/packages/src/event.ts b/packages/src/event.ts
@@ -1,8 +1,8 @@
 import XEUtils from 'xe-utils'
 
-import { VxeComponentBase } from '../../types'
+import { VxeGlobalEvents, VxeComponentBase } from '../../types'
 
-export const EVENT_KEYS = {
+export const GLOBAL_EVENT_KEYS = {
   F2: 'F2',
   ESCAPE: 'Escape',
   ENTER: 'Enter',
@@ -23,12 +23,12 @@ const browse = XEUtils.browse()
 
 const convertEventKeys: { [key: string]: string } = {
   ' ': 'Spacebar',
-  Apps: EVENT_KEYS.CONTEXT_MENU,
-  Del: EVENT_KEYS.DELETE,
-  Up: EVENT_KEYS.ARROW_UP,
-  Down: EVENT_KEYS.ARROW_DOWN,
-  Left: EVENT_KEYS.ARROW_LEFT,
-  Right: EVENT_KEYS.ARROW_RIGHT
+  Apps: GLOBAL_EVENT_KEYS.CONTEXT_MENU,
+  Del: GLOBAL_EVENT_KEYS.DELETE,
+  Up: GLOBAL_EVENT_KEYS.ARROW_UP,
+  Down: GLOBAL_EVENT_KEYS.ARROW_DOWN,
+  Left: GLOBAL_EVENT_KEYS.ARROW_LEFT,
+  Right: GLOBAL_EVENT_KEYS.ARROW_RIGHT
 }
 
 // 监听全局事件
@@ -39,12 +39,6 @@ const eventStore: {
   cb: (evnt: Event) => void;
 }[] = []
 
-export const hasEventKey = (evnt: KeyboardEvent, targetKey: string) => {
-  const { key } = evnt
-  targetKey = targetKey.toLowerCase()
-  return key ? (targetKey === key.toLowerCase() || !!(convertEventKeys[key] && convertEventKeys[key].toLowerCase() === targetKey)) : false
-}
-
 function triggerEvent (evnt: Event) {
   const isWheel = evnt.type === wheelName
   eventStore.forEach(({ type, cb }) => {
@@ -57,20 +51,17 @@ function triggerEvent (evnt: Event) {
   })
 }
 
-export const GlobalEvent = {
-  on (comp: VxeComponentBase, type: string, cb: (evnt: any) => void) {
+export const globalEvents: VxeGlobalEvents = {
+  on (comp, type, cb) {
     eventStore.push({ comp, type, cb })
   },
-  off (comp: VxeComponentBase, type: string) {
+  off (comp, type) {
     XEUtils.remove(eventStore, item => item.comp === comp && item.type === type)
   },
-  trigger: triggerEvent,
-  eqKeypad (evnt: KeyboardEvent, keyVal: string) {
+  hasKey (evnt, targetKey) {
     const { key } = evnt
-    if (keyVal.toLowerCase() === key.toLowerCase()) {
-      return true
-    }
-    return false
+    targetKey = targetKey.toLowerCase()
+    return key ? (targetKey === key.toLowerCase() || !!(convertEventKeys[key] && convertEventKeys[key].toLowerCase() === targetKey)) : false
   }
 }