@voicenter-team/voicenter-ui-plus 2.0.10 → 3.0.0

package/library/components/VcExcelUploader/VcExcelFileUploader.vue.mjs

@@ -0,0 +1,575 @@
+import { defineComponent, ref, computed, watch, openBlock, createElementBlock, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString, unref, createElementVNode, createSlots, normalizeClass, createBlock, renderList, nextTick } from "vue";
+import _sfc_main$3 from "../VcWizard/VcWizard.vue.mjs";
+import '../../assets/components/VcModal/VcModal.css';import '../../assets/components/VcButton/VcButton.css';import '../../assets/components/VcWizard/VcWizard.css';/* empty css                         */
+import Parser from "../../utils/excelParser/parser.mjs";
+import VcExcelFileUploadBlock from "./VcExcelFileUploadBlock.vue.mjs";
+import _sfc_main$4 from "./VcExcelFileProcessLoader.vue.mjs";
+import _sfc_main$6 from "./VcFileImportParseResultBlock.vue.mjs";
+import _sfc_main$5 from "./VcFileImportResultBindData.vue.mjs";
+import { chunk } from "lodash-es";
+import { tVU } from "../../localization/index.mjs";
+import _sfc_main$1 from "../VcButton/VcButton.vue.mjs";
+/* empty css                         */
+import _sfc_main$2 from "../VcModal/VcModal.vue.mjs";
+/* empty css                       */
+const _hoisted_1 = { class: "vc-file-excel-import" };
+const _hoisted_2 = { class: "vc-file-excel-import__content h-modal-wizard" };
+const _hoisted_3 = {
+  key: 0,
+  class: "w-full h-full flex justify-center items-center"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "w-full h-full"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "w-full vc-file-excel-import__result-table-block"
+};
+const _hoisted_6 = { class: "w-full h-full flex-center text-center font-semibold text-lg" };
+const _hoisted_7 = {
+  key: 0,
+  class: "w-full h-full"
+};
+const _hoisted_8 = { class: "w-full h-full flex justify-center items-center text-center" };
+const PROGRESS_WIDTH = 600;
+const CHUNK_UPLOAD_SIZE = 100;
+const TABLE_VISIBLE_ROWS = 9;
+const COUNT_VIEW_ERRORS = 10;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcExcelFileUploader",
+  props: {
+    actionName: { default: "" },
+    actionType: { default: "borderless" },
+    icon: { default: "vc-icon-table" },
+    headerEntityName: { default: "" },
+    modalWidth: { default: "80vw" },
+    chunkLimit: { default: 100 },
+    acceptFiles: { default: ".xlsx, .xlsb, .xlsm, .xls, .xml, .csv, .txt" },
+    progressLabel: { default: "" },
+    progressHeight: { default: 6 },
+    progressStroke: { default: 4 },
+    startUploadingConfirm: { type: Function, default: void 0 },
+    errorTableDeleteConfirm: { type: Function, default: void 0 },
+    extraSteps: { default: () => [] },
+    bindingsData: { default: () => [] },
+    uploadDataFunction: {}
+  },
+  emits: ["update-step", "upload-data", "finish", "cancel"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const wizardFinalStep = {
+      step: "last-step",
+      label: "",
+      icon: "vc-icon-settings"
+    };
+    const props = __props;
+    const emit = __emit;
+    const excelParser = ref();
+    const wizardRef = ref();
+    const fileImportResultBindDataRef = ref();
+    const progressBar = ref(false);
+    const isFileUploaded = ref(false);
+    const progress = ref(0);
+    const currentStep = ref(0);
+    const loading = ref(false);
+    const uploadFilesProcess = ref(false);
+    const isImportFromFileModalOpen = ref(false);
+    const startRow = ref(0);
+    const activeSheet = ref("");
+    const fileName = ref("");
+    const showColumns = ref([]);
+    const fileSheetsAllData = ref([]);
+    const bindings = ref([
+      ...props.bindingsData
+    ]);
+    const bindErrors = ref([]);
+    const bindResult = ref([]);
+    const bindResultHeaders = ref([]);
+    const uploadProgressLabel = ref({
+      total: 0,
+      done: 0
+    });
+    const wizardSteps = computed(() => {
+      var _a;
+      let _steps = [...basicImportFileSteps.value];
+      if ((_a = props.extraSteps) == null ? void 0 : _a.length) {
+        _steps = _steps.concat(props.extraSteps);
+      }
+      _steps.push({ ...wizardFinalStep });
+      return _steps;
+    });
+    const filteredBindErrors = computed(() => {
+      var _a;
+      return (_a = bindErrors.value) == null ? void 0 : _a.filter(Boolean);
+    });
+    const countErrors = computed(() => {
+      var _a;
+      return ((_a = filteredBindErrors.value) == null ? void 0 : _a.length) || 0;
+    });
+    const canNext = computed(() => {
+      if (currentStep.value === 0) {
+        const isBindingNotValid = bindings.value.find((item) => item.key === "" && item.validationOptions.required);
+        return isFileUploaded.value && !isBindingNotValid;
+      }
+      return !(countErrors.value && currentStep.value > 0);
+    });
+    const activeSheetDataIndex = computed(() => {
+      var _a;
+      return (_a = fileSheetsAllData.value) == null ? void 0 : _a.findIndex((item) => item.sheetName === activeSheet.value);
+    });
+    const importFileStepValidate = async () => {
+      progress.value = 0;
+      if (currentStep.value === 0) {
+        loading.value = true;
+        await parseSheet();
+        await setLoading(false, 500);
+      }
+      return Promise.resolve(true);
+    };
+    const secondStepValidate = async () => {
+      if (currentStep.value === 1 && countErrors.value) {
+        return Promise.resolve(false);
+      }
+      return Promise.resolve(true);
+    };
+    const parseSheet = async () => {
+      var _a, _b, _c, _d;
+      const index = fileSheetsAllData.value.findIndex((s) => s.sheetName === activeSheet.value);
+      const bindingsData = bindings.value.filter((item) => item.key).map((i) => ({
+        ...i,
+        columnItemKey: i.property,
+        columnItemLabel: i.property,
+        inner: []
+      }));
+      (_a = fileImportResultBindDataRef.value) == null ? void 0 : _a.reset();
+      await ((_b = excelParser.value) == null ? void 0 : _b.bindColumns(index, bindingsData));
+      const _bindResult = ((_c = excelParser.value) == null ? void 0 : _c.getBindData()) || [];
+      const _bindErrors = ((_d = excelParser.value) == null ? void 0 : _d.getErrors()) || [];
+      bindErrors.value = [..._bindErrors];
+      bindResult.value = [..._bindResult];
+      bindResultHeaders.value = bindingsData;
+    };
+    const onSetBindData = ({ property, key }) => {
+      const oldSet = bindings.value.find((b) => b.key === key);
+      if (oldSet) {
+        oldSet.key = "";
+      }
+      const bindingValue = bindings.value.find((b) => b.property === property);
+      if (bindingValue) {
+        bindingValue.key = key;
+      }
+    };
+    const onReparseHeadRowData = (startRow2) => {
+      updateSheetsDataByRow(activeSheetDataIndex.value, startRow2);
+    };
+    const updateSheetsDataByRow = async (sheetIndex, rowNumber) => {
+      var _a;
+      const _resultData = await ((_a = excelParser.value) == null ? void 0 : _a.reparseHeadRowData(sheetIndex, rowNumber));
+      fileSheetsAllData.value = (_resultData == null ? void 0 : _resultData.data) || [];
+      resetAllBindings();
+    };
+    const resetAllBindings = () => {
+      bindings.value = bindings.value.map((bind) => {
+        return {
+          ...bind,
+          key: ""
+        };
+      });
+    };
+    const setLoading = (value, ms) => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          loading.value = value;
+          resolve();
+        }, ms);
+      });
+    };
+    const setProgress = (number, ms) => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          progress.value = number;
+          resolve();
+        }, ms);
+      });
+    };
+    const startUploadFile = async (file) => {
+      resetData();
+      progressBar.value = true;
+      await setProgress(5, 500);
+      await setProgress(35, 500);
+      await parseSpreadSheet(file);
+      progressBar.value = false;
+    };
+    const parseSpreadSheet = async (file) => {
+      var _a;
+      try {
+        fileName.value = file.name || "Uploaded File";
+        const _resultData = await ((_a = excelParser.value) == null ? void 0 : _a.readFile(file));
+        await setProgress(80, 300);
+        fileSheetsAllData.value = (_resultData == null ? void 0 : _resultData.data) || [];
+        if (fileSheetsAllData.value.length) {
+          activeSheet.value = fileSheetsAllData.value[0].sheetName || "";
+        }
+        await setProgress(100, 400);
+        isFileUploaded.value = true;
+        progressBar.value = false;
+      } catch (e) {
+        console.error(e);
+      }
+    };
+    const openImportFromFileModal = () => {
+      resetData();
+      nextTick(() => {
+        isImportFromFileModalOpen.value = true;
+      });
+    };
+    const parserBindData = () => {
+      if (excelParser.value) {
+        return excelParser.value.getBindData();
+      }
+      return [];
+    };
+    const onBindingRowsDelete = async (selectedData) => {
+      var _a;
+      if (props.errorTableDeleteConfirm) {
+        const res = await props.errorTableDeleteConfirm(selectedData.length);
+        if (!res) {
+          return;
+        }
+      }
+      selectedData.forEach((item) => {
+        var _a2;
+        const index = parserBindData().findIndex((r) => r.ID === item.ID);
+        (_a2 = excelParser.value) == null ? void 0 : _a2.deleteRow(index);
+      });
+      bindResult.value = parserBindData();
+      bindErrors.value = ((_a = excelParser.value) == null ? void 0 : _a.getErrors()) || [];
+    };
+    const onBindingRowUpdate = ({ row, id }) => {
+      var _a, _b;
+      try {
+        const index = parserBindData().findIndex((r) => r.ID === id);
+        (_a = excelParser.value) == null ? void 0 : _a.updateRow(index, row, bindResultHeaders.value);
+        bindResult.value = parserBindData();
+        bindErrors.value = ((_b = excelParser.value) == null ? void 0 : _b.getErrors()) || [];
+      } catch (e) {
+        console.error(e);
+      }
+    };
+    const resetData = () => {
+      bindings.value = [...props.bindingsData];
+      progressBar.value = false;
+      progress.value = 0;
+      currentStep.value = 0;
+      startRow.value = 0;
+      loading.value = false;
+      uploadFilesProcess.value = false;
+      isFileUploaded.value = false;
+      fileName.value = "";
+      showColumns.value = [];
+      fileSheetsAllData.value = [];
+      bindErrors.value = [];
+      bindResult.value = [];
+      bindResultHeaders.value = [];
+      uploadProgressLabel.value = {
+        total: 0,
+        done: 0
+      };
+    };
+    const onFinish = () => {
+      emit("finish");
+    };
+    const onCancel = () => {
+      isImportFromFileModalOpen.value = false;
+      resetData();
+      emit("cancel");
+    };
+    const validateStepFn = async (step) => {
+      let isValid = true;
+      const stepsToValidate = wizardSteps.value.slice(0, step) || [];
+      for (const [index, stepItem] of stepsToValidate.entries()) {
+        const validateStepFn2 = stepItem.validateStepFn;
+        if (validateStepFn2) {
+          const result = await validateStepFn2();
+          if (!result) {
+            isValid = false;
+            currentStep.value = index;
+            break;
+          }
+        }
+      }
+      if (isValid && step === wizardSteps.value.length - 1) {
+        const _isValid = props.startUploadingConfirm ? await props.startUploadingConfirm(bindResult.value.length) : true;
+        if (_isValid) {
+          uploadFileDataProcess();
+        }
+        return _isValid;
+      }
+      return isValid;
+    };
+    const onUpdateStepWizard = async (step) => {
+      if (step > 0 && step > currentStep.value) {
+        const isValid = await validateStepFn(step);
+        if (isValid) {
+          currentStep.value = step;
+          emit("update-step", step);
+        }
+      } else {
+        currentStep.value = step;
+        emit("update-step", step);
+      }
+    };
+    const uploadFileDataProcess = async () => {
+      if (!props.uploadDataFunction) {
+        throw new Error("uploadDataFunction must be provided!");
+      }
+      try {
+        uploadFilesProcess.value = true;
+        const bindData = parserBindData();
+        uploadProgressLabel.value.total = bindData.length;
+        uploadProgressLabel.value.done = 0;
+        const _limit = props.chunkLimit || CHUNK_UPLOAD_SIZE;
+        if (bindData.length > _limit) {
+          const chunks = chunk(bindData, _limit);
+          const response = [];
+          for await (const group of chunks) {
+            if (!uploadFilesProcess.value) {
+              break;
+            }
+            const _done = uploadProgressLabel.value.done + group.length;
+            const progress2 = Math.round(_done / uploadProgressLabel.value.total * 100);
+            await setProgress(progress2, 500);
+            uploadProgressLabel.value.done = _done;
+            const responseItem = await props.uploadDataFunction(group);
+            response.push(responseItem);
+          }
+          emit("upload-data", response);
+        } else {
+          await setProgress(50, 500);
+          uploadProgressLabel.value.done = bindData.length;
+          const response = await props.uploadDataFunction(bindData);
+          await setProgress(100, 500);
+          emit("upload-data", [response]);
+        }
+        uploadFilesProcess.value = false;
+        return true;
+      } catch (e) {
+        uploadFilesProcess.value = false;
+        console.error(e);
+      }
+    };
+    const initialize = () => {
+      excelParser.value = new Parser(false);
+    };
+    const basicImportFileSteps = ref([
+      {
+        step: "import-file",
+        label: "",
+        icon: "vc-icon-settings",
+        validateStepFn: importFileStepValidate
+      },
+      {
+        step: "parsed-table",
+        label: "",
+        icon: "vc-icon-settings",
+        validateStepFn: secondStepValidate
+      }
+    ]);
+    watch(
+      showColumns,
+      resetAllBindings
+    );
+    watch(
+      () => props.bindingsData,
+      (val) => {
+        bindings.value = [...val];
+      }
+    );
+    initialize();
+    __expose({
+      reset: resetData,
+      close: onCancel,
+      openModal: openImportFromFileModal,
+      addAnotherFile: () => {
+        var _a;
+        resetData();
+        (_a = wizardRef.value) == null ? void 0 : _a.resetWizardData();
+      },
+      getBindingDataCount: () => {
+        var _a;
+        return ((_a = bindResult.value) == null ? void 0 : _a.length) || 0;
+      },
+      getBindingData: () => bindResult.value || []
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        renderSlot(_ctx.$slots, "button", { action: openImportFromFileModal }, () => [
+          createVNode(_sfc_main$1, {
+            icon: __props.icon,
+            type: __props.actionType,
+            "data-test-name": "import-file-button",
+            onClick: openImportFromFileModal
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.actionName || unref(tVU).t("voicenterUi.uploader.importFromFile")), 1)
+            ]),
+            _: 1
+          }, 8, ["icon", "type"])
+        ]),
+        createVNode(_sfc_main$2, {
+          visible: isImportFromFileModalOpen.value,
+          header: unref(tVU).t("voicenterUi.uploader.importEntity", { entity: __props.headerEntityName }),
+          width: __props.modalWidth,
+          breakpoints: {
+            "960px": __props.modalWidth || "80vw",
+            "780px": "90vw",
+            "680px": "98vw"
+          },
+          "data-test-name": "excel-file-import-modal",
+          "content-class": "wizard-modal-content h-full !max-h-full !p-0",
+          onClose: onCancel
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_2, [
+              createVNode(_sfc_main$3, {
+                ref_key: "wizardRef",
+                ref: wizardRef,
+                "active-step": currentStep.value,
+                "show-summary": false,
+                "data-loading": loading.value || uploadFilesProcess.value,
+                "can-next": canNext.value,
+                steps: wizardSteps.value,
+                height: "100%",
+                lazy: "",
+                class: "vc-file-excel-import__wizard",
+                onCancel,
+                onFinal: onFinish,
+                onUpdateStep: onUpdateStepWizard
+              }, createSlots({
+                "import-file": withCtx(() => [
+                  createElementVNode("div", {
+                    class: normalizeClass([{ "self-start": isFileUploaded.value }, "vc-file-excel-import__initial-step w-full h-full"])
+                  }, [
+                    progressBar.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                      createVNode(_sfc_main$4, {
+                        label: __props.progressLabel,
+                        progress: progress.value,
+                        "show-value": true,
+                        height: __props.progressHeight,
+                        "stroke-width": __props.progressStroke,
+                        width: PROGRESS_WIDTH,
+                        color: "var(--primary-actions)"
+                      }, null, 8, ["label", "progress", "height", "stroke-width"])
+                    ])) : (openBlock(), createElementBlock("div", _hoisted_4, [
+                      !isFileUploaded.value ? (openBlock(), createBlock(VcExcelFileUploadBlock, {
+                        key: 0,
+                        "accept-files": __props.acceptFiles,
+                        onAddFiles: startUploadFile
+                      }, createSlots({ _: 2 }, [
+                        _ctx.$slots.requirements ? {
+                          name: "document-requirements",
+                          fn: withCtx(() => [
+                            renderSlot(_ctx.$slots, "requirements")
+                          ]),
+                          key: "0"
+                        } : void 0
+                      ]), 1032, ["accept-files"])) : (openBlock(), createElementBlock("div", _hoisted_5, [
+                        createVNode(_sfc_main$6, {
+                          ref: "fileImportParseResultBlockRef",
+                          activeSheet: activeSheet.value,
+                          "onUpdate:activeSheet": _cache[0] || (_cache[0] = ($event) => activeSheet.value = $event),
+                          showColumns: showColumns.value,
+                          "onUpdate:showColumns": _cache[1] || (_cache[1] = ($event) => showColumns.value = $event),
+                          startRow: startRow.value,
+                          "onUpdate:startRow": [
+                            _cache[2] || (_cache[2] = ($event) => startRow.value = $event),
+                            onReparseHeadRowData
+                          ],
+                          "parsed-data": fileSheetsAllData.value,
+                          "bindings-data": bindings.value,
+                          "visible-rows": TABLE_VISIBLE_ROWS,
+                          "onUpdate:binding": onSetBindData
+                        }, createSlots({ _: 2 }, [
+                          _ctx.$slots.parsedFileActions ? {
+                            name: "result-top-actions",
+                            fn: withCtx(() => [
+                              renderSlot(_ctx.$slots, "parsedFileActions")
+                            ]),
+                            key: "0"
+                          } : void 0,
+                          _ctx.$slots.boundHeaders ? {
+                            name: "resultBoundHeaders",
+                            fn: withCtx(() => [
+                              renderSlot(_ctx.$slots, "boundHeaders")
+                            ]),
+                            key: "1"
+                          } : void 0
+                        ]), 1032, ["activeSheet", "showColumns", "startRow", "parsed-data", "bindings-data"])
+                      ]))
+                    ]))
+                  ], 2)
+                ]),
+                "parsed-table": withCtx(() => [
+                  createVNode(_sfc_main$5, {
+                    ref_key: "fileImportResultBindDataRef",
+                    ref: fileImportResultBindDataRef,
+                    "table-data": bindResult.value,
+                    errors: filteredBindErrors.value,
+                    "count-errors": countErrors.value,
+                    "table-header": bindResultHeaders.value,
+                    "visible-rows": COUNT_VIEW_ERRORS,
+                    onOnSelectedItemsDelete: onBindingRowsDelete,
+                    onOnRowUpdate: onBindingRowUpdate
+                  }, null, 8, ["table-data", "errors", "count-errors", "table-header"])
+                ]),
+                "last-step": withCtx(() => [
+                  uploadFilesProcess.value ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                    createElementVNode("div", _hoisted_8, [
+                      createVNode(_sfc_main$4, {
+                        label: unref(tVU).t("voicenterUi.uploader.loadingSummary", {
+                          send: uploadProgressLabel.value.done,
+                          count: uploadProgressLabel.value.total
+                        }),
+                        progress: progress.value,
+                        "show-value": true,
+                        height: __props.progressHeight,
+                        "stroke-width": __props.progressStroke,
+                        width: PROGRESS_WIDTH,
+                        color: "var(--primary-actions)"
+                      }, null, 8, ["label", "progress", "height", "stroke-width"])
+                    ])
+                  ])) : renderSlot(_ctx.$slots, "final-step", { key: 1 }, () => [
+                    _cache[3] || (_cache[3] = createElementVNode("div", { class: "w-full h-full flex-center text-center font-semibold text-lg" }, " Final Step ", -1))
+                  ])
+                ]),
+                _: 2
+              }, [
+                _ctx.$slots.headerInfo ? {
+                  name: "header-info",
+                  fn: withCtx(() => [
+                    renderSlot(_ctx.$slots, "headerInfo")
+                  ]),
+                  key: "0"
+                } : void 0,
+                renderList(__props.extraSteps, (extraStep) => {
+                  return {
+                    name: extraStep.step,
+                    fn: withCtx(() => [
+                      renderSlot(_ctx.$slots, extraStep.step, { step: extraStep }, () => [
+                        createElementVNode("div", _hoisted_6, toDisplayString(extraStep.step), 1)
+                      ])
+                    ])
+                  };
+                })
+              ]), 1032, ["active-step", "data-loading", "can-next", "steps"])
+            ])
+          ]),
+          _: 3
+        }, 8, ["visible", "header", "width", "breakpoints"])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/library/components/VcExcelUploader/VcExcelFileUploader.vue2.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./VcExcelFileUploader.vue.mjs";
+export {
+  _sfc_main as default
+};

