cbvirtua 1.0.36 → 1.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cbvirtua",
-  "version": "1.0.36",
+  "version": "1.0.38",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/dom.js

@@ -0,0 +1,227 @@
+/* istanbul ignore next */
+
+import Vue from 'vue';
+
+const isServer = Vue.prototype.$isServer;
+const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
+const MOZ_HACK_REGEXP = /^moz([A-Z])/;
+const ieVersion = isServer ? 0 : Number(document.documentMode);
+
+/* istanbul ignore next */
+const trim = function(string) {
+  return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
+};
+/* istanbul ignore next */
+const camelCase = function(name) {
+  return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
+    return offset ? letter.toUpperCase() : letter;
+  }).replace(MOZ_HACK_REGEXP, 'Moz$1');
+};
+
+/* istanbul ignore next */
+export const on = (function() {
+  if (!isServer && document.addEventListener) {
+    return function(element, event, handler) {
+      if (element && event && handler) {
+        element.addEventListener(event, handler, false);
+      }
+    };
+  } else {
+    return function(element, event, handler) {
+      if (element && event && handler) {
+        element.attachEvent('on' + event, handler);
+      }
+    };
+  }
+})();
+
+/* istanbul ignore next */
+export const off = (function() {
+  if (!isServer && document.removeEventListener) {
+    return function(element, event, handler) {
+      if (element && event) {
+        element.removeEventListener(event, handler, false);
+      }
+    };
+  } else {
+    return function(element, event, handler) {
+      if (element && event) {
+        element.detachEvent('on' + event, handler);
+      }
+    };
+  }
+})();
+
+/* istanbul ignore next */
+export const once = function(el, event, fn) {
+  var listener = function() {
+    if (fn) {
+      fn.apply(this, arguments);
+    }
+    off(el, event, listener);
+  };
+  on(el, event, listener);
+};
+
+/* istanbul ignore next */
+export function hasClass(el, cls) {
+  if (!el || !cls) return false;
+  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
+  if (el.classList) {
+    return el.classList.contains(cls);
+  } else {
+    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
+  }
+};
+
+/* istanbul ignore next */
+export function addClass(el, cls) {
+  if (!el) return;
+  var curClass = el.className;
+  var classes = (cls || '').split(' ');
+
+  for (var i = 0, j = classes.length; i < j; i++) {
+    var clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.add(clsName);
+    } else if (!hasClass(el, clsName)) {
+      curClass += ' ' + clsName;
+    }
+  }
+  if (!el.classList) {
+    el.setAttribute('class', curClass);
+  }
+};
+
+/* istanbul ignore next */
+export function removeClass(el, cls) {
+  if (!el || !cls) return;
+  var classes = cls.split(' ');
+  var curClass = ' ' + el.className + ' ';
+
+  for (var i = 0, j = classes.length; i < j; i++) {
+    var clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.remove(clsName);
+    } else if (hasClass(el, clsName)) {
+      curClass = curClass.replace(' ' + clsName + ' ', ' ');
+    }
+  }
+  if (!el.classList) {
+    el.setAttribute('class', trim(curClass));
+  }
+};
+
+/* istanbul ignore next */
+export const getStyle = ieVersion < 9 ? function(element, styleName) {
+  if (isServer) return;
+  if (!element || !styleName) return null;
+  styleName = camelCase(styleName);
+  if (styleName === 'float') {
+    styleName = 'styleFloat';
+  }
+  try {
+    switch (styleName) {
+      case 'opacity':
+        try {
+          return element.filters.item('alpha').opacity / 100;
+        } catch (e) {
+          return 1.0;
+        }
+      default:
+        return (element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null);
+    }
+  } catch (e) {
+    return element.style[styleName];
+  }
+} : function(element, styleName) {
+  if (isServer) return;
+  if (!element || !styleName) return null;
+  styleName = camelCase(styleName);
+  if (styleName === 'float') {
+    styleName = 'cssFloat';
+  }
+  try {
+    var computed = document.defaultView.getComputedStyle(element, '');
+    return element.style[styleName] || computed ? computed[styleName] : null;
+  } catch (e) {
+    return element.style[styleName];
+  }
+};
+
+/* istanbul ignore next */
+export function setStyle(element, styleName, value) {
+  if (!element || !styleName) return;
+
+  if (typeof styleName === 'object') {
+    for (var prop in styleName) {
+      if (styleName.hasOwnProperty(prop)) {
+        setStyle(element, prop, styleName[prop]);
+      }
+    }
+  } else {
+    styleName = camelCase(styleName);
+    if (styleName === 'opacity' && ieVersion < 9) {
+      element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')';
+    } else {
+      element.style[styleName] = value;
+    }
+  }
+};
+
+export const isScroll = (el, vertical) => {
+  if (isServer) return;
+
+  const determinedDirection = vertical !== null && vertical !== undefined;
+  const overflow = determinedDirection
+    ? vertical
+      ? getStyle(el, 'overflow-y')
+      : getStyle(el, 'overflow-x')
+    : getStyle(el, 'overflow');
+
+  return overflow.match(/(scroll|auto|overlay)/);
+};
+
+export const getScrollContainer = (el, vertical) => {
+  if (isServer) return;
+
+  let parent = el;
+  while (parent) {
+    if ([window, document, document.documentElement].includes(parent)) {
+      return window;
+    }
+    if (isScroll(parent, vertical)) {
+      return parent;
+    }
+    parent = parent.parentNode;
+  }
+
+  return parent;
+};
+
+export const isInContainer = (el, container) => {
+  if (isServer || !el || !container) return false;
+
+  const elRect = el.getBoundingClientRect();
+  let containerRect;
+
+  if ([window, document, document.documentElement, null, undefined].includes(container)) {
+    containerRect = {
+      top: 0,
+      right: window.innerWidth,
+      bottom: window.innerHeight,
+      left: 0
+    };
+  } else {
+    containerRect = container.getBoundingClientRect();
+  }
+
+  return elRect.top < containerRect.bottom &&
+    elRect.bottom > containerRect.top &&
+    elRect.right > containerRect.left &&
+    elRect.left < containerRect.right;
+};

