F7-V4 + Vue Starter

by Maiki Nahara

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.2.2/css/framework7.bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.2.2/js/framework7.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/framework7-vue.bundle.min.js"></script>
<div id="app">
  <f7-app :params="f7params">
    <f7-statusbar></f7-statusbar>

    <!-- Main View -->
    <f7-view id="main-view" main class="safe-areas">
      <f7-page>
        <f7-navbar>
          <f7-nav-left>
            <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="left"></f7-link>
          </f7-nav-left>
          <f7-nav-title>My App</f7-nav-title>
          <f7-nav-right>
            <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="right"></f7-link>
          </f7-nav-right>
        </f7-navbar>
        <f7-list>
          <f7-list-item link="/page1/" title="Page 1"></f7-list-item>
          <f7-list-item link="/page2/" title="SmartSelect Test"></f7-list-item>
        </f7-list>
      </f7-page>
    </f7-view>
  </f7-app>
</div>

<!-- Page 1 Template -->
<template id="page1">
    <f7-page>
      <f7-navbar title="Page 1" back-link="Back"></f7-navbar>
       <f7-toolbar position='bottom'>
        <f7-link href='/page1/'>To Page 1</f7-link>
        <f7-link href='/page2/'>To Page 2</f7-link>
      </f7-toolbar>
      <f7-block-title>History: </f7-block-title>
      <h3>{{$f7.view.main.router.history}}</h3>
    </f7-page>
  </template>

<!-- Page 2 Template -->
<template id="page2">
    <f7-page>
      <f7-navbar title="Page 2" back-link="Back"></f7-navbar>
      <f7-toolbar position='bottom'>
        <f7-link href='/page1/'>To Page 1</f7-link>
        <f7-link href='/page2/'>To Page 2</f7-link>
      </f7-toolbar>
      <div class='list'>
        <ul>
          <my-smart :params='ss1' :data='ssData'></my-smart>
          <my-smart...

SCSS

.v2 {
  .item-title {
    display: none;
  }
  .item-after {
    margin: 0;
  }
  .item-inner::before {
    content: 'chevron_down' !important;
  }
}

JavaScript

// Init F7 Vue Plugin
Framework7.use(Framework7Vue);
/*
          <li>
  <!-- Add smart-select-init class -->
  <a href="#" class="item-link smart-select smart-select-init">
    <!-- select -->
    <select name="fruits">
      <option value="apple" selected>Apple</option>
      <option value="pineapple">Pineapple</option>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Fruit</div>
        <div class="item-after">Apple</div>
      </div>
    </div>
  </a>
</li>
*/
Vue.component('my-smart', {
  template: `
<li class="ss-smart-select-container v2">
	<div class='item-content'></div>
      <label> {{params.itemTitle}} </label>
<a class="item-link smart-select" href="#" :id="params.name || genericName" :class="'ss-smart-select-' + genericName">
    <select :id="params.name || genericName" disabled="disabled" :name="params.name || genericName" :multiple="params.multiple || false" :maxlength="params.maxlength || 999">
      <option value="-1" disabled="disabled" selected="selected">{{params.defaultOption || 'Select'}}</option>
      <option v-for="item in data" :value="item[params.idKey || 'id']" :key="item[params.idKey || 'id']" :disabled="item.disabled || false">{{item[[params.descKey || "desc"]]}}</option>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">{{params.itemTitle || 'Loading...'}}</div>
      </div>
    </div>
  </a>
</li>
  `,
  props: {
    params: {
      type: Object,
      required: true
    },
    data: {
      required: true
    }
  },
  data() {
    return {
      smartSelect: null,
      genericName: this.$f7.utils.id()
    }
  },
  mounted() {
    let vm = this
    this.smartSelect = this.$f7.smartSelect.create({
      el: '.ss-smart-select-' + this.genericName,
      pageTitle: this.params.pageTitle || 'Select',
      openIn: this.params.openIn || 'sheet',
      sheetCloseLinkText: this.params.sheetCloseLinkText || 'Ok',
     ...