element-sim 1.0.0

package/packages/color-picker/src/components/picker-dropdown.vue

@@ -0,0 +1,121 @@
+<template>
+  <transition name="el-zoom-in-top" @after-leave="doDestroy">
+    <div
+      class="el-color-dropdown"
+      v-show="showPopper">
+      <div class="el-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="el-color-dropdown__btns">
+        <span class="el-color-dropdown__value">
+          <el-input
+            v-model="customInput"
+            @keyup.native.enter="handleConfirm"
+            @blur="handleConfirm"
+            :validate-event="false"
+            size="mini">
+          </el-input>
+        </span>
+        <el-button
+          size="mini"
+          type="text"
+          class="el-color-dropdown__link-btn"
+          @click="$emit('clear')">
+          {{ t('el.colorpicker.clear') }}
+        </el-button>
+        <el-button
+          plain
+          size="mini"
+          class="el-color-dropdown__btn"
+          @click="confirmValue">
+          {{ t('el.colorpicker.confirm') }}
+        </el-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 'element-ui/src/utils/vue-popper';
+  import Locale from 'element-ui/src/mixins/locale';
+  import ElInput from 'element-ui/packages/input';
+  import ElButton from 'element-ui/packages/button';
+
+  export default {
+    name: 'el-color-picker-dropdown',
+
+    mixins: [Popper, Locale],
+
+    components: {
+      SvPanel,
+      HueSlider,
+      AlphaSlider,
+      ElInput,
+      ElButton,
+      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/packages/color-picker/src/components/predefine.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="el-color-predefine">
+    <div class="el-color-predefine__colors">
+      <div class="el-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/packages/color-picker/src/components/sv-panel.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="el-color-svpanel"
+      :style="{
+        backgroundColor: background
+      }">
+    <div class="el-color-svpanel__white"></div>
+    <div class="el-color-svpanel__black"></div>
+    <div class="el-color-svpanel__cursor"
+      :style="{
+        top: cursorTop + 'px',
+        left: cursorLeft + 'px'
+      }">
+      <div></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import draggable from '../draggable';
+
+  export default {
+    name: 'el-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/packages/color-picker/src/draggable.js

@@ -0,0 +1,36 @@
+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/packages/color-picker/src/main.vue

@@ -0,0 +1,188 @@
+<template>
+  <div
+    :class="[
+      'el-color-picker',
+      colorDisabled ? 'is-disabled' : '',
+      colorSize ? `el-color-picker--${ colorSize }` : ''
+    ]"
+    v-clickoutside="hide">
+    <div class="el-color-picker__mask" v-if="colorDisabled"></div>
+    <div class="el-color-picker__trigger" @click="handleTrigger">
+      <span class="el-color-picker__color" :class="{ 'is-alpha': showAlpha }">
+        <span class="el-color-picker__color-inner"
+          :style="{
+            backgroundColor: displayedColor
+          }"></span>
+        <span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span>
+      </span>
+      <span class="el-color-picker__icon el-icon-arrow-down" v-show="value || showPanelColor"></span>
+    </div>
+    <picker-dropdown
+       ref="dropdown"
+       :class="['el-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 'element-ui/src/utils/clickoutside';
+  import Emitter from 'element-ui/src/mixins/emitter';
+
+  export default {
+    name: 'ElColorPicker',
+
+    mixins: [Emitter],
+
+    props: {
+      value: String,
+      showAlpha: Boolean,
+      colorFormat: String,
+      disabled: Boolean,
+      size: String,
+      popperClass: String,
+      predefine: Array
+    },
+
+    inject: {
+      elForm: {
+        default: ''
+      },
+      elFormItem: {
+        default: ''
+      }
+    },
+
+    directives: { Clickoutside },
+
+    computed: {
+      displayedColor() {
+        if (!this.value && !this.showPanelColor) {
+          return 'transparent';
+        }
+
+        return this.displayedRgb(this.color, this.showAlpha);
+      },
+
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+
+      colorSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
+
+      colorDisabled() {
+        return this.disabled || (this.elForm || {}).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('ElFormItem', 'el.form.change', value);
+        this.showPicker = false;
+      },
+      clearValue() {
+        this.$emit('input', null);
+        this.$emit('change', null);
+        if (this.value !== null) {
+          this.dispatch('ElFormItem', 'el.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>

package/packages/container/index.js

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

package/packages/container/src/main.vue

@@ -0,0 +1,33 @@
+<template>
+  <section class="el-container" :class="{ 'is-vertical': isVertical }">
+    <slot></slot>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: 'ElContainer',
+
+    componentName: 'ElContainer',
+
+    props: {
+      direction: String
+    },
+
+    computed: {
+      isVertical() {
+        if (this.direction === 'vertical') {
+          return true;
+        } else if (this.direction === 'horizontal') {
+          return false;
+        }
+        return this.$slots && this.$slots.default
+          ? this.$slots.default.some(vnode => {
+            const tag = vnode.componentOptions && vnode.componentOptions.tag;
+            return tag === 'el-header' || tag === 'el-footer';
+          })
+          : false;
+      }
+    }
+  };
+</script>

package/packages/date-picker/index.js

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