@xdp/button
Version:
button el-button vue3
249 lines (246 loc) • 7.65 kB
JavaScript
import { ref, computed, onMounted, watch, nextTick, onUnmounted, createVNode, createTextVNode, isVNode } from 'vue';
import { ElDropdown, ElIcon, ElDropdownMenu, ElDropdownItem } from 'element-plus';
import { ArrowDown, CaretBottom } from '@element-plus/icons-vue';
import CipButtonText from '../cip-button-text';
import CipButton from '../cip-button';
import CipButtonPop from '../cip-button-pop';
import { getUsingConfig } from '@xdp/config';
import { useTable } from '@d-render/shared';
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
function _isSlot(s) {
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
const getButtonInfo = (vnode) => {
if (vnode.component) {
const text = vnode.component.slots.default();
const info = __spreadValues(__spreadValues({}, vnode.component.ctx._.props), vnode.component.ctx._.attrs);
const {
onClick = (e) => vnode.component.ctx._.emit("click", e)
} = info;
return __spreadProps(__spreadValues({}, info), {
onClick,
text
});
}
return {};
};
const buildButtonProps = (info, buttonComp) => {
const {
onClick,
type,
showDisabled,
showDisabledButton,
danger,
dangerButton,
needPop,
popTitle,
popMessage,
popPlacement,
popProps,
icon,
disabled
} = info;
const buttonProps = {
type,
disabled,
icon,
onClick,
danger: danger != null ? danger : dangerButton,
showDisabled: showDisabled != null ? showDisabled : showDisabledButton
};
if (needPop) {
buttonProps.needPop = true;
buttonProps.popTitle = popTitle;
buttonProps.popMessage = popMessage;
buttonProps.popPlacement = popPlacement;
buttonProps.popProps = popProps;
buttonProps.buttonComp = buttonComp;
}
return buttonProps;
};
const getButtonComponent = (needPop, buttonComp) => {
if (needPop)
return CipButtonPop;
return buttonComp === "button" ? CipButton : CipButtonText;
};
const RenderComponent = (props) => {
const list = props.buttonList;
let dropDownNode;
let buttonNodeList = list;
if (list.length > props.limit) {
buttonNodeList = list.slice(0, props.limit - 1);
dropDownNode = createVNode(ElDropdown, {
"style": "margin-left: 8px",
"size": props.size
}, {
default: () => props.buttonComp === "button" ? createVNode(CipButton, {
"square": true,
"icon": ArrowDown
}, null) : createVNode(CipButtonText, null, {
default: () => [createTextVNode("\u66F4\u591A "), createVNode(ElIcon, null, {
default: () => [createVNode(CaretBottom, null, null)]
})]
}),
dropdown: () => {
let _slot;
return createVNode(ElDropdownMenu, null, _isSlot(_slot = list.slice(props.limit - 1).map((item) => {
const info = getButtonInfo(item);
const {
needPop,
text,
disabled
} = info;
if (needPop) {
const buttonProps = buildButtonProps(info, props.buttonComp);
return createVNode(ElDropdownItem, {
"disabled": disabled
}, {
default: () => [createVNode(CipButtonPop, buttonProps, _isSlot(text) ? text : {
default: () => [text]
})]
});
}
const {
onClick
} = info;
return createVNode(ElDropdownItem, {
"onClick": disabled ? void 0 : onClick,
"disabled": disabled
}, _isSlot(text) ? text : {
default: () => [text]
});
})) ? _slot : {
default: () => [_slot]
});
}
});
}
const result = buttonNodeList.map((item) => {
const info = getButtonInfo(item);
const {
needPop,
text
} = info;
const ButtonComponent = getButtonComponent(needPop, props.buttonComp);
const buttonProps = buildButtonProps(info, props.buttonComp);
return createVNode(ButtonComponent, buttonProps, _isSlot(text) ? text : {
default: () => [text]
});
});
if (dropDownNode) {
result.push(dropDownNode);
}
return result;
};
var index = {
name: "CipButtonCollapse",
props: {
limit: {
type: Number
},
row: {
type: Object,
required: true
},
buttonComp: {
type: String,
default: "text",
validate: (val) => ["text", "button"].includes(val)
},
showDisabled: {
type: Boolean,
default: void 0
}
},
setup(props, {
slots
}) {
const cipTable = useTable();
const buttonList = ref([]);
const originRef = ref();
const handlerLimit = computed(() => {
return getUsingConfig(props.limit, props.buttonComp === "text" ? 3 : 4);
});
const showDisabledButton = computed(() => {
return getUsingConfig(props.showDisabled, cipTable.showDisabledButton, true);
});
let vnodeList = [];
onMounted(() => {
const unwatch = watch(() => props.row, () => {
nextTick().then(() => collectButtons());
}, {
immediate: true,
deep: true
});
onUnmounted(() => {
console.log("originRef.value", originRef.value);
unwatch();
vnodeList = [];
});
});
const collectButtons = () => {
buttonList.value = [];
vnodeList.forEach((vnode) => getButtons(vnode));
};
const getButtons = (vnode) => {
if (vnode.shapeFlag === 16) {
vnode.children.forEach((v) => getButtons(v));
}
if (vnode.shapeFlag === 17) {
vnode.children.forEach((v) => getButtons(v));
}
if (vnode.shapeFlag === 36) {
const componentName = (vnode.type.name || "").toLowerCase();
if (componentName.indexOf("button") > -1) {
const info = getButtonInfo(vnode);
if (showDisabledButton.value === false && info.disabled) {
console.log("button \u4E0D\u7B26\u5408\u5C55\u793A\u6761\u4EF6");
} else {
buttonList.value.push(vnode);
}
} else {
if (vnode.component) {
const children = vnode.component.subTree.children || [];
children.forEach((v) => getButtons(v));
}
}
}
};
return () => {
var _a;
vnodeList = (_a = slots.default) == null ? void 0 : _a.call(slots);
return createVNode("div", {
"class": "cip-table-handler"
}, [createVNode("div", {
"ref": (el) => {
originRef.value = el;
},
"style": "display: none"
}, [vnodeList]), createVNode(RenderComponent, {
"limit": handlerLimit.value,
"size": cipTable.size,
"buttonList": buttonList.value,
"buttonComp": props.buttonComp
}, null)]);
};
}
};
export { index as default };