diff --git a/src/assets/demo/demo.css b/src/assets/demo/demo.css new file mode 100755 index 0000000..7c08428 --- /dev/null +++ b/src/assets/demo/demo.css @@ -0,0 +1,63 @@ +.tim-row { + margin-bottom: 20px; +} + +.tim-white-buttons { + background-color: #777777; +} + +.typography-line { + padding-left: 25%; + margin-bottom: 35px; + position: relative; + display: block; + width: 100%; +} + +.typography-line span { + bottom: 10px; + color: #c0c1c2; + display: block; + font-weight: 400; + font-size: 13px; + line-height: 13px; + left: 0; + position: absolute; + width: 260px; + text-transform: none; +} + +.tim-row { + padding-top: 60px; +} + +.tim-row h3 { + margin-top: 0; +} + +.offline-doc .page-header { + display: flex; + align-items: center; +} + +.offline-doc .footer { + position: absolute; + width: 100%; + background: transparent; + bottom: 0; + color: #fff; + z-index: 1; +} + +@media all and (min-width: 992px) { + .sidebar .nav>li.active-pro { + position: absolute; + width: 100%; + bottom: 10px; + } +} + +.card.card-upgrade .card-category { + max-width: 530px; + margin: 0 auto; +} \ No newline at end of file diff --git a/src/components/Button.vue b/src/components/Button.vue index 972990a..ebfc4bd 100644 --- a/src/components/Button.vue +++ b/src/components/Button.vue @@ -3,6 +3,7 @@ :is="tag" :type="nativeType" :disabled="disabled || loading" + @click="handleClick" class="btn" :class="[ {'btn-round': round}, @@ -46,6 +47,11 @@ export default { default: "" }, simple: Boolean + }, + methods: { + handleClick(evt) { + this.$emit('click', evt); + } } }; diff --git a/src/components/NotificationPlugin/Notification.vue b/src/components/NotificationPlugin/Notification.vue new file mode 100644 index 0000000..657e9e6 --- /dev/null +++ b/src/components/NotificationPlugin/Notification.vue @@ -0,0 +1,171 @@ + + + diff --git a/src/components/NotificationPlugin/Notifications.vue b/src/components/NotificationPlugin/Notifications.vue new file mode 100644 index 0000000..7ef77a2 --- /dev/null +++ b/src/components/NotificationPlugin/Notifications.vue @@ -0,0 +1,81 @@ + + + diff --git a/src/components/NotificationPlugin/index.js b/src/components/NotificationPlugin/index.js new file mode 100644 index 0000000..e871fb6 --- /dev/null +++ b/src/components/NotificationPlugin/index.js @@ -0,0 +1,66 @@ +import Notifications from './Notifications.vue'; + +const NotificationStore = { + state: [], // here the notifications will be added + settings: { + overlap: false, + verticalAlign: 'top', + horizontalAlign: 'right', + type: 'info', + timeout: 5000, + closeOnClick: true, + showClose: true + }, + setOptions(options) { + this.settings = Object.assign(this.settings, options); + }, + removeNotification(timestamp) { + const indexToDelete = this.state.findIndex(n => n.timestamp === timestamp); + if (indexToDelete !== -1) { + this.state.splice(indexToDelete, 1); + } + }, + addNotification(notification) { + if (typeof notification === 'string' || notification instanceof String) { + notification = { message: notification }; + } + notification.timestamp = new Date(); + notification.timestamp.setMilliseconds( + notification.timestamp.getMilliseconds() + this.state.length + ); + notification = Object.assign({}, this.settings, notification); + this.state.push(notification); + }, + notify(notification) { + if (Array.isArray(notification)) { + notification.forEach(notificationInstance => { + this.addNotification(notificationInstance); + }); + } else { + this.addNotification(notification); + } + } +}; + +const NotificationsPlugin = { + install(Vue, options) { + let app = new Vue({ + data: { + notificationStore: NotificationStore + }, + methods: { + notify(notification) { + this.notificationStore.notify(notification); + } + } + }); + Vue.prototype.$notify = app.notify; + Vue.prototype.$notifications = app.notificationStore; + Vue.component('Notifications', Notifications); + if (options) { + NotificationStore.setOptions(options); + } + } +}; + +export default NotificationsPlugin; diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue index a9ad676..0dd34c2 100644 --- a/src/pages/Dashboard.vue +++ b/src/pages/Dashboard.vue @@ -1,196 +1,10 @@ diff --git a/src/pages/Notifications.vue b/src/pages/Notifications.vue index 2312de6..d240b74 100644 --- a/src/pages/Notifications.vue +++ b/src/pages/Notifications.vue @@ -60,24 +60,24 @@
- Top Left + Top Left
- Top Center + Top Center
- Top Right + Top Right
- Bottom Left + Bottom Left
- Bottom Center + Bottom Center
- Bottom Right + Bottom Right
@@ -102,7 +102,7 @@ export default { const color = Math.floor(Math.random() * 4 + 1); this.$notify({ component: NotificationTemplate, - icon: "ti-gift", + icon: "tim-icons icon-bell-55", horizontalAlign: horizontalAlign, verticalAlign: verticalAlign, type: this.type[color] diff --git a/src/pages/Typography.vue b/src/pages/Typography.vue index e23a741..8230470 100644 --- a/src/pages/Typography.vue +++ b/src/pages/Typography.vue @@ -1,167 +1,166 @@ diff --git a/src/plugins/blackDashboard.js b/src/plugins/blackDashboard.js index 21d72d0..8035567 100644 --- a/src/plugins/blackDashboard.js +++ b/src/plugins/blackDashboard.js @@ -1,5 +1,6 @@ import Notify from "vue-notifyjs"; import "@/assets/css/nucleo-icons.css"; +import "@/assets/demo/demo.css"; import SideBar from "@/components/SidebarPlugin"; import GlobalComponents from "./globalComponents"; import GlobalDirectives from "./globalDirectives";