misp-ui-library-test 0.0.1

package/src/packages/auto-grid-layout/src/utils/utils.js

@@ -0,0 +1,339 @@
+/**
+ * 布局工具函数
+ */
+
+export function bottom(layout) {
+  let max = 0
+  let bottomY = 0
+  for (let i = 0, len = layout.length; i < len; i++) {
+    bottomY = layout[i].y + layout[i].h
+    if (bottomY > max) max = bottomY
+  }
+  return max
+}
+
+export function cloneLayout(layout) {
+  const newLayout = Array(layout.length)
+  for (let i = 0, len = layout.length; i < len; i++) {
+    newLayout[i] = cloneLayoutItem(layout[i])
+  }
+  return newLayout
+}
+
+export function cloneLayoutItem(layoutItem) {
+  return JSON.parse(JSON.stringify(layoutItem))
+}
+
+export function collides(l1, l2) {
+  if (l1 === l2) return false
+  if (l1.x + l1.w <= l2.x) return false
+  if (l1.x >= l2.x + l2.w) return false
+  if (l1.y + l1.h <= l2.y) return false
+  if (l1.y >= l2.y + l2.h) return false
+  return true
+}
+
+export function compact(layout, verticalCompact) {
+  const compareWith = getStatics(layout)
+  const sorted = sortLayoutItemsByRowCol(layout)
+  const out = Array(layout.length)
+
+  for (let i = 0, len = sorted.length; i < len; i++) {
+    let l = sorted[i]
+    if (!l.static) {
+      l = compactItem(compareWith, l, verticalCompact)
+      compareWith.push(l)
+    }
+    out[layout.indexOf(l)] = l
+    l.moved = false
+  }
+  return out
+}
+
+export function compactItem(compareWith, l, verticalCompact) {
+  if (verticalCompact) {
+    while (l.y > 0 && !getFirstCollision(compareWith, l)) {
+      l.y--
+    }
+  }
+  let collides
+  while ((collides = getFirstCollision(compareWith, l))) {
+    l.y = collides.y + collides.h
+  }
+  return l
+}
+
+export function correctBounds(layout, bounds) {
+  const collidesWith = getStatics(layout)
+  for (let i = 0, len = layout.length; i < len; i++) {
+    const l = layout[i]
+    if (l.x + l.w > bounds.cols) l.x = bounds.cols - l.w
+    if (l.x < 0) {
+      l.x = 0
+      l.w = bounds.cols
+    }
+    if (!l.static) collidesWith.push(l)
+    else {
+      while (getFirstCollision(collidesWith, l)) {
+        l.y++
+      }
+    }
+  }
+  return layout
+}
+
+export function getLayoutItem(layout, id) {
+  for (let i = 0, len = layout.length; i < len; i++) {
+    if (layout[i].i === id) return layout[i]
+  }
+}
+
+export function getFirstCollision(layout, layoutItem) {
+  for (let i = 0, len = layout.length; i < len; i++) {
+    if (collides(layout[i], layoutItem)) return layout[i]
+  }
+}
+
+export function getAllCollisions(layout, layoutItem) {
+  return layout.filter((l) => collides(l, layoutItem))
+}
+
+export function getStatics(layout) {
+  return layout.filter((l) => l.static)
+}
+
+export function moveElement(layout, l, x, y, isUserAction, preventCollision) {
+  if (l.static) return layout
+
+  const oldX = l.x
+  const oldY = l.y
+
+  const movingUp = y && l.y > y
+  if (typeof x === 'number') l.x = x
+  if (typeof y === 'number') l.y = y
+  l.moved = true
+
+  let sorted = sortLayoutItemsByRowCol(layout)
+  if (movingUp) sorted = sorted.reverse()
+  const collisions = getAllCollisions(sorted, l)
+
+  if (preventCollision && collisions.length) {
+    l.x = oldX
+    l.y = oldY
+    l.moved = false
+    return layout
+  }
+
+  for (let i = 0, len = collisions.length; i < len; i++) {
+    const collision = collisions[i]
+
+    if (collision.moved) continue
+
+    if (l.y > collision.y && l.y - collision.y > collision.h / 4) continue
+
+    if (collision.static) {
+      layout = moveElementAwayFromCollision(layout, collision, l, isUserAction)
+    } else {
+      layout = moveElementAwayFromCollision(layout, l, collision, isUserAction)
+    }
+  }
+
+  return layout
+}
+
+export function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAction) {
+  const preventCollision = false
+  if (isUserAction) {
+    const fakeItem = {
+      x: itemToMove.x,
+      y: itemToMove.y,
+      w: itemToMove.w,
+      h: itemToMove.h,
+      i: '-1',
+    }
+    fakeItem.y = Math.max(collidesWith.y - itemToMove.h, 0)
+    if (!getFirstCollision(layout, fakeItem)) {
+      return moveElement(layout, itemToMove, undefined, fakeItem.y, preventCollision)
+    }
+  }
+
+  return moveElement(layout, itemToMove, undefined, itemToMove.y + 1, preventCollision)
+}
+
+export function perc(num) {
+  return num * 100 + '%'
+}
+
+export function setTransform(top, left, width, height) {
+  const translate = 'translate3d(' + left + 'px,' + top + 'px, 0)'
+  return {
+    transform: translate,
+    WebkitTransform: translate,
+    MozTransform: translate,
+    msTransform: translate,
+    OTransform: translate,
+    width: width + 'px',
+    height: height + 'px',
+    position: 'absolute',
+  }
+}
+
+export function setTransformRtl(top, right, width, height) {
+  const translate = 'translate3d(' + right * -1 + 'px,' + top + 'px, 0)'
+  return {
+    transform: translate,
+    WebkitTransform: translate,
+    MozTransform: translate,
+    msTransform: translate,
+    OTransform: translate,
+    width: width + 'px',
+    height: height + 'px',
+    position: 'absolute',
+  }
+}
+
+export function setTopLeft(top, left, width, height) {
+  return {
+    top: top + 'px',
+    left: left + 'px',
+    width: width + 'px',
+    height: height + 'px',
+    position: 'absolute',
+  }
+}
+
+export function setTopRight(top, right, width, height) {
+  return {
+    top: top + 'px',
+    right: right + 'px',
+    width: width + 'px',
+    height: height + 'px',
+    position: 'absolute',
+  }
+}
+
+export function sortLayoutItemsByRowCol(layout) {
+  return [].concat(layout).sort(function (a, b) {
+    if (a.y === b.y && a.x === b.x) {
+      return 0
+    }
+
+    if (a.y > b.y || (a.y === b.y && a.x > b.x)) {
+      return 1
+    }
+
+    return -1
+  })
+}
+
+export function validateLayout(layout, contextName) {
+  contextName = contextName || 'Layout'
+  const subProps = ['x', 'y', 'w', 'h']
+  let keyArr = []
+  if (!Array.isArray(layout)) throw new Error(contextName + ' must be an array!')
+  for (let i = 0, len = layout.length; i < len; i++) {
+    const item = layout[i]
+    for (let j = 0; j < subProps.length; j++) {
+      if (typeof item[subProps[j]] !== 'number') {
+        throw new Error('VueGridLayout: ' + contextName + '[' + i + '].' + subProps[j] + ' must be a number!')
+      }
+    }
+
+    if (item.i === undefined || item.i === null) {
+      throw new Error('VueGridLayout: ' + contextName + '[' + i + '].i cannot be null!')
+    }
+
+    if (typeof item.i !== 'number' && typeof item.i !== 'string') {
+      throw new Error('VueGridLayout: ' + contextName + '[' + i + '].i must be a string or number!')
+    }
+
+    if (keyArr.indexOf(item.i) >= 0) {
+      throw new Error('VueGridLayout: ' + contextName + '[' + i + '].i must be unique!')
+    }
+    keyArr.push(item.i)
+
+    if (item.static !== undefined && typeof item.static !== 'boolean') {
+      throw new Error('VueGridLayout: ' + contextName + '[' + i + '].static must be a boolean!')
+    }
+  }
+}
+
+export function autoBindHandlers(el, fns) {
+  fns.forEach((key) => (el[key] = el[key].bind(el)))
+}
+
+export function createMarkup(obj) {
+  var keys = Object.keys(obj)
+  if (!keys.length) return ''
+  var i,
+    len = keys.length
+  var result = ''
+
+  for (i = 0; i < len; i++) {
+    var key = keys[i]
+    var val = obj[key]
+    result += hyphenate(key) + ':' + addPx(key, val) + ';'
+  }
+
+  return result
+}
+
+export var IS_UNITLESS = {
+  animationIterationCount: true,
+  boxFlex: true,
+  boxFlexGroup: true,
+  boxOrdinalGroup: true,
+  columnCount: true,
+  flex: true,
+  flexGrow: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  flexOrder: true,
+  gridRow: true,
+  gridColumn: true,
+  fontWeight: true,
+  lineClamp: true,
+  lineHeight: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+
+  fillOpacity: true,
+  stopOpacity: true,
+  strokeDashoffset: true,
+  strokeOpacity: true,
+  strokeWidth: true,
+}
+
+export function addPx(name, value) {
+  if (typeof value === 'number' && !IS_UNITLESS[name]) {
+    return value + 'px'
+  } else {
+    return value
+  }
+}
+
+export var hyphenateRE = /([a-z\d])([A-Z])/g
+
+export function hyphenate(str) {
+  return str.replace(hyphenateRE, '$1-$2').toLowerCase()
+}
+
+export function findItemInArray(array, property, value) {
+  for (var i = 0; i < array.length; i++) if (array[i][property] == value) return true
+
+  return false
+}
+
+export function findAndRemove(array, property, value) {
+  array.forEach(function (result, index) {
+    if (result[property] === value) {
+      array.splice(index, 1)
+    }
+  })
+}

