@aochuang/common 1.0.0 → 1.0.1

package/components/icon/index.js

@@ -0,0 +1,7 @@
+import Icon from './icon'
+
+Icon.install = (Vue) => {
+  Vue.component(Icon.name, Icon)
+}
+
+export default Icon

package/components/image/image.vue

@@ -0,0 +1,299 @@
+<template>
+  <div
+    class="ui-image"
+    :class="className"
+    :style="style"
+    :title="title"
+  >
+    <div class="ui-image__main" :style="mainStyle">
+      <img
+        class="ui-image__img"
+        :src="source"
+        :alt="alt"
+        @load="handleImageLoad"
+        @error="handleImageError"
+        :style="imageStyle"
+      />
+      <ui-icon
+        v-if="status === 'error'"
+        name="image-error-line"
+        :size="iconSize"
+        color="#aaa"
+      ></ui-icon>
+      <div class="ui-image__preview" v-if="previewable && status === 'success'" @click="handlePreviewClick">
+        <ui-icon name="sousuo" :size="30" color="#fff"></ui-icon>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import UiIcon from '../icon'
+import { fileToBase64, getImageClickFn } from './util'
+
+const LoadStatus = {
+  normal: 'normal',
+  loading: 'loading',
+  success: 'success',
+  error: 'error'
+}
+export default {
+  name: 'UiImage',
+  components: {
+    UiIcon
+  },
+  props: {
+    width: {
+      type: String
+    },
+    height: {
+      type: String
+    },
+    maxWidth: {
+      type: Number
+    },
+    maxHeight: {
+      type: Number
+    },
+    fit: {
+      type: String,
+      default: 'none',
+      validator (value) {
+        return ['fill', 'contain', 'cover', 'none', 'scale-down'].indexOf(value) >= 0
+      }
+    },
+    src: {
+      type: [String, File]
+    },
+    alt: {
+      type: String
+    },
+    gray: {
+      type: Boolean,
+      default: false
+    },
+    radius: {
+      type: Number,
+      default: 6
+    },
+    loading: {
+      type: Boolean
+    },
+    previewable: {
+      type: Boolean,
+      default: false
+    },
+    previewMethod: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      source: null,
+      clientWidth: 0,
+      status: LoadStatus.normal
+    }
+  },
+  computed: {
+    style () {
+      const sy = {}
+      if (this.width) {
+        sy.width = this.width
+      }
+      if (this.height) {
+        sy.height = this.height
+      }
+      return sy
+    },
+    mainStyle () {
+      const sy = {
+        'border-radius': this.radius + 'px'
+      }
+      if (this.fit) {
+        if (this.fit === 'none') {
+          sy['background-color'] = '#000'
+        }
+      }
+      return sy
+    },
+    imageStyle () {
+      const sy = {}
+      if (this.fit) {
+        if (this.fit === 'none') {
+          sy['max-width'] = this.maxWidth ? this.maxWidth + 'px' : (this.width === 'auto' ? '' : '100%')
+          sy['max-height'] = this.maxHeight ? this.maxHeight + 'px' : (this.height === 'auto' ? '' : '100%')
+          sy.width = 'auto'
+          sy.height = 'auto'
+        } else {
+          sy['object-fit'] = this.fit
+          sy.width = '100%'
+          sy.height = '100%'
+        }
+      }
+      return sy
+    },
+    title () {
+      if (this.error) {
+        return '图片加载失败'
+      }
+      return this.alt
+    },
+    iconSize () {
+      return this.clientWidth / 2
+    },
+    className () {
+      return ['is-' + this.status, { 'is-gray': this.gray }]
+    }
+  },
+  watch: {
+    src (val) {
+      this.handleLoadImage()
+    },
+    loading (val) {
+      this.updateLoading()
+    }
+  },
+  created () {
+    this.handleLoadImage()
+    this.updateLoading()
+  },
+  mounted () {
+    this.clientWidth = this.$el.clientWidth
+  },
+  methods: {
+    handlePreviewClick () {
+      if (this.previewMethod) {
+        this.previewMethod()
+      } else {
+        this.preview()
+      }
+    },
+    handleLoadImage () {
+      this.resolveSrc()
+    },
+    handleImageLoad () {
+      this.status = LoadStatus.success
+      this.$emit('load')
+    },
+    handleImageError () {
+      this.status = LoadStatus.error
+      this.$emit('error')
+    },
+    preview () {
+      if (!this.src) {
+        return
+      }
+      const clickFn = getImageClickFn()
+      if (clickFn) {
+        clickFn({
+          src: this.src
+        })
+      }
+    },
+    resolveSrc () {
+      if (!this.src) {
+        this.status = this.loading ? LoadStatus.loading : LoadStatus.normal
+        this.source = null
+      } else {
+        this.status = LoadStatus.loading
+        if (this.src instanceof File) {
+          this.status = LoadStatus.loading
+          fileToBase64(this.src).then((rs) => {
+            this.source = rs
+          }, () => {
+            this.status = LoadStatus.error
+          })
+        } else {
+          this.source = this.src
+        }
+      }
+    },
+    updateLoading () {
+      if (!this.src) {
+        this.status = this.loading ? LoadStatus.loading : LoadStatus.normal
+      } else {
+        if (typeof this.loading === 'boolean') {
+          if (this.loading === true) {
+            this.status = LoadStatus.loading
+          } else {
+            this.status = LoadStatus.success
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-image{
+  display: inline-block;
+  vertical-align: top;
+  &.is-loading{
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: ui-image-loading;
+    animation-timing-function: linear;
+    background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%);
+    background-size: 800px 104px;
+  }
+  &.is-gray {
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    filter: grayscale(100%);
+    filter: gray;
+  }
+  &.is-error,&.is-normal{
+    background-color: #eee;
+  }
+  &.is-success{
+    .ui-image__img{
+      display: inline-block;
+    }
+    .ui-image__preview{
+      display: flex;
+    }
+  }
+}
+.ui-image__main{
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+}
+.ui-image__img{
+  display: none;
+}
+
+@keyframes ui-image-loading {
+  0%{
+    background-position: -468px 0
+  }
+  100%{
+    background-position: 468px 0
+  }
+}
+.ui-image__preview{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0,0,0,.3);
+  opacity: 0;
+  transition: all .3s;
+  cursor: pointer;
+  display: none;
+  &:hover{
+    opacity: 1;
+  }
+}
+</style>

package/components/image/index.js

@@ -0,0 +1,12 @@
+import Image from './image'
+import { setImageClickFn } from './util'
+
+Image.install = (Vue, options) => {
+  options = Object.assign({
+    imageClickFn: null
+  }, options)
+  setImageClickFn(options.imageClickFn)
+  Vue.component(Image.name, Image)
+}
+
+export default Image

package/components/image/util.js

@@ -0,0 +1,26 @@
+export function fileToBase64 (file) {
+  return new Promise((resolve, reject) => {
+    if (!file) {
+      reject()
+    } else {
+      var reader = new FileReader()
+      reader.readAsDataURL(file)
+      reader.onload = () => {
+        resolve(reader.result)
+      }
+      reader.onerror = () => {
+        reject()
+      }
+    }
+  })
+}
+
+let imageClickFn = null
+
+export function setImageClickFn (fn) {
+  imageClickFn = fn
+}
+
+export function getImageClickFn () {
+  return imageClickFn
+}

package/components/index.js

@@ -0,0 +1,153 @@
+import Button from './button'
+import BrickWall from './brick-wall'
+import AdvancedFilter from './advanced-filter'
+import Autocomplete from './autocomplete'
+import Dropdown from './dropdown'
+import Switch from './switch'
+import Icon from './icon'
+import Image from './image'
+import Popover from './popover'
+import Toolbar from './toolbar'
+import Tooltip from './tooltip'
+import Text from './text'
+import Menu from './menu'
+import Sortable from './sortable'
+import Dialog from './dialog'
+import Filter from './filter'
+import Grid from './grid'
+import Loading from './loading'
+import Pagination from './pagination'
+import Form from './form'
+import Textarea from './textarea'
+import Textbox from './textbox'
+import Message from './message'
+import MessageBox from './message-box'
+import Empty from './empty'
+import Avatar from './avatar'
+import Drawer from './drawer'
+import Tabs from './tabs'
+import CheckboxGroup from './checkbox-group'
+import Checkbox from './checkbox'
+import CheckboxButton from './checkbox-button'
+import Select from './select'
+import Cascader from './cascader'
+import Searchbox from './searchbox'
+import DatePicker from './date-picker'
+import Radio from './radio'
+import RadioButton from './radio-button'
+import RadioGroup from './radio-group'
+import Video from './video'
+import Spinner from './spinner'
+import SpinnerRange from './spinner-range'
+import SpinnerTextarea from './spinner-textarea'
+import Skeleton from './skeleton'
+import TimePicker from './time-picker'
+import Tag from './tag'
+import Tree from './tree'
+import PopupSelect from './popup-select'
+import Panel from './panel'
+import Transfer from './transfer'
+
+export {
+  AdvancedFilter,
+  Autocomplete,
+  Avatar,
+  Button,
+  BrickWall,
+  Cascader,
+  CheckboxGroup,
+  Checkbox,
+  CheckboxButton,
+  DatePicker,
+  Drawer,
+  Dropdown,
+  Dialog,
+  Empty,
+  Filter,
+  Form,
+  Grid,
+  Icon,
+  Image,
+  Menu,
+  Message,
+  MessageBox,
+  Pagination,
+  Popover,
+  PopupSelect,
+  Panel,
+  Radio,
+  RadioButton,
+  RadioGroup,
+  Sortable,
+  Select,
+  Searchbox,
+  Spinner,
+  SpinnerRange,
+  SpinnerTextarea,
+  Skeleton,
+  Switch,
+  Toolbar,
+  Tooltip,
+  Text,
+  Loading,
+  Textarea,
+  Textbox,
+  Tabs,
+  TimePicker,
+  Tag,
+  Tree,
+  Transfer,
+  Video
+}
+
+export default {
+  install (Vue, options = {}) {
+    Vue.use(Button)
+    Vue.use(Dropdown)
+    Vue.use(Switch)
+    Vue.use(Icon)
+    Vue.use(Image)
+    Vue.use(Popover)
+    Vue.use(Toolbar)
+    Vue.use(Tooltip)
+    Vue.use(Menu)
+    Vue.use(Sortable)
+    Vue.use(Dialog)
+    Vue.use(Filter)
+    Vue.use(Grid, options.grid)
+    Vue.use(Loading)
+    Vue.use(Pagination)
+    Vue.use(Form)
+    Vue.use(Textarea)
+    Vue.use(Textbox)
+    Vue.use(Text)
+    Vue.use(Message)
+    Vue.use(MessageBox)
+    Vue.use(Empty)
+    Vue.use(Avatar)
+    Vue.use(Drawer)
+    Vue.use(Tabs)
+    Vue.use(CheckboxGroup)
+    Vue.use(Checkbox)
+    Vue.use(CheckboxButton)
+    Vue.use(Select)
+    Vue.use(Cascader)
+    Vue.use(Searchbox)
+    Vue.use(DatePicker)
+    Vue.use(Radio)
+    Vue.use(RadioButton)
+    Vue.use(RadioGroup)
+    Vue.use(Video)
+    Vue.use(Spinner)
+    Vue.use(TimePicker)
+    Vue.use(Autocomplete)
+    Vue.use(Tag)
+    Vue.use(SpinnerRange)
+    Vue.use(SpinnerTextarea)
+    Vue.use(PopupSelect)
+    Vue.use(Panel)
+    Vue.use(Transfer)
+    Vue.use(Tree)
+    Vue.use(Skeleton)
+  }
+}

package/components/loading/index.js

@@ -0,0 +1,7 @@
+import Loading from './loading'
+
+Loading.install = (Vue) => {
+  Vue.component(Loading.name, Loading)
+}
+
+export default Loading

package/components/loading/loading.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="ui-loading" :class="['ui-loading--' + size, 'ui-loading--' + type, 'is-' + dir]">
+    <span class="ui-loading__icon"></span>
+    <span class="ui-loading__text" v-if="$slots.default || text">
+      <slot>{{ text }}</slot>
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiLoading',
+  props: {
+    type: {
+      type: String,
+      default: 'default',
+      validator(value) {
+        return ['default', 'primary', 'success', 'warning', 'danger', 'info'].includes(value)
+      }
+    },
+    dir: {
+      type: String,
+      default: 'horizon',
+      validator (value) {
+        return ['horizon', 'vertical'].includes(value)
+      }
+    },
+    text: {
+      type: String
+    },
+    size: {
+      type: String,
+      default: 'small',
+      validator(value) {
+        return ['small', 'mini', 'medium'].includes(value)
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+.ui-loading{
+  &.is-horizon{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .ui-loading__text{
+      margin-left: 6px;
+    }
+  }
+  &.is-vertical{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .ui-loading__text{
+      margin-top: 6px;
+    }
+  }
+}
+.ui-loading__text{
+  color: rgba(0,0,0,.5);
+}
+.ui-loading--medium {
+  .ui-loading__icon{
+    width: 24px;
+    height: 24px;
+    border-width: 6px;
+  }
+}
+.ui-loading--small {
+  .ui-loading__icon{
+    width: 20px;
+    height: 20px;
+    border-width: 3px;
+  }
+}
+.ui-loading--mini {
+  .ui-loading__icon{
+    width: 12px;
+    height: 12px;
+    border-width: 2px;
+  }
+}
+.ui-loading--default {
+  .ui-loading__icon{
+    border-color: #999;
+  }
+}
+.ui-loading--primary {
+  .ui-loading__icon{
+    border-color: #5f9efa;
+  }
+}
+.ui-loading--success {
+  .ui-loading__icon{
+    border-color: #7ebf4a;
+  }
+}
+.ui-loading--info {
+  .ui-loading__icon{
+    border-color: #999;
+  }
+}
+.ui-loading--warning {
+  .ui-loading__icon{
+    border-color: #dba54a;
+  }
+}
+.ui-loading--danger {
+  .ui-loading__icon{
+    border-color: #e3756f;
+  }
+}
+.ui-loading__icon{
+  display: inline-block;
+  border-style: solid;
+  border-color: #999;
+  border-radius: 50%;
+  border-right-color: transparent!important;
+  animation: rotating .7s linear infinite;
+}
+@keyframes rotating{
+  0% {
+      transform: rotate(0);
+  }
+  100% {
+      transform: rotate(1turn);
+  }
+}
+</style>

package/components/menu/index.js

@@ -0,0 +1,14 @@
+import Menu from './menu'
+import MenuGroup from './menu-group'
+import MenuItem from './menu-item'
+
+export default {
+  Menu,
+  MenuGroup,
+  MenuItem,
+  install (Vue) {
+    Vue.component(Menu.name, Menu)
+    Vue.component(MenuGroup.name, MenuGroup)
+    Vue.component(MenuItem.name, MenuItem)
+  }
+}