feat(loading): [loading] added type definition and interface of Loading component to optimize loading style processing (#3253)

Author: zzcr

packages/modules.json

@@ -2237,6 +2237,7 @@
     "type": "component",
     "exclude": false,
     "mode": [
+      "mobile-first",
       "pc"
     ]
   },
@@ -2245,14 +2246,25 @@
     "type": "component",
     "exclude": false,
     "mode": [
+      "mobile-first",
       "pc"
     ]
   },
+  "SkeletonItemMobileFirst": {
+    "path": "vue/src/skeleton-item/src/mobile-first.vue",
+    "type": "template",
+    "exclude": false
+  },
   "SkeletonItemPc": {
     "path": "vue/src/skeleton-item/src/pc.vue",
     "type": "template",
     "exclude": false
   },
+  "SkeletonMobileFirst": {
+    "path": "vue/src/skeleton/src/mobile-first.vue",
+    "type": "template",
+    "exclude": false
+  },
   "SkeletonPc": {
     "path": "vue/src/skeleton/src/pc.vue",
     "type": "template",

packages/vue-common/src/adapter/index.ts

@@ -8,7 +8,8 @@ export type {
   DefineComponent,
   ComponentPublicInstance,
   SetupContext,
-  ComputedRef
+  ComputedRef,
+  App
 } from 'virtual:common/adapter/vue'
 
 export default vue

packages/vue-common/src/adapter/vue2/index.ts

@@ -353,7 +353,8 @@ export type {
   ExtractPropTypes,
   ComponentPublicInstance,
   SetupContext,
-  ComputedRef
+  ComputedRef,
+  App
 } from '@vue/composition-api'
 
 export type DefineComponent = typeof defineComponent

packages/vue-common/src/adapter/vue3/index.ts

@@ -493,5 +493,6 @@ export type {
   DefineComponent,
   ComponentPublicInstance,
   SetupContext,
-  ComputedRef
+  ComputedRef,
+  App
 } from 'vue'

packages/vue-common/src/index.ts

@@ -377,7 +377,8 @@ export type {
   DefineComponent,
   ComponentPublicInstance,
   SetupContext,
-  ComputedRef
+  ComputedRef,
+  App
 } from './adapter'
 
 export {

packages/vue/src/loading/index.ts

@@ -13,9 +13,59 @@ import service from './src/service'
 import directive from './src/directive'
 import { setupComponent } from '@opentiny/vue-common'
 import { version } from './package.json'
+import type { App } from '@opentiny/vue-common'
+import type { ILoadingState } from '@opentiny/vue-renderless/types/loading.type'
 
-const Loadings: any = {
-  install(app) {
+// 定义LoadingConfig接口
+interface LoadingConfig {
+  text?: string | null
+  body?: boolean
+  lock?: boolean
+  customClass?: string
+  fullscreen?: boolean
+  iconSize?: string
+  target?: HTMLElement | string
+  size?: string
+  loadingImg?: string
+  tiny_mode?: string
+}
+
+// 定义LoadingInstance接口
+interface LoadingInstance {
+  state: ILoadingState
+  $el: HTMLElement
+  originalPosition?: string
+  originalOverflow?: string
+}
+
+// 定义Loading服务的类型
+type LoadingService = (config?: LoadingConfig) => LoadingInstance
+
+// 定义LoadingPlugin接口
+interface LoadingPlugin {
+  install: (app: App) => void
+  service: LoadingService
+  directive: any
+  version: string
+}
+
+// 定义Root接口
+interface Root {
+  $apiPrefix?: string
+  [key: string]: any
+}
+
+// 向setupComponent添加TINYLoading属性
+// @ts-expect-error setupComponent上没有TINYLoading属性，但是在运行时会添加这个属性
+setupComponent.TINYLoading = {
+  init(root: Root) {
+    let prefix = root.$apiPrefix || '$'
+    root[`${prefix}loading`] = service
+  }
+}
+
+const Loadings: LoadingPlugin = {
+  install(app: App) {
     app.directive('loading', directive)
   },
   service,
@@ -26,15 +76,9 @@ const Loadings: any = {
 /* istanbul ignore next */
 if (process.env.BUILD_TARGET === 'runtime') {
   if (typeof window !== 'undefined' && window.Vue) {
+    // @ts-expect-error window.Vue可能是Vue2或Vue3实例，类型兼容性在运行时处理
     Loadings.install(window.Vue)
   }
 }
 
-setupComponent.TINYLoading = {
-  init(root) {
-    let prefix = root.$apiPrefix || '$'
-    root[`${prefix}loading`] = service
-  }
-}
-
 export default Loadings

packages/vue/src/loading/src/service.ts

@@ -14,8 +14,29 @@ import { PopupManager } from '@opentiny/utils'
 import { getStyle, addClass } from '@opentiny/utils'
 import { createComponent, hooks, appProperties } from '@opentiny/vue-common'
 import Loading from './index'
+import type { ILoadingState } from '@opentiny/vue-renderless/types/loading.type'
+
+interface LoadingConfig {
+  text?: string | null
+  body?: boolean
+  lock?: boolean
+  customClass?: string
+  fullscreen?: boolean
+  iconSize?: string
+  target?: HTMLElement | string
+  size?: string
+  loadingImg?: string
+  tiny_mode?: string
+}
+
+interface LoadingInstance {
+  state: ILoadingState
+  $el: HTMLElement
+  originalPosition?: string
+  originalOverflow?: string
+}
 
-export const defaults = {
+export const defaults: LoadingConfig = {
   text: null,
   body: false,
   lock: false,
@@ -24,7 +45,7 @@ export const defaults = {
   iconSize: ''
 }
 
-let fullscreenLoading = null
+let fullscreenLoading: LoadingInstance | null = null
 
 export const constants = {
   TEXT_ATTR: 'tiny-loading__text',
@@ -36,45 +57,48 @@ export const constants = {
   PARENT_RELATIVE_CLS: 'tiny-loading__parent-relative',
   LOAD_ICON_TEXT: 'ui.load.dot'
 }
-const addStyle = (options, parent, instance) => {
-  let maskStyle = {}
+
+const addStyle = (options: LoadingConfig, parent: HTMLElement, instance: LoadingInstance) => {
+  let maskStyle: Record<string, string> = {}
 
   if (options.fullscreen) {
-    instance.originalPosition = getStyle(document.body, 'position')
-    instance.originalOverflow = getStyle(document.body, 'overflow')
-    maskStyle.zIndex = PopupManager.nextZIndex()
+    instance.originalPosition = getStyle(document.body, 'position') || ''
+    instance.originalOverflow = getStyle(document.body, 'overflow') || ''
+    maskStyle.zIndex = PopupManager.nextZIndex().toString()
   } else if (options.body) {
-    const clientRect = options.target.getBoundingClientRect()
+    const target = options.target as HTMLElement
+    const clientRect = target?.getBoundingClientRect()
 
-    instance.originalPosition = getStyle(document.body, 'position')
+    instance.originalPosition = getStyle(document.body, 'position') || ''
 
     const direction = ['top', 'left']
 
     direction.forEach((property) => {
       let scroll = property === 'top' ? 'scrollTop' : 'scrollLeft'
 
-      maskStyle[property] = clientRect[property] + document.body[scroll] + document.documentElement[scroll] + 'px'
+      maskStyle[property] =
+        (clientRect?.[property] || 0) + document.body[scroll] + document.documentElement[scroll] + 'px'
     })
 
     const size = ['height', 'width']
 
     size.forEach((property) => {
-      maskStyle[property] = clientRect[property] + 'px'
+      maskStyle[property] = (clientRect?.[property] || 0) + 'px'
     })
   } else {
-    instance.originalPosition = getStyle(parent, 'position')
+    instance.originalPosition = getStyle(parent, 'position') || ''
   }
 
   Object.keys(maskStyle).forEach((property) => {
     instance.$el.style[property] = maskStyle[property]
   })
 }
 
-export default (configs = {}) => {
+export default (configs: LoadingConfig = {}) => {
   configs = { ...defaults, ...configs }
 
   if (typeof configs.target === 'string') {
-    configs.target = document.querySelector(configs.target)
+    configs.target = document.querySelector(configs.target) as HTMLElement
   }
 
   configs.target = configs.target || document.body
@@ -104,7 +128,7 @@ export default (configs = {}) => {
       tiny_mode: configs.tiny_mode || appProperties().tiny_mode?.value
     },
     el: document.createElement('div')
-  })
+  }) as LoadingInstance
 
   for (const key in configs) {
     if (Object.prototype.hasOwnProperty.call(configs, key)) {