kh-one-ui 2.0.0

package/packages/form/src/form.vue

@@ -0,0 +1,186 @@
+<template>
+	<form class="el-form" :class="[
+    labelPosition ? 'el-form--label-' + labelPosition : '',
+    { 'el-form--inline': inline }
+  ]">
+		<slot></slot>
+	</form>
+</template>
+<script>
+	import objectAssign from 'one-ui/src/utils/merge';
+
+	export default {
+		name: 'ElForm',
+
+		componentName: 'ElForm',
+
+		provide() {
+			return {
+				elForm: this
+			};
+		},
+
+		props: {
+			model: Object,
+			rules: Object,
+			labelPosition: String,
+			labelWidth: String,
+			labelSuffix: {
+				type: String,
+				default: ''
+			},
+			inline: Boolean,
+			inlineMessage: Boolean,
+			statusIcon: Boolean,
+			showMessage: {
+				type: Boolean,
+				default: true
+			},
+			size: String,
+			disabled: Boolean,
+			validateOnRuleChange: {
+				type: Boolean,
+				default: true
+			},
+			hideRequiredAsterisk: {
+				type: Boolean,
+				default: false
+			}
+		},
+		watch: {
+			rules() {
+				// remove then add event listeners on form-item after form rules change
+				this.fields.forEach(field => {
+					field.removeValidateEvents();
+					field.addValidateEvents();
+				});
+
+				if (this.validateOnRuleChange) {
+					this.validate(() => {});
+				}
+			}
+		},
+		computed: {
+			autoLabelWidth() {
+				if (!this.potentialLabelWidthArr.length) return 0;
+				const max = Math.max(...this.potentialLabelWidthArr);
+				return max ? `${max}px` : '';
+			}
+		},
+		data() {
+			return {
+				fields: [],
+				potentialLabelWidthArr: [] // use this array to calculate auto width
+			};
+		},
+		created() {
+			this.$on('el.form.addField', (field) => {
+				if (field) {
+					this.fields.push(field);
+				}
+			});
+			/* istanbul ignore next */
+			this.$on('el.form.removeField', (field) => {
+				if (field.prop) {
+					this.fields.splice(this.fields.indexOf(field), 1);
+				}
+			});
+		},
+		methods: {
+			resetFields() {
+				if (!this.model) {
+					console.warn('[One Warn][Form]model is required for resetFields to work.');
+					return;
+				}
+				this.fields.forEach(field => {
+					field.resetField();
+				});
+			},
+			clearValidate(props = []) {
+				const fields = props.length ?
+					(typeof props === 'string' ?
+						this.fields.filter(field => props === field.prop) :
+						this.fields.filter(field => props.indexOf(field.prop) > -1)
+					) : this.fields;
+				fields.forEach(field => {
+					field.clearValidate();
+				});
+			},
+			validate(callback) {
+				if (!this.model) {
+					console.warn('[One Warn][Form]model is required for validate to work!');
+					return;
+				}
+
+				let promise;
+				// if no callback, return promise
+				if (typeof callback !== 'function' && window.Promise) {
+					promise = new window.Promise((resolve, reject) => {
+						callback = function(valid) {
+							valid ? resolve(valid) : reject(valid);
+						};
+					});
+				}
+
+				let valid = true;
+				let count = 0;
+				// 如果需要验证的fields为空，调用验证时立刻返回callback
+				if (this.fields.length === 0 && callback) {
+					callback(true);
+				}
+				let invalidFields = {};
+				this.fields.forEach(field => {
+					field.validate('', (message, field) => {
+						if (message) {
+							valid = false;
+						}
+						invalidFields = objectAssign({}, invalidFields, field);
+						if (typeof callback === 'function' && ++count === this.fields.length) {
+							callback(valid, invalidFields);
+						}
+					});
+				});
+
+				if (promise) {
+					return promise;
+				}
+			},
+			validateField(props, cb) {
+				props = [].concat(props);
+				const fields = this.fields.filter(field => props.indexOf(field.prop) !== -1);
+				if (!fields.length) {
+					console.warn('[One Warn]please pass correct props!');
+					return;
+				}
+
+				fields.forEach(field => {
+					field.validate('', cb);
+				});
+			},
+			getLabelWidthIndex(width) {
+				const index = this.potentialLabelWidthArr.indexOf(width);
+				// it's impossible
+				if (index === -1) {
+					throw new Error('[OneForm]unpected width ', width);
+				}
+				return index;
+			},
+			registerLabelWidth(val, oldVal) {
+				if (val && oldVal) {
+					try {
+						const index = this.getLabelWidthIndex(oldVal);
+						this.potentialLabelWidthArr.splice(index, 1, val);
+					} catch (err) {}
+				} else if (val) {
+					this.potentialLabelWidthArr.push(val);
+				}
+			},
+			deregisterLabelWidth(val) {
+				try {
+					const index = this.getLabelWidthIndex(val);
+					this.potentialLabelWidthArr.splice(index, 1);
+				} catch (err) {}
+			}
+		}
+	};
+</script>

