Skip to content

Commit 8637e45

Browse files
committed
Main design (HTML/CSS) is integrated
0 parents  commit 8637e45

File tree

15 files changed

+539
-0
lines changed

15 files changed

+539
-0
lines changed

.editorconfig

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# http://editorconfig.org
2+
3+
root = true
4+
5+
[*]
6+
charset = utf-8
7+
indent_style = space
8+
indent_size = 2
9+
end_of_line = lf
10+
insert_final_newline = true
11+
trim_trailing_whitespace = true
12+
13+
[*.md]
14+
insert_final_newline = false
15+
trim_trailing_whitespace = false

.gitignore

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
dist/
2+
www/
3+
loader/
4+
5+
*~
6+
*.sw[mnpcod]
7+
*.log
8+
*.lock
9+
*.tmp
10+
*.tmp.*
11+
log.txt
12+
*.sublime-project
13+
*.sublime-workspace
14+
15+
.stencil/
16+
.idea/
17+
.vscode/
18+
.sass-cache/
19+
.versions/
20+
node_modules/
21+
$RECYCLE.BIN/
22+
23+
.DS_Store
24+
Thumbs.db
25+
UserInterfaceState.xcuserstate
26+
.env

LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2018
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

package-lock.json

Lines changed: 29 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "chmod-checkbox",
3+
"version": "0.0.1",
4+
"description": "Stencil Component Starter",
5+
"main": "dist/index.js",
6+
"module": "dist/index.mjs",
7+
"es2015": "dist/esm/index.mjs",
8+
"es2017": "dist/esm/index.mjs",
9+
"types": "dist/types/index.d.ts",
10+
"collection": "dist/collection/collection-manifest.json",
11+
"collection:main": "dist/collection/index.js",
12+
"unpkg": "dist/chmod-checkbox/chmod-checkbox.js",
13+
"files": [
14+
"dist/",
15+
"loader/"
16+
],
17+
"scripts": {
18+
"build": "stencil build --docs",
19+
"start": "stencil build --dev --watch --serve",
20+
"test": "stencil test --spec --e2e",
21+
"test.watch": "stencil test --spec --e2e --watchAll",
22+
"generate": "stencil generate"
23+
},
24+
"devDependencies": {
25+
"@stencil/core": "^1.3.3",
26+
"@stencil/sass": "^1.0.1"
27+
},
28+
"license": "MIT"
29+
}

readme.md

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
2+
3+
# Stencil Component Starter
4+
5+
This is a starter project for building a standalone Web Component using Stencil.
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+
9+
# Stencil
10+
11+
Stencil is a compiler for building fast web apps using Web Components.
12+
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+
15+
Stencil components are just Web Components, so they work in any major framework or with no framework at all.
16+
17+
## Getting Started
18+
19+
To start building a new web component using Stencil, clone this repo to a new directory:
20+
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+
27+
and run:
28+
29+
```bash
30+
npm install
31+
npm start
32+
```
33+
34+
To build the component for production, run:
35+
36+
```bash
37+
npm run build
38+
```
39+
40+
To run the unit tests for the components, run:
41+
42+
```bash
43+
npm test
44+
```
45+
46+
Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
47+
48+
49+
## Naming Components
50+
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!
52+
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+
55+
56+
## Using this component
57+
58+
### Script tag
59+
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
63+
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
68+
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

src/components.d.ts

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/* tslint:disable */
2+
/**
3+
* This is an autogenerated file created by the Stencil compiler.
4+
* It contains typing information for all components that exist in this project.
5+
*/
6+
7+
8+
import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
9+
10+
11+
export namespace Components {
12+
interface ChmodCheckbox {
13+
/**
14+
* The first name
15+
*/
16+
'first': string;
17+
/**
18+
* The last name
19+
*/
20+
'last': string;
21+
/**
22+
* The middle name
23+
*/
24+
'middle': string;
25+
}
26+
}
27+
28+
declare global {
29+
30+
31+
interface HTMLChmodCheckboxElement extends Components.ChmodCheckbox, HTMLStencilElement {}
32+
var HTMLChmodCheckboxElement: {
33+
prototype: HTMLChmodCheckboxElement;
34+
new (): HTMLChmodCheckboxElement;
35+
};
36+
interface HTMLElementTagNameMap {
37+
'chmod-checkbox': HTMLChmodCheckboxElement;
38+
}
39+
}
40+
41+
declare namespace LocalJSX {
42+
interface ChmodCheckbox {
43+
/**
44+
* The first name
45+
*/
46+
'first'?: string;
47+
/**
48+
* The last name
49+
*/
50+
'last'?: string;
51+
/**
52+
* The middle name
53+
*/
54+
'middle'?: string;
55+
}
56+
57+
interface IntrinsicElements {
58+
'chmod-checkbox': ChmodCheckbox;
59+
}
60+
}
61+
62+
export { LocalJSX as JSX };
63+
64+
65+
declare module "@stencil/core" {
66+
export namespace JSX {
67+
interface IntrinsicElements {
68+
'chmod-checkbox': LocalJSX.ChmodCheckbox & JSXBase.HTMLAttributes<HTMLChmodCheckboxElement>;
69+
}
70+
}
71+
}
72+
73+

0 commit comments

Comments
 (0)