@zeit-ui/vue/lib/table.common.js

A popular UI framework for Vue

module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = "fb15");
/******/ })
/************************************************************************/
/******/ ({

/***/ "8bbf":
/***/ (function(module, exports) {

module.exports = require("vue");

/***/ }),

/***/ "a731":
/***/ (function(module, exports, __webpack_require__) {

// extracted by mini-css-extract-plugin

/***/ }),

/***/ "f6fd":
/***/ (function(module, exports) {

// document.currentScript polyfill by Adam Miller

// MIT license

(function(document){
  var currentScript = "currentScript",
      scripts = document.getElementsByTagName('script'); // Live NodeList collection

  // If browser needs currentScript polyfill, add get currentScript() to the document object
  if (!(currentScript in document)) {
    Object.defineProperty(document, currentScript, {
      get: function(){

        // IE 6-10 supports script readyState
        // IE 10+ support stack trace
        try { throw new Error(); }
        catch (err) {

          // Find the second match for the "at" string to get file src url from stack.
          // Specifically works with the format of stack traces in IE.
          var i, res = ((/.*at [^\(]*\((.*):.+:.+\)$/ig).exec(err.stack) || [false])[1];

          // For all scripts on the page, if src matches or if ready state is interactive, return the script tag
          for(i in scripts){
            if(scripts[i].src == res || scripts[i].readyState == "interactive"){
              return scripts[i];
            }
          }

          // If no match, return null
          return null;
        }
      }
    });
  }
})(document);


/***/ }),

/***/ "fb15":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
// This file is imported into lib/wc client bundles.

if (typeof window !== 'undefined') {
  if (true) {
    __webpack_require__("f6fd")
  }

  var i
  if ((i = window.document.currentScript) && (i = i.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))) {
    __webpack_require__.p = i[1] // eslint-disable-line
  }
}

// Indicate to webpack that this file can be concatenated
/* harmony default export */ var setPublicPath = (null);

// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3d5aa1b0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/pug-plain-loader!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/table/table.vue?vue&type=template&id=5dc3df16&lang=pug&
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"zi-table",style:({ width: _vm.bodyWidth })},[_c('div',{ref:"hiddenColumns",staticClass:"hidden"},[_vm._t("default")],2),_c('div',{ref:"headerWrapper",staticClass:"header-wrapper"},[_c('table-header',{ref:"tableHeader",staticClass:"header-table",style:({ width: _vm.layout.bodyWidth + 'px' }),attrs:{"store":_vm.store}})],1),_c('div',{ref:"bodyWrapper",staticClass:"body-wrapper"},[_c('table-body',{ref:"tableBody",staticClass:"body-table",style:({ width: _vm.layout.bodyWidth + 'px' }),attrs:{"store":_vm.store,"empty-text":_vm.emptyText,"isHover":_vm.hover}})],1)])}
var staticRenderFns = []


// CONCATENATED MODULE: ./packages/table/table.vue?vue&type=template&id=5dc3df16&lang=pug&

// EXTERNAL MODULE: ./packages/table/table.styl
var table = __webpack_require__("a731");

// CONCATENATED MODULE: ./packages/table/table-store.js
var TableStore = function TableStore(table) {
  if (!table) throw new Error('table is required');
  this.table = table;
  this.states = {
    columns: [],
    data: null,
    width: null,
    currentRow: null
  };
};

TableStore.prototype.mutations = {
  setData: function setData(states, data) {
    states.data = data;
  },
  insertColumns: function insertColumns(states, column, index) {
    var columnArray = states.columns;

    if (typeof index !== 'undefined') {
      columnArray.splice(index, 0, column);
      return;
    }

    columnArray.push(column);
  },
  setCurrentRow: function setCurrentRow(states, row) {
    var preRow = states.currentRow;
    states.currentRow = row;
    if (preRow !== row) this.table.$emit('current-change', row, preRow);
  }
};

TableStore.prototype.commit = function (name) {
  var mutations = this.mutations;
  if (!mutations[name]) throw new Error("action not found: ".concat(name));

  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
    args[_key - 1] = arguments[_key];
  }

  mutations[name].apply(this, [this.states].concat(args));
};

