feat(other): add addUnit util (#1382)

packages/utils/util.ts

@@ -1,25 +1,15 @@
+import type { Ref } from 'vue'
 import { getCurrentInstance } from 'vue'
 
-import {
-  isObject,
-  isArray,
-  isString,
-  capitalize,
-  hyphenate,
-  looseEqual,
-  extend,
-  camelize,
-  hasOwn,
-  toRawType,
-} from '@vue/shared'
+import { camelize, capitalize, extend, hasOwn, hyphenate, isArray, isObject, isString, looseEqual, toRawType } from '@vue/shared'
 
 import isServer from './isServer'
 import type { AnyFunction } from './types'
-import type { Ref } from 'vue'
+import { warn } from './error'
 
-export type PartialCSSStyleDeclaration = Partial<
-  Pick<CSSStyleDeclaration, 'transform' | 'transition' | 'animation'>
->
+export const SCOPE = 'Util'
+
+export type PartialCSSStyleDeclaration = Partial<Pick<CSSStyleDeclaration, 'transform' | 'transition' | 'animation'>>
 
 export function toObject<T>(arr: Array<T>): Record<string, T> {
   const res = {}
@@ -86,23 +76,25 @@ export const escapeRegexpString = (value = ''): string =>
 
 // coerce truthy value to array
 export const coerceTruthyValueToArray = arr => {
-  if (!arr && arr !== 0) { return [] }
+  if (!arr && arr !== 0) {
+    return []
+  }
   return Array.isArray(arr) ? arr : [arr]
 }
 
-export const isIE = function(): boolean {
+export const isIE = function (): boolean {
   return !isServer && !isNaN(Number(document.DOCUMENT_NODE))
 }
 
-export const isEdge = function(): boolean {
+export const isEdge = function (): boolean {
   return !isServer && navigator.userAgent.indexOf('Edge') > -1
 }
 
-export const isFirefox = function(): boolean {
+export const isFirefox = function (): boolean {
   return !isServer && !!window.navigator.userAgent.match(/firefox/i)
 }
 
-export const autoprefixer = function(
+export const autoprefixer = function (
   style: PartialCSSStyleDeclaration,
 ): PartialCSSStyleDeclaration {
   const rules = ['transform', 'transition', 'animation']
@@ -140,7 +132,7 @@ export const isHTMLElement = (val: unknown) => toRawType(val).startsWith('HTML')
 
 export function rafThrottle<T extends AnyFunction<any>>(fn: T): AnyFunction<void> {
   let locked = false
-  return function(...args: any[]) {
+  return function (...args: any[]) {
     if (locked) return
     locked = true
     window.requestAnimationFrame(() => {
@@ -182,14 +174,15 @@ export function useGlobalConfig() {
   }
   return {}
 }
-export const arrayFindIndex = function<T = any> (
+
+export const arrayFindIndex = function <T = any>(
   arr: Array<T>,
   pred: (args: T) => boolean,
 ): number {
   return arr.findIndex(pred)
 }
 
-export const arrayFind = function<T = any> (
+export const arrayFind = function <T = any>(
   arr: Array<T>,
   pred: (args: T) => boolean,
 ): any {
@@ -221,6 +214,18 @@ export function deduplicate<T>(arr: T[]) {
  * Unwraps refed value
  * @param ref Refed value
  */
-export function $<T>(ref: Ref<T>)  {
+export function $<T>(ref: Ref<T>) {
   return ref.value
 }
+
+export function addUnit(value: string | number) {
+  if (isString(value)) {
+    return value
+  } else if (isNumber(value)) {
+    return value + 'px'
+  }
+  if (process.env.NODE_ENV === 'development') {
+    warn(SCOPE, 'binding value must be a string or number')
+  }
+  return ''
+}