@fesjs/fes-design
Version:
fes-design for PC
161 lines (157 loc) • 6.86 kB
JavaScript
import { defineComponent, inject, getCurrentInstance, onBeforeMount, isVNode, onBeforeUnmount, computed, createVNode } from 'vue';
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import { isNil } from 'lodash-es';
import getPrefixCls from '../_util/getPrefixCls';
import { DESCRIPTIONS_PROVIDE_KEY, DESCRIPTIONS_PREFIX_CLASS, DESCRIPTIONS_ITEM_DEFAULT_SPAN } from './constants';
import { descriptionsItemProps } from './props';
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const prefixCls = getPrefixCls('descriptions-item');
const COMPONENT_NAME = 'FDescriptionsItem';
var descriptionsItem = defineComponent({
name: COMPONENT_NAME,
props: descriptionsItemProps,
setup(props, _ref) {
let {
slots
} = _ref;
const {
parentProps,
addItem,
removeItem,
items
} = inject(DESCRIPTIONS_PROVIDE_KEY);
// register Item component
const instance = getCurrentInstance();
onBeforeMount(() => {
var _parentChildren$filte, _parentChildren$filte2;
// 父组件结构变动，需相应调整此处查找逻辑
const parentChildren = instance.parent.subTree.children;
if (!Array.isArray(parentChildren)) {
return;
}
const bodyVNodeChildren = (_parentChildren$filte = (_parentChildren$filte2 = parentChildren.filter(isVNode).find(c => {
var _c$props;
return (_c$props = c.props) === null || _c$props === void 0 || (_c$props = _c$props.class) === null || _c$props === void 0 ? void 0 : _c$props.includes(`${DESCRIPTIONS_PREFIX_CLASS}-body`);
})) === null || _parentChildren$filte2 === void 0 ? void 0 : _parentChildren$filte2.children) !== null && _parentChildren$filte !== void 0 ? _parentChildren$filte : [];
if (!Array.isArray(bodyVNodeChildren) || !isVNode(bodyVNodeChildren[0]) || !Array.isArray(bodyVNodeChildren[0].children)) {
return;
}
const index = bodyVNodeChildren[0].children.findIndex(itemVNode => {
var _itemVNode$component;
if (!isVNode(itemVNode)) {
return false;
}
return ((_itemVNode$component = itemVNode.component) === null || _itemVNode$component === void 0 ? void 0 : _itemVNode$component.uid) === instance.uid;
});
if (index === -1) {
return;
}
addItem({
id: instance.uid,
index,
props,
slots
});
});
onBeforeUnmount(() => {
removeItem(instance.uid);
});
const isLastItem = computed(() => {
var _items$value;
return ((_items$value = items.value[items.value.length - 1]) === null || _items$value === void 0 ? void 0 : _items$value.id) === instance.uid;
});
const span = computed(() => {
let span;
const column = parentProps.value.column;
if (isLastItem.value) {
if (isNil(props.span)) {
const restItemsSpanSum = items.value.reduce((sum, _ref2, index) => {
var _props$span;
let {
props
} = _ref2;
if (index === items.value.length - 1) {
return sum;
}
return sum + ((_props$span = props.span) !== null && _props$span !== void 0 ? _props$span : DESCRIPTIONS_ITEM_DEFAULT_SPAN);
}, 0);
let resultSpanSum;
if (restItemsSpanSum % column === 0) {
resultSpanSum = (restItemsSpanSum / column + 1) * column;
} else {
resultSpanSum = Math.ceil(restItemsSpanSum / column) * column;
}
span = resultSpanSum - restItemsSpanSum;
} else {
span = props.span;
}
} else {
var _props$span2;
span = (_props$span2 = props.span) !== null && _props$span2 !== void 0 ? _props$span2 : DESCRIPTIONS_ITEM_DEFAULT_SPAN;
}
if (span > column) {
span = column;
}
return span;
});
const style = computed(() => {
const flexDirection = parentProps.value.labelPlacement === 'left' ? 'row' : 'column';
return {
'display': 'flex',
'flex-direction': flexDirection,
'grid-column-start': `span ${span.value}`
};
});
const innerLabelStyle = computed(() => {
let appendStyle = {
textAlign: parentProps.value.labelAlign
};
if (parentProps.value.bordered && parentProps.value.labelPlacement === 'left') {
appendStyle = _objectSpread(_objectSpread({}, appendStyle), {}, {
flexBasis: `${1 / (span.value * 2) * 100}%`
});
}
return [parentProps.value.labelStyle, props.labelStyle, appendStyle].filter(Boolean);
});
const innerContentStyle = computed(() => {
let appendStyle = {};
if (parentProps.value.bordered && parentProps.value.labelPlacement === 'left') {
appendStyle = _objectSpread(_objectSpread({}, appendStyle), {}, {
flexBasis: `${100 - 1 / (span.value * 2) * 100}%`
});
}
return [parentProps.value.contentStyle, props.contentStyle, appendStyle].filter(Boolean);
});
const renderLabel = () => {
if (slots.label) {
return slots.label();
}
if (props.label) {
return props.label;
}
return null;
};
const renderSeparator = () => {
if (parentProps.value.labelPlacement === 'left' && !parentProps.value.bordered) {
return createVNode("span", {
"class": `${prefixCls}-separator`
}, [parentProps.value.separator]);
}
return null;
};
return () => {
var _slots$default;
return createVNode("div", {
"style": style.value
}, [createVNode("label", {
"class": [`${prefixCls}-label`, parentProps.value.labelPlacement === 'top' && 'is-top', parentProps.value.bordered && 'is-bordered'],
"style": innerLabelStyle.value
}, [renderLabel()]), renderSeparator(), createVNode("span", {
"class": [`${prefixCls}-content`, parentProps.value.bordered && 'is-bordered'],
"style": innerContentStyle.value
}, [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)])]);
};
}
});
export { descriptionsItem as default };