07akioni / seemly

seemly

Util functions for creating user interface.

Installation

npm install --save-dev seemly

Usage

import { xxx } from 'seemly'

API

Animation

beforeNextFrame(callback: Function): void

Call the callback function before next frame.

beforeNextFrameOnce(callback: Function): void

Call the callback function before next frame. Same function won't be called more than once.

Color

In the following functions, RGBA is [number, number, number, number], RGB is [number, number, number].

rgba (color: string): RGBA

Get the rgba value of a string color.

Color could only be #000, #0000, #000000, #00000000, rgb(0, 0, 0), rgba(0, 0, 0, 0) formatted.

composite (background: string | RGB | RGBA, overlay: string | RGB | RGBA): string

Get the rgba formatted string of composited color of the two color.

For example: composite('#FFF', 'rgba(0, 0, 0, .5)') === 'rgba(127, 127, 127, 1)', composite('rgba(255, 255, 255, .5)', 'rgba(0, 0, 0, .5)') === 'rgba(85, 85, 85, 0.75)'.

CSS

depx (value: string | number): number

Remove the 'px' of the input value and get the number value of it.

For example: depx('1px') === 1, depx('1') === 1, depx(1) === 1.

pxfy (value: string | number): string

Append the 'px' on the input value.

For example: pxfy(1) === '1px', pxfy('1') === '1px', 'pxfy('1px') === '1px').

parseResponsiveProp (responsiveProp: string): Record<string, string>

Transform a css utility class to a js object.

For example: parseResponsiveProp('6 m:12 l:24') is { '': 6, m: '12', l: '24' }

parseResponsivePropValue (responsiveProp: string, activeKey: string): string | undefined

Get corresponding value by key.

For example: parseResponsiveProp('6 m:12 l:24', 'l') is '24'. parseResponsiveProp('6 m:12 l:24'), parseResponsiveProp('6 m:12 l:24', 'x') are '6'.

DOM

getScrollParent (node: Node | null): HTMLElement | Document | null

Get the scrollable parent node of current node.

unwrapElement (target: HTMLElement | string | () => HTMLElement): HTMLElement | null

Unwrap the HTMLElement from a element getter function or a element selector.

If the target is already a HTMLElement, the same value will be returned.

Misc

createId (length: number = 8): string

Get a unique random id with length of length.

seemly's Issues

Should rgba() silently fail if input is a CSS variable?

[seemly/rgba]: Invalid color value var(--colors-primary).

Coming from naive-ui I want to use CSS vars instead of hard coded colors.
Would it make sense to silently fail the rgba() function, or just trigger a warning instead of an error?

common: {
    primaryColor: 'var(--colors-primary)',
}