@zx-libs/utils

@zx-libs/utils is some static method library, which contains toSnakeCase, splitValue, getLocalStorage, formatDate, createElement, classNames and other methods.

Install

NPM Install

npm i @zx-libs/utils

Yarn add

yarn add @zx-libs/utils

pnpm install

pnpm i @zx-libs/utils

Usage

import { formatDate } from '@zx-libs/utils'

formatDate('2020-12-04', 'yyyy/MM/dd W')
// 2020/12/04 Fri

Methods

$$(selector, doc)

Get the DOM elements that matches selector

Param	Types	Required	Description
selector	string	yes	-
doc	Document/HTMLElement	no	default document

• @returns HTMLElement[]

$(selector, doc)

Get the DOM element that matches selector

Param	Types	Required	Description
selector	string/HTMLElement	yes	-
doc	Document/HTMLElement	no	default document

• @returns HTMLElement | null

base64ToBlob(base64, type)

base64 to blob data

Param	Types	Required	Description
base64	string	yes	-
type	string	no	the target blob mimeType, Example image/jpeg

• @returns Blob

classNames(...args)

Merge css class names. NOTE: Duplicate names will not be removed.

classNames({ active: true, zero: 0 }, ['text-center'], 'flex', 0)
// 'active text-center flex 0'

Param	Types	Required	Description
args	string/any[]/{ bool: true, number: 1, str: 'x', obj: {}, arr: [], other: ? }	yes	-

• @returns string

clearLocalStorage()

Removing all the localStorage items.

• @returns void

clearSessionStorage()

Removing all the sessionStorage items.

• @returns void

createBlobURL(blob)

creates a string containing a URL representing the object given in the parameter.

Param	Types	Required	Description
blob	Blob/File	yes	-

• @returns string

createElement(tag, attrs, children)

create an element

Param	Types	Required	Description
tag	string	yes	-
attrs	Record<string, any>	no	HTMLElement's attributes.
children	string/HTMLElement/Node/string[]/HTMLElement[]/Node[]	no	-

• @returns HTMLElement

createUrlForGetRequest(url, params)

Create full URL for GET request

createUrlForGetRequest('api/user', { age: 18 })
// 'api/user?age=18'
createUrlForGetRequest('api/user?class=a', { age: 18 })
// 'api/user?class=a&age=18'

Param	Types	Required	Description
url	string	yes	-
params	Record<string, unknown>	yes	-

• @returns string

fileToBase64(file)

read file to base64 string

Param	Types	Required	Description
file	File/Blob	yes	-

• @returns Promise<string>

formatBytes(bytes, useDecimal, decimalPlaces)

Digital Information Sizes Calculator

Param	Types	Required	Description
bytes	number	yes	bytes
useDecimal	boolean	no	whether to use decimal for calculations. default false
decimalPlaces	number	no	How many decimal places to keep. default 2

• @returns object {unit: string, text: string, value: number, bytes: number}

formatDate(date, format, langPackage)

Date format, see date-utils-2020 for details

// timestamp
formatDate( 20210101 , 'yyyy-MM-dd hh:mm:ss') // 1970-01-01 14:36:50
// yyyyMMdd
formatDate('20210101', 'yyyy-MM-dd hh:mm:ss') // 2021-01-01 00:00:00

Param	Types	Required	Description
date	any	yes	any type of object
format	string	yes	like this yyyy-MM-dd hh:mm:ss W
langPackage	ILangPackage	no	-

• @returns string

formatKeys(obj, isCamelCase)

Format the key of the object, using the toSnakeCase or toCamelCase method.

formatObjKeys({lineHeight: 1.5}) // {'line-height': 1.5}
formatObjKeys({lineHeight: 1.5, childObj: {maxWidth: 100}})
// {'line-height': 1.5, 'child-obj': {'max-width': 100}}
formatObjKeys({'line-height': 1.5}, true) // {lineHeight: 1.5}
formatObjKeys({'line-height': 1.5, 'child-obj': {'max-width': 100}}, true)
// {lineHeight: 1.5, childObj: {maxWidth: 100}}

