vxe-table-demonic
Version:
一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...
235 lines (234 loc) • 9.86 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _xeUtils = _interopRequireWildcard(require("xe-utils"));
var _conf = _interopRequireDefault(require("../../v-x-e-table/src/conf"));
var _utils = require("../../tools/utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var _default = (0, _vue.defineComponent)({
name: 'VxeCard',
props: {
isCollapse: Boolean,
loading: Boolean,
round: {
type: [Boolean, String, Number],
default: function () {
return _conf.default.card.round;
}
},
width: [String, Number],
rotatingHeight: [String, Number],
shadow: {
type: Boolean,
default: function () {
return _conf.default.card.shadow;
}
},
transform: [Boolean, String],
title: String,
hoverEffect: String,
bordered: {
type: Boolean,
default: function () {
return _conf.default.card.bordered;
}
},
rotateMode: {
type: String,
default: 'horizontal'
}
},
emits: ['rotate', 'hover', 'collapse', 'expand', 'update:is-collapse'],
setup: function (props, context) {
var slots = context.slots,
emit = context.emit;
var xID = _xeUtils.default.uniqueId();
var reactData = (0, _vue.reactive)({
inited: false,
isCollapse: !!props.isCollapse,
tempExpand: false
});
var refBox = (0, _vue.ref)();
var refElem = (0, _vue.ref)();
var refBody = (0, _vue.ref)();
var refHeader = (0, _vue.ref)();
var refFooter = (0, _vue.ref)();
var refFront = (0, _vue.ref)();
var refBack = (0, _vue.ref)();
(0, _vue.watchEffect)(function () {
reactData.isCollapse = !!props.isCollapse;
});
var refMaps = {
refElem: refElem
};
var $vxcard = {
xID: xID,
props: props,
context: context,
reactData: reactData,
getRefMaps: function () {
return refMaps;
}
};
var cardMethods = {};
var getCollapseIf = function () {
return reactData.isCollapse;
};
var toggleCollapse = function () {
var isCollapse = !reactData.isCollapse;
reactData.isCollapse = isCollapse;
emit('update:is-collapse', isCollapse);
emit(isCollapse ? 'collapse' : 'expand');
return (0, _vue.nextTick)();
};
var perhapsExpand = function () {
if (props.transform && reactData.isCollapse) {
expand();
}
};
var expand = function () {
if (reactData.isCollapse) {
return toggleCollapse();
}
return (0, _vue.nextTick)();
};
var handleHoverCover = function () {
if (props.transform === 'hover' || props.transform === 'click-hover') {
reactData.tempExpand = true;
}
};
var handleCardLeave = function () {
if (props.transform === 'hover' || props.transform === 'click-hover') {
reactData.tempExpand = false;
}
};
var mouseInOut = (0, _utils.multiDebounce)([handleHoverCover, handleCardLeave], 200);
var collapse = function () {
if (!reactData.isCollapse) {
return toggleCollapse();
}
return (0, _vue.nextTick)();
};
var handleHeaderClick = function (event) {
event.stopPropagation();
if (props.transform === true || props.transform === 'click') {
emit('update:is-collapse', true);
} else if (props.transform === 'click-hover') {
emit('update:is-collapse', !reactData.isCollapse);
}
return (0, _vue.nextTick)();
};
cardMethods = {
dispatchEvent: function (type, params, evnt) {
emit(type, Object.assign({
$card: $vxcard,
$event: evnt
}, params));
},
getCollapseIf: getCollapseIf,
toggleCollapse: toggleCollapse,
expand: expand,
collapse: collapse
};
Object.assign($vxcard, cardMethods);
var dynamicWrapperWidth = (0, _vue.computed)(function () {
var styleWidthRegex = /^\d+(\.\d+)?(px|%|em|rem|pt)?$/i;
var pureNumberRegex = /^\d+$/;
return (0, _xeUtils.isNumber)(props.width) || (0, _xeUtils.isString)(props.width) && pureNumberRegex.test(props.width) ? "".concat(props.width, "px") : (0, _xeUtils.isString)(props.width) && styleWidthRegex.test(props.width) ? props.width : undefined;
});
var dynamicRotateHeight = (0, _vue.computed)(function () {
var styleHeightRegex = /^\d+(\.\d+)?(px|em|rem|pt)?$/i;
var pureNumberRegex = /^\d+$/;
return (0, _xeUtils.isNumber)(props.rotatingHeight) || (0, _xeUtils.isString)(props.rotatingHeight) && pureNumberRegex.test(props.rotatingHeight) ? "".concat(props.rotatingHeight, "px") : (0, _xeUtils.isString)(props.rotatingHeight) && styleHeightRegex.test(props.rotatingHeight) ? props.rotatingHeight : undefined;
});
var renderCardHeader = function () {
var _a, _b;
return (0, _vue.h)('div', {
ref: refHeader,
class: 'vxe-card-header',
onClick: handleHeaderClick
}, [(_b = (_a = slots.header) === null || _a === void 0 ? void 0 : _a.call(slots, {
title: props.title
})) !== null && _b !== void 0 ? _b : (0, _vue.h)('span', {
class: 'vxe-card-header--title'
}, (0, _utils.getFuncText)(props.title))]);
};
var renderCardFront = function () {
return (0, _vue.h)('div', {
ref: refFront,
class: ['vxe-card', 'vxe-card-rotating-front', isCol.value ? 'vxe-card-cover vxe-card-cover--circle' : {
'vxe-card--shadow': props.shadow,
'vxe-card--press': props.hoverEffect === 'press',
'vxe-card--scale': props.hoverEffect === 'scale'
}]
}, [slots.header || props.title ? renderCardHeader() : null, renderCardBody(), renderCardFooter()]);
};
var renderCardBack = function () {
var _a, _b, _c, _d;
return (0, _vue.h)('div', {
ref: refBack,
class: ['vxe-card', 'vxe-card-rotating-back', isCol.value ? 'vxe-card-cover vxe-card-cover--circle' : {
'vxe-card--shadow': props.shadow,
'vxe-card--press': props.hoverEffect === 'press',
'vxe-card--scale': props.hoverEffect === 'scale'
}]
}, [(0, _vue.h)('div', {
class: 'vxe-card-body'
}, [(_d = (_b = (_a = slots.back) === null || _a === void 0 ? void 0 : _a.call(slots)) !== null && _b !== void 0 ? _b : (_c = slots.default) === null || _c === void 0 ? void 0 : _c.call(slots)) !== null && _d !== void 0 ? _d : ''])]);
};
var renderCardBody = function () {
var _a;
return (0, _vue.h)('div', {
ref: refBody,
class: 'vxe-card-body'
}, [(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)]);
};
var renderCardFooter = function () {
var _a;
return slots.footer ? (0, _vue.h)('div', {
ref: refFooter,
class: 'vxe-card-footer'
}, [(_a = slots.footer) === null || _a === void 0 ? void 0 : _a.call(slots)]) : null;
};
var isCol = (0, _vue.computed)(function () {
return reactData.isCollapse && !reactData.tempExpand && props.transform;
});
var renderVN = function () {
return props.hoverEffect === 'rotate' ? (0, _vue.h)('div', {
ref: refBox,
class: ['vxe-card-rotating-box', "vxe-card--rotating-".concat(props.rotateMode)],
style: {
width: dynamicWrapperWidth.value,
height: props.rotateMode !== 'diagonal' ? dynamicRotateHeight.value : undefined
}
}, [renderCardFront(), renderCardBack()]) : (0, _vue.h)('div', {
ref: refElem,
class: ['vxe-card', isCol.value ? 'vxe-card-cover vxe-card-cover--circle' : {
'vxe-card--shadow': props.shadow,
'vxe-card--press': props.hoverEffect === 'press',
'vxe-card--scale': props.hoverEffect === 'scale'
}],
style: isCol.value ? null : {
width: dynamicWrapperWidth.value,
borderRadius: props.round === false || props.round === undefined ? 'unset' : props.round === true ? '5px' : (0, _xeUtils.isNumber)(props.round) ? "".concat(props.round, "px") : props.round
},
onClick: perhapsExpand,
onMouseover: mouseInOut.handleHoverCover,
onMouseout: mouseInOut.handleCardLeave
}, isCol.value ? (0, _vue.h)('span', {
class: 'vxe-cover--content'
}, (0, _utils.getFuncText)(props.title)) : [slots.header || props.title ? renderCardHeader() : null, renderCardBody(), renderCardFooter()]);
};
$vxcard.renderVN = renderVN;
return $vxcard;
},
render: function () {
return this.renderVN();
}
});
exports.default = _default;