|
1 | 1 |  |
| 2 | +<img alt="WebComponent Chmod Checkbox" src="https://github.com/WrathChaos/web-component-chmod-checkbox/blob/master/assets/logo.png" width="1050"/> |
2 | 3 |
|
3 | | -# Stencil Component Starter |
4 | 4 |
|
5 | | -This is a starter project for building a standalone Web Component using Stencil. |
| 5 | +[](https://github.com/WrathChaos/web-component-chmod-checkbox) |
6 | 6 |
|
7 | | -Stencil is also great for building entire apps. For that, use the [stencil-app-starter](https://github.com/ionic-team/stencil-app-starter) instead. |
8 | 7 |
|
9 | | -# Stencil |
| 8 | +[](https://www.npmjs.com/package/web-component-chmod-checkbox) |
| 9 | +[](https://www.npmjs.com/package/web-component-chmod-checkbox) |
| 10 | + |
| 11 | +[](https://opensource.org/licenses/MIT) |
| 12 | +[](https://github.com/prettier/prettier) |
10 | 13 |
|
11 | | -Stencil is a compiler for building fast web apps using Web Components. |
| 14 | +<p align="center"> |
| 15 | + <img alt="WebComponent Chmod Checkbox" src="assets/Screenshots/example.gif" /> |
| 16 | + <img alt="WebComponent Chmod Checkbox" src="assets/Screenshots/example.png" /> |
| 17 | +</p> |
12 | 18 |
|
13 | | -Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec. |
14 | 19 |
|
15 | | -Stencil components are just Web Components, so they work in any major framework or with no framework at all. |
| 20 | +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. |
16 | 21 |
|
17 | | -## Getting Started |
18 | 22 |
|
19 | | -To start building a new web component using Stencil, clone this repo to a new directory: |
| 23 | +## Fundamental CHMOD Architecture |
20 | 24 |
|
21 | | -```bash |
22 | | -git clone https://github.com/ionic-team/stencil-component-starter.git my-component |
23 | | -cd my-component |
24 | | -git remote rm origin |
25 | | -``` |
26 | 25 |
|
27 | | -and run: |
| 26 | +| Value | R | W | X | Description | |
| 27 | +| ----- | --- | --- | --- | ------------- | |
| 28 | +| 0 | 0 | 0 | 0 | NO_PERMISSION | |
| 29 | +| 1 | 1 | 0 | 0 | READ | |
| 30 | +| 2 | 0 | 1 | 0 | WRITE | |
| 31 | +| 3 | 1 | 1 | 0 | READ/WRITE | |
| 32 | +| 4 | 0 | 0 | 1 | EXECUTE | |
| 33 | +| 5 | 1 | 0 | 1 | READ/EXECUTE | |
| 34 | +| 6 | 0 | 1 | 1 | WRITE/EXECUTE | |
| 35 | +| 7 | 1 | 1 | 1 | ALL | |
28 | 36 |
|
29 | | -```bash |
30 | | -npm install |
31 | | -npm start |
32 | | -``` |
33 | 37 |
|
34 | | -To build the component for production, run: |
| 38 | +## Installation |
35 | 39 |
|
36 | | -```bash |
37 | | -npm run build |
38 | | -``` |
| 40 | +### Script tag (Recommended: Painless) |
| 41 | +- Put a script tag similar to this `<script src="https://unpkg.com/chmod-checkbox@latest/dist/chmod-checkbox.js"></script>` in the head of your index.html |
| 42 | +- Then you can use the element anywhere in your template, JSX, html etc |
39 | 43 |
|
40 | | -To run the unit tests for the components, run: |
| 44 | +### Node Modules |
| 45 | +- Run `npm install chmod-checkbox --save` |
| 46 | +- Put a script tag similar to this `<script src='node_modules/chmod-checkbox/dist/chmod-checkbox.js'></script>` in the head of your index.html |
| 47 | +- Then you can use the element anywhere in your template, JSX, html etc |
| 48 | + |
| 49 | +### In a stencil-starter app |
| 50 | +- Run `npm install chmod-checkbox --save` |
| 51 | +- Add an import to the npm packages `import chmod-checkbox;` |
| 52 | +- Then you can use the element anywhere in your template, JSX, html etc |
41 | 53 |
|
42 | | -```bash |
43 | | -npm test |
| 54 | +# Usage |
| 55 | + |
| 56 | +```html |
| 57 | +<chmod-checkbox permission="0" /> |
44 | 58 | ``` |
45 | 59 |
|
46 | | -Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component). |
47 | 60 |
|
| 61 | +### Configuration - Props |
48 | 62 |
|
49 | | -## Naming Components |
50 | 63 |
|
51 | | -When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component! |
| 64 | +| Property | Type | Default | Description | |
| 65 | +| ---------- | :----: | :-----: | --------------------------------- | |
| 66 | +| permission | number | 0 | get the changing permission value | |
52 | 67 |
|
53 | | -Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix `ion`. |
54 | 68 |
|
| 69 | +### Future Plans |
55 | 70 |
|
56 | | -## Using this component |
| 71 | +- [x] ~~LICENSE~~ |
| 72 | +- [ ] Customizable colors |
| 73 | +- [ ] Write an article about the lib on Medium |
57 | 74 |
|
58 | | -### Script tag |
59 | 75 |
|
60 | | -- [Publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages) |
61 | | -- Put a script tag similar to this `<script src='https://unpkg.com/my-component@0.0.1/dist/mycomponent.js'></script>` in the head of your index.html |
62 | | -- Then you can use the element anywhere in your template, JSX, html etc |
| 76 | +## Author |
63 | 77 |
|
64 | | -### Node Modules |
65 | | -- Run `npm install my-component --save` |
66 | | -- Put a script tag similar to this `<script src='node_modules/my-component/dist/mycomponent.js'></script>` in the head of your index.html |
67 | | -- Then you can use the element anywhere in your template, JSX, html etc |
| 78 | +FreakyCoder, kurayogun@gmail.com |
| 79 | + |
| 80 | +## License |
| 81 | + |
| 82 | +WebComponent Chmod Checkbox is available under the MIT license. See the LICENSE file for more info. |
68 | 83 |
|
69 | | -### In a stencil-starter app |
70 | | -- Run `npm install my-component --save` |
71 | | -- Add an import to the npm packages `import my-component;` |
72 | | -- Then you can use the element anywhere in your template, JSX, html etc |
|
0 commit comments