winbox-ui-next/lib/cascader/base-cascader-panel.js

We Design Vue 2.0: A Vue.js 3 UI Library

"use strict";
var vue = require("vue");
var cascaderOption = require("./cascader-option.js");
var globalConfig = require("../_utils/global-config.js");
var index$1 = require("../empty/index.js");
var index = require("../spin/index.js");
var index$2 = require("../scrollbar/index.js");
function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
}
var BaseCascaderPanel = vue.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 = globalConfig.getPrefixCls("cascader");
    const renderEmpty = () => {
      var _a, _b;
      return (_b = (_a = slots.empty) == null ? void 0 : _a.call(slots)) != null ? _b : vue.createVNode(index$1, null, null);
    };
    const renderColumn = (column, level = 0) => {
      return vue.createVNode("div", {
        "class": `${prefixCls}-panel-column`,
        "key": `column-${level}`,
        "style": {
          zIndex: props.totalLevel - level
        }
      }, [vue.createVNode(index$2, {
        "class": `${prefixCls}-column-content`
      }, {
        default: () => [column.length === 0 ? vue.createVNode("div", {
          "class": `${prefixCls}-list-empty`
        }, [renderEmpty()]) : vue.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 vue.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 vue.createVNode("div", {
          "key": "panel-column-loading",
          "class": [`${prefixCls}-panel-column`, `${prefixCls}-panel-column-loading`]
        }, [vue.createVNode(index, null, null)]);
      }
      if (props.displayColumns.length === 0) {
        return vue.createVNode("div", {
          "key": "panel-column-empty",
          "class": `${prefixCls}-panel-column`
        }, [vue.createVNode("div", {
          "class": `${prefixCls}-list-empty`
        }, [renderEmpty()])]);
      }
      return props.displayColumns.map((column, index2) => renderColumn(column, index2));
    };
    return () => {
      let _slot;
      return vue.createVNode(vue.TransitionGroup, {
        "tag": "div",
        "name": "cascader-slide",
        "class": [`${prefixCls}-panel`, {
          [`${prefixCls}-dropdown-panel`]: props.dropdown
        }]
      }, _isSlot(_slot = renderContent()) ? _slot : {
        default: () => [_slot]
      });
    };
  }
});
module.exports = BaseCascaderPanel;