framework7-vue - npm Package Compare versions

Comparing version 3.4.0 to 3.4.2

components/input.js

@@ -5,2 +5,3 @@ import Utils from '../utils/utils';
 import F7Range from './range';
+import __vueComponentSetState from '../runtime-helpers/vue-component-set-state.js';
 import __vueComponentDispatchEvent from '../runtime-helpers/vue-component-dispatch-event.js';
@@ -54,2 +55,16 @@ import __vueComponentProps from '../runtime-helpers/vue-component-props.js';
 
+  data() {
+    const props = __vueComponentProps(this);
+
+    const state = (() => {
+      return {
+        inputFocused: false
+      };
+    })();
+
+    return {
+      state
+    };
+  },
+
   render() {
@@ -107,3 +122,9 @@ const _h = this.$createElement;
       const needsType = tag === 'input';
-      const inputClassName = Utils.classNames(type === 'textarea' && resizable && 'resizable', !wrap && className, (noFormStoreData || noStoreData || ignoreStoreData) && 'no-store-data', errorMessage && errorMessageForce && 'input-invalid');
+      const inputClassName = Utils.classNames(!wrap && className, {
+        resizable: type === 'textarea' && resizable,
+        'no-store-data': noFormStoreData || noStoreData || ignoreStoreData,
+        'input-invalid': errorMessage && errorMessageForce,
+        'input-with-value': typeof value === 'undefined' ? defaultValue || defaultValue === 0 : value || value === 0,
+        'input-focused': self.state.inputFocused
+      });
       let input;
@@ -361,2 +382,5 @@ {
       this.dispatchEvent('focus', event);
+      this.setState({
+        inputFocused: true
+      });
     },
@@ -366,2 +390,5 @@
       this.dispatchEvent('blur', event);
+      this.setState({
+        inputFocused: false
+      });
     },
@@ -375,2 +402,6 @@
       __vueComponentDispatchEvent(this, events, ...args);
+    },
+
+    setState(updater, callback) {
+      __vueComponentSetState(this, updater, callback);
     }
@@ -377,0 +408,0 @@

components/link.js

@@ -242,8 +242,2 @@ import Utils from '../utils/utils';
     onClick(event) {
-      const self = this;
-
-      if (self.props.smartSelect && self.f7SmartSelect) {
-        self.f7SmartSelect.open();
-      }
-
       this.dispatchEvent('click', event);
@@ -250,0 +244,0 @@ },

components/list-item-content.js

@@ -44,3 +44,5 @@ import Utils from '../utils/utils';
         hasInputInfo: false,
-        hasInputErrorMessage: false
+        hasInputErrorMessage: false,
+        hasInputValue: false,
+        hasInputFocused: false
       };
@@ -86,2 +88,4 @@ })();
     } = props;
+    const hasInputFocused = self.state.hasInputFocused;
+    let hasInputValue = self.state.hasInputValue;
     let hasInput = itemInput || self.state.hasInput;
@@ -139,2 +143,10 @@ let hasInlineLabel = inlineLabel || self.state.hasInlineLabel;
           if (child.data && child.data.errorMessage && child.data.errorMessageForce) hasInputErrorMessage = true;
+
+          if (child.data && (typeof child.data.value === 'undefined' ? child.data.defaultValue || child.data.defaultValue === 0 : child.data.value || child.data.value === 0)) {
+            hasInputValue = true;
+          } else if (child.componentOptions && child.componentOptions.propsData && (typeof child.componentOptions.propsData.value === 'undefined' ? child.componentOptions.propsData.defaultValue || child.componentOptions.propsData.defaultValue === 0 : child.componentOptions.propsData.value || child.componentOptions.propsData.value === 0)) {
+            hasInputValue = true;
+          } else {
+            hasInputValue = false;
+          }
         }
@@ -278,3 +290,5 @@
       'item-input-with-error-message': hasInputErrorMessage,
