@webitel/ui-sdk 26.8.102 → 26.8.103

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.8.102",
+	"version": "26.8.103",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",

package/src/modules/UploadCsvPopup/components/wt-upload-csv-popup.vue

@@ -2,6 +2,7 @@
   <wt-popup
     v-bind="$attrs"
     :shown="file"
+    size="md"
     class="wt-upload-csv-popup"
     @close="close"
   >
@@ -62,14 +63,10 @@
         <!-- FIELDS MAPPING -->
         <div class="wt-upload-csv-popup-mapping">
           <div class="wt-upload-csv-popup-mapping-item">
-            <p
-              class="wt-upload-csv-popup-mapping-item__field typo-subtitle-1"
-            >
+            <p class="wt-upload-csv-popup-mapping-item__field typo-subtitle-1">
               {{ t('objects.CSV.fieldName') }}
             </p>
-            <p
-              class="wt-upload-csv-popup-mapping-item__field typo-subtitle-1"
-            >
+            <p class="wt-upload-csv-popup-mapping-item__field typo-subtitle-1">
               {{ t('objects.CSV.CSVColumn') }}
             </p>
           </div>
@@ -134,77 +131,76 @@
   </wt-popup>
 </template>
 
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+>
 import { ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import useUploadCsv, {
-	type UseUploadCsvProps,
+  type UseUploadCsvProps,
 } from '../composable/useUploadCsv';
 import type { CsvMappingField } from '../scripts/normalizeCSVData';
 import HandlingCSVMode from '../types/WtUploadCSVHandlingMode.enum';
 
 interface CharsetOption {
-	name: string;
-	value: string;
+  name: string;
+  value: string;
 }
 
 interface Props extends UseUploadCsvProps {
-	file: File | null;
-	mappingFields: CsvMappingField[];
+  file: File | null;
+  mappingFields: CsvMappingField[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
-	file: null,
-	mappingFields: () => [],
-	handlingMode: HandlingCSVMode.PROCESS,
+  file: null,
+  mappingFields: () => [],
+  handlingMode: HandlingCSVMode.PROCESS,
 });
 
 const emit = defineEmits<{
-	(e: 'changeMappingFields', value: unknown[]): void;
-	(e: 'save'): void;
-	(e: 'close'): void;
+  (e: 'changeMappingFields', value: unknown[]): void;
+  (e: 'save'): void;
+  (e: 'close'): void;
 }>();
 
 const { t } = useI18n();
 
 const getFieldLabel = (field: CsvMappingField) =>
-	field.locale ? t(field.locale) : field.name;
+  field.locale ? t(field.locale) : field.name;
 
 const skipHeaders = ref(true);
 const separator = ref(',');
 const charsetOptions = ref<CharsetOption[]>([]);
 const charset = ref<CharsetOption>({
-	name: 'UTF-8',
-	value: 'utf-8',
+  name: 'UTF-8',
+  value: 'utf-8',
 });
 
 const { file, mappingFields } = toRefs(props);
 
 const {
-	isReadingFile,
-	isParsingCSV,
-	isParsingPreview,
-	csvPreviewTableData,
-	csvPreviewTableHeaders,
-	csvColumns,
-	allowSaveAction,
-	processCSV,
-	close,
+  isReadingFile,
+  isParsingCSV,
+  isParsingPreview,
+  csvPreviewTableData,
+  csvPreviewTableHeaders,
+  csvColumns,
+  allowSaveAction,
+  processCSV,
+  close,
 } = useUploadCsv({
-	props,
-	emit,
-	skipHeaders,
-	separator,
+  props,
+  emit,
+  skipHeaders,
+  separator,
 });
 </script>
 
-<style lang="scss">
+<style scoped>
 .wt-upload-csv-popup {
-  :deep(.wt-popup__popup) {
-    min-height: 40vh;
-  }
-
   .wt-upload-csv-popup__reading-file-loader {
     position: absolute;
     top: 50%;
@@ -228,7 +224,6 @@ const {
 
   .wt-upload-csv-popup-form__file-preview .wt-table {
     overflow: auto;
-    max-width: 60vw;
   }
 
   .wt-upload-csv-popup-mapping {
@@ -240,15 +235,15 @@ const {
       grid-column-gap: 20px;
       grid-row-gap: 10px;
       margin-bottom: var(--spacing-sm);
+    }
 
-      &__field {
-        align-self: center;
-      }
+    .wt-upload-csv-popup-mapping-item__field {
+      align-self: center;
+    }
 
-      &__select :deep(.wt-label),
-      &__select :deep(.wt-input-info) {
-        display: none;
-      }
+    .wt-upload-csv-popup-mapping-item__select :deep(.wt-label),
+    .wt-upload-csv-popup-mapping-item__select :deep(.wt-input-info) {
+      display: none;
     }
   }
 }

package/src/modules/UploadCsvPopup/composable/useUploadCsv.ts

@@ -226,6 +226,7 @@ const useUploadCsv = ({
 		(file) => {
 			if (file) initUploadPopup();
 		},
+		{ immediate: true }, // if popup has v-if=file
 	);
 
 	return {