@zkwq/business 0.0.4 → 0.0.6

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

@@ -1,123 +0,0 @@
-<template>
-  <div class="base-color-hue-slider" :class="{ 'is-vertical': vertical }">
-    <div class="base-color-hue-slider__bar" @click="handleClick" ref="bar"></div>
-    <div class="base-color-hue-slider__thumb"
-         :style="{
-           left: thumbLeft + 'px',
-           top: thumbTop + 'px'
-         }"
-         ref="thumb">
-    </div>
-  </div>
-</template>
-
-<script>
-  import draggable from '../draggable';
-
-  export default {
-    name: 'base-color-hue-slider',
-
-    props: {
-      color: {
-        required: true
-      },
-
-      vertical: Boolean
-    },
-
-    data() {
-      return {
-        thumbLeft: 0,
-        thumbTop: 0
-      };
-    },
-
-    computed: {
-      hueValue() {
-        const hue = this.color.get('hue');
-        return hue;
-      }
-    },
-
-    watch: {
-      hueValue() {
-        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;
-        let hue;
-
-        if (!this.vertical) {
-          let left = event.clientX - rect.left;
-          left = Math.min(left, rect.width - thumb.offsetWidth / 2);
-          left = Math.max(thumb.offsetWidth / 2, left);
-
-          hue = Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 360);
-        } else {
-          let top = event.clientY - rect.top;
-          top = Math.min(top, rect.height - thumb.offsetHeight / 2);
-          top = Math.max(thumb.offsetHeight / 2, top);
-
-          hue = Math.round((top - thumb.offsetHeight / 2) / (rect.height - thumb.offsetHeight) * 360);
-        }
-
-        this.color.set('hue', hue);
-      },
-
-      getThumbLeft() {
-        if (this.vertical) return 0;
-        const el = this.$el;
-        const hue = this.color.get('hue');
-
-        if (!el) return 0;
-        const thumb = this.$refs.thumb;
-        return Math.round(hue * (el.offsetWidth - thumb.offsetWidth / 2) / 360);
-      },
-
-      getThumbTop() {
-        if (!this.vertical) return 0;
-        const el = this.$el;
-        const hue = this.color.get('hue');
-
-        if (!el) return 0;
-        const thumb = this.$refs.thumb;
-        return Math.round(hue * (el.offsetHeight - thumb.offsetHeight / 2) / 360);
-      },
-
-      update() {
-        this.thumbLeft = this.getThumbLeft();
-        this.thumbTop = this.getThumbTop();
-      }
-    },
-
-    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>

package/src/components/base/ui/color-picker/components/picker-dropdown.vue

