@v2coding/ui 0.1.0

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

@@ -0,0 +1,384 @@
+<template>
+  <div :class="['scroll-nav__nav-wrap', `is-${direction}`]">
+    <div :class="['scroll-nav__nav-control scroll-nav__nav-prev', scrollable ? 'scroll-nav__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="scroll-nav__nav-scroll">
+      <div ref="nav" :class="['scroll-nav__nav', `is-${direction}`]" :style="navStyle">
+        <slot></slot>
+      </div>
+    </div>
+    <div :class="['scroll-nav__nav-control scroll-nav__nav-next', scrollable ? 'scroll-nav__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: 'ScrollNav',
+  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">
+.scroll-nav__nav-wrap {
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+
+  &.is-row {
+    flex-direction: row;
+  }
+
+  &.is-column {
+    flex-direction: column;
+  }
+
+  .scroll-nav__nav-scroll {
+    overflow: hidden;
+
+    .scroll-nav__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 .scroll-nav__nav-control {
+    flex: none;
+    width: 50px;
+    height: 100%;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+
+    &.scroll-nav__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;
+      }
+    }
+
+    &.scroll-nav__nav-prev {
+      .menu-nav-control::before {
+        transform: rotate(18deg);
+      }
+
+      .menu-nav-control::after {
+        transform: rotate(-18deg);
+      }
+    }
+
+    &.scroll-nav__nav-next {
+      .menu-nav-control::before {
+        transform: rotate(-18deg);
+      }
+
+      .menu-nav-control::after {
+        transform: rotate(18deg);
+      }
+    }
+
+    &.scroll-nav__nav-prev:hover {
+      .menu-nav-control::before {
+        transform: rotate(30deg);
+      }
+
+      .menu-nav-control::after {
+        transform: rotate(-30deg);
+      }
+    }
+
+    &.scroll-nav__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%;
+
+    .scroll-nav__nav-control {
+      flex: none;
+      width: 100%;
+      height: 35px;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      visibility: hidden;
+
+      &.scroll-nav__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;
+        }
+      }
+
+      &.scroll-nav__nav-prev {
+        .menu-nav-control::before {
+          transform: rotate(-18deg);
+        }
+
+        .menu-nav-control::after {
+          transform: rotate(18deg);
+        }
+      }
+
+      &.scroll-nav__nav-next {
+        .menu-nav-control::before {
+          transform: rotate(18deg);
+        }
+
+        .menu-nav-control::after {
+          transform: rotate(-18deg);
+        }
+      }
+
+      &.scroll-nav__nav-prev:hover {
+        .menu-nav-control::before {
+          transform: rotate(-30deg);
+        }
+
+        .menu-nav-control::after {
+          transform: rotate(30deg);
+        }
+      }
+
+      &.scroll-nav__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

@@ -0,0 +1,262 @@
+<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

@@ -0,0 +1,71 @@
+<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>