element-sim 1.0.0 → 1.0.1

package/packages/color-picker/src/main.vue

@@ -1,188 +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>
+<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-sim/src/utils/clickoutside';
+  import Emitter from 'element-sim/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

@@ -1,8 +1,8 @@
-import Container from './src/main';
-
-/* istanbul ignore next */
-Container.install = function(Vue) {
-  Vue.component(Container.name, Container);
-};
-
-export default Container;
+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

@@ -1,33 +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>
+<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

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