package/packages/form/src/label-wrap.vue

@@ -0,0 +1,78 @@
+<script>
+
+export default {
+  props: {
+    isAutoWidth: Boolean,
+    updateAll: Boolean
+  },
+
+  inject: ['elForm', 'elFormItem'],
+
+  render() {
+    const slots = this.$slots.default;
+    if (!slots) return null;
+    if (this.isAutoWidth) {
+      const autoLabelWidth = this.elForm.autoLabelWidth;
+      const style = {};
+      if (autoLabelWidth && autoLabelWidth !== 'auto') {
+        const marginLeft = parseInt(autoLabelWidth, 10) - this.computedWidth;
+        if (marginLeft) {
+          style.marginLeft = marginLeft + 'px';
+        }
+      }
+      return (<div class="el-form-item__label-wrap" style={style}>
+        { slots }
+      </div>);
+    } else {
+      return slots[0];
+    }
+  },
+
+  methods: {
+    getLabelWidth() {
+      if (this.$el && this.$el.firstElementChild) {
+        const computedWidth = window.getComputedStyle(this.$el.firstElementChild).width;
+        return Math.ceil(parseFloat(computedWidth));
+      } else {
+        return 0;
+      }
+    },
+    updateLabelWidth(action = 'update') {
+      if (this.$slots.default && this.isAutoWidth && this.$el.firstElementChild) {
+        if (action === 'update') {
+          this.computedWidth = this.getLabelWidth();
+        } else if (action === 'remove') {
+          this.elForm.deregisterLabelWidth(this.computedWidth);
+        }
+      }
+    }
+  },
+
+  watch: {
+    computedWidth(val, oldVal) {
+      if (this.updateAll) {
+        this.elForm.registerLabelWidth(val, oldVal);
+        this.elFormItem.updateComputedLabelWidth(val);
+      }
+    }
+  },
+
+  data() {
+    return {
+      computedWidth: 0
+    };
+  },
+
+  mounted() {
+    this.updateLabelWidth('update');
+  },
+
+  updated() {
+    this.updateLabelWidth('update');
+  },
+
+  beforeDestroy() {
+    this.updateLabelWidth('remove');
+  }
+};
+</script>

package/packages/form-item/index.js

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

package/packages/header/index.js

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

package/packages/header/src/main.vue

@@ -0,0 +1,20 @@
+<template>
+  <header class="el-header" :style="{ height }">
+    <slot></slot>
+  </header>
+</template>
+
+<script>
+  export default {
+    name: 'ElHeader',
+
+    componentName: 'ElHeader',
+
+    props: {
+      height: {
+        type: String,
+        default: '60px'
+      }
+    }
+  };
+</script>

package/packages/icon/index.js

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

package/packages/icon/src/icon.vue

@@ -0,0 +1,13 @@
+<template>
+  <i :class="'el-icon-' + name"></i>
+</template>
+
+<script>
+  export default {
+    name: 'ElIcon',
+
+    props: {
+      name: String
+    }
+  };
+</script>

package/packages/image/index.js

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

package/packages/image/src/image-viewer.vue

