@v2coding/ui 0.1.6 → 0.1.10

package/src/components/scroll-view/scroll-view.vue

@@ -1,384 +0,0 @@
-<template>
-  <div :class="['ui-scroll-view__nav-wrap', `is-${direction}`]">
-    <div :class="['ui-scroll-view__nav-control ui-scroll-view__nav-prev', scrollable ? 'ui-scroll-view__nav-active' : '', scrollable && scrollable.prev ? '' : 'is-disabled']" @click="scrollPrev">
-      <slot name="prev" :disabled="scrollable && !scrollable.prev"><div class="menu-nav-control"></div></slot>
-    </div>
-    <div ref="navScroll" class="ui-scroll-view__nav-scroll">
-      <div ref="nav" :class="['ui-scroll-view__nav', `is-${direction}`]" :style="navStyle">
-        <slot></slot>
-      </div>
-    </div>
-    <div :class="['ui-scroll-view__nav-control ui-scroll-view__nav-next', scrollable ? 'ui-scroll-view__nav-active' : '', scrollable && scrollable.next ? '' : 'is-disabled']" @click="scrollNext">
-      <slot name="next" :disabled="scrollable && !scrollable.next"><div class="menu-nav-control"></div></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import {addResizeListener, removeResizeListener} from 'element-ui/lib/utils/resize-event';
-
-const firstUpperCase = str => {
-  return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
-};
-
-export default {
-  name: 'ui-scroll-view',
-  props: {
-    direction: {
-      type: String,
-      default: 'row',
-      validator: val => ['column', 'row'].includes(val),
-    },
-    childActiveCls: {
-      type: String,
-      default: '.is-active',
-    },
-  },
-  data() {
-    return {
-      scrollable: false,
-      navOffset: 0,
-    };
-  },
-  computed: {
-    navStyle() {
-      const dir = this.direction === 'row' ? 'X' : 'Y';
-      return {
-        transform: `translate${dir}(-${this.navOffset}px)`,
-      };
-    },
-    sizeName() {
-      return this.direction === 'row' ? 'width' : 'height';
-    },
-  },
-  mounted() {
-    addResizeListener(this.$el, this.update);
-    addResizeListener(this.$refs.nav, this.update);
-    const mo = new MutationObserver(this.update);
-    mo.observe(this.$el, {childList: true, subtree: true});
-    setTimeout(() => {
-      this.scrollToActiveItem();
-    }, 0);
-
-    this.$once('hook:beforeDestroy', () => {
-      if (this.$el && this.update) removeResizeListener(this.$el, this.update);
-      if (this.$refs.nav && this.update) removeResizeListener(this.$refs.nav, this.update);
-      mo.disconnect();
-    });
-  },
-  methods: {
-    scrollPrev() {
-      const containerSize = this.$refs.navScroll[`offset${firstUpperCase(this.sizeName)}`];
-      const currentOffset = this.navOffset;
-
-      if (!currentOffset) return;
-
-      let newOffset = currentOffset > containerSize
-          ? currentOffset - containerSize
-          : 0;
-
-      this.navOffset = newOffset;
-      this.update();
-    },
-    scrollNext() {
-      const navSize = this.$refs.nav[`offset${firstUpperCase(this.sizeName)}`];
-      const containerSize = this.$refs.navScroll[`offset${firstUpperCase(this.sizeName)}`];
-      const currentOffset = this.navOffset;
-
-      if (navSize - currentOffset <= containerSize) return;
-
-      let newOffset = navSize - currentOffset > containerSize * 2
-          ? currentOffset + containerSize
-          : (navSize - containerSize);
-
-      this.navOffset = newOffset;
-      this.update();
-    },
-    scrollToActiveItem() {
-      if (!this.scrollable) return;
-      const nav = this.$refs.nav;
-      const activeItem = this.$el.querySelector(this.childActiveCls);
-      if (!activeItem) return;
-      const navScroll = this.$refs.navScroll;
-      const isHorizontal = this.direction === 'row';
-      const activeItemBounding = activeItem.getBoundingClientRect();
-      const navScrollBounding = navScroll.getBoundingClientRect();
-      const maxOffset = isHorizontal
-          ? nav.offsetWidth - navScrollBounding.width
-          : nav.offsetHeight - navScrollBounding.height;
-      const currentOffset = this.navOffset;
-      let newOffset = currentOffset;
-
-      if (isHorizontal) {
-        if (activeItemBounding.left < navScrollBounding.left) {
-          newOffset = currentOffset - (navScrollBounding.left - activeItemBounding.left);
-        }
-        if (activeItemBounding.right > navScrollBounding.right) {
-          newOffset = currentOffset + activeItemBounding.right - navScrollBounding.right;
-        }
-      } else {
-        if (activeItemBounding.top < navScrollBounding.top) {
-          newOffset = currentOffset - (navScrollBounding.top - activeItemBounding.top);
-        }
-        if (activeItemBounding.bottom > navScrollBounding.bottom) {
-          newOffset = currentOffset + (activeItemBounding.bottom - navScrollBounding.bottom);
-        }
-      }
-      newOffset = Math.max(newOffset, 0);
-      this.navOffset = Math.min(newOffset, maxOffset);
-      this.update();
-    },
-    update() {
-      if (!this.$refs.nav) return;
-      const sizeName = this.sizeName;
-      const navSize = this.$refs.nav[`offset${firstUpperCase(sizeName)}`];
-      const containerSize = this.$refs.navScroll[`offset${firstUpperCase(sizeName)}`];
-      const currentOffset = this.navOffset;
-
-      if (containerSize < navSize) {
-        this.scrollable = {};
-        this.scrollable.prev = currentOffset > 0;
-        this.scrollable.next = currentOffset + containerSize < navSize;
-        if (navSize - currentOffset < containerSize) {
-          this.navOffset = navSize - containerSize;
-        }
-      } else {
-        this.scrollable = false;
-        if (currentOffset > 0) {
-          this.navOffset = 0;
-        }
-      }
-    },
-  },
-};
-</script>
-
-<style lang="less">
-.ui-scroll-view__nav-wrap {
-  overflow: hidden;
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-
-  &.is-row {
-    flex-direction: row;
-  }
-
-  &.is-column {
-    flex-direction: column;
-  }
-
-  .ui-scroll-view__nav-scroll {
-    overflow: hidden;
-
-    .ui-scroll-view__nav {
-      position: relative;
-      transition: transform .3s;
-      display: flex;
-      flex-wrap: nowrap;
-      float: left;
-
-      &.is-row {
-        flex-direction: row;
-      }
-
-      &.is-column {
-        flex-direction: column;
-      }
-    }
-  }
-
-  &.is-row .ui-scroll-view__nav-control {
-    flex: none;
-    width: 50px;
-    height: 100%;
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    visibility: hidden;
-
-    &.ui-scroll-view__nav-active {
-      visibility: visible;
-    }
-
-    .menu-nav-control {
-      width: 25px;
-      height: 70px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-
-      &::before,
-      &::after {
-        content: '';
-        display: block;
-        position: relative;
-        width: 6px;
-        height: 50px;
-        background-color: #fff;
-        transition: all 300ms ease-in-out;
-        border-radius: 3px;
-      }
-
-      &::before {
-        bottom: -4px;
-      }
-
-      &::after {
-        top: -4px;
-      }
-    }
-
-    &.ui-scroll-view__nav-prev {
-      .menu-nav-control::before {
-        transform: rotate(18deg);
-      }
-
-      .menu-nav-control::after {
-        transform: rotate(-18deg);
-      }
-    }
-
-    &.ui-scroll-view__nav-next {
-      .menu-nav-control::before {
-        transform: rotate(-18deg);
-      }
-
-      .menu-nav-control::after {
-        transform: rotate(18deg);
-      }
-    }
-
-    &.ui-scroll-view__nav-prev:hover {
-      .menu-nav-control::before {
-        transform: rotate(30deg);
-      }
-
-      .menu-nav-control::after {
-        transform: rotate(-30deg);
-      }
-    }
-
-    &.ui-scroll-view__nav-next:hover {
-      .menu-nav-control::before {
-        transform: rotate(-30deg);
-      }
-
-      .menu-nav-control::after {
-        transform: rotate(30deg);
-      }
-    }
-
-    &.is-disabled {
-      pointer-events: none;
-
-      .menu-nav-control::before,
-      .menu-nav-control::after {
-        background-color: #ccc;
-      }
-    }
-  }
-
-  &.is-column {
-    height: 100%;
-
-    .ui-scroll-view__nav-control {
-      flex: none;
-      width: 100%;
-      height: 35px;
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      visibility: hidden;
-
-      &.ui-scroll-view__nav-active {
-        visibility: visible;
-      }
-
-      .menu-nav-control {
-        width: 40px;
-        height: 17px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: row;
-
-        &::before,
-        &::after {
-          content: '';
-          display: block;
-          position: relative;
-          width: 17px;
-          height: 4px;
-          background-color: #fff;
-          transition: all 300ms ease-in-out;
-          border-radius: 3px;
-        }
-
-        &::before {
-          right: -2.5px;
-        }
-
-        &::after {
-          left: -2.5px;
-        }
-      }
-
-      &.ui-scroll-view__nav-prev {
-        .menu-nav-control::before {
-          transform: rotate(-18deg);
-        }
-
-        .menu-nav-control::after {
-          transform: rotate(18deg);
-        }
-      }
-
-      &.ui-scroll-view__nav-next {
-        .menu-nav-control::before {
-          transform: rotate(18deg);
-        }
-
-        .menu-nav-control::after {
-          transform: rotate(-18deg);
-        }
-      }
-
-      &.ui-scroll-view__nav-prev:hover {
-        .menu-nav-control::before {
-          transform: rotate(-30deg);
-        }
-
-        .menu-nav-control::after {
-          transform: rotate(30deg);
-        }
-      }
-
-      &.ui-scroll-view__nav-next:hover {
-        .menu-nav-control::before {
-          transform: rotate(30deg);
-        }
-
-        .menu-nav-control::after {
-          transform: rotate(-30deg);
-        }
-      }
-
-      &.is-disabled {
-        pointer-events: none;
-
-        .menu-nav-control::before,
-        .menu-nav-control::after {
-          background-color: #ccc;
-        }
-      }
-    }
-  }
-}
-</style>

