nativescript-vue-fab - npm Package Compare versions

Comparing version 1.0.16 to 1.0.17

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [1.0.17](https://github.com/Akylas/nativescript-vue-fab/compare/v1.0.16...v1.0.17) (2020-04-09)
+
+**Note:** Version bump only for package nativescript-vue-fab
+
+
+
+
+
 ## [1.0.16](https://github.com/Akylas/nativescript-vue-fab/compare/v1.0.15...v1.0.16) (2019-08-02)
@@ -8,0 +16,0 @@

Fab.d.ts

@@ -6,13 +6,14 @@ import FabBase from './FabBase';
     position: string;
-    debug: boolean;
-    protected actualActive: boolean;
-    protected realActive: boolean;
+    orientation: string;
+    constructor();
     mounted(): void;
-    active: any;
-    readonly computedButttonClass: string;
-    readonly classBackdrop: "" | "fab-backdrop-show" | "fab-backdrop-hide" | "fab-backdrop-hidden";
-    readonly iconOnClass: string;
-    readonly iconOffClass: string;
+    set active(value: boolean);
+    get active(): boolean;
+    rPosition: string;
+    get isLeft(): boolean;
+    get isRight(): boolean;
+    get fabColumns(): "*,auto,auto" | "auto,auto,*";
+    get fabButtonCol(): 2 | 0;
     onButtonTap(args: any): void;
     onBackdropTap(args: any): void;
 }

FabBase.d.ts

 import Vue from 'nativescript-vue';
-import { View } from 'tns-core-modules/ui/page';
 export default abstract class FabBase extends Vue {
@@ -12,14 +11,4 @@ icon: string;
     iconClass?: string;
-    readonly actualBackgroundColor: any;
-    readonly actualRippleColor: any;
-    protected actualActive: boolean;
-    protected _readyToAnimate: boolean;
-    abstract position: string;
-    readonly isLeft: boolean;
-    readonly isRight: boolean;
     mounted(): void;
-    isReadyToAnimate(): boolean;
-    readonly button: View;
-    readonly titleLabel: View;
-    readonly computedTitleClass: string;
+    actualActive: boolean;
 }

FabItem.d.ts

 import Fab from './Fab';
 import FabBase from './FabBase';
 export default class FabItem extends FabBase {
-    debug: boolean;
-    indexInParent: number;
-    parentChildrenCount: number;
-    readonly parentFab: Fab;
-    readonly position: string;
+    index: number;
+    get parentFab(): Fab;
     mounted(): void;
-    readonly computedButttonClass: string;
-    visible: any;
+    get isRight(): boolean;
+    get position(): string;
+    get fabColumns(): "*,auto,auto" | "auto,auto,*";
+    get fabButtonCol(): 2 | 0;
+    get active(): boolean;
     onButtonTap(args: any): void;
 }

main.js

@@ -90,3 +90,3 @@ module.exports =
 
-/***/ "../node_modules/.registry.npmjs.org/babel-loader/8.0.6_@babel+core@7.5.5+webpack@4.39.1/node_modules/babel-loader/lib/index.js?!../node_modules/.registry.npmjs.org/string-replace-loader/2.2.0_webpack@4.39.1/node_modules/string-replace-loader/index.js?!../node_modules/.registry.npmjs.org/ts-loader/6.0.4_typescript@3.5.3/node_modules/ts-loader/index.js?!./Fab.ts?vue&type=script&lang=js&":
+/***/ "../node_modules/.pnpm/registry.npmjs.org/ts-loader/6.0.4_typescript@3.8.3/node_modules/ts-loader/index.js?!./Fab.ts?vue&type=script&lang=ts&":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -100,162 +100,113 @@
 /* harmony import */ var vue_property_decorator__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _FabItem__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("./FabItem.vue");
-/* harmony import */ var _FabBase__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("./FabBase.ts");
+/* harmony import */ var _FabBase__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("./FabBase.ts");
 
 
 
