yanzhen-design-vue/lib/components/list/src/use-list.cjs

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const core = require("@vueuse/core");
const utils = require("@yanzhen-libs/utils");
const lodashEs = require("lodash-es");
const utilsVue = require("@yanzhen-libs/utils-vue");
const list = require("./list.cjs");
const { ns } = list.listOptions;
function useList(props, emit) {
  const $attrs = vue.useAttrs();
  const $slots = vue.useSlots();
  const refs = vue.toRefs(props);
  const watcher = utilsVue.createWatcher();
  const _dataSource = vue.computed(() => {
    return Array.isArray(props.dataSource) ? props.dataSource : [];
  });
  const _ref = vue.ref();
  const wrapClass = vue.computed(() => {
    return vue.mergeProps(
      {
        class: [ns.b(), ns.e(vue.unref(refs.mode))]
      },
      {
        class: $attrs.class
      },
      {
        class: props.class
      }
    ).class;
  });
  const _loading = core.useVModel(props, "loading", emit);
  const loading = vue.ref(false);
  const [DefineEmptyTemplate, ReusableEmptyTemplate] = core.createReusableTemplate();
  const [DefineItemTemplate, ReusableItemTemplate] = core.createReusableTemplate();
  watcher.set("loading", {
    source: () => vue.unref(_loading),
    handler: (value, oldValue) => {
      if (value === oldValue) return;
      loading.value = lodashEs.isBoolean(value) ? value : false;
    },
    immediate: true,
    debounce: 0
  });
  const _parentEl = core.useParentElement();
  const _boxRef = vue.ref();
  const _mainRef = vue.ref();
  const wrapHeight = vue.ref(utils.isNumeral(props.height) ? `${props.height}px` : props.height);
  const wrapStyle = vue.computed(() => {
    return vue.mergeProps(
      {
        style: props.style
      },
      {
        style: {
          height: vue.unref(wrapHeight)
        }
      }
    ).style;
  });
  const _mainStyle = vue.ref({});
  const mainHeight = vue.ref();
  const observers = [];
  const observer = core.useResizeObserver(_mainRef, (entries) => {
    const entry = entries[0];
    const { height } = entry.contentRect;
    vue.unref(_mainStyle).height = `${height}px`;
    mainHeight.value = height;
  });
  observers.push(observer);
  if (utils.isEmptyValue(props.height)) {
    const observer2 = core.useResizeObserver(_parentEl, (entries) => {
      const entry = entries[0];
      const { height } = entry.contentRect;
      wrapHeight.value = `${height}px`;
      handleSlotsStyle();
    });
    observers.push(observer2);
  }
  const _headerRef = vue.ref();
  const _footerRef = vue.ref();
  const stylesRefs = {
    header: _headerRef,
    footer: _footerRef
  };
  const styles = vue.ref({
    header: { height: "46px" },
    footer: { height: 0 }
  });
  function handleElHeightStyle(el2, d = 50) {
    var _a;
    let height = 0;
    const children = [...((_a = vue.unref(el2)) == null ? void 0 : _a.children) ?? []];
    if (utils.isArray(children)) {
      for (const el3 of children) {
        height += el3 == null ? void 0 : el3.clientHeight;
      }
    }
    return height > 0 ? height : d;
  }
  function handleSlotsStyle() {
    for (const [k, fun] of Object.entries($slots)) {
      const ref2 = vue.unref(stylesRefs[k]);
      const VNode = fun == null ? void 0 : fun({});
      if (!VNode) {
        vue.unref(styles)[k].display = "none";
      } else if (ref2) {
        vue.unref(styles)[k].height = `${handleElHeightStyle(ref2)}px`;
      }
    }
  }
  const _itemRef = vue.ref();
  const virtualOptions = vue.computed(() => {
    var _a;
    const item = vue.unref(_itemRef);
    const el2 = (_a = item == null ? void 0 : item.children) == null ? void 0 : _a[0];
    const options = {
      itemHeight: 22
    };
    if (!el2) return options;
    const itemHeight = Number(el2 == null ? void 0 : el2.clientHeight) > 1 ? el2 == null ? void 0 : el2.clientHeight : 22;
    return {
      ...options,
      itemHeight
    };
  });
  const el = vue.computed(() => {
    const el2 = core.unrefElement(_ref);
    switch (true) {
      case lodashEs.isElement(el2):
        return el2;
      default:
        return void 0;
    }
  });
  core.useInfiniteScroll(
    el,
    (state) => {
      const { isScrolling } = state;
      const disabled = vue.unref(refs.disabled);
      const isLoading = vue.unref(refs.loading);
      const isDisabled = [isLoading, loading.value, isScrolling, disabled].includes(true);
      if (isDisabled) return;
      loading.value = true;
      emit == null ? void 0 : emit("load-more", state);
      _loading.value = true;
    },
    { distance: vue.unref(refs.distance) }
  );
  vue.onUnmounted(() => {
    var _a;
    watcher.stop && watcher.stop();
    for (const observer2 of observers) {
      observer2 && ((_a = observer2.stop) == null ? void 0 : _a.call(observer2));
    }
  });
  const ctx = {
    ...refs,
    _ref,
    _itemRef,
    _boxRef,
    _headerRef,
    _mainRef,
    _footerRef,
    wrapStyle,
    wrapClass,
    styles,
    $slots,
    _dataSource,
    _loading,
    virtualOptions,
    mainHeight
  };
  const templates = {
    DefineEmptyTemplate,
    ReusableEmptyTemplate,
    DefineItemTemplate,
    ReusableItemTemplate
  };
  return {
    ctx,
    templates
  };
}
exports.useList = useList;