@v2coding/ui 0.1.5 → 0.1.9

package/src/components/form/form.vue

@@ -1,302 +0,0 @@
-<template>
-  <el-form v-bind="$attrs" ref="form" :model="model" :label-width="labelWidth" v-on="listeners" @submit.native.prevent="onSubmit">
-    <component v-for="(field, i) in fields" v-bind="field" v-on="field.listeners" :key="i" :is="field.componentName || 'ui-form-item'"></component>
-    <slot></slot>
-  </el-form>
-</template>
-
-<script>
-  import throttle from 'lodash.throttle';
-  import Objects from '../../util/objects';
-  import FormItem from './form.item';
-  import TableSelectItem from '../table/table.select.item';
-
-  export default {
-    name: 'ui-form',
-    inheritAttrs: false,
-    provide() {
-      return {
-        uiForm: this,
-      };
-    },
-    props: {
-      disabled: Boolean,
-      labelWidth: {
-        type: String,
-        default: '105px',
-      },
-      fields: Array,
-      url: String,
-      method: {
-        type: String,
-        validator: (val) => ['get', 'post', 'put'].includes(val),
-        default: 'post',
-      },
-      /**
-       * 是否显示 label 后面的冒号
-       */
-      colon: {
-        type: Boolean,
-        default: undefined,
-      },
-      beforeSubmit: {
-        type: Function,
-        default: () => void 0,
-      },
-      submitting: {
-        type: Boolean,
-        default: false,
-      },
-      /**
-       * listeners:
-       *   ready 所有表单项都准备好后触发
-       *   submit 触发提交事件
-       *   after-submit  配置 url 后触发submit事件时触发提交数据完成事件
-       *   validate  任一表单项被校验后触发
-       **/
-    },
-    data() {
-      this.fieldStatus = []; // [{name,status,componentInstance}, ...]
-      return {
-        fieldList: [],// [[name, value], ...]
-      };
-    },
-    computed: {
-      model() {
-        return Object.fromEntries(this.fieldList);
-      },
-      listeners() {
-        // eslint-disable-next-line
-        const {submit, ready, ...listeners} = this.$listeners;
-        return listeners;
-      },
-    },
-    beforeCreate() {
-      this.isMounted = false;
-    },
-    mounted() {
-      this.isMounted = true;
-      this.$el.addEventListener('reset', this.onReset);
-      this.checkFieldsReady();
-    },
-    beforeDestroy() {
-      this.$el.removeEventListener('reset', this.onReset);
-    },
-    methods: {
-      /**
-       * @public
-       */
-      validate(...args) {
-        return this.$refs.form.validate(...args);
-      },
-      /**
-       * @public
-       */
-      validateField(...args) {
-        return this.$refs.form.validateField(...args);
-      },
-      /**
-       * @public
-       */
-      clearValidate(...args) {
-        return this.$refs.form.clearValidate(...args);
-      },
-      /**
-       * @public
-       */
-      resetValues(values) {
-        if (!Objects.isObject(values)) {
-          values = {};
-        }
-        const formItems = this.getFormItems();
-        formItems.forEach(item => {
-          if (Object.prototype.hasOwnProperty.call(values, item.name)) {
-            item.resetField(values[item.name]);
-          } else {
-            item.resetField();
-          }
-        });
-      },
-      /**
-       * @public
-       */
-      setValues(values) {
-        if (!values || !Objects.isObject(values)) {
-          return;
-        }
-        const formItems = this.getFormItems();
-        Object.entries(values).forEach(([fieldName, fieldValue]) => {
-          const fieldItem = formItems.find(item => item.name === fieldName);
-          if (!fieldItem) {
-            return;
-          }
-          fieldItem.fieldValue = fieldValue;
-        });
-      },
-      /**
-       * @public
-       */
-      getValues() {
-        const formItems = this.getFormItems();
-        return formItems.reduce((values, item) => {
-          if (item.ignore === true) {
-            return values;
-          }
-          return {...values, [item.name]: item.fieldValue};
-        }, {});
-      },
-      getFormItems() {
-        const listSearchItem = (items) => {
-          return items.reduce((results, item) => {
-            // TableSelectItem mixins FormItem
-            if ([FormItem.name, TableSelectItem.name].includes(item.$options.name)) {
-              results.push(item);
-            } else {
-              results.push(...listSearchItem(item.$children || []));
-            }
-            return results;
-          }, []);
-        };
-        return listSearchItem(this.$children);
-      },
-      /**
-       * @private
-       */
-      addField(name, defaultValue = '', instance) {
-        if (!Object.hasOwnProperty.call(this.model, name)) {
-          this.onFieldChange(name, defaultValue, instance);
-        }
-      },
-
-      /**
-       * (函数节流. 600ms内只执行一次, 防止 form 表单多次提交)
-       * @private
-       */
-      onSubmit: throttle(
-        function() {
-          let formData = this.getValues();
-          const allow = this.beforeSubmit(formData);
-          if (typeof allow === 'boolean' && allow === false) {
-            return;
-          }
-          if (typeof allow === 'object') {
-            formData = allow;
-          }
-          this.validate((valid) => {
-            if (!valid) {
-              return;
-            }
-            this.$emit('submit', formData);
-            this.doAction(formData);
-          });
-        },
-        600,
-        {trailing: false},
-      ),
-      doAction(data) {
-        if (!this.url) {
-          return;
-        }
-        let def;
-        this.$emit('update:submitting', true);
-        if (this.method === 'get') {
-          def = this.getWithMessage(this.url, {params: data});
-        } else {
-          def = this.postWithMessage(this.url, data);
-        }
-        def.then((...args) => {
-          this.$emit('update:submitting', false);
-          this.$emit('after-submit', ...args);
-        }).catch((...args) => {
-          this.$emit('update:submitting', false);
-          return Promise.reject(...args);
-        });
-      },
-      /**
-       * @private
-       */
-      onReset(e) {
-        e.preventDefault();
-        this.resetValues();
-        this.$emit('reset');
-      },
-      /**
-       * @private
-       */
-      trigger(event, ...args) {
-        if (typeof event !== 'string') {
-          return;
-        }
-        const e = event.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
-        if (!this[`onField${e}`]) {
-          return;
-        }
-        this[`onField${e}`](...args);
-      },
-      /**
-       * @private
-       */
-      onFieldPending(component) {
-        if (!component.name) {
-          return;
-        }
-        this.fieldStatus.push({name: component.name, status: false, instance: component});
-      },
-      /**
-       * @private
-       */
-      onFieldDestroy(component) {
-        if (component.name) {
-          const index = this.fieldStatus.findIndex(item => item.name === component.name);
-          index !== -1 && this.fieldStatus.splice(index, 1);
-
-          const i = this.fieldList.findIndex(item => item[0] === component.name);
-          this.fieldList.splice(i, 1);
-        }
-        const formItems = this.getFormItems();
-        if (formItems.length === this.fieldStatus.length) {
-          this.checkFieldsReady();
-        }
-      },
-      /**
-       * @private
-       */
-      onFieldDone(component) {
-        if (!component.name) {
-          return;
-        }
-        const index = this.fieldStatus.findIndex(item => item.name === component.name);
-        index !== -1 && this.fieldStatus.splice(index, 1, {name: component.name, status: true, instance: component});
-        const formItems = this.getFormItems();
-        if (formItems.length === this.fieldStatus.length) {
-          this.checkFieldsReady();
-        }
-      },
-      onFieldChange(fieldName, fieldValue, instance) {
-        const index = this.fieldList.findIndex(item => item[0] === fieldName);
-        const current = Object.freeze([fieldName, fieldValue, instance]);
-        if (index === -1) {
-          this.fieldList.push(current);
-        } else {
-          this.fieldList.splice(index, 1, current);
-        }
-      },
-      checkFieldsReady() {
-        if (!this.isMounted) {
-          return;
-        }
-        const isPending = this.fieldStatus.some(item => !item.status);
-        if (!isPending && !this.isReady) {
-          this.isReady = true;
-          this.$emit('ready');
-        }
-      },
-    },
-  };
-</script>
-
-<style scoped>
-  .el-form--inline ::v-deep .el-form-item {
-    display: inline-flex;
-  }
-</style>