@@ -1,119 +0,0 @@
-<template>
-  <transition name="base-zoom-in-top" @after-leave="doDestroy">
-    <div
-      class="base-color-dropdown"
-      v-show="showPopper">
-      <div class="base-color-dropdown__main-wrapper">
-        <hue-slider ref="hue" :color="color" vertical style="float: right;"></hue-slider>
-        <sv-panel ref="sl" :color="color"></sv-panel>
-      </div>
-      <alpha-slider v-if="showAlpha" ref="alpha" :color="color"></alpha-slider>
-      <predefine v-if="predefine" :color="color" :colors="predefine"></predefine>
-      <div class="base-color-dropdown__btns">
-        <span class="base-color-dropdown__value">
-          <base-input
-            v-model="customInput"
-            @keyup.native.enter="handleConfirm"
-            @blur="handleConfirm"
-            size="small"
-            :validate-event="false">
-          </base-input>
-        </span>
-        <base-button
-          light
-          size="small"
-          @click="$emit('clear')">
-          {{ t('base.colorpicker.clear') }}
-        </base-button>
-        <base-button
-          type="primary"
-          size="small"
-          @click="confirmValue">
-          {{ t('base.colorpicker.confirm') }}
-        </base-button>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-  import SvPanel from './sv-panel';
-  import HueSlider from './hue-slider';
-  import AlphaSlider from './alpha-slider';
-  import Predefine from './predefine';
-  import Popper from '../../util/vue-popper';
-  import Locale from '../../mixin/locale';
-  import BaseInput from '../../input/Input';
-  import BaseButton from '../../button/Button';
-
-  export default {
-    name: 'base-color-picker-dropdown',
-
-    mixins: [Popper, Locale],
-
-    components: {
-      SvPanel,
-      HueSlider,
-      AlphaSlider,
-      BaseInput,
-      BaseButton,
-      Predefine
-    },
-
-    props: {
-      color: {
-        required: true
-      },
-      showAlpha: Boolean,
-      predefine: Array
-    },
-
-    data() {
-      return {
-        customInput: ''
-      };
-    },
-
-    computed: {
-      currentColor() {
-        const parent = this.$parent;
-        return !parent.value && !parent.showPanelColor ? '' : parent.color.value;
-      }
-    },
-
-    methods: {
-      confirmValue() {
-        this.$emit('pick');
-      },
-
-      handleConfirm() {
-        this.color.fromString(this.customInput);
-      }
-    },
-
-    mounted() {
-      this.$parent.popperElm = this.popperElm = this.$el;
-      this.referenceElm = this.$parent.$el;
-    },
-
-    watch: {
-      showPopper(val) {
-        if (val === true) {
-          this.$nextTick(() => {
-            const { sl, hue, alpha } = this.$refs;
-            sl && sl.update();
-            hue && hue.update();
-            alpha && alpha.update();
-          });
-        }
-      },
-
-      currentColor: {
-        immediate: true,
-        handler(val) {
-          this.customInput = val;
-        }
-      }
-    }
-  };
-</script>

package/src/components/base/ui/color-picker/components/predefine.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="base-color-predefine">
-    <div class="base-color-predefine__colors">
-      <div class="base-color-predefine__color-selector"
-           :class="{selected: item.selected, 'is-alpha': item._alpha < 100}"
-           v-for="(item, index) in rgbaColors"
-           :key="colors[index]"
-           @click="handleSelect(index)">
-        <div :style="{'background-color': item.value}">
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import Color from '../color';
-
-  export default {
-    props: {
-      colors: { type: Array, required: true },
-      color: { required: true }
-    },
-    data() {
-      return {
-        rgbaColors: this.parseColors(this.colors, this.color)
-      };
-    },
-    methods: {
-      handleSelect(index) {
-        this.color.fromString(this.colors[index]);
-      },
-      parseColors(colors, color) {
-        return colors.map(value => {
-          const c = new Color();
-          c.enableAlpha = true;
-          c.format = 'rgba';
-          c.fromString(value);
-          c.selected = c.value === color.value;
-          return c;
-        });
-      }
-    },
-    watch: {
-      '$parent.currentColor'(val) {
-        const color = new Color();
-        color.fromString(val);
-
-        this.rgbaColors.forEach(item => {
-          item.selected = color.compare(item);
-        });
-      },
-      colors(newVal) {
-        this.rgbaColors = this.parseColors(newVal, this.color);
-      },
-      color(newVal) {
-        this.rgbaColors = this.parseColors(this.colors, newVal);
-      }
-    }
-  };
-</script>

package/src/components/base/ui/color-picker/components/sv-panel.vue

