[1.5.0] Add Notification component

Author: isnifer

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.5.0
+
+### Add
+
+- `<Notification />` component to show notifications on success/error
+
 ## 1.4.4
 
 ### Fixed

README.md

@@ -78,6 +78,7 @@ See demo at [https://detools.github.io/vue-form](https://detools.github.io/vue-f
 
 ## Changelog
 
+- [1.5.0](/CHANGELOG.md#150)
 - [1.4.4](/CHANGELOG.md#144)
 - [1.4.3](/CHANGELOG.md#143)
 - [1.4.2](/CHANGELOG.md#142)

VueForm/Form.vue

@@ -2,8 +2,8 @@
 import { isNil, isBoolean, has, mapValues, noop } from 'lodash'
 import { Form, Button } from 'element-ui'
 import FormItem from './ConnectedFormItem'
+import Notification from './Notification'
 import CONSTANTS from './constants'
-import isPromise from './utils/is-promise'
 
 const BUTTONS_POSITION = {
   START: 'start',
@@ -33,6 +33,8 @@ export default {
       default: () => ({}),
     },
 
+    messages: Object,
+
     handleSubmit: {
       type: Function,
       default: noop,
@@ -128,14 +130,14 @@ export default {
         return this.handleDisabled(this.errors)
       }
 
-      const response = this.handleSubmit({ ...this.initialValues, ...this.state })
-      if (isPromise(response)) {
-        const off = this.manageSubmittingState()
-
-        return response.then(off).catch(off)
-      }
-
-      return response
+      const messages = this.messages || {}
+      const off = this.manageSubmittingState()
+      return Promise.resolve(this.handleSubmit({ ...this.initialValues, ...this.state }))
+        .then(
+          () => Notification.success(messages.success),
+          () => Notification.error(messages.error)
+        )
+        .then(off)
     },
 
     nativeOnReset(event) {

VueForm/Notification.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import startCase from 'lodash/startCase'
+import { Notification } from 'element-ui'
+
+export default new Vue({
+  methods: {
+    renderMessage(message) {
+      return <div style="text-align: left">{message}</div>
+    },
+
+    getHandler(type, message) {
+      if (message) {
+        Notification[type]({ title: startCase(type), message: this.renderMessage(message) })
+      }
+    },
+
+    success(message) {
+      return this.getHandler('success', message)
+    },
+
+    warning(message) {
+      return this.getHandler('warning', message)
+    },
+
+    info(message) {
+      return this.getHandler('info', message)
+    },
+
+    error(message) {
+      return this.getHandler('error', message)
+    },
+  },
+})

VueForm/index.js

@@ -11,6 +11,9 @@ import Slider from './ConnectedSlider'
 import TimePicker from './ConnectedTimePicker'
 import DatePicker from './ConnectedDatePicker'
 import FormItem from './ConnectedFormItem'
+
+import Notification from './Notification'
+
 import validations from './validations'
 
 export {
@@ -26,6 +29,7 @@ export {
   TimePicker,
   DatePicker,
   FormItem,
+  Notification,
   validations,
 }
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@detools/vue-form",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "description": "Vue Form component on hooks",
   "main": "VueForm/index.js",
   "scripts": {