Skip to content

Commit 075779b

Browse files
JoernTJoernT
committed
fixes search pattern for template expressions;
required handling (styling); non-functioning rollup.config.js; lots of changes to demo files;
1 parent d7581db commit 075779b

22 files changed

+890
-473
lines changed

‎demo/avt.html

+25-23
Original file line numberDiff line numberDiff line change
@@ -14,34 +14,38 @@
1414

1515

1616
<link href="../resources/vars.css" rel="stylesheet">
17-
<!-- <link href="../resources/demo.css" rel="stylesheet">-->
17+
<link href="../resources/demo.css" rel="stylesheet">
1818

19-
<style>
20-
.static {
21-
font-size: 20px;
22-
padding: 10px;
23-
}
24-
25-
.Hello {
26-
background: lime;
27-
}
28-
29-
.Universe {
30-
border: 6px solid red;
31-
font-style: italic;
32-
}
33-
</style>
3419

3520
</head>
3621
<body unresolved="unresolved">
3722
<div class="wrapper">
3823

39-
<h1>Greeting with Template Expressions</h1>
24+
<h1>Template Expressions</h1>
25+
26+
<p>A Template Expression is a binding expression enclosed within curly brackets.</p>
27+
28+
<p>Whenever the bound node changes the Template Expression will update and be substituted by its value. This
29+
is especially useful for manipulating CSS from data.</p>
4030

41-
<!--
4231
<demo-snippet>
4332
<template>
44-
-->
33+
<style>
34+
.static {
35+
font-size: 20px;
36+
padding: 10px;
37+
}
38+
.Hello {
39+
background: lime;
40+
}
41+
.Uni{
42+
background: yellow;
43+
}
44+
.Universe {
45+
border: 6px solid red;
46+
font-style: italic;
47+
}
48+
</style>
4549

4650
<xf-form>
4751
<xf-model>
@@ -52,16 +56,14 @@ <h1>Greeting with Template Expressions</h1>
5256
</xf-instance>
5357
</xf-model>
5458

55-
<div class="static {greeting}">Greeting {greeting} another {greeting}</div>
59+
<!-- <div class="static {greeting}">Greeting {greeting} another {greeting}</div>-->
60+
<div class="static {greeting}">Greeting: {greeting}</div>
5661
<xf-input ref="greeting" label="greeting"></xf-input>
5762

5863

5964
</xf-form>
60-
<!--
6165
</template>
6266
</demo-snippet>
63-
-->
64-
6567

6668
</div>
6769

‎demo/binding-nested.html

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<meta content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" name="viewport"/>
6+
7+
<title>Binding</title>
8+
<link rel="stylesheet" href="../resources/fore.css">
9+
<link href="../resources/demo.css" rel="stylesheet">
10+
11+
<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
12+
<script type="module">
13+
import '@polymer/iron-demo-helpers/demo-snippet.js';
14+
import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
15+
</script>
16+
17+
<link rel="stylesheet" href="../resources/vars.css">
18+
<style>
19+
.required [slot=label]:after {
20+
content: '*';
21+
color: red;
22+
padding-left: 4px;
23+
}
24+
25+
[slot=hint] {
26+
display: block;
27+
font-size: 0.9rem;
28+
padding-top: 4px;
29+
}
30+
31+
.buttons {
32+
display: block;
33+
}
34+
xf-bound{
35+
margin:20px 0;
36+
}
37+
</style>
38+
</head>
39+
<body unresolved="unresolved">
40+
41+
<h1>They nest</h1>
42+
43+
<p><code>xf-bind</code> elements can be nested to avoid typing.</p>
44+
45+
<p class="note">A <code>ref</code> expression
46+
is always relative to it's parent binding or if there's none to the root-node of the default instance. This is true
47+
for <code>xf-bind</code> but also within the UI elements of the form.</p>
48+
<demo-snippet>
49+
<template>
50+
51+
<xf-form>
52+
<xf-model id="model1">
53+
<xf-instance>
54+
<data>
55+
<greeting type="message">Hello World!</greeting>
56+
</data>
57+
</xf-instance>
58+
<xf-bind id="b-greeting" ref="greeting" required="1 = 1">
59+
<xf-bind id="b-type" ref="@type"></xf-bind>
60+
</xf-bind>
61+
</xf-model>
62+
<xf-group ref="greeting">
63+
<xf-output ref="./@type"></xf-output>: <xf-output ref="."> </xf-output>
64+
</xf-group>
65+
</xf-form>
66+
</template>
67+
</demo-snippet>
68+
<script type="module" src="../index.js"></script>
69+
70+
</body>
71+
</html>

