Skip to content

Commit 187fa1f

Browse files
budiadionobudiadiono
committed
Message Component - closes #6 
1 parent 2ab82d9 commit 187fa1f

File tree

10 files changed

+276
-5
lines changed

10 files changed

+276
-5
lines changed

‎demo/src/demo/message/index.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<div>
2+
3+
<ui-message>
4+
<div slot="header">
5+
Changes in Service
6+
</div>
7+
We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.
8+
</ui-message>
9+
10+
<ui-message icon="inbox">
11+
<div slot="header">Have you heard about our mailing list?</div>
12+
Get the best news in your e-mail every day.
13+
</ui-message>
14+
15+
<ui-message icon="notched circle loading" :closable="true">
16+
<div slot="header">Just one second</div>
17+
We're fetching that content for you.
18+
</ui-message>
19+
20+
<ui-message>
21+
<div slot="header">
22+
New Site Features
23+
</div>
24+
<ul class="list">
25+
<li>You can now have cover images on blog pages</li>
26+
<li>Drafts will now auto-save while writing</li>
27+
</ul>
28+
</ui-message>
29+
30+
<ui-message kind="floating">
31+
Way to go!
32+
</ui-message>
33+
34+
<ui-message kind="compact">
35+
Get all the best inventions in your e-mail every day. Sign up now!
36+
</ui-message>
37+
38+
<ui-message class="warning">
39+
Warning
40+
</ui-message>
41+
42+
<ui-message class="info">
43+
Info
44+
</ui-message>
45+
46+
<ui-message class="error">
47+
Error
48+
</ui-message>
49+
50+
<ui-message class="success">
51+
Success
52+
</ui-message>
53+
54+
55+
</div>

‎demo/src/demo/message/index.ts‎

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

‎demo/src/demo/routes.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { DateTime } from './datetime';
1515
import { Modal } from './modal';
1616
import { Tree } from './tree';
1717
import { Menu } from './menu';
18+
import { Message } from './message';
1819

1920

2021
// Main routes builder
@@ -35,7 +36,8 @@ const m = [
3536
{ text: 'Dropdown', path: 'dropdown', component: Dropdown },
3637
{ text: 'Modal', path: 'modal', component: Modal },
3738
{ text: 'Tree', path: 'tree', component: Tree },
38-
{ text: 'Menu', path: 'menu', component: Menu }
39+
{ text: 'Menu', path: 'menu', component: Menu },
40+
{ text: 'Message', path: 'message', component: Message }
3941
]
4042

4143
// Build router routes

‎dist/vue-typed-ui.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2359,6 +2359,66 @@ var H5 = function (_HeaderBase9) {
23592359
}(HeaderBase);
23602360
H5 = __decorate([vueTyped.Component()], H5);
23612361