package/src/packages/autocomplete/index.js

@@ -0,0 +1,12 @@
+/**
+ * Autocomplete 组件
+ */
+
+import UiAutocomplete from './src/main.vue'
+
+// 自动安装
+UiAutocomplete.install = function(Vue) {
+  Vue.component(UiAutocomplete.name, UiAutocomplete)
+}
+
+export default UiAutocomplete

package/src/packages/autocomplete/src/main.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="ui-autocomplete" :class="{ 'ui-autocomplete--suggestion': showSuggestions }">
+    <ui-input
+      ref="input"
+      v-model="value"
+      v-bind="$attrs"
+      :autocomplete="autocomplete"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @keydown.up.prevent="highlight(highlightedIndex - 1)"
+      @keydown.down.prevent="highlight(highlightedIndex + 1)"
+      @keydown.enter="handleKeyEnter"
+      @keydown.esc="closeSuggestions"
+    >
+      <template slot="prefix" v-if="$slots.prefix">
+        <slot name="prefix"></slot>
+      </template>
+      <template slot="suffix" v-if="$slots.suffix">
+        <slot name="suffix"></slot>
+      </template>
+    </ui-input>
+    <transition name="ui-zoom-in-top">
+      <ul
+        v-if="showSuggestions"
+        ref="suggestions"
+        class="ui-autocomplete__suggestions"
+        :style="{ top: suggestionsTop + 'px', zIndex: zIndex }"
+      >
+        <li
+          v-for="(item, index) in suggestions"
+          :key="index"
+          class="ui-autocomplete__suggestion"
+          :class="{ 'is-highlighted': highlightedIndex === index }"
+          @click="handleSelect(item)"
+        >
+          <slot :item="item">{{ item[valueKey] || item }}</slot>
+        </li>
+      </ul>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiAutocomplete',
+
+  componentName: 'UiAutocomplete',
+
+  props: {
+    value: {},
+    fetchSuggestions: {
+      type: Function,
+      required: true
+    },
+    placeholder: String,
+    triggerOnFocus: {
+      type: Boolean,
+      default: true
+    },
+    selectWhenUnmatched: {
+      type: Boolean,
+      default: false
+    },
+    popperClass: String,
+    debounce: {
+      type: Number,
+      default: 300
+    },
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    autocomplete: {
+      type: String,
+      default: 'off'
+    }
+  },
+
+  data() {
+    return {
+      suggestions: [],
+      highlightedIndex: -1,
+      showSuggestions: false,
+      suggestionsTop: 0,
+      zIndex: 2000,
+      inputValue: this.value,
+      timer: null
+    };
+  },
+
+  watch: {
+    value(val) {
+      this.inputValue = val;
+    },
+    inputValue(val) {
+      this.$emit('input', val);
+    }
+  },
+
+  created() {
+    this.debouncedFetchSuggestions = this.debounce((queryString) => {
+      this.fetchSuggestions(queryString, (data) => {
+        this.suggestions = data || [];
+        this.showSuggestions = this.suggestions.length > 0;
+        this.highlightedIndex = -1;
+      });
+    }, this.debounce);
+  },
+
+  methods: {
+    debounce(fn, delay) {
+      let timer = null;
+      return function(...args) {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(() => {
+          fn.apply(this, args);
+        }, delay);
+      };
+    },
+    handleFocus(event) {
+      this.$emit('focus', event);
+      if (this.triggerOnFocus) {
+        this.handleInputChange(this.inputValue);
+      }
+    },
+    handleBlur(event) {
+      this.$emit('blur', event);
+      this.closeSuggestions();
+    },
+    handleKeyEnter() {
+      if (this.showSuggestions && this.highlightedIndex >= 0) {
+        this.handleSelect(this.suggestions[this.highlightedIndex]);
+      }
+    },
+    handleSelect(item) {
+      this.$emit('input', item[this.valueKey] || item);
+      this.$emit('select', item);
+      this.showSuggestions = false;
+    },
+    handleInputChange(value) {
+      this.debouncedFetchSuggestions(value);
+    },
+    highlight(index) {
+      if (!this.showSuggestions) return;
+      const len = this.suggestions.length;
+      if (index > len - 1) {
+        index = 0;
+      } else if (index < 0) {
+        index = len - 1;
+      }
+      this.highlightedIndex = index;
+    },
+    closeSuggestions() {
+      this.showSuggestions = false;
+      this.highlightedIndex = -1;
+    },
+    calculateSuggestionsTop() {
+      const inputEl = this.$refs.input.$el;
+      if (inputEl) {
+        const rect = inputEl.getBoundingClientRect();
+        this.suggestionsTop = rect.height + 5;
+      }
+    }
+  },
+
+  mounted() {
+    this.calculateSuggestionsTop();
+  }
+};
+</script>

