tav-ui/es/packages/components/file/src/FileCards/index4.mjs

Tav UI

import { createElementVNode, useAttrs, ref, computed, nextTick, onMounted, watch, onBeforeUnmount, unref, openBlock, createElementBlock, normalizeClass, createCommentVNode, createVNode, withCtx, Fragment, toDisplayString, renderList, createBlock, mergeProps, defineComponent } from 'vue';
import { Empty, Spin } from 'ant-design-vue';
import Masonry from 'masonry-layout';
import '../../../../locales/index2.mjs';
import { DEFAULT_APIPARAMS, DEFAULT_FILECARDS_CLASSNAME, DEFAULT_FILECARD_CLASSNAME, DEFAULT_FILECARDS_ID } from '../consts2.mjs';
import '../hooks/index2.mjs';
import { TaFileCard } from '../FileCard/index4.mjs';
import { fileCardsProps, fileCardsEmits } from './types2.mjs';
import './hooks/index2.mjs';
import _export_sfc from '../../../../../_virtual/plugin-vue_export-helper.mjs';
import { useGlobalConfigProps, useMergedProps } from '../hooks/use-props2.mjs';
import { useMode } from './hooks/use-mode2.mjs';
import { useDisable } from '../hooks/use-disable2.mjs';
import { useLoading } from '../hooks/use-loading2.mjs';
import { useRequest } from '../hooks/use-request2.mjs';
import { tavI18n } from '../../../../locales/transfer2.mjs';

