@v2coding/ui 0.1.6 → 0.1.10

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/history/history.vue

@@ -1,361 +0,0 @@
-<template>
-  <div class="history" v-show="visible">
-    <scroll-view ref="menus" class="history-tabs">
-      <div
-        v-for="item in items"
-        :key="item.path"
-        :class="['history-menu', current === item.path ? 'is-active' : '']"
-        @click="onTabClick(item.path)"
-      >
-        <span class="ellipsis" :title="item.title">{{ item.title }}</span>
-        <i class="el-icon-close" @click.stop="onTabRemove(item.path)"></i>
-      </div>
-    </scroll-view>
-    <div class="contextmenu" :style="contextmenu">
-      <div
-        class="modal"
-        ref="modal"
-        :style="{ display: activeContextMenu ? 'block' : 'none' }"
-        @click="hideContextMenu"
-      ></div>
-      <el-dropdown
-        @command="contextmenuClose"
-        trigger="click"
-        ref="context"
-        placement="top-start"
-        class="history-dropdown"
-      >
-        <span></span>
-        <el-dropdown-menu
-          class="history-contextmenu"
-          slot="dropdown"
-          :visible-arrow="false"
-        >
-          <el-dropdown-item command="left">
-            <i class="el-icon-arrow-left"></i>
-            关闭左侧
-          </el-dropdown-item>
-          <el-dropdown-item command="right">
-            <i class="el-icon-arrow-right"></i>
-            关闭右侧
-          </el-dropdown-item>
-          <el-dropdown-item command="other">
-            <i class="el-icon-close"></i>
-            关闭其它
-          </el-dropdown-item>
-          <el-dropdown-item command="all">
-            <i class="el-icon-circle-close"></i>
-            全部关闭
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-    </div>
-  </div>
-</template>
-
-<script>
-import ScrollView from '../scroll-view/scroll-view';
-
-export default {
-  name: "ui-history",
-  components: {ScrollView},
-  props: {
-    items: Array,
-    current: null,
-    visible: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      activeContextMenu: "",
-      contextmenu: {
-        width: "0px",
-        left: "0px",
-      },
-    };
-  },
-  watch: {
-    async current() {
-      if (!this.$refs.menus) {
-        return;
-      }
-      await this.$nextTick();
-      await this.$refs.menus.$nextTick();
-      this.$refs.menus.scrollToActiveItem();
-    },
-  },
-  mounted() {
-    document.addEventListener("contextmenu", this.onContextMenu);
-  },
-  beforeDestroy() {
-    document.removeEventListener("contextmenu", this.onContextMenu);
-  },
-  methods: {
-    showContextMenu() {
-      setTimeout(() => {
-        this.$refs.context.broadcast("ElDropdownMenu", "visible", true);
-      });
-    },
-    hideContextMenu() {
-      this.$refs.context.broadcast("ElDropdownMenu", "visible", false);
-      this.activeContextMenu = "";
-    },
-    onTabClick(path) {
-      this.$router.push({ path });
-    },
-    onTabRemove(path) {
-      this.$emit("remove-history", { type: "current", name: path });
-    },
-    onContextMenu(event) {
-      const container = this.$el.querySelector(".ui-scroll-view__nav");
-      const index = this.getChildContainIndex(container, event.target);
-      const rect = this.$el.getBoundingClientRect();
-      if (index !== -1) {
-        this.activeContextMenu = this.items[index]?.path;
-        this.contextmenu.left = `${event.clientX - rect.left}px`;
-        this.contextmenu.top = `${event.clientY - rect.top}px`;
-        this.showContextMenu();
-        event.preventDefault();
-        return false;
-      }
-      const modal = this.$el.querySelector(".modal");
-      if (event.target === modal) {
-        event.preventDefault();
-        return false;
-      }
-      return true;
-    },
-    contextmenuClose(command) {
-      this.$emit("remove-history", {
-        type: command,
-        name: this.activeContextMenu,
-      });
-      this.hideContextMenu();
-    },
-    getChildContainIndex(container, target) {
-      return Array.from(container.childNodes).findIndex((child) => {
-        return this.isContains(child, target);
-      });
-    },
-    isContains(container, target) {
-      if (container === target) {
-        return true;
-      }
-      const fn = (childNodes, _target) => {
-        return Array.from(childNodes).find((item) => {
-          const isEq = item === _target;
-          if (isEq) {
-            return true;
-          }
-          if (!item.childNodes.length) {
-            return false;
-          }
-          return fn(item.childNodes, _target);
-        });
-      };
-      return fn(container.childNodes, target);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.history {
-  flex: none;
-  height: 40px;
-  position: relative;
-  margin: 10px 0 0;
-
-  .history-tabs.ui-scroll-view__nav-wrap {
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    position: absolute;
-    align-items: flex-end;
-
-    .ui-scroll-view__nav-scroll {
-      flex: 1;
-    }
-
-    .ui-scroll-view__nav-control {
-      width: 20px;
-      height: 30px;
-
-      &.is-disabled {
-        .menu-nav-control {
-          &::before,
-          &::after {
-            background: var(--color-primary-light-3);
-          }
-        }
-      }
-    }
-
-    .ui-scroll-view__nav {
-      align-items: flex-end;
-    }
-
-    .menu-nav-control {
-      height: 30px;
-
-      &::before,
-      &::after {
-        width: 3px;
-        height: 12px;
-        background: var(--color-primary-light-6);
-      }
-
-      &::before {
-        bottom: -2px;
-      }
-
-      &::after {
-        top: -2px;
-      }
-    }
-  }
-
-  .contextmenu {
-    width: 0;
-    height: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    .modal {
-      position: fixed;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      z-index: 99;
-    }
-  }
-
-  .history-menu {
-    height: 30px;
-    color: #fff;
-    font-size: 14px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    cursor: pointer;
-    background: rgba(83,109,139,.6);
-    border-radius: 5px 5px 0 0;
-    transition: all 0.3s ease-in-out;
-    position: relative;
-    background: var(--color-primary-light-9);
-
-    & + .history-menu {
-      border-left: 1px solid var(--color-darken-primary-2);
-    }
-
-    &.is-active {
-      height: 40px;
-      color: #ffffff;
-      background: var(--color-darken-primary-2);
-      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.95);
-      box-shadow: 7px 5px 5px rgba(0, 0, 0, 0.2);
-      z-index: 1;
-    }
-
-    &:hover {
-      i {
-        opacity: 1;
-      }
-    }
-
-    > span {
-      flex: 1;
-      padding: 0 25px;
-    }
-
-    > i {
-      position: absolute;
-      top: 2px;
-      right: 3px;
-      opacity: 0.3;
-      width: 14px;
-      height: 14px;
-      font-size: 12px;
-      border-radius: 50%;
-      transition: opacity 0.3s ease-in-out;
-
-      &:hover {
-        background-color: var(--color-primary);
-      }
-    }
-  }
-
-  .el-tabs {
-    background: transparent;
-
-    > .el-tabs__header {
-      background: transparent;
-      border-bottom: none;
-
-      .el-tabs__nav {
-        border: none;
-      }
-
-      .el-tabs__nav-wrap::after {
-        content: unset;
-      }
-    }
-
-    > .el-tabs__content {
-      padding: 0;
-    }
-
-    .el-tabs__nav-next,
-    .el-tabs__nav-prev {
-      color: #536d8b;
-      width: 20px;
-      line-height: 39px;
-      text-align: center;
-      font-size: 18px;
-    }
-
-    .el-tabs__nav-prev {
-      border-right: 1px solid #ddd;
-    }
-
-    .el-tabs__nav-next {
-      border-left: 1px solid #ddd;
-    }
-
-    .el-tabs__item {
-      margin: 8px;
-      border: none;
-      height: 34px;
-      line-height: 34px;
-      background: #2e557e;
-      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
-      color: #fff;
-      display: inline-flex;
-      flex-direction: row;
-      align-items: center;
-    }
-  }
-
-  .history-tab-title {
-    width: 6em;
-    display: inline-block;
-    vertical-align: middle;
-  }
-}
-
-.history-dropdown {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.history-contextmenu.el-popper {
-  margin-top: 0;
-}
-</style>

package/src/components/icon/icon.vue

@@ -1,63 +0,0 @@
-<template>
-  <svg :class="['ui-icon', 'ui-icon-' + realName]" aria-hidden="true">
-    <use :xlink:href="`#icon-${realName}`"/>
-  </svg>
-</template>
-
-<script>
-import Iconfont from '../../config/config.iconfont';
-
-export default {
-  name: 'ui-icon',
-  props: {
-    name: String,
-  },
-  data() {
-    return {
-      icons: [],
-    };
-  },
-  computed: {
-    realName({name, icons}) {
-      const isIncludes = icons.includes(name);
-      if (isIncludes) {
-        return name;
-      }
-      return 'unknown';
-    },
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    async init() {
-      this.icons = await Iconfont.getIcons();
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.ui-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-  display: inline-block;
-
-  &.ui-icon-loading {
-    animation: rotating 2s linear infinite;
-  }
-}
-
-@keyframes rotating {
-  from {
-    transform: rotate(0deg)
-  }
-
-  to {
-    transform: rotate(1turn)
-  }
-}
-</style>