# seemly

> Utils for user interface.

Latest version **0.3.10** (published 2025-02-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install seemly
pnpm add seemly
yarn add seemly
bun add seemly
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.10 |
| Published | 2025-02-04 |
| First published | 2020-11-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 85.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 07akioni |
| Maintainers | 07akioni |

## Links

- npm: https://www.npmjs.com/package/seemly
- npm.io page: https://npm.io/package/seemly

## Recent versions

- 0.3.10 (latest) — 2025-02-04
- 0.3.9 — 2024-10-08
- 0.3.8 — 2023-12-13
- 0.3.7 — 2023-12-03
- 0.3.6 — 2022-08-07
- 0.3.5 — 2022-07-10
- 0.3.4 — 2022-06-08
- 0.3.3 — 2021-11-22
- 0.3.2 — 2021-09-27
- 0.3.1 — 2021-05-23
- 0.3.0 — 2021-05-22
- 0.2.0 — 2021-05-21
- 0.1.35 — 2021-04-19
- 0.1.34 — 2021-04-14
- 0.1.33 — 2021-04-13
- … 40 more at https://npm.io/package/seemly/versions

## README

# seemly
Util functions for creating user interface.

## Installation
```bash
npm install --save-dev seemly
```

## Usage
```js
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`.

---
_Source: https://npm.io/package/seemly · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._