@zzwing/vue-fixed-table/dist/index.js

a vue-table component

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

/**
 * 获取滚动高度
 */
function calcWidth(element, dir) {
  var dom;

  if (typeof element === 'string') {
    dom = document.querySelectorAll(element);
  } else {
    dom = element;
  }

  dom = Array.prototype.slice.call(dom, 0);
  var maxWidth = 0;
  dom.forEach(function (each) {
    var offsetWidth = each.offsetWidth;

    if (offsetWidth > maxWidth) {
      maxWidth = offsetWidth;
    }
  });
  dom.forEach(function (each) {
    // each.parentNode.style.width = 'initial';
    each.parentNode.style.width = maxWidth + 'px';
  });
}
function addResizeEventListener(ele, resizeHandle) {
  var obj = document.createElement('object');
  obj.setAttribute('style', 'position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;');

  obj.onload = function () {
    obj.contentDocument.defaultView.addEventListener('resize', resizeHandle, false);
  };

  obj.type = 'text/html';
  ele.appendChild(obj);
  obj.data = 'about:blank';
  return obj;
}
var getStyle = function getStyle(element, styleName) {
  if (!element || !styleName) return null;

  if (styleName === 'float') {
    styleName = 'cssFloat';
  }

  try {
    var computed = document.defaultView.getComputedStyle(element, '');
    return element.style[styleName] || computed ? computed[styleName] : null;
  } catch (e) {
    return element.style[styleName];
  }
};
function timerFnc(fnc, t, before) {
  var timer = null;
  var time = t || 200;
  return function (args) {
    var _this = this;

    if (timer) {
      window.clearTimeout(timer);
    }

    before && before.call(this);
    timer = window.setTimeout(function () {
      var ret = fnc.call(_this, args);

      if (ret && ret.then) {
        ret.then(function () {
          timer = null;
        });
      } else {
        timer = null;
      }
    }, time);
  };
}
function querySelectorAll(selector, context) {
  var ctx = context || document;
  var dom = ctx.querySelectorAll(selector);
  return Array.prototype.slice.call(dom, 0);
}

