ALVINN/ALVINN_f7
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

First commit

Browse Source
This commit is contained in:
Justin Georgi
2023-11-08 16:47:43 -07:00
commit f6ffb10c07
106 changed files with 19802 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/404.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<f7-page>
<f7-navbar title="Not found" back-link="Back"></f7-navbar>
<f7-block strong inset>
<p>Sorry</p>
<p>Requested content not found.</p>
</f7-block>
</f7-page>
</template>
<script>
export default {};
</script>

23
src/pages/about.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<f7-page name="about">
<f7-navbar title="About" back-link="Back"></f7-navbar>
<f7-block-title>About My App</f7-block-title>
<f7-block>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni molestiae laudantium
dignissimos est nobis delectus nemo ea alias voluptatum architecto, amet similique, saepe
iste consectetur in repellat ut minus quibusdam!
</p>
<p>
Molestias et distinctio porro nesciunt ratione similique, magni doloribus, rerum nobis,
aliquam quae reiciendis quasi modi. Nam a recusandae, fugiat in ea voluptates fuga eius,
velit corrupti reprehenderit dignissimos consequatur!
</p>
<p>
Blanditiis, cumque quo adipisci. Molestiae, dolores dolorum quos doloremque ipsa ullam
eligendi commodi deserunt doloribus inventore magni? Ea mollitia veniam nostrum nihil, iusto
doloribus a at! Ea molestiae ullam delectus!
</p>
</f7-block>
</f7-page>
</template>

40
src/pages/dynamic-route.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<f7-page>
<f7-navbar title="Dynamic Route" back-link="Back"></f7-navbar>
<f7-block strong inset>
<ul>
<li><b>Url:</b> {{ f7route.url }}</li>
<li><b>Path:</b> {{ f7route.path }}</li>
<li><b>Hash:</b> {{ f7route.hash }}</li>
<li>
<b>Params:</b>
<ul>
<li v-for="(value, key) in f7route.params" :key="key">
<b>{{ key }}:</b> {{ value }}
</li>
</ul>
</li>
<li>
<b>Query:</b>
<ul>
<li v-for="(value, key) in f7route.query" :key="key">
<b>{{ key }}:</b> {{ value }}
</li>
</ul>
</li>
<li><b>Route:</b> {{ f7route.route.path }}</li>
</ul>
</f7-block>
<f7-block strong inset>
<f7-link @click="f7router.back()">Go back via Router API</f7-link>
</f7-block>
</f7-page>
</template>
<script>
export default {
props: {
f7route: Object,
f7router: Object,
},
};
</script>

86
src/pages/form.vue Normal file
View File

