yanzhen-design-vue/es/components/list/src/use-list.mjs

import { useAttrs, useSlots, toRefs, computed, ref, mergeProps, unref, onUnmounted } from "vue";
import { useVModel, createReusableTemplate, useParentElement, useResizeObserver, unrefElement, useInfiniteScroll } from "@vueuse/core";
import { isNumeral, isEmptyValue, isArray } from "@yanzhen-libs/utils";
import { isBoolean, isElement } from "lodash-es";
import { createWatcher } from "@yanzhen-libs/utils-vue";
import { listOptions } from "./list.mjs";
const { ns } = listOptions;
function useList(props, emit) {
  const $attrs = useAttrs();
  const $slots = useSlots();
  const refs = toRefs(props);
  const watcher = createWatcher();
  const _dataSource = computed(() => {
    return Array.isArray(props.dataSource) ? props.dataSource : [];
  });
  const _ref = ref();
  const wrapClass = computed(() => {
    return mergeProps(
      {
        class: [ns.b(), ns.e(unref(refs.mode))]
      },
      {
        class: $attrs.class
      },
      {
        class: props.class
      }
    ).class;
  });
  const _loading = useVModel(props, "loading", emit);
  const loading = ref(false);
  const [DefineEmptyTemplate, ReusableEmptyTemplate] = createReusableTemplate();
  const [DefineItemTemplate, ReusableItemTemplate] = createReusableTemplate();
  watcher.set("loading", {
    source: () => unref(_loading),
    handler: (value, oldValue) => {
      if (value === oldValue) return;
      loading.value = isBoolean(value) ? value : false;
    },
    immediate: true,
    debounce: 0
  });
  const _parentEl = useParentElement();
  const _boxRef = ref();
  const _mainRef = ref();
  const wrapHeight = ref(isNumeral(props.height) ? `${props.height}px` : props.height);
  const wrapStyle = computed(() => {
    return mergeProps(
      {
        style: props.style
      },
      {
        style: {
          height: unref(wrapHeight)
        }
      }
    ).style;
  });
  const _mainStyle = ref({});
  const mainHeight = ref();
  const observers = [];
  const observer = useResizeObserver(_mainRef, (entries) => {
    const entry = entries[0];
    const { height } = entry.contentRect;
    unref(_mainStyle).height = `${height}px`;
    mainHeight.value = height;
  });
  observers.push(observer);
  if (isEmptyValue(props.height)) {
    const observer2 = useResizeObserver(_parentEl, (entries) => {
      const entry = entries[0];
      const { height } = entry.contentRect;
      wrapHeight.value = `${height}px`;
      handleSlotsStyle();
    });
    observers.push(observer2);
  }
  const _headerRef = ref();
  const _footerRef = ref();
  const stylesRefs = {
    header: _headerRef,
    footer: _footerRef
  };
  const styles = ref({
    header: { height: "46px" },
    footer: { height: 0 }
  });
  function handleElHeightStyle(el2, d = 50) {
    var _a;
    let height = 0;
    const children = [...((_a = unref(el2)) == null ? void 0 : _a.children) ?? []];
    if (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 = unref(stylesRefs[k]);
      const VNode = fun == null ? void 0 : fun({});
      if (!VNode) {
        unref(styles)[k].display = "none";
      } else if (ref2) {
        unref(styles)[k].height = `${handleElHeightStyle(ref2)}px`;
      }
    }
  }
  const _itemRef = ref();
  const virtualOptions = computed(() => {
    var _a;
    const item = 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 = computed(() => {
    const el2 = unrefElement(_ref);
    switch (true) {
      case isElement(el2):
        return el2;
      default:
        return void 0;
    }
  });
  useInfiniteScroll(
    el,
    (state) => {
      const { isScrolling } = state;
      const disabled = unref(refs.disabled);
      const isLoading = 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: unref(refs.distance) }
  );
  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
  };
}
export {
  useList
};