package/src/components/head-menu/head-menu.vue

@@ -1,188 +0,0 @@
-<template>
-  <el-menu
-    class="head-menu"
-    v-bind="$attrs"
-    v-on="$listeners"
-    :mode="mode"
-    :router="router"
-    :default-active="active"
-  >
-    <menu-item v-for="item in displayMenus" :item="item" :key="item.id"/>
-  </el-menu>
-</template>
-
-<script>
-  import {mapState} from 'vuex';
-  import MenuItem from './menu-item';
-
-  export default {
-    name: 'ui-head-menu',
-    components: {MenuItem},
-    provide() {
-      return {
-        headMenu: this,
-      };
-    },
-    props: {
-      router: {
-        type: Boolean,
-        default: true,
-      },
-      defaultActive: String,
-      mode: {
-        default: 'horizontal',
-      },
-    },
-    data() {
-      return {
-        packUpWidth: 0,
-      };
-    },
-    computed: {
-      ...mapState(['menus']),
-      headMenu() {
-        // eslint-disable-next-line
-        return this.menus.filter(menu => [1, 2].includes(menu.type)).map(({children, ...menu}) => menu);
-      },
-      active() {
-        if (!this.router) {
-          return this.defaultActive;
-        }
-        const currentPath = this.$route.path;
-        const isHeadRoute = this.headMenu.some(menu => menu.url === currentPath);
-        if (isHeadRoute) {
-          return currentPath;
-        }
-        const currentHeadMenu = this.getCurrentHeadMenu(currentPath, this.menus);
-        return currentHeadMenu && (currentHeadMenu.path || currentHeadMenu.url);
-      },
-      menuWidth() {
-        return this.headMenu.reduce((total, item) => {
-          return total + (item.name || '').split('').length * 16 + 25 * 2; // 16:字体大小值; 25:左右padding/margin值
-        }, 60); // 100:菜单左边的margin值
-      },
-      packUpIndex() {
-        if (this.packUpWidth <= 0) {
-          return -1;
-        }
-        let index = -1;
-        let width = this.packUpWidth + 130; // 50:更多下拉菜单所占宽度
-        for(let i = this.headMenu.length - 1; i >= 0; i--) {
-          const item = this.headMenu[i];
-          const currentWidth = (item.name || '').split('').length * 16 + 25 * 2;
-          if (currentWidth >= width) {
-            index = i - 1;
-            break;
-          }
-          width = width - currentWidth;
-        }
-        return Math.max(0, index);
-      },
-      displayMenus() {
-        if (this.packUpIndex === -1) {
-          return this.headMenu;
-        }
-        const menus = this.headMenu.slice(0, this.packUpIndex);
-        const moreMenus = this.headMenu.slice(this.packUpIndex);
-        menus.push({
-          id: 'more',
-          name: '更多菜单',
-          children: moreMenus,
-        });
-        return menus;
-      },
-    },
-    mounted() {
-      window.addEventListener('resize', this.onResize);
-      this.onResize();
-
-      const logo = document.querySelector('.page-header > .logo');
-      logo && logo.addEventListener('load', () => this.onResize());
-    },
-    beforeDestroy() {
-      window.removeEventListener('resize', this.onResize);
-    },
-    methods: {
-      onResize() {
-        clearTimeout(this.timer);
-        this.timer = setTimeout(() => {
-          const headerWidth = document.documentElement.clientWidth;
-          const logoEl = document.querySelector('.page-header > .logo');
-          const titleEl = document.querySelector('.page-header > .title');
-          const messageEl = document.querySelector('.page-header > .screen');
-          const usernameEl = document.querySelector('.page-header > .username');
-          const logoWidth = (logoEl && logoEl.offsetWidth || 0) + 20; // 20 margin
-          const titleWidth = titleEl && titleEl.offsetWidth || 0;
-          const messageElWidth = messageEl && messageEl.offsetWidth || 0;
-          const usernameWidth = usernameEl && usernameEl.offsetWidth || 0;
-          const allowedMenuWidth = headerWidth - 60 - logoWidth - titleWidth - messageElWidth - usernameWidth;
-          this.packUpWidth = Math.max(0, this.menuWidth - allowedMenuWidth);
-        }, 50);
-      },
-      getCurrentHeadMenu(path, menus) {
-        if (!Array.isArray(menus) || menus.length <= 0) {
-          return undefined;
-        }
-        return menus.find(menu => {
-          const isMatched = (menu.children || []).some(childMenu => (childMenu.path || childMenu.url) === path);
-          if (isMatched) {
-            return true;
-          }
-          return this.getCurrentHeadMenu(path, menu.children);
-        });
-      },
-    },
-  };
-</script>
-
-<style lang="scss">
-
-  .head-menu.el-menu {
-    background-color: transparent;
-    border-bottom: none;
-
-    > .el-menu-item,
-    > .el-submenu .el-submenu__title {
-      font-size: 16px;
-      font-weight: 400;
-      color: inherit;
-      height: var(--header-height);
-      line-height: var(--header-height);
-      padding: 0 25px;
-      border: none;
-      box-sizing: border-box;
-      transition: all 0.2s ease-in-out;
-
-      span {
-        vertical-align: unset;
-      }
-
-      i {
-        width: 20px;
-        font-size: 14px;
-      }
-    }
-
-    > .el-menu-item:not(.is-disabled):not(.is-active):hover,
-    > .el-menu-item:not(.is-disabled):not(.is-active):focus,
-    > .el-submenu:not(.is-disabled):not(.is-active):hover .el-submenu__title,
-    > .el-submenu:not(.is-disabled):not(.is-active):focus .el-submenu__title {
-      color: inherit;
-      background-color: rgba(0, 146, 63, 0.3);
-    }
-
-    > .el-menu-item.is-active,
-    > .el-submenu.is-active .el-submenu__title {
-      color: inherit;
-      background-color: rgba(0, 146, 63, 0.6);
-    }
-
-    .el-submenu__title i {
-      color: inherit;
-    }
-
-    .el-menu--popup {
-
-    }
-  }
-</style>

