@webitel/ui-sdk 24.12.37 → 24.12.38

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

@@ -84,11 +84,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-popup {
   position: fixed;

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

@@ -48,7 +48,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

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

@@ -89,7 +89,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

package/src/components/wt-rounded-action/wt-rounded-action.vue

@@ -86,7 +86,7 @@ const iColor = computed(() => {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

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

@@ -80,6 +80,7 @@
 
 <script setup>
 import { computed, toRefs } from 'vue';
+
 import { useValidation } from '../../mixins/validationMixin/useValidation.js';
 import debounce from '../../scripts/debounce.js';
 
@@ -162,11 +163,11 @@ function updateSearchMode({ option }) {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main' as *;
 
 .wt-search-bar {
   cursor: text;

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

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

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

@@ -284,11 +284,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import './multiselect.scss';
+@use './multiselect.scss' as *;
 
 .wt-select {
   width: 100%;

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

@@ -99,7 +99,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

package/src/components/wt-status-select/wt-status-select.vue

@@ -104,7 +104,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

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

@@ -56,7 +56,7 @@ const stepWithCompleted = computed(() =>
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

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

@@ -76,7 +76,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

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

@@ -293,11 +293,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-table {
   @extend %wt-scrollbar;

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

@@ -96,7 +96,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

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

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

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

@@ -83,11 +83,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-tabs {
   position: relative;

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

@@ -178,7 +178,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../wt-select/multiselect.scss';
+@use '../wt-select/multiselect.scss';
 
 .wt-tags-input {
   width: 100%;

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

@@ -23,8 +23,8 @@
     </wt-label>
     <div class="wt-textarea__wrapper">
       <textarea
-        ref="wt-textarea"
         :id="name"
+        ref="wt-textarea"
         :disabled="disabled"
         :placeholder="placeholder || label"
         :value="value"
@@ -168,11 +168,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main' as *;
 
 .wt-textarea {
   cursor: text;
@@ -226,10 +226,10 @@ export default {
 
   .wt-textarea--invalid &,
   .wt-textarea--invalid:hover & {
-    @include wt-placeholder('error');
     color: var(--wt-text-field-error-text-color);
     border-color: var(--wt-text-field-input-border-error-color);
     outline: none; // prevent outline overlapping false color
+    @include wt-placeholder('error');
   }
 }
 

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

@@ -111,7 +111,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main' as *;
 
 .wt-time-input {
   display: inline-block;
@@ -137,16 +137,16 @@ export default {
 
     .wt-time-input--invalid &,
     .wt-time-input--invalid:hover & {
-      @include wt-placeholder('error');
       color: var(--wt-text-field-error-text-color);
       border-color: var(--wt-text-field-input-border-error-color);
       outline: none; // prevent outline overlapping false color
+      @include wt-placeholder('error');
     }
 
     .wt-time-input--disabled & {
-      @include wt-placeholder('disabled');
       border-color: var(--wt-text-field-input-border-disabled-color);
       background: var(--wt-text-field-input-background-disabled-color);
+      @include wt-placeholder('disabled');
     }
   }
 }

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

@@ -182,7 +182,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>

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

@@ -37,6 +37,7 @@ import {
   useFloating,
 } from '@floating-ui/vue';
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
 import debounce from '../../scripts/debounce.js';
 import { useTooltipTriggerSubscriptions } from './_internals/useTooltipTriggerSubscriptions.js';
 import WtTooltipFloating from './_internals/wt-tooltip-floating.vue';
@@ -142,11 +143,11 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss">
-@import './variables.scss';
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import '../../../src/css/main.scss';
+@use '../../css/main.scss';
 
 .wt-tooltip {
   display: inline-block;

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

@@ -18,7 +18,10 @@
           >
             <div class="wt-tree-table-th__content">
               <div v-if="key === 0 && selectable">
-                <wt-checkbox :selected="isAllSelected" @change="selectAll" />
+                <wt-checkbox
+                  :selected="isAllSelected"
+                  @change="selectAll"
+                />
               </div>
               <div class="wt-tree-table-th__text">
                 {{ col.text }}
@@ -37,7 +40,10 @@
               />
             </div>
           </th>
-          <th v-if="gridActions" class="wt-tree-table-th__actions">
+          <th
+            v-if="gridActions"
+            class="wt-tree-table-th__actions"
+          >
             <div class="wt-tree-table-th__content">
               <slot name="actions-header" />
             </div>
@@ -58,14 +64,21 @@
           @update:selected="handleSelection($event.data, $event.select)"
         >
           <template #actions="{ item }">
-            <slot name="actions" :item="item" />
+            <slot
+              name="actions"
+              :item="item"
+            />
           </template>
           <template
             v-for="(col, headerKey) of dataHeaders"
             :key="headerKey"
             #[col.value]="{ item }"
           >
-            <slot :index="dataKey" :item="item" :name="col.value">
+            <slot
+              :index="dataKey"
+              :item="item"
+              :name="col.value"
+            >
               {{ item[col.value] }}
             </slot>
           </template>
@@ -76,11 +89,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, withDefaults } from "vue";
-import { useWtTable } from "../../composables/useWtTable/useWtTable.ts";
-import { getNextSortOrder } from "../../scripts/sortQueryAdapters";
-import type { TableHeader } from "../wt-table/types/table-header.js";
-import WtTreeTableRow from "../wt-tree-table-row/wt-tree-table-row.vue";
+import { computed, withDefaults } from 'vue';
+
+import { useWtTable } from '../../composables/useWtTable/useWtTable.ts';
+import { getNextSortOrder } from '../../scripts/sortQueryAdapters';
+import type { TableHeader } from '../wt-table/types/table-header.js';
+import WtTreeTableRow from '../wt-tree-table-row/wt-tree-table-row.vue';
 
 const props = withDefaults(
   defineProps<{
@@ -117,7 +131,7 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(["sort", "update:selected"]);
+const emit = defineEmits(['sort', 'update:selected']);
 
 const checkHasChildItems = (item: Record<string, any>) => {
   return item[props.childrenProp] && Array.isArray(item[props.childrenProp]);
@@ -184,7 +198,7 @@ const isColSortable = ({ sort }: TableHeader) => {
 const sort = (col: TableHeader) => {
   if (!isColSortable(col)) return;
   const nextSort = getNextSortOrder(col.sort);
-  emit("sort", col, nextSort);
+  emit('sort', col, nextSort);
 };
 
 const changeSelectItem = (items: Record<string, any>[], selected: boolean) => {
@@ -200,7 +214,10 @@ const changeSelectItem = (items: Record<string, any>[], selected: boolean) => {
 
 const selectAll = () => {
   if (props.selected) {
-    emit("update:selected", isAllSelected.value ? [] : [...getAllNestedElements(props.data)]);
+    emit(
+      'update:selected',
+      isAllSelected.value ? [] : [...getAllNestedElements(props.data)],
+    );
   } else {
     // for backwards compatibility
 
@@ -219,10 +236,10 @@ const selectAll = () => {
 const handleSelection = (row, select) => {
   if (props.selected) {
     if (select) {
-      emit("update:selected", [...selectedElements.value, row]);
+      emit('update:selected', [...selectedElements.value, row]);
     } else {
       emit(
-        "update:selected",
+        'update:selected',
         selectedElements.value.filter((item) => item !== row),
       );
     }
@@ -234,11 +251,11 @@ const handleSelection = (row, select) => {
 </script>
 
 <style lang="scss">
-@import "./variables.scss";
+@use './variables.scss';
 </style>
 
 <style lang="scss" scoped>
-@import "../../../src/css/main.scss";
+@use '../../css/main.scss' as *;
 
 .wt-tree-table {
   @extend %wt-scrollbar;

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

@@ -1,8 +1,18 @@
 <template>
-  <tr class="wt-tree-table-row" :class="[{ 'wt-tree-table-row--alternate': rowPosition % 2 }]">
-    <td v-for="(col, headerKey) of dataHeaders" :key="headerKey" class="wt-tree-table-td">
+  <tr
+    class="wt-tree-table-row"
+    :class="[{ 'wt-tree-table-row--alternate': rowPosition % 2 }]"
+  >
+    <td
+      v-for="(col, headerKey) of dataHeaders"
+      :key="headerKey"
+      class="wt-tree-table-td"
+    >
       <div class="wt-tree-table-td__content">
-        <div v-if="!headerKey" class="wt-tree-table-td__icon-wrapper">
+        <div
+          v-if="!headerKey"
+          class="wt-tree-table-td__icon-wrapper"
+        >
           <div
             v-for="treeLine in lineCount"
             :key="treeLine"
@@ -31,15 +41,26 @@
             @click="collapsed = !collapsed"
           />
         </div>
-        <slot :index="rowPosition" :item="data" :name="col.value">
+        <slot
+          :index="rowPosition"
+          :item="data"
+          :name="col.value"
+        >
           {{ data[col.value] }}
         </slot>
       </div>
     </td>
 
-    <td v-if="gridActions" class="wt-tree-table-td__actions">
+    <td
+      v-if="gridActions"
+      class="wt-tree-table-td__actions"
+    >
       <div class="wt-tree-table-td__content">
-        <slot :index="rowPosition" :item="data" name="actions" />
+        <slot
+          :index="rowPosition"
+          :item="data"
+          name="actions"
+        />
       </div>
     </td>
   </tr>
@@ -62,23 +83,36 @@
         })
       "
     >
-      <template v-for="(col, headerKey) of dataHeaders" :key="headerKey" #[col.value]="{ item }">
-        <slot :index="rowPosition" :item="item" :name="col.value">
+      <template
+        v-for="(col, headerKey) of dataHeaders"
+        :key="headerKey"
+        #[col.value]="{ item }"
+      >
+        <slot
+          :index="rowPosition"
+          :item="item"
+          :name="col.value"
+        >
           <div>{{ item[col.value] }}</div>
         </slot>
       </template>
       <template #actions="{ item }">
-        <slot :index="rowPosition" :item="item" name="actions" />
+        <slot
+          :index="rowPosition"
+          :item="item"
+          name="actions"
+        />
       </template>
     </wt-tree-table-row>
   </template>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import WtCheckbox from "../wt-checkbox/wt-checkbox.vue";
-import WtIconBtn from "../wt-icon-btn/wt-icon-btn.vue";
-import type { TableHeader } from "../wt-table/types/table-header.ts";
+import { computed, ref } from 'vue';
+
+import WtCheckbox from '../wt-checkbox/wt-checkbox.vue';
+import WtIconBtn from '../wt-icon-btn/wt-icon-btn.vue';
+import type { TableHeader } from '../wt-table/types/table-header.ts';
 
 const props = withDefaults(
   defineProps<{
@@ -110,7 +144,7 @@ const props = withDefaults(
   },
 );
 
-defineEmits(["update:selected"]);
+defineEmits(['update:selected']);
 
 const collapsed = ref(true);
 const lineCount = computed(() => {
@@ -126,7 +160,7 @@ const isSelectedRow = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../../src/css/main.scss";
+@use '../../css/main.scss' as *;
 
 .wt-tree-table-td {
   @extend %typo-body-1;

package/src/css/main.scss

@@ -1,7 +1,8 @@
-@import 'styleguide/styleguide';
-@import 'styleguide/display-helpers/display-helpers';
-@import 'pages/card-page';
-@import 'pages/table-page';
+@forward 'styleguide/styleguide';
+@use 'styleguide/styleguide' as *;
+@use 'pages/card-page';
+@use 'pages/table-page';
+
 
 @include wt-placeholder;
 

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

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

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

@@ -1,4 +1,7 @@
+@use '../styleguide/styleguide' as *;
+
 .table-page {
+
   &.wt-page-wrapper {
     width: 100%;
     height: 100%;

package/src/css/styleguide/_styleguide.scss

@@ -1,9 +1,5 @@
-@import './scroll';
-@import 'border-radius/border-radius';
-@import 'typography/typography';
-@import 'colors/colors';
-@import 'elevations/elevations';
-@import 'spacings/spacings';
-@import 'viewport-breakpoints/viewport-breakpoints';
-@import 'transitions/transitions';
-@import 'placeholder/placeholder';
+@forward '@webitel/styleguide';
+
+@forward 'transitions/transitions';
+@forward 'placeholder/placeholder';
+@forward 'display-helpers/display-helpers';

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

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

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

@@ -1,9 +1,21 @@
 // https://stackoverflow.com/a/17181946/17782185
 // 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) {
-  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
-    @content;
+  @if & {
+    @at-root #{selector.append(&, $sel)} {
+      @content;
+    }
+  } @else {
+    @at-root #{$sel} {
+      @content;
+    }
   }
 }
 

package/src/css/styleguide/transitions/_transitions.scss

@@ -1 +1 @@
-@import 'fade/fade';
+@use 'fade/fade';

package/src/install.ts

@@ -1,10 +1,11 @@
 import 'vue-multiselect/dist/vue-multiselect.css';
+import '@webitel/styleguide/fonts';
 import './css/main.scss';
+import './assets/icons/sprite/index.js';
+
 import generateInstance from './api/axios/generateInstance.js';
 import Components from './components/index.js'; // init all components
 import Directives from './directives/index.js'; // init all directives
-import './css/styleguide/fonts/_fonts.scss';
-import './assets/icons/sprite/index.js';
 
 export default {
   install(app, { eventBus, router, globals = {} }) {

package/src/modules/QueryFilters/components/filter-from-to.vue

@@ -110,6 +110,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../../../css/main.scss';
+
 .filter-from-to {
   &:hover > .wt-label {
     color: var(--form-label--hover-color);

package/src/css/styleguide/border-radius/_border-radius.scss

@@ -1,4 +0,0 @@
-:root {
-  --border-radius: var(--spacing-2xs);
-  --border-radius--pill: 50px;
-}