tanxin-ui 0.2.0

package/es/cascader-panel/src/cascader-panel.js

@@ -0,0 +1,514 @@
+import { defineComponent, ref, watch, onMounted, computed, createVNode, Transition, withDirectives, vShow, resolveComponent, nextTick } from "vue";
+import { useConfig } from "../../utils/hooks/useConfig.js";
+import { cascaderPanelProps } from "./context.js";
+import { TCheckbox } from "../../checkbox/index.js";
+import "../../utils/components/icons/Checkmark.js";
+import "../../utils/components/icons/CheckmarkCircle.js";
+import "../../utils/components/icons/CheckmarkSharp.js";
+import "../../utils/components/icons/CheckmarkCircleOutline.js";
+import "../../utils/components/icons/AlertCircle.js";
+import "../../utils/components/icons/AlertCircleOutline.js";
+import "../../utils/components/icons/InformationCircle.js";
+import "../../utils/components/icons/InformationCircleOutline.js";
+import "../../utils/components/icons/CloseCircle.js";
+import "../../utils/components/icons/CloseCircleOutline.js";
+import "../../utils/components/icons/HelpCircleSharp.js";
+import "../../utils/components/icons/EyeOffOutline.js";
+import "../../utils/components/icons/EyeOutline.js";
+import LoadingOutlined from "../../utils/components/icons/LoadingOutlined.js";
+import "../../utils/components/icons/Close.js";
+import "../../utils/components/icons/CloseOutline.js";
+import "../../utils/components/icons/ArrowsMaximize.js";
+import "../../utils/components/icons/ArrowsMinimize.js";
+import "../../utils/components/icons/AddOutline.js";
+import "../../utils/components/icons/RemoveOutline.js";
+import "../../utils/components/icons/ChevronUp.js";
+import "../../utils/components/icons/ChevronDown.js";
+import "../../utils/components/icons/ChevronForward.js";
+import "../../utils/components/icons/ChevronLeft24Filled.js";
+import "../../utils/components/icons/ChevronRight24Filled.js";
+import "../../utils/components/icons/ChevronDoubleLeft16Filled.js";
+import "../../utils/components/icons/ChevronDoubleRight16Filled.js";
+import "../../utils/components/icons/CheckmarkOutline.js";
+import "../../utils/components/icons/IosCheckmark.js";
+import "../../utils/components/icons/Empty.js";
+import "../../utils/components/icons/Bars.js";
+import "../../utils/components/icons/ArrowUpCircle.js";
+import "../../utils/components/icons/ArrowUp.js";
+import "../../utils/components/icons/ArrowForward.js";
+import "../../utils/components/icons/TimeOutline.js";
+import "../../utils/components/icons/CalendarClearOutline.js";
+import "../../utils/components/icons/KeyboardArrowLeftRound.js";
+import "../../utils/components/icons/KeyboardArrowRightRound.js";
+import "../../utils/components/icons/KeyboardDoubleArrowLeftRound.js";
+import "../../utils/components/icons/KeyboardDoubleArrowRightRound.js";
+import "../../utils/components/icons/MenuFoldOutlined.js";
+import "../../utils/components/icons/IosArrowDown.js";
+import "../../utils/components/icons/IosArrowBack.js";
+import "../../utils/components/icons/IosArrowForward.js";
+import "../../utils/components/icons/ImageSharp.js";
+import "../../utils/components/icons/Pause.js";
+import "../../utils/components/icons/Refresh.js";
+import "../../utils/components/icons/QuestionCircle24Regular.js";
+import "../../utils/components/icons/CloudUploadOutline.js";
+import "../../utils/components/icons/UploadFileFilled.js";
+import "../../utils/components/icons/EllipsisHorizontal.js";
+import "../../utils/components/icons/ArrowNext24Filled.js";
+import "../../utils/components/icons/ArrowPrevious24Filled.js";
+import "../../utils/components/icons/ArrowDropDownSharp.js";
+import "../../utils/components/icons/ArrowDropUpSharp.js";
+import ArrowForwardIosFilled from "../../utils/components/icons/ArrowForwardIosFilled.js";
+import { getLengthNumber, getLength } from "../../utils/common.js";
+import DropdownTransition from "../../utils/components/transition/dropdown-transition.js";
+import cloneDeep from "lodash-es/cloneDeep";
+import { arrayEquals } from "../../utils/compare.js";
+import { getTransitionGroupProps } from "../../utils/transition.js";
+var CascaderPanel = defineComponent({
+  name: "TCascaderPanel",
+  components: {
+    TCheckbox,
+    LoadingOutlined,
+    ArrowForwardIosFilled,
+    DropdownTransition
+  },
+  inheritAttrs: true,
+  props: cascaderPanelProps,
+  emits: ["update:value", "nodeClicked", "nodeCheckedChange", "nodeLoaded"],
+  setup(props, {
+    emit
+  }) {
+    const {
+      prefixCls
+    } = useConfig("cascader-panel", props);
+    const initSingleValue = () => {
+      if (props.single && checkedValues.value.length > 0)
+        singleValue.value = checkedValues.value[0];
+    };
+    const checkedValues = ref(props.value);
+    const keyword = ref("");
+    const singleValue = ref();
+    const nodeList = ref(props.data);
+    const panelList = ref([]);
+    const expanded = ref(props.expanded);
+    const markedValues = ref([]);
+    const initData = (nodeList2, parentPath) => {
+      traverseData(nodeList2, parentPath, []);
+      expanded.value = [...new Set(expanded.value)];
+      markedValues.value = [...new Set(markedValues.value)];
+      setFatherChecked(nodeList2, markedValues.value);
+    };
+    const traverseData = (nodeList2, parentPath, labelPath) => {
+      nodeList2.forEach((item) => {
+        const path = cloneDeep(parentPath);
+        path.push(item[props.valueKey]);
+        item.keyPath = path;
+        item.indeterminate = false;
+        const itemLabelPath = [...labelPath, item[props.labelKey]];
+        item.labelPath = itemLabelPath.join(" / ");
+        const value = item[props.valueKey];
+        if (checkedValues.value.includes(value)) {
+          markedValues.value.push(...item.keyPath);
+        }
+        if (item.children) {
+          traverseData(item.children, path, itemLabelPath);
+        }
+      });
+    };
+    const addEmptyPanel = () => {
+      const panel = {
+        parentPath: [],
+        index: panelList.value.length,
+        nodeList: [],
+        visible: false
+      };
+      panelList.value.push(panel);
+    };
+    watch(() => props.data, () => {
+      nodeList.value = props.data;
+      initData(nodeList.value, []);
+      const panel = {
+        parentPath: [],
+        index: 0,
+        visible: true,
+        nodeList: nodeList.value
+      };
+      panelList.value = [panel];
+      addEmptyPanel();
+    });
+    watch(() => props.value, () => {
+      if (arrayEquals(props.value, checkedValues.value))
+        return;
+      checkedValues.value = props.value;
+      initSingleValue();
+      markedValues.value = [];
+      initData(nodeList.value, []);
+    }, {
+      deep: true
+    });
+    const initPanel = (nodeList2, parentIndex) => {
+      nodeList2.forEach((node) => {
+        const value = node[props.valueKey];
+        if (expanded.value.includes(value) && node.children) {
+          const panel = {
+            parentPath: node.keyPath,
+            index: ++parentIndex,
+            visible: true,
+            nodeList: node.children
+          };
+          panelList.value[parentIndex] = panel;
+          addEmptyPanel();
+          initPanel(node.children, parentIndex);
+        }
+      });
+    };
+    onMounted(() => {
+      initSingleValue();
+      initData(nodeList.value, []);
+      const panel = {
+        parentPath: [],
+        index: 0,
+        visible: true,
+        nodeList: nodeList.value
+      };
+      panelList.value = [panel];
+      addEmptyPanel();
+      initPanel(nodeList.value, 0);
+    });
+    const showExpandIcon = (item) => {
+      var _a, _b, _c;
+      if (((_a = item.children) == null ? void 0 : _a.length) > 0) {
+        return true;
+      }
+      if (props.loadMethod) {
+        if (!((_b = item.loaded) != null ? _b : false) || ((_c = item.children) == null ? void 0 : _c.length) > 0)
+          return true;
+      }
+      return false;
+    };
+    const shouldLoadData = (item) => {
+      var _a;
+      if (!props.loadMethod)
+        return false;
+      if (((_a = item.children) == null ? void 0 : _a.length) > 0)
+        return false;
+      if (item.loaded)
+        return false;
+      return true;
+    };
+    const handleExpandedChange = (event, item, panelIndex) => {
+      if (event instanceof Event)
+        event.stopPropagation();
+      if (shouldLoadData(item)) {
+        item.loading = true;
+        props.loadMethod(item, (item2, children) => {
+          item2.children = children;
+          item2.loaded = true;
+          item2.loading = false;
+          initData(nodeList.value, []);
+          emit("nodeLoaded", item2, children);
+          nextTick(() => {
+            execExpand(item2, panelIndex);
+          });
+        });
+        return;
+      }
+      execExpand(item, panelIndex);
+    };
+    const execExpand = (item, panelIndex) => {
+      var _a, _b;
+      if (((_b = (_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) != null ? _b : 0) <= 0) {
+        panelList.value[panelIndex + 1].visible = false;
+        return;
+      }
+      const newPanelIndex = panelIndex + 1;
+      const panel = {
+        parentPath: item.keyPath,
+        visible: true,
+        index: newPanelIndex,
+        nodeList: item.children
+      };
+      panelList.value[newPanelIndex] = panel;
+      if (panelList.value.length <= newPanelIndex + 1)
+        addEmptyPanel();
+      const keyPath = item.keyPath;
+      panelList.value.forEach((each, index) => {
+        const shouldShow = each.parentPath.some((x) => keyPath.includes(x));
+        if (!shouldShow && index > 0) {
+          each.visible = false;
+        }
+      });
+    };
+    const checkedChange = (item, checked) => {
+      if (props.checkRelated && !props.single) {
+        setSonChecked(item, checked);
+        const fatherKeyPath = cloneDeep(item.keyPath);
+        fatherKeyPath.pop();
+        setFatherChecked(nodeList.value, fatherKeyPath);
+      }
+      if (props.single) {
+        checkedValues.value = [singleValue.value];
+      }
+      emit("update:value", checkedValues.value);
+      emit("nodeCheckedChange", item, checkedValues.value);
+    };
+    const setFatherChecked = (nodeList2, fatherKeyPath) => {
+      if (!props.checkRelated || props.single)
+        return;
+      const index = nodeList2.findIndex((son) => fatherKeyPath.includes(son[props.valueKey]));
+      if (index >= 0) {
+        if (!nodeList2[index].hasOwnProperty("children"))
+          return;
+        setFatherChecked(nodeList2[index].children, fatherKeyPath);
+        const items = nodeList2[index].children.filter((item) => checkedValues.value.includes(item.id) && !item.indeterminate);
+        const hasChecked = nodeList2[index].children.some((item) => checkedValues.value.includes(item.id) || item.indeterminate);
+        const selectedValue = nodeList2[index][props.valueKey];
+        const selectedIndex = checkedValues.value.indexOf(selectedValue);
+        if (items.length == nodeList2[index].children.length) {
+          if (selectedIndex < 0)
+            checkedValues.value.push(selectedValue);
+          nodeList2[index].indeterminate = false;
+        } else {
+          if (selectedIndex >= 0)
+            checkedValues.value.splice(selectedIndex, 1);
+          if (hasChecked)
+            nodeList2[index].indeterminate = true;
+          else
+            nodeList2[index].indeterminate = false;
+        }
+      }
+    };
+    const setSonChecked = (item, checked) => {
+      if (item.disabled)
+        return;
+      if (item.hasOwnProperty("children")) {
+        item.children.forEach((son) => {
+          setSonChecked(son, checked);
+        });
+        const checkedItems = item.children.filter((son) => checkedValues.value.includes(son.id) && !son.indeterminate);
+        item.indeterminate = checkedItems.length > 0 && checkedItems.length < item.children.length;
+      }
+      const index = checkedValues.value.indexOf(item.id);
+      if (checked) {
+        if (index < 0)
+          checkedValues.value.push(item.id);
+      } else {
+        if (index >= 0)
+          checkedValues.value.splice(index, 1);
+      }
+    };
+    const handleItemClick = (event, item, panelIndex) => {
+      var _a, _b, _c, _d, _e;
+      if (keyword.value == "") {
+        if (!expanded.value.includes(item[props.valueKey]))
+          expanded.value = item.keyPath;
+        handleExpandedChange(event, item, panelIndex);
+      }
+      if (item.disabled)
+        return;
+      if (props.loadMethod && ((_b = (_a = item.children) == null ? void 0 : _a.length) != null ? _b : 0) <= 0 && !((_c = item.loaded) != null ? _c : false))
+        return;
+      const shouldCheck = !props.onlyLeaf || ((_e = (_d = item.children) == null ? void 0 : _d.length) != null ? _e : 0) <= 0;
+      if (props.checkOnClick && shouldCheck) {
+        const value = item[props.valueKey];
+        const index = checkedValues.value.indexOf(value);
+        if (index >= 0) {
+          if (!props.single) {
+            checkedValues.value.splice(index, 1);
+            checkedChange(item, false);
+          } else
+            checkedChange(item, true);
+        } else {
+          if (props.single) {
+            singleValue.value = value;
+            checkedValues.value = [value];
+          } else
+            checkedValues.value.push(value);
+          checkedChange(item, true);
+        }
+      }
+      emit("nodeClicked", item);
+    };
+    const handleCheckedChange = (e, node, panelIndex) => {
+      const checked = checkedValues.value.indexOf(node[props.valueKey]) >= 0;
+      handleExpandedChange(e, node, panelIndex);
+      checkedChange(node, checked);
+    };
+    const filterMethod = computed(() => {
+      if (props.filterMethod)
+        return props.filterMethod;
+      return (keyword2, item) => {
+        if (item[props.labelKey])
+          return item[props.labelKey].indexOf(keyword2) >= 0;
+        return false;
+      };
+    });
+    const traverseDataForFilter = (nodeList2, keyword2) => {
+      const notEmpty = keyword2 != "";
+      nodeList2.forEach((item) => {
+        const visible = filterMethod.value(keyword2, item);
+        if (visible && notEmpty) {
+          const matchedItem = {
+            icon: item.icon,
+            disabled: item.disabled,
+            loaded: item.loaded,
+            visible: true,
+            [props.valueKey]: item[props.valueKey],
+            [props.labelKey]: item[props.labelKey],
+            labelPath: item.labelPath
+          };
+          filterNodeList.value.push(matchedItem);
+        }
+        if (item.children) {
+          traverseDataForFilter(item.children, keyword2);
+        }
+      });
+    };
+    const filterNodeList = ref([]);
+    const filter = (inKeyword) => {
+      keyword.value = inKeyword;
+      filterNodeList.value = [];
+      if (inKeyword != "")
+        traverseDataForFilter(nodeList.value, inKeyword);
+    };
+    const transitionProps = computed(() => {
+      const transitionName = "slide-up";
+      return getTransitionGroupProps(transitionName);
+    });
+    const paddingLeft = getLengthNumber(props.paddingLeft);
+    const getItemStyles = () => {
+      const styles2 = {
+        paddingLeft: `${paddingLeft}px`
+      };
+      if (props.itemHeight)
+        styles2[`height`] = getLength(props.itemHeight);
+      return styles2;
+    };
+    const styles = computed(() => {
+      const styles2 = {};
+      if (props.maxHeight)
+        styles2[`--t-cascader-panel-max-height`] = getLength(props.maxHeight);
+      return styles2;
+    });
+    const isChecked = (node) => {
+      return checkedValues.value.includes(node[props.valueKey]);
+    };
+    const isExpanded = (node) => {
+      return expanded.value.includes(node[props.valueKey]);
+    };
+    const render = () => {
+      const renderArrow = (node) => {
+        var _a;
+        return createVNode("div", {
+          "class": `${prefixCls.value}-node-item-expand`
+        }, [((_a = node.loading) != null ? _a : false) ? createVNode(resolveComponent("t-icon"), {
+          "spin": true
+        }, {
+          default: () => [createVNode(LoadingOutlined, null, null)]
+        }) : showExpandIcon(node) ? createVNode(resolveComponent("t-icon"), null, {
+          default: () => [createVNode(ArrowForwardIosFilled, null, null)]
+        }) : null]);
+      };
+      const renderCheckbox = (node, panelIndex) => {
+        var _a, _b, _c, _d, _e;
+        if (!props.showCheckbox)
+          return;
+        if (props.onlyLeaf && ((_b = (_a = node.children) == null ? void 0 : _a.length) != null ? _b : 0) > 0)
+          return;
+        if (props.loadMethod && ((_d = (_c = node.children) == null ? void 0 : _c.length) != null ? _d : 0) <= 0 && !((_e = node.loaded) != null ? _e : false))
+          return;
+        return createVNode("div", {
+          "class": `${prefixCls.value}-node-item-checkbox`
+        }, [props.single ? createVNode(resolveComponent("t-radio"), {
+          "value": singleValue.value,
+          "onUpdate:value": ($event) => singleValue.value = $event,
+          "itemValue": node[props.valueKey],
+          "indeterminate": node.indeterminate,
+          "key": node[props.valueKey],
+          "disabled": node.disabled,
+          "onChange": (e) => handleCheckedChange(e, node, panelIndex)
+        }, null) : createVNode(resolveComponent("t-checkbox"), {
+          "value": checkedValues.value,
+          "onUpdate:value": ($event) => checkedValues.value = $event,
+          "itemValue": node[props.valueKey],
+          "indeterminate": node.indeterminate,
+          "disabled": node.disabled,
+          "key": node[props.valueKey],
+          "onChange": (e) => handleCheckedChange(e, node, panelIndex)
+        }, null)]);
+      };
+      const renderNode = (node, panelIndex, isFilter) => {
+        var _a, _b;
+        if (!((_a = node.visible) != null ? _a : true))
+          return;
+        return createVNode("div", {
+          "class": `${prefixCls.value}-node`
+        }, [createVNode("div", {
+          "class": [`${prefixCls.value}-node-item`, {
+            [`is-selected`]: isChecked(node),
+            [`is-expanded`]: isExpanded(node),
+            [`is-disabled`]: (_b = node == null ? void 0 : node.disabled) != null ? _b : false
+          }],
+          "tabindex": 0,
+          "onClick": (e) => handleItemClick(e, node, panelIndex),
+          "style": getItemStyles()
+        }, [renderCheckbox(node, panelIndex), node.icon ? createVNode(resolveComponent("t-icon"), {
+          "class": `${prefixCls.value}-node-item-icon`
+        }, {
+          default: () => [node.icon]
+        }) : null, createVNode("div", {
+          "class": `${prefixCls.value}-node-item-label`
+        }, [createVNode("span", null, [isFilter ? node.labelPath : node[props.labelKey]]), node.loaded ? null : createVNode("span", {
+          "class": `is-arrow`
+        }, [isFilter ? null : renderArrow(node)])])])]);
+      };
+      const showBorderRight = (panel) => {
+        if (!panel.visible)
+          return false;
+        return panelList.value[panel.index + 1].visible;
+      };
+      const renderPanel = (panel) => {
+        return createVNode(Transition, transitionProps.value, {
+          default: () => [withDirectives(createVNode("div", {
+            "class": [`${prefixCls.value}`, {
+              [`with-border-right`]: showBorderRight(panel)
+            }],
+            "style": styles.value
+          }, [panel.nodeList.map((node) => {
+            return renderNode(node, panel.index, false);
+          })]), [[vShow, panel.visible]])]
+        });
+      };
+      const promoteElement = createVNode("div", {
+        "class": `empty`
+      }, [props.emptyText]);
+      const panelListElement = panelList.value.map((panel) => {
+        return renderPanel(panel);
+      });
+      const filteredPanelElement = createVNode("div", {
+        "class": `${prefixCls.value}`
+      }, [filterNodeList.value.map((node) => {
+        return renderNode(node, 0, true);
+      })]);
+      if (keyword.value != "") {
+        return createVNode("div", {
+          "class": `${prefixCls.value}-list`
+        }, [filterNodeList.value.length > 0 ? filteredPanelElement : promoteElement]);
+      }
+      return createVNode("div", {
+        "class": `${prefixCls.value}-list`
+      }, [props.data.length > 0 ? panelListElement : promoteElement]);
+    };
+    const getCheckedValues = () => {
+      return checkedValues.value;
+    };
+    return {
+      render,
+      filter,
+      getCheckedValues
+    };
+  },
+  render() {
+    return this.render();
+  }
+});
+export { CascaderPanel as default };

package/es/cascader-panel/src/context.d.ts

@@ -0,0 +1,101 @@
+import type { PropType, ExtractPropTypes, VNode } from 'vue';
+export declare type CascaderPanelNodeType = {
+    children?: Array<CascaderPanelNodeType>;
+    icon?: VNode | (() => VNode);
+    disabled?: boolean;
+    keyPath?: Array<string | number>;
+    indeterminate?: boolean;
+    loading?: boolean;
+    loaded?: boolean;
+    visible?: boolean;
+    labelPath?: string;
+    [x: string]: any;
+};
+export declare type CascaderPanelType = {
+    index: number;
+    parentPath: Array<string | number>;
+    visible: boolean;
+    nodeList: Array<CascaderPanelNodeType>;
+};
+export declare const cascaderPanelProps: {
+    prefixCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    data: {
+        type: PropType<CascaderPanelNodeType[]>;
+        default: () => any[];
+    };
+    paddingLeft: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    itemHeight: import("vue-types").VueTypeDef<string | number>;
+    maxHeight: import("vue-types").VueTypeDef<string | number>;
+    expanded: {
+        type: PropType<(string | number)[]>;
+        default: () => any[];
+    };
+    value: {
+        type: PropType<(string | number)[]>;
+        default: () => any[];
+    };
+    singleExpanded: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    theme: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    valueKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    labelKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    emptyText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    showCheckbox: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    checkOnClick: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    checkRelated: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    single: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    onlyLeaf: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loadMethod: {
+        type: PropType<(node: CascaderPanelNodeType, resolve: (node: CascaderPanelNodeType, children: CascaderPanelNodeType[]) => void) => void>;
+    };
+    filterMethod: {
+        type: PropType<(keyword: string, node: CascaderPanelNodeType) => boolean>;
+    };
+    remoteMethod: {
+        type: PropType<(keyword: string) => void>;
+    };
+};
+export declare type cascaderPanelProps = ExtractPropTypes<typeof cascaderPanelProps>;

package/es/cascader-panel/src/context.js

@@ -0,0 +1,33 @@
+import { PropTypes } from "../../utils/type.js";
+const cascaderPanelProps = {
+  prefixCls: PropTypes.string,
+  data: {
+    type: Array,
+    default: () => []
+  },
+  paddingLeft: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(16),
+  itemHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  expanded: { type: Array, default: () => [] },
+  value: { type: Array, default: () => [] },
+  singleExpanded: PropTypes.bool.def(false),
+  theme: PropTypes.string.def("light"),
+  valueKey: PropTypes.string.def("id"),
+  labelKey: PropTypes.string.def("label"),
+  emptyText: PropTypes.string.def("\u6CA1\u6709\u6570\u636E"),
+  showCheckbox: PropTypes.bool.def(false),
+  checkOnClick: PropTypes.bool.def(false),
+  checkRelated: PropTypes.bool.def(true),
+  single: PropTypes.bool.def(false),
+  onlyLeaf: PropTypes.bool.def(false),
+  loadMethod: {
+    type: Function
+  },
+  filterMethod: {
+    type: Function
+  },
+  remoteMethod: {
+    type: Function
+  }
+};
+export { cascaderPanelProps };