Lot of updates

.gitignore

@@ -5,6 +5,9 @@ node_modules/
 contribute/index.html
 docs/*.html
 docs-demos/*.html
+docs-demos/core/*.html
+docs-demos/react/*.html
+docs-demos/vue/*.html
 vue/*.html
 react/*.html
 plugins/index.html

gulpfile.js

@@ -14,8 +14,6 @@
   var iconsManifest = require('./icons/manifest-icons.json');
   var useCDN = true;
   var cdnPath = '//cdn.framework7.io';
-  // var processVuePugFiles = require('./src/react-doc-generation/vue-pug-file-processing').processVuePugFiles;
-  // var processReactHtmlFiles = require('./src/react-doc-generation/react-html-file-processing').processReactHtmlFiles;
   var pkg = require('./package.json');
 
   // Get src file url
@@ -29,15 +27,22 @@
   // Pug Filter
   pug.filters['code'] = function (text) {
     return text
-    .replace( /</g, '&lt;'   )
-    .replace( />/g, '&gt;'   )
+      .replace( /</g, '&lt;'   )
+      .replace( />/g, '&gt;'   )
   }
   // Pug YAML Data
   function getYamlData(ymlPath) {
     var doc = yaml.safeLoad(fs.readFileSync(`./src/pug/${ymlPath}`, 'utf8'));
     return doc;
   }
-
+  function loadVueExampleContent(filePath) {
+    var fileContent = fs.readFileSync(filePath, 'utf-8');
+    return fileContent
+      .replace( /<f7-navbar ([a-zA-Z "=]*) back-link="([a-zA-Z]*)"><\/f7-navbar>/g, '<f7-navbar $1></f7-navbar>')
+      .replace(/import {([^}]*)} from 'framework7-vue';\n\n([ ]*)/, '')
+      .replace(/import {([^}]*)} from 'framework7-vue';\n([ ]*)/, '')
+      .replace(/\n([ ]*)components: {([^}]*)},/, '')
+  }
   /* ==================================================================
   Check CDN
   ================================================================== */
@@ -64,34 +69,6 @@
       });
   });
 
