zx-sml is some static method library, which contains toSnakeCase, splitValue, getLocalStorage, formatDate, createElement, classNames and other methods.
zx-sml/docgen is some tool functions used in the Nodejs environment, which contains getCommentsData, outputFile, mkdirSync and other methods. It is mainly used to obtain the comment information in the code, and then output it as a Markdown file.
npm install zx-sml
yarn add zx-sml
pnpm i zx-sml
import { formatDate } from 'zx-sml'
formatDate('2020-12-04', 'yyyy/MM/dd W')
// 2020/12/04 Fri
A document generator that read the comments in the code and automatically generate MarkDown documents, docs.
const { log, outputFile } = require('zx-sml/docgen');
log('hello docgen')
outputFile(path.resolve(__dirname, './src'), path.resolve(__dirname, './docs/README.md'));
Get the DOM elements that matches selector
Param | Types | Required | Description |
---|---|---|---|
selector | string |
yes | - |
doc |
Document /HTMLElement
|
no | default document
|
- @returns
HTMLElement[]
Get the DOM element that matches selector
Param | Types | Required | Description |
---|---|---|---|
selector |
string /HTMLElement
|
yes | - |
doc |
Document /HTMLElement
|
no | default document
|
- @returns
HTMLElement | null
base64 to blob data
Param | Types | Required | Description |
---|---|---|---|
base64 | string |
yes | - |
type | string |
no | the target blob mimeType, Example image/jpeg
|
- @returns
Blob
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
Removing all the localStorage
items.
- @returns
void
Removing all the sessionStorage
items.
- @returns
void
creates a string containing a URL representing the object given in the parameter.
Param | Types | Required | Description |
---|---|---|---|
blob |
Blob /File
|
yes | - |
- @returns
string
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
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
read file to base64 string
Param | Types | Required | Description |
---|---|---|---|
file |
File /Blob
|
yes | - |
- @returns
Promise<string>
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}
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
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
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 thekey
. If thekey
does not exist,def
is returned.
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
Get scrollable parent elements
Param | Types | Required | Description |
---|---|---|---|
el | HTMLElement |
yes | - |
scrollDirection | ScrollDirection |
no | optional values x,y
|
- @returns
HTMLElement[]
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 thekey
. If thekey
does not exist,def
is returned.
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
determines whether the passed value is an Array
Param | Types | Required | Description |
---|---|---|---|
input | any |
yes | any type of object |
- @returns
boolean
determines whether the el is an Element
Param | Types | Required | Description |
---|---|---|---|
el | Node |
yes | DOM Node |
- @returns
boolean
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
Determine if input
is a string number
Param | Types | Required | Description |
---|---|---|---|
input | any |
yes | any type of object |
- @returns
boolean
determines whether the passed value is an object
Param | Types | Required | Description |
---|---|---|---|
input | any |
yes | any type of object |
- @returns
boolean
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
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 thisprefix-xxxxx-xxxxx-xxxxxxxxxx-suffix
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
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
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
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
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
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[]
split base64 data
Param | Types | Required | Description |
---|---|---|---|
base64 | string |
yes | base64(image) data. |
- @returns
{ type: string; data: string }
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]
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('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
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
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
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
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
The function formatDate(date, format, langPackage)
args langPackage's interface. ILangPackage
Source Code
type FormatDateLangPackage = ILangPackage
type of getStyleValue return
Source Code
type GetStyleValueReturnType<T, N> = T extends undefined
? CSSStyleDeclaration
: N extends true
? number
: string
type of scroll direction, x-axis/y-axis
Source Code
type ScrollDirection = 'x' | 'y'
The function formatDate(date, format, langPackage)
args langPackage's interface.
Source Code
interface ILangPackage {
// Starting on sunday. For example ['周日', '周一', ..., '周六']
weeks: string[],
[key: string]: any
}
MIT License © 2022-Present Capricorncd.