-      'item-input-invalid': hasInputErrorMessage
+      'item-input-invalid': hasInputErrorMessage,
+      'item-input-with-value': hasInputValue,
+      'item-input-focused': hasInputFocused
     }, Mixins.colorClasses(props));
@@ -298,2 +312,4 @@ return _h(ItemContentTag, {
     self.onChangeBound = self.onChange.bind(self);
+    self.onFocusBound = self.onFocus.bind(self);
+    self.onBlurBound = self.onBlur.bind(self);
   },
@@ -313,3 +329,4 @@
       innerEl,
-      inputEl
+      inputEl,
+      el
     } = self.$refs;
@@ -330,2 +347,7 @@
 
+    if (hasInput) {
+      el.addEventListener('focus', self.onFocusBound, true);
+      el.addEventListener('blur', self.onBlurBound, true);
+    }
+
     if (!self.hasInlineLabelSet && hasInlineLabel !== self.state.hasInlineLabel) {
@@ -396,3 +418,4 @@ self.setState({
     const {
-      inputEl
+      inputEl,
+      el
     } = self.$refs;
@@ -403,2 +426,7 @@
     }
+
+    if (self.state.hasInput) {
+      el.removeEventListener('focus', self.onFocusBound, true);
+      el.removeEventListener('blur', self.onBlurBound, true);
+    }
   },
@@ -465,2 +493,14 @@
 
+    onFocus() {
+      this.setState({
+        hasInputFocused: true
+      });
+    },
+
+    onBlur() {
+      this.setState({
+        hasInputFocused: false
+      });
+    },
+
     dispatchEvent(events, ...args) {
@@ -467,0 +507,0 @@ __vueComponentDispatchEvent(this, events, ...args);

components/page.js

 import Utils from '../utils/utils';
 import Mixins from '../utils/mixins';
 import F7PageContent from './page-content';
+import __vueComponentSetState from '../runtime-helpers/vue-component-set-state.js';
 import __vueComponentDispatchEvent from '../runtime-helpers/vue-component-dispatch-event.js';
@@ -12,4 +13,10 @@ import __vueComponentProps from '../runtime-helpers/vue-component-props.js';
     stacked: Boolean,
-    withSubnavbar: Boolean,
-    subnavbar: Boolean,
+    withSubnavbar: {
+      type: Boolean,
+      default: undefined
+    },
+    subnavbar: {
+      type: Boolean,
+      default: undefined
+    },
     noNavbar: Boolean,
@@ -48,3 +55,4 @@ noToolbar: Boolean,
       return {
-        hasSubnavbar: false
+        hasSubnavbar: false,
+        routerClasses: ''
       };
@@ -130,6 +138,7 @@ })();
 
-    const classes = Utils.classNames(className, 'page', {
+    const forceSubnavbar = typeof subnavbar === 'undefined' && typeof withSubnavbar === 'undefined' ? hasSubnavbar || this.state.hasSubnavbar : false;
+    const classes = Utils.classNames(className, 'page', this.state.routerClasses, {
       stacked,
       tabs,
-      'page-with-subnavbar': subnavbar || withSubnavbar || hasSubnavbar,
+      'page-with-subnavbar': subnavbar || withSubnavbar || forceSubnavbar,
       'no-navbar': noNavbar,
@@ -276,2 +285,15 @@ 'no-toolbar': noToolbar,
       const page = event.detail;
+      const {
+        withSubnavbar,
+        subnavbar
+      } = this.props;
+
+      if (typeof withSubnavbar === 'undefined' && typeof subnavbar === 'undefined') {
+        if (page.$navbarEl && page.$navbarEl.length && page.$navbarEl.find('.subnavbar').length || page.$el.children('.navbar').find('.subnavbar').length) {
+          this.setState({
+            hasSubnavbar: true
+          });
+        }
+      }
+
       this.dispatchEvent('page:init pageInit', event, page);
@@ -287,2 +309,15 @@ },
       const page = event.detail;
+
+      if (page.from === 'next') {
+        this.setState({
+          routerClasses: 'page-next'
+        });
+      }
+
+      if (page.from === 'previous') {
+        this.setState({
+          routerClasses: 'page-previous'
+        });
+      }
+
       this.dispatchEvent('page:beforein pageBeforeIn', event, page);
@@ -298,2 +333,15 @@ },
       const page = event.detail;
+
+      if (page.to === 'next') {
+        this.setState({
+          routerClasses: 'page-next'
+        });
+      }
+
+      if (page.to === 'previous') {
+        this.setState({
+          routerClasses: 'page-previous'
+        });
+      }
+
       this.dispatchEvent('page:afterout pageAfterOut', event, page);
@@ -304,2 +352,5 @@ },
       const page = event.detail;
+      this.setState({
+        routerClasses: 'page-current'
+      });
       this.dispatchEvent('page:afterin pageAfterIn', event, page);
@@ -315,2 +366,6 @@ },
       __vueComponentDispatchEvent(this, events, ...args);