@@ -0,0 +1,302 @@
+<template>
+  <transition name="viewer-fade">
+    <div tabindex="-1" ref="el-image-viewer__wrapper" class="el-image-viewer__wrapper" :style="{ 'z-index': zIndex }">
+      <div class="el-image-viewer__mask"></div>
+      <!-- CLOSE -->
+      <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
+        <i class="el-icon-circle-close"></i>
+      </span>
+      <!-- ARROW -->
+      <template v-if="!isSingle">
+        <span
+          class="el-image-viewer__btn el-image-viewer__prev"
+          :class="{ 'is-disabled': !infinite && isFirst }"
+          @click="prev">
+          <i class="el-icon-arrow-left"/>
+        </span>
+        <span
+          class="el-image-viewer__btn el-image-viewer__next"
+          :class="{ 'is-disabled': !infinite && isLast }"
+          @click="next">
+          <i class="el-icon-arrow-right"/>
+        </span>
+      </template>
+      <!-- ACTIONS -->
+      <div class="el-image-viewer__btn el-image-viewer__actions">
+        <div class="el-image-viewer__actions__inner">
+          <i class="el-icon-zoom-out" @click="handleActions('zoomOut')"></i>
+          <i class="el-icon-zoom-in" @click="handleActions('zoomIn')"></i>
+          <i class="el-image-viewer__actions__divider"></i>
+          <i :class="mode.icon" @click="toggleMode"></i>
+          <i class="el-image-viewer__actions__divider"></i>
+          <i class="el-icon-refresh-left" @click="handleActions('anticlocelise')"></i>
+          <i class="el-icon-refresh-right" @click="handleActions('clocelise')"></i>
+        </div>
+      </div>
+      <!-- CANVAS -->
+      <div class="el-image-viewer__canvas">
+        <img
+          v-for="(url, i) in urlList"
+          v-if="i === index"
+          ref="img"
+          class="el-image-viewer__img"
+          :key="url"
+          :src="currentImg"
+          :style="imgStyle"
+          @load="handleImgLoad"
+          @error="handleImgError"
+          @mousedown="handleMouseDown">
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { on, off } from 'one-ui/src/utils/dom';
+import { rafThrottle, isFirefox } from 'one-ui/src/utils/util';
+
+const Mode = {
+  CONTAIN: {
+    name: 'contain',
+    icon: 'el-icon-full-screen'
+  },
+  ORIGINAL: {
+    name: 'original',
+    icon: 'el-icon-c-scale-to-original'
+  }
+};
+
+const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
+
+export default {
+  name: 'elImageViewer',
+
+  props: {
+    urlList: {
+      type: Array,
+      default: () => []
+    },
+    zIndex: {
+      type: Number,
+      default: 2000
+    },
+    onSwitch: {
+      type: Function,
+      default: () => {}
+    },
+    onClose: {
+      type: Function,
+      default: () => {}
+    },
+    initialIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data() {
+    return {
+      index: this.initialIndex,
+      isShow: false,
+      infinite: true,
+      loading: false,
+      mode: Mode.CONTAIN,
+      transform: {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      }
+    };
+  },
+  computed: {
+    isSingle() {
+      return this.urlList.length <= 1;
+    },
+    isFirst() {
+      return this.index === 0;
+    },
+    isLast() {
+      return this.index === this.urlList.length - 1;
+    },
+    currentImg() {
+      return this.urlList[this.index];
+    },
+    imgStyle() {
+      const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;
+      const style = {
+        transform: `scale(${scale}) rotate(${deg}deg)`,
+        transition: enableTransition ? 'transform .3s' : '',
+        'margin-left': `${offsetX}px`,
+        'margin-top': `${offsetY}px`
+      };
+      if (this.mode === Mode.CONTAIN) {
+        style.maxWidth = style.maxHeight = '100%';
+      }
+      return style;
+    }
+  },
+  watch: {
+    index: {
+      handler: function(val) {
+        this.reset();
+        this.onSwitch(val);
+      }
+    },
+    currentImg(val) {
+      this.$nextTick(_ => {
+        const $img = this.$refs.img[0];
+        if (!$img.complete) {
+          this.loading = true;
+        }
+      });
+    }
+  },
+  methods: {
+    hide() {
+      this.deviceSupportUninstall();
+      this.onClose();
+    },
+    deviceSupportInstall() {
+      this._keyDownHandler = rafThrottle(e => {
+        const keyCode = e.keyCode;
+        switch (keyCode) {
+          // ESC
+          case 27:
+            this.hide();
+            break;
+          // SPACE
+          case 32:
+            this.toggleMode();
+            break;
+          // LEFT_ARROW
+          case 37:
+            this.prev();
+            break;
+          // UP_ARROW
+          case 38:
+            this.handleActions('zoomIn');
+            break;
+          // RIGHT_ARROW
+          case 39:
+            this.next();
+            break;
+          // DOWN_ARROW
+          case 40:
+            this.handleActions('zoomOut');
+            break;
+        }
+      });
+      this._mouseWheelHandler = rafThrottle(e => {
+        const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
+        if (delta > 0) {
+          this.handleActions('zoomIn', {
+            zoomRate: 0.015,
+            enableTransition: false
+          });
+        } else {
+          this.handleActions('zoomOut', {
+            zoomRate: 0.015,
+            enableTransition: false
+          });
+        }
+      });
+      on(document, 'keydown', this._keyDownHandler);
+      on(document, mousewheelEventName, this._mouseWheelHandler);
+    },
+    deviceSupportUninstall() {
+      off(document, 'keydown', this._keyDownHandler);
+      off(document, mousewheelEventName, this._mouseWheelHandler);
+      this._keyDownHandler = null;
+      this._mouseWheelHandler = null;
+    },
+    handleImgLoad(e) {
+      this.loading = false;
+    },
+    handleImgError(e) {
+      this.loading = false;
+      e.target.alt = '加载失败';
+    },
+    handleMouseDown(e) {
+      if (this.loading || e.button !== 0) return;
+
+      const { offsetX, offsetY } = this.transform;
+      const startX = e.pageX;
+      const startY = e.pageY;
+      this._dragHandler = rafThrottle(ev => {
+        this.transform.offsetX = offsetX + ev.pageX - startX;
+        this.transform.offsetY = offsetY + ev.pageY - startY;
+      });
+      on(document, 'mousemove', this._dragHandler);
+      on(document, 'mouseup', ev => {
+        off(document, 'mousemove', this._dragHandler);
+      });
+
+      e.preventDefault();
+    },
+    reset() {
+      this.transform = {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      };
+    },
+    toggleMode() {
+      if (this.loading) return;
+
+      const modeNames = Object.keys(Mode);
+      const modeValues = Object.values(Mode);
+      const index = modeValues.indexOf(this.mode);
+      const nextIndex = (index + 1) % modeNames.length;
+      this.mode = Mode[modeNames[nextIndex]];
+      this.reset();
+    },
+    prev() {
+      if (this.isFirst && !this.infinite) return;
+      const len = this.urlList.length;
+      this.index = (this.index - 1 + len) % len;
+    },
+    next() {
+      if (this.isLast && !this.infinite) return;
+      const len = this.urlList.length;
+      this.index = (this.index + 1) % len;
+    },
+    handleActions(action, options = {}) {
+      if (this.loading) return;
+      const { zoomRate, rotateDeg, enableTransition } = {
+        zoomRate: 0.2,
+        rotateDeg: 90,
+        enableTransition: true,
+        ...options
+      };
+      const { transform } = this;
+      switch (action) {
+        case 'zoomOut':
+          if (transform.scale > 0.2) {
+            transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));
+          }
+          break;
+        case 'zoomIn':
+          transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
+          break;
+        case 'clocelise':
+          transform.deg += rotateDeg;
+          break;
+        case 'anticlocelise':
+          transform.deg -= rotateDeg;
+          break;
+      }
+      transform.enableTransition = enableTransition;
+    }
+  },
+  mounted() {
+    this.deviceSupportInstall();
+    // add tabindex then wrapper can be focusable via Javascript
+    // focus wrapper so arrow key can't cause inner scroll behavior underneath
+    this.$refs['el-image-viewer__wrapper'].focus();
+  }
+};
+</script>