fix: refactor, add new props

README.md

@@ -26,8 +26,9 @@ This module will help you to work with modal dialogs in your project
 
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fyariksav%2Fvuetify-dialog.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fyariksav%2Fvuetify-dialog?ref=badge_large)
 
-## Documentation
-=======
+## Vuedl module documentation
+
+This module uses vuedl for automatically work with dialogs and DOM
 [See docs here](https://github.com/yariksav/vuedl#readme)
 
 ## Setup
@@ -260,8 +261,8 @@ Props:
 {
   ...
   actions: {
-    'false': 'No',
-    'true': 'Yes'
+    false: 'No',
+    true: 'Yes'
   }
 }
 // result will be true, false, or undefigned

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuetify-dialog",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "description": "Dialog helper for vuetify.js",
   "scripts": {
     "build": "npm run build:umd & npm run build:es & npm run build:unpkg",
@@ -69,7 +69,7 @@
     "vue-asyncable": "^0.2.0",
     "vue-jest": "^3.0.4",
     "vue-template-compiler": "^2.5.22",
-    "vuedl": "^0.3.9",
+    "vuedl": "^0.3.10",
     "vuetify": "^2.3.4"
   },
   "jest": {

src/components/Alert.vue

@@ -49,22 +49,10 @@ export default {
       type: Boolean,
       default: true
     },
-    flat: {
-      type: Boolean,
-      default: false
-    },
-    border: {
-      type: String,
-      default: undefined
-    },    
-    tile: {
-      type: Boolean,
-      default: false
-    },
-    dense: {
-      type: Boolean,
-      default: false
-    },
+    flat: Boolean,
+    border: String,
+    tile: Boolean,
+    dense: Boolean
   }
 }
 </script>

src/components/DialogCard.vue

@@ -19,8 +19,9 @@
       ref="actions"
       :actions="actions"
       v-bind="actionOptions"
-      :handle="handle"
+      :handler="handler || handle"
     />
+    <slot name="footer" />
   </v-card>
 </template>
 
@@ -50,7 +51,13 @@ export default {
         flat: true
       })
     },
-    handle: Function
+    handle: Function, // todo: remove this parameter in next version
+    handler: Function
+  },
+  created () {
+    if (this.handle) {
+      console.warn('DEPRECATED: "handle" prop will be deprecated, please use "handler" instead')
+    }
   },
   methods: {
     trigger (name) {

src/components/Prompt.vue

@@ -3,7 +3,7 @@
     <DialogCard
       :title="title"
       :actions="actions"
-      :handle="handleClick"
+      :handler="handlerClick"
       :title-class="titleClass"
       ref="card"
     >
@@ -58,7 +58,7 @@ export default {
     onEnter () {
       this.$refs.card.$refs.actions.trigger(true)
     },
-    handleClick (res, action) {
+    handlerClick (res, action) {
       if (!action.key) {
         this.$emit('submit', action.key)
       }

src/components/SnackbarLayout.vue

@@ -5,14 +5,18 @@
       :color="getColor"
       v-model="isActive"
       class="application"
-      :text="false"
       :top="top"
       :left="left"
       :right="right"
       :bottom="bottom"
       :multi-line="multiLine"
       :vertical="vertical"
       :elevation="elevation"
+      :text="flat"
+      :centered="centered"
+      :rounded="rounded"
+      :outlined="outlined"
+      :shaped="shaped"
       @click="dismiss"
     >
       <dialog-child
@@ -37,7 +41,12 @@ export default {
     position: String,
     multiLine: Boolean,
     vertical: Boolean,
-    elevation: Number
+    elevation: [Number, String],
+    flat: Boolean,
+    centered: Boolean,
+    rounded: [Boolean, String],
+    outlined: Boolean,
+    shaped: Boolean
   },
   data () {
     const position = this.position || this.$options.propsData.position || ''

test/__snapshots__/confirm.spec.js.snap

@@ -185,7 +185,7 @@ exports[`manager Check confirm with btns true|false 1`] = `
 </div>
 `;
 
-exports[`manager Check confirm with handle functions 1`] = `
+exports[`manager Check confirm with handler functions 1`] = `
 <div
   class="dialog-layout"
 >

test/__snapshots__/prompt.spec.js.snap

@@ -137,6 +137,7 @@ exports[`manager Prompt confirm 2`] = `
                   </span>
                 </button>
               </div>
+               
             </div>
           </div>
         </div>
@@ -249,6 +250,7 @@ exports[`manager Prompt confirm 2`] = `
                   </span>
                 </button>
               </div>
+               
             </div>
           </div>
         </div>
@@ -394,6 +396,7 @@ exports[`manager Test default prompt 2`] = `
                   </span>
                 </button>
               </div>
+               
             </div>
           </div>
         </div>

test/confirm.spec.js

@@ -115,15 +115,15 @@ describe('manager', () => {
     expect(document.body.innerHTML).toBe('')
   })
 
-  test('Check confirm with handle functions', async () => {
+  test('Check confirm with handler functions', async () => {
     const dlg = await manager.confirm({
       text: 'test',
       actions: {
         false: 'No',
         true: {
           text: 'Yes',
           class: 'action-true',
-          handle: () => {
+          handler: () => {
             return new Promise((resolve) => {
               setTimeout(() => resolve({ msg: 'foo' }), 5)
             })

types/index.d.ts

@@ -23,11 +23,13 @@ export interface DialogAction {
   rounded? : boolean
   disabled?: boolean
   handle? (action: any): Promise<any>
+  handler? (action: any): Promise<any>
 }
 
 interface DialogActionable {
   actions?: object | Array<string|DialogAction> | Array<DialogAction>
   handle? (action: any): Promise<any>
+  handler? (action: any): Promise<any>
 }
 
 export interface DialogObject {
@@ -43,6 +45,14 @@ export interface DialogMessageOptions extends DialogActionable {
   position?: string
   timeout?: number
   type?: string
+  outlined?: boolean
+  prominent?: boolean
+  dismissible?: boolean
+  flat?: boolean
+  centered?: boolean
+  border?: string
+  tile?: boolean
+  dense?: boolean
 }
 
 export interface DialogNotifyOptions extends DialogActionable {
@@ -54,6 +64,10 @@ export interface DialogNotifyOptions extends DialogActionable {
   verticalOffset?: number
   width?: number
   zIndex?: number
+  flat?: boolean
+  rounded?: boolean
+  outlined?: boolean
+  shaped?: boolean
 }
 
 export interface DialogConfirmOptions extends DialogActionable {