+var Fab = /** @class */ (function (_super) {
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Fab, _super);
+    function Fab() {
+        var _this = _super.call(this) || this;
+        _this.rPosition = 'right';
+        _this.actualActive = _this.isActive;
+        _this.rPosition = _this.position;
+        return _this;
+    }
+    Fab.prototype.mounted = function () {
+        _super.prototype.mounted.call(this);
+        this.nativeView.fabPosition = this.rPosition;
+        // this.nativeView.notify({
+        //     eventName: 'fabPositionChange',
+        //     object: this.nativeView,
+        //     propertyName: 'fabPosition',
+        //     value: this.rPosition,
+        // });
+    };
+    Object.defineProperty(Fab.prototype, "active", {
+        get: function () {
+            return this.actualActive;
+        },
+        set: function (value) {
+            if (value === this.actualActive) {
+                return;
+            }
+            this.actualActive = value;
+            if (this.nativeView) {
+                this.nativeView.active = value;
+                this.nativeView.notify({
+                    eventName: 'activeChange',
+                    object: this.nativeView,
+                    propertyName: 'active',
+                    value: value,
+                });
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Fab.prototype, "isLeft", {
+        get: function () {
+            return this.rPosition === 'left';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Fab.prototype, "isRight", {
+        get: function () {
+            return this.rPosition === 'right';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Fab.prototype, "fabColumns", {
+        get: function () {
+            return this.isRight ? '*,auto,auto' : 'auto,auto,*';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Fab.prototype, "fabButtonCol", {
+        get: function () {
+            return this.isRight ? 2 : 0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Fab.prototype.onButtonTap = function (args) {
+        args.active = this.active;
+        this.active = !this.active;
+        console.log('onButtonTap');
+        this.$emit('tap', args);
+    };
+    Fab.prototype.onBackdropTap = function (args) {
+        console.log('onBackdropTap');
+        this.active = false;
+    };
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__["Prop"])({ type: Boolean, default: false }),
+        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", Boolean)
+    ], Fab.prototype, "isActive", void 0);
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__["Prop"])({ type: String }),
+        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", String)
+    ], Fab.prototype, "iconOn", void 0);
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__["Prop"])({ type: String, default: 'right' }),
+        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", String)
+    ], Fab.prototype, "position", void 0);
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__["Prop"])({ type: String, default: 'vertical' }),
+        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", String)
+    ], Fab.prototype, "orientation", void 0);
+    Fab = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__["Component"])(),
+        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [])
+    ], Fab);
+    return Fab;
+}(_FabBase__WEBPACK_IMPORTED_MODULE_2__["default"]));
+/* harmony default export */ __webpack_exports__["default"] = (Fab);
 
 
-var Fab =
-/*@__PURE__*/
-function (_super) {
-  tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"](Fab, _super);
-
-  function Fab() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-
-    _this.actualActive = _this.isActive;
-    _this.realActive = _this.isActive;
-    return _this;
-  } // beforeMount() {
-  //     this._readyToAnimate = false;
-  //     console.log('fab beforeMount');
-  // }
-
-
-  Fab.prototype.mounted = function () {
-    _super.prototype.mounted.call(this); // console.log('fab mounted');
-
-  };
-
-  Object.defineProperty(Fab.prototype, "active", {
-    get: function get() {
-      return !!this.actualActive;
-    },
-    set: function set(value) {
-      var _this = this;
-
-      if (value === this.actualActive) {
-        return;
-      }
-
-      this.actualActive = value;
-      this.$children.forEach(function (c, i) {
-        if (c instanceof _FabItem__WEBPACK_IMPORTED_MODULE_2__["default"]) {
-          c.visible = value;
-        }
-      });
-
-      if (value) {
-        this.realActive = this.actualActive;
-      } else {
-        setTimeout(function () {
-          // animation duration
-          _this.realActive = _this.actualActive;
-        }, 250);
-      }
-    },
-    enumerable: true,
-    configurable: true
-  });
-  Object.defineProperty(Fab.prototype, "computedButttonClass", {
-    get: function get() {
-      var result = this.buttonClass ? this.buttonClass + ' ' : '';
-
-      if (this.isReadyToAnimate()) {
-        result += this.actualActive ? 'fab-button-show' : 'fab-button-hide';
-      } else {
-        result += this.actualActive ? '' : 'fab-button-hidden';
-      } // console.log(
-      //     'computedButttonClass',
-      //     this._readyToAnimate,
-      //     this.actualActive,
-      //     this.buttonClass,
-      //     result
-      // );
-
-
-      return result;
-    },
-    enumerable: true,
-    configurable: true
-  });
-  Object.defineProperty(Fab.prototype, "classBackdrop", {
-    get: function get() {
-      if (this.isReadyToAnimate()) {
-        return this.actualActive ? 'fab-backdrop-show' : 'fab-backdrop-hide';
-      } else {
-        return this.actualActive ? '' : 'fab-backdrop-hidden';
-      }
-    },
-    enumerable: true,
-    configurable: true
-  });
-  Object.defineProperty(Fab.prototype, "iconOnClass", {
-    get: function get() {
-      var result = this.iconClass ? this.iconClass + ' ' : '';
-
-      if (this.isReadyToAnimate()) {
-        result += this.actualActive ? 'fab-icon-show fab-icon-on-rotate-hide' : 'fab-icon-hide fab-icon-on-rotate-show';
-      } else {
-        result += this.actualActive ? '' : 'fab-icon-on-rotate-hidden';
-      } // console.log('iconOnClass', result);
-
-
-      return result;
-    },
-    enumerable: true,
-    configurable: true
-  });
-  Object.defineProperty(Fab.prototype, "iconOffClass", {
-    get: function get() {
-      var result = this.iconClass ? this.iconClass + ' ' : '';
-
-      if (this.isReadyToAnimate()) {
-        result += !this.actualActive ? 'fab-icon-show fab-icon-rotate-hide' : 'fab-icon-hide fab-icon-rotate-show';
-      } else {
-        result += this.actualActive ? '' : 'fab-icon-rotate-hidden';
-      } // console.log('iconOffClass', result);
-
-
-      return result;
-    },
-    enumerable: true,
-    configurable: true
-  });
-
-  Fab.prototype.onButtonTap = function (args) {
-    // console.log('onButtonTap', this.active);
-    args.active = this.active;
-    this.active = !this.active;
-    this.$emit('tap', args);
-  };
-
-  Fab.prototype.onBackdropTap = function (args) {
-    this.active = false;
-  };
-
-  tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__["Prop"])({
-    type: Boolean,
-    "default": false
-  }), tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"]("design:type", Boolean)], Fab.prototype, "isActive", void 0);
-
-  tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__["Prop"])(), tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"]("design:type", String)], Fab.prototype, "iconOn", void 0);
-
-  tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__["Prop"])({
-    "default": 'right'
-  }), tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"]("design:type", String)], Fab.prototype, "position", void 0);
-
-  tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__["Prop"])({
-    "default": false
-  }), tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"]("design:type", Boolean)], Fab.prototype, "debug", void 0);
-
-  Fab = tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__["Component"]], Fab);
-  return Fab;
-}(_FabBase__WEBPACK_IMPORTED_MODULE_3__["default"]);
-
-/* harmony default export */ __webpack_exports__["default"] = (Fab);
-
 /***/ }),
 
