vue-box-overflow/dist/cjs/Overflow.cjs

Headless UI for automatically collapsing boxes when overflow in Vue.

"use strict";
const vue = require("vue");
const useOverflow = require("./useOverflow.cjs");
const Overflow = vue.defineComponent({
  name: "Overflow",
  props: {
    maxLine: {
      type: Number
    },
    component: {
      type: String,
      default: "div"
    }
  },
  setup(props, ctx) {
    const { component, ...options } = props;
    const parentRef = vue.ref(null);
    const idList = [];
    const instance = useOverflow.useOverflow({
      getIdByIndex: (index) => {
        return idList[index];
      },
      ...options,
      getContainer: () => {
        return parentRef.value;
      }
    });
    return () => {
      var _a, _b, _c, _d, _e;
      idList.length = 0;
      let itemIndex = 0;
      const idAttribute = instance.value.options.idAttribute;
      const children = [];
      const prefix = vue.renderSlot(ctx.slots, "prefix");
      if ((_a = prefix.children) == null ? void 0 : _a.length) {
        children.push(vue.createVNode("div", {
          [idAttribute]: "prefix",
          style: vue.unref(instance).getItemStyle("prefix")
        }, [prefix]));
      }
      const defaultSlot = ((_c = (_b = ctx.slots).default) == null ? void 0 : _c.call(_b)) || [];
      children.push(defaultSlot.map((fragment, index) => {
        const children2 = (fragment.children || []).map((child, index2) => {
          var _a2;
          const id = String(((_a2 = child.props) == null ? void 0 : _a2[idAttribute]) || itemIndex++);
          idList.push(id);
          const style = vue.ref(vue.normalizeStyle(vue.unref(instance).getItemStyle(id)));
          return vue.createVNode("div", { key: child.key || index2, style: style.value, [idAttribute]: id }, [child]);
        });
        const key = fragment && fragment.key || `_default${index}`;
        return vue.createVNode(vue.Fragment, { key }, children2);
      }));
      const rest = vue.renderSlot(ctx.slots, "rest", {
        rests: vue.unref(instance).getRests()
      });
      if ((_d = rest.children) == null ? void 0 : _d.length) {
        children.push(vue.createVNode("div", {
          [idAttribute]: "rest",
          style: vue.unref(instance).getRestStyle()
        }, [rest]));
      }
      const suffix = vue.renderSlot(ctx.slots, "suffix");
      if ((_e = suffix.children) == null ? void 0 : _e.length) {
        children.push(
          vue.createVNode("div", {
            [idAttribute]: "suffix",
            style: vue.unref(instance).getItemStyle("suffix")
          }, [suffix])
        );
      }
      return vue.createVNode(component, { ref: parentRef, style: vue.unref(instance).getContainerStyle() }, children);
    };
  }
});
module.exports = Overflow;
//# sourceMappingURL=Overflow.cjs.map