framework7-cli
Version:
Framework7 command line utility (CLI)
217 lines (201 loc) • 7.32 kB
JavaScript
const indent = require('../../utils/indent');
const templateIf = require('../../utils/template-if');
const appParameters = require('../app-parameters');
module.exports = (options) => {
const {
template,
type,
customBuild,
} = options;
// Panels
const leftPanelPlain = indent(6, `
<!-- Left panel with cover effect-->
<f7-panel left cover dark>
<f7-view>
<f7-page>
<f7-navbar title="Left Panel"></f7-navbar>
<f7-block>Left panel content goes here</f7-block>
</f7-page>
</f7-view>
</f7-panel>
`);
const leftPanelWithView = indent(6, `
<!-- Left panel with cover effect when hidden -->
<f7-panel left cover dark :visible-breakpoint="960">
<f7-view>
<f7-page>
<f7-navbar title="Left Panel"></f7-navbar>
<f7-block-title>Left View Navigation</f7-block-title>
<f7-list>
<f7-list-item link="/left-page-1/" title="Left Page 1"></f7-list-item>
<f7-list-item link="/left-page-2/" title="Left Page 2"></f7-list-item>
</f7-list>
<f7-block-title>Control Main View</f7-block-title>
<f7-list>
<f7-list-item link="/about/" view=".view-main" panel-close title="About"></f7-list-item>
<f7-list-item link="/form/" view=".view-main" panel-close title="Form"></f7-list-item>
<f7-list-item link="#" view=".view-main" back panel-close title="Back in history"></f7-list-item>
</f7-list>
</f7-page>
</f7-view>
</f7-panel>
`);
const leftPanel = template === 'split-view' ? leftPanelWithView : leftPanelPlain;
const rightPanel = indent(6, `
<!-- Right panel with reveal effect-->
<f7-panel right reveal dark>
<f7-view>
<f7-page>
<f7-navbar title="Right Panel"></f7-navbar>
<f7-block>Right panel content goes here</f7-block>
</f7-page>
</f7-view>
</f7-panel>
`);
// Views
let views = '';
if (template === 'single-view' || template === 'split-view' || template === 'blank') {
views = indent(6, `
<!-- Your main view, should have "view-main" class -->
<f7-view main class="safe-areas" url="/"></f7-view>
`);
}
if (template === 'tabs') {
views = indent(6, `
<!-- Views/Tabs container -->
<f7-views tabs class="safe-areas">
<!-- Tabbar for switching views-tabs -->
<f7-toolbar tabbar icons bottom>
<f7-toolbar-pane>
<f7-link tab-link="#view-home" tab-link-active icon-ios="f7:house_fill" icon-md="material:home" text="Home"></f7-link>
<f7-link tab-link="#view-catalog" icon-ios="f7:square_list_fill" icon-md="material:view_list" text="Catalog"></f7-link>
<f7-link tab-link="#view-settings" icon-ios="f7:gear" icon-md="material:settings" text="Settings"></f7-link>
</f7-toolbar-pane>
</f7-toolbar>
<!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
<f7-view id="view-home" main tab tab-active url="/"></f7-view>
<!-- Catalog View -->
<f7-view id="view-catalog" name="catalog" tab url="/catalog/"></f7-view>
<!-- Settings View -->
<f7-view id="view-settings" name="settings" tab url="/settings/"></f7-view>
</f7-views>
`);
}
return indent(0, `
<template>
${template === 'blank' ? `
<f7-app v-bind="f7params">
${views}
</f7-app>
`.trim() : `
<f7-app v-bind="f7params">
${leftPanel}
${rightPanel}
${views}
<!-- Popup -->
<f7-popup id="my-popup">
<f7-view>
<f7-page>
<f7-navbar title="Popup">
<f7-nav-right>
<f7-link popup-close>Close</f7-link>
</f7-nav-right>
</f7-navbar>
<f7-block>
<p>Popup content goes here.</p>
</f7-block>
</f7-page>
</f7-view>
</f7-popup>
<f7-login-screen id="my-login-screen">
<f7-view>
<f7-page login-screen>
<f7-login-screen-title>Login</f7-login-screen-title>
<f7-list form>
<f7-list-input
type="text"
name="username"
placeholder="Your username"
v-model:value="username"
></f7-list-input>
<f7-list-input
type="password"
name="password"
placeholder="Your password"
v-model:value="password"
></f7-list-input>
</f7-list>
<f7-list>
<f7-list-button title="Sign In" @click="alertLoginData"></f7-list-button>
<f7-block-footer>
Some text about login information.<br>Click "Sign In" to close Login Screen
</f7-block-footer>
</f7-list>
</f7-page>
</f7-view>
</f7-login-screen>
</f7-app>
`.trim()}
</template>
<script>
import { ref, onMounted } from 'vue';
import { f7, f7ready } from 'framework7-vue';
${templateIf(type.indexOf('cordova') >= 0, () => `
import { getDevice } from '${customBuild ? '../js/framework7-custom.js' : 'framework7/lite-bundle'}';
import cordovaApp from '../js/cordova-app.js';
`)}
${templateIf(type.indexOf('capacitor') >= 0, () => `
import { getDevice } from '${customBuild ? '../js/framework7-custom.js' : 'framework7/lite-bundle'}';
import capacitorApp from '../js/capacitor-app.js';
`)}
import routes from '../js/routes.js';
import store from '../js/store';
export default {
setup() {
${templateIf(type.indexOf('cordova') >= 0 || type.indexOf('capacitor') >= 0, () => `
const device = getDevice();
`)}
// Framework7 Parameters
const f7params = {
${indent(12, appParameters(options)).trim()}
};
${templateIf(template !== 'blank', () => `
// Login screen data
const username = ref('');
const password = ref('');
const alertLoginData = () => {
f7.dialog.alert('Username: ' + username.value + '<br>Password: ' + password.value, () => {
f7.loginScreen.close();
});
}
`)}
onMounted(() => {
f7ready(() => {
${templateIf(type.indexOf('cordova') >= 0, () => `
// Init cordova APIs (see cordova-app.js)
if (device.cordova) {
cordovaApp.init(f7);
}
`)}
${templateIf(type.indexOf('capacitor') >= 0, () => `
// Init capacitor APIs (see capacitor-app.js)
if (device.capacitor) {
capacitorApp.init(f7);
}
`)}
// Call F7 APIs here
});
});
return {
f7params,
${templateIf(template !== 'blank', () => `
username,
password,
alertLoginData
`)}
}
}
}
</script>
`).trim();
};