Merge pull request #371 from webitel/fix/use-table-empty

fix: small refactor useTableEmpty component[WTEL-5282](https://webite…
webitel · Nov 26, 2024 · fef7bc5 · fef7bc5
2 parents cc2cfb3 + 510db8d
commit fef7bc5
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.12.6",
+  "version": "24.12.7",
   "private": false,
   "scripts": {
     "dev": "vite",

diff --git a/src/components/wt-empty/wt-empty.vue b/src/components/wt-empty/wt-empty.vue
@@ -12,8 +12,8 @@
        -->
       <slot name="media" v-bind="{ size: mediaSize }">
         <wt-image
-          :src="image"
           :size="mediaSize"
+          :src="image"
           alt="empty-state"
         />
       </slot>
@@ -253,6 +253,7 @@ const onSecondaryClick = onClick('secondary');
   width: var(--wt-empty-width);
   min-width: var(--wt-empty-min-width);
   max-width: var(--wt-empty-max-width);
+  margin: auto;
   padding: var(--spacing-md);
   text-align: center;
   gap: var(--spacing-md);

diff --git a/src/modules/TableComponentModule/composables/useTableEmpty.js b/src/modules/TableComponentModule/composables/useTableEmpty.js
@@ -29,33 +29,33 @@ export const useTableEmpty = ({ dataList, filters, error, isLoading }, overrides
       },
     },
     headline: {
-      filters: t(''),
-      error: t(''),
-      empty: t(''),
+      filters: '',
+      error: '',
+      empty: '',
     },
     title: {
-      filters: t(''),
-      error: t(''),
-      empty: t(''),
+      filters: '',
+      error: '',
+      empty: '',
     },
     text: {
       filters: t('webitelUI.empty.text.filters'),
-      error: t(''),
+      error: '',
       empty: t('webitelUI.empty.text.empty'),
     },
     primaryActionText: {
-      filters: t(''),
-      error: t(''),
-      empty: t(''),
+      filters: '',
+      error: '',
+      empty: '',
     },
     secondaryActionText: {
-      filters: t(''),
-      error: t(''),
-      empty: t(''),
+      filters: '',
+      error: '',
+      empty: '',
     },
   }));
 
-  const merged = computed(() => deepmerge(defaults, overrides));
+  const merged = computed(() => deepmerge(defaults.value, overrides));
 
   let darkMode = computed(() => false);
 
@@ -76,11 +76,11 @@ export const useTableEmpty = ({ dataList, filters, error, isLoading }, overrides
   });
 
   const emptyState = computed(() => {
-    return !isLoading.value && !error.value && !!dataList.value.length;
+    return !isLoading?.value && !error?.value && !dataList?.value?.length;
   });
 
   const emptyCause = computed(() => {
-    if (!emptyState.value) return null;
+    if (!emptyState?.value) return null;
 
     if (error.value) return EmptyCause.ERROR;
     if (filters.value) {
@@ -98,11 +98,11 @@ export const useTableEmpty = ({ dataList, filters, error, isLoading }, overrides
   const image = computed(() => {
     switch (emptyCause.value) {
       case EmptyCause.ERROR:
-        return darkMode.value ? merged.value.image.error.dark : merged.value.image.error.light;
+        return darkMode?.value ? merged.value.image.error.dark : merged.value.image.error.light;
       case EmptyCause.FILTERS:
-        return darkMode.value ? merged.value.image.filters.dark : merged.value.image.filters.light;
+        return darkMode?.value ? merged.value.image.filters.dark : merged.value.image.filters.light;
       case EmptyCause.EMPTY:
-        return darkMode.value ? merged.value.image.empty.dark : merged.value.image.empty.light;
+        return darkMode?.value ? merged.value.image.empty.dark : merged.value.image.empty.light;
       default:
         return null;
     }