open-index/open-npm huggingface dataset:
npm package: @jsweb/css-theme-vars
Description: Get and Set global CSS properties (vars) with Vanilla JS
Author: Alex Bruno Cáceres
Latest version: 2.0.1

# @jsweb/css-theme-vars

Get and Set global CSS properties (vars) with Vanilla JS.

It is useful to set/change CSS themes for web apps dynamically.

## Install

You can install it with NPM, Yarn or via Unpkg CDN:

```
npm i -S @jsweb/css-theme-vars
```

```
yarn add @jsweb/css-theme-vars
```

```html
<script src="https://unpkg.com/@jsweb/css-theme-vars"></script>
```

## Usage

### ES6+

```javascript
import css from '@jsweb/css-theme-vars'
```

### Common JS

```javascript
const css = require('@jsweb/css-theme-vars')
```

### Global

If you install it via CDN, the object `cssThemeVars` will be global available at `window` scope.

## Methods

There are 4 useful methods:

### css.setTheme(obj)

It sets a bundle of `:root` CSS variables to config a CSS theme for your project.

The `obj` argument can be any JSON or literal JS object.

```javascript
import css from '@jsweb/css-theme-vars'

const theme = {
  '--color-accent': 'gold',
  '--color-danger': 'crimsom',
  '--color-primary': 'teal',
  '--color-secondary': 'cyan',
  '--color-warning': 'orange'
}

css.setTheme(theme)
```

Now you can do this:

```css
.text-primary {
  color: var(--primary);
}

.text-danger {
  color: var(--danger);
}

.text-warning {
  color: var(--warning);
}
```

### css.getTheme()

It is just a convenient method that parses CSS variables from all **computed styles**.

So, **not used vars will not be parsed**.

```javascript
import css from '@jsweb/css-theme-vars'

const theme = css.getTheme()
/*
theme = {
  '--color-accent': 'gold',
  '--color-danger': 'crimsom',
  '--color-primary': 'teal',
  '--color-secondary': 'cyan',
  '--color-warning': 'orange'
}
*/

const colorPrimary = theme['--color-primary']
```

Now you can use CSS variables in JS.

### css.setVar(key, val)

It sets a `:root` CSS variable programaticaly.

```javascript
import css from '@jsweb/css-theme-vars'

css.setVar('--color-primary', 'blue')
```

Now you can change your CSS variables on the fly.

### css.getVar(key)

If you know a `:root` CSS variable key, then you can get it in JS.

```javascript
import css from '@jsweb/css-theme-vars'

const colorPrimary = css.getVar('--color-primary')
```

Now you can use the CSS variable in JS.

## How it works?

**@jsweb/css-theme-vars** just plays with native methods using Vanilla JS, CSS computed sytles and DOM.

So, just use your imagination! ;)
npm package: @jsweb/font-awesome-base64
Description: Font Awesome Free icons compiled with WOFF2 base64 embedded font to CSS instead of link to font files
Author: Alex Bruno Cáceres
Latest version: 2.4.2

# @jsweb/font-awesome-base64 ![NPM Package](https://github.com/jsweb/font-awesome-base64/workflows/NPM%20Package/badge.svg)

Font Awesome icons compiled with WOFF2 base64 embedded font to CSS instead of link to font files.

## Font Awesome Free

Only free icons are included and you can see them at Fontawesome icons index:

https://fontawesome.com/search?m=free&s=solid%2Cregular%2Cbrands

## About

This compilation uses the original files from the Font Awesome package and a little magic through a custom build using PostCSS to embed the font files in CSS as base64 strings.

Only WOFF2 fonts are included to minify the compiled CSS at most as possible, and because WOFF2 is supported by all modern major browsers.

Web projects are the target. Especially mobile web view apps and PWA with offline capabilities, caching the CSS icons lib easily.

IE compatibility is not a concern (it is dead, accept it). For a compatibility reference see the link:

[Can I use - WOFF2](http://caniuse.com/#search=woff2)

## Install

### NPM

`npm i -S @jsweb/font-awesome-base64`

### Yarn

`yarn add @jsweb/font-awesome-base64`

### PNPM

`pnpm add @jsweb/font-awesome-base64`

## Files

CSS compilations in this package:

- `fa-all.css`: Full lib (547 KB)
- `fa-base.css`: Font Awesome base classes (79 KB)
- `fa-brands.css`: Web font for brand icons (156 KB)
- `fa-regular.css`: Web font for regular icons (33 KB)
- `fa-solid.css`: Web font for solid icons (203 KB)

## Usage

You can just use the entire lib compiled in `fa-all.css`, it is the main file exported by the package.

If you are using a build tool for CSS compilation, just import the file in your CSS, like this:

```css
@import '@jsweb/font-awesome-base64/fa-all.css';
```

If you prefer to link the file from the CDN source, you can do it like this:

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/@jsweb/font-awesome-base64/fa-all.css"
/>
```

If you don't need the entire lib or want to use any variant separately, you need to import/link the variant itself AND the `fa-base.css`.

Like this:

```css
@import '@jsweb/font-awesome-base64/fa-solid.css';
@import '@jsweb/font-awesome-base64/fa-base.css';
```

Or:

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/@jsweb/font-awesome-base64/fa-solid.css"
/>
<link
  rel="stylesheet"
  href="https://unpkg.com/@jsweb/font-awesome-base64/fa-base.css"
/>
```

## Version

You can check the version of the Font Awesome package by looking into the comments at the beginning of the compiled files or just browsing the lib on CDN: https://unpkg.com/@jsweb/font-awesome-base64
npm package: @jsweb/material-icons-base64
Description: Material Icons compiled with base64 embedded font to CSS instead of link to font files
Author: Alex Bruno Cáceres
Latest version: 2.1.3

# @jsweb/material-icons-base64 ![NPM Package](https://github.com/jsweb/material-icons-base64/workflows/NPM%20Package/badge.svg)

Material Icons compiled with WOFF2 base64 embedded fonts to CSS instead of link to font files.

## About

This compilation uses original files from Google Fonts and a little magic through a custom build using PostCSS to embed the font file in CSS as base64 string.

Only WOFF2 fonts are included to minify the compiled CSS at most as possible, and because WOFF2 is supported by all modern major browsers.

Web projects are the target. Especially mobile web view apps and PWA with offline capabilities, caching the CSS icons lib easily.

IE compatibility is not a concern (it is dead, accept it). For a compatibility reference see the link:

[Can I use - WOFF2](http://caniuse.com/#search=woff2)

## Install

### NPM

`npm i -S @jsweb/material-icons-base64`

### Yarn

`yarn add @jsweb/material-icons-base64`

### PNPM

`pnpm add @jsweb/material-icons-base64`

## Usage

CSS compilations in this package:

- `md-icons.css`, class `material-icons`, for Material Icons Filled (169 KB)
- `md-icons-outlined.css`, class `material-icons-outlined`, for Material Icons Outlined (203 KB)
- `md-symbols-outlined.css`, class `material-symbols-outlined`, for Material Symbols Oulined (266 KB)
- `md-symbols-rounded.css`, class `material-symbols-rounded`, for Material Symbols Rounded (305 KB)

If you are using a build tool for CSS compilation, just import the file you want in your CSS, like this:

```css
@import '@jsweb/material-icons-base64/md-icons.css';
```

If you prefer to link the files from the CDN source, you can do it like this:

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/@jsweb/material-icons-base64/md-symbols-outlined.css"
/>
```

So, just code your icon tags like this:

```html
<span class="material-icons">home</span>
<span class="material-symbols-outlined">home</span>
```

## Icons

You can check the icons at Google Fonts index:

- [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons)
- [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols)
npm package: @jsweb/params
Description: Simple JS module to parse/serialize HTTP query/params, useful for Fetch API or AJAX requests
Author: Alex Bruno
Latest version: 4.0.15

# @jsweb/params

Simple JS module to parse/serialize HTTP query/params. Useful for Fetch API or AJAX requests.

See tests at [https://params.jsweb.app](https://params.jsweb.app)

![package-npm](https://img.shields.io/badge/package-npm-blue.svg?style=for-the-badge)
![module-es](https://img.shields.io/badge/module-es-blue.svg?style=for-the-badge)
![tests-ava](https://img.shields.io/badge/tests-ava-blue.svg?style=for-the-badge)

## New in v4.0.0

Now, its a full ES module, there is no UMD or CommonJS version.

In modern JS development ES modules are the pattern, already supported in newer versions of Node.js and modern borwsers natively.

Backward compatibility is not a concern here. If you use a module bundler (like Webpack or Rollup) to transpile your code, the result will be compatible according to your setup.

## Instalation

You can install it using NPM, Yarn or via Unpkg CDN:

`npm i -S @jsweb/params`

`yarn add @jsweb/params`

## Usage

### ES6

Tree shaking (since v3.1.0):

```javascript
import { serialize, parse, form } from '@jsweb/params'
```

### From CDN (installation not required)

```html
<script type="module">
  import { form } from 'https://unpkg.com/@jsweb/params'

  const data = form({ name: 'Lorem Ispum', mail: 'lorem@ipsum' })
</script>
```

## Methods

There are only 3 methods within **@jsweb/params**:

### serialize(input: object): string

Transform an object to HTTP query string.

```javascript
import { serialize } from '@jsweb/params'

const query = serialize({ a: 1, b: 2, c: 3 }) // returns 'a=1&b=2&c=3'
```

### parse(input: string): any

Transform an HTTP query string to literal object.

```javascript
import { parse } from '@jsweb/params'

const obj = parse('a=1&b=2&c=3') // { a: 1, b: 2, c: 3 }
```

### form(input: any): any

Transform query string or object into FormData.

Input can be a query string, object or even an HTMLFormElement.

```javascript
import { form } from '@jsweb/params'

const data1 = form('a=1&b=2&c=3') // FormData instance with fields/values
const data2 = form({ a: 1, b: 2, c: 3 }) // FormData instance with fields/values
```
npm package: @jsweb/queryfetch
Description: Dead simple JS module to parse/serialize HTTP query/params, useful for Fetch API or AJAX requests
Author: Alex Bruno
Latest version: 2.1.3
Deprecated: This package was deprecated. Please use @jsweb/params.

# @jsweb/queryfetch

Dead simple JS module to parse/serialize HTTP query/params. Useful for Fetch API or AJAX requests.

## Instalation

You can install using NPM, Yarn or from CDN:

### CDN

```html
<script src="https://unpkg.com/@jsweb/queryfetch"></script>
```

## Usage

### ES6+

```javascript
import queryfetch from '@jsweb/queryfetch'
```

### CommonJS

```javascript
const queryfetch = require('@jsweb/queryfetch')
```

### Global

If you install with CDN script tag, `queryfetch` object will be available globally.

## Instance

**queryfetch** is a function that returns a class object constructor.

It needs to receive a source argument which will be used at methods execution.

Examples:

```javascript
const str = queryfetch('a=1&b=2&c=3'),
	obj = queryfetch({ a: 1, b: 2, c: 3 })
```

## Methods

There are only 3 methods within **queryfetch**:

### str.parse()

It converts a querystring to a literal Object.

```javascript
const str = queryfetch('a=1&b=2&c=3') // with or without first '?' char

str.parse()   // returns { a: 1, b: 2, c: 3 }
```

### obj.serialize()

Serializes a literal Object to a querystring.

```javascript
const obj = queryfetch({ a: 1, b: 2, c: 3 })

obj.serialize()   // returns 'a=1&b=2&c=3'
```

### qf.form()

This method is a *bonus* to build a FormData instance.

It can receive an entry as querystring, literal Object or HTMLFormElement.

```javascript
let qf = queryfetch(any) // querystring, literal Object or HTMLFormElement

qf.form()   // returns FormData instance with fields/values
```
npm package: @jsweb/sourcedata
Description: Simple dynamic JS datasource object, useful to combine with observables like Vue
Author: Alex Bruno Cáceres
Latest version: 1.1.0

# @jsweb/sourcedata
Simple dynamic JS datasource object, useful to combine with observables like Vue

***

## Installation

You can install it with NPM, Yarn or via Unpkg CDN

### CDN
```html
<script src="https://unpkg.com/@jsweb/sourcedata"></script>
```

## Usage

It's possible to use **sourcedata** with module loaders or globally.

### ES6

```javascript
import SourceData from '@jsweb/sourcedata'
```

### CommonJS

```javascript
let SourceData = require('@jsweb/sourcedata')
```

### CDN

If you install it via CDN, `sourcedata` object will be available at global window scope.

## Instance

**sourcedata** contains a class object that can be instantiated to a variable.

```javascript
let sdata = new SourceData(opt)
```

An `opt` object can setup SourceData as follows (default values):

```javascript
let sdata = new SourceData({
	source: [],	// Array with initial data.
	size: 0	    // Page size, items per page. 0 = no pagination
})

// Or simply: let sdata = new SourceData
```

## Properties

- **total**: total data items count
- **size**: the page size, items per page
- **pages**: pages count
- **page**: current page number
- **data**: result data items (filtered and/or sorted, if any)
- **view**: current page items
- **prev**: previews page number (or 0 if none)
- **next**: next page number (or 0 if none)

## Methods

- **setData(arr)**: set a new Array data to instance
- **pgPrev()**: navigates to previews page
- **pgNext()**: navigates to next page
- **pgFirst()**: navigates to first page
- **pgLast()**: navigates to last page
- **filter(fn)**: native JS Array.filter method to filter data (opt in)
- **sort(fn)**: native JS Array.sort method to sort data (opt in)
- **getItem(fn)**: gets an item with native JS Array.find method, returns { index: i, value: item }
- **setItem(obj)**: replaces an item value, obj argument needs to be like { index: i, value: item }
- **addItem(item)**: adds new item to data source using native JS Array.push
- **delItem(index)**: deletes an item from data source using native JS Array.splice
- **items(method, arg)**: executes a `method` with `arg`, `method` can be `filter`, `sort`, `get`, `set`, `add`, `del`,

## TODO

- ~~Filter/Sort items~~
- ~~Get/Set items~~
- ~~Add/Del items~~
- Observable events
npm package: @jsweb001/zklib
Description: [![Build Status](https://travis-ci.org/bulentv/js_zklib.svg?branch=master)](https://travis-ci.org/bulentv/js_zklib)
Latest version: 0.2.11

[![Build Status](https://travis-ci.org/bulentv/js_zklib.svg?branch=master)](https://travis-ci.org/bulentv/js_zklib)

# node-zklib

Attendance Machine Library for NodeJS with a connection to the network using the UDP protocol and port 4370

Install with:

    npm install zklib

## Usage

```js
const ZKLib = require('zklib');

ZK = new ZKLib({
  ip: '192.168.5.11',
  port: 4370,
  inport: 5200,
  timeout: 5000,
});

// connect to access control device
ZK.connect(function(err) {
  if (err) throw err;

  // read the time info from th device
  ZK.getTime(function(err, t) {
    // disconnect from the device
    ZK.disconnect();

    if (err) throw err;

    console.log("Device clock's time is " + t.toString());
  });
});
```

## Configuration

| Option           | Required | Values                | Default  |
| ---------------- | -------- | --------------------- | -------- |
| ip               | yes      | string                |          |
| port             | -        | number                | 4370     |
| inport           | yes      | number                |          |
| timeout          | -        | number                | -        |
| attendanceParser | -        | [ 'legacy', 'v6.60' ] | 'legacy' |
| connectionType   | -        | [ 'udp', 'tcp' ]      | 'udp'    |

Currently only `getAttendance` was tested with TCP

## API

- connect(callback) -> To Connect in machine.
- disconnect() -> Disconnect connection with machine.
- serialNumber(callback) -> Get serial number machine.
- version(callback) -> Get version of machine.
- enableDevice(callback) -> Enable the device.
- disableDevice(callback) -> Disable the device.
- getAttendance(callback) -> Get attendance data.
- clearAttendanceLog(callback) -> Clear the attendance logs from device.
- getTime(callback) -> Get time of machine.
- setTime(value, callback) -> Set time in machine.
- getUser(callback) -> Get all user in machine.

## Handle Callback

```js
ZK.getTime(function(err, time) {
  if (err) throw err;
  console.log("Device clock's time is " + time.toString());
});
```

## Testing

```js
yarn test
```

## Release Process

### To release a new version

1.  Make sure current master branch is green on [CI](https://travis-ci.org/bulentv/js_zklib)
2.  Ensure your local copy is up-to-date, then run `sh ./scripts/release-branch.sh`. This will create the `x.x.x` branch and assign tag `x.x.x` to HEAD and push it all to git `origin`
3.  CI will automatically create a NPM release if the build is passing.

## Contributors

- Bulent Vural https://github.com/bulentv
- Matias Ribichich https://github.com/mribichich
- Shodiqul Muzaki https://github.com/creativefull
- shubhamoy https://github.com/shubhamoy

## How to Contribute

- Open a pull request

## Notes about versions

- v0.1.x - Supported nodejs version: >= 0.10.48
- v0.2.x - Supported nodejs version: >= 7.5.0

## Credits

Based on php_zklib (https://github.com/dnaextrim/php_zklib)