//
var script = {
  props: {
    scrollTarget: {}
  },
  data: function data() {
    return {
      scrollWidth: 0,
      // 滚动条宽度
      scrollLeft: 0,
      // 滚动距离
      virtualPercent: 0,
      // 滚动按钮宽度占比
      virtualMouseDownX: 0,
      // 鼠标按键x坐标
      virtualObserver: {},
      target: {},
      // 滚动元素
      // opacity: false, // 是否需要设置透明
      bottom: 0,
      // 底部
      iframe: {} // iframe,用来监听resize

    };
  },
  computed: {
    /**
     * @function
     * 计算往左滚动距离
     */
    barLeft: function barLeft() {
      var barScroll = this.scrollLeft * this.virtualPercent;

      if (Number.isNaN(barScroll)) {
        barScroll = 0;
      }

      return {
        transform: "translate3d(".concat(barScroll, "px, 0px, 0px)"),
        width: this.virtualPercent * 100 + '%'
      };
    },

    /**
     * @function
     * 滚动条位置
     */
    style: function style() {
      return {
        transform: "translate3d(0px, ".concat(-this.bottom, "px, 0px)"),
        opacity: this.bottom > 5 && this.virtualPercent < 1 ? 1 : 0
      };
    },
    scroller: function scroller() {
      if (!this.scrollTarget) {
        return window;
      }

      var result;

      if (typeof this.scrollTarget === 'string') {
        result = document.querySelector(this.scrollTarget);
      } else {
        result = this.scrollTarget;
      }

      if (result) {
        var pos = getStyle(result, 'position');

        if (pos !== 'absolute' && pos !== 'fixed') {
          result.style.position = 'relative';
        }
      }

      return result;
    }
  },
  mounted: function mounted() {
    // virtual
    this.bar = this.$refs.bar;
    this.target = this.$el.parentElement;
    this.virtualObserver = new MutationObserver(this.refreshScroll);
    this.virtualObserver.observe(this.target, {
      childList: true,
      characterData: true,
      // attributeFilter: ['style'],
      subtree: true
    }); // 计算滚动属性
    // this.refreshScroll();
    // 计算滚动条位置

    this.windowScrollHandle();
    this.target.addEventListener('scroll', this.targetScrollHandle, false);
    window.addEventListener('resize', this.windowScrollHandle, false);
    this.scroller.addEventListener('scroll', this.windowScrollHandle, false); // 添加resize监听器

    this.iframe = addResizeEventListener(this.target, this.refreshScroll);
  },
  activated: function activated() {
    var _this = this;

    // this.targetScrollHandle()
    this.$nextTick().then(function () {
      _this.target.scrollLeft = _this.scrollLeft;

      _this.windowScrollHandle();
    });
  },
  destroyed: function destroyed() {
    this.target.removeEventListener('scroll', this.targetScrollHandle);
    window.removeEventListener('resize', this.windowScrollHandle);
    this.scroller.removeEventListener('scroll', this.windowScrollHandle);
    this.iframe.removeEventListener('resize', this.refreshScroll);
    this.iframe.remove();
    this.virtualObserver.disconnect();
  },
  methods: {
    /**
     * @function
     * 监听全局滚动, 用来将虚拟滚动条固定在底部
     */
    windowScrollHandle: function windowScrollHandle() {
      var _this$target$getBound = this.target.getBoundingClientRect(),
          bottom = _this$target$getBound.bottom;

      var offsetTop = 0;

      if (this.scroller === window) {
        offsetTop = document.documentElement.clientHeight;
      } else {
        offsetTop = this.scroller.clientHeight + this.scroller.getBoundingClientRect().top;
      }

      var result = bottom - offsetTop;

      if (result < 0) {
        result = 0;
      }

      this.bottom = result; // this.setOpacityShow()
    },

    /**
     * @function
     * 目标滚动时候同步到虚拟滚动条位置
     */
    targetScrollHandle: function targetScrollHandle() {
      this.scrollLeft = this.target.scrollLeft;
    },

    /**
     * @function
     * 监听target的大小变化,重新计算虚拟滚动条的宽度.以及滚动占比
     */
    refreshScroll: timerFnc(function () {
      if (this._isDestroyed) {
        return;
      }

      this.scrollWidth = this.target.scrollWidth - (this.target.offsetWidth || this.target.clientWidth);

      if (this.scrollLeft > this.scrollWidth || this.scrollWidth === 0) {
        this.scrollLeft = 0;
      }

      this.virtualPercent = this.target.offsetWidth / this.target.scrollWidth;
      this.windowScrollHandle();
      this.targetScrollHandle();
    }, 100),

    /**
     * @event
     * 点解滚动条自动滚动到特定位置
     */
    barClickHandle: function barClickHandle(event) {
      var barLeft = this.scrollLeft * this.virtualPercent;
      var offsetX = event.offsetX - this.$refs.bar.offsetWidth - barLeft;

      if (offsetX < 0) {
        offsetX = -barLeft + event.offsetX;
      }

      this.scrollLeft += offsetX / this.virtualPercent;
    },

    /**
     * @event
     * 点解滚动条给body监听mousemove事件以及mouseup事件.
     * 执行拖动
     */
    barMouseDownHandle: function barMouseDownHandle(event) {
      if (event.button !== 0) {
        return;
      }

      this.virtualMouseDownX = event.pageX;
      document.body.addEventListener('mousemove', this.mousemoveHandle, false);
      document.body.classList.add('no-select');
      document.body.addEventListener('mouseup', this.bodyMouseUpHandle, false);
    },

    /**
     * @event
     * 拖动事件
     */
    mousemoveHandle: function mousemoveHandle(event) {
      var offsetX = event.pageX - this.virtualMouseDownX,
          speed = offsetX / this.virtualPercent;

      if (offsetX > 0) {
        this.up(speed);
      } else {
        this.down(-speed);
      }

      this.virtualMouseDownX = event.pageX;
    },

    /**
     * @event
     * body的mouseUp事件,用来移除mousemove事件以及mouseup事件
     */
    bodyMouseUpHandle: function bodyMouseUpHandle() {
      document.body.removeEventListener('mousemove', this.mousemoveHandle, false);
      document.body.removeEventListener('mouseup', this.bodyMouseUpHandle, false);
      document.body.classList.remove('no-select');
    },

    /**
     * @function
     * 往左拉
     */
    down: function down(speed) {
      this.scrollLeft = this.scrollLeft - speed > 0 ? this.scrollLeft - speed : 0;
    },

    /**
     * @function
     * 往右拉
     */
    up: function up(speed) {
      this.scrollLeft = this.scrollLeft + speed > this.scrollWidth ? this.scrollWidth : this.scrollLeft + speed;
    }
  },
  watch: {
    /**
     * @function
     * 监听scrollLeft,并对目标元素进行滚动
     */
    scrollLeft: function scrollLeft(val) {
      this.target.scrollLeft = val;
    }
  }
};

