Skip to content

Commit 8c5a73c

Browse files
nolimits4webnolimits4web
committed
feat(vue): update all Vue demos
1 parent 917590d commit 8c5a73c

108 files changed

Lines changed: 981 additions & 2048 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎kitchen-sink/vue/src/pages/404.vue‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<f7-page>
3-
<f7-navbar title="Not found" back-link="Back"></f7-navbar>
3+
<f7-navbar title="Not found" back-link></f7-navbar>
44
<f7-block>
55
<p>Sorry</p>
66
<p>Requested content not found.</p>
@@ -11,11 +11,5 @@
1111
<script>
1212
import { f7Page, f7Navbar, f7Block } from 'framework7-vue';
1313
14-
export default {
15-
components: {
16-
f7Page,
17-
f7Navbar,
18-
f7Block,
19-
},
20-
};
14+
export default { components: { f7Page, f7Navbar, f7Block } };
2115
</script>

‎kitchen-sink/vue/src/pages/about.vue‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
back-link="Framework7"
99
></f7-navbar>
1010
<f7-block-title medium>Welcome to Framework7</f7-block-title>
11-
<f7-block strong-ios outline-ios>
11+
<f7-block strong inset>
1212
<p>
1313
Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps
1414
or web apps with iOS or Android (Material) native look and feel. It is also an indispensable
@@ -36,12 +36,5 @@
3636
<script>
3737
import { f7Page, f7Navbar, f7BlockTitle, f7Block } from 'framework7-vue';
3838
39-
export default {
40-
components: {
41-
f7Page,
42-
f7Navbar,
43-
f7BlockTitle,
44-
f7Block,
45-
},
46-
};
39+
export default { components: { f7Page, f7Navbar, f7BlockTitle, f7Block } };
4740
</script>

‎kitchen-sink/vue/src/pages/accordion.vue‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<f7-page>
3-
<f7-navbar title="Accordion" back-link="Back"></f7-navbar>
3+
<f7-navbar title="Accordion" back-link></f7-navbar>
44

55
<f7-block-title>List View Accordion</f7-block-title>
6-
<f7-list strong outline-ios dividers-ios inset-md accordion-list>
6+
<f7-list strong dividers-ios inset accordion-list>
77
<f7-list-item accordion-item title="Lorem Ipsum">
88
<f7-accordion-content>
99
<f7-block>
@@ -43,7 +43,7 @@
4343
</f7-list>
4444

4545
<f7-block-title>Opposite Side</f7-block-title>
46-
<f7-list strong outline-ios dividers-ios inset-md accordion-list accordion-opposite>
46+
<f7-list strong dividers-ios inset accordion-list accordion-opposite>
4747
<f7-list-item accordion-item title="Lorem Ipsum">
4848
<f7-accordion-content>
4949
<f7-block>
@@ -95,14 +95,6 @@ import {
9595
} from 'framework7-vue';
9696
9797
export default {
98-
components: {
99-
f7Navbar,
100-
f7Page,
101-
f7BlockTitle,
102-
f7Block,
103-
f7AccordionContent,
104-
f7List,
105-
f7ListItem,
106-
},
98+
components: { f7Navbar, f7Page, f7BlockTitle, f7Block, f7AccordionContent, f7List, f7ListItem },
10799
};
108100
</script>

‎kitchen-sink/vue/src/pages/action-sheet.vue‎

Lines changed: 13 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<template>
22
<f7-page @page:beforeremove="onPageBeforeRemove">
3-
<f7-navbar title="Action Sheet" back-link="Back"></f7-navbar>
3+
<f7-navbar title="Action Sheet" back-link></f7-navbar>
44
<f7-block strong inset>
55
<p class="grid grid-cols-2 grid-gap">
66
<!-- One group, open by direct accessing instance .open() method -->
7-
<f7-button fill actions-open="#actions-one-group">One group</f7-button>
7+
<f7-button fill round actions-open="#actions-one-group">One group</f7-button>
88
<!-- Two groups, open by "actions-open" attribute -->
9-
<f7-button fill actions-open="#actions-two-groups">Two groups</f7-button>
9+
<f7-button fill round actions-open="#actions-two-groups">Two groups</f7-button>
1010
</p>
1111
<p>
1212
<!-- Actions Grid, open by changing actionGridOpened prop -->
13-
<f7-button fill @click="actionGridOpened = true">Action Grid</f7-button>
13+
<f7-button fill round @click="actionGridOpened = true">Action Grid</f7-button>
1414
</p>
1515
</f7-block>
1616