@@ -1,100 +0,0 @@
-<template>
-  <div class="base-color-svpanel"
-      :style="{
-        backgroundColor: background
-      }">
-    <div class="base-color-svpanel__white"></div>
-    <div class="base-color-svpanel__black"></div>
-    <div class="base-color-svpanel__cursor"
-      :style="{
-        top: cursorTop + 'px',
-        left: cursorLeft + 'px'
-      }">
-      <div></div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import draggable from '../draggable';
-
-  export default {
-    name: 'base-sl-panel',
-
-    props: {
-      color: {
-        required: true
-      }
-    },
-
-    computed: {
-      colorValue() {
-        const hue = this.color.get('hue');
-        const value = this.color.get('value');
-        return { hue, value };
-      }
-    },
-
-    watch: {
-      colorValue() {
-        this.update();
-      }
-    },
-
-    methods: {
-      update() {
-        const saturation = this.color.get('saturation');
-        const value = this.color.get('value');
-
-        const el = this.$el;
-        let { clientWidth: width, clientHeight: height } = el;
-
-        this.cursorLeft = saturation * width / 100;
-        this.cursorTop = (100 - value) * height / 100;
-
-        this.background = 'hsl(' + this.color.get('hue') + ', 100%, 50%)';
-      },
-
-      handleDrag(event) {
-        const el = this.$el;
-        const rect = el.getBoundingClientRect();
-
-        let left = event.clientX - rect.left;
-        let top = event.clientY - rect.top;
-        left = Math.max(0, left);
-        left = Math.min(left, rect.width);
-
-        top = Math.max(0, top);
-        top = Math.min(top, rect.height);
-
-        this.cursorLeft = left;
-        this.cursorTop = top;
-        this.color.set({
-          saturation: left / rect.width * 100,
-          value: 100 - top / rect.height * 100
-        });
-      }
-    },
-
-    mounted() {
-      draggable(this.$el, {
-        drag: (event) => {
-          this.handleDrag(event);
-        },
-        end: (event) => {
-          this.handleDrag(event);
-        }
-      });
-
-      this.update();
-    },
-
-    data() {
-      return {
-        cursorTop: 0,
-        cursorLeft: 0,
-        background: 'hsl(0, 100%, 50%)'
-      };
-    }
-  };
-</script>

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

@@ -1,36 +0,0 @@
-import Vue from 'vue';
-let isDragging = false;
-
-export default function(element, options) {
-  if (Vue.prototype.$isServer) return;
-  const moveFn = function(event) {
-    if (options.drag) {
-      options.drag(event);
-    }
-  };
-  const upFn = function(event) {
-    document.removeEventListener('mousemove', moveFn);
-    document.removeEventListener('mouseup', upFn);
-    document.onselectstart = null;
-    document.ondragstart = null;
-
-    isDragging = false;
-
-    if (options.end) {
-      options.end(event);
-    }
-  };
-  element.addEventListener('mousedown', function(event) {
-    if (isDragging) return;
-    document.onselectstart = function() { return false; };
-    document.ondragstart = function() { return false; };
-
-    document.addEventListener('mousemove', moveFn);
-    document.addEventListener('mouseup', upFn);
-    isDragging = true;
-
-    if (options.start) {
-      options.start(event);
-    }
-  });
-}

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

@@ -1,2 +0,0 @@
-import ColorPicker from './main';
-export default ColorPicker;

package/src/components/base/ui/color-picker/main.vue

