Skip to content

Commit ad5ff14

Browse files
budiadionobudiadiono
committed
[modal] added icon prop
1 parent 4981521 commit ad5ff14

File tree

7 files changed

+117
-64
lines changed

7 files changed

+117
-64
lines changed

‎demo/src/demo/modal/basic/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div>
2+
<ui-modal id="basic-modal" attach-show=".show-modal" :allow-multiple="true" icon="archive" class="basic">
3+
<div slot="header">
4+
Archive Old Messages
5+
</div>
6+
<p style="text-align: center">Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
7+
<span slot="actions">
8+
<ui-button class="red cancel inverted">No</ui-button>
9+
<ui-button class="green ok inverted">Yes</ui-button>
10+
</span>
11+
</ui-modal>
12+
<ui-button class="show-modal">Show Modal</ui-button>
13+
</div>

‎demo/src/demo/modal/basic/index.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Component } from 'vue-typed';
2+
import { Base } from '../../base'
3+
import * as Vue from 'vue'
4+
5+
@Component({
6+
template: require('./index.html')
7+
})
8+
export class ModalBasic extends Base {
9+
10+
}

‎demo/src/demo/routes.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { Time } from './time';
2121
import { DateTime } from './datetime';
2222
import { Modal } from './modal';
2323
import { ModalMultiple } from './modal/multiple';
24+
import { ModalBasic } from './modal/basic';
2425
import { Tree } from './tree';
2526
import { MenuDropdown } from './menu/dropdown';
2627
import { MenuVertical } from './menu/vertical';
@@ -58,6 +59,7 @@ const m = [
5859
{ group: 'component/dropdown', text: 'Dropdown', path: 'dropdown', component: Dropdown },
5960
{ group: 'component/modal', text: 'Modal', path: 'modal', component: Modal },
6061
{ group: 'component/modal', text: 'Multiple Modal', path: 'modal/multiple', component: ModalMultiple },
62+
{ group: 'component/modal', text: 'Basic Modal', path: 'modal/basic', component: ModalBasic },
6163
{ group: 'component/tree', text: 'Tree', path: 'tree', component: Tree },
6264
{ group: 'component/menu-dropdown', text: 'Menu Dropdown', path: 'menu/dropdown', component: MenuDropdown },
6365
{ group: 'component/menu-horizontal', text: 'Menu Horizontal', path: 'menu/horizontal', component: MenuHorizontal },

‎doc/api.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -908,6 +908,10 @@
908908
"description": "Setting to false will not allow you to close the modal by clicking on the dimmer.",
909909
"type": "boolean"
910910
},
911+
"icon": {
912+
"description": "Header icon.",
913+
"type": "string"
914+
},
911915
"transition": {
912916
"description": "Named transition to use when animating menu in and out, full list can be found in ui transitions docs.",
913917
"type": "SemanticUI.AnimationNames"

‎src/components/modal/_base.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,4 +92,14 @@ export abstract class _ModalBase extends Vue {
9292
})
9393
autofocus: boolean = false
9494

95+
/**
96+
* Header icon.
97+
*
98+
* @type {string}
99+
*/
100+
@Prop({
101+
type: String
102+
})
103+
icon: string
104+
95105
}