/* script */
            const __vue_script__ = script;
            
/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"scroller",staticClass:"virtual-scroll overhidden",style:(_vm.style),on:{"mousedown":function($event){if($event.target !== $event.currentTarget){ return null; }return _vm.barClickHandle($event)}}},[_c('div',{ref:"bar",staticClass:"virtual-scroll-bar",style:(_vm.barLeft),on:{"mousedown":_vm.barMouseDownHandle}})])};
var __vue_staticRenderFns__ = [];

  /* style */
  const __vue_inject_styles__ = function (inject) {
    if (!inject) return
    inject("data-v-275e12bf_0", { source: "\n.no-select{user-select:none\n}\n.virtual-scroll{opacity:1;height:9px;background:#eee;position:absolute;bottom:10px;right:0;left:0;transform:translate3d(0,0,0);transition:opacity .3s ease;border-radius:4px;z-index:2\n}\n.virtual-scroll.hide{visibility:hidden;pointer-events:none;width:0;overflow:hidden\n}\n.virtual-scroll-bar{background:#2d3041;background:rgba(0,0,0,.2);border-radius:inherit;height:9px;cursor:pointer\n}\n.virtual-scroll-bar:hover{background:rgba(0,0,0,.4)\n}", map: undefined, media: undefined });

  };
  /* scoped */
  const __vue_scope_id__ = undefined;
  /* module identifier */
  const __vue_module_identifier__ = undefined;
  /* functional template */
  const __vue_is_functional_template__ = false;
  /* component normalizer */
  function __vue_normalize__(
    template, style, script$$1,
    scope, functional, moduleIdentifier,
    createInjector, createInjectorSSR
  ) {
    const component = (typeof script$$1 === 'function' ? script$$1.options : script$$1) || {};

    // For security concerns, we use only base name in production mode.
    component.__file = "scroll-x-bar.vue";

    if (!component.render) {
      component.render = template.render;
      component.staticRenderFns = template.staticRenderFns;
      component._compiled = true;

      if (functional) component.functional = true;
    }

    component._scopeId = scope;

    {
      let hook;
      if (style) {
        hook = function(context) {
          style.call(this, createInjector(context));
        };
      }

      if (hook !== undefined) {
        if (component.functional) {
          // register for functional component in vue file
          const originalRender = component.render;
          component.render = function renderWithStyleInjection(h, context) {
            hook.call(context);
            return originalRender(h, context)
          };
        } else {
          // inject component registration as beforeCreate hook
          const existing = component.beforeCreate;
          component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
        }
      }
    }

    return component
  }
  /* style inject */
  function __vue_create_injector__() {
    const head = document.head || document.getElementsByTagName('head')[0];
    const styles = __vue_create_injector__.styles || (__vue_create_injector__.styles = {});
    const isOldIE =
      typeof navigator !== 'undefined' &&
      /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());

    return function addStyle(id, css) {
      if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return // SSR styles are present.

      const group = isOldIE ? css.media || 'default' : id;
      const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });

      if (!style.ids.includes(id)) {
        let code = css.source;
        let index = style.ids.length;

        style.ids.push(id);

        if (css.map) {
          // https://developer.chrome.com/devtools/docs/javascript-debugging
          // this makes source maps inside style tags work properly in Chrome
          code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
          // http://stackoverflow.com/a/26603875
          code +=
            '\n/*# sourceMappingURL=data:application/json;base64,' +
            btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
            ' */';
        }

        if (isOldIE) {
          style.element = style.element || document.querySelector('style[data-group=' + group + ']');
        }

        if (!style.element) {
          const el = style.element = document.createElement('style');
          el.type = 'text/css';

          if (css.media) el.setAttribute('media', css.media);
          if (isOldIE) {
            el.setAttribute('data-group', group);
            el.setAttribute('data-next-index', '0');
          }

          head.appendChild(el);
        }

        if (isOldIE) {
          index = parseInt(style.element.getAttribute('data-next-index'));
          style.element.setAttribute('data-next-index', index + 1);
        }

        if (style.element.styleSheet) {
          style.parts.push(code);
          style.element.styleSheet.cssText = style.parts
            .filter(Boolean)
            .join('\n');
        } else {
          const textNode = document.createTextNode(code);
          const nodes = style.element.childNodes;
          if (nodes[index]) style.element.removeChild(nodes[index]);
          if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
          else style.element.appendChild(textNode);
        }
      }
    }
  }
  /* style inject SSR */
  

  
  var scrollxbar = __vue_normalize__(
    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    __vue_create_injector__,
    undefined
  );

