vudal - npm Package Compare versions

Comparing version 1.7.18 to 1.8.0

dist/plugin.js

@@ -33,2 +33,12 @@ 'use strict';
 
+var defaultOptions = {
+  confirm: {
+    style: 'normal',
+    approveLabel: 'Approve',
+    cancelLabel: 'Cancel',
+    approveBtnClass: 'vudal-btn vudal-btn-primary',
+    cancelBtnClass: 'vudal-btn vudal-btn-default'
+  }
+};
+
 exports.default = {
@@ -38,2 +48,3 @@ install: function install(Vue) {
 
+    var opts = _jquery2.default.extend(true, {}, defaultOptions, options);
     var defaultLayer = 1000;
@@ -279,2 +290,75 @@ var dimmerSelector = '.vudal-dimmer';
       }, {
+        key: 'confirm',
+        value: function confirm() {
+          var _this6 = this;
+
+          var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+          var message = params.message,
+              _onApprove = params.onApprove,
+              _onCancel = params.onCancel;
+          var approveLabel = params.approveLabel,
+              cancelLabel = params.cancelLabel,
+              approveBtnClass = params.approveBtnClass,
+              cancelBtnClass = params.cancelBtnClass,
+              parent = params.parent,
+              style = params.style;
+
+
+          if (approveLabel == null) {
+            approveLabel = opts.confirm.approveLabel;
+          }
+
+          if (cancelLabel == null) {
+            cancelLabel = opts.confirm.cancelLabel;
+          }
+
+          if (approveBtnClass == null) {
+            approveBtnClass = opts.confirm.approveBtnClass;
+          }
+
+          if (cancelBtnClass == null) {
+            cancelBtnClass = opts.confirm.cancelBtnClass;
+          }
+
+          if (style == null || ['narrow', 'normal', 'wide'].indexOf(style) === -1) {
+            style = opts.confirm.style;
+          }
+
+          if (style === 'normal') {
+            style = '';
+          }
+
+          new Vue({
+            render: function render(h) {
+              return h(_vudal2.default, { class: style, props: { name: 'confirmModal', parent: parent }, on: { hide: this.closeVudal } }, [h('div', { class: 'header main center' }, [message]), h('div', { class: 'actions' }, [h('button', { class: approveBtnClass, on: { click: this.onApprove }, style: { marginLeft: '5px' } }, [approveLabel]), h('button', { class: cancelBtnClass, on: { click: this.onCancel }, style: { marginLeft: '5px' } }, [cancelLabel])])]);
+            },
+            data: function data() {
+              return { message: message };
+            },
+
+
+            methods: {
+              onApprove: function onApprove() {
+                if (_onApprove != null) {
+                  _onApprove();
+                }
+                this.$modals.confirmModal.$hide();
+              },
+              onCancel: function onCancel() {
+                if (_onCancel != null) {
+                  _onCancel();
+                }
+                this.$modals.confirmModal.$hide();
+              },
+              closeVudal: function closeVudal() {
+                this.$destroy();
+              }
+            }
+          }).$mount();
+
+          Vue.nextTick(function () {
+            _this6.getModal('confirmModal').$show();
+          });
+        }
+      }, {
         key: 'activeModals',
@@ -281,0 +365,0 @@ get: function get() {

package.json

 {
   "name": "vudal",
-  "version": "1.7.18",
+  "version": "1.8.0",
   "description": "Another modal window for vue",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/plugin.js

@@ -9,4 +9,15 @@ import $ from 'jquery';
 
+const defaultOptions = {
+  confirm: {
+    style: 'normal',
+    approveLabel: 'Approve',
+    cancelLabel: 'Cancel',
+    approveBtnClass: 'vudal-btn vudal-btn-primary',
+    cancelBtnClass: 'vudal-btn vudal-btn-default',
+  },
+};
+
 export default {
   install: (Vue, options = {}) => {
+    const opts = $.extend(true, {}, defaultOptions, options);
     const defaultLayer = 1000;
@@ -313,2 +324,88 @@ const dimmerSelector = '.vudal-dimmer';
       }
+
+      /**
+       * Create confirmation window based on vudal
+       */
+      confirm(params = {}) {
+        const {
+          message,
+          onApprove,
+          onCancel,
+        } = params;
+
+        let {
+          approveLabel,
+          cancelLabel,
+          approveBtnClass,
+          cancelBtnClass,
+          parent,
+          style,
+        } = params;
+
+        if (approveLabel == null) {
+          approveLabel = opts.confirm.approveLabel;
+        }
+
+        if (cancelLabel == null) {
+          cancelLabel = opts.confirm.cancelLabel;
+        }
+
+        if (approveBtnClass == null) {
+          approveBtnClass = opts.confirm.approveBtnClass;
+        }
+
+        if (cancelBtnClass == null) {
+          cancelBtnClass = opts.confirm.cancelBtnClass;
+        }
+
+        if (style == null || ['narrow', 'normal', 'wide'].indexOf(style) === -1) {
+          style = opts.confirm.style;
+        }
+
+        if (style === 'normal') {
+          style = '';
+        }
+
+        new Vue({
+
+          render(h) {
+            return h(Vudal, { class: style, props: { name: 'confirmModal', parent }, on: { hide: this.closeVudal } }, [
+              h('div', { class: 'header main center' }, [message]),
+              h('div', { class: 'actions' }, [
+                h('button', { class: approveBtnClass, on: { click: this.onApprove }, style: { marginLeft: '5px' } }, [approveLabel]),
+                h('button', { class: cancelBtnClass, on: { click: this.onCancel }, style: { marginLeft: '5px' } }, [cancelLabel]),
+              ]),
+            ]);
+          },
+
+          data() {
+            return { message };
+          },
+
+          methods: {
+            onApprove() {
+              if (onApprove != null) {
+                onApprove();
+              }
+              this.$modals.confirmModal.$hide();
+            },
+
+            onCancel() {
+              if (onCancel != null) {
+                onCancel();
+              }
+              this.$modals.confirmModal.$hide();
+            },
+
+            closeVudal() {
+              this.$destroy();
+              // this.$modals.closeDimmer();
+            },
+          },
+        }).$mount();
+
+        Vue.nextTick(() => {
+          this.getModal('confirmModal').$show();
+        });
+      }
     }
@@ -323,3 +420,3 @@
         return {
-          $modal: modal
+          $modal: modal,
         };
@@ -326,0 +423,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

265613

increased by2.08%

Lines of code

1403

increased by12.24%

No dependency changes