Skip to content

Commit b282b09

Browse files
ConradSollittConradSollitt
committed
📄 Update Vue Places Demo
1 parent b2a548e commit b282b09

4 files changed

Lines changed: 48 additions & 84 deletions

File tree

‎examples/html/cities-vue.htm‎

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,7 @@ <h1><span v-i18n="'Largest Cities in'"></span> {{ country }}, {{ region }}</h1>
66
<nav>
77
<a v-bind:href="'#/' + i18n_Locale + '/'" v-i18n="'Countries'"></a>
88
<a v-bind:href="'#/' + i18n_Locale + '/regions/' + country" v-i18n="'Regions'"></a>
9-
<div class="download-links ml-20">
10-
<span class="download" v-i18n="'Download'"></span>
11-
<img class="download"
12-
src="img/Excel.svg"
13-
height="16"
14-
width="16"
15-
alt="Download to Excel"
16-
title="Download to Excel"
17-
data-export-excel-selector="table"
18-
data-export-file-name="[[Cities]].xlsx"
19-
v-i18n-attr="'alt, title, data-export-file-name'">
20-
<img class="download"
21-
src="img/CSV.svg"
22-
height="16"
23-
width="16"
24-
alt="Download to CSV"
25-
title="Download to CSV"
26-
data-export-csv-selector="table"
27-
data-export-file-name="[[Cities]].csv"
28-
v-i18n-attr="'alt, title, data-export-file-name'">
29-
</div>
9+
<div class="ml-20" data-template-id="download-links"></div>
3010
</nav>
3111

3212
<input data-filter-selector="table" placeholder="Enter filter" v-i18n-attr="'placeholder'">

‎examples/html/regions-vue.htm‎

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,7 @@ <h1></h1>
55

66
<nav>
77
<a v-bind:href="'#/' + i18n_Locale + '/'" v-i18n="'Countries'"></a>
8-
<div class="download-links ml-20">
9-
<span class="download" v-i18n="'Download'"></span>
10-
<img class="download"
11-
src="img/Excel.svg"
12-
height="16"
13-
width="16"
14-
alt="Download to Excel"
15-
title="Download to Excel"
16-
data-export-excel-selector="table"
17-
data-export-file-name="[[Regions]].xlsx"
18-
v-i18n-attr="'alt, title, data-export-file-name'">
19-
<img class="download"
20-
src="img/CSV.svg"
21-
height="16"
22-
width="16"
23-
alt="Download to CSV"
24-
title="Download to CSV"
25-
data-export-csv-selector="table"
26-
data-export-file-name="[[Regions]].csv"
27-
v-i18n-attr="'alt, title, data-export-file-name'">
28-
</div>
8+
<div class="ml-20" data-template-id="download-links"></div>
299
</nav>
3010

3111
<input data-filter-selector="table"

‎examples/html/search-places-vue.htm‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -62,25 +62,7 @@ <h2>{{ cities.length }} <span v-i18n="'Cities Found'"></span></h2>
6262

6363
<div>
6464
<nav style="display: inline-flex;">
65-
<span class="download" v-i18n="'Download'" style="margin-left:0;"></span>
66-
<img class="download"
67-
src="img/Excel.svg"
68-
height="16"
69-
width="16"
70-
alt="Download to Excel"
71-
title="Download to Excel"
72-
data-export-excel-selector="table"
73-
data-export-file-name="[[Search]].xlsx"
74-
v-i18n-attr="'alt, title, data-export-file-name'">
75-
<img class="download"
76-
src="img/CSV.svg"
77-
height="16"
78-
width="16"
79-
alt="Download to CSV"
80-
title="Download to CSV"
81-
data-export-csv-selector="table"
82-
data-export-file-name="[[Search]].csv"
83-
v-i18n-attr="'alt, title, data-export-file-name'">
65+
<div data-template-id="download-links"></div>
8466
</nav>
8567
</div>
8668

‎examples/places-demo-vue.htm‎

Lines changed: 45 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@
2424
model after the JSON service downloads the data. In some pages defining dynamic
2525
properties may not be needed however it is recommended when using Vue to
2626
avoid unexpected rendering issues.
27+
28+
[data-file-name] is used with [id="download-links"] which is defined
29+
later on this page.
2730
-->
2831

2932
<script
@@ -34,7 +37,8 @@
3437
data-page="jsonData"
3538
data-url="https://www.dataformsjs.com/data/geonames/countries"
3639
data-load-only-once
37-
data-countries>
40+
data-countries
41+
data-file-name="Countries">
3842