/* harmony default export */ var table_store = (TableStore);
// CONCATENATED MODULE: ./packages/table/table-header.js
/* harmony default export */ var table_header = ({
  name: 'ElTableHeader',
  props: {
    store: {
      required: true
    }
  },
  render: function render() {
    var h = arguments[0];
    return h("table", {
      "class": "zi-table"
    }, [h("colgroup", [this._l(this.columns, function (column) {
      return h("col", {
        "attrs": {
          "width": column.realWidth || column.width
        }
      });
    })]), h("thead", [h("tr", [this._l(this.columns, function (column) {
      return h("th", [column.label || '#']);
    })])])]);
  },
  computed: {
    columns: function columns() {
      return this.store.states.columns;
    },
    table: function table() {
      return this.$parent;
    }
  }
});
// CONCATENATED MODULE: ./packages/table/table-body.js
/* harmony default export */ var table_body = ({
  name: 'zi-table-body',
  props: {
    store: {
      required: true
    },
    isHover: [Boolean],
    emptyText: [String, Boolean]
  },
  render: function render(h) {
    var _this = this;

    return h("table", {
      "class": "zi-table"
    }, [h("colgroup", [this._l(this.columns, function (column) {
      return h("col", {
        "attrs": {
          "width": column.realWidth || column.width
        }
      });
    })]), h("tbody", [this.data.length ? this._l(this.data, function (row, $index) {
      return [h("tr", {
        "class": _this.isHover ? 'table-row' : '',
        "on": {
          "click": function click($event) {
            return _this.handleClick($event, row);
          }
        }
      }, [_this._l(_this.columns, function (column) {
        return h("td", [column.renderCell.call(_this._renderProxy, h, {
          row: row,
          column: column,
          $index: $index
        })]);
      })])];
    }) : h("tr", [h("td", {
      "style": "color:#ccc; text-align:center"
    }, [this.emptyText || '没有数据'])])])]);
  },
  computed: {
    table: function table() {
      return this.$parent;
    },
    data: function data() {
      return this.store.states.data;
    },
    columns: function columns() {
      return this.store.states.columns;
    }
  },
  methods: {
    getCell: function getCell(event) {
      var cell = event.target;

      while (cell && cell.tagName.toUpperCase() !== 'HTML') {
        if (cell.tagName.toUpperCase() === 'TD') {
          return cell;
        }

        cell = cell.parentNode;
      }

      return null;
    },
    handleClick: function handleClick(event, row) {
      var table = this.table;
      var cell = this.getCell(event);

      if (cell) {
        table.$emit('cell-click', cell, row, event);
      }

      this.store.commit('setCurrentRow', row);
      table.$emit('row-click', row, event);
    }
  }
});
// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);

// CONCATENATED MODULE: ./packages/table/table-layout.js
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }



var table_layout_TableLayout = /*#__PURE__*/function () {
  function TableLayout(options) {
    var _this = this;

    _classCallCheck(this, TableLayout);

    this.table = null;
    this.store = null;
    this.columns = null;
    this.bodyWidth = null;
    Object.keys(options).forEach(function (key) {
      if (Object.prototype.hasOwnProperty.call(options, key)) {
        _this[key] = options[key];
      }
    });
    if (!this.table) throw new Error('table is required for Table Layout');
    if (!this.store) throw new Error('store is required for Table Layout');
  }

  _createClass(TableLayout, [{
    key: "updateColumnWidth",
    value: function updateColumnWidth() {
      if (external_commonjs_vue_commonjs2_vue_root_Vue_default.a.prototype.$isServer) return;
      var bodyWidth = this.table.$el.clientWidth;
      var columns = this.table.columns;
      var flexColumns = columns.filter(function (column) {
        return typeof column.width !== 'number';
      });
      var fixedColumns = columns.filter(function (column) {
        return typeof column.width === 'number';
      });
      var fixedBodyWidth = fixedColumns.reduce(function (total, column) {
        return total + column.width;
      }, 0);

      if (flexColumns.length > 0) {
        var bodyMinWidth = flexColumns.reduce(function (total, column) {
          return total + column.minWidth;
        }, fixedBodyWidth);

        if (fixedBodyWidth > bodyWidth) {
          this.bodyWidth = fixedBodyWidth + flexColumns.reduce(function (total, column) {
            return total + column.minWidth;
          }, 0);
          return;
        }

        var flexBodyWidth = bodyWidth - bodyMinWidth;
        var averageWidth = Math.floor(flexBodyWidth / flexColumns.length);
        flexColumns.forEach(function (flexColumn, index) {
          if (!index) {
            flexColumn.realWidth = flexBodyWidth - averageWidth * (flexColumns.length - 1) + flexColumn.minWidth;
            return;
          }

          flexColumn.realWidth = averageWidth + flexColumn.minWidth;
        });
        this.bodyWidth = Math.max(bodyWidth);
        return;
      }

      this.bodyWidth = fixedBodyWidth;
    }
  }]);

  return TableLayout;
}();

