@webitel/ui-sdk 25.4.34 → 25.4.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.4.34",
+  "version": "25.4.35",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -114,7 +114,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vuepic/vue-datepicker": "^4.5.1",
     "@vueuse/components": "^11.2.0",
-    "@webitel/styleguide": "^24.12.25",
+    "@webitel/styleguide": "^24.12.26",
     "autosize": "^6.0.1",
     "axios": "^1.7.7",
     "clipboard-copy": "^4.0.1",

package/src/components/on-demand/wt-navigation-menu/components/_internals/nav-menu-lvl-2.vue

@@ -29,6 +29,7 @@ const props = defineProps({
 
 <style lang="scss" scoped>
 @use '../../css/nav-menu';
+@use '@webitel/styleguide/scroll' as *;
 
 .nav-menu-lvl-2 {
   @extend %wt-scrollbar;

package/src/components/on-demand/wt-navigation-menu/components/wt-navigation-menu.vue

@@ -82,7 +82,9 @@ function select(category) {
 </script>
 
 <style lang="scss" scoped>
-@use '../../../../css/main' as *;
+@use '@webitel/styleguide/viewport-breakpoints' as *;
+@use '@webitel/styleguide/scroll' as *;
+
 .wt-navigation-menu {
   display: flex;
   align-items: center;

package/src/components/on-demand/wt-navigation-menu/css/_nav-menu.scss

@@ -1,4 +1,4 @@
-@use '../../../../css/main' as *;
+@use '@webitel/styleguide/typography' as *;
 
 .nav-menu {
   &__category {

package/src/components/on-demand/wt-selection-popup/wt-selection-popup.vue

@@ -118,7 +118,7 @@ function selectOption(option) {
 </script>
 
 <style lang="scss" scoped>
-@use '../../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .wt-selection-popup {
   &__options {

package/src/components/on-demand/wt-start-page/components/start-page-card.vue

@@ -47,7 +47,7 @@ const open = () => {
 </script>
 
 <style lang="scss" scoped>
-@use '../../../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .start-page-card {
   display: flex;

package/src/components/wt-app-header/wt-app-navigator.vue

@@ -150,7 +150,8 @@ function close() {
 </script>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/scroll' as *;
+@use '@webitel/styleguide/typography' as *;
 
 .wt-app-navigator {
   position: relative;

package/src/components/wt-app-header/wt-header-actions.vue

@@ -131,7 +131,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .wt-header-actions {
   position: relative;

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

@@ -117,7 +117,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .wt-button {
   @extend %typo-button;

package/src/components/wt-chip/wt-chip.scss

@@ -1,4 +1,4 @@
-@use '../../css/main' as *;
+@use '@webitel/styleguide/typography' as *;
 
 .wt-chip {
   @extend %typo-body-2;

package/src/components/wt-context-menu/wt-context-menu.vue

@@ -86,7 +86,7 @@ function handleOptionClick({ option, index, hide }) {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .wt-context-menu {
   line-height: 0;

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

@@ -23,7 +23,9 @@
       :format="isDateTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy'"
       :locale="$i18n.locale === 'ua' ? 'uk' : $i18n.locale"
       :model-value="+value"
-      :placeholder="placeholder || (isDateTime ? '00/00/00 00:00' : '00/00/0000')"
+      :placeholder="
+        placeholder || (isDateTime ? '00/00/00 00:00' : '00/00/0000')
+      "
       auto-apply
       class="wt-datepicker__datepicker"
       v-bind="{ ...$attrs, ...$props }"
@@ -164,7 +166,7 @@ const clearValue = () => {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .wt-datepicker :deep(.dp__main) {
   .dp__input_icon {

package/src/components/wt-dual-panel/wt-dual-panel.vue

@@ -68,7 +68,7 @@ const sidePanelSize = computed(() =>
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/scroll' as *;
 $side-panel-md-width: 320px;
 
 .wt-dual-panel {

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

@@ -67,7 +67,7 @@ const dummy = computed(() => (props.darkMode ? dummyDark : dummyLight));
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .wt-dummy {
   display: flex;

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

@@ -269,7 +269,7 @@ const onSecondaryClick = onClick('secondary');
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .wt-empty {
   box-sizing: border-box;

package/src/components/wt-expansion-panel/wt-expansion-panel.vue

@@ -85,7 +85,7 @@ watch(
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .wt-expansion-panel {
   display: flex;

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

@@ -25,7 +25,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .wt-headline {
   display: flex;

package/src/components/wt-headline-nav/wt-headline-nav.vue

@@ -49,7 +49,7 @@ const props = defineProps({
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .wt-headline-nav {
   display: flex;

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

@@ -110,7 +110,7 @@ const height = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+//@use '../../css/styleguide/styleguide';
 
 .wt-image {
   display: flex;

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

@@ -76,7 +76,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .wt-indicator {
   display: flex;

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

@@ -281,7 +281,7 @@ defineExpose({
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main' as *;
+@use '../../css/styleguide/styleguide' as *;
 
 .wt-input {
   cursor: text;

package/src/components/wt-input-info/wt-input-info.vue

@@ -26,7 +26,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .wt-input-info {
   @extend %typo-caption;

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

@@ -36,17 +36,17 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .wt-label {
-  @extend %typo-body-1;
+  @extend %typo-subtitle-2;
 
   display: flex;
   align-items: center;
   cursor: text;
   transition: var(--transition);
   color: var(--wt-label-color);
-  //padding: var(--wt-label-padding);
+  padding: var(--wt-label-padding);
 
   &--invalid {
     color: var(--wt-label-error-color);

package/src/components/wt-navigation-bar/wt-navigation-bar.vue

@@ -120,7 +120,7 @@ import CrmLight from './assets/light/app-logo-light-crm.svg';
 import HistoryLight from './assets/light/app-logo-light-history.svg';
 import SupervisorLight from './assets/light/app-logo-light-supervisor.svg';
 import WorkspaceLight from './assets/light/app-logo-light-workspace.svg';
-import { WtNavigationBarNavItem } from "./types/WtNavigationBar";
+import { WtNavigationBarNavItem } from './types/WtNavigationBar';
 
 const appLogo = {
   [WebitelApplications.SUPERVISOR]: {
@@ -171,7 +171,7 @@ export default {
     logoRoute: {
       type: String,
       default: '',
-    }
+    },
   },
   data: () => ({
     isOpened: false,
@@ -223,7 +223,8 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
+@use '@webitel/styleguide/scroll' as *;
 
 .wt-navigation-bar__menu-btn {
   display: block;

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

@@ -51,7 +51,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .wt-notification {
   @extend %typo-body-1;

package/src/components/wt-notifications-bar/wt-notifications-bar.vue

@@ -64,7 +64,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/scroll' as *;
 
 .wt-notifications-bar {
   @extend %wt-scrollbar;

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

@@ -111,7 +111,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .wt-pagination {
   @extend %typo-body-1;

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

@@ -178,7 +178,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main' as *;
+@use '@webitel/styleguide/typography' as *;
 
 .wt-player {
   @extend %typo-body-2;

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

@@ -172,7 +172,8 @@ watch(wrapperShown, (value) => {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
+@use '@webitel/styleguide/scroll' as *;
 
 .wt-popup {
   position: fixed;

package/src/components/wt-search-bar/wt-search-bar.vue

@@ -167,7 +167,7 @@ function updateSearchMode({ option }) {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main' as *;
+@use '../../css/styleguide/styleguide' as *;
 
 .wt-search-bar {
   cursor: text;

package/src/components/wt-select/_multiselect.scss

@@ -1,4 +1,4 @@
-@use '../../css/main' as *;
+@use '../../css/styleguide/styleguide' as *;
 
 :deep(.multiselect) {
   position: relative;

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

@@ -317,7 +317,8 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
+@use '@webitel/styleguide/scroll' as *;
 
 .wt-table {
   @extend %wt-scrollbar;

package/src/components/wt-table-column-select/wt-table-column-select.vue

@@ -131,7 +131,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/scroll' as *;
 
 $list-height: 400px;
 $list-width-sm: calc(

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

@@ -87,7 +87,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .wt-tabs {
   position: relative;

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

@@ -172,7 +172,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main' as *;
+@use '../../css/styleguide/styleguide' as *;
 
 .wt-textarea {
   cursor: text;

package/src/components/wt-time-input/wt-time-input.vue

@@ -117,7 +117,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '../../css/main' as *;
+@use '../../css/styleguide/styleguide' as *;
 
 .wt-time-input {
   display: inline-block;

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

@@ -166,7 +166,7 @@ onBeforeUnmount(() => {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss';
+@use '@webitel/styleguide/typography' as *;
 
 .wt-tooltip {
   display: inline-block;

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

@@ -123,7 +123,7 @@ const compareSelectElement = (item: any) => {
 </script>
 
 <style lang="scss">
-@use '../../css/main.scss' as *;
+@use '@webitel/styleguide/scroll' as *;
 
 .wt-tree {
   padding: var(--spacing-sm);

package/src/components/wt-tree-line/wt-tree-line.vue

@@ -226,7 +226,7 @@ watch(
 </script>
 
 <style lang="scss">
-@use '../../css/main.scss' as *;
+@use '@webitel/styleguide/typography' as *;
 @use './variables.scss' as *;
 
 .wt-tree-line {

package/src/components/wt-tree-table/wt-tree-table.vue

@@ -93,7 +93,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, withDefaults} from 'vue';
+import { computed, withDefaults } from 'vue';
 
 import { useWtTable } from '../../composables/useWtTable/useWtTable';
 import { getNextSortOrder } from '../../scripts/sortQueryAdapters';
@@ -265,7 +265,8 @@ const handleSelection = (row, select) => {
 </style>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss' as *;
+@use '@webitel/styleguide/typography' as *;
+@use '@webitel/styleguide/scroll' as *;
 
 .wt-tree-table {
   @extend %wt-scrollbar;

package/src/components/wt-tree-table-row/wt-tree-table-row.vue

@@ -199,7 +199,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-@use '../../css/main.scss' as *;
+@use '@webitel/styleguide/typography' as *;
 
 .wt-tree-table-td {
   @extend %typo-body-1;

package/src/css/main.scss

@@ -1,7 +1,7 @@
 @forward 'styleguide/styleguide';
 @use 'styleguide/styleguide' as *;
-@use 'pages/card-page';
 @use 'pages/table-page';
+@use 'pages/card-page';
 
 @include wt-placeholder;
 
@@ -27,6 +27,10 @@ body {
   margin: 0;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 .theme--dark {
   body {
     color-scheme: dark;

package/src/css/pages/card-page.scss

@@ -1,4 +1,4 @@
-@use '../styleguide/styleguide' as *;
+@use '@webitel/styleguide/typography' as *;
 
 .opened-card {
   width: 100%;

package/src/css/pages/table-page.scss

@@ -1,4 +1,4 @@
-@use '../styleguide/styleguide' as *;
+@use '@webitel/styleguide/typography' as *;
 
 .table-page {
   &.wt-page-wrapper {

package/src/css/styleguide/display-helpers/_display-helpers.scss

@@ -1,5 +1,4 @@
-@use '@webitel/styleguide' as *;
-//@use '../viewport-breakpoints/viewport-breakpoints' as *;
+@use '@webitel/styleguide/viewport-breakpoints' as *;
 
 .d-none {
   display: none;

package/src/css/styleguide/placeholder/_placeholder.scss

@@ -2,11 +2,6 @@
 // https://stackoverflow.com/a/49192800/17782185
 @use 'sass:selector';
 
-//@mixin optional-at-root($sel) {
-//  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
-//    @content;
-//  }
-//}
 @mixin optional-at-root($sel) {
   @if & {
     @at-root #{selector.append(&, $sel)} {

package/src/modules/Filters/v2/filter-presets/components/apply-preset/apply-preset-action.vue

@@ -195,6 +195,8 @@ const deletePreset = async (preset: EnginePresetQuery) => {
 </script>
 
 <style lang="scss" scoped>
+@use '@webitel/styleguide/scroll' as *;
+
 .apply-preset-action .wt-popup {
   :deep(.wt-popup__popup) {
     height: 480px;

package/src/modules/Filters/v2/filter-presets/components/save-preset/save-preset-popup.vue

@@ -4,7 +4,9 @@
     @close="emit('close')"
   >
     <template #title>
-      {{ `${t('reusable.save')} ${t('webitelUI.filters.presets.preset').toLowerCase()}` }}
+      {{
+        `${t('reusable.save')} ${t('webitelUI.filters.presets.preset').toLowerCase()}`
+      }}
     </template>
 
     <template #main>
@@ -22,9 +24,7 @@
         />
       </form>
 
-      <preset-filters-preview
-        :filters="appliedFilters"
-      />
+      <preset-filters-preview :filters="appliedFilters" />
     </template>
 
     <template #actions>
@@ -46,16 +46,17 @@
 </template>
 
 <script setup lang="ts">
-import {computed, reactive, ref} from "vue";
-import {useI18n} from "vue-i18n";
-import {useVuelidate} from "@vuelidate/core";
-import {required} from "@vuelidate/validators";
-import {EnginePresetQuery} from "webitel-sdk";
-import type {IFiltersManager} from "../../../index";
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { computed, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { EnginePresetQuery } from 'webitel-sdk';
+
 import { WtPopup } from '../../../../../../components/index';
-import PresetDescriptionField from "../_shared/input-fields/preset-description-field.vue";
-import PresetFiltersPreview from "../_shared/preset-filters-preview.vue";
-import PresetNameField from "../_shared/input-fields/preset-name-field.vue";
+import type { IFiltersManager } from '../../../index';
+import PresetDescriptionField from '../_shared/input-fields/preset-description-field.vue';
+import PresetNameField from '../_shared/input-fields/preset-name-field.vue';
+import PresetFiltersPreview from '../_shared/preset-filters-preview.vue';
 
 export type SubmitConfig = {
   onSuccess?: () => void;
@@ -72,7 +73,7 @@ const emit = defineEmits<{
   close: [];
 }>();
 
-const {t} = useI18n();
+const { t } = useI18n();
 
 const isSaving = ref(false);
 
@@ -81,13 +82,17 @@ const presetForm = reactive({
   description: '',
 });
 
-const v$ = useVuelidate(computed(() => {
-  return {
-    name: {
-      required,
-    },
-  };
-}), presetForm, {$autoDirty: true});
+const v$ = useVuelidate(
+  computed(() => {
+    return {
+      name: {
+        required,
+      },
+    };
+  }),
+  presetForm,
+  { $autoDirty: true },
+);
 v$.value.$touch();
 
 const appliedFilters = computed(() => {
@@ -110,10 +115,11 @@ const save = () => {
     },
   });
 };
-
 </script>
 
 <style scoped lang="scss">
+@use '@webitel/styleguide/scroll' as *;
+
 .save-preset-form {
   display: flex;
   flex-direction: column;