F7-V5 + Vue + Smartselect Float Label

by Maiki Nahara

HTML

<link rel="stylesheet" href="https://unpkg.com/framework7/css/framework7.bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/framework7/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="Smartselect Float Label"></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>
    <div class='list'>
      <ul class=''>
        <li class="ss-smart-select-container v2" :class="{'disabled': preventOpen}">
          <div class="item-content item-title item-floating-label" v-show="params.itemTitle"><label :style="{'font-size': labelFontSize}">
              <div class="icon-container" v-if="icon"><i :class="icon"></i></div>{{params.itemTitle}}<span class="required" v-show="required"> *</span>
            </label></div><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="multiple">
              <option value="-1" selected="selected" v-if="!multiple">{{params.defaultOption || 'Seleccione'}}</option>
            ...

CSS

.v2 .icon-container {
  display: inline-block;
  margin-right: 15px;
}

.v2 .item-title {
  display: none;
}
.v2 .item-title.item-floating-label {
  display: block  
}

.v2 .item-title.multiple {
  display: block;
}

.v2 .item-after {
  margin: 0;
}

.v2 .item-inner:before {
  content: 'chevron_down' !important;
}

.v2 .no-padding-left {
  padding-left: 0px;
}

JavaScript

// Init F7 Vue Plugin
Framework7.use(Framework7Vue);

// Init Page Components
Vue.component('page1', {
  template: '#page1',
  props: {
    params: {
      type: Object,
      required: true,
      default: {
        itemTitle: 'Float label SS'
      }
    },
    preventOpen: {
      type: Boolean,
      required: false,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    searchbar: {
      type: Boolean,
      required: false,
      default: false
    },
    labelFontSize: {
      type: String,
      required: false,
      default: () => '12px'
    },
    selectedValue: {
      required: false,
      default: 1
    },
    searchbarPlaceholder: {
      type: String,
      required: false,
      default: () => ''
    },
    multiple: {
      type: Boolean,
      required: false,
      default: false
    },
    maxlength: {
      type: Number,
      required: false,
      default: 5
    },
    icon: {
      type: String,
      required: false,
      default: () => ''
    },
    data: {
      required: true,
      default: [{
        id: 1,
        desc: 'item 1'
      }, {
        id: 2,
        desc: 'item 2'
      }, {
        id: 3,
        desc: 'item 3'
      }, {
        id: 3,
        desc: 'item 3'
      }]
    },
    noPaddingLeft: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      genericName: 'someName',
      smartSelect: null
    }
  },
  mounted() {
    let vm = this
    this.smartSelect = this.$f7.smartSelect.create({
      el: '.ss-smart-select-' + vm.genericName,
      pageTitle: this.params.pageTitle || 'Seleccione Opción',
      openIn: this.params.openIn || 'sheet',
      sheetCloseLinkText: this.params.sheetCloseLinkText || 'Ok',
      closeOnSelect: this.params.closeOnSelect || true,
      virtualList: this.params.virtualList || false,
      virtualListHeight: this.params.virtualListHeight || 44,
      searchbar: this.params.searchbar,
     ...