@zkwq/business 0.0.4 → 0.0.6

package/src/components/base/ui/collapse/collapse-item.vue

@@ -1,180 +0,0 @@
-<template>
-  <div class="base-collapse-item"
-    :class="{'is-active': isActive, 'is-disabled': disabled }">
-    <div
-      role="tab"
-      :aria-expanded="isActive"
-      :aria-controls="`base-collapse-content-${id}`"
-      :aria-describedby ="`base-collapse-content-${id}`"
-    >
-      <div
-        class="base-collapse-item__header"
-        @click="handleHeaderClick"
-        role="button"
-        :id="`base-collapse-head-${id}`"
-        :tabindex="disabled ? undefined : 0"
-        @keyup.space.enter.stop="handleEnterClick"
-        :class="{
-          'focusing': focusing,
-          'is-active': isActive
-        }"
-        @focus="handleFocus"
-        @blur="focusing = false"
-      >
-        <slot name="title">{{title}}</slot>
-        <i
-          class="base-collapse-item__arrow base-icon-caret-right"
-          :class="{'is-active': isActive}">
-        </i>
-      </div>
-    </div>
-    <transition
-      v-on:before-enter="beforeEnter"
-      v-on:enter="enter"
-      v-on:after-enter="afterEnter"
-      v-on:before-leave="beforeLeave"
-      v-on:leave="leave"
-      v-on:after-leave="afterLeave"
-    >
-      <div
-        class="base-collapse-item__wrap"
-        v-show="isActive"
-        role="tabpanel"
-        :aria-hidden="!isActive"
-        :aria-labelledby="`base-collapse-head-${id}`"
-        :id="`base-collapse-content-${id}`"
-      >
-        <div class="base-collapse-item__content">
-          <slot></slot>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-<script>
-import Emitter from '../mixin/emitter'
-import { generateId } from '../util/index'
-import { addClass, removeClass } from '../util/dom'
-
-export default {
-  name: 'BaseCollapseItem',
-
-  componentName: 'BaseCollapseItem',
-
-  mixins: [Emitter],
-
-  data() {
-    return {
-      contentWrapStyle: {
-        height: 'auto',
-        display: 'block'
-      },
-      contentHeight: 0,
-      focusing: false,
-      isClick: false,
-      id: generateId()
-    };
-  },
-
-  inject: ['collapse'],
-
-  props: {
-    title: String,
-    name: {
-      type: [String, Number],
-      default() {
-        return this._uid;
-      }
-    },
-    disabled: Boolean
-  },
-
-  computed: {
-    isActive() {
-      return this.collapse.activeNames.indexOf(this.name) > -1;
-    }
-  },
-
-  methods: {
-    handleFocus() {
-      setTimeout(() => {
-        if (!this.isClick) {
-          this.focusing = true;
-        } else {
-          this.isClick = false;
-        }
-      }, 50);
-    },
-    handleHeaderClick() {
-      if (this.disabled) return;
-      this.dispatch('BaseCollapse', 'item-click', this);
-      this.focusing = false;
-      this.isClick = true;
-    },
-    handleEnterClick() {
-      this.dispatch('BaseCollapse', 'item-click', this);
-    },
-    beforeEnter(el) {
-      addClass(el, 'collapse-transition');
-      if (!el.dataset) el.dataset = {};
-
-      el.dataset.oldPaddingTop = el.style.paddingTop;
-      el.dataset.oldPaddingBottom = el.style.paddingBottom;
-
-      el.style.height = '0';
-      el.style.paddingTop = 0;
-      el.style.paddingBottom = 0;
-    },
-
-    enter(el) {
-      el.dataset.oldOverflow = el.style.overflow;
-      if (el.scrollHeight !== 0) {
-        el.style.height = el.scrollHeight + 'px';
-        el.style.paddingTop = el.dataset.oldPaddingTop;
-        el.style.paddingBottom = el.dataset.oldPaddingBottom;
-      } else {
-        el.style.height = '';
-        el.style.paddingTop = el.dataset.oldPaddingTop;
-        el.style.paddingBottom = el.dataset.oldPaddingBottom;
-      }
-
-      el.style.overflow = 'hidden';
-    },
-
-    afterEnter(el) {
-      // for safari: remove class then reset height is necessary
-      removeClass(el, 'collapse-transition');
-      el.style.height = '';
-      el.style.overflow = el.dataset.oldOverflow;
-    },
-
-    beforeLeave(el) {
-      if (!el.dataset) el.dataset = {};
-      el.dataset.oldPaddingTop = el.style.paddingTop;
-      el.dataset.oldPaddingBottom = el.style.paddingBottom;
-      el.dataset.oldOverflow = el.style.overflow;
-
-      el.style.height = el.scrollHeight + 'px';
-      el.style.overflow = 'hidden';
-    },
-
-    leave(el) {
-      if (el.scrollHeight !== 0) {
-        // for safari: add class after set height, or it will jump to zero height suddenly, weired
-        addClass(el, 'collapse-transition');
-        el.style.height = 0;
-        el.style.paddingTop = 0;
-        el.style.paddingBottom = 0;
-      }
-    },
-
-    afterLeave(el) {
-      removeClass(el, 'collapse-transition');
-      el.style.height = '';
-      el.style.overflow = el.dataset.oldOverflow;
-      el.style.paddingTop = el.dataset.oldPaddingTop;
-      el.style.paddingBottom = el.dataset.oldPaddingBottom;
-    }
-  }
-}
-</script>