‎demo/binding.html

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<meta content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" name="viewport"/>
6+
7+
<title>Binding</title>
8+
<link rel="stylesheet" href="../resources/fore.css">
9+
<link href="../resources/demo.css" rel="stylesheet">
10+
11+
<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
12+
<script type="module">
13+
import '@polymer/iron-demo-helpers/demo-snippet.js';
14+
import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
15+
</script>
16+
17+
<link rel="stylesheet" href="../resources/vars.css">
18+
<style>
19+
.required [slot=label]:after {
20+
content: '*';
21+
color: red;
22+
padding-left: 4px;
23+
}
24+
25+
[slot=hint] {
26+
display: block;
27+
font-size: 0.9rem;
28+
padding-top: 4px;
29+
}
30+
31+
.buttons {
32+
display: block;
33+
}
34+
xf-bound{
35+
margin:20px 0;
36+
}
37+
.diagram{
38+
width: 600px;
39+
}
40+
</style>
41+
</head>
42+
<body unresolved="unresolved">
43+
44+
<h1>Bindings are fore-ever</h1>
45+
<p>Sorry for the pun - couldn't resist</p>
46+
<img src="../resources/images/modelitem.svg" class="diagram">
47+
<demo-snippet>
48+
<template>
49+
50+
<xf-form>
51+
<xf-model>
52+
<xf-instance>
53+
<data>
54+
<item>Hello</item>
55+
<required>true</required>
56+
<readonly>false</readonly>
57+
<constraint>true</constraint>
58+
<relevant>true</relevant>
59+
</data>
60+
</xf-instance>
61+
<xf-bind ref="item"
62+
required="boolean-from-string(depends(../required))"
63+
readonly="boolean-from-string(depends(../readonly))"
64+
constraint="boolean-from-string(depends(../constraint))"
65+
relevant="boolean-from-string(depends(../relevant))"
66+
></xf-bind>
67+
</xf-model>
68+
<xf-group>
69+
<xf-bound ref="item">
70+
<label slot="label">ItemLabel</label>
71+
<span slot="hint">a hint for this item</span>
72+
<xf-alert slot="alert">This went wrong</xf-alert>
73+
<!--
74+
<xf-message event="required">required event fired</xf-message>
75+
<xf-message event="optional">optional event fired</xf-message>
76+
<xf-message event="valid">valid event fired</xf-message>
77+
<xf-message event="invalid">invalid event fired</xf-message>
78+
<xf-message event="readwrite">readwrite event fired</xf-message>
79+
<xf-message event="readonly">readonly event fired</xf-message>
80+
<xf-message event="relevant">relevant event fired</xf-message>
81+
<xf-message event="nonrelevant">nonrelevant event fired</xf-message>
82+
-->
83+
84+
</xf-bound>
85+
86+
<div class="buttons">
87+
<xf-button label="set required">
88+
<xf-setvalue ref="required" value="true"></xf-setvalue>
89+
</xf-button>
90+
<xf-button label="set optional">
91+
<xf-setvalue ref="required" value="false"></xf-setvalue>
92+
</xf-button>
93+
</div>
94+
<div class="buttons">
95+
<xf-button label="set readonly">
96+
<xf-setvalue ref="readonly" value="true"></xf-setvalue>
97+
</xf-button>
98+
<xf-button label="set readwrite">
99+
<xf-setvalue ref="readonly" value="false"></xf-setvalue>
100+
</xf-button>
101+
</div>
102+
<div class="buttons">
103+
<xf-button label="set valid">
104+
<xf-setvalue ref="constraint" value="true"></xf-setvalue>
105+
</xf-button>
106+
<xf-button label="set invalid">
107+
<xf-setvalue ref="constraint" value="false"></xf-setvalue>
108+
</xf-button>
109+
</div>
110+
<div class="buttons">
111+
<xf-button label="set relevant">
112+
<xf-setvalue ref="relevant" value="true"></xf-setvalue>
113+
</xf-button>
114+
<xf-button label="set non-relevant">
115+
<xf-setvalue ref="relevant" value="false"></xf-setvalue>
116+
</xf-button>
117+
</div>
118+
</xf-group>
119+
</xf-form>
120+
</template>
121+
</demo-snippet>
122+
<script type="module" src="../index.js"></script>
123+
124+
</body>
125+
</html>

