Skip to content

Commit b47cbb9

Browse files
JoernTJoernT
committed
fixed lazy instance creation;
cleaned up imports; unfinished item creation for selects; fixed module imports not replying on assets any more; xf-form, xf-instance are native components again created index.js for all imports
1 parent febbcfa commit b47cbb9

34 files changed

+680
-387
lines changed

‎demo/hello-fonto.html

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

77
<title>Hello World</title>
88

9-
<script src="../../assets/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9+
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10+
<script type="module" src="../index.js"></script>
1011

1112
<link href="../resources/vars.css" rel="stylesheet">
1213
<style>
@@ -105,7 +106,6 @@ <h1 class="{class}">
105106
</xf-group>
106107
</xf-form>
107108

108-
<script type="module" src="../src/app.js"></script>
109109

110110
</body>
111111
</html>

‎demo/hi.html

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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>Hi</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 '../assets/@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
13+
14+
</script>
15+
16+
<link href="../resources/vars.css" rel="stylesheet">
17+
<style>
18+
.dynamic {
19+
background: #76ff03;
20+
}
21+
22+
</style>
23+
</head>
24+
<body unresolved="unresolved">
25+
26+
<demo-snippet>
27+
<template>
28+
29+
<xf-form>
30+
<h1>Get started</h1>
31+
32+
<p>
33+
Ultra-lazy mode creates XML nodes for each 'ref' found in the document. This mode is activated
34+
whenever there is no xf-model element specified.
35+
</p>
36+
<p>It serves simple use cases where just a bunch of params have to be collected without much bells
37+
and whistles</p>
38+
39+
<xf-group ref="outer">
40+
<xf-output ref="inner1">inner1</xf-output>
41+
<xf-output ref="inner2">inner2</xf-output>
42+
</xf-group>
43+
44+
<!--
45+
<demo-snippet>
46+
<template id="debug">
47+
48+
</template>
49+
</demo-snippet>
50+
-->
51+
<xf-message event="ready">its ready</xf-message>
52+
</xf-form>
53+
</template>
54+
</demo-snippet>
55+
<textarea id="debug" rows="20" cols="80"></textarea>
56+
57+
<script type="module" src="../index.js"></script>
58+
<script>
59+
60+
const form = document.querySelector('xf-form');
61+
console.log('???????????? the form ', form);
62+
form.addEventListener('refresh-done', function (e) {
63+
console.log('wow - event from form outside');
64+
const inst = form.model.getDefaultInstanceData();
65+
const ser = new XMLSerializer();
66+
const serialized = ser.serializeToString(inst);
67+
console.log('default inst ', ser.serializeToString(inst));
68+
const tmpl = document.getElementById('debug');
69+
console.log('debug ', tmpl);
70+
tmpl.innerHTML = serialized;
71+
});
72+
</script>
73+
</body>
74+
</html>

‎demo/instances.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,6 @@
77
<title>Hello World</title>
88

99
<script src="../../assets/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10-
<script type="module">
11-
import '../src/xf-form.js';
12-
</script>
1310

1411
<link rel="stylesheet" href="../resources/vars.css">
1512
<style>
@@ -86,5 +83,7 @@ <h1>
8683
-->
8784
</xf-group>
8885
</xf-form>
86+
<script type="module" src="../index.js"></script>
87+
8988
</body>
9089
</html>

‎demo/query-instance.html

+17-20
Original file line numberDiff line numberDiff line change
@@ -7,48 +7,45 @@
77
<title>load data from queryString</title>
88

99
<script src="../../assets/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10+
<!--
1011
<script type="module">
1112
import '../src/xf-form.js';
13+
import '../src/actions/xf-message.js';
1214
</script>
15+
-->
1316