Param	Types	Required	Description
obj	object	yes	-
isCamelCase	boolean	no	Whether the key of the object uses camel-case or snake-case, default false

• @returns object

getLocalStorage(key, def)

Reading the localStorage item.

Param	Types	Required	Description
key	string	yes	A string containing the name of the key you want to retrieve the value of.
def	any	yes	If the key does not exist, def is returned.

• @returns any Any object the value of the key. If the key does not exist, def is returned.

getMaxZIndex(defaultZIndex)

Get the max zIndex value in the document

Param	Types	Required	Description
defaultZIndex	number	no	Return value when none of the DOM elements have zIndex set, default 100

• @returns number

getScrollableParents(el, scrollDirection)

Get scrollable parent elements

Param	Types	Required	Description
el	HTMLElement	yes	-
scrollDirection	ScrollDirection	no	optional values x,y

• @returns HTMLElement[]

getSessionStorage(key, def)

Reading the sessionStorage item.

Param	Types	Required	Description
key	string	yes	A string containing the name of the key you want to retrieve the value of.
def	any	yes	If the key does not exist, def is returned.

• @returns any Any object the value of the key. If the key does not exist, def is returned.

getStyleValue(el, attr, needNumber)

Get the value of CSSStyleDeclaration or CSSStyleDeclaration[attr]

Param	Types	Required	Description
el	Node	yes	-
attr	string	no	Arbitrary property key for CSSStyleDeclaration
needNumber	boolean	no	whether to cast the returned property value to a numeric type

• @returns string | number | CSSStyleDeclaration | CSSRule | ((index: number) => string) | ((property: string, value: string/null, priority?: string) => void) | null

isArray(input)

determines whether the passed value is an Array

Param	Types	Required	Description
input	any	yes	any type of object

• @returns boolean

isElement(el)

determines whether the el is an Element

Param	Types	Required	Description
el	Node	yes	DOM Node

• @returns boolean

isNumber(input)

Determine whether it is a valid number.

isNumber(10) // true
isNumber(-10.02) // true

isNumber(NaN) // false
isNumber(null) // false
isNumber(undefined) // false

Param	Types	Required	Description
input	any	yes	any type of object.

• @returns boolean

isNumberLike(input)

Determine if input is a string number

Param	Types	Required	Description
input	any	yes	any type of object

• @returns boolean

isObject(input)

determines whether the passed value is an object

Param	Types	Required	Description
input	any	yes	any type of object

• @returns boolean

joinUrl(...args)

format url,

joinUrl('https://a.com/', '/news', 'detail/100001/?x=9')
// https://a.com/news/detail/100001?x=9

Param	Types	Required	Description
args	string[]	yes	-

• @returns string

randomId(prefix, suffix)

Generate a random string id.

Param	Types	Required	Description
prefix	string	no	A prefix of the id
suffix	string	no	A suffix of the id

• @returns string Like this prefix-xxxxx-xxxxx-xxxxxxxxxx-suffix

randomStr(length)

Generate a random string with a maximum length of 1000.

Param	Types	Required	Description
length	number	no	The length of the random string, which has a maximum value of 1000.

• @returns string

removeLocalStorage(key)

Removing the localStorage item.

Param	Types	Required	Description
key	string	yes	A string containing the name of the key you want to remove.

• @returns void

removeSessionStorage(key)

Removing the sessionStorage item.

Param	Types	Required	Description
key	string	yes	A string containing the name of the key you want to remove.

• @returns void

setLocalStorage(key, value)

It's accesses the current domain's localStorage object and adds a value to it using localStorage.setItem().

Param	Types	Required	Description
key	string	yes	A string containing the name of the key you want to create/update.
value	any	yes	Any object the value you want to give the key you are creating/updating.

• @returns void

setSessionStorage(key, value)

It's accesses the current domain's sessionStorage object and adds a value to it using sessionStorage.setItem().

Param	Types	Required	Description
key	string	yes	A string containing the name of the key you want to create/update.
value	any	yes	Any object the value you want to give the key you are creating/updating.

• @returns void

slice(arrayLike, offset)

Convert pseudo-array to array