package/src/components/table/column.vue

@@ -1,262 +0,0 @@
-<script type="text/jsx">
-import {TableColumn} from 'element-ui';
-import {getPropByPath} from 'element-ui/lib/utils/util';
-
-/**
- * ui-table-column 内置组件.
- * 在 element-ui 的 el-table-column 组件上拓展出 tree 类型
- */
-export default {
-  name: 'ui-column',
-  mixins: [TableColumn],
-  inject: {
-    uiTable: {
-      default: null,
-    },
-  },
-  props: {
-    identifyKey: {
-      type: String,
-      default: 'id',
-    },
-    parentKey: {
-      type: String,
-      default: 'upId',
-    },
-    childrenKey: {
-      type: String,
-      default: 'children',
-    },
-    // lazy 动态加载时需要通过判断 isLeaf 来渲染 展开/收起 状态
-    leafKey: {
-      type: String,
-      default: 'isLeaf'
-    },
-    // tree 是否动态加载
-    lazy: {
-      type: [Boolean, String],
-    },
-    /**
-     * tree 动态加载返回children方法
-     *
-     * row {Object} 点击展开的 node 数据
-     * resolve {Function} 调用此方法返回 children 数据. eg: resolve(row.children);
-     *   - 使用自定义 loadData 时可先判断 row 的 children 是否已经加载过, 已经加载过则直接 resolve.
-     */
-    loadData: {
-      type: Function,
-      default(row, resolve) {
-        if (!this.lazy) {
-          resolve(row[this.childrenKey]);
-        } else if (Array.isArray(row[this.childrenKey]) && row[this.childrenKey].length) {
-          resolve(row[this.childrenKey]);
-        } else {
-          // extra
-          const hasCurrentUrl = typeof this.lazy === 'string';
-          const url = hasCurrentUrl ? this.lazy : (this.uiTable && this.uiTable.url || '');
-          if (!url) {
-            console.warn(`no lazy url config, please config ui-table -> url or ui-table-column -> lazy(string url)`);
-            resolve(row[this.childrenKey]);
-            return;
-          }
-          let params = {};
-          // 使用 uiTable 配置的 url 时也要同时使用 uiTable 的 params
-          if (!hasCurrentUrl && this.uiTable) {
-            params = {...this.uiTable.params};
-          }
-          params[this.identifyKey] = row[this.identifyKey];
-          this.$axios.get(url, {params}).then(resolve).catch(() => resolve([]));
-        }
-      },
-    },
-    treeCls: {
-      type: Object,
-      default: () => ({
-        expand: 'el-icon-caret-bottom',
-        collapse: 'el-icon-caret-right',
-        loading: 'el-icon-loading',
-      }),
-    },
-
-  },
-  created() {
-    if (this.type === 'tree') {
-      this.$renderTree();
-      this.initTreeTableMethods(this.uiTable);
-    }
-  },
-  methods: {
-    $getLevel(data, level = 0) {
-      const parent = this.owner.data.find(row => row[this.identifyKey] === data[this.parentKey]);
-      if (parent && parent[this.identifyKey] !== parent[this.parentKey]) {
-        return this.$getLevel(parent, ++level);
-      }
-      return level;
-    },
-    $collapse(row) {
-      const {data} = this.owner;
-      const rowIndex = data.findIndex(item => item[this.identifyKey] === row[this.identifyKey]);
-      if (rowIndex === -1) {
-        return;
-      }
-      const children = data[rowIndex][this.childrenKey];
-      if (!Array.isArray(children) || !children.length) {
-        return;
-      }
-      children.forEach(child => {
-        // 下级同时收起
-        this.$collapse(child);
-        const index = this.owner.data.findIndex(item => item[this.identifyKey] === child[this.identifyKey]);
-        if (index === -1) {
-          return;
-        }
-        this.owner.data.splice(index, 1);
-      });
-      // this.owner.data
-    },
-    $expand(row) {
-      const {data} = this.owner;
-      const isExpand = data.some(item => item[this.parentKey] === row[this.identifyKey]);
-      if (isExpand) {
-        return;
-      }
-      const rowIndex = data.findIndex(item => item[this.identifyKey] === row[this.identifyKey]);
-      if (rowIndex === -1) {
-        return;
-      }
-      const children = data[rowIndex][this.childrenKey];
-      if (Array.isArray(children)) {
-        data.splice(rowIndex + 1, 0, ...children);
-      }
-    },
-    $renderTree() {
-      let renderCell = this.$renderTreeCell;
-      let _self = this;
-      this.columnConfig.renderCell = function(h, data) {
-        return _self.showOverflowTooltip || _self.showTooltipWhenOverflow
-          ? h('div', {
-              attrs: {class: 'cell el-tooltip'},
-              style: {width: (data.column.realWidth || data.column.width) - 1 + 'px'},
-            }, [renderCell(h, data)])
-          : h('div', {attrs: {class: 'cell'}}, [renderCell(h, data)]);
-      };
-    },
-    $renderTreeCell(h, data) {
-      const {row} = data;
-      const {expand, collapse, loading} = this.treeCls;
-      const isExpand = this.owner.data.some(item => item[this.parentKey] === row[this.identifyKey]);
-      let triggerCls = isExpand ? expand : collapse;
-      if (row.$$loading) {
-        triggerCls = loading;
-      }
-      const level = this.$getLevel(row);
-      const children = row[this.childrenKey];
-      let hasChildren = false;
-      if (this.lazy) {
-        hasChildren = !row[this.leafKey];
-      } else {
-        hasChildren = Array.isArray(children) && !!children.length
-      }
-      const toggleCollapse = () => {
-        if (!hasChildren) {
-          return;
-        }
-        if (isExpand) {
-          this.$collapse(data.row);
-        } else {
-          new Promise(resolve => {
-            row.$$loading = true;
-            this.$refreshRow(row);
-            this.loadData(row, resolve);
-          }).then(children => {
-            row[this.childrenKey] = children;
-            row.$$loading = false;
-            this.$refreshRow(row);
-            this.$expand(data.row);
-          });
-        }
-      };
-      return h('div', {attrs: {class: 'tree-cell-wrapper'}, style: {paddingLeft: `${level * 15}px`}}, [
-          h('div', {attrs: {class: `tree-toggle ${hasChildren ? 'pointer' : ''}`}, on: {click: toggleCollapse}}, [
-              hasChildren ? h('i', {attrs: {class: triggerCls}}) : null,
-          ]),
-        this.$renderTreeCellBody(h, data),
-      ]);
-    },
-    $refreshRow(row) {
-      const index = this.owner.data.findIndex(item => item[this.identifyKey] === row[this.identifyKey]);
-      this.owner.data.splice(index, 1, {...row});
-    },
-    $renderTreeCellBody(h, data) {
-      if (this.$scopedSlots.default) {
-        return this.$scopedSlots.default(data);
-      }
-      const {row, column, $index} = data;
-      const property = column.property;
-      const value = property && getPropByPath(row, property).v;
-      if (column && column.formatter) {
-        return column.formatter(row, column, value, $index);
-      }
-      return value;
-    },
-    async expandAll(row) {
-      await this.uiTable.$nextTick();
-      if (row === undefined) {
-        this.owner.data.forEach(item => this.expandAll(item));
-      } else if (row && row[this.identifyKey]) {
-        this.$expand(row);
-        const children = row[this.childrenKey];
-        if (Array.isArray(children)) {
-          children.forEach(child => this.expandAll(child));
-        }
-      }
-    },
-    initTreeTableMethods(treeTable) {
-      if (!treeTable) {
-        return;
-      }
-      treeTable.expand = this.$expand;
-      treeTable.collapse = this.$collapse;
-      treeTable.expandAll = (row) => {
-        if (row === undefined) {
-          this.expandAll();
-        } else if (row && row[this.identifyKey]) {
-          const tableRow = this.owner.data.find(item => item[this.identifyKey] === row[this.identifyKey]);
-          this.expandAll(tableRow);
-        }
-      };
-      treeTable.removeRow = (row) => {
-        const rowIndex = this.owner.data.findIndex(item => item[this.identifyKey] === row[this.identifyKey]);
-        if (rowIndex === -1) {
-          return;
-        }
-        // 1. 收起节点
-        this.$collapse(row);
-        // 2. 从table中删除该条数据
-        this.owner.data.splice(rowIndex, 1);
-        // 3. 从父级的children中删除该数据(展开父级时是把父级的children填充到table数据中)
-        // 如果父级的父级未展开即父级还不在this.owner.data中时会有问题, 但这里暂不处理若之后有这样的逻辑后再处理(递归从this.owner.data中一级一级的查找到父级)
-        const parent = this.owner.data.find(item => item[this.identifyKey] === row[this.parentKey]);
-        const childIndex = (parent[this.childrenKey] || []).findIndex(child => child[this.identifyKey] === row[this.identifyKey]);
-        if (childIndex === -1) {
-          return;
-        }
-        parent[this.childrenKey].splice(childIndex, 1);
-      };
-    },
-  },
-};
-</script>
-
-<style lang="less">
-.tree-toggle {
-  display: inline-flex;
-  width: 24px;
-  align-items: center;
-  justify-content: center;
-
-  &.pointer {
-    cursor: pointer;
-  }
-}
-</style>