‎src/components/modal/index.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import { _ModalBase } from './_base';
88
@Component({
99
template: `<div class="ui modal">
1010
<i v-if="closable" class="close icon"></i>
11-
<div class="header" v-if="hasHeader">
11+
<div :class="headerCss" v-if="hasHeader">
12+
<i :class="icon + ' icon'" v-if="icon"></i>
1213
<slot name="header"></slot>
1314
</div>
1415
<div class="content">
@@ -28,6 +29,15 @@ export class Modal extends _ModalBase implements SemanticUI.Modal.Settings {
2829
return this.$slots['header'] != undefined;
2930
}
3031

32+
get headerCss() {
33+
if (!this.hasHeader) return '';
34+
35+
if (this.icon)
36+
return 'ui header icon';
37+
38+
return 'header';
39+
}
40+
3141
mounted() {
3242

3343
var self = this;

‎src/components/modal/schema/props.json‎

Lines changed: 67 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,69 @@
11
{
2-
"base": {
3-
"Vue": "vue"
4-
},
5-
"props": {
6-
"attach-show": {
7-
"description": "Attach show event to another element",
8-
"type": "string",
9-
"params": {
10-
"selector": {
11-
"type": "HTMLElement | JQuery | string",
12-
"description": "Element identifier"
13-
}
14-
}
15-
},
16-
"attach-hide": {
17-
"description": "Attach hide event to another element",
18-
"type": "string",
19-
"params": {
20-
"selector": {
21-
"type": "HTMLElement | JQuery | string",
22-
"description": "Element identifier"
23-
}
24-
}
25-
},
26-
"attach-toggle": {
27-
"description": "Attach toggle event to another element",
28-
"type": "string",
29-
"params": {
30-
"selector": {
31-
"type": "HTMLElement | JQuery | string",
32-
"description": "Element identifier"
33-
}
34-
}
35-
},
36-
"attach-refresh": {
37-
"description": "Attach refresh event to another element",
38-
"type": "string",
39-
"params": {
40-
"selector": {
41-
"type": "HTMLElement | JQuery | string",
42-
"description": "Element identifier"
43-
}
44-
}
45-
},
46-
"closable": {
47-
"description": "Setting to false will not allow you to close the modal by clicking on the dimmer.",
48-
"type": "boolean"
49-
},
50-
"transition": {
51-
"description": "Named transition to use when animating menu in and out, full list can be found in ui transitions docs.",
52-
"type": "SemanticUI.AnimationNames"
53-
},
54-
"allow-multiple": {
55-
"description": "Allow second modal to be opened on top of the first modal.",
56-
"type": "boolean",
57-
"default": "false"
58-
},
59-
"autofocus": {
60-
"description": "First input in modal will receive focus when shown.",
61-
"type": "boolean",
62-
"default": "false"
63-
}
64-
}
2+
"base": {
3+
"Vue": "vue"
4+
},
5+
"props": {
6+
"attach-show": {
7+
"description": "Attach show event to another element",
8+
"type": "string",
9+
"params": {
10+
"selector": {
11+
"type": "HTMLElement | JQuery | string",
12+
"description": "Element identifier"
13+
}
14+
}
15+
},
16+
"attach-hide": {
17+
"description": "Attach hide event to another element",
18+
"type": "string",
19+
"params": {
20+
"selector": {
21+
"type": "HTMLElement | JQuery | string",
22+
"description": "Element identifier"
23+
}
24+
}
25+
},
26+
"attach-toggle": {
27+
"description": "Attach toggle event to another element",
28+
"type": "string",
29+
"params": {
30+
"selector": {
31+
"type": "HTMLElement | JQuery | string",
32+
"description": "Element identifier"
33+
}
34+
}
35+
},
36+
"attach-refresh": {
37+
"description": "Attach refresh event to another element",
38+
"type": "string",
39+
"params": {
40+
"selector": {
41+
"type": "HTMLElement | JQuery | string",
42+
"description": "Element identifier"
43+
}
44+
}
45+
},
46+
"closable": {
47+
"description": "Setting to false will not allow you to close the modal by clicking on the dimmer.",
48+
"type": "boolean"
49+
},
50+
"transition": {
51+
"description": "Named transition to use when animating menu in and out, full list can be found in ui transitions docs.",
52+
"type": "SemanticUI.AnimationNames"
53+
},
54+
"allow-multiple": {
55+
"description": "Allow second modal to be opened on top of the first modal.",
56+
"type": "boolean",
57+
"default": "false"
58+
},
59+
"autofocus": {
60+
"description": "First input in modal will receive focus when shown.",
61+
"type": "boolean",
62+
"default": "false"
63+
},
64+
"icon": {
65+
"description": "Header icon.",
66+
"type": "string"
67+
}
68+
}
6569
}

0 commit comments

Comments
 (0)