/* harmony default export */ var table_layout = (table_layout_TableLayout);
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--11-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/table/table.vue?vue&type=script&lang=js&
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//





/* harmony default export */ var tablevue_type_script_lang_js_ = ({
  name: 'zi-table',
  components: {
    TableHeader: table_header,
    TableBody: table_body
  },
  props: {
    data: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    width: [String, Number],
    emptyText: [String, Boolean],
    hover: [Boolean]
  },
  computed: {
    columns: function columns() {
      return this.store.states.columns;
    },
    bodyWidth: function bodyWidth() {
      if (!this.width) return '100%';
      if (Number.isNaN(Number(this.width))) return this.width;
      return this.width + 'px';
    }
  },
  watch: {
    data: {
      immediate: true,
      handler: function handler(value) {
        this.store.commit('setData', value);
      }
    }
  },
  data: function data() {
    var store = new table_store(this);
    var layout = new table_layout({
      store: store,
      table: this
    });
    return {
      layout: layout,
      store: store,
      resizeState: {
        width: null
      }
    };
  },
  methods: {
    doLayout: function doLayout() {
      this.layout.updateColumnWidth();
    },
    bindEvent: function bindEvent() {
      var _this$$refs = this.$refs,
          bodyWrapper = _this$$refs.bodyWrapper,
          headerWrapper = _this$$refs.headerWrapper;
      bodyWrapper.addEventListener('scroll', function () {
        headerWrapper.scrollLeft = this.scrollLeft;
      });
    }
  },
  mounted: function mounted() {
    this.resizeState = {
      width: this.$el.offsetWidth
    };
    this.doLayout();
    this.bindEvent();
  }
});
// CONCATENATED MODULE: ./packages/table/table.vue?vue&type=script&lang=js&
 /* harmony default export */ var table_tablevue_type_script_lang_js_ = (tablevue_type_script_lang_js_); 
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
/* globals __VUE_SSR_CONTEXT__ */

// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.

function normalizeComponent (
  scriptExports,
  render,
  staticRenderFns,
  functionalTemplate,
  injectStyles,
  scopeId,
  moduleIdentifier, /* server only */
  shadowMode /* vue-cli only */
) {
  // Vue.extend constructor export interop
  var options = typeof scriptExports === 'function'
    ? scriptExports.options
    : scriptExports

  // render functions
  if (render) {
    options.render = render
    options.staticRenderFns = staticRenderFns
    options._compiled = true
  }

  // functional template
  if (functionalTemplate) {
    options.functional = true
  }

  // scopedId
  if (scopeId) {
    options._scopeId = 'data-v-' + scopeId
  }

  var hook
  if (moduleIdentifier) { // server build
    hook = function (context) {
      // 2.3 injection
      context =
        context || // cached call
        (this.$vnode && this.$vnode.ssrContext) || // stateful
        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
      // 2.2 with runInNewContext: true
      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
        context = __VUE_SSR_CONTEXT__
      }
      // inject component styles
      if (injectStyles) {
        injectStyles.call(this, context)
      }
      // register component module identifier for async chunk inferrence
      if (context && context._registeredComponents) {
        context._registeredComponents.add(moduleIdentifier)
      }
    }
    // used by ssr in case component is cached and beforeCreate
    // never gets called
    options._ssrRegister = hook
  } else if (injectStyles) {
    hook = shadowMode
      ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }
      : injectStyles
  }

  if (hook) {
    if (options.functional) {
      // for template-only hot-reload because in that case the render fn doesn't
      // go through the normalizer
      options._injectStyles = hook
      // register for functional component in vue file
      var originalRender = options.render
      options.render = function renderWithStyleInjection (h, context) {
        hook.call(context)
        return originalRender(h, context)
      }
    } else {
      // inject component registration as beforeCreate hook
      var existing = options.beforeCreate
      options.beforeCreate = existing
        ? [].concat(existing, hook)
        : [hook]
    }
  }

  return {
    exports: scriptExports,
    options: options
  }
}

