Skip to content

Commit 9669b30

Browse files
lexoyolexoyo
committed
doc with demo
1 parent 3ecdaa2 commit 9669b30

File tree

2 files changed

+121
-67
lines changed

2 files changed

+121
-67
lines changed

‎dev/expression-input.html

+119-67
Original file line numberDiff line numberDiff line change
@@ -12,85 +12,137 @@
1212
font-family: sans-serif;
1313
background-color: #eee;
1414
margin: 0;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
height: 100vh;
1519
}
20+
1621
.container {
17-
max-width: 400px;
18-
min-height: 100vh;
1922
box-sizing: border-box;
20-
margin: 0 0 0 auto;
21-
padding: 10px;
23+
margin: 200px;
24+
padding: 20px;
2225
background-color: #fff;
2326
border: 1px solid #ccc;
24-
box-shadow: 0 0 10px rgba(0,0,0,0.2);
27+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
28+
}
29+
30+
expression-input {
31+
padding: 0;
32+
display: block;
33+
border: 1px solid rgba(0, 0, 0, 0.2);
34+
}
35+
36+
select {
37+
padding: 5px;
38+
height: 100%;
39+
background: #eaeaea;
40+
border: 1px solid #9c9c9c;
41+
border-radius: 2px;
42+
margin-right: 5px;
43+
text-align: center;
44+
width: fit-content;
45+
margin-top: 5px;
46+
}
47+
48+
expression-input::part(property-container) {
49+
padding: 0;
2550
}
2651
</style>
52+
<script>
53+
window.addEventListener('load', () => {
54+
// 1) Your hierarchical data
55+
const tree = [
56+
{
57+
value: "Page",
58+
tree: [
59+
{ value: "title" },
60+
{ value: "content" },
61+
],
62+
},
63+
{
64+
value: "Blog",
65+
tree: [
66+
{ value: "title" },
67+
{ value: "content" },
68+
{
69+
value: "Author",
70+
tree: [
71+
{ value: "name" },
72+
{ value: "email" },
73+
{
74+
value: "Picture",
75+
tree: [
76+
{ value: "url" },
77+
{ value: "size" },
78+
],
79+
},
80+
],
81+
},
82+
],
83+
},
84+
];
85+
86+
// We'll store the user's current path in this array
87+
const exprPath = [];
88+
89+
// Grab the <expression-input> container
90+
const exprInput = document.getElementById('expr');
91+
92+
/**
93+
* Creates a <select> for a given level of the tree.
94+
* @param {Array} levelTree - The array of possible tokens at this level.
95+
* @param {number} levelIndex - Which level of depth we are in the expression.
96+
*/
97+
function createSelect(levelTree, levelIndex) {
98+
const sel = document.createElement('select');
99+
// Start with a "+" placeholder option
100+
sel.innerHTML = `
101+
<option value="">+</option>
102+
${levelTree.map(t => `<option value="${t.value}">${t.value}</option>`).join('')}
103+
`;
104+
105+
sel.addEventListener('change', () => {
106+
// Update the chosen token in our exprPath
107+
exprPath[levelIndex] = sel.value;
108+
// Remove deeper selects, since we changed this level
109+
const allSelects = exprInput.querySelectorAll('select');
110+
for (let i = levelIndex + 1; i < allSelects.length; i++) {
111+
exprInput.removeChild(allSelects[i]);
112+
// also clear out deeper tokens from exprPath
113+
exprPath[i] = undefined;
114+
}
115+
116+
// Look up the chosen node to see if there's a subtree
117+
const chosenNode = levelTree.find(n => n.value === sel.value);
118+
if (chosenNode && chosenNode.tree) {
119+
// Append the next <select> for the subtree
120+
const nextSelect = createSelect(chosenNode.tree, levelIndex + 1);
121+
exprInput.appendChild(nextSelect);
122+
}
123+
124+
console.log('Current expression path:', exprPath.filter(Boolean));
125+
// expression-input will also recalc its .value based on the selected <option> elements
126+
});
127+
128+
return sel;
129+
}
130+
131+
// 2) On load, create the very first <select> from the top-level tree
132+
const firstSelect = createSelect(tree, 0);
133+
// 3) Append it to the <expression-input>
134+
exprInput.appendChild(firstSelect);
135+
136+
})
137+
</script>
27138
</head>
28139
<body>
29140
<section class="container">
30-
<expression-input
31-
id="inputChain1"
32-
name="inputChain1"
33-
group-by-category
34-
>
35-
<span slot="label">Test label</span>
36-
<span slot="fixed">
37-
<input type="text" value="Fixed value" />
38-
</span>
39-
<select>
40-
<option value="">+</option>
41-
<option value="Blog Post" selected>Blog Post</option>
42-
<option value="Page">Page</option>
43-
<option value="Settings">Settings</option>
44-
</select>
45-
</expression-input>
46-
<hr />
47-
<expression-input
48-
id="inputChain2"
49-
name="inputChain2"
50-
onchange="event => console.log('onchange', event)"
51-
>
52-
<select>
53-
<option value="">+</option>
54-
<option value="Blog Post" selected>Blog Post</option>
55-
<option value="Page">Page</option>
56-
<option value="Settings">Settings</option>
57-
<option value="User">User</option>
58-
<option value="Where">Where</option>
59-
<option value="Upcase">Upcase</option>
60-
<option value="Truncate">Truncate</option>
61-
<option value="Current">Current</option>
62-
<option value="Category">Category</option>
63-
<option value="Tag">Tag</option>
64-
<option value="Menu">Menu</option>
65-
<option value="MenuItem">MenuItem</option>
66-
<option value="Comment">Comment</option>
67-
<option value="Asset">Asset</option>
68-
<option value="Append">Append</option>
69-
<option value="Prepend">Prepend</option>
70-
<option value="Replace">Replace</option>
71-
<option value="Split">Split</option>
72-
<option value="Join">Join</option>
73-
<option value="Sort">Sort</option>
74-
<option value="Map">Map</option>
75-
</select>
76-
<select>
77-
<option value="">+</option>
78-
<option value="title">Title</option>
79-
<option value="content">Content</option>
80-
<option value="seo" selected>SEO</option>
81-
</select>
82-
<select>
83-
<option value="">+</option>
84-
<option value="title">Title</option>
85-
<option value="content">Content</option>
86-
</select>
141+
<h1>&lt;expression-input&gt; Demo</h1>
142+
<expression-input id="expr">
143+
<span slot="label">An expression</span>
87144
</expression-input>
88145
</section>
89-
<script>
90-
const inputChain = document.querySelector('expression-input#inputChain2');
91-
console.log(inputChain, inputChain.name, inputChain.options);
92-
inputChain.addEventListener('change', event => console.log('addEventListener("change")', event.target.options.filter(o => o.selected).map(o => o.value)))
93-
</script>
94146
</body>
95147
</html>
96148

‎docs/expression-input.md

+2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ The `<expression-input>` component lets users build an expression from multiple
1313

1414
When fixed mode is active, the component hides the chain of `<select>` elements and shows the fixed input instead.
1515

16+
> [**Interactive Demo**](https://codepen.io/lexoyo/full/dPbrQzY)
17+
1618
---
1719

1820
## Basic Usage

0 commit comments

Comments
 (0)