@webitel/ui-sdk 24.12.5 → 24.12.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.12.5",
+  "version": "24.12.7",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -100,7 +100,7 @@
     "src/plugins/*",
     "src/store/*",
     "src/tests/*",
-    "src/install.js",
+    "src/install.ts",
     "CHANGELOG.md"
   ],
   "dependencies": {
@@ -137,11 +137,14 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
+    "@tsconfig/node22": "^22.0.0",
+    "@types/node": "^22.9.1",
     "@vitejs/plugin-vue": "^5.2.0",
     "@vitest/coverage-v8": "^2.1.5",
     "@vue/compat": "^3.5.13",
     "@vue/compiler-sfc": "^3.5.13",
     "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.6.0",
     "globby": "^14.0.2",
     "happy-dom": "^15.11.6",
     "markdown-it": "^14.1.0",
@@ -151,7 +154,10 @@
     "postcss-prefix-selector": "^2.1.0",
     "prismjs": "^1.29.0",
     "sass": "^1.81.0",
+    "typescript": "5.6.3",
+    "typescript-plugin-css-modules": "^5.1.0",
     "vite": "^5.4.11",
+    "vite-plugin-checker": "^0.8.0",
     "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-static-copy": "^2.1.0",
     "vite-plugin-svg-sprite": "^0.5.2",
@@ -159,6 +165,7 @@
     "vitepress": "1.5.0",
     "vitest": "^2.1.5",
     "vue": "^3.5.13",
+    "vue-tsc": "^2.1.10",
     "vuex": "^4.1.0"
   },
   "optionalDependencies": {

package/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>
@@ -124,7 +124,7 @@
 
 import { computed, useSlots } from 'vue';
 import ComponentSize from '../../enums/ComponentSize/ComponentSize.enum.js';
-import { greaterOrEqual, smallerOrEqual } from '../../scripts/compareSize.js';
+import { greaterOrEqual, smallerOrEqual } from '../../scripts/compareSize.ts';
 import WtImage from '../wt-image/wt-image.vue';
 
 const props = defineProps({
@@ -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);

package/src/components/wt-icon-btn/wt-icon-btn.vue

@@ -14,17 +14,19 @@
   </button>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import WtIcon from '../wt-icon/wt-icon.vue';
 
-const props = defineProps({
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
+const {
+  disabled = false,
+} = defineProps<{
+  disabled?: boolean
+}>();
 
-const emit = defineEmits(['click', 'mousedown']);
+const emit = defineEmits<{
+  click: MouseEvent[]
+  mousedown: MouseEvent[]
+}>();
 </script>
 
 <style lang="scss">

package/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;
     }

package/src/scripts/{compareSize.js → compareSize.ts}

@@ -1,5 +1,13 @@
 import ComponentSize from '../enums/ComponentSize/ComponentSize.enum.js';
 
+export enum eComponentSize {
+    XS = 'xs',
+    SM = 'sm',
+    MD = 'md',
+    LG = 'lg',
+    XL = 'xl',
+}
+
 const numerics = Object.values(ComponentSize).reduce((nums, size, index) => {
   return {
     ...nums,
@@ -59,6 +67,6 @@ export const greaterThen = (s1, s2) => {
  * @param s2
  * @returns {boolean}
  */
-export const greaterOrEqual = (s1, s2) => {
+export const greaterOrEqual = (s1: eComponentSize, s2: eComponentSize): boolean => {
   return compareSize(s1, s2) >= 0;
 };

package/src/scripts/index.js

@@ -19,7 +19,7 @@ import {
   greaterOrEqual as sizeGreaterOrEqual,
   smallerThen as sizeSmallerThen,
   greaterThen as sizeGreaterThen,
-} from './compareSize.js';
+} from './compareSize.ts';
 import {
   camelToSnake,
   camelToKebab,