refactor(utils/css/format-length)

src/_base/select-menu/src/SelectMenu.vue

@@ -82,7 +82,7 @@ import NScrollbar from '../../../scrollbar'
 import NSelectOption from './SelectOption.js'
 import NSelectGroupHeader from './SelectGroupHeader.js'
 import NEmpty from '../../../empty'
-import { depx, formatLength } from '../../../_utils/css'
+import { depx, formatLength } from '../../../_utils'
 import { createKey } from '../../../_utils/cssr'
 import { usecssr } from '../../../_mixins'
 import styles from './styles'

src/_base/selection/src/styles/themed-size.js

@@ -1,5 +1,5 @@
 import { cTB, c, cB, cE, cM } from '../../../../_utils/cssr'
-import formatLength from '../../../../_utils/css/formatLength'
+import { formatLength } from '../../../../_utils'
 
 export default c([
   ({ props }) => {
@@ -24,8 +24,8 @@ export default c([
           minHeight: height
         }, [
           cB('base-selection-input-tag', {
-            height: formatLength(height, 1, -6),
-            lineHeight: formatLength(height, 1, -6)
+            height: formatLength(height, { c: 1, offset: -6 }),
+            lineHeight: formatLength(height, { c: 1, offset: -6 })
           })
         ])
       ])

src/_utils/composable/index.js

@@ -14,16 +14,6 @@ export function useInjectionRef (injectionName, key, fallback) {
   return toRef(injection, key)
 }
 
-export function onFontReady (callback) {
-  onMounted(() => {
-    const fontsReady = document.fonts.ready
-    const currentInstance = getCurrentInstance().proxy
-    fontsReady.then(() => {
-      callback(currentInstance)
-    })
-  })
-}
-
 export function useInjectionCollection (injectionName, collectionKey, valueRef) {
   const injection = inject(injectionName, null)
   if (injection === null) return

src/_utils/css/format-length.js

@@ -0,0 +1,30 @@
+const pureNumberRegex = /^(\d|\.)+$/
+const numberRegex = /(\d|\.)+/
+
+export default function formatLength (length, options = {}) {
+  const {
+    c = 1,
+    offset = 0,
+    attachPx = true
+  } = options
+  const type = typeof length
+  if (type === 'number') {
+    const result = (length + offset) * c
+    if (result === 0) return '0'
+    return `${result}px`
+  } else if (type === 'string') {
+    if (pureNumberRegex.test(length)) {
+      const result = (Number(length) + offset) * c
+      if (attachPx) {
+        if (result === 0) return '0'
+        return `${result}px`
+      } else {
+        return result
+      }
+    } else {
+      const result = numberRegex.exec(length)
+      if (!result) return length
+      return length.replace(numberRegex, '' + (Number(result[0]) + offset) * c)
+    }
+  }
+}

src/_utils/css/formatLength.js

@@ -1,16 +0,0 @@
-const pureNumberRegex = /^(\d|\.)+$/
-const numberRegex = /(\d|\.)+/
-
-export default function formatLength (length, weight = 1, offset = 0) {
-  if (typeof length === 'number') return '' + ((length + offset) && ((length + offset) * weight) + 'px')
-  if (typeof length === 'string') {
-    if (pureNumberRegex.test(length)) {
-      return ((Number(length) + offset) * weight) + 'px'
-    } else {
-      const result = numberRegex.exec(length)
-      if (!result) return length
-      return length.replace(numberRegex, '' + (Number(result[0]) + offset) * weight)
-    }
-  }
-  return length
-}

src/_utils/css/index.js

@@ -1,3 +1,3 @@
 export { default as depx } from './depx'
 export { default as pxfy } from './pxfy'
-export { default as formatLength } from './formatLength'
+export { default as formatLength } from './format-length'

src/_utils/vue/index.js

@@ -1,8 +1,8 @@
-export { getSlot } from './src/get-slot'
-export { getVNodeChildren } from './src/get-v-node-children'
-export { createId } from './src/create-id'
-export { keep } from './src/keep'
-export { omit } from './src/omit'
-export { flatten } from './src/flatten'
-export { call } from './src/call'
-export { render } from './src/render'
+export { getSlot } from './get-slot'
+export { getVNodeChildren } from './get-v-node-children'
+export { createId } from './create-id'
+export { keep } from './keep'
+export { omit } from './omit'
+export { flatten } from './flatten'
+export { call } from './call'
+export { render } from './render'

src/anchor/src/BaseAnchor.vue

@@ -24,14 +24,14 @@
 </template>
 
 <script>
-import { nextTick, ref, markRaw } from 'vue'
+import { nextTick, ref, markRaw, getCurrentInstance } from 'vue'
 import getScrollParent from '../../_utils/dom/get-scroll-parent'
 import {
   configurable,
   themeable,
   usecssr
 } from '../../_mixins'
-import { onFontReady } from '../../_utils/composable/index'
+import { onFontReady } from 'vooks'
 import { warn } from '../../_utils/naive/warn'
 import getTarget from '../../_utils/dom/get-target'
 import styles from './styles'
@@ -86,7 +86,8 @@ export default {
     }
   },
   setup () {
-    onFontReady(vm => {
+    const vm = getCurrentInstance().proxy
+    onFontReady(() => {
       vm.init()
       vm.setActiveHref(window.location)
       vm.handleScroll(false)

src/avatar/src/styles/themed-size.cssr.js

@@ -1,5 +1,5 @@
 import { c, cE, cM, cTB, cB } from '../../../_utils/cssr'
-import { depx, pxfy } from '../../../../_utils/css'
+import { depx, pxfy } from '../../../_utils/css'
 
 export default c([
   ({ props }) => {

src/back-top/src/BackTop.vue

@@ -59,9 +59,8 @@ import {
   themeable,
   usecssr
 } from '../../_mixins'
-import formatLength from '../../_utils/css/formatLength'
+import { formatLength, warn } from '../../_utils'
 import styles from './styles'
-import { warn } from '../../_utils/naive/warn'
 import getTarget from '../../_utils/dom/get-target'
 import NLazyTeleport from '../../_base/lazy-teleport'
 

src/button/src/styles/themed-size.cssr.js

@@ -1,5 +1,5 @@
 import { c, cB, cTB, cE, cM, createKey } from '../../../_utils/cssr'
-import formatLength from '../../../_utils/css/formatLength'
+import { formatLength } from '../../../_utils'
 
 export default c([
   ({ props }) => {
@@ -10,8 +10,8 @@ export default c([
     const borderRadius = local[createKey('borderRadius', size)]
     const padding = local[createKey('padding', size)]
     const roundPadding = local[createKey('paddingRound', size)]
-    const roundBorderRadius = formatLength(height, 0.5)
-    const lineHeight = formatLength(height, 1, -2)
+    const roundBorderRadius = formatLength(height, { c: 0.5 })
+    const lineHeight = formatLength(height, { offset: -2 })
     const iconSize = local[createKey('iconSize', size)]
     const iconMargin = local[createKey('iconMargin', size)]
     return cTB(
@@ -64,8 +64,8 @@ export default c([
               height: iconSize
             }),
             cB('base-loading', {
-              height: formatLength(iconSize, 1, -2),
-              width: formatLength(iconSize, 1, -2)
+              height: formatLength(iconSize, { offset: -2 }),
+              width: formatLength(iconSize, { offset: -2 })
             })
           ]),
           cE('content', [

src/data-table/src/BaseTable.vue

@@ -30,7 +30,7 @@ import { VResizeObserver } from 'vueuc'
 import { ref } from 'vue'
 import TableHeader from './TableParts/Header.vue'
 import TableBody from './TableParts/Body.vue'
-import formatLength from '../../_utils/css/formatLength'
+import { formatLength } from '../../_utils/css'
 
 export default {
   components: {

src/data-table/src/TableParts/Body.vue

@@ -76,7 +76,7 @@ import { ref } from 'vue'
 import Cell from './Cell.vue'
 import { createCustomWidthStyle, setCheckStatusOfRow, createRowKey } from '../utils'
 import NScrollbar from '../../../scrollbar'
-import formatLength from '../../../_utils/css/formatLength'
+import { formatLength } from '../../../_utils'
 
 export default {
   components: {

src/data-table/src/utils.js

@@ -1,4 +1,4 @@
-import formatLength from '../../_utils/css/formatLength'
+import { formatLength } from '../../_utils'
 
 export function createCustomWidthStyle (column, index, placement) {
   if (column.width) {

src/drawer/src/Drawer.vue

@@ -43,8 +43,7 @@ import {
   usecssr
 } from '../../_mixins'
 import { zindexable } from '../../_directives'
-import formatLength from '../../_utils/css/formatLength'
-import { warn } from '../../_utils'
+import { warn, formatLength } from '../../_utils'
 import { useCompitable, useIsMounted } from 'vooks'
 import NLazyTeleport from '../../_base/lazy-teleport'
 import NDrawerBodyWrapper from './DrawerBodyWrapper.vue'

src/form/src/styles/themed-size.cssr.js

@@ -1,5 +1,5 @@
 import { c, cB, cM, createKey } from '../../../_utils/cssr'
-import { depx, pxfy } from '../../../../_utils/css'
+import { depx, pxfy } from '../../../_utils/css'
 
 export default c([
   ({ props }) => {

src/gradient-text/src/GradientText.vue

@@ -16,16 +16,18 @@
 </template>
 
 <script>
-import withapp from '../../_mixins/withapp'
-import themeable from '../../_mixins/themeable'
-import formatLength from '../../_utils/css/formatLength'
-import usecssr from '../../_mixins/usecssr'
+import {
+  configurable,
+  themeable,
+  usecssr
+} from '../../_mixins'
+import { formatLength } from '../../_utils'
 import styles from './styles/index'
 
 export default {
   name: 'GradientText',
   mixins: [
-    withapp,
+    configurable,
     themeable,
     usecssr(styles)
   ],

src/grid/src/Col.vue

@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import formatLength from '../../_utils/css/formatLength'
-import usecssr from '../../_mixins/usecssr'
+import { formatLength } from '../../_utils'
+import { usecssr } from '../../_mixins'
 import styles from './styles/col.js'
 
 export default {
@@ -61,7 +61,7 @@ export default {
       return this.NRow.gutter
     },
     stylePadding () {
-      return `${formatLength(this.NRow.verticalGutter, 0.5)} ${formatLength(this.NRow.horizontalGutter, 0.5)}`
+      return `${formatLength(this.NRow.verticalGutter, { c: 0.5 })} ${formatLength(this.NRow.horizontalGutter, { c: 0.5 })}`
     },
     computedPush () {
       return this.push - this.pull

src/grid/src/Row.vue

@@ -16,8 +16,8 @@
 </template>
 
 <script>
-import formatLength from '../../_utils/css/formatLength'
-import usecssr from '../../_mixins/usecssr'
+import { formatLength } from '../../_utils'
+import { usecssr } from '../../_mixins'
 import styles from './styles/row.js'
 
 export default {
@@ -64,7 +64,7 @@ export default {
       return gutter
     },
     styleMargin () {
-      return `0px -${formatLength(this.horizontalGutter, 0.5)}`
+      return `0px -${formatLength(this.horizontalGutter, { c: 0.5 })}`
     },
     styleWidth () {
       return `calc(100% + ${formatLength(this.horizontalGutter)})`

src/icon/src/Icon.js

@@ -5,7 +5,7 @@ import {
   usecssr
 } from '../../_mixins'
 import styles from './styles/index'
-import formatLength from '../../_utils/css/formatLength'
+import { formatLength } from '../../_utils'
 import { getSlot } from '../../_utils/vue'
 
 export default {

src/popover/src/PopoverBody.js

@@ -7,7 +7,7 @@ import {
 import { clickoutside, mousemoveoutside, zindexable } from '../../_directives'
 import { configurable, themeable, placeable, usecssr } from '../../_mixins'
 import styles from './styles'
-import { formatLength } from '../../_utils/css'
+import { formatLength } from '../../_utils'
 import { getSlot } from '../../_utils/vue'
 
 export default {

src/popover/src/styles/themed-base.cssr.js

@@ -1,5 +1,5 @@
 import { c, cTB, cB, cM } from '../../../_utils/cssr'
-import { depx, pxfy } from '../../../../_utils/css'
+import { depx, pxfy } from '../../../_utils/css'
 
 export default c([
   ({ props }) => {

src/progress/src/Progress.vue

@@ -234,7 +234,7 @@
 </template>
 
 <script>
-import { nextTick } from 'vue'
+import { nextTick, getCurrentInstance } from 'vue'
 import NIcon from '../../icon'
 import {
   CheckmarkIcon as SuccessIcon,
@@ -250,8 +250,8 @@ import {
   usecssr
 } from '../../_mixins'
 import styles from './styles/index.js'
-import formatLength from '../../_utils/css/formatLength.js'
-import { onFontReady } from '../../_utils/composable'
+import { formatLength } from '../../_utils'
+import { onFontReady } from 'vooks'
 
 function circlePath (r, sw, vw = 100) {
   return `m ${vw / 2} ${vw / 2 - r} a ${r} ${r} 0 1 1 0 ${2 * r} a ${r} ${r} 0 1 1 0 -${2 * r}`
@@ -352,7 +352,8 @@ export default {
     }
   },
   setup () {
-    onFontReady(vm => {
+    const vm = getCurrentInstance().proxy
+    onFontReady(() => {
       if (vm.syntheticIndicatorPlacement === 'inside-label') {
         nextTick(() => {
           vm.indicatorPercentage = vm.calcIndicatorPercentage()
@@ -378,7 +379,7 @@ export default {
       if (this.borderRadius !== undefined) {
         return formatLength(this.borderRadius)
       }
-      if (this.height !== undefined) return formatLength(this.height / 2)
+      if (this.height !== undefined) return formatLength(this.height, { c: 0.5 })
       return null
     },
     styleFillBorderRadius () {
@@ -388,7 +389,7 @@ export default {
       if (this.borderRadius !== undefined) {
         return formatLength(this.borderRadius)
       }
-      if (this.height !== undefined) return formatLength(this.height / 2)
+      if (this.height !== undefined) return formatLength(this.height, { c: 0.5 })
       return null
     },
     syntheticIndicatorPlacement () {

src/steps/styles/light.js

@@ -8,7 +8,7 @@ export default create({
     return {
       ...commonVariables,
       stepHeaderFontWeight: base.fontWeightStrong,
-      indicatorTextColorProcess: 'black',
+      indicatorTextColorProcess: derived.baseColor,
       indicatorTextColorWait: derived.textColorDisabled,
       indicatorTextColorFinish: derived.primaryColor,
       indicatorTextColorError: derived.errorColor,

src/tabs/src/Tabs.vue

@@ -90,7 +90,7 @@
 </template>
 
 <script>
-import { ref } from 'vue'
+import { ref, getCurrentInstance } from 'vue'
 import NIcon from '../../icon'
 import {
   configurable,
@@ -105,9 +105,8 @@ import {
 import { VResizeObserver } from 'vueuc'
 import { throttle } from 'lodash-es'
 import styles from './styles'
-import { warn } from '../../_utils/naive/warn'
-import { useCompitable } from 'vooks'
-import { onFontReady } from '../../_utils/composable'
+import { warn } from '../../_utils'
+import { useCompitable, onFontReady } from 'vooks'
 
 export default {
   name: 'Tabs',
@@ -189,7 +188,8 @@ export default {
     }
   },
   setup (props) {
-    onFontReady(vm => {
+    const vm = getCurrentInstance().proxy
+    onFontReady(() => {
       vm.updateScrollStatus()
       if (vm.typeIsLine) {
         vm.updateCurrentBarPosition()