// CONCATENATED MODULE: ./packages/table/table.vue





/* normalize component */

var component = normalizeComponent(
  table_tablevue_type_script_lang_js_,
  render,
  staticRenderFns,
  false,
  null,
  null,
  null
  
)

/* harmony default export */ var table_table = (component.exports);
// CONCATENATED MODULE: ./packages/table/table-column.js


var getDefaultColumns = function getDefaultColumns(options) {
  var column = Object.keys(options).reduce(function (total, key) {
    var isOwn = Object.prototype.hasOwnProperty.call(options, key);

    if (isOwn && typeof options[key] !== 'undefined') {
      total[key] = options[key];
    }

    return total;
  }, {});
  if (!column.minWidth) column.minWidth = 80;
  column.realWidth = column.width === undefined ? column.minWidth : column.width;
  return column;
};

var formatWidth = function formatWidth(width, isMin) {
  if (width === undefined) return width;
  var intWidth = ~~width;
  if (Number.isNaN(intWidth)) intWidth = !isMin ? null : 80;
  return intWidth;
};

/* harmony default export */ var table_column = ({
  name: 'zi-table-column',
  props: {
    prop: String,
    label: String,
    width: [String, Number],
    minWidth: [String, Number]
  },
  data: function data() {
    return {
      defaultConfig: {}
    };
  },
  watch: {
    label: function label(newVal) {
      if (this.defaultConfig) this.defaultConfig.label = newVal;
    },
    prop: function prop(newVal) {
      if (this.defaultConfig) this.defaultConfig.prop = newVal;
    },
    width: function width(newVal) {
      if (this.defaultConfig) this.defaultConfig.width = formatWidth(newVal, false);
    },
    minWidth: function minWidth(newVal) {
      if (this.defaultConfig) this.defaultConfig.width = formatWidth(newVal, true);
    }
  },
  render: function render() {
    var h = arguments[0];
    return h("div");
  },
  computed: {
    isOwner: function isOwner() {
      var parent = this.$parent;

      while (parent && parent.$options.name !== 'zi-table') {
        parent = parent.$parent;
      }

      return parent;
    }
  },
  created: function created() {
    var _this = this;

    var h = this.$createElement;
    var width = formatWidth(this.width, false);
    var minWidth = formatWidth(this.minWidth, true);
    var column = getDefaultColumns({
      label: this.label,
      prop: this.prop,
      width: width,
      minWidth: minWidth
    });

    var renderCell = function renderCell(h, data) {
      return h("div", {
        "class": "table-cell"
      }, [data.row[data.column.prop]]);
    };

    column.renderCell = function (h, data) {
      if (_this.$scopedSlots.default) renderCell = function renderCell() {
        return _this.$scopedSlots.default(data);
      };
      return renderCell(h, data, _this._renderProxy);
    };

    this.defaultConfig = column;
  },
  mounted: function mounted() {
    var store = this.isOwner.store;
    store.commit('insertColumns', this.defaultConfig);
  }
});
// CONCATENATED MODULE: ./packages/table/index.js



table_table.install = function (vue) {
  vue.component(table_table.name, table_table);
  vue.component(table_column.name, table_column);
};

/* harmony default export */ var packages_table = (table_table);
// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js


/* harmony default export */ var entry_lib = __webpack_exports__["default"] = (packages_table);



/***/ })

/******/ })["default"];
//# sourceMappingURL=table.common.js.map