tav-ui/lib/packages/components/file/src/FileCards/index4.js

Tav UI

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var antDesignVue = require('ant-design-vue');
var Masonry = require('masonry-layout');
require('../../../../locales/index2.js');
var consts = require('../consts2.js');
require('../hooks/index2.js');
var index = require('../FileCard/index4.js');
var types = require('./types2.js');
require('./hooks/index2.js');
var pluginVue_exportHelper = require('../../../../../_virtual/plugin-vue_export-helper.js');
var useProps = require('../hooks/use-props2.js');
var useMode = require('./hooks/use-mode2.js');
var useDisable = require('../hooks/use-disable2.js');
var useLoading = require('../hooks/use-loading2.js');
var useRequest = require('../hooks/use-request2.js');
var transfer = require('../../../../locales/transfer2.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var Masonry__default = /*#__PURE__*/_interopDefaultLegacy(Masonry);

const _hoisted_1 = ["id"];
const _hoisted_2 = { key: 0 };
const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("br", null, null, -1);
const __default__ = {
  name: "TaFileCards",
  inheritAttrs: false
};
function setup(__props, { expose, emit: emits }) {
  const props = __props;
  const EmptyImage = antDesignVue.Empty.PRESENTED_IMAGE_SIMPLE;
  const attrs = vue.useAttrs();
  const globalConfigProps = useProps.useGlobalConfigProps();
  const mergedProps = useProps.useMergedProps(globalConfigProps, props, "TaFileCards", {
    ...consts.DEFAULT_APIPARAMS
  });
  const fileCardsElRef = vue.ref();
  const fileActualIdsValueMap = vue.ref({});
  const _loading = vue.ref(mergedProps.value.loading);
  const loading = vue.computed({
    get() {
      return _loading;
    },
    set(newLoading) {
      _loading.value = newLoading.value;
    }
  });
  const {
    apiActions: { typeSelectApiOptions, apiQueryFileListOptions }
  } = useMode.useMode({ mergedProps });
  const { setDisable } = useDisable.useDisable();
  const { setLoading } = useLoading.useLoading();
  const {
    result: ApiResult,
    error: apiError,
    handleApi
  } = useRequest.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 = vue.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 = vue.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 = vue.ref();
  const waterfallInstance = vue.ref(null);
  async function retriggerWaterfall() {
    if (!mergedProps.value.waterfallConfig.enabled)
      return;
    await vue.nextTick();
    if (fileCardsElRef.value) {
      const wrapperEl = fileCardsElRef.value.querySelector(`.${consts.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["default"](`.${consts.DEFAULT_FILECARDS_CLASSNAME}-main--waterfall`, {
          itemSelector: `.${consts.DEFAULT_FILECARD_CLASSNAME}`,
          columnWidth,
          gutter: 20
        });
        waterfallInstance.value && waterfallInstance.value.layout?.();
      }
    }
  }
  vue.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;
  }
  vue.watch(() => mergedProps.value.mode, async () => {
    await cleanup();
    loading.value.value = true;
    await catagory();
    loading.value.value = false;
    await retriggerWaterfall();
  });
  vue.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();
    }
  });
  vue.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();
        }
      }
    }
  });
  vue.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();
      }
    }
  });
  vue.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 vue.unref(mergedProps).visible ? (vue.openBlock(), vue.createElementBlock("section", {
      key: 0,
      id: vue.unref(consts.DEFAULT_FILECARDS_ID),
      ref: (_value, _refs) => {
        _refs["fileCardsElRef"] = _value;
        fileCardsElRef.value = _value;
      },
      class: vue.normalizeClass(`${vue.unref(consts.DEFAULT_FILECARDS_CLASSNAME)} ${vue.unref(attrs).class ? vue.unref(attrs).class : ""}`)
    }, [
      vue.createCommentVNode(' <section :class="`${DEFAULT_FILECARDS_CLASSNAME}-header`"></section> '),
      vue.createElementVNode("section", {
        class: vue.normalizeClass(`${vue.unref(consts.DEFAULT_FILECARDS_CLASSNAME)}-main`)
      }, [
        vue.createVNode(vue.unref(antDesignVue.Spin), {
          spinning: vue.unref(loading).value,
          tip: vue.unref(transfer.tavI18n)("Tav.common.loadingText")
        }, {
          default: vue.withCtx(() => [
            catagories.value?.length === 0 || vue.unref(apiError) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
              vue.unref(apiError) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(vue.unref(apiError)), 1)) : vue.createCommentVNode("v-if", true),
              _hoisted_3,
              vue.createVNode(vue.unref(antDesignVue.Empty), { image: vue.unref(EmptyImage) }, null, 8, ["image"])
            ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
              vue.unref(mergedProps).waterfallConfig.enabled ? (vue.openBlock(), vue.createElementBlock("div", {
                key: 0,
                class: vue.normalizeClass(`${vue.unref(consts.DEFAULT_FILECARDS_CLASSNAME)}-main--waterfall`)
              }, [
                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(catagories.value, (item) => {
                  return vue.openBlock(), vue.createBlock(vue.unref(index.TaFileCard), vue.mergeProps({
                    key: `${item.value}`,
                    ref: (instance) => handleFileCardRefs(item.value, instance)
                  }, vue.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)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(catagories.value, (item) => {
                return vue.openBlock(), vue.createBlock(vue.unref(index.TaFileCard), vue.mergeProps({
                  key: `${item.value}`,
                  ref: (instance) => handleFileCardRefs(item.value, instance)
                }, vue.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),
      vue.createCommentVNode(' <section :class="`${DEFAULT_FILECARDS_CLASSNAME}-footer`"></section> ')
    ], 10, _hoisted_1)) : vue.createCommentVNode("v-if", true);
  };
}
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: types.fileCardsProps,
  emits: types.fileCardsEmits,
  setup
});
var FileCards = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/file/src/FileCards/index.vue"]]);

exports["default"] = FileCards;
//# sourceMappingURL=index4.js.map