Framework7-Vue SmartSelect

SmartSelect issue

by Sebastien Cramatte

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/framework7.bundle.min.css">
<script src="https://unpkg.com/[email protected]/framework7-vue.bundle.min.js"></script>
<div id="app">
  <f7-app :params="f7params">
    <!-- Statusbar -->
    <f7-statusbar></f7-statusbar>

    <!-- Main View -->
    <f7-view id="main-view" main>
      <f7-page>
        <f7-navbar>
          <f7-nav-left>
          </f7-nav-left>
          <f7-nav-title>App</f7-nav-title>
          <f7-nav-right>
          </f7-nav-right>
        </f7-navbar>
        
        <f7-popup class="popup view-init">
          <f7-page>
            <f7-list>          
              <f7-list-item
                  smart-select
                  :smart-select-params="{
                    valueEl: '.item-title > span',
                    routableModals: false
                  }"
                > 
                  <span slot="header">requester</span>
                  <span slot="title">...</span>
                  <select>
                    <option value="apple" selected>Apple</option>
                    <option value="pineapple">Pineapple</option>
                    <option value="pear">Pear</option>
                    <option value="orange">Orange</option>
                    <option value="melon">Melon</option>
                    <option value="peach">Peach</option>
                    <option value="banana">Banana</option>
                    <!--option value="item.value" v-for="(item, index) in vlData.items">{{ item.title }}</option-->
                  </select>
                </f7-list-item>
              </f7-list>
            </f7-page>
         </f7-popup>

 
        <f7-block>
          <!--pre v-html="prettyJSON(list)"></pre-->
          <f7-link popup-open=".popup">popup</f7-link>
        </f7-block>
     ...

CSS

pre {
	overflow: auto;
}
	pre .string { color: #885800; }
	pre .number { color: blue; }
	pre .boolean { color: magenta; }
	pre .null { color: red; }
  pre .key { color: green; }

JavaScript

// Init F7 Vue Plugin
Framework7.use(Framework7Vue)
    
// Init App
new Vue({
  el: '#app',
  methods: {
    prettyJSON: function (json) {
        if (json) {
            json = JSON.stringify(json, undefined, 4)
            json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g, function (match) {
            var cls = 'number'
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                cls = 'key'
                } else {
                cls = 'string'
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean'
            } else if (/null/.test(match)) {
                cls = 'null'
            }
            return '<span class="' + cls + '">' + match + '</span>'
            })
        }
    }
  },
  data() {
  	return {
		  list: [
      ],
    	f7params: {
      	root: '#app', // App root element
        id: 'io.framework7.testapp', // App bundle ID
        name: 'Framework7', // App name
        theme: 'auto', // Automatic theme detection
        routes: [
        ],
        swipeout: {
    		  removeElements: false
  			}
      }
    }
  },
});