paraboly / web-component-chmod-checkbox

CHMOD based animated checkbox WebComponent with StencilJS

Chmod Checkbox comes with three (3) animated checkbox which includes READ, WRITE and EXECUTE values. These text values are customizable. It has built-in chmod calculator for each value.

Fundamental CHMOD Architecture

Value	R	W	X	Description
0	0	0	0	NO_PERMISSION
1	1	0	0	READ
2	0	1	0	WRITE
3	1	1	0	READ/WRITE
4	0	0	1	EXECUTE
5	1	0	1	READ/EXECUTE
6	0	1	1	WRITE/EXECUTE
7	1	1	1	ALL

Installation

First Install the Peer Dependency

This peer dependency is essential for this library! You need to install it

pwc-animated-checkbox

npm i @paraboly/pwc-animated-checkbox

Script tag (Recommended: Painless)

• Put a script tag similar to this <script src="https://unpkg.com/@paraboly/chmod-checkbox@latest/dist/chmod-checkbox.js"></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install @paraboly/chmod-checkbox --save
• Put a script tag similar to this <script src='node_modules/@paraboly/chmod-checkbox/dist/chmod-checkbox.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install @paraboly/chmod-checkbox --save
• Add an import to the npm packages import @paraboly/chmod-checkbox;
• Then you can use the element anywhere in your template, JSX, html etc

Usage

<chmod-checkbox permission="0" />

How to get value from a prop?

document.querySelectorAll("chmod-checkbox")[0].permission
document.querySelectorAll("chmod-checkbox")[0].first
document.querySelectorAll("chmod-checkbox")[0].middle
document.querySelectorAll("chmod-checkbox")[0].last

Configuration - Props

Property	Type	Default	Description
permission	number	0	get the changing permission value

Future Plans

• LICENSE
• Customizable colors
• Make another web-component with just animated checkbox and implement it on this library
• Write an article about the lib on Medium

Author

FreakyCoder, [email protected]

License

WebComponent Chmod Checkbox is available under the MIT license. See the LICENSE file for more info.