Skip to content

Commit 15dc16f

Browse files
djthorpedjthorpe
committed
Added badges
1 parent c54e269 commit 15dc16f

File tree

10 files changed

+117
-45
lines changed

10 files changed

+117
-45
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
"description": "Javascript Framework",
55
"main": "dist/index.js",
66
"scripts": {
7-
"serve": "rm -fr dist && install -d dist && esbuild src/index.js src/index.html --outdir=dist --format=esm --sourcemap --minify --bundle --loader:.svg=file --loader:.woff=file --loader:.woff2=file --loader:.ttf=file --loader:.otf=file --loader:.html=copy --watch --serve",
8-
"build": "rm -fr dist && install -d dist && esbuild src/index.js src/index.html --outdir=dist --format=esm --sourcemap --minify --bundle --loader:.svg=file --loader:.woff=file --loader:.woff2=file --loader:.ttf=file --loader:.otf=file --loader:.html=copy",
7+
"serve": "rm -fr dist && install -d dist && esbuild src/index.html src/index.js --outdir=dist --format=esm --sourcemap --minify --bundle --loader:.svg=file --loader:.woff=file --loader:.woff2=file --loader:.ttf=file --loader:.otf=file --loader:.html=copy --watch --serve",
8+
"build": "rm -fr dist && install -d dist && esbuild src/index.js --outdir=dist --format=esm --sourcemap --minify --bundle --loader:.svg=file --loader:.woff=file --loader:.woff2=file --loader:.ttf=file --loader:.otf=file --loader:.html=copy",
99
"lint": "eslint js",
1010
"docs": "jsdoc -c config/jsdoc.config.json"
1111
},

‎src/component/badge/BadgeElement.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
2+
import { LitElement, html, css } from 'lit';
3+
4+
/**
5+
* A badge element
6+
*/
7+
export class BadgeElement extends LitElement {
8+
constructor() {
9+
super();
10+
// Default properties
11+
this.transform = 'none';
12+
}
13+
14+
static get properties() {
15+
return {
16+
/**
17+
* The text transform, none, uppercase, lowercase,capitalize
18+
* @type {String}
19+
*/
20+
transform: { type: String },
21+
};
22+
}
23+
24+
static get styles() {
25+
return css`
26+
:host {
27+
display: inline-block;
28+
background-color: var(--badge-background-color);
29+
color: var(--badge-color);
30+
padding: var(--badge-padding-y) var(--badge-padding-x);
31+
font-size: var(--badge-font-size);
32+
font-weight: var(--badge-font-weight);
33+
border-radius: var(--badge-border-radius);
34+
line-height: 1;
35+
text-align: center;
36+
white-space: nowrap;
37+
vertical-align: baseline;
38+
cursor: default;
39+
}
40+
.text-transform-capitalize {
41+
text-transform: capitalize;
42+
}
43+
.text-transform-uppercase {
44+
text-transform: uppercase;
45+
}
46+
.text-transform-lowercase {
47+
text-transform: lowercase;
48+
}
49+
.text-transform-none {
50+
text-transform: none;
51+
}
52+
`;
53+
}
54+
55+
render() {
56+
return html`
57+
<slot class="${this.transform ? `text-transform-${this.transform}` : ''}"></slot>
58+
`;
59+
}
60+
}
61+
62+
customElements.define('wc-badge', BadgeElement);
63+
64+

‎src/component/button/ButtonElement.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
import { LitElement, html, css } from 'lit';
3-
import Event from '../../core/event';
3+
import Event from '../../core/Event';
44