//
var _navigator = navigator,
    userAgent = _navigator.userAgent;
var isMoz = /Firefox/.test(userAgent);
var isSafari = userAgent.indexOf('Safari') !== -1 && userAgent.indexOf('Chrome') === -1;
var script$1 = {
  components: {
    scrollxbar: scrollxbar
  },
  props: {
    offsetLeft: {
      type: [String, Number],
      default: 0
    },
    offsetTop: {
      type: [String, Number],
      default: 0
    },
    scrollTarget: {},
    useTrans: Boolean,
    selfScroll: {
      type: Boolean,
      default: false
    }
  },
  data: function data() {
    return {
      clientRect: {
        top: 0
      },
      targetOffset: {
        top: 0 // 距离

      },
      fixedTop: false,
      tleftWidth: 0,
      // 左侧表格宽度,
      tRightWidth: 0,
      // 右侧表格宽度,
      topChanging: false,
      opacity: 1,
      scrolling: false
    };
  },
  computed: {
    theadStyle: function theadStyle() {
      return {
        transform: "translate3d(0px, ".concat(this.fixedTop && !this.topChanging ? -(this.clientRect.top - this.offsetTop) : 0, "px, 1px)")
      };
    },
    tableContentStyle: function tableContentStyle() {
      return {
        paddingRight: this.tRightWidth + 'px',
        paddingLeft: this.tleftWidth + 'px'
      };
    },
    scroller: function scroller() {
      if (!this.scrollTarget) {
        return window;
      }

      var result;

      if (typeof this.scrollTarget === 'string') {
        result = document.querySelector(this.scrollTarget);
      } else {
        result = this.scrollTarget;
      }

      if (result) {
        var pos = getStyle(result, 'position');

        if (pos !== 'absolute' && pos !== 'fixed') {
          result.style.position = 'relative';
        }
      }

      this.getTargetOffsetParent(this.$refs.content, result);
      return result;
    },
    isFixLeft: function isFixLeft() {
      return !!this.$slots.leftThead;
    },
    isFixRight: function isFixRight() {
      return !!this.$slots.rightThead;
    },
    isTransition: function isTransition() {
      // return false;
      return isMoz || isSafari || this.useTrans;
    }
  },
  mounted: function mounted() {
    this.init();
  },
  activated: function activated() {
    this.init();
    Array.from(document.querySelectorAll('tbody tr.hover')).forEach(function (each) {
      each.classList.remove('hover');
    });
  },
  deactivated: function deactivated() {
    this.destroyed();
  },
  beforeDestroy: function beforeDestroy() {
    this.clientRect = {
      top: 0
    };
    this.destroyed();
  },
  methods: {
    init: function init() {
      this.scroller.addEventListener('scroll', this.scrollHandle, {
        passive: true
      });
      this.scroller.addEventListener('resize', this.scrollHandle, {
        passive: true
      });
      this.update();
    },
    destroyed: function destroyed() {
      this.scroller.removeEventListener('scroll', this.scrollHandle);
      this.scroller.removeEventListener('resize', this.scrollHandle);
    },
    hoverClass: function hoverClass(e, type) {
      var tr = e.target.closest('tr');

      if (!tr) {
        return;
      }

      var idx = tr.rowIndex;
      var trs = querySelectorAll("tbody tr:nth-child(".concat(idx, ")"), this.$el);

      if (trs.length === 0) {
        return;
      }

      trs.forEach(function (each) {
        each.classList[type]('hover');
      });
    },
    mouseOver: function mouseOver(e) {
      this.hoverClass(e, 'add');
    },
    mouseLeave: function mouseLeave(e) {
      this.hoverClass(e, 'remove');
    },
    getTargetOffsetParent: function getTargetOffsetParent(dom, parent) {
      var top = dom.offsetTop;
      dom = dom.parentElement;

      while (dom && dom !== parent) {
        top += dom.offsetTop;
        dom = dom.parentElement;
      }

      this.targetOffset.top = top;
    },
    getPointOffsetParent: function getPointOffsetParent() {
      var top = this.targetOffset.top;
      return {
        top: top - this.scroller.scrollTop
      };
    },
    setScrollIng: timerFnc(function () {
      this.scrolling = false;
    }, 250),
    scrollHandle: function scrollHandle() {
      var tbody = this.$refs.tbody;

      if (!tbody) {
        return;
      }

      this.scrolling = true;
      this.setScrollIng();

      if (this.selfScroll) {
        var _tbody$getBoundingCli = tbody.getBoundingClientRect(),
            top = _tbody$getBoundingCli.top;

        this.clientRect = {
          top: top
        };
      } else {
        var point = this.getPointOffsetParent();
        this.clientRect = {
          top: point.top
        };
      }
    },
    update: function update() {
      if (this._isDestroyed) {
        return;
      }

      if (this.isFixLeft && this.$refs.leftClone) {
        this.tleftWidth = this.$refs.leftClone.clientWidth;
      }

      if (this.isFixRight && this.$refs.rightClone) {
        this.tRightWidth = this.$refs.rightClone.clientWidth;
      } // this.$nextTick(() => {
      //   this.scrollHandle()
      // })

    },
    transitionTop: timerFnc(function () {
      this.topChanging = false;
    }, 0)
  },
  watch: {
    offsetLeft: function offsetLeft(val) {
      var _this = this;

      setTimeout(function () {
        _this.scrollHandle();
      }, 250);
    },
    'clientRect.top': function clientRectTop(val, old) {
      this.fixedTop = val < this.offsetTop;

      if (val < 0 && this.isTransition) {
        this.topChanging = true;
        this.transitionTop();
      }
    }
  }
};