const _hoisted_1 = ["id"];
const _hoisted_2 = { key: 0 };
const _hoisted_3 = /* @__PURE__ */ createElementVNode("br", null, null, -1);
const __default__ = {
  name: "TaFileCards",
  inheritAttrs: false
};
function setup(__props, { expose, emit: emits }) {
  const props = __props;
  const EmptyImage = Empty.PRESENTED_IMAGE_SIMPLE;
  const attrs = useAttrs();
  const globalConfigProps = useGlobalConfigProps();
  const mergedProps = useMergedProps(globalConfigProps, props, "TaFileCards", {
    ...DEFAULT_APIPARAMS
  });
  const fileCardsElRef = ref();
  const fileActualIdsValueMap = ref({});
  const _loading = ref(mergedProps.value.loading);
  const loading = computed({
    get() {
      return _loading;
    },
    set(newLoading) {
      _loading.value = newLoading.value;
    }
  });
  const {
    apiActions: { typeSelectApiOptions, apiQueryFileListOptions }
  } = useMode({ mergedProps });
  const { setDisable } = useDisable();
  const { setLoading } = useLoading();
  const {
    result: ApiResult,
    error: apiError,
    handleApi
  } = useRequest({
    setLoading,
    setDisable,
    loading
  });
  const fileCardRefs = {};
  function handleFileCardRefs(fileCardValue, fileCardRef) {
    if (fileCardRef)
      fileCardRefs[fileCardValue] = fileCardRef;
  }
  async function useFileTypeSelectCatgory() {
    loading.value.value = true;
    const options = typeSelectApiOptions(mergedProps.value.apiParams);
    if (!options) {
      loading.value.value = false;
      return;
    }
    await handleApi(options);
    loading.value.value = false;
    return ApiResult.value;
  }
  async function useFileListCatgory() {
    loading.value.value = true;
    const options = apiQueryFileListOptions(mergedProps.value.apiParams);
    if (!options) {
      loading.value.value = false;
      return;
    }
    await handleApi(options);
    loading.value.value = false;
    return ApiResult.value;
  }
  function isFileCardHasDataSource(fileCard) {
    if (!fileCard)
      return false;
    if (!Array.isArray(fileCard)) {
      return false;
    } else {
      return fileCard.filter((fileCard2) => fileCard2.dataSource && Array.isArray(fileCard2.dataSource)).length === fileCard.length;
    }
  }
  const catagories = ref();
  async function catagory() {
    const hasDatasources = isFileCardHasDataSource(mergedProps.value.fileCard);
    function useFileCardArrayObjectCreateCatagoriesValue() {
      return mergedProps.value.fileCard?.map((fileCard) => {
        if (fileCard.value && !fileActualIdsValueMap.value[fileCard.value]) {
          fileActualIdsValueMap.value[fileCard.value] = [];
        }
        return {
          label: fileCard.label,
          value: fileCard.value,
          dataSource: fileCard.dataSource ?? []
        };
      }) ?? [];
    }
    function useFileCardObjectCreateCatagoriesValue() {
      return [];
    }
    async function useApiCreateCatagoriesValue() {
      const fileTypes = await useFileTypeSelectCatgory();
      const files = await useFileListCatgory();
      return fileTypes?.map((fileType) => {
        if (fileType.code && !fileActualIdsValueMap.value[fileType.code]) {
          fileActualIdsValueMap.value[fileType.code] = [];
        }
        const currentTypeFiles = files?.filter((file) => file.typeCode === fileType.code) ?? [];
        return {
          label: fileType.name,
          value: fileType.code,
          dataSource: [...currentTypeFiles],
          __dataSourceFromCards: true
        };
      }) ?? [];
    }
    if (mergedProps.value.immediate) {
      if (hasDatasources) {
        catagories.value = useFileCardArrayObjectCreateCatagoriesValue();
      } else {
        catagories.value = await useApiCreateCatagoriesValue();
      }
    } else {
      if (hasDatasources) {
        catagories.value = useFileCardArrayObjectCreateCatagoriesValue();
      } else {
        catagories.value = useFileCardObjectCreateCatagoriesValue();
      }
    }
  }
  const fileCardProps = computed(() => (_catagory) => {
    const targetFileCard = mergedProps.value.fileCard ? Array.isArray(mergedProps.value.fileCard) ? mergedProps.value.fileCard.find((fileCard) => fileCard.value === _catagory?.value) ?? {} : mergedProps.value.fileCard : {};
    const mergedCatagory = {
      ..._catagory ?? {},
      mode: mergedProps.value.mode,
      visible: mergedProps.value.visible,
      immediate: mergedProps.value.immediate,
      autoValidate: mergedProps.value.autoValidate,
      loading: mergedProps.value.loading,
      ...targetFileCard,
      dataSource: [
        ...mergedProps.value.immediate ? _catagory?.dataSource ?? [] : targetFileCard?.dataSource ?? []
      ],
      fileActionUpload: {
        ...mergedProps.value.fileActionUpload ?? {},
        ...targetFileCard.fileActionUpload ?? {}
      },
      fileActionUploadLink: {
        ...mergedProps.value.fileActionUploadLink ?? {},
        ...targetFileCard.fileActionUploadLink ?? {}
      }
    };
    return {
      ...mergedCatagory,
      apiParams: {
        typeCode: mergedCatagory.value,
        ...mergedProps.value.apiParams,
        ...targetFileCard.apiParams ?? {}
      }
    };
  });
  async function handleFileCardActualidsChange(...args) {
    const [value, _args] = args;
    fileActualIdsValueMap.value = { ...fileActualIdsValueMap.value, [value]: _args };
    const fileActualIdsValue = JSON.parse(JSON.stringify(fileActualIdsValueMap.value));
    const result = [];
    for (const fileActualIds of Object.values(fileActualIdsValue)) {
      result.push(...fileActualIds);
    }
    emits("update:fileActualIds", result);
    await retriggerWaterfall();
  }
  function handleFileActionUploadChangeValidateSuccessChange(...args) {
    emits("fileActionUpload:validateSuccessChange", ...args);
  }
  function handleFileActionUploadChangeValidateFailureChange(...args) {
    emits("fileActionUpload:validateFailureChange", ...args);
  }
  async function handleFileActionUploadChange(...args) {
    emits("fileActionUpload:uploadedChange", ...args);
  }
  function handleFileActionUploadLinkChangeValidateSuccessChange(...args) {
    emits("fileActionUploadLink:validateSuccessChange", ...args);
  }
  function handleFileActionUploadLinkChangeValidateFailureChange(...args) {
    emits("fileActionUploadLink:validateFailureChange", ...args);
  }
  async function handleFileActionUploadLinkChange(...args) {
    emits("fileActionUploadLink:uploadedChange", ...args);
  }
  const fileCardWaterfallStyle = ref();
  const waterfallInstance = ref(null);
  async function retriggerWaterfall() {
    if (!mergedProps.value.waterfallConfig.enabled)
      return;
    await nextTick();
    if (fileCardsElRef.value) {
      const wrapperEl = fileCardsElRef.value.querySelector(`.${DEFAULT_FILECARDS_CLASSNAME}-main--waterfall`);
      if (wrapperEl) {
        const columnWidth = mergedProps.value.waterfallConfig.width ?? 400;
        fileCardWaterfallStyle.value = { ...fileCardWaterfallStyle.value, width: `${columnWidth}px` };
        waterfallInstance.value && waterfallInstance.value.destroy?.();
        waterfallInstance.value = new Masonry(`.${DEFAULT_FILECARDS_CLASSNAME}-main--waterfall`, {
          itemSelector: `.${DEFAULT_FILECARD_CLASSNAME}`,
          columnWidth,
          gutter: 20
        });
        waterfallInstance.value && waterfallInstance.value.layout?.();
      }
    }
  }
  onMounted(async () => {
    await catagory();
    await retriggerWaterfall();
  });
  async function cleanup() {
    const fileCardCleanupPromises = Object.values(fileCardRefs).map(async (fileCardRef) => await fileCardRef.cleanup());
    await Promise.all(fileCardCleanupPromises);
    waterfallInstance.value?.destroy?.();
    waterfallInstance.value = null;
  }
  watch(() => mergedProps.value.mode, async () => {
    await cleanup();
    loading.value.value = true;
    await catagory();
    loading.value.value = false;
    await retriggerWaterfall();
  });
  watch(() => JSON.stringify(mergedProps.value.fileCard), async (curfileCard, prefileCard) => {
    if (curfileCard && curfileCard !== prefileCard) {
      await cleanup();
      loading.value.value = true;
      await catagory();
      loading.value.value = false;
      await retriggerWaterfall();
    }
  });
  watch(() => JSON.stringify(mergedProps.value.apiParams), async (curApiParams, preApiParams) => {
    if (curApiParams && curApiParams !== preApiParams) {
      if (mergedProps.value.immediate) {
        const curTSAO = typeSelectApiOptions(mergedProps.value.apiParams);
        if (!curTSAO)
          return;
        const preTSAO = typeSelectApiOptions(JSON.parse(preApiParams));
        if (!preTSAO)
          return;
        const curQFLO = apiQueryFileListOptions(mergedProps.value.apiParams);
        if (!curQFLO)
          return;
        const preQFLO = apiQueryFileListOptions(JSON.parse(preApiParams));
        if (!preQFLO)
          return;
        if (curApiParams !== preApiParams && curTSAO !== preTSAO && curQFLO !== preQFLO) {
          loading.value.value = true;
          await catagory();
          loading.value.value = false;
          retriggerWaterfall();
        }
      }
    }
  });
  watch(() => JSON.stringify(mergedProps.value.waterfallConfig), (curwaterfallConfig, prewaterfallConfig) => {
    if (curwaterfallConfig && curwaterfallConfig !== prewaterfallConfig) {
      const cur = JSON.parse(curwaterfallConfig);
      const pre = JSON.parse(prewaterfallConfig);
      if (cur.enabled && cur.width !== pre.width) {
        retriggerWaterfall();
      }
    }
  });
  onBeforeUnmount(async () => {
    await cleanup();
  });
  expose({
    cleanup,
    getFileCardRefMap: () => fileCardRefs,
    getDataSource: (cardPropValue) => {
      if (!cardPropValue) {
        return Object.values(fileCardRefs).map((fileCardRef) => fileCardRef.getDataSource());
      } else {
        return fileCardRefs[cardPropValue].getDataSource();
      }
    },
    validate: async (cardPropValue) => {
      if (!cardPropValue) {
        const promises = Object.values(fileCardRefs).map(async (fileCardRef, idx) => {
          const typeCodes = Object.keys(fileCardRefs);
          const result2 = {
            typeCode: typeCodes[idx],
            success: false,
            error: []
          };
          try {
            const success = await fileCardRef.validate();
            result2.success = success;
          } catch (error) {
            result2.error = error;
          } finally {
            return result2;
          }
        });
        const result = await Promise.all(promises);
        return result;
      } else {
        const result = {
          typeCode: cardPropValue,
          success: false,
          error: []
        };
        try {
          const success = await fileCardRefs[cardPropValue].validate();
          result.success = success;
        } catch (error) {
          result.error = error;
        } finally {
          return result;
        }
      }
    },
    clearValidate: (cardPropValue) => {
      if (!cardPropValue) {
        return Object.values(fileCardRefs).map((fileCardRef) => fileCardRef.clearValidate());
      } else {
        return fileCardRefs[cardPropValue].clearValidate();
      }
    }
  });
  return (_ctx, _cache) => {
    return unref(mergedProps).visible ? (openBlock(), createElementBlock("section", {
      key: 0,
      id: unref(DEFAULT_FILECARDS_ID),
      ref: (_value, _refs) => {
        _refs["fileCardsElRef"] = _value;
        fileCardsElRef.value = _value;
      },
      class: normalizeClass(`${unref(DEFAULT_FILECARDS_CLASSNAME)} ${unref(attrs).class ? unref(attrs).class : ""}`)
    }, [
      createCommentVNode(' <section :class="`${DEFAULT_FILECARDS_CLASSNAME}-header`"></section> '),
      createElementVNode("section", {
        class: normalizeClass(`${unref(DEFAULT_FILECARDS_CLASSNAME)}-main`)
      }, [
        createVNode(unref(Spin), {
          spinning: unref(loading).value,
          tip: unref(tavI18n)("Tav.common.loadingText")
        }, {
          default: withCtx(() => [
            catagories.value?.length === 0 || unref(apiError) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
              unref(apiError) ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(unref(apiError)), 1)) : createCommentVNode("v-if", true),
              _hoisted_3,
              createVNode(unref(Empty), { image: unref(EmptyImage) }, null, 8, ["image"])
            ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
              unref(mergedProps).waterfallConfig.enabled ? (openBlock(), createElementBlock("div", {
                key: 0,
                class: normalizeClass(`${unref(DEFAULT_FILECARDS_CLASSNAME)}-main--waterfall`)
              }, [
                (openBlock(true), createElementBlock(Fragment, null, renderList(catagories.value, (item) => {
                  return openBlock(), createBlock(unref(TaFileCard), mergeProps({
                    key: `${item.value}`,
                    ref: (instance) => handleFileCardRefs(item.value, instance)
                  }, unref(fileCardProps)(item), {
                    style: fileCardWaterfallStyle.value,
                    onActualidsChange: (args) => handleFileCardActualidsChange(item.value, args),
                    "onFileActionUpload:validateSuccessChange": (...args) => handleFileActionUploadChangeValidateSuccessChange(`${item.value}`, args),
                    "onFileActionUpload:validateFailureChange": (...args) => handleFileActionUploadChangeValidateFailureChange(`${item.value}`, args),
                    "onFileActionUpload:uploadedChange": (...args) => handleFileActionUploadChange(`${item.value}`, args),
                    "onFileActionUploadLink:validateSuccessChange": (...args) => handleFileActionUploadLinkChangeValidateSuccessChange(`${item.value}`, args),
                    "onFileActionUploadLink:validateFailureChange": (...args) => handleFileActionUploadLinkChangeValidateFailureChange(`${item.value}`, args),
                    "onFileActionUploadLink:uploadedChange": (...args) => handleFileActionUploadLinkChange(`${item.value}`, args)
                  }), null, 16, ["style", "onActualidsChange", "onFileActionUpload:validateSuccessChange", "onFileActionUpload:validateFailureChange", "onFileActionUpload:uploadedChange", "onFileActionUploadLink:validateSuccessChange", "onFileActionUploadLink:validateFailureChange", "onFileActionUploadLink:uploadedChange"]);
                }), 128))
              ], 2)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(catagories.value, (item) => {
                return openBlock(), createBlock(unref(TaFileCard), mergeProps({
                  key: `${item.value}`,
                  ref: (instance) => handleFileCardRefs(item.value, instance)
                }, unref(fileCardProps)(item), {
                  onActualidsChange: (args) => handleFileCardActualidsChange(item.value, args),
                  "onFileActionUpload:validateSuccessChange": (...args) => handleFileActionUploadChangeValidateSuccessChange(`${item.value}`, args),
                  "onFileActionUpload:validateFailureChange": (...args) => handleFileActionUploadChangeValidateFailureChange(`${item.value}`, args),
                  "onFileActionUpload:uploadedChange": (...args) => handleFileActionUploadChange(`${item.value}`, args),
                  "onFileActionUploadLink:validateSuccessChange": (...args) => handleFileActionUploadLinkChangeValidateSuccessChange(`${item.value}`, args),
                  "onFileActionUploadLink:validateFailureChange": (...args) => handleFileActionUploadLinkChangeValidateFailureChange(`${item.value}`, args),
                  "onFileActionUploadLink:uploadedChange": (...args) => handleFileActionUploadLinkChange(`${item.value}`, args)
                }), null, 16, ["onActualidsChange", "onFileActionUpload:validateSuccessChange", "onFileActionUpload:validateFailureChange", "onFileActionUpload:uploadedChange", "onFileActionUploadLink:validateSuccessChange", "onFileActionUploadLink:validateFailureChange", "onFileActionUploadLink:uploadedChange"]);
              }), 128))
            ], 2112))
          ]),
          _: 1
        }, 8, ["spinning", "tip"])
      ], 2),
      createCommentVNode(' <section :class="`${DEFAULT_FILECARDS_CLASSNAME}-footer`"></section> ')
    ], 10, _hoisted_1)) : createCommentVNode("v-if", true);
  };
}
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: fileCardsProps,
  emits: fileCardsEmits,
  setup
});
var FileCards = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/file/src/FileCards/index.vue"]]);

export { FileCards as default };
//# sourceMappingURL=index4.mjs.map