kh-one-ui 2.0.0

package/packages/dropdown/src/dropdown.vue

@@ -0,0 +1,279 @@
+<script>
+  import Clickoutside from 'one-ui/src/utils/clickoutside';
+  import Emitter from 'one-ui/src/mixins/emitter';
+  import Migrating from 'one-ui/src/mixins/migrating';
+  import ElButton from 'one-ui/packages/button';
+  import ElButtonGroup from 'one-ui/packages/button-group';
+  import { generateId } from 'one-ui/src/utils/util';
+
+  export default {
+    name: 'ElDropdown',
+
+    componentName: 'ElDropdown',
+
+    mixins: [Emitter, Migrating],
+
+    directives: { Clickoutside },
+
+    components: {
+      ElButton,
+      ElButtonGroup
+    },
+
+    provide() {
+      return {
+        dropdown: this
+      };
+    },
+
+    props: {
+      trigger: {
+        type: String,
+        default: 'hover'
+      },
+      type: String,
+      size: {
+        type: String,
+        default: ''
+      },
+      splitButton: Boolean,
+      hideOnClick: {
+        type: Boolean,
+        default: true
+      },
+      placement: {
+        type: String,
+        default: 'bottom-end'
+      },
+      visibleArrow: {
+        default: true
+      },
+      showTimeout: {
+        type: Number,
+        default: 250
+      },
+      hideTimeout: {
+        type: Number,
+        default: 150
+      },
+      tabindex: {
+        type: Number,
+        default: 0
+      }
+    },
+
+    data() {
+      return {
+        timeout: null,
+        visible: false,
+        triggerElm: null,
+        menuItems: null,
+        menuItemsArray: null,
+        dropdownElm: null,
+        focusing: false,
+        listId: `dropdown-menu-${generateId()}`
+      };
+    },
+
+    computed: {
+      dropdownSize() {
+        return this.size || (this.$ONE || {}).size;
+      }
+    },
+
+    mounted() {
+      this.$on('menu-item-click', this.handleMenuItemClick);
+    },
+
+    watch: {
+      visible(val) {
+        this.broadcast('ElDropdownMenu', 'visible', val);
+        this.$emit('visible-change', val);
+      },
+      focusing(val) {
+        const selfDefine = this.$el.querySelector('.el-dropdown-selfdefine');
+        if (selfDefine) { // 自定义
+          if (val) {
+            selfDefine.className += ' focusing';
+          } else {
+            selfDefine.className = selfDefine.className.replace('focusing', '');
+          }
+        }
+      }
+    },
+
+    methods: {
+      getMigratingConfig() {
+        return {
+          props: {
+            'menu-align': 'menu-align is renamed to placement.'
+          }
+        };
+      },
+      show() {
+        if (this.triggerElm.disabled) return;
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
+          this.visible = true;
+        }, this.trigger === 'click' ? 0 : this.showTimeout);
+      },
+      hide() {
+        if (this.triggerElm.disabled) return;
+        this.removeTabindex();
+        if (this.tabindex >= 0) {
+          this.resetTabindex(this.triggerElm);
+        }
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
+          this.visible = false;
+        }, this.trigger === 'click' ? 0 : this.hideTimeout);
+      },
+      handleClick() {
+        if (this.triggerElm.disabled) return;
+        if (this.visible) {
+          this.hide();
+        } else {
+          this.show();
+        }
+      },
+      handleTriggerKeyDown(ev) {
+        const keyCode = ev.keyCode;
+        if ([38, 40].indexOf(keyCode) > -1) { // up/down
+          this.removeTabindex();
+          this.resetTabindex(this.menuItems[0]);
+          this.menuItems[0].focus();
+          ev.preventDefault();
+          ev.stopPropagation();
+        } else if (keyCode === 13) { // space enter选中
+          this.handleClick();
+        } else if ([9, 27].indexOf(keyCode) > -1) { // tab || esc
+          this.hide();
+        }
+      },
+      handleItemKeyDown(ev) {
+        const keyCode = ev.keyCode;
+        const target = ev.target;
+        const currentIndex = this.menuItemsArray.indexOf(target);
+        const max = this.menuItemsArray.length - 1;
+        let nextIndex;
+        if ([38, 40].indexOf(keyCode) > -1) { // up/down
+          if (keyCode === 38) { // up
+            nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
+          } else { // down
+            nextIndex = currentIndex < max ? currentIndex + 1 : max;
+          }
+          this.removeTabindex();
+          this.resetTabindex(this.menuItems[nextIndex]);
+          this.menuItems[nextIndex].focus();
+          ev.preventDefault();
+          ev.stopPropagation();
+        } else if (keyCode === 13) { // enter选中
+          this.triggerElmFocus();
+          target.click();
+          if (this.hideOnClick) { // click关闭
+            this.visible = false;
+          }
+        } else if ([9, 27].indexOf(keyCode) > -1) { // tab // esc
+          this.hide();
+          this.triggerElmFocus();
+        }
+      },
+      resetTabindex(ele) { // 下次tab时组件聚焦元素
+        this.removeTabindex();
+        ele.setAttribute('tabindex', '0'); // 下次期望的聚焦元素
+      },
+      removeTabindex() {
+        this.triggerElm.setAttribute('tabindex', '-1');
+        this.menuItemsArray.forEach((item) => {
+          item.setAttribute('tabindex', '-1');
+        });
+      },
+      initAria() {
+        this.dropdownElm.setAttribute('id', this.listId);
+        this.triggerElm.setAttribute('aria-haspopup', 'list');
+        this.triggerElm.setAttribute('aria-controls', this.listId);
+
+        if (!this.splitButton) { // 自定义
+          this.triggerElm.setAttribute('role', 'button');
+          this.triggerElm.setAttribute('tabindex', this.tabindex);
+          this.triggerElm.setAttribute('class', (this.triggerElm.getAttribute('class') || '') + ' el-dropdown-selfdefine'); // 控制
+        }
+      },
+      initEvent() {
+        let { trigger, show, hide, handleClick, splitButton, handleTriggerKeyDown, handleItemKeyDown } = this;
+        this.triggerElm = splitButton
+          ? this.$refs.trigger.$el
+          : this.$slots.default[0].elm;
+
+        let dropdownElm = this.dropdownElm;
+
+        this.triggerElm.addEventListener('keydown', handleTriggerKeyDown); // triggerElm keydown
+        dropdownElm.addEventListener('keydown', handleItemKeyDown, true); // item keydown
+        // 控制自定义元素的样式
+        if (!splitButton) {
+          this.triggerElm.addEventListener('focus', () => {
+            this.focusing = true;
+          });
+          this.triggerElm.addEventListener('blur', () => {
+            this.focusing = false;
+          });
+          this.triggerElm.addEventListener('click', () => {
+            this.focusing = false;
+          });
+        }
+        if (trigger === 'hover') {
+          this.triggerElm.addEventListener('mouseenter', show);
+          this.triggerElm.addEventListener('mouseleave', hide);
+          dropdownElm.addEventListener('mouseenter', show);
+          dropdownElm.addEventListener('mouseleave', hide);
+        } else if (trigger === 'click') {
+          this.triggerElm.addEventListener('click', handleClick);
+        }
+      },
+      handleMenuItemClick(command, instance) {
+        if (this.hideOnClick) {
+          this.visible = false;
+        }
+        this.$emit('command', command, instance);
+      },
+      triggerElmFocus() {
+        this.triggerElm.focus && this.triggerElm.focus();
+      },
+      initDomOperation() {
+        this.dropdownElm = this.popperElm;
+        this.menuItems = this.dropdownElm.querySelectorAll("[tabindex='-1']");
+        this.menuItemsArray = [].slice.call(this.menuItems);
+
+        this.initEvent();
+        this.initAria();
+      }
+    },
+
+    render(h) {
+      let { hide, splitButton, type, dropdownSize } = this;
+
+      const handleMainButtonClick = (event) => {
+        this.$emit('click', event);
+        hide();
+      };
+
+      let triggerElm = !splitButton
+        ? this.$slots.default
+        : (<el-button-group>
+          <el-button type={type} size={dropdownSize} nativeOn-click={handleMainButtonClick}>
+            {this.$slots.default}
+          </el-button>
+          <el-button ref="trigger" type={type} size={dropdownSize} class="el-dropdown__caret-button">
+            <i class="el-dropdown__icon el-icon-arrow-down"></i>
+          </el-button>
+        </el-button-group>);
+
+      return (
+        <div class="el-dropdown" v-clickoutside={hide}>
+          {triggerElm}
+          {this.$slots.dropdown}
+        </div>
+      );
+    }
+  };
+</script>