slice({ length: 2, 0: 100, 1: 100 }) // [100, 100]

Param	Types	Required	Description
arrayLike	pseudo-array	yes	-
offset	number	no	default 0

• @returns array T[]

splitBase64(base64)

split base64 data

Param	Types	Required	Description
base64	string	yes	base64(image) data.

• @returns { type: string; data: string }

splitValue(input)

Split an attribute value into number and suffix unit. Returns [0, ''] if the string does not start with a number or -number.

splitValue('100px') // [100, 'px']
splitValue(100) // [100, '']
splitValue('2.5rem') // [2.5, 'rem']
splitValue('-2.5rem') // [-2.5, 'rem']
splitValue('50%') // [50, '%']
splitValue('1,600円') // [1600, '円']
splitValue(',1,600円') // [0, '']
splitValue('0000,600円') // [0, ',600円']

Param	Types	Required	Description
input	string/number	yes	-

• @returns [number, string]

toCamelCase(input, isFirstCapitalLetter)

Format string as camel case

toCamelCase('hello_world') // helloWorld
toCamelCase('hello-world') // helloWorld
toCamelCase('hello world') // helloWorld
toCamelCase('hello-world', true) // HelloWorld

Param	Types	Required	Description
input	string	yes	-
isFirstCapitalLetter	boolean	no	whether to capitalize the first letter, default false

• @returns string

toCssValue(value, unit)

toCssValue('10 20') // 10px 20px
toCssValue('10') // 10px
toCssValue(' 25em 10px 0 8') // 25em 10px 0px 8px

Param	Types	Required	Description
value	any	yes	css properties value
unit	string	yes	px, em...

• @returns string

toDate(input)

Convert input to Date, please click date-utils-2020 for details

Param	Types	Required	Description
input	any	yes	any type of object

• @returns Date | null

toNumber(input, isStrictMode, defaultValue?: number)

Convert any type to number.

toNumber('1.3rem') // 1.3
toNumber('1.3rem', true) // 0
toNumber('-12px') // -12
toNumber('-12px', true) // 0
toNumber('1,000,999Yan') // 1000999
toNumber('1,000,999', true) // 0

Param	Types	Required	Description
input	any	yes	-
isStrictMode	boolean/number	no	Whether it is strict mode, default false
defaultValue	number	no	The return value when formatting fails, default is 0

• @returns number

toSnakeCase(input, connectSymbol)

Format string as snake case

toSnakeCase('helloWorld') // hello-world
toSnakeCase('HelloWorld') // hello-world
toSnakeCase('helloWorld', '_') // hello_world
toSnakeCase('helloWorld', ' ') // hello world

Param	Types	Required	Description
input	string	yes	any string
connectSymbol	string	no	word connect symbol, default -

• @returns string

toStrStyles(...styles)

Convert styles object to string. When the properties are the same, the previous object properties will be overwritten

toStrStyles({'line-height': 1.5, width: '50%'})
// `line-height:1.5;width:'50%'`
toStrStyles({lineHeight: 1.5, width: '50%'})
// `line-height:1.5;width:50%`
toStrStyles({ lineHeight: 1.5, width: '50%' }, { 'line-height': '24px' })
// line-height:24px;width:50%

Param	Types	Required	Description
styles	object[]/CSSStyleDeclaration[]	yes	-

• @returns string

Types

FormatDateLangPackage

The function formatDate(date, format, langPackage) args langPackage's interface. ILangPackage

Source Code

type FormatDateLangPackage = ILangPackage

GetStyleValueReturnType<T, N>

type of getStyleValue return

Source Code

type GetStyleValueReturnType<T, N> = T extends undefined
  ? CSSStyleDeclaration
  : N extends true
    ? number
    : string

ScrollDirection

type of scroll direction, x-axis/y-axis

Source Code

type ScrollDirection = 'x' | 'y'

ILangPackage

The function formatDate(date, format, langPackage) args langPackage's interface.

Source Code

interface ILangPackage {
  // Starting on sunday. For example ['周日', '周一', ..., '周六']
  weeks: string[],
  [key: string]: any
}

License

MIT License © 2022-Present Capricorncd.