55
/**
66
* A button element
@@ -121,7 +121,6 @@ export class ButtonElement extends LitElement {
121121
}
122122
}
123123

124-
125124
customElements.define('wc-button', ButtonElement);
126125

127126

‎src/component/button/CloseButtonElement.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
import { LitElement, html, css } from 'lit';
3-
import Event from '../../core/event';
3+
import Event from '../../core/Event';
44

55
/**
66
* CloseButtonElement

‎src/component/nav/NavBarElement.js‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11

22
import { LitElement, html, css } from 'lit';
3-
import Event from '../../core/event';
43

54
/**
65
* NavBarElement
@@ -50,12 +49,6 @@ export class NavBarElement extends LitElement {
5049
this.name = '';
5150
this.disabled = false;
5251
}
53-
54-
onClick() {
55-
this.dispatchEvent(new CustomEvent(
56-
Event.EVENT_CLICK, { detail: this.name },
57-
));
58-
}
5952
}
6053

6154
customElements.define('wc-navbar', NavBarElement);

‎src/core/Provider.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Event from './event';
1+
import Event from './Event';
22

33
/**
44
* Provider of data. In general, add provider to the controller using

‎src/esbuild.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
2+
window.addEventListener('load', () => {
3+
console.log('esbuild');
4+
new EventSource('/esbuild').addEventListener('change', () => location.reload());
5+
});

‎src/index.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
<body>
1111
<wc-navbar name="navbar"></wc-navbar>
1212

13-
1413
<div class="container">
1514
<h1>Button Group</h1>
1615
<wc-button-group>
@@ -20,6 +19,15 @@ <h1>Button Group</h1>
2019
</wc-button-group>
2120
</div>
2221

22+
<div class="container">
23+
<h1>Badge</h1>
24+
<wc-badge transform="uppercase">default</wc-badge>
25+
<wc-badge transform="uppercase">info</wc-badge>
26+
<wc-badge transform="uppercase">warn</wc-badge>
27+
<wc-badge transform="uppercase">error</wc-badge>
28+
</div>
29+
30+
2331
<div class="container wc-card">
2432
<h1>Close Button</h1>
2533
<div style="position:relative; border: 1px solid red; margin: 0 100px 0 100px; padding: 5px;">

‎src/index.js‎

Lines changed: 3 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,41 +5,13 @@
55
import './component/button/ButtonElement';
66
import './component/button/ButtonGroupElement';
77
import './component/button/CloseButtonElement';
8+
import './component/badge/BadgeElement';
89
import './component/icon/IconElement';
910
import './component/nav/NavBarElement';
1011

11-
// Core
12-
import Provider from './core/Provider';
13-
import Event from './core/event';
14-
1512
// CSS
1613
import './css/core.css';
1714
import './css/document.css';
1815

19-
// Test
20-
window.addEventListener('load', () => {
21-
new EventSource('/esbuild').addEventListener('change', () => location.reload());
22-
23-
// Button Group
24-
document.querySelector('wc-button-group').addEventListener(Event.EVENT_CLICK, (evt) => {
25-
console.log("Button Group Click",evt.detail);
26-
});
27-
28-
// Card
29-
document.querySelector('.wc-card').addEventListener(Event.EVENT_CLICK, (evt) => {
30-
console.log("Card Click",evt.detail);
31-
});
32-
33-
// Provider
34-
var p = new Provider("http://localhost:8000/");
35-
p.addEventListener(Event.EVENT_ERROR,(evt) => {
36-
console.log("Got error:",evt);
37-
});
38-
p.addEventListener(Event.EVENT_START,(evt) => {
39-
console.log("START",evt.detail);
40-
});
41-
p.addEventListener(Event.EVENT_DONE,(evt) => {
42-
console.log("DONE",evt.detail);
43-
});
44-
p.fetch("/", {}, 5000);
45-
});
16+
import './esbuild.js';
17+
import './test.js';

‎src/test.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
3+
// Core
4+
import Provider from './core/Provider';
5+
import Event from './core/Event';
6+
7+
// Test
8+
window.addEventListener('load', () => {
9+
// Button Group
10+
document.querySelector('wc-button-group').addEventListener(Event.EVENT_CLICK, (evt) => {
11+
console.log("Button Group Click",evt.detail);
12+
});
13+
14+
// Card
15+
document.querySelector('.wc-card').addEventListener(Event.EVENT_CLICK, (evt) => {
16+
console.log("Card Click",evt.detail);
17+
});
18+
19+
// Provider
20+
var p = new Provider("http://localhost:8000/");
21+
p.addEventListener(Event.EVENT_ERROR,(evt) => {
22+
console.log("Got error:",evt);
23+
});
24+
p.addEventListener(Event.EVENT_START,(evt) => {
25+
console.log("START",evt.detail);
26+
});
27+
p.addEventListener(Event.EVENT_DONE,(evt) => {
28+
console.log("DONE",evt.detail);
29+
});
30+
p.fetch("/", {}, 5000);
31+
});

0 commit comments

Comments
 (0)