-  /*
-  function buildReactPages(cb) {
-    checkIsLocal(process.argv.slice(3));
-    processVuePugFiles();
-    var time = Date.now();
-    console.log(`Starting react pug: all`);
-    gulp.src(['./react-pug-temp/*.pug'])
-      .pipe(gulpData(getSrcFileUrl))
-      .pipe(gulpPug({
-        pug,
-        pretty: true,
-        locals: {
-          cdn: useCDN ? cdnPath : '',
-          icons: iconsManifest.icons,
-          getYamlData,
-        }
-      }))
-      .on('error', (err) => {
-        console.log(err);
-      })
-      .pipe(gulp.dest('./react/'))
-      .on('end', () => {
-        console.log(`Finished react pug in ${Date.now() - time}ms`);
-        processReactHtmlFiles(cb);
-      });
-  }
-  */
-
   // All Pug Pages
   function buildPages(cb) {
     checkIsLocal(process.argv.slice(3));
@@ -107,6 +84,7 @@
           cdn: useCDN ? cdnPath : '',
           icons: iconsManifest.icons,
           getYamlData,
+          loadVueExampleContent,
         }
       }))
       .on('error', (err) => {
@@ -116,26 +94,13 @@
       .on('end', () => {
         console.log(`Finished pug all in ${Date.now() - time}ms`);
         if(cb) cb();
-        /*
-        buildReactPages(() => {
-          console.log(`Finished pug all in ${Date.now() - time}ms`);
-          if(cb) cb();
-        });
-        */
       });
 
   }
   gulp.task('pug', function (cb) {
     buildPages(cb);
   });
 
-  gulp.task('process-react-html', function (cb) {
-    processReactHtmlFiles(cb);
-  });
-
-  gulp.task('process-react-pug', function (cb) {
-    buildReactPages(cb);
-  });
 
   // Build All
   gulp.task('build', ['pug', 'less'], function (cb) {
@@ -157,7 +122,7 @@
       if (data.type !== 'changed') return;
       const filePath = data.path.split('/src/pug/')[1];
       if (filePath.indexOf('react') === 0) return;
-      if (filePath.indexOf('_') === 0) {
+      if (filePath.indexOf('_') === 0 || filePath.indexOf('_layout.pug') >= 0) {
         buildPages();
         return;
       }
@@ -179,6 +144,7 @@
             cdn: useCDN ? cdnPath : '',
             icons: iconsManifest.icons,
             getYamlData,
+            loadVueExampleContent,
           }
         }))
         .on('error', (err) => {

src/pug/_docs-vue-menu.pug

@@ -11,6 +11,8 @@ ul
     ul
       li
         a(href="introduction.html") Introduction
+      li
+        a(href="kitchen-sink.html") Kitchen Sink
       li
         a(href="installation.html") Installation
       li
@@ -26,6 +28,8 @@ ul
   li
     .title Vue Components
     ul
+      li
+        a(href="app.html") App
       li
         a(href="accordion.html") Accordion
       li
@@ -45,7 +49,9 @@ ul
       li
         a(href="contacts-list.html") Contacts List
       li
-        a(href="floating-action-button.html") Floating Action Button
+        a(href="floating-action-button.html") Floating Action Button / FAB
+      li
+        a(href="gauge.html") Gauge
       li
         a(href="grid.html") Grid / Layout Grid
       li

src/pug/_mixins.pug

@@ -40,12 +40,12 @@ mixin vueLinkIconProps
     td
     td Name of Ionicons font icon
   tr
-    td icon-if-ios
+    td icon-ios
     td string
     td
     td Icon to be used in case of iOS theme is used. Consists of icon family and icon name divided by colon, e.g. <code>f7:home</code> or <code>ion:home</code>
   tr
-    td icon-if-md
+    td icon-md
     td string
     td
     td Icon to be used in case of MD theme is used. Consists of icon family and icon name divided by colon, e.g. <code>material:home</code> or <code>fa:home</code>
@@ -55,6 +55,11 @@ mixin vueLinkRouterProps
     td string<br>boolean
     td #
     td URL of the page to load. In case of boolean <code>href="false"</code> it won't add <code>href</code> tag
+  tr
+    td target
+    td string
+    td
+    td Value of link target attribute, e.g. <code>_blank</code>, <code>_self</code>, etc.
   tr
     td view
     td string
@@ -187,3 +192,23 @@ mixin vueLinkActionsProps
     td string<br>boolean
     td
     td CSS selector of the Sortable list to toggle on click. Or boolean property to toggle currently opened/closed Sortable list
+  tr
+    td searchbar-enable
+    td string<br>boolean
+    td
+    td CSS selector of the Expandable Searchbar to be enabled on click. Or boolean property to enable the first found Searchbar
+  tr
+    td searchbar-disable
+    td string<br>boolean
+    td
+    td CSS selector of the Expandable Searchbar to be disabled on click. Or boolean property to disable the first found Searchbar
+  tr
+    td searchbar-toggle
+    td string<br>boolean
+    td
+    td CSS selector of the Expandable Searchbar to toggle on click. Or boolean property to toggle the first found Searchbar
+  tr
+    td searchbar-clear
+    td string<br>boolean
+    td
+    td CSS selector of the Expandable Searchbar to clear on click. Or boolean property to clear the first found Searchbar

src/pug/docs-demos/_layout.pug → src/pug/docs-demos/core/_layout.pug

@@ -7,17 +7,17 @@ html
     meta(name='apple-mobile-web-app-capable', content='yes')
     meta(name="apple-mobile-web-app-status-bar-style", content="black")
     title My App
-    link(rel="stylesheet", href="../packages/core/css/framework7.min.css")
+    link(rel="stylesheet", href="../../packages/core/css/framework7.min.css")
     if (includeF7Icons)
-      link(rel="stylesheet" href="../../../css/framework7-icons.css")
+      link(rel="stylesheet" href="../../css/framework7-icons.css")
     if (includeMaterialIcons)
       link(href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet")
   body
     #app
       block content
 
-    script(type="text/javascript", src="../packages/core/js/framework7.min.js")
+    script(type="text/javascript", src="../../packages/core/js/framework7.min.js")
     script.
       var theme = 'ios';
       if (location.href.indexOf('theme=md') >= 0) theme = 'md';

src/pug/docs-demos/vue/_layout.pug

@@ -0,0 +1,40 @@
+block vars
+doctype
+html
+  head
+    meta(charset="utf-8")
+    meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover")
+    meta(name='apple-mobile-web-app-capable', content='yes')
+    meta(name="apple-mobile-web-app-status-bar-style", content="black")
+    title My App
+    link(rel="stylesheet", href="../packages/core/css/framework7.min.css")
+    if (includeF7Icons)
+      link(rel="stylesheet" href="../../../css/framework7-icons.css")
+    if (includeMaterialIcons)
+      link(href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet")
+  body
+    #app
+      f7-app
+        block content
+
+    script(src="https://cdn.jsdelivr.net/npm/vue")
+    script(src="../packages/vue/framework7-vue.min.js")
+    script(src="../packages/core/js/framework7.min.js")
+    script.
+      if (Framework7.use) Framework7.use(Framework7Vue);
+      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(Framework7Vue);
+
+      var theme = 'ios';
+      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
+      var plugin = {
+        params: {
+          theme: theme,
+          root: '#app',
+        }
+      };
+
+      if (Framework7.use) Framework7.use(plugin);
+      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
+
+    block scripts

src/pug/docs-demos/vue/range-slider.pug

@@ -0,0 +1,81 @@
+extends _layout
+block vars
+  - includeF7Icons = true
+  - includeMaterialIcons = true
+block content
+  .view.view-main.view-init
+    .page
+      .navbar
+        .navbar-inner
+          .left
+          .title Range Slider
+          .right
+      .page-content
+        <div class="block-title">Volume</div>
+        <div class="list simple-list">
+          <ul>
+            <li>
+              <div class="item-cell width-auto flex-shrink-0">
+                <i class="icon f7-icons ios-only">volume_mute_fill</i>
+                <i class="icon material-icons md-only">volume_mute</i>
+              </div>
+              <div class="item-cell flex-shrink-3">
+                <div class="range-slider range-slider-init">
+                  <input type="range" min="0" max="100" step="1" value="10">
+                </div>
+              </div>
+              <div class="item-cell width-auto flex-shrink-0">
+                <i class="icon f7-icons ios-only">volume_fill</i>
+                <i class="icon material-icons md-only">volume_up</i>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="block-title">Brightness</div>
+        <div class="list simple-list">
+          <ul>
+            <li>
+              <div class="item-cell width-auto flex-shrink-0">
+                <i class="icon f7-icons ios-only">circle</i>
+                <i class="icon material-icons md-only">brightness_low</i>
+              </div>
+              <div class="item-cell flex-shrink-3">
+                <div class="range-slider range-slider-init color-orange" data-label="true">
+                  <input type="range" min="0" max="100" step="1" value="50">
+                </div>
+              </div>
+              <div class="item-cell width-auto flex-shrink-0">
+                <i class="icon f7-icons ios-only">circle_half</i>
+                <i class="icon material-icons md-only">brightness_high</i>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="block-title display-flex justify-content-space-between">Price Filter <span class="price-value">$200 - $400</span></div>
+        <div class="list simple-list">
+          <ul>
+            <li class="item-row">
+              <div class="item-cell width-auto flex-shrink-0">
+                <i class="icon f7-icons ios-only">money_dollar</i>
+                <i class="icon material-icons md-only">attach_money</i>
+              </div>
+              <div class="item-cell item-cell-shrink-3">
+                <div id="price-filter" class="range-slider range-slider-init color-green" data-label="true" data-dual="true" data-min="0" data-max="500" data-step="1" data-value-left="200" data-value-right="400"></div>
+              </div>
+              <div class="item-cell width-auto flex-shrink-0">
+                <i class="icon f7-icons ios-only">money_dollar_fill</i>
+                <i class="icon material-icons md-only">monetization_on</i>
+              </div>
+            </li>
+          </ul>
+        </div>
+block scripts
+  script.
+    var app = new Framework7();
+
+    var $$ = Dom7;
+
+    $$('#price-filter').on('range:change', function (e, range) {
+      $$('.price-value').text('$'+(range.value[0])+' - $'+(range.value[1]));
+    });
+

src/pug/docs/accordion.pug

@@ -80,7 +80,7 @@ block content
         |     </ul>
         | </div>
     .with-device
-      h2(data-device-preview="../docs-demos/accordion.html") Example
+      h2(data-device-preview="../docs-demos/core/accordion.html") Example
       pre
         code.xml
           | <!-- List View -->

src/pug/docs/action-sheet.pug

@@ -423,7 +423,7 @@ block content
           td actionsBeforeDestroy
           td <span>actions</span>
           td app
-    h2(data-device-preview="../docs-demos/action-sheet.html") Examples
+    h2(data-device-preview="../docs-demos/core/action-sheet.html") Examples
     .with-device
       pre
         code

src/pug/docs/autocomplete.pug

@@ -448,7 +448,7 @@ block content
           td autocompleteBeforeDestroy
           td app
     .with-device
-      h2(data-device-preview="../docs-demos/autocomplete.html") Examples
+      h2(data-device-preview="../docs-demos/core/autocomplete.html") Examples
       pre
         code.js
           :code

src/pug/docs/badge.pug

@@ -30,7 +30,7 @@ block content
           <!-- Red badge -->
           <span class="badge color-red">15</span>
     .with-device
-      h2(data-device-preview="../docs-demos/badge.html") Examples
+      h2(data-device-preview="../docs-demos/core/badge.html") Examples
       pre
         code.html
           :code