@zx-libs/utils v0.0.7

@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

• @returns HTMLElement[]

$(selector, doc)

Get the DOM element that matches selector

• @returns HTMLElement | null

base64ToBlob(base64, type)

base64 to blob data

• @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'

• @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.

• @returns string

createElement(tag, attrs, children)

create an element

• @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'

• @returns string

fileToBase64(file)

read file to base64 string

• @returns Promise<string>

formatBytes(bytes, useDecimal, decimalPlaces)

Digital Information Sizes Calculator

• @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

• @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}}

• @returns object

getLocalStorage(key, def)

Reading the localStorage item.

• @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

• @returns number

getScrollableParents(el, scrollDirection)

Get scrollable parent elements

• @returns HTMLElement[]

getSessionStorage(key, def)

Reading the sessionStorage item.

• @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]

• @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

• @returns boolean

isElement(el)

determines whether the el is an Element

• @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

• @returns boolean

isNumberLike(input)

Determine if input is a string number

• @returns boolean

isObject(input)

determines whether the passed value is an object

• @returns boolean

joinUrl(...args)

format url,

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

• @returns string

randomId(prefix, suffix)

Generate a random string id.

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

randomStr(length)

Generate a random string with a maximum length of 1000.

• @returns string

removeLocalStorage(key)

Removing the localStorage item.

• @returns void

removeSessionStorage(key)

Removing the sessionStorage item.

• @returns void

setLocalStorage(key, value)

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

• @returns void

setSessionStorage(key, value)

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

• @returns void

slice(arrayLike, offset)

Convert pseudo-array to array

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

• @returns array T[]

splitBase64(base64)

split base64 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円']

• @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

• @returns string

toCssValue(value, unit)

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

• @returns string

toDate(input)

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

• @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

• @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

• @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%

• @returns string

Types

FormatDateLangPackage

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

type FormatDateLangPackage = ILangPackage

GetStyleValueReturnType<T, N>

type of getStyleValue return

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

ScrollDirection

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

type ScrollDirection = 'x' | 'y'

ILangPackage

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

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

License

MIT License © 2022-Present Capricorncd.