package/src/components/base/ui/collapse/collapse.vue

@@ -1,73 +0,0 @@
-<template>
-  <div class="base-collapse" role="tablist" aria-multiselectable="true">
-    <slot></slot>
-  </div>
-</template>
-<script>
-export default {
-  name: 'BaseCollapse',
-
-  componentName: 'BaseCollapse',
-
-  props: {
-    accordion: Boolean,
-    value: {
-      type: [Array, String, Number],
-      default() {
-        return [];
-      }
-    }
-  },
-
-  data() {
-    return {
-      activeNames: [].concat(this.value)
-    };
-  },
-
-  provide() {
-    return {
-      collapse: this
-    };
-  },
-
-  watch: {
-    value(value) {
-      this.activeNames = [].concat(value);
-    }
-  },
-
-  methods: {
-    setActiveNames(activeNames) {
-      activeNames = [].concat(activeNames);
-      let value = this.accordion ? activeNames[0] : activeNames;
-      this.activeNames = activeNames;
-      this.$emit('input', value);
-      this.$emit('change', value);
-    },
-    handleItemClick(item) {
-      if (this.accordion) {
-        this.setActiveNames(
-          (this.activeNames[0] || this.activeNames[0] === 0) &&
-          this.activeNames[0] === item.name
-            ? '' : item.name
-        );
-      } else {
-        let activeNames = this.activeNames.slice(0);
-        let index = activeNames.indexOf(item.name);
-
-        if (index > -1) {
-          activeNames.splice(index, 1);
-        } else {
-          activeNames.push(item.name);
-        }
-        this.setActiveNames(activeNames);
-      }
-    }
-  },
-
-  created() {
-    this.$on('item-click', this.handleItemClick);
-  }
-};
-</script>

package/src/components/base/ui/color-picker/color.js

