Skip to content

Commit

Permalink
First version of reference page for components #152
Browse files Browse the repository at this point in the history
  • Loading branch information
@cwpeng
cwpeng committed May 25, 2022
1 parent e297d21 commit 5d74b8c
Show file tree
Hide file tree
Showing 4 changed files with 201 additions and 12 deletions.
2 changes: 1 addition & 1 deletion dist/index.bundle.js
View file

Large diffs are not rendered by default.

134 changes: 130 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,31 @@
height:1px;background-color:var(--color-gray-20);
padding:0px 5px;margin:10px 0px;
}
#components-page table{
max-width:100%;min-width:500px;border-collapse:collapse;
margin:1.2rem 0px;text-align:left;
}
#components-page table tr>th{
border-bottom:2px solid #dddddd;padding:8px 10px;
}
#components-page table tr>td{
border-bottom:1px solid #dddddd;padding:8px 10px;
}
#components-page table tr>td:nth-child(1){
font-weight:bold;
}
#components-page table tr:nth-child(odd){
background-color:#eeeeee;
}
#components-page table tr>td>div.value{
cursor:pointer;
}
#components-page table tr>td>div.value:hover{
color:var(--color-primary-60);
}
#components-page table tr>td>input{
width:50px;padding:5px;border:1px solid #dddddd;
}
</style>
<script type="module">
import wc from "./dist/index.bundle.js";
Expand Down Expand Up @@ -167,11 +192,112 @@
function showComponent(name){
const componentClass=window.customElements.get(name);
const container=document.querySelector("#component-definition");
container.innerHTML=`<h3>Attributes</h3>`;
for(let key in componentClass.attributes){
let attribute=componentClass.attributes[key];
container.innerHTML+=`<div>Name: ${attribute.name}, Default: ${attribute.defaultValue}`;
// basic info
container.innerHTML=`
<w-heading level='3'>${componentClass.documents.title} Component</w-heading>
<w-heading level='4'>&lt;${componentClass.documents.tagName}&gt;</w-heading>
<div>${componentClass.documents.description}</div>
`;
// update demo
let component=null;
const updateDemo=function(){
const inputs=Array.from(table.querySelectorAll("input"));
const code=`<${componentClass.documents.tagName}${inputs.map((input)=>{
if(input.value){
return ` ${input.attribute.name}="${input.value}"`;
}else{
return "";
}
}).join("")}>Test</${componentClass.documents.tagName}>`;
demoCode.textContent=code;
demo.innerHTML=code;
component=demo.querySelector(componentClass.documents.tagName);
};
const executeMethod=function(name){
component[name]();
};
// attributes
container.innerHTML+=`<w-heading level='4'>Attributes</w-heading>`;
let table=document.createElement("table");
table.innerHTML=`
<tr>
<th>Name</th>
<th>Default</th>
<th>Value</th>
<th>Demo</th>
</tr>
`;
for(let key in componentClass.documents.attributes){
const attribute=componentClass.documents.attributes[key];
const tr=document.createElement("tr");
tr.innerHTML=`
<td>${attribute.name}</td>
<td>${attribute.defaultValue}</td>
`;
// values
let td=document.createElement("td");
attribute.values.split("|").forEach((value)=>{
const item=document.createElement("div");
item.className="value";
item.textContent=value;
item.addEventListener("click", ()=>{
if(!value.startsWith("[") || !value.endsWith("]")){
input.value=value;
input.dispatchEvent(new Event("input"));
}
});
td.appendChild(item);
});
tr.appendChild(td);
// input
const input=document.createElement("input");
input.type="text";
input.attribute=attribute;
input.addEventListener("input", updateDemo);
td=document.createElement("td");
td.appendChild(input);
tr.appendChild(td);
table.appendChild(tr);
}
container.appendChild(table);
// methods
container.innerHTML+=`<w-heading level='4'>Methods</w-heading>`;
table=document.createElement("table");
table.innerHTML=`
<tr>
<th>Name</th>
<th>Arguments</th>
<th>Demo</th>
</tr>
`;
for(let key in componentClass.documents.methods){
const method=componentClass.documents.methods[key];
const tr=document.createElement("tr");
tr.innerHTML=`
<td>${method.name}</td>
<td>${method.args}</td>
`;
// execute
let td=document.createElement("td");
const btn=document.createElement("button");
btn.textContent="execute";
btn.addEventListener("click", ()=>{
executeMethod(method.name);
});
td.appendChild(btn);
tr.appendChild(td);
// input
table.appendChild(tr);
}
container.appendChild(table);
// demo
const demoCode=document.createElement("div");
demoCode.className="demo-code";
container.appendChild(demoCode);
const demo=document.createElement("div");
demo.className="demo";
container.appendChild(demo);
updateDemo();
}
</script>
</head>
Expand Down
49 changes: 43 additions & 6 deletions packages/w-components/components/button/Button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,38 +194,75 @@ const stylesheet=`
}
`;
class Button extends WComponent{
static documents = {
title: 'Button',
description: 'General styled button component.',
tagName: 'w-button',
attributes: {
disabled: {
name: 'disabled', defaultValue: false,
values: 'true|false'
},
color: {
name: 'color', defaultValue: 'primary',
values: 'primary|critical|gray'
},
type: {
name: 'type', defaultValue: 'regular',
values: 'regular|outline|text|link'
},
size: {
name: 'size', defaultValue: 'md',
values: 'sm|md|lg|xl'
},
display: {
name: 'display', defaultValue: 'inline-block',
values: 'inline-block|block'
},
href: {
name: 'href', defaultValue: undefined,
values: '[Any URL]'
},
target: {
name: 'target', defaultValue: 'current',
values: 'current|new'
}
}
}
static attributes = {
disabled: {
name: 'disabled', defaultValue: false,
name: 'disabled', defaultValue: false,
parser: (value, attr) => AttributeParser.parseBoolAttr(
value, attr.defaultValue
)
},
color: {
name: 'color', defaultValue: 'primary',
name: 'color', defaultValue: 'primary',
parser: (value, attr) => AttributeParser.parseStringAttr(
value, attr.defaultValue, /^primary$|^critical$|^gray$/
)
},
type: {
name: 'type', defaultValue: 'regular',
parser: (value, attr) => AttributeParser.parseStringAttr(
value, attr.defaultValue, /^outline$|^text$|^link$/
value, attr.defaultValue, /^regular$|^outline$|^text$|^link$/
)
},
size: {
name: 'size', defaultValue: 'md',
name: 'size', defaultValue: 'md',
parser: (value, attr) => AttributeParser.parseStringAttr(
value, attr.defaultValue, /^sm$|^md$|^lg$|^xl$/
)
},
display: {
name: 'display', defaultValue: 'inline-block',
name: 'display', defaultValue: 'inline-block',
parser: (value, attr) => AttributeParser.parseStringAttr(
value, attr.defaultValue, /^inline-block$|^block$/
)
},
href: { name: 'href', defaultValue: undefined },
href: {
name: 'href', defaultValue: undefined,
},
target: {
name: 'target', defaultValue: 'current',
parser: (value, attr) => AttributeParser.parseStringAttr(
Expand Down
28 changes: 27 additions & 1 deletion packages/w-components/components/dialog/Dialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,33 @@ const stylesheet=`
}
`;
class Dialog extends WComponent{

static documents = {
title: 'Dialog',
description: 'General styled dialog component.',
tagName: 'w-dialog',
attributes: {
title: {
name: 'title', defaultValue: '',
values: '[Title Text]'
},
color: {
name: 'color', defaultValue: 'primary',
values: 'primary|critical|gray'
},
backdrop: {
name: 'backdrop', defaultValue: 'normal',
values: 'normal|none|no-action'
}
},
methods:{
open: {
name: 'open', args: ''
},
close: {
name: 'close', args: ''
}
}
}
static attributes = {
display: {
name: 'display', defaultValue: false,
Expand Down

0 comments on commit 5d74b8c

Please sign in to comment.