‎demo/css.html

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<meta content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" name="viewport"/>
6+
7+
<title>lazy modelItem creation during UI init</title>
8+
9+
<script src="../../assets/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10+
<script type="module">
11+
import '@polymer/iron-demo-helpers/demo-snippet.js';
12+
import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
13+
</script>
14+
15+
<link href="../resources/vars.css" rel="stylesheet">
16+
<style>
17+
.dynamic {
18+
background: #76ff03;
19+
}
20+
21+
xf-input[required]:after {
22+
content: "*";
23+
display: inline;
24+
color: red;
25+
}
26+
27+
h1{
28+
width:300px;
29+
}
30+
31+
</style>
32+
</head>
33+
<body unresolved="unresolved">
34+
35+
<demo-snippet>
36+
<template>
37+
38+
<xf-form>
39+
<xf-model>
40+
<xf-instance>
41+
<data>
42+
<class></class>
43+
<rotate>0</rotate>
44+
</data>
45+
</xf-instance>
46+
</xf-model>
47+
<xf-group>
48+
49+
<h1 style="transform-origin:50% 50%; transform:rotate({rotate}deg)">
50+
lazy greeting
51+
</h1>
52+
<xf-bound ref="rotate" update-event="change">
53+
<input type="range" step="10" min="0" max="360"/>
54+
</xf-bound>
55+
56+
</xf-group>
57+
</xf-form>
58+
</template>
59+
</demo-snippet>
60+
61+
62+
<script type="module" src="../index.js"></script>
63+
64+
</body>
65+
</html>

‎demo/hello-fonto.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,11 @@ <h1 class="{class}">
7979

8080
<xf-input label="Greeting" ref="greeting">
8181
<xf-message event="value-changed">value-changed fired on input</xf-message>
82-
<!-- <xf-message event="required">required should fire on input 'Greeting'</xf-message>-->
83-
<!-- <xf-message event="optional">optional should fire on input</xf-message>-->
84-
<!-- <xf-message event="valid">valid should fire on input</xf-message>-->
85-
<!-- <xf-message event="readwrite">readwrite should fire on input</xf-message>-->
86-
<!-- <xf-message event="readonly">readonly should fire on input</xf-message>-->
82+
<xf-message event="required">required should fire on input 'Greeting'</xf-message>
83+
<xf-message event="optional">optional should fire on input</xf-message>
84+
<xf-message event="valid">valid should fire on input</xf-message>
85+
<xf-message event="readwrite">readwrite should fire on input</xf-message>
86+
<xf-message event="readonly">readonly should fire on input</xf-message>
8787

8888
</xf-input>
8989

‎demo/nested-bind.html

+2-7
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,7 @@
66

77
<title>Hello World</title>
88

9-
<script src="../../assets/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10-
<script type="module">
11-
import '../src/xf-form.js';
12-
import '../src/ui/xf-group.js';
13-
import '../src/ui/xf-output.js';
14-
</script>
15-
<script src="../node_modules/slimdom/dist/slimdom.js"> </script>
9+
<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
1610

1711
<link rel="stylesheet" href="../resources/vars.css">
1812
</head>
@@ -33,6 +27,7 @@
3327
<xf-output ref="greeting"> </xf-output> : <xf-output ref="greeting/@type"></xf-output>
3428
</xf-group>
3529
</xf-form>
30+
<script type="module" src="../index.js"></script>
3631

3732
</body>
3833
</html>

0 commit comments

Comments
 (0)