package/library/components/VcExcelUploader/VcFileImportErrorsCard.vue.mjs

@@ -0,0 +1,115 @@
+import '../../assets/components/VcExcelUploader/VcFileImportErrorsCard.css';
+import { defineComponent, ref, watch, openBlock, createElementBlock, createVNode, withCtx, Fragment, renderList, createBlock, createElementVNode, toDisplayString, createCommentVNode, unref } from "vue";
+import { tVU } from "../../localization/index.mjs";
+import _sfc_main$1 from "../VcCollapse/VcCollapseItem.vue.mjs";
+import '../../assets/components/VcIcon/VcIcon.css';import '../../assets/components/VcCollapse/VcCollapseItem.css';/* empty css                                 */
+import _sfc_main$2 from "../VcCollapse/VcCollapse.vue.mjs";
+import _sfc_main$3 from "../VcIcon/VcIcon.vue.mjs";
+/* empty css                     */
+const _hoisted_1 = { class: "card-wrapper" };
+const _hoisted_2 = { class: "font-bold" };
+const _hoisted_3 = {
+  key: 0,
+  class: "px-3 expanded-content-wrap"
+};
+const _hoisted_4 = { class: "flex justify-between w-full" };
+const _hoisted_5 = { class: "flex items-center font-medium flex-grow" };
+const _hoisted_6 = { class: "font-medium text-active-elements pointer mx-1 more-action" };
+const _hoisted_7 = { key: 0 };
+const _hoisted_8 = { key: 1 };
+const _hoisted_9 = { class: "px-3" };
+const _hoisted_10 = { class: "expanded-content" };
+const _hoisted_11 = { class: "font-medium" };
+const _hoisted_12 = { key: 1 };
+const _hoisted_13 = { class: "p-3 rounded text-center bg-main-bg" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "VcFileImportErrorsCard",
+  props: {
+    countErrors: { default: 0 },
+    bindErrors: { default: () => [] }
+  },
+  emits: ["change-error-item"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emit = __emit;
+    const activeErrorCollapseItem = ref(void 0);
+    watch(activeErrorCollapseItem, (val) => {
+      if (val && val.length) {
+        emit("change-error-item", val[0]);
+      }
+    });
+    __expose({
+      reset: () => activeErrorCollapseItem.value = void 0
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_sfc_main$1, { "is-card": "" }, {
+          title: withCtx(() => [
+            createElementVNode("div", _hoisted_2, toDisplayString(`${unref(tVU).t("voicenterUi.uploader.errors")} (${__props.countErrors})`), 1)
+          ]),
+          default: withCtx(() => [
+            __props.countErrors && __props.bindErrors.length ? (openBlock(), createElementBlock("div", _hoisted_3, [
+              createVNode(_sfc_main$2, {
+                modelValue: activeErrorCollapseItem.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeErrorCollapseItem.value = $event),
+                accordion: ""
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.bindErrors, (errorRow, index) => {
+                    return openBlock(), createBlock(_sfc_main$1, {
+                      key: index,
+                      name: `${errorRow.row}`,
+                      "header-class": "error-summary"
+                    }, {
+                      title: withCtx(({ open }) => [
+                        createElementVNode("div", _hoisted_4, [
+                          createElementVNode("div", _hoisted_5, [
+                            createVNode(_sfc_main$3, { icon: "vc-icon-cross text-destructive-actions icon-lg ltr:mr-2  rtl:ml-2" }),
+                            createElementVNode("div", null, toDisplayString(unref(tVU).t("voicenterUi.uploader.errorsInRow", {
+                              row: errorRow.row + 1,
+                              count: errorRow.errors.length || 0
+                            })), 1)
+                          ]),
+                          createElementVNode("div", _hoisted_6, [
+                            open ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(unref(tVU).t("voicenterUi.general.hide")), 1)) : (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(unref(tVU).t("voicenterUi.general.seeMore")), 1))
+                          ])
+                        ])
+                      ]),
+                      default: withCtx(() => [
+                        createElementVNode("div", _hoisted_9, [
+                          createElementVNode("div", _hoisted_10, [
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(errorRow.errors, (errorCol, i) => {
+                              return openBlock(), createElementBlock("div", {
+                                key: i,
+                                class: "py-2"
+                              }, [
+                                createElementVNode("div", _hoisted_11, toDisplayString(errorCol.column), 1),
+                                errorCol.errors.errors ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(errorCol.errors.errors, (errorItem, iKey) => {
+                                  return openBlock(), createElementBlock("div", {
+                                    key: iKey,
+                                    class: "capitalize"
+                                  }, toDisplayString(errorItem.type), 1);
+                                }), 128)) : createCommentVNode("", true)
+                              ]);
+                            }), 128))
+                          ])
+                        ])
+                      ]),
+                      _: 2
+                    }, 1032, ["name"]);
+                  }), 128))
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
+            ])) : (openBlock(), createElementBlock("div", _hoisted_12, [
+              createElementVNode("div", _hoisted_13, toDisplayString(unref(tVU).t("voicenterUi.general.noErrors")), 1)
+            ]))
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};