package/src/components/table/table.pagination.vue

@@ -1,71 +0,0 @@
-<template>
-  <el-pagination
-    v-bind="$attrs"
-    :layout="layout"
-    :page-sizes="pageSizes"
-    :total="page.total || 0"
-    :page-size="page.size"
-    :background="background"
-    :current-page="page.no || 1"
-    @size-change="onSizeChange"
-    @current-change="onCurrentChange"
-  >
-    <slot></slot>
-  </el-pagination>
-</template>
-
-<script>
-  export default {
-    name: 'ui-table-pagination',
-    inject: ['uiTable'],
-    props: {
-      layout: {
-        type: String,
-        default: 'prev, pager, next',
-      },
-      pageSizes: {
-        type: Array,
-        default: () => [20, 30, 50, 80],
-      },
-      background: {
-        type: Boolean,
-        default: true,
-      },
-    },
-    computed: {
-      page() {
-        if (!this.uiTable.remoteData) {
-          return {total: 0, ...this.getInitParams()};
-        }
-        return this.uiTable.remoteData;
-      },
-      size() {
-        return this.pageSizes[0] || 10;
-      },
-    },
-    created() {
-      this.uiTable.registerPagination(this);
-    },
-    destroyed() {
-      this.uiTable.unRegisterPagination();
-    },
-    methods: {
-      getInitParams() {
-        return {no: 1, size: this.size};
-      },
-      onChange(no, size) {
-        this.uiTable.changePage({no, size});
-      },
-      onSizeChange(size) {
-        this.onChange(1, size);
-      },
-      onCurrentChange(no) {
-        this.onChange(no, this.page.size);
-      },
-    },
-  };
-</script>
-
-<style scoped>
-
-</style>