Initial commit

packages/notification/cooking.conf.js

@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElNotification',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();

packages/notification/index.js

@@ -0,0 +1,3 @@
+import Notification from './src/main.js';
+
+module.exports = Notification;

packages/notification/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "el-notification",
+  "version": "0.0.0",
+  "description": "A notification component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/notification",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {}
+}

packages/notification/src/main.js

@@ -0,0 +1,54 @@
+import Vue from 'vue';
+var NotificationConstructor = Vue.extend(require('./main.vue'));
+
+var instance;
+var instances = [];
+var seed = 1;
+
+var Notification = function(options) {
+  options = options || {};
+  var userOnClose = options.onClose;
+  var id = 'notification_' + seed++;
+
+  options.onClose = function() {
+    Notification.close(id, userOnClose);
+  };
+
+  instance = new NotificationConstructor({
+    data: options
+  });
+  instance.id = id;
+  instance.vm = instance.$mount();
+  instance.vm.$appendTo('body');
+  instance.dom = instance.vm.$el;
+
+  var topDist = 0;
+  for (var i = 0, len = instances.length; i < len; i++) {
+    topDist += instances[i].$el.offsetHeight + 16;
+  }
+  topDist += 16;
+  instance.top = topDist;
+  instances.push(instance);
+};
+
+Notification.close = function(id, userOnClose) {
+  for (var i = 0, len = instances.length; i < len; i++) {
+    if (id === instances[i].id) {
+      if (typeof userOnClose === 'function') {
+        userOnClose(instances[i]);
+      }
+      var index = i;
+      var removedHeight = instances[i].dom.offsetHeight;
+      instances.splice(i, 1);
+      break;
+    }
+  }
+
+  if (len > 1) {
+    for (i = index; i < len - 1 ; i++) {
+      instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 10 + 'px';
+    }
+  }
+};
+
+export default Notification;

packages/notification/src/main.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="el-notification" transition="el-notification-fade" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
+    <i class="el-notification__icon el-icon-{{typeClass}}" v-if="type"></i>
+    <div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }">
+      <span>{{ title }}</span>
+      <p>{{ message }}</p>
+      <div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div>
+    </div>
+  </div>
+</template>
+
+<script type="text/babel">
+  let typeMap = {
+    success: 'circle-check',
+    info: 'information',
+    warning: 'warning',
+    error: 'circle-cross'
+  };
+
+  export default {
+    name: 'ElNotification',
+
+    data() {
+      return {
+        title: '',
+        message: '',
+        duration: 4500,
+        type: '',
+        onClose: null,
+
+        closed: false,
+        top: null,
+        timer: null
+      };
+    },
+
+    computed: {
+      typeClass() {
+        return this.type ? typeMap[this.type] : '';
+      }
+    },
+
+    watch: {
+      closed(newVal) {
+        if (newVal) {
+          this.$destroy(true);
+        }
+      }
+    },
+
+    methods: {
+      handleClose() {
+        this.closed = true;
+        if (typeof this.onClose === 'function') {
+          this.onClose();
+        }
+      },
+
+      clearTimer() {
+        clearTimeout(this.timer);
+      },
+
+      startTimer() {
+        if (this.duration > 0) {
+          this.timer = setTimeout(() => {
+            if (!this.closed) {
+              this.handleClose();
+            }
+          }, this.duration);
+        }
+      }
+    },
+
+    ready() {
+      if (this.duration > 0) {
+        this.timer = setTimeout(() => {
+          if (!this.closed) {
+            this.handleClose();
+          }
+        }, this.duration);
+      }
+    }
+  };
+</script>