[modal] added allow-multiple + autofocus options

Author: budiadiono

demo/src/demo/modal/multiple/index.html

@@ -0,0 +1,18 @@
+<div>
+  <ui-modal id="first-modal" attach-show=".show-modal" :allow-multiple="true">
+    FIRST MODAL
+    <span slot="actions">
+			<ui-button v-on:click="showSecondModal">Show Second Modal</ui-button>
+			<div class="ui negative button">Close</div>
+    </span>
+  </ui-modal>
+
+  <ui-modal id="second-modal" :allow-multiple="true">
+    SECOND MODAL
+    <span slot="actions">
+			<div class="ui positive button">OK</div>
+		</span>
+  </ui-modal>
+
+  <ui-button class="show-modal">Show Modal</ui-button>
+</div>

demo/src/demo/modal/multiple/index.ts

@@ -0,0 +1,12 @@
+import { Component } from 'vue-typed';
+import { Base } from '../../base'
+import * as Vue from 'vue'
+
+@Component({
+	template: require('./index.html')
+})
+export class ModalMultiple extends Base  {
+	showSecondModal() {
+		this.$ui.modal('#second-modal').show()
+	}
+}

demo/src/demo/routes.ts

@@ -20,6 +20,7 @@ import { DateDemo } from './date';
 import { Time } from './time';
 import { DateTime } from './datetime';
 import { Modal } from './modal';
+import { ModalMultiple } from './modal/multiple';
 import { Tree } from './tree';
 import { MenuDropdown } from './menu/dropdown';
 import { MenuVertical } from './menu/vertical';
@@ -56,6 +57,7 @@ const m = [
 	{ group: 'component/checkbox', text: 'Checkbox', path: 'checkbox', component: Checkbox },
 	{ group: 'component/dropdown', text: 'Dropdown', path: 'dropdown', component: Dropdown },
 	{ group: 'component/modal', text: 'Modal', path: 'modal', component: Modal },
+	{ group: 'component/modal', text: 'Multiple Modal', path: 'modal/multiple', component: ModalMultiple },
 	{ group: 'component/tree', text: 'Tree', path: 'tree', component: Tree },
 	{ group: 'component/menu-dropdown', text: 'Menu Dropdown', path: 'menu/dropdown', component: MenuDropdown },
 	{ group: 'component/menu-horizontal', text: 'Menu Horizontal', path: 'menu/horizontal', component: MenuHorizontal },

dist/vue-typed-ui.js

@@ -2675,7 +2675,24 @@ var _ModalBase = function (_Vue) {
 
     function _ModalBase() {
         classCallCheck(this, _ModalBase);
-        return possibleConstructorReturn(this, (_ModalBase.__proto__ || Object.getPrototypeOf(_ModalBase)).apply(this, arguments));
+
+        /**
+         * Allow second modal to be opened on top of the first modal.
+         *
+         * @default false
+         * @type {boolean}
+         */
+        var _this = possibleConstructorReturn(this, (_ModalBase.__proto__ || Object.getPrototypeOf(_ModalBase)).apply(this, arguments));
+
+        _this.allowMultiple = false;
+        /**
+         * First input in modal will receive focus when shown.
+         *
+         * @default false
+         * @type {boolean}
+         */
+        _this.autofocus = false;
+        return _this;
     }
 
     return _ModalBase;
@@ -2697,6 +2714,12 @@ __decorate([vueTyped.Prop({
     type: Boolean
 })], _ModalBase.prototype, "closable", void 0);
 __decorate([vueTyped.Prop()], _ModalBase.prototype, "transition", void 0);
+__decorate([vueTyped.Prop({
+    type: Boolean
+})], _ModalBase.prototype, "allowMultiple", void 0);
+__decorate([vueTyped.Prop({
+    type: Boolean
+})], _ModalBase.prototype, "autofocus", void 0);
 
 var Modal = function (_ModalBase2) {
     inherits(Modal, _ModalBase2);
@@ -2725,7 +2748,9 @@ var Modal = function (_ModalBase2) {
                 onHidden: emit('hidden'),
                 onVisible: emit('visible'),
                 closable: this.closable,
-                transition: this.transition
+                transition: this.transition,
+                allowMultiple: this.allowMultiple,
+                autofocus: this.autofocus
             });
             if (this.attachShow) $(this.$el).modal('attach events', this.attachShow, 'show');
             if (this.attachHide) $(this.$el).modal('attach events', this.attachHide, 'hide');

doc/api.json

@@ -809,6 +809,11 @@
       }
     },
     "props": {
+      "allow-multiple": {
+        "description": "Allow second modal to be opened on top of the first modal.",
+        "type": "boolean",
+        "default": "false"
+      },
       "attach-hide": {
         "description": "Attach hide event to another element",
         "type": "string",
@@ -849,6 +854,11 @@
           }
         }
       },
+      "autofocus": {
+        "description": "First input in modal will receive focus when shown.",
+        "type": "boolean",
+        "default": "false"
+      },
       "closable": {
         "description": "Setting to false will not allow you to close the modal by clicking on the dimmer.",
         "type": "boolean"

src/components/modal/_base.ts

@@ -70,4 +70,26 @@ export abstract class _ModalBase extends Vue {
     @Prop()
     transition: SemanticUI.AnimationNames
 
+    /**
+     * Allow second modal to be opened on top of the first modal.
+     * 
+     * @default false
+     * @type {boolean}
+     */
+    @Prop({
+        type: Boolean
+    })
+    allowMultiple: boolean = false
+
+    /**
+     * First input in modal will receive focus when shown.
+     * 
+     * @default false
+     * @type {boolean}
+     */
+    @Prop({
+        type: Boolean
+    })
+    autofocus: boolean = false
+
 }

src/components/modal/index.ts

@@ -38,7 +38,7 @@ export class Modal extends _ModalBase implements SemanticUI.Modal.Settings {
 				self.$emit(fn, e)
 				return e.result;
 			}
-		} as Function
+		} as Function		
 
 		$(this.$el).modal({
 			onDeny: emit('deny'),
@@ -48,7 +48,9 @@ export class Modal extends _ModalBase implements SemanticUI.Modal.Settings {
 			onHidden: emit('hidden'),
 			onVisible: emit('visible'),
 			closable: this.closable,
-			transition: this.transition				
+			transition: this.transition,
+			allowMultiple: this.allowMultiple,
+			autofocus: this.autofocus
 		})
 
 		if (this.attachShow) $(this.$el).modal('attach events', this.attachShow, 'show')

src/components/modal/schema/props.json

@@ -50,6 +50,16 @@
 		"transition": {
 			"description": "Named transition to use when animating menu in and out, full list can be found in ui transitions docs.",
 			"type": "SemanticUI.AnimationNames"
+		},
+		"allow-multiple": {
+			"description": "Allow second modal to be opened on top of the first modal.",
+			"type": "boolean",
+			"default": "false"
+		},
+		"autofocus": {
+			"description": "First input in modal will receive focus when shown.",
+			"type": "boolean",
+			"default": "false"
 		}
 	}
 }