package/src/packages/avatar/index.js

@@ -0,0 +1,12 @@
+/**
+ * Avatar 头像组件
+ */
+
+import UiAvatar from './src/main.vue'
+
+// 自动安装
+UiAvatar.install = function(Vue) {
+  Vue.component(UiAvatar.name, UiAvatar)
+}
+
+export default UiAvatar

package/src/packages/avatar/src/main.vue

@@ -0,0 +1,87 @@
+<template>
+  <span class="ui-avatar" :class="avatarClass" :style="sizeStyle">
+    <img v-if="isImageExist && src" :src="src" :alt="alt" :srcset="srcSet" @error="handleError" :style="{ 'object-fit': fit }" />
+    <i v-else-if="icon" :class="icon"></i>
+    <slot v-else></slot>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'UiAvatar',
+
+  props: {
+    size: {
+      type: [Number, String],
+      validator(val) {
+        if (typeof val === 'string') {
+          return ['large', 'medium', 'small'].includes(val);
+        }
+        return typeof val === 'number';
+      }
+    },
+    shape: {
+      type: String,
+      default: 'circle',
+      validator(val) {
+        return ['circle', 'square'].includes(val);
+      }
+    },
+    icon: String,
+    src: String,
+    alt: String,
+    srcSet: String,
+    error: Function,
+    fit: {
+      type: String,
+      default: 'cover'
+    }
+  },
+
+  data() {
+    return {
+      isImageExist: true
+    };
+  },
+
+  computed: {
+    avatarClass() {
+      const { size, icon, shape } = this;
+      let classList = ['ui-avatar'];
+
+      if (size && typeof size === 'string') {
+        classList.push(`ui-avatar--${size}`);
+      }
+
+      if (icon) {
+        classList.push('ui-avatar--icon');
+      }
+
+      if (shape) {
+        classList.push(`ui-avatar--${shape}`);
+      }
+
+      return classList.join(' ');
+    },
+
+    sizeStyle() {
+      const { size } = this;
+      return typeof size === 'number' ? {
+        height: `${size}px`,
+        width: `${size}px`,
+        lineHeight: `${size}px`
+      } : {};
+    }
+  },
+
+  methods: {
+    handleError() {
+      const { error } = this;
+      const errorFlag = error ? error() : undefined;
+      if (errorFlag !== false) {
+        this.isImageExist = false;
+      }
+    }
+  }
+};
+</script>

package/src/packages/backtop/index.js

@@ -0,0 +1,12 @@
+/**
+ * Backtop 回到顶部组件
+ */
+
+import UiBacktop from './src/main.vue'
+
+// 自动安装
+UiBacktop.install = function(Vue) {
+  Vue.component(UiBacktop.name, UiBacktop)
+}
+
+export default UiBacktop