@@ -0,0 +1,86 @@
<template>
<f7-page name="form">
<f7-navbar title="Form" back-link="Back"></f7-navbar>
<f7-block-title>Form Example</f7-block-title>
<f7-list strong-ios dividers-ios outline-ios>
<f7-list-input label="Name" type="text" placeholder="Your name"></f7-list-input>
<f7-list-input label="E-mail" type="email" placeholder="E-mail"></f7-list-input>
<f7-list-input label="URL" type="url" placeholder="URL"></f7-list-input>
<f7-list-input label="Password" type="password" placeholder="Password"></f7-list-input>
<f7-list-input label="Phone" type="tel" placeholder="Phone"></f7-list-input>
<f7-list-input label="Gender" type="select">
<option>Male</option>
<option>Female</option>
</f7-list-input>
<f7-list-input
label="Birth date"
type="date"
placeholder="Birth day"
defaultValue="2014-04-30"
></f7-list-input>
<f7-list-item title="Toggle">
<template #after>
<f7-toggle />
</template>
</f7-list-item>
<f7-list-input label="Range" :input="false">
<template #input>
<f7-range :value="50" :min="0" :max="100" :step="1" />
</template>
</f7-list-input>
<f7-list-input type="textarea" label="Textarea" placeholder="Bio"></f7-list-input>
<f7-list-input type="textarea" label="Resizable" placeholder="Bio" resizable></f7-list-input>
</f7-list>
<f7-block-title>Buttons</f7-block-title>
<f7-block strong-ios outline-ios class="grid grid-cols-2 grid-gap">
<f7-button>Button</f7-button>
<f7-button fill>Fill</f7-button>
<f7-button raised>Raised</f7-button>
<f7-button raised fill>Raised Fill</f7-button>
<f7-button round>Round</f7-button>
<f7-button round fill>Round Fill</f7-button>
<f7-button outline>Outline</f7-button>
<f7-button round outline>Outline Round</f7-button>
<f7-button small outline>Small</f7-button>
<f7-button small round outline>Small Round</f7-button>
<f7-button small fill>Small</f7-button>
<f7-button small round fill>Small Round</f7-button>
<f7-button large raised>Large</f7-button>
<f7-button large fill raised>Large Fill</f7-button>
<f7-button large fill raised color="red">Large Red</f7-button>
<f7-button large fill raised color="green">Large Green</f7-button>
</f7-block>
<f7-block-title>Checkbox group</f7-block-title>
<f7-list strong-ios outline-ios dividers-ios>
<f7-list-item checkbox name="my-checkbox" value="Books" title="Books"></f7-list-item>
<f7-list-item checkbox name="my-checkbox" value="Movies" title="Movies"></f7-list-item>
<f7-list-item checkbox name="my-checkbox" value="Food" title="Food"></f7-list-item>
</f7-list>
<f7-block-title>Radio buttons group</f7-block-title>
<f7-list strong-ios outline-ios dividers-ios>
<f7-list-item radio name="radio" value="Books" title="Books"></f7-list-item>
<f7-list-item radio name="radio" value="Movies" title="Movies"></f7-list-item>
<f7-list-item radio name="radio" value="Food" title="Food"></f7-list-item>
</f7-list>
</f7-page>
</template>

56
src/pages/home.vue Normal file
View File

@@ -0,0 +1,56 @@
<template>
<f7-page name="home">
<!-- Top Navbar -->
<f7-navbar large :sliding="false">
<f7-nav-left>
<f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
</f7-nav-left>
<f7-nav-title sliding>ALVINN</f7-nav-title>
<f7-nav-right>
<f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="right"></f7-link>
</f7-nav-right>
<f7-nav-title-large>ALVINN</f7-nav-title-large>
</f7-navbar>
<!-- Toolbar-->
<f7-toolbar bottom>
<f7-link>Left Link</f7-link>
<f7-link>Right Link</f7-link>
</f7-toolbar>
<!-- Page content-->
<f7-block>
<p>Here is your blank Framework7 app. Let's see what we have here.</p>
</f7-block>
<f7-block-title>Navigation</f7-block-title>
<f7-list strong inset dividersIos>
<f7-list-item link="/about/" title="About"></f7-list-item>
<f7-list-item link="/form/" title="Form"></f7-list-item>
</f7-list>
<f7-block-title>Modals</f7-block-title>
<f7-block class="grid grid-cols-2 grid-gap">
<f7-button fill popup-open="#my-popup">Popup</f7-button>
<f7-button fill login-screen-open="#my-login-screen">Login Screen</f7-button>
</f7-block>
<f7-block-title>Panels</f7-block-title>
<f7-block class="grid grid-cols-2 grid-gap">
<f7-button fill panel-open="left">Left Panel</f7-button>
<f7-button fill panel-open="right">Right Panel</f7-button>
</f7-block>
<f7-list strong inset dividersIos>
<f7-list-item
title="Dynamic (Component) Route"
link="/dynamic-route/blog/45/post/125/?foo=bar#about"
></f7-list-item>
<f7-list-item
title="Default Route (404)"
link="/load-something-that-doesnt-exist/"
></f7-list-item>
<f7-list-item
title="Request Data & Load"
link="/request-and-load/user/123456/"
></f7-list-item>
</f7-list>
</f7-page>
</template>

25
src/pages/request-and-load.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<f7-page>
<f7-navbar :title="`${user.firstName} ${user.lastName}`" back-link="Back"></f7-navbar>
<f7-block strong inset>
{{ user.about }}
</f7-block>
<f7-list strong inset dividers-ios>
<f7-list-item
v-for="(link, index) in user.links"
:key="index"
:link="link.url"
:title="link.title"
external
target="_blank"
></f7-list-item>
</f7-list>
</f7-page>
</template>
<script>
export default {
props: {
user: Object,
},
};
</script>