+    },
+
+    setState(updater, callback) {
+      __vueComponentSetState(this, updater, callback);
     }
@@ -317,0 +372,0 @@

components/searchbar.js

@@ -41,2 +41,10 @@ import Utils from '../utils/utils';
     },
+    searchGroup: {
+      type: String,
+      default: '.list-group'
+    },
+    searchGroupTitle: {
+      type: String,
+      default: '.item-divider, .list-group-title'
+    },
     foundEl: {
@@ -177,2 +185,4 @@ type: [String, Object],
       searchItem,
+      searchGroup,
+      searchGroupTitle,
       hideOnEnableEl,
@@ -206,2 +216,4 @@ hideOnSearchEl,
         searchItem,
+        searchGroup,
+        searchGroupTitle,
         hideOnEnableEl,
@@ -208,0 +220,0 @@ hideOnSearchEl,

framework7-vue.d.ts

@@ -92,3 +92,3 @@ import Vue from 'vue';
 
-declare interface Framework7Extensions {
+export interface Framework7Extensions {
   /** Main Framework7's initialized instance. It allows you to use any of Framework7 APIs */
@@ -95,0 +95,0 @@ $f7: Framework7

framework7-vue.esm.bundle.d.ts

@@ -92,3 +92,3 @@ import Vue from 'vue';
 
-declare interface Framework7Extensions {
+export interface Framework7Extensions {
   /** Main Framework7's initialized instance. It allows you to use any of Framework7 APIs */
@@ -95,0 +95,0 @@ $f7: Framework7

framework7-vue.esm.bundle.js

 /**
- * Framework7 Vue 3.4.0
+ * Framework7 Vue 3.4.2
  * Build full featured iOS & Android apps using Framework7 & Vue
@@ -10,3 +10,3 @@ * http://framework7.io/vue/
  *
- * Released on: September 28, 2018
+ * Released on: October 12, 2018
  */
@@ -13,0 +13,0 @@ import Vue from 'vue';

framework7-vue.esm.d.ts

@@ -92,3 +92,3 @@ import Vue from 'vue';
 
-declare interface Framework7Extensions {
+export interface Framework7Extensions {
   /** Main Framework7's initialized instance. It allows you to use any of Framework7 APIs */
@@ -95,0 +95,0 @@ $f7: Framework7

framework7-vue.esm.js

 /**
- * Framework7 Vue 3.4.0
+ * Framework7 Vue 3.4.2
  * Build full featured iOS & Android apps using Framework7 & Vue
@@ -10,3 +10,3 @@ * http://framework7.io/vue/
  *
- * Released on: September 28, 2018
+ * Released on: October 12, 2018
  */
@@ -13,0 +13,0 @@

package.json

 {
   "name": "framework7-vue",
-  "version": "3.4.0",
+  "version": "3.4.2",
   "description": "Build full featured iOS & Android apps using Framework7 & Vue",
@@ -5,0 +5,0 @@ "main": "framework7-vue.js",

No alert changes

Improved metrics

Total package byte prevSize

1216034

increased by1.36%

Lines of code

19764

increased by1.22%

No dependency changes