2362+
var _MessageBase = function (_Vue) {
2363+
inherits(_MessageBase, _Vue);
2364+
2365+
function _MessageBase() {
2366+
classCallCheck(this, _MessageBase);
2367+
2368+
/**
2369+
* Add close icon choose to hide message.
2370+
*
2371+
* @default false
2372+
* @type {boolean}
2373+
*/
2374+
var _this = possibleConstructorReturn(this, (_MessageBase.__proto__ || Object.getPrototypeOf(_MessageBase)).apply(this, arguments));
2375+
2376+
_this.closable = false;
2377+
/**
2378+
* Semantic UI transition on closing message.
2379+
*
2380+
* @default 'fade'
2381+
* @type {string}
2382+
*/
2383+
_this.transition = 'fade';
2384+
return _this;
2385+
}
2386+
2387+
return _MessageBase;
2388+
}(Vue);
2389+
2390+
__decorate([vueTyped.Prop({
2391+
type: Boolean
2392+
})], _MessageBase.prototype, "closable", void 0);
2393+
__decorate([vueTyped.Prop({
2394+
type: String
2395+
})], _MessageBase.prototype, "transition", void 0);
2396+
__decorate([vueTyped.Prop()], _MessageBase.prototype, "kind", void 0);
2397+
__decorate([vueTyped.Prop({
2398+
type: String
2399+
})], _MessageBase.prototype, "icon", void 0);
2400+
2401+
var Message = function (_MessageBase2) {
2402+
inherits(Message, _MessageBase2);
2403+
2404+
function Message() {
2405+
classCallCheck(this, Message);
2406+
return possibleConstructorReturn(this, (Message.__proto__ || Object.getPrototypeOf(Message)).apply(this, arguments));
2407+
}
2408+
2409+
createClass(Message, [{
2410+
key: 'mounted',
2411+
value: function mounted() {
2412+
if (this.icon) {
2413+
$(this.$el).addClass('icon');
2414+
}
2415+
}
2416+
}]);
2417+
return Message;
2418+
}(_MessageBase);
2419+
Message = __decorate([vueTyped.Component({
2420+
template: '\n\t<div class="ui message">\n \t<i v-if="closable" class="close icon"></i>\n\t\t<div v-if="header && !icon" class="header">\n \t\t<slot name="header"></slot>\n\t\t</div>\n\t\t<p v-if="!icon"><slot></slot></p>\n\t\t<i v-if="icon" class="{{icon}} icon"></i>\n\t\t<div v-if="icon" class="content">\n\t\t\t<div v-if="header" class="header">\n \t\t<slot name="header"></slot>\n\t\t\t</div>\n \t<p><slot></slot></p>\n \t</div>\n\t</div>\n\t' })], Message);
2421+
23622422
var _ModalBase = function (_Vue) {
23632423
inherits(_ModalBase, _Vue);
23642424

@@ -2683,6 +2743,7 @@ var c = Object.freeze({
26832743
get H3 () { return H3; },
26842744
get H4 () { return H4; },
26852745
get H5 () { return H5; },
2746+
get Message () { return Message; },
26862747
get Modal () { return Modal; },
26872748
get Tree () { return Tree; }
26882749
});

‎doc/api.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -424,6 +424,7 @@
424424
},
425425
"header": {
426426
"module": "header",
427+
"isBase": "true",
427428
"base": {
428429
"Vue": "vue"
429430
},
@@ -561,6 +562,33 @@
561562
},
562563
"methods": {}
563564
},
565+
"message": {
566+
"module": "message",
567+
"base": {
568+
"Vue": "vue"
569+
},
570+
"props": {
571+
"closable": {
572+
"type": "boolean",
573+
"description": "Add close icon choose to hide message.",
574+
"default": "false"
575+
},
576+
"icon": {
577+
"type": "string",
578+
"description": "Icon appears on the left of message contens."
579+
},
580+
"kind": {
581+
"type": "'default' | 'compact' | 'floating'",
582+
"description": "Message variations."
583+
},
584+
"transition": {
585+
"type": "string",
586+
"description": "Semantic UI transition on closing message.",
587+
"default": "'fade'"
588+
}
589+
},
590+
"methods": {}
591+
},
564592
"modal": {
565593
"module": "modal",
566594
"isBase": false,

‎lib/methods.d.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
interface JQuery {
2-
3-
}
4-
51
export interface Modal {
62

73
/**

‎src/components/etc/message/_base.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
* PLEASE DO NOT EDIT THIS FILE (automatically generated from ./schema/props.json)
3+
*/
4+
import {
5+
Prop
6+
} from "vue-typed"
7+
import * as Vue from "vue"
8+
9+
export abstract class _MessageBase extends Vue {
10+
11+
/**
12+
* Add close icon choose to hide message.
13+
*
14+
* @default false
15+
* @type {boolean}
16+
*/
17+
@Prop({
18+
type: Boolean
19+
})
20+
closable: boolean = false
21+
22+
/**
23+
* Semantic UI transition on closing message.
24+
*
25+
* @default 'fade'
26+
* @type {string}
27+
*/
28+
@Prop({
29+
type: String
30+
})
31+
transition: string = 'fade'
32+
33+
/**
34+
* Message variations.
35+
*
36+
* @type {'default' | 'compact' | 'floating'}
37+
*/
38+
@Prop()
39+
kind: 'default' | 'compact' | 'floating'
40+
41+
/**
42+
* Icon appears on the left of message contens.
43+
*
44+
* @type {string}
45+
*/
46+
@Prop({
47+
type: String
48+
})
49+
icon: string
50+
51+
}

‎src/components/etc/message/index.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import * as Vue from 'vue'
2+
import { Component } from 'vue-typed'
3+
import { _MessageBase } from './_base'
4+
5+
@Component({
6+
template: `
7+
<div class="ui message">
8+
<i v-if="closable" class="close icon"></i>
9+
<div v-if="$slots.header && !icon" class="header">
10+
<slot name="header"></slot>
11+
</div>
12+
<p v-if="!icon"><slot></slot></p>
13+
<i v-if="icon" :class="icon + ' icon'"></i>
14+
<div v-if="icon" class="content">
15+
<div v-if="$slots.header" class="header">
16+
<slot name="header"></slot>
17+
</div>
18+
<p><slot></slot></p>
19+
</div>
20+
</div>
21+
` })
22+
export class Message extends _MessageBase {
23+
mounted() {
24+
25+
let self = this
26+
27+
if (this.icon) {
28+
$(this.$el).addClass('icon')
29+
}
30+
31+
if (this.kind && this.kind !== 'default') {
32+
$(this.$el).addClass(this.kind)
33+
}
34+
35+
if (this.closable) {
36+
$(this.$el).find('.close.icon')
37+
.on('click', function () {
38+
$(this)
39+
.closest('.message')
40+
.transition(self.transition)
41+
})
42+
}
43+
}
44+
}

‎src/components/etc/message/schema/props.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"base": {
3+
"Vue": "vue"
4+
},
5+
"props": {
6+
"closable": {
7+
"type": "boolean",
8+
"description": "Add close icon choose to hide message.",
9+
"default": "false"
10+
},
11+
"transition": {
12+
"type": "string",
13+
"description": "Semantic UI transition on closing message.",
14+
"default": "'fade'"
15+
},
16+
"kind": {
17+
"type": "'default' | 'compact' | 'floating'",
18+
"description": "Message variations."
19+
},
20+
"icon": {
21+
"type": "string",
22+
"description": "Icon appears on the left of message contens."
23+
}
24+
}
25+
}

‎src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export * from './menus/menu-item';
3232
export * from './menus/menu-dropdown';
3333
export * from './etc/view-source';
3434
export * from './etc/header';
35+
export * from './etc/message';
3536

3637
export * from './modal'
3738

0 commit comments

Comments
 (0)