@webitel/ui-sdk 25.12.25 → 25.12.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.12.25",
+  "version": "25.12.27",
   "private": false,
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run lint:fix || true) && npm run publish-lib",

package/src/components/wt-button/wt-button.vue

@@ -35,8 +35,7 @@
 
 <script lang="ts" setup>
 import type { ButtonProps } from 'primevue';
-import {computed, defineEmits, defineProps, ref, useAttrs, watch} from 'vue';
-import {useStore} from "vuex";
+import { computed, defineEmits, defineProps, inject,ref, useAttrs, watch } from 'vue';
 
 import { ButtonColor, ButtonVariant, ComponentSize,  } from '../../enums';
 
@@ -81,9 +80,34 @@ const emit = defineEmits(['click']);
 const attrs = useAttrs();
 
 const showLoader = ref(false);
-const store = useStore();
 
-const darkMode = computed(() => store.getters['appearance/DARK_MODE']);
+// @Ler24
+// Compatibility mode for Vuex (old mode) and when there is no Vuex in project (new mode)
+const store = ref(null);
+
+const initStore = async () => {
+  try {
+    const vuex = await import('vuex');
+    store.value = vuex.useStore();
+  } catch (e) {
+    store.value = null;
+  }
+}
+initStore();
+
+const injectDarkMode = inject('darkMode');
+
+const darkMode = computed(() => {
+  if (injectDarkMode?.value) {
+    return injectDarkMode.value;
+  }
+
+  if (store?.value?.getters) {
+    return store?.value?.getters['appearance/DARK_MODE'] ?? false;
+  }
+
+  return false;
+});
 
 /**
  * @author: @Opelsandr Palonnyi

package/src/plugins/primevue/theme/components/breadcrumb/breadcrumb.js

@@ -1,7 +1,7 @@
 import { BreadcrumbScheme } from '@webitel/styleguide/component-schemes';
 
 const breadcrumb = {
-  ...BreadcrumbScheme.sizes,
+  root: BreadcrumbScheme.sizes,
   colorScheme: BreadcrumbScheme.colorScheme,
 
 

package/src/plugins/primevue/theme/components/button/button.js

@@ -94,7 +94,7 @@ const generateCustomOutlinedColorCss = ({ colorName, dt }) => `
 `
 
 const button = {
-  ...ButtonScheme.sizes,
+  root: ButtonScheme.sizes,
   colorScheme: ButtonScheme.colorScheme,
 
   extend: {

package/src/plugins/primevue/theme/components/checkbox/checkbox.js

@@ -1,7 +1,7 @@
 import { CheckboxScheme } from "@webitel/styleguide/component-schemes";
 
 const checkbox = {
-  ...CheckboxScheme.sizes,
+  root: CheckboxScheme.sizes,
   colorScheme: CheckboxScheme.colorScheme,
 
   css: ({ dt }) => `

package/src/plugins/primevue/theme/components/chip/chip.js

@@ -1,5 +1,4 @@
 import { ChipScheme } from '@webitel/styleguide/component-schemes';
-
 const generateCustomColorCss = ({ colorName, dt }) => `
         .p-chip-${colorName} {
             background: ${dt(`chip.${colorName}.background`)};
@@ -16,7 +15,7 @@ const generateCustomColorCss = ({ colorName, dt }) => `
 `;
 
 const chip = {
-  ...ChipScheme.sizes,
+  root: ChipScheme.sizes,
   colorScheme: ChipScheme.colorScheme,
 
   // Rewrite the default chip styles in the theme here:

package/src/plugins/primevue/theme/components/divider/divider.js

@@ -1,7 +1,7 @@
 import { DividerScheme } from '@webitel/styleguide/component-schemes';
 
 const divider = {
-  ...DividerScheme.sizes,
+  root: DividerScheme.sizes,
   colorScheme: DividerScheme.colorScheme,
 };
 

package/src/plugins/primevue/theme/components/galleria/galleria.js

@@ -1,7 +1,7 @@
 import { GalleriaScheme } from '@webitel/styleguide/component-schemes';
 
 const galleria = {
-  ...GalleriaScheme.sizes,
+  root: GalleriaScheme.sizes,
   colorScheme: GalleriaScheme.colorScheme,
 
   css: ({dt}) => `

package/src/plugins/primevue/theme/components/menubar/menubar.js

@@ -10,7 +10,7 @@ const generateCustomSlotCss = ({ slot, dt }) => `
 `;
 
 const menubar = {
-  ...MenubarScheme.sizes,
+  root: MenubarScheme.sizes,
   colorScheme: MenubarScheme.colorScheme,
 
   css: ({ dt }) => `

package/src/plugins/primevue/theme/components/popover/popover.js

@@ -1,7 +1,7 @@
 import { PopoverScheme } from '@webitel/styleguide/component-schemes';
 
 const popover = {
-  ...PopoverScheme.sizes,
+  root: PopoverScheme.sizes,
   colorScheme: PopoverScheme.colorScheme,
 };
 

package/src/plugins/primevue/theme/components/radio/radio.js

@@ -1,7 +1,7 @@
 import { RadioScheme } from '@webitel/styleguide/component-schemes';
 
 const radio = {
-  ...RadioScheme.sizes,
+  root: RadioScheme.sizes,
   colorScheme: RadioScheme.colorScheme,
 
   css: ({dt}) => `

package/src/plugins/primevue/theme/components/slider/slider.js

@@ -1,7 +1,7 @@
 import { SliderScheme } from '@webitel/styleguide/component-schemes';
 
 const slider = {
-  ...SliderScheme.sizes,
+  root: SliderScheme.sizes,
   colorScheme: SliderScheme.colorScheme,
 };
 

package/src/plugins/primevue/theme/components/switcher/switcher.js

@@ -1,7 +1,7 @@
 import { SwitcherScheme } from '@webitel/styleguide/component-schemes';
 
 const switcher = {
-  ...SwitcherScheme.sizes,
+  root: SwitcherScheme.sizes,
   colorScheme: SwitcherScheme.colorScheme,
 
   css: ({ dt }) => `

package/src/plugins/primevue/theme/components/table/table.js

@@ -16,7 +16,7 @@ const rowStateStyles = (state, dt) => `
 `;
 
 const table = {
-  ...TableScheme.sizes,
+  root: TableScheme.sizes,
   colorScheme: TableScheme.colorScheme,
 
   // Rewrite the default table styles in the theme here:

package/src/plugins/primevue/theme/components/textarea/textarea.js

@@ -1,7 +1,7 @@
 import { TextareaScheme } from '@webitel/styleguide/component-schemes';
 
 const textarea = {
-  ...TextareaScheme.sizes,
+  root: TextareaScheme.sizes,
   colorScheme: TextareaScheme.colorScheme,
 
   css: ({ dt }) => `

package/src/plugins/primevue/theme/components/toolbar/toolbar.js

@@ -1,7 +1,7 @@
 import { ToolbarScheme } from '@webitel/styleguide/component-schemes';
 
 const toolbar = {
-  ...ToolbarScheme.sizes,
+  root: ToolbarScheme.sizes,
   colorScheme: ToolbarScheme.colorScheme,
 };
 

package/src/plugins/primevue/theme/components/tooltip/tooltip.js

@@ -1,7 +1,7 @@
 import { TooltipScheme } from '@webitel/styleguide/component-schemes';
 
 const tooltip = {
-  ...TooltipScheme.sizes,
+  root: TooltipScheme.sizes,
   colorScheme: TooltipScheme.colorScheme,
 
   css: ({ dt }) => `

package/types/plugins/primevue/theme/components/breadcrumb/breadcrumb.d.ts

@@ -1,6 +1,25 @@
 export default breadcrumb;
-declare const breadcrumb: {
-    colorScheme: {
+declare namespace breadcrumb {
+    let root: {
+        root: {
+            padding: string;
+            gap: string;
+            transitionDuration: string;
+        };
+        item: {
+            borderRadius: string;
+            gap: string;
+            focusRing: {
+                width: string;
+                style: string;
+                offset: string;
+            };
+        };
+        separator: {
+            size: string;
+        };
+    };
+    let colorScheme: {
         light: {
             root: {
                 background: string;
@@ -44,24 +63,7 @@ declare const breadcrumb: {
             };
         };
     };
-    css: ({ dt }: {
+    function css({ dt }: {
         dt: any;
-    }) => string;
-    root: {
-        padding: string;
-        gap: string;
-        transitionDuration: string;
-    };
-    item: {
-        borderRadius: string;
-        gap: string;
-        focusRing: {
-            width: string;
-            style: string;
-            offset: string;
-        };
-    };
-    separator: {
-        size: string;
-    };
-};
+    }): string;
+}

package/types/plugins/primevue/theme/components/button/button.d.ts

@@ -1,6 +1,48 @@
 export default button;
-declare const button: {
-    colorScheme: {
+declare namespace button {
+    let root: {
+        borderRadius: string;
+        roundedBorderRadius: string;
+        gap: string;
+        paddingX: string;
+        paddingY: string;
+        iconOnlyWidth: string;
+        sm: {
+            fontSize: string;
+            paddingX: string;
+            paddingY: string;
+            iconOnlyWidth: string;
+        };
+        lg: {
+            fontSize: string;
+            paddingX: string;
+            paddingY: string;
+            iconOnlyWidth: string;
+        };
+        icon: {
+            xs: {
+                padding: string;
+            };
+            sm: {
+                padding: string;
+            };
+            md: {
+                padding: string;
+            };
+        };
+        label: {
+            fontWeight: string;
+        };
+        raisedShadow: string;
+        focusRing: {
+            width: string;
+            style: string;
+            offset: string;
+        };
+        badgeSize: string;
+        transitionDuration: string;
+    };
+    let colorScheme: {
         light: {
             root: {
                 primary: {
@@ -452,55 +494,15 @@ declare const button: {
             };
         };
     };
-    extend: {
-        transfer: {
-            background: string;
-            hoverBackground: string;
-            color: string;
-            hoverColor: string;
-        };
-    };
-    css: ({ dt }: {
+    namespace extend {
+        namespace transfer {
+            let background: string;
+            let hoverBackground: string;
+            let color: string;
+            let hoverColor: string;
+        }
+    }
+    function css({ dt }: {
         dt: any;
-    }) => string;
-    borderRadius: string;
-    roundedBorderRadius: string;
-    gap: string;
-    paddingX: string;
-    paddingY: string;
-    iconOnlyWidth: string;
-    sm: {
-        fontSize: string;
-        paddingX: string;
-        paddingY: string;
-        iconOnlyWidth: string;
-    };
-    lg: {
-        fontSize: string;
-        paddingX: string;
-        paddingY: string;
-        iconOnlyWidth: string;
-    };
-    icon: {
-        xs: {
-            padding: string;
-        };
-        sm: {
-            padding: string;
-        };
-        md: {
-            padding: string;
-        };
-    };
-    label: {
-        fontWeight: string;
-    };
-    raisedShadow: string;
-    focusRing: {
-        width: string;
-        style: string;
-        offset: string;
-    };
-    badgeSize: string;
-    transitionDuration: string;
-};
+    }): string;
+}

package/types/plugins/primevue/theme/components/checkbox/checkbox.d.ts

@@ -1,6 +1,37 @@
 export default checkbox;
-declare const checkbox: {
-    colorScheme: {
+declare namespace checkbox {
+    let root: {
+        root: {
+            borderRadius: string;
+            width: string;
+            height: string;
+            wrapperWidth: string;
+            wrapperHeight: string;
+            sm: {
+                width: string;
+                height: string;
+            };
+            lg: {
+                width: string;
+                height: string;
+            };
+            focusRing: {
+                width: string;
+                style: string;
+                offset: string;
+            };
+        };
+        icon: {
+            size: string;
+            sm: {
+                size: string;
+            };
+            lg: {
+                size: string;
+            };
+        };
+    };
+    let colorScheme: {
         light: {
             root: {
                 background: string;
@@ -60,36 +91,7 @@ declare const checkbox: {
             };
         };
     };
-    css: ({ dt }: {
+    function css({ dt }: {
         dt: any;
-    }) => string;
-    root: {
-        borderRadius: string;
-        width: string;
-        height: string;
-        wrapperWidth: string;
-        wrapperHeight: string;
-        sm: {
-            width: string;
-            height: string;
-        };
-        lg: {
-            width: string;
-            height: string;
-        };
-        focusRing: {
-            width: string;
-            style: string;
-            offset: string;
-        };
-    };
-    icon: {
-        size: string;
-        sm: {
-            size: string;
-        };
-        lg: {
-            size: string;
-        };
-    };
-};
+    }): string;
+}

package/types/plugins/primevue/theme/components/chip/chip.d.ts

@@ -1,6 +1,21 @@
 export default chip;
-declare const chip: {
-    colorScheme: {
+declare namespace chip {
+    let root: {
+        borderRadius: string;
+        paddingX: string;
+        paddingY: string;
+        gap: string;
+        transitionDuration: string;
+        removeIcon: {
+            size: string;
+            focusRing: {
+                width: string;
+                style: string;
+                offset: string;
+            };
+        };
+    };
+    let colorScheme: {
         light: {
             background: string;
             color: string;
@@ -104,20 +119,7 @@ declare const chip: {
             };
         };
     };
-    css: ({ dt }: {
+    function css({ dt }: {
         dt: any;
-    }) => string;
-    borderRadius: string;
-    paddingX: string;
-    paddingY: string;
-    gap: string;
-    transitionDuration: string;
-    removeIcon: {
-        size: string;
-        focusRing: {
-            width: string;
-            style: string;
-            offset: string;
-        };
-    };
-};
+    }): string;
+}

package/types/plugins/primevue/theme/components/divider/divider.d.ts

@@ -1,6 +1,22 @@
 export default divider;
-declare const divider: {
-    colorScheme: {
+declare namespace divider {
+    let root: {
+        horizontal: {
+            margin: string;
+            padding: string;
+            content: {
+                padding: string;
+            };
+        };
+        vertical: {
+            margin: string;
+            padding: string;
+            content: {
+                padding: string;
+            };
+        };
+    };
+    let colorScheme: {
         light: {
             root: {
                 borderColor: string;
@@ -20,18 +36,4 @@ declare const divider: {
             };
         };
     };
-    horizontal: {
-        margin: string;
-        padding: string;
-        content: {
-            padding: string;
-        };
-    };
-    vertical: {
-        margin: string;
-        padding: string;
-        content: {
-            padding: string;
-        };
-    };
-};
+}