/* script */
            const __vue_script__$1 = script$1;
            
/* template */
var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"rel"},[_c('div',{ref:"content",staticClass:"fixed-table-container rel",on:{"mouseover":_vm.mouseOver,"mouseout":_vm.mouseLeave}},[(_vm.isFixLeft)?_c('table',{ref:"leftClone",staticClass:"fixed-table table-clone left"},[_c('thead',{staticClass:"fixed-table corner",class:[{fixed: _vm.fixedTop}],style:(_vm.theadStyle)},[_vm._t("leftThead")],2),_vm._v(" "),_c('tbody',[_vm._t("leftBody")],2)]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"scroll-container flex-grow"},[_c('table',{ref:"tbody",staticClass:"fixed-table  flex-grow",style:(_vm.tableContentStyle)},[_c('thead',{ref:"thead",class:[{fixed: _vm.fixedTop}],style:(_vm.theadStyle)},[_vm._t("thead")],2),_vm._v(" "),_c('tbody',[_vm._t("tbody")],2)]),_vm._v(" "),_c('scrollxbar',{attrs:{"scrollTarget":_vm.scrollTarget}})],1),_vm._v(" "),(_vm.isFixRight)?_c('table',{ref:"rightClone",staticClass:"fixed-table table-clone right"},[_c('thead',{staticClass:"fixed-table corner",class:[{fixed: _vm.fixedTop}],style:(_vm.theadStyle)},[_vm._t("rightThead")],2),_vm._v(" "),_c('tbody',[_vm._t("rightBody")],2)]):_vm._e()]),_vm._v(" "),_c('div',{staticStyle:{"z-index":"1","position":"fixed"}})])};
var __vue_staticRenderFns__$1 = [];

  /* style */
  const __vue_inject_styles__$1 = function (inject) {
    if (!inject) return
    inject("data-v-5f15d23a_0", { source: "\n.fixed-table-container{position:relative;z-index:2;box-shadow:-1px 0 0 0 #dadada,1px 0 0 0 #dadada,0 1px 0 0 #dadada;border-top:none;display:flex\n}\n.fixed-table-container .fixed-table{border-spacing:0;border-collapse:separate;transform-style:preserve-3d\n}\n.fixed-table-container .fixed-table td,.fixed-table-container .fixed-table th{border-bottom:none;border-right:none;border-left:none;box-shadow:1px 0 0 0 #dadada\n}\n.fixed-table-container .fixed-table thead.fixed{box-shadow:0 1px 0 0 #dadada\n}\n.fixed-table-container .table-clone{z-index:1;width:initial;position:absolute\n}\n.fixed-table-container .table-clone tbody{background:#f8f9ff\n}\n.fixed-table-container .table-clone.left{left:0;box-shadow:5px 0 3px -3px #dadada\n}\n.fixed-table-container .table-clone.right{right:0;box-shadow:-5px 0 3px -3px #dadada\n}\n.flex{display:flex\n}\n.flex-grow{flex-grow:1\n}\n.rel{position:relative\n}\n.flex-no-shrink{flex-shrink:0\n}", map: undefined, media: undefined });

  };
  /* scoped */
  const __vue_scope_id__$1 = undefined;
  /* module identifier */
  const __vue_module_identifier__$1 = undefined;
  /* functional template */
  const __vue_is_functional_template__$1 = false;
  /* component normalizer */
  function __vue_normalize__$1(
    template, style, script,
    scope, functional, moduleIdentifier,
    createInjector, createInjectorSSR
  ) {
    const component = (typeof script === 'function' ? script.options : script) || {};

    // For security concerns, we use only base name in production mode.
    component.__file = "fixed-table.vue";

    if (!component.render) {
      component.render = template.render;
      component.staticRenderFns = template.staticRenderFns;
      component._compiled = true;

      if (functional) component.functional = true;
    }

    component._scopeId = scope;

    {
      let hook;
      if (style) {
        hook = function(context) {
          style.call(this, createInjector(context));
        };
      }

      if (hook !== undefined) {
        if (component.functional) {
          // register for functional component in vue file
          const originalRender = component.render;
          component.render = function renderWithStyleInjection(h, context) {
            hook.call(context);
            return originalRender(h, context)
          };
        } else {
          // inject component registration as beforeCreate hook
          const existing = component.beforeCreate;
          component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
        }
      }
    }

    return component
  }
  /* style inject */
  function __vue_create_injector__$1() {
    const head = document.head || document.getElementsByTagName('head')[0];
    const styles = __vue_create_injector__$1.styles || (__vue_create_injector__$1.styles = {});
    const isOldIE =
      typeof navigator !== 'undefined' &&
      /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());

    return function addStyle(id, css) {
      if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return // SSR styles are present.

      const group = isOldIE ? css.media || 'default' : id;
      const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });

      if (!style.ids.includes(id)) {
        let code = css.source;
        let index = style.ids.length;

        style.ids.push(id);

        if (css.map) {
          // https://developer.chrome.com/devtools/docs/javascript-debugging
          // this makes source maps inside style tags work properly in Chrome
          code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
          // http://stackoverflow.com/a/26603875
          code +=
            '\n/*# sourceMappingURL=data:application/json;base64,' +
            btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
            ' */';
        }

        if (isOldIE) {
          style.element = style.element || document.querySelector('style[data-group=' + group + ']');
        }

        if (!style.element) {
          const el = style.element = document.createElement('style');
          el.type = 'text/css';

          if (css.media) el.setAttribute('media', css.media);
          if (isOldIE) {
            el.setAttribute('data-group', group);
            el.setAttribute('data-next-index', '0');
          }

          head.appendChild(el);
        }

        if (isOldIE) {
          index = parseInt(style.element.getAttribute('data-next-index'));
          style.element.setAttribute('data-next-index', index + 1);
        }

        if (style.element.styleSheet) {
          style.parts.push(code);
          style.element.styleSheet.cssText = style.parts
            .filter(Boolean)
            .join('\n');
        } else {
          const textNode = document.createTextNode(code);
          const nodes = style.element.childNodes;
          if (nodes[index]) style.element.removeChild(nodes[index]);
          if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
          else style.element.appendChild(textNode);
        }
      }
    }
  }
  /* style inject SSR */
  

  
  var fixedTable = __vue_normalize__$1(
    { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
    __vue_inject_styles__$1,
    __vue_script__$1,
    __vue_scope_id__$1,
    __vue_is_functional_template__$1,
    __vue_module_identifier__$1,
    __vue_create_injector__$1,
    undefined
  );

//
var script$2 = {
  name: 'AlignCell',
  props: {
    dir: {
      type: String,
      default: 'l'
    },
    tag: {
      type: String,
      default: 'td'
    }
  },
  data: function data() {
    return {
      observer: undefined
    };
  },
  mounted: function mounted() {
    this.calc();
    this.observer = new MutationObserver(this.calc);
    this.observer.observe(this.$refs.span, {
      childList: true,
      subtree: true,
      characterData: true
    });
  },
  destroyed: function destroyed() {
    this.observer.disconnect();
  },
  methods: {
    calc: function calc() {
      var table = this.$el.offsetParent;

      if (!table) {
        return;
      }

      var index = this.$el.cellIndex + 1;
      var element = table.querySelectorAll(".align-cell:nth-child(".concat(index, ")>span>span"));
      this.$nextTick(function () {
        calcWidth(element);
      });
    }
  },
  computed: {
    hasDom: function hasDom() {
      return this.$slots.default;
    }
  }
};

/* script */
            const __vue_script__$2 = script$2;
            
/* template */
var __vue_render__$2 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.tag,_vm._g(_vm._b({tag:"component",staticClass:"align-cell"},'component',_vm.$attrs,false),_vm.$listeners),[_c('span',{class:"align-cell-" + _vm.dir},[_c('span',{ref:"span"},[_vm._t("default")],2)])])};
var __vue_staticRenderFns__$2 = [];

  /* style */
  const __vue_inject_styles__$2 = function (inject) {
    if (!inject) return
    inject("data-v-3bbd47ca_0", { source: "\n.align-cell-l{text-align:left\n}\n.align-cell-r{text-align:right\n}\n.align-cell-c{text-align:center\n}\n.align-cell span{display:inline-block\n}", map: undefined, media: undefined });

  };
  /* scoped */
  const __vue_scope_id__$2 = undefined;
  /* module identifier */
  const __vue_module_identifier__$2 = undefined;
  /* functional template */
  const __vue_is_functional_template__$2 = false;
  /* component normalizer */
  function __vue_normalize__$2(
    template, style, script,
    scope, functional, moduleIdentifier,
    createInjector, createInjectorSSR
  ) {
    const component = (typeof script === 'function' ? script.options : script) || {};

    // For security concerns, we use only base name in production mode.
    component.__file = "align-cell.vue";

    if (!component.render) {
      component.render = template.render;
      component.staticRenderFns = template.staticRenderFns;
      component._compiled = true;

      if (functional) component.functional = true;
    }

    component._scopeId = scope;

    {
      let hook;
      if (style) {
        hook = function(context) {
          style.call(this, createInjector(context));
        };
      }

      if (hook !== undefined) {
        if (component.functional) {
          // register for functional component in vue file
          const originalRender = component.render;
          component.render = function renderWithStyleInjection(h, context) {
            hook.call(context);
            return originalRender(h, context)
          };
        } else {
          // inject component registration as beforeCreate hook
          const existing = component.beforeCreate;
          component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
        }
      }
    }

    return component
  }
  /* style inject */
  function __vue_create_injector__$2() {
    const head = document.head || document.getElementsByTagName('head')[0];
    const styles = __vue_create_injector__$2.styles || (__vue_create_injector__$2.styles = {});
    const isOldIE =
      typeof navigator !== 'undefined' &&
      /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());

    return function addStyle(id, css) {
      if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return // SSR styles are present.

      const group = isOldIE ? css.media || 'default' : id;
      const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });

      if (!style.ids.includes(id)) {
        let code = css.source;
        let index = style.ids.length;

        style.ids.push(id);

        if (css.map) {
          // https://developer.chrome.com/devtools/docs/javascript-debugging
          // this makes source maps inside style tags work properly in Chrome
          code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
          // http://stackoverflow.com/a/26603875
          code +=
            '\n/*# sourceMappingURL=data:application/json;base64,' +
            btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
            ' */';
        }

        if (isOldIE) {
          style.element = style.element || document.querySelector('style[data-group=' + group + ']');
        }

        if (!style.element) {
          const el = style.element = document.createElement('style');
          el.type = 'text/css';

          if (css.media) el.setAttribute('media', css.media);
          if (isOldIE) {
            el.setAttribute('data-group', group);
            el.setAttribute('data-next-index', '0');
          }

          head.appendChild(el);
        }

        if (isOldIE) {
          index = parseInt(style.element.getAttribute('data-next-index'));
          style.element.setAttribute('data-next-index', index + 1);
        }

        if (style.element.styleSheet) {
          style.parts.push(code);
          style.element.styleSheet.cssText = style.parts
            .filter(Boolean)
            .join('\n');
        } else {
          const textNode = document.createTextNode(code);
          const nodes = style.element.childNodes;
          if (nodes[index]) style.element.removeChild(nodes[index]);
          if (nodes.length) style.element.insertBefore(textNode, nodes[index]);
          else style.element.appendChild(textNode);
        }
      }
    }
  }
  /* style inject SSR */
  

  
  var alignCell = __vue_normalize__$2(
    { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
    __vue_inject_styles__$2,
    __vue_script__$2,
    __vue_scope_id__$2,
    __vue_is_functional_template__$2,
    __vue_module_identifier__$2,
    __vue_create_injector__$2,
    undefined
  );

exports.FixedTable = fixedTable;
exports.AlignCell = alignCell;
exports.ScrollXbar = scrollxbar;