@@ -1,188 +0,0 @@
-<template>
-  <div
-    :class="[
-      'base-color-picker',
-      colorDisabled ? 'is-disabled' : '',
-      colorSize ? `base-color-picker--${ colorSize }` : ''
-    ]"
-    v-clickoutside="hide">
-    <div class="base-color-picker__mask" v-if="colorDisabled"></div>
-    <div class="base-color-picker__trigger" @click="handleTrigger">
-      <span class="base-color-picker__color" :class="{ 'is-alpha': showAlpha }">
-        <span class="base-color-picker__color-inner"
-          :style="{
-            backgroundColor: displayedColor
-          }"></span>
-        <span class="base-color-picker__empty base-icon-close" v-if="!value && !showPanelColor"></span>
-      </span>
-      <span class="base-color-picker__icon base-icon-arrow-down" v-show="value || showPanelColor"></span>
-    </div>
-    <picker-dropdown
-       ref="dropdown"
-       :class="['base-color-picker__panel', popperClass || '']"
-       v-model="showPicker"
-       @pick="confirmValue"
-       @clear="clearValue"
-       :color="color"
-       :show-alpha="showAlpha"
-       :predefine="predefine">
-    </picker-dropdown>
-  </div>
-</template>
-
-<script>
-  import Color from './color';
-  import PickerDropdown from './components/picker-dropdown.vue';
-  import Clickoutside from '../util/clickoutside';
-  import Emitter from '../mixin/emitter';
-
-  export default {
-    name: 'BaseColorPicker',
-
-    mixins: [Emitter],
-
-    props: {
-      value: String,
-      showAlpha: Boolean,
-      colorFormat: String,
-      disabled: Boolean,
-      size: String,
-      popperClass: String,
-      predefine: Array
-    },
-
-    inject: {
-      baseForm: {
-        default: ''
-      },
-      baseFormItem: {
-        default: ''
-      }
-    },
-
-    directives: { Clickoutside },
-
-    computed: {
-      displayedColor() {
-        if (!this.value && !this.showPanelColor) {
-          return 'transparent';
-        }
-
-        return this.displayedRgb(this.color, this.showAlpha);
-      },
-
-      _baseFormItemSize() {
-        return (this.elFormItem || {}).elFormItemSize;
-      },
-
-      colorSize() {
-        return this.size || this._baseFormItemSize || (this.$ELEMENT || {}).size;
-      },
-
-      colorDisabled() {
-        return this.disabled || (this.baseForm || {}).disabled;
-      }
-    },
-
-    watch: {
-      value(val) {
-        if (!val) {
-          this.showPanelColor = false;
-        } else if (val && val !== this.color.value) {
-          this.color.fromString(val);
-        }
-      },
-      color: {
-        deep: true,
-        handler() {
-          this.showPanelColor = true;
-        }
-      },
-      displayedColor(val) {
-        if (!this.showPicker) return;
-        const currentValueColor = new Color({
-          enableAlpha: this.showAlpha,
-          format: this.colorFormat
-        });
-        currentValueColor.fromString(this.value);
-
-        const currentValueColorRgb = this.displayedRgb(currentValueColor, this.showAlpha);
-        if (val !== currentValueColorRgb) {
-          this.$emit('active-change', val);
-        }
-      }
-    },
-
-    methods: {
-      handleTrigger() {
-        if (this.colorDisabled) return;
-        this.showPicker = !this.showPicker;
-      },
-      confirmValue() {
-        const value = this.color.value;
-        this.$emit('input', value);
-        this.$emit('change', value);
-        this.dispatch('BaseFormItem', 'base.form.change', value);
-        this.showPicker = false;
-      },
-      clearValue() {
-        this.$emit('input', null);
-        this.$emit('change', null);
-        if (this.value !== null) {
-          this.dispatch('BaseFormItem', 'base.form.change', null);
-        }
-        this.showPanelColor = false;
-        this.showPicker = false;
-        this.resetColor();
-      },
-      hide() {
-        this.showPicker = false;
-        this.resetColor();
-      },
-      resetColor() {
-        this.$nextTick(_ => {
-          if (this.value) {
-            this.color.fromString(this.value);
-          } else {
-            this.showPanelColor = false;
-          }
-        });
-      },
-      displayedRgb(color, showAlpha) {
-        if (!(color instanceof Color)) {
-          throw Error('color should be instance of Color Class');
-        }
-
-        const { r, g, b } = color.toRgb();
-        return showAlpha
-          ? `rgba(${ r }, ${ g }, ${ b }, ${ color.get('alpha') / 100 })`
-          : `rgb(${ r }, ${ g }, ${ b })`;
-      }
-    },
-
-    mounted() {
-      const value = this.value;
-      if (value) {
-        this.color.fromString(value);
-      }
-      this.popperElm = this.$refs.dropdown.$el;
-    },
-
-    data() {
-      const color = new Color({
-        enableAlpha: this.showAlpha,
-        format: this.colorFormat
-      });
-
-      return {
-        color,
-        showPicker: false,
-        showPanelColor: false
-      };
-    },
-
-    components: {
-      PickerDropdown
-    }
-  };
-</script>