@livelybone/vue-table
Version:
A vue table component, support width change
854 lines (742 loc) • 20.5 kB
JavaScript
/**
* Bundle of @livelybone/vue-table
* Generated: 2019-08-04
* Version: 3.0.0
* License: MIT
* Author: 2631541504@qq.com
*/
import VueScrollbar from 'vue-scrollbar-live';
import { getRect as getRect$1 } from '@livelybone/scroll-get';
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var script = {
name: 'TableBase',
props: {
heads: {
default: function _default() {
return [];
},
type: [Array, Object]
},
data: {
default: function _default() {
return [];
},
type: [Array, Object]
},
headTrStyle: Object,
trStyle: Object,
evenTrStyle: Object,
noHead: Boolean
}
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
/* server only */
, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
} // Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script; // render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true; // functional template
if (isFunctionalTemplate) {
options.functional = true;
}
} // scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function hook(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 (style) {
style.call(this, createInjectorSSR(context));
} // register component module identifier for async chunk inference
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 (style) {
hook = shadowMode ? function () {
style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
} : function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// 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 script;
}
var normalizeComponent_1 = normalizeComponent;
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('table', {
staticClass: "vue-table table-base"
}, [!_vm.noHead ? _c('thead', {
staticClass: "thead"
}, [_c('tr', {
staticClass: "tr",
style: _vm.headTrStyle
}, _vm._l(_vm.heads, function (h, i) {
return _c('th', {
key: i,
staticClass: "th",
style: h.style,
on: {
"click": function click($event) {
return _vm.$emit('clickTh', {
ev: $event,
th: i
});
}
}
}, [_vm._v("\n " + _vm._s(h.headformatter ? h.headFormatter(h.title) : h.title) + "\n "), _vm._t('th-' + i)], 2);
}), 0)]) : _vm._e(), _vm._v(" "), _vm.data && _vm.data.length > 0 ? _c('tbody', {
staticClass: "tbody",
style: {
maxHeight: '30vh'
}
}, _vm._l(_vm.data, function (d, i) {
return _c('tr', {
key: i,
staticClass: "tr",
style: Object.assign({}, _vm.trStyle, i % 2 === 1 ? _vm.evenTrStyle : {}),
on: {
"click": function click($event) {
return _vm.$emit('clickTr', {
ev: $event,
tr: i
});
}
}
}, _vm._l(_vm.heads, function (h, j) {
return _c('td', {
key: j,
staticClass: "td",
style: h.tdStyle || h.style,
on: {
"click": function click($event) {
return _vm.$emit('clickTd', {
ev: $event,
tr: i,
td: j
});
}
}
}, [_c('div', {
staticClass: "td-value",
domProps: {
"innerHTML": _vm._s(h.formatter ? h.formatter(d, h.key) : d[h.key])
}
}), _vm._v(" "), _vm._t('td-' + i + '-' + j)], 2);
}), 0);
}), 0) : _vm._e()]);
};
var __vue_staticRenderFns__ = [];
/* style */
var __vue_inject_styles__ = undefined;
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
var TableBase = normalizeComponent_1({
render: __vue_render__,
staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(source, true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(source).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
return arr2;
}
}
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
//
var getRect = getRect$1;
var script$1 = {
name: 'Item',
mounted: function mounted() {
this.widthChange(getRect(this.$refs.item));
},
updated: function updated() {
this.widthChange(getRect(this.$refs.item));
},
data: function data() {
return {
oldWidth: -1
};
},
methods: {
widthChange: function widthChange(_ref) {
var width = _ref.width;
if (width !== this.oldWidth) {
this.oldWidth = width;
this.$emit('contentWidthChange', width);
}
}
}
};
/* script */
var __vue_script__$1 = script$1;
/* template */
var __vue_render__$1 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', _vm._g({
ref: "item"
}, _vm.$listeners), [_vm._t("default")], 2);
};
var __vue_staticRenderFns__$1 = [];
/* style */
var __vue_inject_styles__$1 = undefined;
/* scoped */
var __vue_scope_id__$1 = undefined;
/* module identifier */
var __vue_module_identifier__$1 = undefined;
/* functional template */
var __vue_is_functional_template__$1 = false;
/* style inject */
/* style inject SSR */
var Item = normalizeComponent_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, undefined, undefined);
function assign() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return args.reduce(function (pre, o) {
return _objectSpread2({}, pre, {}, o);
}, {});
}
var RowMixin = {
components: {
Item: Item
},
props: {
heads: Array,
widths: Array
},
data: function data() {
return {
contentWidths: []
};
},
methods: {
contentChange: function contentChange(val, index) {
var _this = this;
this.$set(this.contentWidths, index, val);
if (this.heads.every(function (h, i) {
return _this.contentWidths[i] !== undefined;
})) {
this.$emit('contentWidthChange', this.contentWidths);
}
},
assign: assign,
cWidth: function cWidth(i) {
var width = this.widths[i];
if (!width) return 'auto';
return typeof width === 'number' ? "".concat(width, "px") : width;
}
}
};
//
var script$2 = {
name: 'Row',
mixins: [RowMixin],
props: {
item: Object
},
data: function data() {
return {};
},
methods: {}
};
/* script */
var __vue_script__$2 = script$2;
/* template */
var __vue_render__$2 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', _vm._g({
ref: "row",
staticClass: "row"
}, _vm.$listeners), _vm._l(_vm.heads, function (h, i) {
return _c('item', {
key: i,
staticClass: "td",
style: _vm.assign(h.tdStyle || h.style, {
width: _vm.cWidth(i)
}),
on: {
"click": function click($event) {
return _vm.$emit('clickTd', {
ev: $event,
td: i
});
},
"contentWidthChange": function contentWidthChange($event) {
return _vm.contentChange($event, i);
}
}
}, [_c('div', {
staticClass: "td-value",
domProps: {
"innerHTML": _vm._s(h.formatter ? h.formatter(_vm.item, h.key) : _vm.item[h.key])
}
}), _vm._v(" "), _vm._t('td-' + i)], 2);
}), 1);
};
var __vue_staticRenderFns__$2 = [];
/* style */
var __vue_inject_styles__$2 = undefined;
/* scoped */
var __vue_scope_id__$2 = undefined;
/* module identifier */
var __vue_module_identifier__$2 = undefined;
/* functional template */
var __vue_is_functional_template__$2 = false;
/* style inject */
/* style inject SSR */
var TdRow = normalizeComponent_1({
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, undefined, undefined);
//
var script$3 = {
name: 'Row',
mixins: [RowMixin],
data: function data() {
return {
start: null
};
},
methods: {
down: function down(ev, index) {
this.start = {
x: ev.pageX,
index: index
};
},
clear: function clear() {
this.start = null;
},
resize: function resize(ev) {
if (this.start) {
var value = ev.pageX - this.start.x;
this.$emit('widthChange', {
value: value,
index: this.start.index
});
this.start.x = ev.pageX;
}
}
},
mounted: function mounted() {
window.addEventListener('mousemove', this.resize);
window.addEventListener('mouseup', this.clear);
},
beforeDestroy: function beforeDestroy() {
window.removeEventListener('mousemove', this.resize);
window.removeEventListener('mouseup', this.clear);
}
};
/* script */
var __vue_script__$3 = script$3;
/* template */
var __vue_render__$3 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', _vm._g({
ref: "row",
staticClass: "row",
attrs: {
"draggable": false
}
}, _vm.$listeners), _vm._l(_vm.heads, function (h, i) {
return _c('item', {
key: i,
staticClass: "th",
style: _vm.assign(h.style, {
width: _vm.cWidth(i)
}),
on: {
"click": function click($event) {
return _vm.$emit('clickTh', {
ev: $event,
th: i
});
},
"contentWidthChange": function contentWidthChange($event) {
return _vm.contentChange($event, i);
}
}
}, [_vm._v("\n " + _vm._s(h.headformatter ? h.headFormatter(h.title) : h.title) + "\n "), _vm._t('th-' + i), _vm._v(" "), _c('div', {
staticClass: "column-resize",
attrs: {
"draggable": false
},
on: {
"mousedown": function mousedown($event) {
return _vm.down($event, i);
},
"click": function click($event) {
$event.stopPropagation();
}
}
})], 2);
}), 1);
};
var __vue_staticRenderFns__$3 = [];
/* style */
var __vue_inject_styles__$3 = undefined;
/* scoped */
var __vue_scope_id__$3 = undefined;
/* module identifier */
var __vue_module_identifier__$3 = undefined;
/* functional template */
var __vue_is_functional_template__$3 = false;
/* style inject */
/* style inject SSR */
var ThRow = normalizeComponent_1({
render: __vue_render__$3,
staticRenderFns: __vue_staticRenderFns__$3
}, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, undefined, undefined);
var script$4 = {
name: 'TableBase',
components: {
VueScrollbar: VueScrollbar,
TdRow: TdRow,
ThRow: ThRow
},
props: {
heads: {
default: function _default() {
return [];
},
type: [Array, Object]
},
data: {
default: function _default() {
return [];
},
type: [Array, Object]
},
headTrStyle: Object,
trStyle: Object,
evenTrStyle: Object,
noHead: Boolean,
scrollbarProps: {
default: function _default() {
return {};
},
type: Object
}
},
data: function data() {
return {
tableSize: {},
contentWidths: [],
tableChangedWidth: 0,
fixedWidth: []
};
},
computed: {
widths: function widths() {
var _this = this;
if (this.contentWidthsInvalid()) return [];
var clientWidth = this.tableSize.clientWidth;
var maxWidths = this.heads.map(function (head, i) {
return Math.max.apply(Math, _toConsumableArray(_this.contentWidths.map(function (c) {
return c[i];
})).concat([0]));
});
var total = maxWidths.reduce(function (pre, len, i) {
return _this.fixedWidth[i] ? pre : pre + len;
}, 0);
var availableWidth = clientWidth - this.fixedWidth.reduce(function (pre, width) {
return pre + width;
}, 0);
return maxWidths.map(function (len, i) {
return _this.fixedWidth[i] || len / total * availableWidth;
});
}
},
watch: {
heads: {
handler: function handler() {
this.initFixedWidth();
},
immediate: true
}
},
methods: {
initFixedWidth: function initFixedWidth() {
var _this2 = this;
if (this.heads) this.fixedWidth = this.heads.map(function (h, i) {
return _this2.fixedWidth[i] || h.width || 0;
});
},
contentWidthsInvalid: function contentWidthsInvalid() {
var _this3 = this;
return [1].concat(_toConsumableArray(this.data || [])).some(function (d, i) {
return !_this3.contentWidths[i];
});
},
sizeChange: function sizeChange() {
var _ref = this.$refs.table || {},
_ref$clientHeight = _ref.clientHeight,
clientHeight = _ref$clientHeight === void 0 ? 0 : _ref$clientHeight,
_ref$clientWidth = _ref.clientWidth,
clientWidth = _ref$clientWidth === void 0 ? 0 : _ref$clientWidth;
this.$set(this.tableSize, 'clientHeight', clientHeight);
this.$set(this.tableSize, 'clientWidth', clientWidth);
},
assign: assign,
contentWidthChange: function contentWidthChange(val, index) {
this.$set(this.contentWidths, index, val);
},
widthChange: function widthChange(_ref2) {
var value = _ref2.value,
index = _ref2.index;
var val = this.widths[index] + value;
if (val > 60) {
this.$set(this.fixedWidth, index, val);
this.tableSize.clientWidth = this.tableSize.clientWidth + value;
this.tableChangedWidth = this.tableSize.clientWidth;
}
}
},
mounted: function mounted() {
this.sizeChange();
window.addEventListener('resize', this.sizeChange);
},
updated: function updated() {
this.sizeChange();
},
beforeDestroy: function beforeDestroy() {
window.removeEventListener('resize', this.sizeChange);
}
};
/* script */
var __vue_script__$4 = script$4;
/* template */
var __vue_render__$4 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
ref: "table",
staticClass: "vue-table table-extend",
style: {
width: _vm.tableChangedWidth ? _vm.tableChangedWidth + 'px' : ''
}
}, [!_vm.noHead ? _c('div', {
staticClass: "thead"
}, [_c('th-row', {
staticClass: "tr",
style: _vm.headTrStyle,
attrs: {
"widths": _vm.widths,
"heads": _vm.heads
},
on: {
"clickTh": function clickTh($event) {
return _vm.$emit('clickTh', $event);
},
"widthChange": _vm.widthChange,
"contentWidthChange": function contentWidthChange($event) {
return _vm.contentWidthChange($event, 0);
}
}
}, [_vm._l(_vm.heads, function (h, i) {
return _vm._t('th-' + i, null, {
"slot": 'th-' + i
});
})], 2)], 1) : _vm._e(), _vm._v(" "), _vm.data && _vm.data.length > 0 ? _c('vue-scrollbar', {
staticClass: "tbody",
attrs: {
"isMobile": _vm.scrollbarProps.isMobile,
"maxHeight": _vm.scrollbarProps.maxHeight || '1000vh',
"marginToWrap": _vm.scrollbarProps.marginToWrap || 2
}
}, _vm._l(_vm.data, function (d, i) {
return _c('td-row', {
key: i,
staticClass: "tr",
style: _vm.assign(_vm.trStyle, i % 2 === 1 ? _vm.evenTrStyle : {}),
attrs: {
"heads": _vm.heads,
"item": d,
"widths": _vm.widths
},
on: {
"click": function click($event) {
return _vm.$emit('clickTr', {
ev: $event,
tr: i
});
},
"clickTd": function clickTd($event) {
_vm.$emit('clickTd', _vm.assign($event, {
tr: i
}));
},
"contentWidthChange": function contentWidthChange($event) {
return _vm.contentWidthChange($event, i + 1);
}
}
}, [_vm._l(_vm.heads, function (h, j) {
return _vm._t('td-' + i + '-' + j, null, {
"slot": 'td-' + j
});
})], 2);
}), 1) : _vm._e()], 1);
};
var __vue_staticRenderFns__$4 = [];
/* style */
var __vue_inject_styles__$4 = undefined;
/* scoped */
var __vue_scope_id__$4 = undefined;
/* module identifier */
var __vue_module_identifier__$4 = undefined;
/* functional template */
var __vue_is_functional_template__$4 = false;
/* style inject */
/* style inject SSR */
var TableExtend = normalizeComponent_1({
render: __vue_render__$4,
staticRenderFns: __vue_staticRenderFns__$4
}, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, undefined, undefined);
export { TableBase, TableExtend };