3943
<h3 v-if="isLoading" v-i18n="'Loading...'"></h3>
4044
<p v-if="hasError"><span v-i18n="'Error'"></span> - {{ errorMessage }}</p>
@@ -44,27 +48,7 @@ <h1 v-i18n="'Countries'"></h1>
4448
<nav>
4549
<a v-bind:href="'#/' + i18n_Locale + '/search'" v-i18n="'Search'"></a>
4650
<a v-bind:href="'#/' + i18n_Locale + '/info'" v-i18n="'Info'"></a>
47-
<div class="download-links ml-20">
48-
<span class="download" v-i18n="'Download'"></span>
49-
<img class="download"
50-
src="img/Excel.svg"
51-
height="16"
52-
width="16"
53-
alt="Download to Excel"
54-
title="Download to Excel"
55-
data-export-excel-selector="table"
56-
data-export-file-name="[[Countries]].xlsx"
57-
v-i18n-attr="'alt, title, data-export-file-name'">
58-
<img class="download"
59-
src="img/CSV.svg"
60-
height="16"
61-
width="16"
62-
alt="Download to CSV"
63-
title="Download to CSV"
64-
data-export-csv-selector="table"
65-
data-export-file-name="[[Countries]].csv"
66-
v-i18n-attr="'alt, title, data-export-file-name'">
67-
</div>
51+
<div class="ml-20" data-template-id="download-links"></div>
6852
</nav>
6953

7054
<input
@@ -101,6 +85,41 @@ <h1 v-i18n="'Countries'"></h1>
10185
</div>
10286
</script>
10387

88+
<!--
89+
This is an HTML Control which is similar in concept to a Vue or React Component.
90+
This control ends up being included when [data-template-id="download-links"]
91+
is used on the page's HTML.
92+
93+
How it works is DataFormsJS will render all HTML Controls prior to setting
94+
up Vue for the page. [v-bind:data-export-file-name] then uses the attribute
95+
[data-file-name] which is defined on the route to set the attribute value.
96+
97+
Then the DataFormsJS plugin [i18n] handles [v-i18n-attr] to set the value
98+
to the users selected langue. Additionally plugins [exportToExcel, exportToCsv]
99+
are used with this content and set once the page is rendered.
100+
-->
101+
<script type="text/x-template" data-engine="vue" id="download-links">
102+
<span class="download" v-i18n="'Download'"></span>
103+
<img class="download"
104+
src="img/Excel.svg"
105+
height="16"
106+
width="16"
107+
alt="Download to Excel"
108+
title="Download to Excel"
109+
data-export-excel-selector="table"
110+
v-bind:data-export-file-name="'[[' + fileName + ']].xlsx'"
111+
v-i18n-attr="'alt, title, data-export-file-name'">
112+
<img class="download"
113+
src="img/CSV.svg"
114+
height="16"
115+
width="16"
116+
alt="Download to CSV"
117+
title="Download to CSV"
118+
data-export-csv-selector="table"
119+
v-bind:data-export-file-name="'[[' + fileName + ']].csv'"
120+
v-i18n-attr="'alt, title, data-export-file-name'">
121+
</script>
122+
104123
<script
105124
type="text/x-template"
106125
data-engine="vue"
@@ -109,6 +128,7 @@ <h1 v-i18n="'Countries'"></h1>
109128
data-url="https://www.dataformsjs.com/data/geonames/regions/:country"
110129
data-load-only-once
111130
data-regions
131+
data-file-name="Regions"
112132
src="html/regions-vue.htm">
113133
</script>
114134

@@ -120,6 +140,7 @@ <h1 v-i18n="'Countries'"></h1>
120140
data-url="https://www.dataformsjs.com/data/geonames/cities/:country/:region"
121141
data-load-only-once
122142
data-cities
143+
data-file-name="Cities"
123144
src="html/cities-vue.htm">
124145
</script>
125146

@@ -151,6 +172,7 @@ <h1 v-i18n="'Countries'"></h1>
151172
data-lazy-load="json_data, keydownAction, chosen, chosenPlugin"
152173
data-countries="null"
153174
data-cities="null"
175+
data-file-name="Search"
154176
src="html/search-places-vue.htm">
155177
</script>
156178

@@ -205,7 +227,7 @@ <h1 v-i18n="'Countries'"></h1>
205227
],
206228
chosenPlugin: [
207229
// For this demo the [dataBind] plugin is loaded before [chosen]
208-
// to make sure that the <select> value will be set before the choosen
230+
// to make sure that the <select> value will be set before the chosen
209231
// control is created. Otherwise the following jQuery code would have
210232
// to be called to trigger the update.
211233
// $('.chosen-select').trigger('chosen:updated');

0 commit comments

Comments
 (0)