@@ -20,6 +20,9 @@
2020
Action Sheet can be automatically converted to Popover (for tablets). This button will open
2121
Popover on tablets and Action Sheet on phones:
2222
<f7-button
23+
small
24+
round
25+
fill
2326
style="display: inline-block"
2427
class="button-to-popover"
2528
@click="openActionsPopover"
@@ -145,35 +148,20 @@ export default {
145148
f7ActionsLabel,
146149
f7ActionsButton,
147150
},
148-
props: {
149-
id: String,
150-
},
151+
props: { id: String },
151152
data() {
152-
return {
153-
actionGridOpened: false,
154-
};
153+
return { actionGridOpened: false };
155154
},
156155
methods: {
157156
openActionsPopover() {
158157
const self = this;
159158
if (!self.actionsToPopover) {
160159
self.actionsToPopover = f7.actions.create({
161160
buttons: [
162-
{
163-
text: 'Do something',
164-
label: true,
165-
},
166-
{
167-
text: 'Button 1',
168-
strong: true,
169-
},
170-
{
171-
text: 'Button 2',
172-
},
173-
{
174-
text: 'Cancel',
175-
color: 'red',
176-
},
161+
{ text: 'Do something', label: true },
162+
{ text: 'Button 1', strong: true },
163+
{ text: 'Button 2' },
164+
{ text: 'Cancel', color: 'red' },
177165
],
178166
// Need to specify popover target
179167
targetEl: self.$el.querySelector('.button-to-popover'),

‎kitchen-sink/vue/src/pages/area-chart.vue‎

Lines changed: 24 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,51 @@
11
<template>
22
<f7-page>
3-
<f7-navbar title="Area Chart" back-link="Back" />
4-
<f7-block strong-ios outline-ios>
3+
<f7-navbar title="Area Chart" back-link />
4+
<f7-block strong inset>
55
<p>Framework7 comes with simple to use and fully responsive Area Chart component.</p>
66
<p>
77
Area Chart generates SVG layout which makes it also compatible with SSR (server side
88
rendering).
99
</p>
1010
</f7-block>
1111
<f7-block-title>Simple Area Chart</f7-block-title>
12-
<f7-block strong-ios outline-ios>
12+
<f7-block strong inset>
1313
<f7-area-chart
1414
:datasets="[
15-
{
16-
color: '#f00',
17-
values: [0, 100, 250, 300, 175, 400],
18-
},
19-
{
20-
color: '#00f',
21-
values: [100, 75, 133, 237, 40, 200],
22-
},
23-
{
24-
color: '#ff0',
25-
values: [100, 300, 127, 40, 250, 80],
26-
},
15+
{ color: '#f00', values: [0, 100, 250, 300, 175, 400] },
16+
{ color: '#00f', values: [100, 75, 133, 237, 40, 200] },
17+
{ color: '#ff0', values: [100, 300, 127, 40, 250, 80] },
2718
]"
2819
/>
2920
</f7-block>
3021
<f7-block-title>Area Chart With Tooltip</f7-block-title>
31-
<f7-block strong-ios outline-ios>
22+
<f7-block strong inset>
3223
<f7-area-chart
3324
tooltip
3425
:datasets="[
35-
{
36-
label: 'Red data',
37-
color: '#f00',
38-
values: [100, 75, 133, 237, 40, 200],
39-
},
40-
{
41-
label: 'Blue data',
42-
color: '#00f',
43-
values: [100, 300, 127, 40, 250, 80],
44-
},
45-
{
46-
label: 'Yellow data',
47-
color: '#ff0',
48-
values: [0, 100, 250, 300, 175, 400],
49-
},
26+
{ label: 'Red data', color: '#f00', values: [100, 75, 133, 237, 40, 200] },
27+
{ label: 'Blue data', color: '#00f', values: [100, 300, 127, 40, 250, 80] },
28+
{ label: 'Yellow data', color: '#ff0', values: [0, 100, 250, 300, 175, 400] },
5029
]"
5130
/>
5231
</f7-block>
5332
<f7-block-title>Area Chart With Axis</f7-block-title>
54-
<f7-block strong-ios outline-ios>
33+
<f7-block strong inset>
5534
<f7-area-chart
5635
tooltip
5736
axis
5837
:axis-labels="dates"
5938
:format-axis-label="(date) => axisDateFormat.format(date)"
6039
:format-tooltip-axis-label="(date) => tooltipDateFormat.format(date)"
6140
:datasets="[
62-
{
63-
label: 'Green data',
64-
color: '#0f0',
65-
values: [100, 75, 133, 237],
66-
},
67-
{
68-
label: 'Red data',
69-
color: '#f00',
70-
values: [100, 300, 127, 47],
71-
},
72-
{
73-
label: 'Yellow data',
74-
color: '#ff0',
75-
values: [0, 100, 250, 307],
76-
},
41+
{ label: 'Green data', color: '#0f0', values: [100, 75, 133, 237] },
42+
{ label: 'Red data', color: '#f00', values: [100, 300, 127, 47] },
43+
{ label: 'Yellow data', color: '#ff0', values: [0, 100, 250, 307] },
7744
]"
7845
/>
7946
</f7-block>
8047
<f7-block-title>Area Chart With Legend</f7-block-title>
81-
<f7-block strong-ios outline-ios>
48+
<f7-block strong inset>
8249
<f7-area-chart
8350
tooltip
8451
axis
@@ -88,26 +55,14 @@
8855
:format-axis-label="(date) => axisDateFormat.format(date)"
8956
:format-tooltip-axis-label="(date) => tooltipDateFormat.format(date)"
9057
:datasets="[
91-
{
92-
label: 'Red data',
93-
color: '#f00',
94-
values: [100, 300, 127, 47],
95-
},
96-
{
97-
label: 'Blue data',
98-
color: '#00f',
99-
values: [100, 75, 133, 237],
100-
},
101-
{
102-
label: 'Yellow data',
103-
color: '#ff0',
104-
values: [0, 100, 250, 307],
105-
},
58+
{ label: 'Red data', color: '#f00', values: [100, 300, 127, 47] },
59+
{ label: 'Blue data', color: '#00f', values: [100, 75, 133, 237] },
60+
{ label: 'Yellow data', color: '#ff0', values: [0, 100, 250, 307] },
10661
]"
10762
/>
10863
</f7-block>
10964
<f7-block-title>Lines Chart</f7-block-title>
110-
<f7-block strong-ios outline-ios>
65+
<f7-block strong inset>
11166
<f7-area-chart
11267
tooltip
11368
axis
@@ -118,21 +73,9 @@
11873
:format-axis-label="(date) => axisDateFormat.format(date)"
11974
:format-tooltip-axis-label="(date) => tooltipDateFormat.format(date)"
12075
:datasets="[
121-
{
122-
label: 'Red data',
123-
color: '#f00',
124-
values: [0, 300, 127, 47],
125-
},
126-
{
127-
label: 'Blue data',
128-
color: '#00f',
129-
values: [0, 75, 133, 237],
130-
},
131-
{
132-
label: 'Green data',
133-
color: '#0f0',
134-
values: [0, 100, 250, 307],
135-
},
76+
{ label: 'Red data', color: '#f00', values: [0, 300, 127, 47] },
77+
{ label: 'Blue data', color: '#00f', values: [0, 75, 133, 237] },
78+
{ label: 'Green data', color: '#0f0', values: [0, 100, 250, 307] },
13679
]"
13780
/>
13881
</f7-block>
@@ -142,13 +85,7 @@
14285
import { f7Page, f7Navbar, f7BlockTitle, f7Block, f7AreaChart } from 'framework7-vue';
14386
14487
export default {
145-
components: {
146-
f7Page,
147-
f7Navbar,
148-
f7BlockTitle,
149-
f7Block,
150-
f7AreaChart,
151-
},
88+
components: { f7Page, f7Navbar, f7BlockTitle, f7Block, f7AreaChart },
15289
setup() {
15390
// helpers data for axis
15491
const dates = [];
@@ -160,11 +97,7 @@ export default {
16097
}
16198
const axisDateFormat = Intl.DateTimeFormat(undefined, { month: 'short', year: 'numeric' });
16299
const tooltipDateFormat = Intl.DateTimeFormat(undefined, { month: 'long', year: 'numeric' });
163-
return {
164-
dates,
165-
axisDateFormat,
166-
tooltipDateFormat,
167-
};
100+
return { dates, axisDateFormat, tooltipDateFormat };
168101
},
169102
};
170103
</script>

0 commit comments

Comments
 (0)