complete component

Author: xutao15

dist/components/alert/alert.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="i-alert"
+    :class="[iClass, 'i-alert-' + type, showIcon ? 'i-alert-with-icon' : '', desc ? 'i-alert-with-desc' : '']"
+    v-if="!closed">
+    <div v-if="showIcon" class="i-alert-icon">
+      <i-icon type="prompt" :size="desc ? 24 : 16" v-if="type === 'info'"></i-icon>
+      <i-icon type="success" :size="desc ? 24 : 16" v-if="type === 'success'"></i-icon>
+      <i-icon type="warning" :size="desc ? 24 : 16" v-if="type === 'warning'"></i-icon>
+      <i-icon type="delete" :size="desc ? 24 : 16" v-if="type === 'error'"></i-icon>
+    </div>
+    <slot></slot>
+    <div class="i-alert-desc">
+      <slot name="desc"></slot>
+    </div>
+    <div class="i-alert-close" v-if="closable" @click="handleTap">
+      <i-icon type="close"></i-icon>
+    </div>
+  </div>
+</template>
+<script>
+import icon from '../icon/icon'
+export default {
+  components: {
+    'i-icon': icon
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'info'
+    },
+    closable: {
+      type: Boolean,
+      value: false
+    },
+    showIcon: {
+      type: Boolean,
+      default: false
+    },
+    desc: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      closed: false
+    }
+  },
+  methods: {
+    handleTap() {
+      this.closed = !this.closed
+      this.$emit('close')
+    }
+  }
+}
+</script>

dist/components/alert/index.js

@@ -0,0 +1,3 @@
+import alert from 'alert.vue'
+
+export default alert

dist/components/alert/style/alert.css

@@ -0,0 +1,64 @@
+@import "../../common/_base.less";
+@import "../../common/_mixins.less";
+@import "../../icon/style/icon.less";
+
+.bg-color(@color) {
+  color: #fff;
+  background: @color;
+}
+
+.i-alert {
+  position: relative;
+  margin: 10px;
+  padding: 8px 48px 8px 16px;
+  font-size: @size-font-base;
+  border-radius: 2px;
+  .bg-color(@background-color-base);
+  color: @text-color;
+
+  &&-with-icon {
+    padding: 8px 48px 8px 38px;
+  }
+  &-info {
+    .bg-color(@info-color);
+  }
+  &-success {
+    .bg-color(@success-color);
+  }
+  &-warning {
+    .bg-color(@warning-color);
+  }
+  &-error {
+    .bg-color(@error-color);
+  }
+  &-icon {
+    position: absolute;
+    top: 9px;
+    left: 16px;
+    font-size: @size-font-base;
+  }
+  &-desc {
+    font-size: @size-font-small;
+  }
+  &-with-desc {
+    padding: 16px;
+    position: relative;
+  }
+  &-with-desc&-with-icon {
+    padding: 16px 16px 16px 69px;
+  }
+  &-with-desc &-icon {
+    top: 50%;
+    left: 24px;
+    margin-top: -21px;
+    font-size: 28px;
+  }
+  &-close {
+    font-size: @size-font-small;
+    position: absolute;
+    right: 16px;
+    top: 8px;
+    overflow: hidden;
+    cursor: pointer;
+  }
+}

dist/components/alert/style/alert.less

@@ -0,0 +1 @@
+import './alert.css'

dist/components/alert/style/css.js

@@ -0,0 +1 @@
+import './alert.less'

dist/components/alert/style/index.js

@@ -0,0 +1,24 @@
+<template>
+  <div class="i-avatar" :class="[iClass, 'i-avatar-' + shape, 'i-avatar-' + size, src ? 'i-avatar-image' : '']">
+    <image :src="src" v-if="src"></image>
+    <div class="i-avatar-string" v-else><slot></slot></div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    shape: {
+      type: String,
+      default: 'circle'
+    },
+    size: {
+      type: String,
+      default: 'default'
+    },
+    src: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>

dist/components/avatar/avatar.vue

@@ -0,0 +1,3 @@
+import avatar from 'avatar.vue'
+
+export default avatar

dist/components/avatar/index.js

@@ -0,0 +1,48 @@
+.i-avatar {
+  display: inline-block;
+  text-align: center;
+  background: #ccc;
+  color: #fff;
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  vertical-align: middle;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  border-radius: 16px;
+  font-size: 18px;
+}
+.i-avatar .ivu-avatar-string {
+  line-height: 32px;
+}
+.i-avatar-large {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  border-radius: 20px;
+  font-size: 24px;
+}
+.i-avatar-large .ivu-avatar-string {
+  line-height: 40px;
+}
+.i-avatar-small {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  border-radius: 12px;
+  font-size: 14px;
+}
+.i-avatar-small .ivu-avatar-string {
+  line-height: 24px;
+}
+.i-avatar-image {
+  background: transparent;
+}
+.i-avatar-square {
+  border-radius: 4px;
+}
+.i-avatar > image {
+  width: 100%;
+  height: 100%;
+}

dist/components/avatar/style/avatar.css

@@ -0,0 +1,48 @@
+@import "../../common/_base.less";
+@import "../../common/_mixins.less";
+
+.i-avatar {
+  display: inline-block;
+  text-align: center;
+  background: @avatar-bg;
+  color: @avatar-color;
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  vertical-align: middle;
+
+  .avatar-size(@avatar-size-base, @avatar-font-size-base);
+
+  &-large {
+    .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
+  }
+
+  &-small {
+    .avatar-size(@avatar-size-sm, @avatar-font-size-sm);
+  }
+
+  &-image {
+    background: transparent;
+  }
+
+  &-square {
+    border-radius: @avatar-border-radius;
+  }
+
+  & > image {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.avatar-size(@size, @font-size) {
+  width: @size;
+  height: @size;
+  line-height: @size;
+  border-radius: @size / 2;
+  font-size: @font-size;
+
+  .ivu-avatar-string {
+    line-height: @size;
+  }
+}