@@ -1,317 +0,0 @@
-const hsv2hsl = function(hue, sat, val) {
-  return [
-    hue,
-    (sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue)) || 0,
-    hue / 2
-  ];
-};
-
-// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
-// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
-const isOnePointZero = function(n) {
-  return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;
-};
-
-const isPercentage = function(n) {
-  return typeof n === 'string' && n.indexOf('%') !== -1;
-};
-
-// Take input from [0, n] and return it as [0, 1]
-const bound01 = function(value, max) {
-  if (isOnePointZero(value)) value = '100%';
-
-  const processPercent = isPercentage(value);
-  value = Math.min(max, Math.max(0, parseFloat(value)));
-
-  // Automatically convert percentage into number
-  if (processPercent) {
-    value = parseInt(value * max, 10) / 100;
-  }
-
-  // Handle floating point rounding errors
-  if ((Math.abs(value - max) < 0.000001)) {
-    return 1;
-  }
-
-  // Convert into [0, 1] range if it isn't already
-  return (value % max) / parseFloat(max);
-};
-
-const INT_HEX_MAP = { 10: 'A', 11: 'B', 12: 'C', 13: 'D', 14: 'E', 15: 'F' };
-
-const toHex = function({ r, g, b }) {
-  const hexOne = function(value) {
-    value = Math.min(Math.round(value), 255);
-    const high = Math.floor(value / 16);
-    const low = value % 16;
-    return '' + (INT_HEX_MAP[high] || high) + (INT_HEX_MAP[low] || low);
-  };
-
-  if (isNaN(r) || isNaN(g) || isNaN(b)) return '';
-
-  return '#' + hexOne(r) + hexOne(g) + hexOne(b);
-};
-
-const HEX_INT_MAP = { A: 10, B: 11, C: 12, D: 13, E: 14, F: 15 };
-
-const parseHexChannel = function(hex) {
-  if (hex.length === 2) {
-    return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]);
-  }
-
-  return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];
-};
-
-const hsl2hsv = function(hue, sat, light) {
-  sat = sat / 100;
-  light = light / 100;
-  let smin = sat;
-  const lmin = Math.max(light, 0.01);
-  let sv;
-  let v;
-
-  light *= 2;
-  sat *= (light <= 1) ? light : 2 - light;
-  smin *= lmin <= 1 ? lmin : 2 - lmin;
-  v = (light + sat) / 2;
-  sv = light === 0 ? (2 * smin) / (lmin + smin) : (2 * sat) / (light + sat);
-
-  return {
-    h: hue,
-    s: sv * 100,
-    v: v * 100
-  };
-};
-
-// `rgbToHsv`
-// Converts an RGB color value to HSV
-// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
-// *Returns:* { h, s, v } in [0,1]
-const rgb2hsv = function(r, g, b) {
-  r = bound01(r, 255);
-  g = bound01(g, 255);
-  b = bound01(b, 255);
-
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  let h, s;
-  let v = max;
-
-  const d = max - min;
-  s = max === 0 ? 0 : d / max;
-
-  if (max === min) {
-    h = 0; // achromatic
-  } else {
-    switch (max) {
-      case r:
-        h = (g - b) / d + (g < b ? 6 : 0);
-        break;
-      case g:
-        h = (b - r) / d + 2;
-        break;
-      case b:
-        h = (r - g) / d + 4;
-        break;
-    }
-    h /= 6;
-  }
-
-  return { h: h * 360, s: s * 100, v: v * 100 };
-};
-
-// `hsvToRgb`
-// Converts an HSV color value to RGB.
-// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
-// *Returns:* { r, g, b } in the set [0, 255]
-const hsv2rgb = function(h, s, v) {
-  h = bound01(h, 360) * 6;
-  s = bound01(s, 100);
-  v = bound01(v, 100);
-
-  const i = Math.floor(h);
-  const f = h - i;
-  const p = v * (1 - s);
-  const q = v * (1 - f * s);
-  const t = v * (1 - (1 - f) * s);
-  const mod = i % 6;
-  const r = [v, q, p, p, t, v][mod];
-  const g = [t, v, v, q, p, p][mod];
-  const b = [p, p, t, v, v, q][mod];
-
-  return {
-    r: Math.round(r * 255),
-    g: Math.round(g * 255),
-    b: Math.round(b * 255)
-  };
-};
-
-export default class Color {
-  constructor(options) {
-    this._hue = 0;
-    this._saturation = 100;
-    this._value = 100;
-    this._alpha = 100;
-
-    this.enableAlpha = false;
-    this.format = 'hex';
-    this.value = '';
-
-    options = options || {};
-
-    for (let option in options) {
-      if (options.hasOwnProperty(option)) {
-        this[option] = options[option];
-      }
-    }
-
-    this.doOnChange();
-  }
-
-  set(prop, value) {
-    if (arguments.length === 1 && typeof prop === 'object') {
-      for (let p in prop) {
-        if (prop.hasOwnProperty(p)) {
-          this.set(p, prop[p]);
-        }
-      }
-
-      return;
-    }
-
-    this['_' + prop] = value;
-    this.doOnChange();
-  }
-
-  get(prop) {
-    return this['_' + prop];
-  }
-
-  toRgb() {
-    return hsv2rgb(this._hue, this._saturation, this._value);
-  }
-
-  fromString(value) {
-    if (!value) {
-      this._hue = 0;
-      this._saturation = 100;
-      this._value = 100;
-
-      this.doOnChange();
-      return;
-    }
-
-    const fromHSV = (h, s, v) => {
-      this._hue = Math.max(0, Math.min(360, h));
-      this._saturation = Math.max(0, Math.min(100, s));
-      this._value = Math.max(0, Math.min(100, v));
-
-      this.doOnChange();
-    };
-
-    if (value.indexOf('hsl') !== -1) {
-      const parts = value.replace(/hsla|hsl|\(|\)/gm, '')
-        .split(/\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
-
-      if (parts.length === 4) {
-        this._alpha = Math.floor(parseFloat(parts[3]) * 100);
-      } else if (parts.length === 3) {
-        this._alpha = 100;
-      }
-      if (parts.length >= 3) {
-        const { h, s, v } = hsl2hsv(parts[0], parts[1], parts[2]);
-        fromHSV(h, s, v);
-      }
-    } else if (value.indexOf('hsv') !== -1) {
-      const parts = value.replace(/hsva|hsv|\(|\)/gm, '')
-        .split(/\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
-
-      if (parts.length === 4) {
-        this._alpha = Math.floor(parseFloat(parts[3]) * 100);
-      } else if (parts.length === 3) {
-        this._alpha = 100;
-      }
-      if (parts.length >= 3) {
-        fromHSV(parts[0], parts[1], parts[2]);
-      }
-    } else if (value.indexOf('rgb') !== -1) {
-      const parts = value.replace(/rgba|rgb|\(|\)/gm, '')
-        .split(/\s|,/g).filter((val) => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
-
-      if (parts.length === 4) {
-        this._alpha = Math.floor(parseFloat(parts[3]) * 100);
-      } else if (parts.length === 3) {
-        this._alpha = 100;
-      }
-      if (parts.length >= 3) {
-        const { h, s, v } = rgb2hsv(parts[0], parts[1], parts[2]);
-        fromHSV(h, s, v);
-      }
-    } else if (value.indexOf('#') !== -1) {
-      const hex = value.replace('#', '').trim();
-      if (!/^(?:[0-9a-fA-F]{3}){1,2}$/.test(hex)) return;
-      let r, g, b;
-
-      if (hex.length === 3) {
-        r = parseHexChannel(hex[0] + hex[0]);
-        g = parseHexChannel(hex[1] + hex[1]);
-        b = parseHexChannel(hex[2] + hex[2]);
-      } else if (hex.length === 6 || hex.length === 8) {
-        r = parseHexChannel(hex.substring(0, 2));
-        g = parseHexChannel(hex.substring(2, 4));
-        b = parseHexChannel(hex.substring(4, 6));
-      }
-
-      if (hex.length === 8) {
-        this._alpha = Math.floor(parseHexChannel(hex.substring(6)) / 255 * 100);
-      } else if (hex.length === 3 || hex.length === 6) {
-        this._alpha = 100;
-      }
-
-      const { h, s, v } = rgb2hsv(r, g, b);
-      fromHSV(h, s, v);
-    }
-  }
-
-  compare(color) {
-    return Math.abs(color._hue - this._hue) < 2 &&
-      Math.abs(color._saturation - this._saturation) < 1 &&
-      Math.abs(color._value - this._value) < 1 &&
-      Math.abs(color._alpha - this._alpha) < 1;
-  }
-
-  doOnChange() {
-    const { _hue, _saturation, _value, _alpha, format } = this;
-
-    if (this.enableAlpha) {
-      switch (format) {
-        case 'hsl':
-          const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
-          this.value = `hsla(${ _hue }, ${ Math.round(hsl[1] * 100) }%, ${ Math.round(hsl[2] * 100) }%, ${ _alpha / 100})`;
-          break;
-        case 'hsv':
-          this.value = `hsva(${ _hue }, ${ Math.round(_saturation) }%, ${ Math.round(_value) }%, ${ _alpha / 100})`;
-          break;
-        default:
-          const { r, g, b } = hsv2rgb(_hue, _saturation, _value);
-          this.value = `rgba(${r}, ${g}, ${b}, ${ _alpha / 100 })`;
-      }
-    } else {
-      switch (format) {
-        case 'hsl':
-          const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
-          this.value = `hsl(${ _hue }, ${ Math.round(hsl[1] * 100) }%, ${ Math.round(hsl[2] * 100) }%)`;
-          break;
-        case 'hsv':
-          this.value = `hsv(${ _hue }, ${ Math.round(_saturation) }%, ${ Math.round(_value) }%)`;
-          break;
-        case 'rgb':
-          const { r, g, b } = hsv2rgb(_hue, _saturation, _value);
-          this.value = `rgb(${r}, ${g}, ${b})`;
-          break;
-        default:
-          this.value = toHex(hsv2rgb(_hue, _saturation, _value));
-      }
-    }
-  }
-};

package/src/components/base/ui/color-picker/components/alpha-slider.vue

@@ -1,132 +0,0 @@
-<template>
-  <div class="base-color-alpha-slider" :class="{ 'is-vertical': vertical }">
-    <div class="base-color-alpha-slider__bar"
-         @click="handleClick"
-         ref="bar"
-         :style="{
-           background: background
-         }">
-    </div>
-    <div class="base-color-alpha-slider__thumb"
-         ref="thumb"
-         :style="{
-           left: thumbLeft + 'px',
-           top: thumbTop + 'px'
-         }">
-    </div>
-  </div>
-</template>
-
-<script>
-  import draggable from '../draggable';
-
-  export default {
-    name: 'base-color-alpha-slider',
-
-    props: {
-      color: {
-        required: true
-      },
-      vertical: Boolean
-    },
-
-    watch: {
-      'color._alpha'() {
-        this.update();
-      },
-
-      'color.value'() {
-        this.update();
-      }
-    },
-
-    methods: {
-      handleClick(event) {
-        const thumb = this.$refs.thumb;
-        const target = event.target;
-
-        if (target !== thumb) {
-          this.handleDrag(event);
-        }
-      },
-
-      handleDrag(event) {
-        const rect = this.$el.getBoundingClientRect();
-        const { thumb } = this.$refs;
-
-        if (!this.vertical) {
-          let left = event.clientX - rect.left;
-          left = Math.max(thumb.offsetWidth / 2, left);
-          left = Math.min(left, rect.width - thumb.offsetWidth / 2);
-
-          this.color.set('alpha', Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 100));
-        } else {
-          let top = event.clientY - rect.top;
-          top = Math.max(thumb.offsetHeight / 2, top);
-          top = Math.min(top, rect.height - thumb.offsetHeight / 2);
-
-          this.color.set('alpha', Math.round((top - thumb.offsetHeight / 2) / (rect.height - thumb.offsetHeight) * 100));
-        }
-      },
-
-      getThumbLeft() {
-        if (this.vertical) return 0;
-        const el = this.$el;
-        const alpha = this.color._alpha;
-
-        if (!el) return 0;
-        const thumb = this.$refs.thumb;
-        return Math.round(alpha * (el.offsetWidth - thumb.offsetWidth / 2) / 100);
-      },
-
-      getThumbTop() {
-        if (!this.vertical) return 0;
-        const el = this.$el;
-        const alpha = this.color._alpha;
-
-        if (!el) return 0;
-        const thumb = this.$refs.thumb;
-        return Math.round(alpha * (el.offsetHeight - thumb.offsetHeight / 2) / 100);
-      },
-
-      getBackground() {
-        if (this.color && this.color.value) {
-          const { r, g, b } = this.color.toRgb();
-          return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
-        }
-        return null;
-      },
-
-      update() {
-        this.thumbLeft = this.getThumbLeft();
-        this.thumbTop = this.getThumbTop();
-        this.background = this.getBackground();
-      }
-    },
-
-    data() {
-      return {
-        thumbLeft: 0,
-        thumbTop: 0,
-        background: null
-      };
-    },
-
-    mounted() {
-      const { bar, thumb } = this.$refs;
-
-      const dragConfig = {
-        drag: (event) => {
-          this.handleDrag(event);
-        },
-        end: (event) => {
-          this.handleDrag(event);
-        }
-      };
-
-      draggable(bar, dragConfig);
-      draggable(thumb, dragConfig);
-      this.update();
-    }
-  };
-</script>