wetrade-design
Version:
一款多语言支持Vue3的UI框架
204 lines (203 loc) • 9.01 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
import { initDefaultProps } from '../_util/props-util';
import { collapseConditionProps } from './commonProps';
import { ref, defineComponent, watch, onMounted } from 'vue';
import classNames from '../_util/classNames';
import useConfigInject from '../_util/hooks/useConfigInject';
import Icon from '../icon';
import Button from '../button';
import ResizeObserver from '../vc-resize-observer';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import isValid from '../_util/isValid';
export { collapseConditionProps };
export default defineComponent({
compatConfig: {
MODE: 3
},
name: 'WdCollapseCondition',
inheritAttrs: false,
props: initDefaultProps(collapseConditionProps(), {
open: false
}),
slots: ['suffixButton'],
setup: function setup(props, _ref) {
var attrs = _ref.attrs,
slots = _ref.slots,
emit = _ref.emit;
var RenderConditionRef = ref();
var RenderContentRef = ref();
var RenderExpandRef = ref();
var RenderButtonRef = ref();
var _useConfigInject = useConfigInject('collapse-condition', props),
prefixCls = _useConfigInject.prefixCls;
var expandNodes = ref([]);
var expandActive = ref(false);
var getItems = function getItems() {
var _slots$default;
return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
};
onMounted(function () {
initActive();
});
watch(function () {
return props.open;
}, function (val) {
RenderContentRef.value.style.height = val ? 'auto' : '32px';
});
watch(function () {
return getItems();
}, function () {
initActive();
}, {
flush: 'post' // https://cn.vuejs.org/guide/essentials/watchers.html#callback-flush-timing
});
var initActive = function initActive() {
var vnodes = getItems();
var itemVnodes = vnodes.filter(function (item) {
var _item$children;
return (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.default;
});
var renderConditionRect = RenderConditionRef.value.getBoundingClientRect();
var renderButtonRect = RenderButtonRef.value.getBoundingClientRect();
var renderExpandRect = RenderExpandRef.value.getBoundingClientRect();
var suffixWidth = renderButtonRect.width + renderExpandRect.width;
var contentMaxWidth = renderConditionRect.width - suffixWidth;
var totalWidth = 0;
expandActive.value = false;
Array.prototype.forEach.call(itemVnodes, function (item, i) {
var childrenNode = RenderContentRef.value.children[i];
var _childrenNode$getBoun = childrenNode.getBoundingClientRect(),
width = _childrenNode$getBoun.width;
totalWidth += width;
if (totalWidth > contentMaxWidth) {
if (Array.isArray(item.props.value)) {
expandActive.value = item.props.value.length > 0 || expandActive.value;
} else if (Object.prototype.toString.call(item.props.value) === '[object Object]') {
expandActive.value = Object.keys(item.props.value).length > 0 || expandActive.value;
} else if (isValid(item.props.value)) {
expandActive.value = isValid(item.props.value) || expandActive.value;
}
}
});
if (expandActive.value) {
emit('update:open', true);
}
};
var onClick = function onClick() {
var open = props.open;
emit('update:open', !open);
};
var renderExpand = function renderExpand(locale) {
var open = props.open;
return _createVNode("div", {
"ref": RenderExpandRef,
"class": "".concat(prefixCls.value, "-expand")
}, [_createVNode(Button, {
"type": expandActive.value ? 'link' : 'text',
"onClick": onClick
}, {
default: function _default() {
return [_createVNode("span", null, [open ? locale.collaspe : locale.expand]), _createVNode(Icon, {
"iconClass": open ? 'wd-icon-direction_up' : 'wd-icon-direction_down'
}, null)];
}
})]);
};
var renderButton = function renderButton() {
var _props$suffixButton = props.suffixButton,
suffixButton = _props$suffixButton === void 0 ? slots === null || slots === void 0 ? void 0 : slots.suffixButton : _props$suffixButton;
var items = getItems();
var vnodes = items.filter(function (item) {
var _item$children2;
return (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.default;
});
var itemLen = vnodes === null || vnodes === void 0 ? void 0 : vnodes.length;
var button = suffixButton && itemLen > 1 ? suffixButton() : null;
return _withDirectives(_createVNode("div", {
"ref": RenderButtonRef,
"class": "".concat(prefixCls.value, "-button")
}, [button]), [[_vShow, !!button]]);
};
var handleResize = function handleResize(size) {
if (!RenderButtonRef.value || !RenderExpandRef.value) return;
var renderButtonRect = RenderButtonRef.value.getBoundingClientRect();
var renderExpandRect = RenderExpandRef.value.getBoundingClientRect();
var suffixWidth = renderButtonRect.width + renderExpandRect.width;
var contentMaxWidth = size.width - suffixWidth;
RenderContentRef.value.style.maxWidth = contentMaxWidth + 'px';
var totalWidth = 0;
expandActive.value = false;
var items = getItems();
var vnodes = items.filter(function (item) {
var _item$children3;
return (_item$children3 = item.children) === null || _item$children3 === void 0 ? void 0 : _item$children3.default;
});
expandNodes.value = [];
Array.prototype.forEach.call(vnodes, function (item, i) {
var childrenNode = RenderContentRef.value.children[i];
var _childrenNode$getBoun2 = childrenNode.getBoundingClientRect(),
width = _childrenNode$getBoun2.width;
totalWidth += width;
if (totalWidth > contentMaxWidth) {
expandNodes.value.push(childrenNode);
childrenNode.classList.remove("".concat(prefixCls.value, "-panel-item-normal"));
childrenNode.classList.add("".concat(prefixCls.value, "-panel-item-expand"));
childrenNode.style.visibility = 'hidden';
if (Array.isArray(item.props.value)) {
expandActive.value = item.props.value.length > 0 || expandActive.value;
} else if (Object.prototype.toString.call(item.props.value) === '[object Object]') {
expandActive.value = Object.keys(item.props.value).length > 0 || expandActive.value;
} else if (isValid(item.props.value)) {
expandActive.value = isValid(item.props.value) || expandActive.value;
}
} else {
childrenNode.classList.remove("".concat(prefixCls.value, "-panel-item-expand"));
childrenNode.classList.add("".concat(prefixCls.value, "-panel-item-normal"));
childrenNode.style.visibility = 'visible';
}
if (props.open) {
childrenNode.style.visibility = 'visible';
}
});
var normalNodes = RenderContentRef.value.querySelectorAll(".".concat(prefixCls.value, "-panel-item-normal"));
var width = Array.prototype.reduce.call(normalNodes, function (prev, cur) {
return prev + cur.offsetWidth;
}, 0);
RenderContentRef.value.style.width = width + 'px';
if (expandNodes.value.length > 0) {
RenderExpandRef.value.style.visibility = 'visible';
} else {
RenderExpandRef.value.style.visibility = 'hidden';
}
};
return function () {
var _classNames;
var open = props.open;
var collapseClassName = classNames((_classNames = {}, _defineProperty(_classNames, prefixCls.value, true), _defineProperty(_classNames, "".concat(prefixCls.value, "-open"), open), _classNames));
var contentStyle = {
height: open ? 'auto' : '32px'
};
return _createVNode(LocaleReceiver, {
"componentName": "CollaspeCondition",
"children": function children(locale) {
return _createVNode(ResizeObserver, {
"onResize": handleResize
}, {
default: function _default() {
return [_createVNode("div", {
"ref": RenderConditionRef,
"class": collapseClassName,
"style": attrs.style
}, [_createVNode("div", {
"ref": RenderContentRef,
"class": "".concat(prefixCls.value, "-content"),
"style": contentStyle
}, [getItems()]), renderButton(), renderExpand(locale)])];
}
});
}
}, null);
};
}
});