package/src/components/head-menu/menu-item.vue

@@ -1,80 +0,0 @@
-<script type="text/jsx">
-  export default {
-    name: 'head-menu-submenu',
-    inject: ['headMenu'],
-    props: {
-      item: Object,
-    },
-    computed: {
-      isLeaf() {
-        const {children} = this.item;
-        return !Array.isArray(children) || children.length <= 0;
-      },
-      index() {
-        const {url, id} = this.item;
-        if (this.isRouter) {
-          return url || id + '';
-        }
-        return id + '';
-      },
-      route() {
-        const {url} = this.item;
-        return url;
-      },
-      isRouter() {
-        return this.headMenu.router;
-      },
-      theme() {
-        return this.headMenu.theme;
-      },
-      popperClass() {
-        return ['nav-menu-submenu-popup', this.theme].join(' ');
-      },
-    },
-    render(createElement) {
-      if (this.isLeaf) {
-        return createElement('el-menu-item', {props: {index: this.index, route: this.route}}, [
-            createElement('template', {slot: 'title'}, [this.item.name]),
-        ]);
-      }
-      return createElement('el-submenu', {props: {index: this.index, popperClass: this.popperClass, popperAppendToBody: false}}, [
-          createElement('template', {slot: 'title'}, [this.item.name]),
-          ...this.item.children.map(child => createElement('head-menu-submenu', {key: child.id, props: {item: child}})),
-      ]);
-    },
-  };
-</script>
-<style lang="less">
-  .el-menu--collapse .el-menu-item [class^=el-icon-],
-  .el-menu--collapse .el-submenu .el-submenu__title [class^=el-icon-] {
-    margin: 0;
-    vertical-align: middle;
-    width: 24px;
-    text-align: center
-  }
-
-  .el-menu--collapse .el-menu-item .el-submenu__icon-arrow,
-  .el-menu--collapse .el-submenu .el-submenu__title .el-submenu__icon-arrow {
-    display: none
-  }
-
-  .el-menu--collapse .el-menu-item span,
-  .el-menu--collapse .el-submenu .el-submenu__title span {
-    height: 0;
-    width: 0;
-    overflow: hidden;
-    visibility: hidden;
-    display: inline-block
-  }
-
-  .nav-menu-submenu-popup {
-
-    .el-menu-item,
-    .el-submenu__title {
-      height: 40px;
-      line-height: 40px;
-      font-size: 12px;
-    }
-  }
-
-</style>