complete UI components

dist/components/action-sheet/action-sheet.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="i-as-mask i-class-mask" :class="[visible ? 'i-as-mask-show' : '', iClassMask]" @click="handleClickMask"></div>
+    <div class="i-as" :class="[visible ? 'i-as-show' : '', iClass]">
+      <div class="i-as-header" :class="iClassHeader"><slot name="header"></slot></div>
+      <div class="i-as-actions">
+        <div class="i-as-action-item" v-for="(item, index) in actions" :key="index">
+          <button @click="handleClickItem(index)" class="i-btn i-btn-large i-btn-ghost i-btn-long" :open-type="item.openType">
+              <div class="i-as-btn-loading" v-if="item.loading"></div>
+              <i-icon v-if="item.icon" :type="item.icon" i-class="i-as-btn-icon"></i-icon>
+              <div class="i-as-btn-text" :style="styleObj">{{ item.name }}</div>
+          </button>
+        </div>
+      </div>
+      <div class="i-as-cancel" v-if="showCancel">
+        <i-button i-class="i-as-cacenl-btn" type="ghost" size="large" long="true" @click="handleClickCancel">{{ cancelText }}</i-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import button from '../button/button'
+import icon from '../icon/icon'
+export default {
+  components: {
+    'i-button': button,
+    'i-icon': icon
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    showCancel: {
+      type: Boolean,
+      default: false
+    },
+    cancelText: {
+      type: String,
+      default: '取消'
+    },
+    actions: {
+      type: Array,
+      default: []
+    },
+    iClassMask: {
+      type: String,
+      default: ''
+    },
+    iClassHeader: {
+      type: String,
+      default: ''
+    },
+    iClass: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    handleClickMask() {
+      if (!this.maskClosable || this.maskClosable === 'false') return
+      this.handleClickCancel()
+    },
+    handleClickItem(index) {
+      this.$emit('click', {index})
+    },
+    handleClickCancel() {
+      this.$emit('cancel')
+    }
+  }
+}
+</script>

dist/components/action-sheet/index.js

@@ -0,0 +1,3 @@
+import actionSheet from 'action-sheet.vue'
+
+export default actionSheet

dist/components/action-sheet/style/action-sheet.less

@@ -0,0 +1,144 @@
+@import '../../common/_base.less';
+@import '../../common/_mixins.less';
+@import '../../icon/style/icon.less';
+
+.btn-color(@color) {
+  color: #fff !important;
+  background: @color !important;
+}
+
+.i-as{
+  position: fixed;
+  width: 100%;
+  box-sizing: border-box;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: @background-color-base;
+  transform: translate3d(0, 100%, 0);
+  transform-origin: center;
+  transition: all @transition-time ease-in-out;
+  z-index: @zindex-select;
+  visibility: hidden;
+
+  &-show{
+    transform: translate3d(0, 0, 0);
+    visibility: visible;
+  }
+
+  &-mask{
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: @zindex-select;
+    transition: all @transition-time ease-in-out;
+    opacity: 0;
+    visibility: hidden;
+
+    &-show{
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  &-action-item{
+    position: relative;
+    &::after{
+      .hairline();
+      border-bottom-width: 1px;
+    }
+  }
+
+  &-header{
+    background: #fff;
+    text-align: center;
+    //padding: 16px;
+    position: relative;
+    font-size: @size-font-small;
+    color: @subsidiary-color;
+    &::after{
+      .hairline();
+      border-bottom-width: 1px;
+    }
+  }
+
+  &-cancel{
+    margin-top: 6px;
+  }
+
+  &-btn{
+    &-loading{
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 10px;
+      width: 12px;
+      height: 12px;
+      background: transparent;
+      border-radius: 50%;
+      border: 2px solid #e5e5e5;
+      border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5;
+      animation: btn-spin 0.6s linear;
+      animation-iteration-count: infinite;
+    }
+
+    &-text{
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    &-icon{
+      font-size: @size-font-base !important;
+      margin-right: 4px;
+    }
+  }
+
+  .i-btn {
+    text-align: center;
+    vertical-align: middle;
+    touch-action: manipulation;
+    cursor: pointer;
+    background-image: none;
+    white-space: nowrap;
+    user-select: none;
+    font-size: @size-font-base;
+    border-radius: 2px;
+    border: 0 !important;
+    position: relative;
+    text-decoration: none;
+
+    height: @btn-circle-size;
+    line-height: @btn-circle-size;
+
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+
+    .btn-color(@btn-default-bg);
+    color: @text-color !important;
+
+    margin: 10px;
+    &-large {
+      height: @btn-circle-size-large;
+      line-height: @btn-circle-size-large;
+    }
+    &-ghost {
+      .btn-color(#fff);
+      color: @text-color !important;
+    }
+    &-long {
+      border-radius: 0;
+      margin: 0;
+      box-shadow: none;
+    }
+  }
+}
+
+@keyframes btn-spin {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

dist/components/action-sheet/style/css.js

@@ -0,0 +1 @@
+import './action-sheet.css'

dist/components/action-sheet/style/index.js

@@ -0,0 +1 @@
+import './action-sheet.less'

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.less

@@ -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/css.js

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

dist/components/alert/style/index.js

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

dist/components/avatar/avatar.vue

@@ -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/index.js

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