winbox-ui-next
Version:
We Design Vue 2.0: A Vue.js 3 UI Library
100 lines (99 loc) • 3.3 kB
JavaScript
import { defineComponent, createVNode, TransitionGroup, isVNode } from "vue";
import CascaderOption from "./cascader-option.js";
import { getPrefixCls } from "../_utils/global-config.js";
import Empty from "../empty/index.js";
import Spin from "../spin/index.js";
import Scrollbar from "../scrollbar/index.js";
function _isSlot(s) {
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
var BaseCascaderPanel = defineComponent({
name: "BaseCascaderPanel",
props: {
displayColumns: {
type: Array,
required: true
},
selectedPath: {
type: Array,
required: true
},
activeKey: String,
totalLevel: {
type: Number,
required: true
},
multiple: Boolean,
checkStrictly: Boolean,
loading: Boolean,
dropdown: Boolean
},
setup(props, {
slots
}) {
const prefixCls = getPrefixCls("cascader");
const renderEmpty = () => {
var _a, _b;
return (_b = (_a = slots.empty) == null ? void 0 : _a.call(slots)) != null ? _b : createVNode(Empty, null, null);
};
const renderColumn = (column, level = 0) => {
return createVNode("div", {
"class": `${prefixCls}-panel-column`,
"key": `column-${level}`,
"style": {
zIndex: props.totalLevel - level
}
}, [createVNode(Scrollbar, {
"class": `${prefixCls}-column-content`
}, {
default: () => [column.length === 0 ? createVNode("div", {
"class": `${prefixCls}-list-empty`
}, [renderEmpty()]) : createVNode("ul", {
"role": "menu",
"class": [`${prefixCls}-list`, {
[`${prefixCls}-list-multiple`]: Boolean(props == null ? void 0 : props.multiple),
[`${prefixCls}-list-strictly`]: Boolean(props == null ? void 0 : props.checkStrictly)
}]
}, [column.map((item) => {
return createVNode(CascaderOption, {
"key": item.key,
"option": item,
"active": props.selectedPath.includes(item.key) || item.key === props.activeKey,
"multiple": props.multiple,
"checkStrictly": props.checkStrictly
}, null);
})])]
})]);
};
const renderContent = () => {
if (props.loading) {
return createVNode("div", {
"key": "panel-column-loading",
"class": [`${prefixCls}-panel-column`, `${prefixCls}-panel-column-loading`]
}, [createVNode(Spin, null, null)]);
}
if (props.displayColumns.length === 0) {
return createVNode("div", {
"key": "panel-column-empty",
"class": `${prefixCls}-panel-column`
}, [createVNode("div", {
"class": `${prefixCls}-list-empty`
}, [renderEmpty()])]);
}
return props.displayColumns.map((column, index) => renderColumn(column, index));
};
return () => {
let _slot;
return createVNode(TransitionGroup, {
"tag": "div",
"name": "cascader-slide",
"class": [`${prefixCls}-panel`, {
[`${prefixCls}-dropdown-panel`]: props.dropdown
}]
}, _isSlot(_slot = renderContent()) ? _slot : {
default: () => [_slot]
});
};
}
});
export { BaseCascaderPanel as default };