-/***/ "../node_modules/.registry.npmjs.org/ts-loader/6.0.4_typescript@3.5.3/node_modules/ts-loader/index.js?!./FabItem.ts?vue&type=script&lang=ts&":
+/***/ "../node_modules/.pnpm/registry.npmjs.org/ts-loader/6.0.4_typescript@3.8.3/node_modules/ts-loader/index.js?!./FabItem.ts?vue&type=script&lang=ts&":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -274,7 +225,6 @@
 var FabItem = /** @class */ (function (_super) {
-    tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"](FabItem, _super);
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(FabItem, _super);
     function FabItem() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.indexInParent = 0;
-        _this.parentChildrenCount = 0;
+        _this.index = 0;
         return _this;
@@ -289,5 +239,16 @@ }
     });
+    FabItem.prototype.mounted = function () {
+        _super.prototype.mounted.call(this);
+        this.index = this.nativeView.index = this.$parent.$children.indexOf(this);
+    };
+    Object.defineProperty(FabItem.prototype, "isRight", {
+        get: function () {
+            return this.parentFab.isRight;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(FabItem.prototype, "position", {
         get: function () {
-            return this.parentFab.position;
+            return this.parentFab.rPosition;
         },
@@ -297,24 +258,5 @@ enumerable: true,
     });
-    FabItem.prototype.mounted = function () {
-        _super.prototype.mounted.call(this);
-        this.actualActive = this.parentFab.active;
-        this.parentChildrenCount = this.$parent.$children.length;
-        this.indexInParent = this.$parent.$children.indexOf(this);
-        // console.log('fab mounted');
-    };
-    Object.defineProperty(FabItem.prototype, "computedButttonClass", {
+    Object.defineProperty(FabItem.prototype, "fabColumns", {
         get: function () {
-            var result = this.buttonClass ? this.buttonClass + ' ' : '';
-            if (this.iconClass) {
-                result += this.iconClass + ' ';
-            }
-            if (this.isReadyToAnimate()) {
-                result += this.actualActive
-                    ? 'fab-item-button-show'
-                    : 'fab-item-button-hide';
-            }
-            else {
-                result += this.actualActive ? '' : 'fab-item-button-hidden';
-            }
-            return result;
+            return this.isRight ? '*,auto,auto' : 'auto,auto,*';
         },
@@ -324,15 +266,13 @@ enumerable: true,
     });
-    Object.defineProperty(FabItem.prototype, "visible", {
+    Object.defineProperty(FabItem.prototype, "fabButtonCol", {
         get: function () {
+            return this.isRight ? 2 : 0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FabItem.prototype, "active", {
+        get: function () {
             return this.actualActive;
         },
-        set: function (value) {
-            var _this = this;
-            if (value === this.actualActive) {
-                return;
-            }
-            setTimeout(function () {
-                _this.actualActive = value;
-            }, (value ? this.parentChildrenCount - 1 - this.indexInParent : this.indexInParent) * 40);
-        },
         enumerable: true,
@@ -342,10 +282,7 @@ configurable: true
     FabItem.prototype.onButtonTap = function (args) {
+        console.log('FabItem onButtonTap');
+        this.$emit('tap', args);
         this.parentFab.active = false;
-        this.$emit('tap', args);
     };
-    tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([
-        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__["Prop"])({ default: false }),
-        tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"]("design:type", Boolean)
-    ], FabItem.prototype, "debug", void 0);
-    FabItem = tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([
+    FabItem = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
         vue_property_decorator__WEBPACK_IMPORTED_MODULE_1__["Component"]
@@ -360,3 +297,3 @@ ], FabItem);
 
-/***/ "../node_modules/.registry.npmjs.org/vue-loader/15.7.1_css-loader@3.1.0+webpack@4.39.1/node_modules/vue-loader/lib/loaders/templateLoader.js?!../node_modules/.registry.npmjs.org/vue-loader/15.7.1_css-loader@3.1.0+webpack@4.39.1/node_modules/vue-loader/lib/index.js?!./Fab.vue?vue&type=template&id=354e2d49&":
+/***/ "../node_modules/.pnpm/registry.npmjs.org/vue-loader/15.9.1_8f81618185b4d0366133feb1cdc1ef71/node_modules/vue-loader/lib/loaders/templateLoader.js?!../node_modules/.pnpm/registry.npmjs.org/vue-loader/15.9.1_8f81618185b4d0366133feb1cdc1ef71/node_modules/vue-loader/lib/index.js?!./Fab.vue?vue&type=template&id=354e2d49&":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -375,2 +312,3 @@
     {
+      staticClass: "fab",
       attrs: {
@@ -389,9 +327,6 @@ left: "0",
         staticClass: "fab-backdrop",
-        class: _vm.classBackdrop,
         attrs: {
           colSpan: "3",
           rowSpan: "4",
-          isUserInteractionEnabled: _vm.active,
-          debug: _vm.debug,
-          visibility: _vm.realActive ? "visible" : "collapsed"
+          isUserInteractionEnabled: _vm.active
         },
@@ -401,12 +336,11 @@ on: { tap: _vm.onBackdropTap }
       _c(
-        "StackLayout",
+        "FlexboxLayout",
         {
           staticClass: "fab-items-holder",
           attrs: {
-            horizontalAlignment: _vm.position,
+            flexDirection:
+              _vm.orientation === "vertical" ? "column-reverse" : "row-reverse",
+            horizontalAlignment: _vm.rPosition,
             row: "2",
-            colSpan: "3",
-            isPassThroughParentEnabled: "true",
-            visibility: _vm.realActive ? "visible" : "collapsed",
-            debug: _vm.debug
+            colSpan: "3"
           }
@@ -421,5 +355,5 @@ },
           attrs: {
-            columns: _vm.isRight ? "*,auto,auto" : "auto,auto,*",
+            columns: _vm.fabColumns,
             width: "100%",
-            horizontalAlignment: _vm.position,
+            horizontalAlignment: _vm.rPosition,
             row: "3",
@@ -434,8 +368,7 @@ colSpan: "3",
                 staticClass: "fab-title",
-                class: _vm.computedTitleClass,
+                class: _vm.buttonClass,
                 attrs: {
                   col: "1",
                   text: _vm.title,
-                  isUserInteractionEnabled: _vm.active,
-                  debug: _vm.debug
+                  isUserInteractionEnabled: _vm.active
                 },
@@ -450,7 +383,5 @@ on: { tap: _vm.onButtonTap }
               attrs: {
-                col: _vm.isRight ? 2 : 0,
-                color: _vm.color,
-                rippleColor: _vm.actualRippleColor,
-                backgroundColor: _vm.actualBackgroundColor,
-                debug: _vm.debug
+                col: _vm.fabButtonCol,
+                rippleColor: _vm.rippleColor,
+                backgroundColor: _vm.backgroundColor
               },
@@ -460,6 +391,5 @@ on: { tap: _vm.onButtonTap }
             [
-              _c("label", {
-                staticClass: "fab-icon fab-icon-off",
-                class: _vm.iconOffClass,
-                staticStyle: { zIndex: "20" },
+              _c("Label", {
+                staticClass: "fab-icon-off",
+                class: _vm.iconClass,
                 attrs: {
@@ -472,5 +402,4 @@ color: _vm.color,
               _c("Label", {
-                staticClass: "fab-icon fab-icon-on",
-                class: _vm.iconOnClass,
-                staticStyle: { zIndex: "20" },
+                staticClass: "fab-icon-on",
+                class: _vm.iconClass,
                 attrs: {
@@ -499,3 +428,3 @@ color: _vm.color,
 
-/***/ "../node_modules/.registry.npmjs.org/vue-loader/15.7.1_css-loader@3.1.0+webpack@4.39.1/node_modules/vue-loader/lib/loaders/templateLoader.js?!../node_modules/.registry.npmjs.org/vue-loader/15.7.1_css-loader@3.1.0+webpack@4.39.1/node_modules/vue-loader/lib/index.js?!./FabItem.vue?vue&type=template&id=66bceb08&":
+/***/ "../node_modules/.pnpm/registry.npmjs.org/vue-loader/15.9.1_8f81618185b4d0366133feb1cdc1ef71/node_modules/vue-loader/lib/loaders/templateLoader.js?!../node_modules/.pnpm/registry.npmjs.org/vue-loader/15.9.1_8f81618185b4d0366133feb1cdc1ef71/node_modules/vue-loader/lib/index.js?!./FabItem.vue?vue&type=template&id=66bceb08&":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -517,6 +446,5 @@
         horizontalAlignment: _vm.position,
-        columns: _vm.isRight ? "*,auto,auto" : "auto,auto,*",
+        columns: _vm.fabColumns,
         width: "100%",
-        isPassThroughParentEnabled: "true",
-        debug: _vm.debug
+        isPassThroughParentEnabled: "true"
       }
@@ -526,13 +454,10 @@ },
       _c("MDButton", {
-        ref: "button",
         staticClass: "fab-item",
-        class: _vm.computedButttonClass,
+        class: _vm.buttonClass || _vm.iconClass,
         attrs: {
-          col: _vm.isRight ? 2 : 0,
+          col: _vm.fabButtonCol,
           color: _vm.color,
           rippleColor: _vm.rippleColor,
           backgroundColor: _vm.backgroundColor,
-          text: _vm.icon,
-          isUserInteractionEnabled: _vm.visible,
-          debug: _vm.debug
+          text: _vm.icon
         },
@@ -544,9 +469,4 @@ on: { tap: _vm.onButtonTap }
             staticClass: "fab-item-title",
-            class: _vm.computedTitleClass,
-            attrs: {
-              col: "1",
-              text: _vm.title,
-              isUserInteractionEnabled: _vm.visible,
-              debug: _vm.debug
-            },
+            class: _vm.titleClass,
+            attrs: { col: "1", text: _vm.title },
             on: { tap: _vm.onButtonTap }
@@ -566,3 +486,3 @@ })
 
-/***/ "../node_modules/.registry.npmjs.org/vue-loader/15.7.1_css-loader@3.1.0+webpack@4.39.1/node_modules/vue-loader/lib/runtime/componentNormalizer.js":
+/***/ "../node_modules/.pnpm/registry.npmjs.org/vue-loader/15.9.1_8f81618185b4d0366133feb1cdc1ef71/node_modules/vue-loader/lib/runtime/componentNormalizer.js":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -646,3 +566,3 @@
       options._injectStyles = hook
-      // register for functioal component in vue file
+      // register for functional component in vue file
       var originalRender = options.render
@@ -671,3 +591,3 @@ options.render = function renderWithStyleInjection (h, context) {
 
-/***/ "./Fab.ts?vue&type=script&lang=js&":
+/***/ "./Fab.ts?vue&type=script&lang=ts&":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -677,4 +597,4 @@
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _node_modules_registry_npmjs_org_babel_loader_8_0_6_babel_core_7_5_5_webpack_4_39_1_node_modules_babel_loader_lib_index_js_ref_2_0_node_modules_registry_npmjs_org_string_replace_loader_2_2_0_webpack_4_39_1_node_modules_string_replace_loader_index_js_ref_2_1_node_modules_registry_npmjs_org_ts_loader_6_0_4_typescript_3_5_3_node_modules_ts_loader_index_js_ref_1_0_Fab_ts_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../node_modules/.registry.npmjs.org/babel-loader/8.0.6_@babel+core@7.5.5+webpack@4.39.1/node_modules/babel-loader/lib/index.js?!../node_modules/.registry.npmjs.org/string-replace-loader/2.2.0_webpack@4.39.1/node_modules/string-replace-loader/index.js?!../node_modules/.registry.npmjs.org/ts-loader/6.0.4_typescript@3.5.3/node_modules/ts-loader/index.js?!./Fab.ts?vue&type=script&lang=js&");
-/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_registry_npmjs_org_babel_loader_8_0_6_babel_core_7_5_5_webpack_4_39_1_node_modules_babel_loader_lib_index_js_ref_2_0_node_modules_registry_npmjs_org_string_replace_loader_2_2_0_webpack_4_39_1_node_modules_string_replace_loader_index_js_ref_2_1_node_modules_registry_npmjs_org_ts_loader_6_0_4_typescript_3_5_3_node_modules_ts_loader_index_js_ref_1_0_Fab_ts_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); 
+/* harmony import */ var _node_modules_pnpm_registry_npmjs_org_ts_loader_6_0_4_typescript_3_8_3_node_modules_ts_loader_index_js_ref_1_0_Fab_ts_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../node_modules/.pnpm/registry.npmjs.org/ts-loader/6.0.4_typescript@3.8.3/node_modules/ts-loader/index.js?!./Fab.ts?vue&type=script&lang=ts&");
+/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_pnpm_registry_npmjs_org_ts_loader_6_0_4_typescript_3_8_3_node_modules_ts_loader_index_js_ref_1_0_Fab_ts_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_0__["default"]); 
 
@@ -689,4 +609,4 @@ /***/ }),
 /* harmony import */ var _Fab_vue_vue_type_template_id_354e2d49___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./Fab.vue?vue&type=template&id=354e2d49&");
-/* harmony import */ var _Fab_ts_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./Fab.ts?vue&type=script&lang=js&");
-/* empty/unused harmony star reexport *//* harmony import */ var _node_modules_registry_npmjs_org_vue_loader_15_7_1_css_loader_3_1_0_webpack_4_39_1_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("../node_modules/.registry.npmjs.org/vue-loader/15.7.1_css-loader@3.1.0+webpack@4.39.1/node_modules/vue-loader/lib/runtime/componentNormalizer.js");
+/* harmony import */ var _Fab_ts_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./Fab.ts?vue&type=script&lang=ts&");
+/* empty/unused harmony star reexport *//* harmony import */ var _node_modules_pnpm_registry_npmjs_org_vue_loader_15_9_1_8f81618185b4d0366133feb1cdc1ef71_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("../node_modules/.pnpm/registry.npmjs.org/vue-loader/15.9.1_8f81618185b4d0366133feb1cdc1ef71/node_modules/vue-loader/lib/runtime/componentNormalizer.js");
 
@@ -699,4 +619,4 @@
 
-var component = Object(_node_modules_registry_npmjs_org_vue_loader_15_7_1_css_loader_3_1_0_webpack_4_39_1_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])(
-  _Fab_ts_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
+var component = Object(_node_modules_pnpm_registry_npmjs_org_vue_loader_15_9_1_8f81618185b4d0366133feb1cdc1ef71_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])(
+  _Fab_ts_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_1__["default"],
   _Fab_vue_vue_type_template_id_354e2d49___WEBPACK_IMPORTED_MODULE_0__["render"],
@@ -723,6 +643,6 @@ _Fab_vue_vue_type_template_id_354e2d49___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _node_modules_registry_npmjs_org_vue_loader_15_7_1_css_loader_3_1_0_webpack_4_39_1_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_registry_npmjs_org_vue_loader_15_7_1_css_loader_3_1_0_webpack_4_39_1_node_modules_vue_loader_lib_index_js_vue_loader_options_Fab_vue_vue_type_template_id_354e2d49___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../node_modules/.registry.npmjs.org/vue-loader/15.7.1_css-loader@3.1.0+webpack@4.39.1/node_modules/vue-loader/lib/loaders/templateLoader.js?!../node_modules/.registry.npmjs.org/vue-loader/15.7.1_css-loader@3.1.0+webpack@4.39.1/node_modules/vue-loader/lib/index.js?!./Fab.vue?vue&type=template&id=354e2d49&");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_registry_npmjs_org_vue_loader_15_7_1_css_loader_3_1_0_webpack_4_39_1_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_registry_npmjs_org_vue_loader_15_7_1_css_loader_3_1_0_webpack_4_39_1_node_modules_vue_loader_lib_index_js_vue_loader_options_Fab_vue_vue_type_template_id_354e2d49___WEBPACK_IMPORTED_MODULE_0__["render"]; });
+/* harmony import */ var _node_modules_pnpm_registry_npmjs_org_vue_loader_15_9_1_8f81618185b4d0366133feb1cdc1ef71_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_pnpm_registry_npmjs_org_vue_loader_15_9_1_8f81618185b4d0366133feb1cdc1ef71_node_modules_vue_loader_lib_index_js_vue_loader_options_Fab_vue_vue_type_template_id_354e2d49___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../node_modules/.pnpm/registry.npmjs.org/vue-loader/15.9.1_8f81618185b4d0366133feb1cdc1ef71/node_modules/vue-loader/lib/loaders/templateLoader.js?!../node_modules/.pnpm/registry.npmjs.org/vue-loader/15.9.1_8f81618185b4d0366133feb1cdc1ef71/node_modules/vue-loader/lib/index.js?!./Fab.vue?vue&type=template&id=354e2d49&");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_pnpm_registry_npmjs_org_vue_loader_15_9_1_8f81618185b4d0366133feb1cdc1ef71_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_pnpm_registry_npmjs_org_vue_loader_15_9_1_8f81618185b4d0366133feb1cdc1ef71_node_modules_vue_loader_lib_index_js_vue_loader_options_Fab_vue_vue_type_template_id_354e2d49___WEBPACK_IMPORTED_MODULE_0__["render"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_registry_npmjs_org_vue_loader_15_7_1_css_loader_3_1_0_webpack_4_39_1_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_registry_npmjs_org_vue_loader_15_7_1_css_loader_3_1_0_webpack_4_39_1_node_modules_vue_loader_lib_index_js_vue_loader_options_Fab_vue_vue_type_template_id_354e2d49___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_pnpm_registry_npmjs_org_vue_loader_15_9_1_8f81618185b4d0366133feb1cdc1ef71_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_pnpm_registry_npmjs_org_vue_loader_15_9_1_8f81618185b4d0366133feb1cdc1ef71_node_modules_vue_loader_lib_index_js_vue_loader_options_Fab_vue_vue_type_template_id_354e2d49___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
 
@@ -744,130 +664,44 @@
 /* harmony import */ var vue_property_decorator__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(vue_property_decorator__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var nativescript_material_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("nativescript-material-core");
-/* harmony import */ var nativescript_material_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(nativescript_material_core__WEBPACK_IMPORTED_MODULE_3__);
 
 
 
-
-var defaultColor;
 var FabBase = /** @class */ (function (_super) {
-    tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"](FabBase, _super);
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(FabBase, _super);
     function FabBase() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.actualActive = false;
-        _this._readyToAnimate = false;
         return _this;
     }
-    Object.defineProperty(FabBase.prototype, "actualBackgroundColor", {
-        get: function () {
-            if (this.backgroundColor) {
-                return this.backgroundColor;
-            }
-            if (!defaultColor) {
-                defaultColor = nativescript_material_core__WEBPACK_IMPORTED_MODULE_3__["themer"].getPrimaryColor();
-            }
-            return defaultColor;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(FabBase.prototype, "actualRippleColor", {
-        get: function () {
-            if (this.rippleColor) {
-                return this.rippleColor;
-            }
-            if (!defaultColor) {
-                defaultColor = nativescript_material_core__WEBPACK_IMPORTED_MODULE_3__["themer"].getPrimaryColor();
-            }
-            return defaultColor;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(FabBase.prototype, "isLeft", {
-        get: function () {
-            return this.position === 'left';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(FabBase.prototype, "isRight", {
-        get: function () {
-            return this.position === 'right';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    FabBase.prototype.mounted = function () {
-        this._readyToAnimate = true;
-    };
-    FabBase.prototype.isReadyToAnimate = function () {
-        return this._readyToAnimate === true;
-    };
-    Object.defineProperty(FabBase.prototype, "button", {
-        get: function () {
-            return this.$refs.button['nativeView'];
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(FabBase.prototype, "titleLabel", {
-        get: function () {
-            return this.$refs.titleLabel['nativeView'];
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(FabBase.prototype, "computedTitleClass", {
-        get: function () {
-            var result = this.titleClass ? this.titleClass + ' ' : '';
-            if (this.isReadyToAnimate()) {
-                result += this.actualActive
-                    ? 'fab-item-title-show'
-                    : 'fab-item-title-hide';
-                if (this.isLeft) {
-                    result += '-left';
-                }
-            }
-            else if (!this.actualActive) {
-                result += 'fab-item-title-hidden';
-                if (this.isLeft) {
-                    result += '-left';
-                }
-            }
-            return result;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([
-        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_2__["Prop"])(),
-        tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"]("design:type", String)
+    FabBase.prototype.mounted = function () { };
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_2__["Prop"])({ type: String }),
+        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", String)
     ], FabBase.prototype, "icon", void 0);
-    tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([
-        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_2__["Prop"])(),
-        tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"]("design:type", String)
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_2__["Prop"])({ type: String }),
+        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", String)
     ], FabBase.prototype, "title", void 0);
-    tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([
-        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_2__["Prop"])(),
-        tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"]("design:type", String)
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_2__["Prop"])({ type: String }),
+        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", String)
     ], FabBase.prototype, "backgroundColor", void 0);
-    tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([
-        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_2__["Prop"])({}),
-        tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"]("design:type", String)
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_2__["Prop"])({ type: String }),
+        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", String)
     ], FabBase.prototype, "color", void 0);
-    tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([
-        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_2__["Prop"])({}),
-        tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"]("design:type", String)
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_2__["Prop"])({ type: String }),
+        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", String)
     ], FabBase.prototype, "rippleColor", void 0);
-    tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([
-        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_2__["Prop"])(),
-        tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"]("design:type", String)
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_2__["Prop"])({ type: String }),
+        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", String)
     ], FabBase.prototype, "buttonClass", void 0);
-    tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([
-        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_2__["Prop"])(),
-        tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"]("design:type", String)
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_2__["Prop"])({ type: String }),
+        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", String)
     ], FabBase.prototype, "titleClass", void 0);
-    tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([
-        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_2__["Prop"])(),
-        tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"]("design:type", String)
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(vue_property_decorator__WEBPACK_IMPORTED_MODULE_2__["Prop"])({ type: String }),
+        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", String)
     ], FabBase.prototype, "iconClass", void 0);
@@ -886,4 +720,4 @@ return FabBase;
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _node_modules_registry_npmjs_org_ts_loader_6_0_4_typescript_3_5_3_node_modules_ts_loader_index_js_ref_1_0_FabItem_ts_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../node_modules/.registry.npmjs.org/ts-loader/6.0.4_typescript@3.5.3/node_modules/ts-loader/index.js?!./FabItem.ts?vue&type=script&lang=ts&");
-/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_registry_npmjs_org_ts_loader_6_0_4_typescript_3_5_3_node_modules_ts_loader_index_js_ref_1_0_FabItem_ts_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_0__["default"]); 
+/* harmony import */ var _node_modules_pnpm_registry_npmjs_org_ts_loader_6_0_4_typescript_3_8_3_node_modules_ts_loader_index_js_ref_1_0_FabItem_ts_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../node_modules/.pnpm/registry.npmjs.org/ts-loader/6.0.4_typescript@3.8.3/node_modules/ts-loader/index.js?!./FabItem.ts?vue&type=script&lang=ts&");
+/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_pnpm_registry_npmjs_org_ts_loader_6_0_4_typescript_3_8_3_node_modules_ts_loader_index_js_ref_1_0_FabItem_ts_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_0__["default"]); 
 
@@ -899,3 +733,3 @@ /***/ }),
 /* harmony import */ var _FabItem_ts_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./FabItem.ts?vue&type=script&lang=ts&");
-/* empty/unused harmony star reexport *//* harmony import */ var _node_modules_registry_npmjs_org_vue_loader_15_7_1_css_loader_3_1_0_webpack_4_39_1_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("../node_modules/.registry.npmjs.org/vue-loader/15.7.1_css-loader@3.1.0+webpack@4.39.1/node_modules/vue-loader/lib/runtime/componentNormalizer.js");
+/* empty/unused harmony star reexport *//* harmony import */ var _node_modules_pnpm_registry_npmjs_org_vue_loader_15_9_1_8f81618185b4d0366133feb1cdc1ef71_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("../node_modules/.pnpm/registry.npmjs.org/vue-loader/15.9.1_8f81618185b4d0366133feb1cdc1ef71/node_modules/vue-loader/lib/runtime/componentNormalizer.js");
 
@@ -908,3 +742,3 @@
 
-var component = Object(_node_modules_registry_npmjs_org_vue_loader_15_7_1_css_loader_3_1_0_webpack_4_39_1_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])(
+var component = Object(_node_modules_pnpm_registry_npmjs_org_vue_loader_15_9_1_8f81618185b4d0366133feb1cdc1ef71_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])(
   _FabItem_ts_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_1__["default"],
@@ -932,6 +766,6 @@ _FabItem_vue_vue_type_template_id_66bceb08___WEBPACK_IMPORTED_MODULE_0__["render"],
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _node_modules_registry_npmjs_org_vue_loader_15_7_1_css_loader_3_1_0_webpack_4_39_1_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_registry_npmjs_org_vue_loader_15_7_1_css_loader_3_1_0_webpack_4_39_1_node_modules_vue_loader_lib_index_js_vue_loader_options_FabItem_vue_vue_type_template_id_66bceb08___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../node_modules/.registry.npmjs.org/vue-loader/15.7.1_css-loader@3.1.0+webpack@4.39.1/node_modules/vue-loader/lib/loaders/templateLoader.js?!../node_modules/.registry.npmjs.org/vue-loader/15.7.1_css-loader@3.1.0+webpack@4.39.1/node_modules/vue-loader/lib/index.js?!./FabItem.vue?vue&type=template&id=66bceb08&");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_registry_npmjs_org_vue_loader_15_7_1_css_loader_3_1_0_webpack_4_39_1_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_registry_npmjs_org_vue_loader_15_7_1_css_loader_3_1_0_webpack_4_39_1_node_modules_vue_loader_lib_index_js_vue_loader_options_FabItem_vue_vue_type_template_id_66bceb08___WEBPACK_IMPORTED_MODULE_0__["render"]; });
+/* harmony import */ var _node_modules_pnpm_registry_npmjs_org_vue_loader_15_9_1_8f81618185b4d0366133feb1cdc1ef71_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_pnpm_registry_npmjs_org_vue_loader_15_9_1_8f81618185b4d0366133feb1cdc1ef71_node_modules_vue_loader_lib_index_js_vue_loader_options_FabItem_vue_vue_type_template_id_66bceb08___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../node_modules/.pnpm/registry.npmjs.org/vue-loader/15.9.1_8f81618185b4d0366133feb1cdc1ef71/node_modules/vue-loader/lib/loaders/templateLoader.js?!../node_modules/.pnpm/registry.npmjs.org/vue-loader/15.9.1_8f81618185b4d0366133feb1cdc1ef71/node_modules/vue-loader/lib/index.js?!./FabItem.vue?vue&type=template&id=66bceb08&");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_pnpm_registry_npmjs_org_vue_loader_15_9_1_8f81618185b4d0366133feb1cdc1ef71_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_pnpm_registry_npmjs_org_vue_loader_15_9_1_8f81618185b4d0366133feb1cdc1ef71_node_modules_vue_loader_lib_index_js_vue_loader_options_FabItem_vue_vue_type_template_id_66bceb08___WEBPACK_IMPORTED_MODULE_0__["render"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_registry_npmjs_org_vue_loader_15_7_1_css_loader_3_1_0_webpack_4_39_1_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_registry_npmjs_org_vue_loader_15_7_1_css_loader_3_1_0_webpack_4_39_1_node_modules_vue_loader_lib_index_js_vue_loader_options_FabItem_vue_vue_type_template_id_66bceb08___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_pnpm_registry_npmjs_org_vue_loader_15_9_1_8f81618185b4d0366133feb1cdc1ef71_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_pnpm_registry_npmjs_org_vue_loader_15_9_1_8f81618185b4d0366133feb1cdc1ef71_node_modules_vue_loader_lib_index_js_vue_loader_options_FabItem_vue_vue_type_template_id_66bceb08___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
 
@@ -949,11 +783,9 @@
 /* harmony import */ var _FabItem__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./FabItem.vue");
-/* harmony import */ var nativescript_material_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("nativescript-material-core");
-/* harmony import */ var nativescript_material_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(nativescript_material_core__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var nativescript_material_button_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("nativescript-material-button/vue");
-/* harmony import */ var nativescript_material_button_vue__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(nativescript_material_button_vue__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var nativescript_material_button_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("nativescript-material-button/vue");
+/* harmony import */ var nativescript_material_button_vue__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(nativescript_material_button_vue__WEBPACK_IMPORTED_MODULE_2__);
 
 
+// import { installMixins } from 'nativescript-material-core';
 
-
-Object(nativescript_material_core__WEBPACK_IMPORTED_MODULE_2__["installMixins"])();
+// installMixins();
 var Plugin = {
@@ -963,4 +795,4 @@ install: function (Vue) {
         Vue.component('Fab', _Fab__WEBPACK_IMPORTED_MODULE_0__["default"]);
-        Vue.use(nativescript_material_button_vue__WEBPACK_IMPORTED_MODULE_3___default.a);
-    }
+        Vue.use(nativescript_material_button_vue__WEBPACK_IMPORTED_MODULE_2___default.a);
+    },
 };
@@ -979,9 +811,2 @@ /* harmony default export */ __webpack_exports__["default"] = (Plugin);
 
-/***/ "nativescript-material-core":
-/***/ (function(module, exports) {
-
-module.exports = require("nativescript-material-core");
-
-/***/ }),
-
 /***/ "nativescript-vue":
@@ -988,0 +813,0 @@ /***/ (function(module, exports) {

package.json

 {
     "name": "nativescript-vue-fab",
-    "version": "1.0.16",
+    "version": "1.0.17",
     "description": "A Nativescript Vue component for Floating Action Button",
@@ -24,6 +24,6 @@ "main": "main.js",
     "dependencies": {
-        "nativescript-material-button": "^2.3.16",
-        "vue-property-decorator": "^8.2.1"
+        "nativescript-material-button": "^3.1.16",
+        "vue-property-decorator": "^8.4.1"
     },
-    "gitHead": "7528d14e2008f4a63fa9fd2e8ca2f6b6327174e7"
+    "gitHead": "5401c551f7d7959dcf46a1767c6a285c65925e5c"
 }

No alert changes

Improved metrics

Total package byte prevSize

57963

increased by11.2%

Number of package files

10

increased by11.11%

Lines of code

1200

increased by6.38%

Dependency changes

• + Addednativescript-material-button@3.3.2(transitive)

• + Addednativescript-material-core@3.3.2(transitive)

• - Removednativescript-material-button@2.5.4(transitive)

• - Removednativescript-material-core@2.5.4(transitive)

• Updatednativescript-material-button@^3.1.16

• Updatedvue-property-decorator@^8.4.1