package/src/index.js

@@ -0,0 +1,106 @@
+import Vue from 'vue';
+import loadingVue from './loading.vue';
+import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
+import { PopupManager } from 'element-ui/src/utils/popup';
+import afterLeave from 'element-ui/src/utils/after-leave';
+import merge from 'element-ui/src/utils/merge';
+
+const LoadingConstructor = Vue.extend(loadingVue);
+
+const defaults = {
+  text: null,
+  fullscreen: true,
+  body: false,
+  lock: false,
+  customClass: ''
+};
+
+let fullscreenLoading;
+
+LoadingConstructor.prototype.originalPosition = '';
+LoadingConstructor.prototype.originalOverflow = '';
+
+LoadingConstructor.prototype.close = function() {
+  if (this.fullscreen) {
+    fullscreenLoading = undefined;
+  }
+  afterLeave(this, _ => {
+    const target = this.fullscreen || this.body
+      ? document.body
+      : this.target;
+    removeClass(target, 'el-loading-parent--relative');
+    removeClass(target, 'el-loading-parent--hidden');
+    if (this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el);
+    }
+    this.$destroy();
+  }, 300);
+  this.visible = false;
+};
+
+const addStyle = (options, parent, instance) => {
+  let maskStyle = {};
+  if (options.fullscreen) {
+    instance.originalPosition = getStyle(document.body, 'position');
+    instance.originalOverflow = getStyle(document.body, 'overflow');
+    maskStyle.zIndex = PopupManager.nextZIndex();
+  } else if (options.body) {
+    instance.originalPosition = getStyle(document.body, 'position');
+    ['top', 'left'].forEach(property => {
+      let scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
+      maskStyle[property] = options.target.getBoundingClientRect()[property] +
+        document.body[scroll] +
+        document.documentElement[scroll] +
+        'px';
+    });
+    ['height', 'width'].forEach(property => {
+      maskStyle[property] = options.target.getBoundingClientRect()[property] + 'px';
+    });
+  } else {
+    instance.originalPosition = getStyle(parent, 'position');
+  }
+  Object.keys(maskStyle).forEach(property => {
+    instance.$el.style[property] = maskStyle[property];
+  });
+};
+
+const Loading = (options = {}) => {
+  if (Vue.prototype.$isServer) return;
+  options = merge({}, defaults, options);
+  if (typeof options.target === 'string') {
+    options.target = document.querySelector(options.target);
+  }
+  options.target = options.target || document.body;
+  if (options.target !== document.body) {
+    options.fullscreen = false;
+  } else {
+    options.body = true;
+  }
+  if (options.fullscreen && fullscreenLoading) {
+    return fullscreenLoading;
+  }
+
+  let parent = options.body ? document.body : options.target;
+  let instance = new LoadingConstructor({
+    el: document.createElement('div'),
+    data: options
+  });
+
+  addStyle(options, parent, instance);
+  if (instance.originalPosition !== 'absolute' && instance.originalPosition !== 'fixed' && instance.originalPosition !== 'sticky') {
+    addClass(parent, 'el-loading-parent--relative');
+  }
+  if (options.fullscreen && options.lock) {
+    addClass(parent, 'el-loading-parent--hidden');
+  }
+  parent.appendChild(instance.$el);
+  Vue.nextTick(() => {
+    instance.visible = true;
+  });
+  if (options.fullscreen) {
+    fullscreenLoading = instance;
+  }
+  return instance;
+};
+
+export default Loading;

package/src/packages/alert/index.js

@@ -0,0 +1,8 @@
+import Alert from './src/main';
+
+/* istanbul ignore next */
+Alert.install = function(Vue) {
+  Vue.component(Alert.name, Alert);
+};
+
+export default Alert;

package/src/packages/alert/src/main.vue

