hongluan-business-ui/lib/components/overflow-list/src/index.js

Hongluan Business Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var hongluanUi = require('hongluan-ui');
var util = require('../../../utils/util.js');

const _sfc_main = vue.defineComponent({
  name: "OverflowList",
  props: {
    showCount: {
      type: Number,
      default: 1
    },
    showType: {
      type: String,
      default: "tooltip"
    },
    dropdownProps: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, { slots }) {
    const { prefix } = util.usePrefix();
    const hasMore = vue.ref(true);
    const show = () => {
      hasMore.value = false;
    };
    const hide = () => {
      hasMore.value = true;
    };
    return () => {
      var _a, _b;
      let childDoms = (_b = (_a = slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : [], realDoms = childDoms;
      if (childDoms.length === 1 && /Symbol\(.*\)/.test(childDoms[0].type.toString()) && childDoms[0].children.length) {
        childDoms = childDoms[0].children;
        realDoms = childDoms;
      }
      realDoms = realDoms.filter((rd) => !/Symbol\(.*\)/.test(rd.type.toString()));
      if (realDoms.length <= props.showCount) {
        return vue.h("div", {
          class: `${prefix}-overflow-list`
        }, realDoms);
      } else {
        if (props.showType === "tooltip") {
          const dropMenuLen = realDoms.length - 1, dropMenuDoms = [];
          for (let i = props.showCount; i <= dropMenuLen; i++) {
            dropMenuDoms.push(vue.h(hongluanUi.HlDropdownItem, null, { default: () => realDoms[i] }));
          }
          const dropdown = vue.h(hongluanUi.HlDropdown, { showTimeout: 0, placement: "bottom", class: "m-l-xs", ...props.dropdownProps }, {
            default: () => slots.more ? slots.more({ hasMore }) : vue.h(hongluanUi.HlIcon, { style: "transform:rotate(90deg)" }, { default: () => vue.h(hongluanUi.SystemMore) }),
            dropdown: () => vue.h(hongluanUi.HlDropdownMenu, { class: "overflow-items" }, { default: () => dropMenuDoms })
          });
          return vue.h("div", {
            class: `${prefix}-overflow-list`
          }, [realDoms.slice(0, props.showCount), dropdown]);
        } else {
          const len = realDoms.length - 1, moreItems = [];
          for (let i = props.showCount; i <= len; i++) {
            moreItems.push(vue.withDirectives(vue.h(realDoms[i]), [[vue.vShow, !hasMore.value]]));
          }
          const moreIcon = slots.more ? slots.more({ hasMore: hasMore.value, show, hide }) : vue.h(hongluanUi.HlIcon, {
            style: "transform:rotate(90deg)",
            class: "cursor-pointer",
            onClick: () => {
              hasMore.value = !hasMore.value;
            }
          }, { default: () => vue.h(hongluanUi.SystemMore) });
          return vue.h("div", {
            class: `${prefix}-overflow-list`
          }, [realDoms.slice(0, props.showCount), ...moreItems, moreIcon]);
        }
      }
    };
  }
});

exports["default"] = _sfc_main;
//# sourceMappingURL=index.js.map