1417
<link rel="stylesheet" href="../resources/vars.css">
1518
<style>
16-
.dynamic{
17-
background: #76ff03;
19+
div{
20+
white-space: nowrap;
1821
}
19-
xf-input[required]:after{
20-
content: "*";
21-
display: inline;
22-
color:red;
22+
[unresolved]{
23+
display: none;
2324
}
24-
2525
</style>
2626
</head>
2727
<body unresolved="unresolved">
2828

2929

3030
<xf-form>
31-
<xf-message event="refresh-done">refresh has been done </xf-message>
3231

3332
<xf-model id="model1">
3433
<xf-instance src="#querystring"></xf-instance>
35-
36-
<xf-bind ref="//param1" required="true()"></xf-bind>
37-
<xf-bind ref="param2"></xf-bind>
38-
3934
</xf-model>
4035
<xf-group>
4136

42-
4337
<h1>create xf-instance from queryString</h1>
44-
45-
<xf-output ref="//param1">
46-
<xf-label>Param1: </xf-label>
47-
</xf-output>
48-
<xf-output ref="param2">
49-
<xf-label>Param1: </xf-label>
50-
</xf-output>
38+
<div>
39+
<label>Param1: </label>
40+
<xf-output ref="param1"></xf-output>
41+
</div>
42+
<div>
43+
<label>Param2: </label>
44+
<xf-output ref="param2"></xf-output>
45+
</div>
5146
</xf-group>
5247
</xf-form>
48+
<script type="module" src="../index.js"></script>
49+
5350
</body>
5451
</html>

‎demo/solutions/invoice.html

+13-9
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,15 @@
9393
background: var(--paper-orange-500);
9494
}
9595
.add{
96-
width: 16px;
97-
height: 16px;
98-
background: red;
99-
position:absolute;
100-
right:-16px;
96+
width: 22px;
97+
height: 18px;
98+
background: ghostwhite;
99+
position: absolute;
100+
right: -22px;
101+
text-align: center;
102+
border: 1px solid lightgrey;
103+
display: inline-block;
104+
cursor:pointer;
101105
}
102106
.sum{
103107
/*width: 100%;*/
@@ -136,7 +140,7 @@
136140
<xf-bind ref="description"></xf-bind>
137141
<xf-bind ref="quantity"></xf-bind>
138142
<xf-bind ref="price"></xf-bind>
139-
<xf-bind ref="sum"></xf-bind>
143+
<xf-bind ref="sum" calculate="../quantity * ../price"></xf-bind>
140144
</xf-bind>
141145
</xf-model>
142146

@@ -217,8 +221,8 @@ <h1>Invoice</h1>
217221

218222
<div class="item-header">
219223
<div>Description</div>
220-
<div>Quantity</div>
221-
<div>Price</div>
224+
<div>Quantity (hours)</div>
225+
<div>Price (Euro)</div>
222226
<div>Total</div>
223227
</div>
224228
<xf-repeat ref="item">
@@ -235,7 +239,7 @@ <h1>Invoice</h1>
235239
</xf-bound>
236240

237241
<xf-output class="sum" ref="sum"></xf-output>
238-
<span class="add">
242+
<span class="add">+
239243
<xf-append ref="item" repeat="item"></xf-append>
240244
</span>
241245
</template>

‎demo/ultra-lazy.html

+11-10
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@
66

77
<title>ultra-lazy authoring</title>
88

9-
<script src="../assets/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
9+
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10+
<!--
1011
<script type="module">
11-
import '../assets/@polymer/iron-demo-helpers/demo-snippet.js';
12+
import '@polymer/iron-demo-helpers/demo-snippet.js';
1213
</script>
14+
-->
1315

14-
<link href="../resources/vars.css" rel="stylesheet">
16+
<!-- <link href="../resources/vars.css" rel="stylesheet">-->
1517
<style>
1618
.dynamic {
1719
background: #76ff03;
@@ -44,22 +46,21 @@ <h1>ultra-lazy greeting</h1>
4446
</template>
4547
</demo-snippet>
4648
-->
47-
<textarea id="debug"></textarea>
4849
<xf-message event="ready">its ready</xf-message>
4950
</xf-form>
51+
<textarea id="debug" rows="20" cols="80"></textarea>
5052

51-
<script type="module" src="../src/app.js"></script>
53+
<script type="module" src="../index.js"></script>
5254
<script>
53-
5455
const form = document.querySelector('xf-form');
55-
console.log('???????????? the form ', form);
5656
form.addEventListener('refresh-done', function(e) {
57-
console.log('wow - event from form outside');
5857
const inst = form.model.getDefaultInstanceData();
59-
console.log('default inst ', inst);
58+
const ser = new XMLSerializer();
59+
const serialized = ser.serializeToString(inst);
60+
console.log('default inst ', ser.serializeToString(inst));
6061
const tmpl = document.getElementById('debug');
6162
console.log('debug ', tmpl);
62-
tmpl.innerHTML = inst.firstElementChild;
63+
tmpl.innerHTML = serialized;
6364
});
6465
</script>
6566
</body>

‎demo/xf-bound.html

+10-15
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
<script src="../../assets/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
1010

1111
<script type="module">
12-
import '../assets/@polymer/iron-demo-helpers/demo-snippet.js';
13-
import '../assets/@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
12+
import '@polymer/iron-demo-helpers/demo-snippet.js';
13+
import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
1414
</script>
1515

1616

@@ -49,7 +49,7 @@
4949
<xf-instance>
5050
<data>
5151
<item>foobar</item>
52-
<checked>false</checked>
52+
<checked>true</checked>
5353
<listitem>foo</listitem>
5454
</data>
5555
</xf-instance>
@@ -120,10 +120,11 @@ <h3>Using a textarea</h3>
120120

121121
<demo-snippet>
122122
<template>
123-
<xf-bound ref="item" update-event="input" value-prop="content">
123+
<xf-bound ref="item" update-event="input">
124124
<label for="text1" slot="label">native textarea</label>
125125
<textarea id="text1" cols="40" rows="4"></textarea>
126126
</xf-bound>
127+
<xf-output ref="item"></xf-output>
127128
</template>
128129
</demo-snippet>
129130

@@ -190,7 +191,6 @@ <h3>Datalist</h3>
190191
</section>
191192

192193

193-
<!--
194194
<section>
195195
<h3>Wrapped paper controls</h3>
196196

@@ -206,19 +206,14 @@ <h3>with incremental firing</h3>
206206
<xf-bound ref="item" update-event="keyup">
207207
<paper-input label="the item in paper land"></paper-input>
208208
</xf-bound>
209+
210+
<xf-bound ref="checked" update-event="change" value-prop="checked">
211+
<paper-checkbox>paper checkbox</paper-checkbox>
212+
</xf-bound>
209213
</template>
210214
</demo-snippet>
211215
</section>
212-
-->
213-
214-
<!--
215-
216216

217-
<xf-bound ref="checked" update-event="change" value-prop="checked">
218-
<paper-checkbox>paper checkbox</paper-checkbox>
219-
</xf-bound>
220-
221-
-->
222217
<!-- Selected list item :<xf-output ref="item"></xf-output>-->
223218

224219

@@ -238,7 +233,7 @@ <h3>with incremental firing</h3>
238233
</xf-group>
239234
</xf-form>
240235

241-
<script type="module" src="../src/app.js"></script>
236+
<script type="module" src="../index.js"></script>
242237

243238
</body>
244239
</html>

0 commit comments

Comments
 (0)