@@ -0,0 +1,94 @@
+<template>
+  <transition name="el-alert-fade">
+    <div
+      class="el-alert"
+      :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]"
+      v-show="visible"
+      role="alert"
+    >
+      <i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
+      <div class="el-alert__content">
+        <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title || $slots.title">
+          <slot name="title">{{ title }}</slot>
+        </span>
+        <p class="el-alert__description" v-if="$slots.default && !description"><slot></slot></p>
+        <p class="el-alert__description" v-if="description && !$slots.default">{{ description }}</p>
+        <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+  const TYPE_CLASSES_MAP = {
+    'success': 'el-icon-success',
+    'warning': 'el-icon-warning',
+    'error': 'el-icon-error'
+  };
+  export default {
+    name: 'ElAlert',
+
+    props: {
+      title: {
+        type: String,
+        default: ''
+      },
+      description: {
+        type: String,
+        default: ''
+      },
+      type: {
+        type: String,
+        default: 'info'
+      },
+      closable: {
+        type: Boolean,
+        default: true
+      },
+      closeText: {
+        type: String,
+        default: ''
+      },
+      showIcon: Boolean,
+      center: Boolean,
+      effect: {
+        type: String,
+        default: 'light',
+        validator: function(value) {
+          return ['light', 'dark'].indexOf(value) !== -1;
+        }
+      }
+    },
+
+    data() {
+      return {
+        visible: true
+      };
+    },
+
+    methods: {
+      close() {
+        this.visible = false;
+        this.$emit('close');
+      }
+    },
+
+    computed: {
+      typeClass() {
+        return `el-alert--${ this.type }`;
+      },
+
+      iconClass() {
+        return TYPE_CLASSES_MAP[this.type] || 'el-icon-info';
+      },
+
+      isBigIcon() {
+        return this.description || this.$slots.default ? 'is-big' : '';
+      },
+
+      isBoldTitle() {
+        return this.description || this.$slots.default ? 'is-bold' : '';
+      }
+    }
+  };
+</script>

package/src/packages/aside/index.js

@@ -0,0 +1,8 @@
+import Aside from './src/main';
+
+/* istanbul ignore next */
+Aside.install = function(Vue) {
+  Vue.component(Aside.name, Aside);
+};
+
+export default Aside;

package/src/packages/aside/src/main.vue

@@ -0,0 +1,20 @@
+<template>
+  <aside class="el-aside" :style="{ width }">
+    <slot></slot>
+  </aside>
+</template>
+
+<script>
+  export default {
+    name: 'ElAside',
+
+    componentName: 'ElAside',
+
+    props: {
+      width: {
+        type: String,
+        default: '300px'
+      }
+    }
+  };
+</script>

package/src/packages/autocomplete/index.js

@@ -0,0 +1,8 @@
+import ElAutocomplete from './src/autocomplete';
+
+/* istanbul ignore next */
+ElAutocomplete.install = function(Vue) {
+  Vue.component(ElAutocomplete.name, ElAutocomplete);
+};
+
+export default ElAutocomplete;

package/src/packages/autocomplete/src/autocomplete-suggestions.vue

@@ -0,0 +1,76 @@
+<template>
+  <transition name="el-zoom-in-top" @after-leave="doDestroy">
+    <div
+      v-show="showPopper"
+      class="el-autocomplete-suggestion el-popper"
+      :class="{ 'is-loading': !parent.hideLoading && parent.loading }"
+      :style="{ width: dropdownWidth }"
+      role="region">
+      <el-scrollbar
+        tag="ul"
+        wrap-class="el-autocomplete-suggestion__wrap"
+        view-class="el-autocomplete-suggestion__list">
+        <li v-if="!parent.hideLoading && parent.loading"><i class="el-icon-loading"></i></li>
+        <slot v-else>
+        </slot>
+      </el-scrollbar>
+    </div>
+  </transition>
+</template>
+<script>
+  import Popper from 'element-ui/src/utils/vue-popper';
+  import Emitter from 'element-ui/src/mixins/emitter';
+  import ElScrollbar from 'element-ui/packages/scrollbar';
+
+  export default {
+    components: { ElScrollbar },
+    mixins: [Popper, Emitter],
+
+    componentName: 'ElAutocompleteSuggestions',
+
+    data() {
+      return {
+        parent: this.$parent,
+        dropdownWidth: ''
+      };
+    },
+
+    props: {
+      options: {
+        default() {
+          return {
+            gpuAcceleration: false
+          };
+        }
+      },
+      id: String
+    },
+
+    methods: {
+      select(item) {
+        this.dispatch('ElAutocomplete', 'item-click', item);
+      }
+    },
+
+    updated() {
+      this.$nextTick(_ => {
+        this.popperJS && this.updatePopper();
+      });
+    },
+
+    mounted() {
+      this.$parent.popperElm = this.popperElm = this.$el;
+      this.referenceElm = this.$parent.$refs.input.$refs.input || this.$parent.$refs.input.$refs.textarea;
+      this.referenceList = this.$el.querySelector('.el-autocomplete-suggestion__list');
+      this.referenceList.setAttribute('role', 'listbox');
+      this.referenceList.setAttribute('id', this.id);
+    },
+
+    created() {
+      this.$on('visible', (val, inputWidth) => {
+        this.dropdownWidth = inputWidth + 'px';
+        this.showPopper = val;
+      });
+    }
+  };
+</script>