hongluan-business-ui/es/components/overflow-list/src/index.mjs

Hongluan Business Component Library for Vue 3

import { defineComponent, ref, h, withDirectives, vShow } from 'vue';
import { HlDropdownItem, HlDropdown, HlIcon, SystemMore, HlDropdownMenu } from 'hongluan-ui';
import { usePrefix } from '../../../utils/util.mjs';

const _sfc_main = defineComponent({
  name: "OverflowList",
  props: {
    showCount: {
      type: Number,
      default: 1
    },
    showType: {
      type: String,
      default: "tooltip"
    },
    dropdownProps: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, { slots }) {
    const { prefix } = usePrefix();
    const hasMore = 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 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(h(HlDropdownItem, null, { default: () => realDoms[i] }));
          }
          const dropdown = h(HlDropdown, { showTimeout: 0, placement: "bottom", class: "m-l-xs", ...props.dropdownProps }, {
            default: () => slots.more ? slots.more({ hasMore }) : h(HlIcon, { style: "transform:rotate(90deg)" }, { default: () => h(SystemMore) }),
            dropdown: () => h(HlDropdownMenu, { class: "overflow-items" }, { default: () => dropMenuDoms })
          });
          return 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(withDirectives(h(realDoms[i]), [[vShow, !hasMore.value]]));
          }
          const moreIcon = slots.more ? slots.more({ hasMore: hasMore.value, show, hide }) : h(HlIcon, {
            style: "transform:rotate(90deg)",
            class: "cursor-pointer",
            onClick: () => {
              hasMore.value = !hasMore.value;
            }
          }, { default: () => h(SystemMore) });
          return h("div", {
            class: `${prefix}-overflow-list`
          }, [realDoms.slice(0, props.showCount), ...moreItems, moreIcon]);
        }
      }
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=index.mjs.map