diff --git a/package-lock.json b/package-lock.json index a042ed5..8fb3bca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,9 +1,17 @@ { "name": "chmod-checkbox", - "version": "0.0.1", + "version": "0.1.1", "lockfileVersion": 1, "requires": true, "dependencies": { + "@paraboly/pwc-animated-checkbox": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/@paraboly/pwc-animated-checkbox/-/pwc-animated-checkbox-0.0.2.tgz", + "integrity": "sha512-xQg+YVakKH1JH7AUhTMuC0SuvvAkJRf82G6/EIcHKq6zXzPrciHqM/aASR+HjtoNt7IUd7iR5pi+08YHPiQ4/w==", + "requires": { + "chokidar": "^3.2.1" + } + }, "@stencil/core": { "version": "1.5.3", "resolved": "https://registry.npmjs.org/@stencil/core/-/core-1.5.3.tgz", @@ -19,10 +27,121 @@ "integrity": "sha512-3vmF8zir9FcVY/tYW0/V/pWrYSU684eASmALL2v29PGJvX6/CXh9n8LF7Jy95SpJPij3lisIUXLls7edXy2hYg==", "dev": true }, - "bootstrap": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz", - "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==" + "anymatch": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz", + "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==", + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + } + }, + "binary-extensions": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz", + "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==" + }, + "braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "requires": { + "fill-range": "^7.0.1" + } + }, + "chokidar": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.2.2.tgz", + "integrity": "sha512-bw3pm7kZ2Wa6+jQWYP/c7bAZy3i4GwiIiMO2EeRjrE48l8vBqC/WvFhSF0xyM8fQiPEGvwMY/5bqDG7sSEOuhg==", + "requires": { + "anymatch": "~3.1.1", + "braces": "~3.0.2", + "fsevents": "~2.1.1", + "glob-parent": "~5.1.0", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.2.0" + } + }, + "fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "requires": { + "to-regex-range": "^5.0.1" + } + }, + "fsevents": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.1.tgz", + "integrity": "sha512-4FRPXWETxtigtJW/gxzEDsX1LVbPAM93VleB83kZB+ellqbHMkyt2aJfuzNLRvFPnGi6bcE5SvfxgbXPeKteJw==", + "optional": true + }, + "glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "requires": { + "is-glob": "^4.0.1" + } + }, + "is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "requires": { + "binary-extensions": "^2.0.0" + } + }, + "is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=" + }, + "is-glob": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", + "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", + "requires": { + "is-extglob": "^2.1.1" + } + }, + "is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==" + }, + "lodash": { + "version": "4.17.19", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz", + "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==" + }, + "normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" + }, + "picomatch": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.0.7.tgz", + "integrity": "sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA==" + }, + "readdirp": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.2.0.tgz", + "integrity": "sha512-crk4Qu3pmXwgxdSgGhgA/eXiJAPQiX4GMOZZMXnqKxHX7TaoL+3gQVo/WeuAiogr07DpnfjIMpXXa+PAIvwPGQ==", + "requires": { + "picomatch": "^2.0.4" + } + }, + "to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "requires": { + "is-number": "^7.0.0" + } }, "typescript": { "version": "3.6.3", diff --git a/package.json b/package.json index 6f25daf..a7d42b3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "chmod-checkbox", - "version": "0.0.32", + "name": "@paraboly/chmod-checkbox", + "version": "0.1.1", "description": "Simple and ready to use chmod based checkbox web component with StencilJS", "main": "dist/index.js", "module": "dist/index.mjs", @@ -10,6 +10,9 @@ "collection": "dist/collection/collection-manifest.json", "collection:main": "dist/collection/index.js", "unpkg": "dist/chmod-checkbox/chmod-checkbox.js", + "repository": "git@github.com:Paraboly/web-component-chmod-checkbox.git", + "author": "Kuray (FreakyCoder) ", + "license": "MIT", "files": [ "dist/", "loader/" @@ -25,5 +28,8 @@ "@stencil/core": "^1.3.3", "@stencil/sass": "^1.0.1" }, - "license": "MIT" + "dependencies": { + "@paraboly/pwc-animated-checkbox": "0.0.2", + "lodash": "^4.17.15" + } } diff --git a/readme.md b/readme.md index 805fbe1..5fc918a 100644 --- a/readme.md +++ b/readme.md @@ -7,21 +7,18 @@ [![CHMOD based animated checkbox WebComponent with StencilJS](https://img.shields.io/badge/-CHMOD%20based%20animated%20checkbox%20WebComponent%20with%20StencilJS-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/web-component-chmod-checkbox) -[![npm version](https://img.shields.io/npm/v/chmod-checkbox.svg?style=for-the-badge)](https://www.npmjs.com/package/chmod-checkbox) -[![npm](https://img.shields.io/npm/dt/chmod-checkbox.svg?style=for-the-badge)](https://www.npmjs.com/package/chmod-checkbox) +[![npm version](https://img.shields.io/npm/v/@paraboly/chmod-checkbox.svg?style=for-the-badge)](https://www.npmjs.com/package/@paraboly/chmod-checkbox) +[![npm](https://img.shields.io/npm/dt/@paraboly/chmod-checkbox.svg?style=for-the-badge)](https://www.npmjs.com/package/@paraboly/chmod-checkbox) ![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) - -

WebComponent Chmod Checkbox WebComponent Chmod Checkbox

- 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. @@ -42,18 +39,29 @@ Chmod Checkbox comes with three (3) animated checkbox which includes READ, WRITE ## Installation +## First Install the Peer Dependency + +This peer dependency is essential for this library! You need to install it + +### [pwc-animated-checkbox](https://github.com/Paraboly/pwc-animated-checkbox) + +```js +npm i @paraboly/pwc-animated-checkbox +``` + + ### Script tag (Recommended: Painless) -- Put a script tag similar to this `` in the head of your index.html +- Put a script tag similar to this `` 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 chmod-checkbox --save` -- Put a script tag similar to this `` in the head of your index.html +- Run `npm install @paraboly/chmod-checkbox --save` +- Put a script tag similar to this `` 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 chmod-checkbox --save` -- Add an import to the npm packages `import chmod-checkbox;` +- 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 @@ -62,6 +70,15 @@ Chmod Checkbox comes with three (3) animated checkbox which includes READ, WRITE ``` +## How to get value from a prop? + +```js +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 @@ -75,7 +92,7 @@ Chmod Checkbox comes with three (3) animated checkbox which includes READ, WRITE - [x] ~~LICENSE~~ - [ ] Customizable colors -- [ ] Make another web-component with just animated checkbox and implement it on this library +- [x] ~~Make another web-component with just animated checkbox and implement it on this library~~ - [ ] Write an article about the lib on Medium diff --git a/src/components.d.ts b/src/components.d.ts index 799fff1..4bd22dd 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -11,20 +11,20 @@ import { HTMLStencilElement, JSXBase } from '@stencil/core/internal'; export namespace Components { interface ChmodCheckbox { /** - * The first name + * The first button text */ 'first': string; - 'isExecuteChecked': boolean; - 'isReadChecked': boolean; - 'isWriteChecked': boolean; /** - * The last name + * The last button text */ 'last': string; /** - * The middle name + * The middle button text */ 'middle': string; + /** + * Main mutable permission value depends on the selection of checkboxes + */ 'permission': number; } } @@ -45,20 +45,20 @@ declare global { declare namespace LocalJSX { interface ChmodCheckbox { /** - * The first name + * The first button text */ 'first'?: string; - 'isExecuteChecked'?: boolean; - 'isReadChecked'?: boolean; - 'isWriteChecked'?: boolean; /** - * The last name + * The last button text */ 'last'?: string; /** - * The middle name + * The middle button text */ 'middle'?: string; + /** + * Main mutable permission value depends on the selection of checkboxes + */ 'permission'?: number; } diff --git a/src/components/chmod-checkbox/chmod-checkbox.scss b/src/components/chmod-checkbox/chmod-checkbox.scss index 06bfd5c..a53f7b7 100644 --- a/src/components/chmod-checkbox/chmod-checkbox.scss +++ b/src/components/chmod-checkbox/chmod-checkbox.scss @@ -91,7 +91,15 @@ label { } input[type="checkbox"] { - display: none; // hide the system checkbox + // opacity: 0; + z-index: 10; + width: 25px; + height: 25px; + border-radius: 50%; + margin-right: -30px; + position: relative; + transform-origin: center; + background-color: transparent; // Let's add some effects after the checkbox is checked &:checked { diff --git a/src/components/chmod-checkbox/chmod-checkbox.tsx b/src/components/chmod-checkbox/chmod-checkbox.tsx index 68b9232..f6309ea 100644 --- a/src/components/chmod-checkbox/chmod-checkbox.tsx +++ b/src/components/chmod-checkbox/chmod-checkbox.tsx @@ -1,5 +1,7 @@ -import { Component, Prop, h, State } from "@stencil/core"; -import { calculatePermission } from "../../utils/utils"; +import { Component, Prop, h } from "@stencil/core"; +import { isChecked, calculatePermission } from "../../utils/utils"; +import { READ, WRITE, EXECUTE, EVENT_LISTENER } from "../../utils/constants"; +import "@paraboly/pwc-animated-checkbox"; @Component({ tag: "chmod-checkbox", @@ -8,99 +10,76 @@ import { calculatePermission } from "../../utils/utils"; }) export class CHModCheckbox { /** - * The first name + * The first button text */ @Prop() first: string = "READ"; /** - * The middle name + * The middle button text */ @Prop() middle: string = "WRITE"; /** - * The last name + * The last button text */ @Prop() last: string = "EXECUTE"; + /** + * Main mutable permission value depends on the selection of checkboxes + */ @Prop({ mutable: true, reflect: true }) permission: number = 0; - @Prop() isReadChecked: boolean = false; - @Prop() isWriteChecked: boolean = false; - @Prop() isExecuteChecked: boolean = false; + + /** + * Read, Write & Execute Checkbox Input Elements + */ + readCI: HTMLPwcAnimatedCheckboxElement; + writeCI: HTMLPwcAnimatedCheckboxElement; + executeCI: HTMLPwcAnimatedCheckboxElement; + + componentDidLoad() { + this.subscribeListeners(); + } + + subscribeListeners = () => { + this.readCI.addEventListener(EVENT_LISTENER, (event: any) => { + const { checked } = event.detail; + this.permission = calculatePermission(READ, checked, this.permission); + }); + + this.writeCI.addEventListener(EVENT_LISTENER, (event: any) => { + const { checked } = event.detail; + this.permission = calculatePermission(WRITE, checked, this.permission); + }); + + this.executeCI.addEventListener(EVENT_LISTENER, (event: any) => { + const { checked } = event.detail; + this.permission = calculatePermission(EXECUTE, checked, this.permission); + }); + }; render() { return (
-
-
-
- { - this.isReadChecked = !this.isReadChecked; - this.permission = calculatePermission( - "read", - this.isReadChecked, - this.permission - ); - }} - /> - - {this.first} -
-
+
+ (this.readCI = el as HTMLPwcAnimatedCheckboxElement)} + />
-
-
-
- { - this.isWriteChecked = !this.isWriteChecked; - this.permission = calculatePermission( - "write", - this.isWriteChecked, - this.permission - ); - }} - /> - - {this.middle} -
-
+
+ (this.writeCI = el as HTMLPwcAnimatedCheckboxElement)} + />
-
-
-
- { - this.isExecuteChecked = !this.isExecuteChecked; - this.permission = calculatePermission( - "execute", - this.isExecuteChecked, - this.permission - ); - }} - /> - - {this.last} -
-
+
+ (this.executeCI = el as HTMLPwcAnimatedCheckboxElement)} + />
); diff --git a/src/index.html b/src/index.html index 993318f..8c4dc60 100644 --- a/src/index.html +++ b/src/index.html @@ -9,24 +9,21 @@ Stencil Component Starter +
-
- Hello -
- +
- +
- +
-
diff --git a/src/utils/constants.ts b/src/utils/constants.ts new file mode 100644 index 0000000..c5673e0 --- /dev/null +++ b/src/utils/constants.ts @@ -0,0 +1,11 @@ +export const READ = "read"; +export const WRITE = "write"; +export const EXECUTE = "execute"; +export const EVENT_LISTENER = "checkedEvent"; + +export default { + READ, + WRITE, + EXECUTE, + EVENT_LISTENER +}; diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 752730b..654cc64 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -1,28 +1,62 @@ -export function calculatePermission( - type: string, - logic: boolean, +import _ from "lodash"; + +export const calculatePermission = ( + type: string = "read", + isChecked: boolean, permission: number -) { +) => { + let _permission = permission; switch (type) { case "read": - permission = logic === true ? permission + 1 : permission - 1; + _permission = isChecked ? _permission + 1 : _permission - 1; break; case "write": - permission = logic === true ? permission + 2 : permission - 2; + _permission = isChecked ? _permission + 2 : _permission - 2; break; case "execute": - permission = logic === true ? permission + 4 : permission - 4; + _permission = isChecked ? _permission + 4 : _permission - 4; break; default: - return permission; + return _permission; } - permission < 0 ? (permission = 0) : permission; - console.log("Permission: ", permission); - return permission; -} + _permission < 0 ? (_permission = 0) : _permission; + _permission > 7 ? (_permission = 7) : _permission; + console.log("CHMod Checkbox Calculated Permission: ", _permission); + return _permission; +}; + +export const decodePermission = (permission: number) => { + switch (permission) { + case 0: + return []; + case 1: + return ["read"]; + case 2: + return ["write"]; + case 3: + return ["read", "write"]; + case 4: + return ["execute"]; + case 5: + return ["read", "execute"]; + case 6: + return ["write", "execute"]; + case 7: + return ["read", "write", "execute"]; + default: + return []; + } +}; + +export const checkIfDecodePermission = ( + permission: number, + types: Array +) => { + const founded = _.intersection(decodePermission(permission), types); + if (founded) return founded.length > 0; + return false; +}; -export function format(first: string, middle: string, last: string): string { - return ( - (first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : "") - ); -} +export const isChecked = (permission, type) => { + return checkIfDecodePermission(permission, [type]); +};