package/packages/dropdown-item/index.js

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

package/packages/dropdown-menu/index.js

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

package/packages/footer/index.js

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

package/packages/footer/src/main.vue

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

package/packages/form/index.js

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

package/packages/form/src/form-item.vue

@@ -0,0 +1,319 @@
+<template>
+  <div class="el-form-item" :class="[{
+      'el-form-item--feedback': elForm && elForm.statusIcon,
+      'is-error': validateState === 'error',
+      'is-validating': validateState === 'validating',
+      'is-success': validateState === 'success',
+      'is-required': isRequired || required,
+      'is-no-asterisk': elForm && elForm.hideRequiredAsterisk
+    },
+    sizeClass ? 'el-form-item--' + sizeClass : ''
+  ]">
+    <label-wrap
+      :is-auto-width="labelStyle && labelStyle.width === 'auto'"
+      :update-all="form.labelWidth === 'auto'">
+      <label :for="labelFor" class="el-form-item__label" :style="labelStyle" v-if="label || $slots.label">
+        <slot name="label">{{label + form.labelSuffix}}</slot>
+      </label>
+    </label-wrap>
+    <div class="el-form-item__content" :style="contentStyle">
+      <slot></slot>
+      <transition name="el-zoom-in-top">
+        <slot
+          v-if="validateState === 'error' && showMessage && form.showMessage"
+          name="error"
+          :error="validateMessage">
+          <div
+            class="el-form-item__error"
+            :class="{
+              'el-form-item__error--inline': typeof inlineMessage === 'boolean'
+                ? inlineMessage
+                : (elForm && elForm.inlineMessage || false)
+            }"
+          >
+            {{validateMessage}}
+          </div>
+        </slot>
+      </transition>
+    </div>
+  </div>
+</template>
+<script>
+  import AsyncValidator from 'async-validator';
+  import emitter from 'one-ui/src/mixins/emitter';
+  import objectAssign from 'one-ui/src/utils/merge';
+  import { noop, getPropByPath } from 'one-ui/src/utils/util';
+  import LabelWrap from './label-wrap';
+  export default {
+    name: 'ElFormItem',
+
+    componentName: 'ElFormItem',
+
+    mixins: [emitter],
+
+    provide() {
+      return {
+        elFormItem: this
+      };
+    },
+
+    inject: ['elForm'],
+
+    props: {
+      label: String,
+      labelWidth: String,
+      prop: String,
+      required: {
+        type: Boolean,
+        default: undefined
+      },
+      rules: [Object, Array],
+      error: String,
+      validateStatus: String,
+      for: String,
+      inlineMessage: {
+        type: [String, Boolean],
+        default: ''
+      },
+      showMessage: {
+        type: Boolean,
+        default: true
+      },
+      size: String
+    },
+    components: {
+      // use this component to calculate auto width
+      LabelWrap
+    },
+    watch: {
+      error: {
+        immediate: true,
+        handler(value) {
+          this.validateMessage = value;
+          this.validateState = value ? 'error' : '';
+        }
+      },
+      validateStatus(value) {
+        this.validateState = value;
+      }
+    },
+    computed: {
+      labelFor() {
+        return this.for || this.prop;
+      },
+      labelStyle() {
+        const ret = {};
+        if (this.form.labelPosition === 'top') return ret;
+        const labelWidth = this.labelWidth || this.form.labelWidth;
+        if (labelWidth) {
+          ret.width = labelWidth;
+        }
+        return ret;
+      },
+      contentStyle() {
+        const ret = {};
+        const label = this.label;
+        if (this.form.labelPosition === 'top' || this.form.inline) return ret;
+        if (!label && !this.labelWidth && this.isNested) return ret;
+        const labelWidth = this.labelWidth || this.form.labelWidth;
+        if (labelWidth === 'auto') {
+          if (this.labelWidth === 'auto') {
+            ret.marginLeft = this.computedLabelWidth;
+          } else if (this.form.labelWidth === 'auto') {
+            ret.marginLeft = this.elForm.autoLabelWidth;
+          }
+        } else {
+          ret.marginLeft = labelWidth;
+        }
+        return ret;
+      },
+      form() {
+        let parent = this.$parent;
+        let parentName = parent.$options.componentName;
+        while (parentName !== 'ElForm') {
+          if (parentName === 'ElFormItem') {
+            this.isNested = true;
+          }
+          parent = parent.$parent;
+          parentName = parent.$options.componentName;
+        }
+        return parent;
+      },
+      fieldValue() {
+        const model = this.form.model;
+        if (!model || !this.prop) { return; }
+
+        let path = this.prop;
+        if (path.indexOf(':') !== -1) {
+          path = path.replace(/:/, '.');
+        }
+
+        return getPropByPath(model, path, true).v;
+      },
+      isRequired() {
+        let rules = this.getRules();
+        let isRequired = false;
+
+        if (rules && rules.length) {
+          rules.every(rule => {
+            if (rule.required) {
+              isRequired = true;
+              return false;
+            }
+            return true;
+          });
+        }
+        return isRequired;
+      },
+      _formSize() {
+        return this.elForm.size;
+      },
+      elFormItemSize() {
+        return this.size || this._formSize;
+      },
+      sizeClass() {
+        return this.elFormItemSize || (this.$ONE || {}).size;
+      }
+    },
+    data() {
+      return {
+        validateState: '',
+        validateMessage: '',
+        validateDisabled: false,
+        validator: {},
+        isNested: false,
+        computedLabelWidth: ''
+      };
+    },
+    methods: {
+      validate(trigger, callback = noop) {
+        this.validateDisabled = false;
+        const rules = this.getFilteredRule(trigger);
+        if ((!rules || rules.length === 0) && this.required === undefined) {
+          callback();
+          return true;
+        }
+
+        this.validateState = 'validating';
+
+        const descriptor = {};
+        if (rules && rules.length > 0) {
+          rules.forEach(rule => {
+            delete rule.trigger;
+          });
+        }
+        descriptor[this.prop] = rules;
+
+        const validator = new AsyncValidator(descriptor);
+        const model = {};
+
+        model[this.prop] = this.fieldValue;
+
+        validator.validate(model, { firstFields: true }, (errors, invalidFields) => {
+          this.validateState = !errors ? 'success' : 'error';
+          this.validateMessage = errors ? errors[0].message : '';
+
+          callback(this.validateMessage, invalidFields);
+          this.elForm && this.elForm.$emit('validate', this.prop, !errors, this.validateMessage || null);
+        });
+      },
+      clearValidate() {
+        this.validateState = '';
+        this.validateMessage = '';
+        this.validateDisabled = false;
+      },
+      resetField() {
+        this.validateState = '';
+        this.validateMessage = '';
+
+        let model = this.form.model;
+        let value = this.fieldValue;
+        let path = this.prop;
+        if (path.indexOf(':') !== -1) {
+          path = path.replace(/:/, '.');
+        }
+
+        let prop = getPropByPath(model, path, true);
+
+        this.validateDisabled = true;
+        if (Array.isArray(value)) {
+          prop.o[prop.k] = [].concat(this.initialValue);
+        } else {
+          prop.o[prop.k] = this.initialValue;
+        }
+
+        // reset validateDisabled after onFieldChange triggered
+        this.$nextTick(() => {
+          this.validateDisabled = false;
+        });
+
+        this.broadcast('ElTimeSelect', 'fieldReset', this.initialValue);
+      },
+      getRules() {
+        let formRules = this.form.rules;
+        const selfRules = this.rules;
+        const requiredRule = this.required !== undefined ? { required: !!this.required } : [];
+
+        const prop = getPropByPath(formRules, this.prop || '');
+        formRules = formRules ? (prop.o[this.prop || ''] || prop.v) : [];
+
+        return [].concat(selfRules || formRules || []).concat(requiredRule);
+      },
+      getFilteredRule(trigger) {
+        const rules = this.getRules();
+
+        return rules.filter(rule => {
+          if (!rule.trigger || trigger === '') return true;
+          if (Array.isArray(rule.trigger)) {
+            return rule.trigger.indexOf(trigger) > -1;
+          } else {
+            return rule.trigger === trigger;
+          }
+        }).map(rule => objectAssign({}, rule));
+      },
+      onFieldBlur() {
+        this.validate('blur');
+      },
+      onFieldChange() {
+        if (this.validateDisabled) {
+          this.validateDisabled = false;
+          return;
+        }
+
+        this.validate('change');
+      },
+      updateComputedLabelWidth(width) {
+        this.computedLabelWidth = width ? `${width}px` : '';
+      },
+      addValidateEvents() {
+        const rules = this.getRules();
+
+        if (rules.length || this.required !== undefined) {
+          this.$on('el.form.blur', this.onFieldBlur);
+          this.$on('el.form.change', this.onFieldChange);
+        }
+      },
+      removeValidateEvents() {
+        this.$off();
+      }
+    },
+    mounted() {
+      if (this.prop) {
+        this.dispatch('ElForm', 'el.form.addField', [this]);
+
+        let initialValue = this.fieldValue;
+        if (Array.isArray(initialValue)) {
+          initialValue = [].concat(initialValue);
+        }
+        Object.defineProperty(this, 'initialValue', {
+          value: initialValue
+        });
+
+        this.addValidateEvents();
+      }
+    },
+    beforeDestroy() {
+      this.dispatch('ElForm', 'el.form.removeField', [this]);
+    }
+  };
+</script>