@vc-shell/framework 1.0.39 → 1.0.41

package/{components → ui/components}/molecules/vc-slider/vc-slider.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="vc-slider relative">
+  <div class="vc-slider tw-relative">
     <swiper-component
       :class="[
         'vc-slider__swiper',
         {
-          'overflow-visible': overflow,
-          'px-[40px]': navigation,
+          'tw-overflow-visible': overflow,
+          'tw-px-[40px]': navigation,
         },
       ]"
       :space-between="spaceBetweenSlides"
@@ -19,14 +19,14 @@
     </swiper-component>
     <!-- Navigation buttons-->
     <div v-show="navigation">
-      <div class="vc-slider__prev left-0">
+      <div class="vc-slider__prev tw-left-0">
         <slot name="prevBtn">
           <div class="vc-slider__btn">
             <VcIcon icon="fas fa-chevron-left"></VcIcon>
           </div>
         </slot>
       </div>
-      <div class="vc-slider__next right-0">
+      <div class="vc-slider__next tw-right-0">
         <slot name="nextBtn">
           <div class="vc-slider__btn">
             <VcIcon icon="fas fa-chevron-right"></VcIcon>
@@ -83,24 +83,24 @@ const buttonsList = computed(() => ({
 .vc-slider {
   &__swiper {
     .swiper-slide {
-      @apply w-auto;
+      @apply tw-w-auto;
     }
   }
 
   &__next,
   &__prev {
-    @apply absolute top-2/4 -translate-y-2/4 z-[2];
+    @apply tw-absolute tw-top-2/4 -tw-translate-y-2/4 tw-z-[2];
 
     &.swiper-button-disabled .vc-slider__btn {
-      @apply text-[#999999];
+      @apply tw-text-[#999999];
     }
   }
 
   &__btn {
-    @apply bg-white border border-solid border-[#eaecf2]
-      box-border rounded-[3px]
-      flex items-center justify-center
-      text-[#43b0e6] w-[30px] h-[30px];
+    @apply tw-bg-white tw-border tw-border-solid tw-border-[#eaecf2]
+      tw-box-border tw-rounded-[3px]
+      tw-flex tw-items-center tw-justify-center
+      tw-text-[#43b0e6] tw-w-[30px] tw-h-[30px];
   }
 }
 </style>

package/{components → ui/components}/molecules/vc-textarea/vc-textarea.vue

@@ -7,7 +7,7 @@
     }"
   >
     <!-- Textarea label -->
-    <VcLabel v-if="label" class="mb-2" :required="isRequired">
+    <VcLabel v-if="label" class="tw-mb-2" :required="isRequired">
       <span>{{ label }}</span>
       <template v-if="tooltip" v-slot:tooltip>
         <span v-html="tooltip"></span>
@@ -36,7 +36,7 @@
 
 <script lang="ts" setup>
 import { watch } from "vue";
-import { VcLabel } from "@/components";
+import { VcLabel } from "@/ui/components";
 
 const props = defineProps({
   placeholder: {
@@ -113,43 +113,43 @@ function onInput(e: InputEvent) {
 
 .vc-textarea {
   &__field-wrapper {
-    @apply border border-solid
-      border-[color:var(--textarea-border-color)]
-      rounded-[var(--textarea-border-radius)]
-      box-border
-      bg-[color:var(--textarea-background-color)] flex items-stretch;
+    @apply tw-border tw-border-solid
+      tw-border-[color:var(--textarea-border-color)]
+      tw-rounded-[var(--textarea-border-radius)]
+      tw-box-border
+      tw-bg-[color:var(--textarea-background-color)] tw-flex tw-items-stretch;
   }
 
   &_error &__field-wrapper {
-    @apply border border-solid border-[color:var(--textarea-border-color-error)];
+    @apply tw-border tw-border-solid tw-border-[color:var(--textarea-border-color-error)];
   }
 
   &__error {
-    @apply text-[color:var(--textarea-border-color-error)] mt-1 #{!important};
+    @apply tw-text-[color:var(--textarea-border-color-error)] tw-mt-1 #{!important};
   }
 
   &__field {
-    @apply w-full resize-y box-border border-none outline-none
-    min-h-[var(--textarea-height)]
-    placeholder:text-[color:var(--textarea-placeholder-color)]
-    px-3 py-2;
+    @apply tw-w-full tw-resize-y tw-box-border tw-border-none tw-outline-none
+    tw-min-h-[var(--textarea-height)]
+    placeholder:tw-text-[color:var(--textarea-placeholder-color)]
+    tw-px-3 tw-py-2;
 
     &::-webkit-input-placeholder {
-      @apply text-[color:var(--textarea-placeholder-color)];
+      @apply tw-text-[color:var(--textarea-placeholder-color)];
     }
 
     &::-moz-placeholder {
-      @apply text-[color:var(--textarea-placeholder-color)];
+      @apply tw-text-[color:var(--textarea-placeholder-color)];
     }
 
     &::-ms-placeholder {
-      @apply text-[color:var(--textarea-placeholder-color)];
+      @apply tw-text-[color:var(--textarea-placeholder-color)];
     }
   }
 
   &_disabled &__field-wrapper,
   &_disabled &__field {
-    @apply bg-[#fafafa] text-[#424242];
+    @apply tw-bg-[#fafafa] tw-text-[#424242];
   }
 }
 </style>

package/{components → ui/components}/organisms/vc-app/_internal/vc-app-bar/vc-app-bar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative flex items-center content-between h-[var(--app-bar-height)] bg-[color:var(--app-bar-background-color)] pl-4"
+    class="tw-relative tw-flex tw-items-center tw-content-between tw-h-[var(--app-bar-height)] tw-bg-[color:var(--app-bar-background-color)] tw-pl-4"
   >
     <slot name="appSwitcher"></slot>
     <!-- Logo container for mobile devices -->
@@ -8,7 +8,8 @@
       <!-- Show logo on mobile dashboard -->
       <img
         v-if="blades.length === 0"
-        class="h-3/6 cursor-pointer"
+        class="h-3/6 tw-cursor-pointer"
+        alt="logo"
         :src="logo"
         @click="$emit('logo:click')"
       />
@@ -16,7 +17,7 @@
       <!-- Show blades name when at least one blade is opened -->
       <div
         v-else-if="blades.length === 1"
-        class="overflow-ellipsis overflow-hidden whitespace-nowrap text-2xl leading-header"
+        class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-text-2xl tw-leading-header"
       >
         {{ blades[0].title }}
       </div>
@@ -24,19 +25,20 @@
       <!-- Show back link when more than one blade is opened -->
       <VcLink v-else @click="$emit('backlink:click')">
         <VcIcon icon="fas fa-chevron-left" size="s"></VcIcon>
-        <span class="ml-2 text-lg">{{ $t("Back") }}</span>
+        <span class="tw-ml-2 tw-text-lg">{{ $t("Back") }}</span>
       </VcLink>
     </template>
 
     <!-- Logo container for desktop devices -->
     <template v-else>
       <img
-        class="h-3/6 cursor-pointer"
+        class="tw-h-3/6 tw-cursor-pointer"
         :src="logo"
+        alt="logo"
         @click="$emit('logo:click')"
       />
       <div
-        class="text-[color:var(--app-bar-version-color)] text-xs ml-[30px]"
+        class="tw-text-[color:var(--app-bar-version-color)] tw-text-xs tw-ml-[30px]"
         @click="$emit('version:click')"
       >
         {{ version }}
@@ -45,17 +47,17 @@
 
     <!-- Product name slot -->
     <div
-      class="text-[color:var(--app-bar-product-name-color)] text-[length:var(--app-bar-product-name-size)] font-medium ml-[30px]"
-      v-if="$slots['productName']"
+      class="tw-text-[color:var(--app-bar-product-name-color)] tw-text-[length:var(--app-bar-product-name-size)] tw-font-medium tw-ml-[30px]"
+      v-if="title"
     >
-      <slot name="productName"></slot>
+      {{ title }}
     </div>
 
     <!-- Additional spacer -->
-    <div class="grow basis-0 basis-0"></div>
+    <div class="tw-grow tw-basis-0 tw-basis-0"></div>
 
     <!-- Toolbar container -->
-    <div class="flex h-full box-border">
+    <div class="tw-flex tw-h-full tw-box-border">
       <template v-for="(item, index) in buttons" :key="index">
         <template v-if="item.isVisible === undefined || item.isVisible">
           <!-- Draw custom component is it is passed -->
@@ -69,7 +71,7 @@
           <!-- Otherwise draw default toolbar button -->
           <div
             v-else
-            class="relative flex items-center justify-center w-[var(--app-bar-button-width)] border-l border-solid border-[color:var(--app-bar-button-border-color)] cursor-pointer text-[color: var(--app-bar-button-color)] bg-[color:var(--app-bar-button-background-color)] transition-[color] duration-200 hover:text-[color:var(--app-bar-button-color-hover)] hover:bg-[color:var(--app-bar-button-background-color-hover)]"
+            class="tw-relative tw-flex tw-items-center tw-justify-center tw-w-[var(--app-bar-button-width)] tw-border-l tw-border-solid tw-border-[color:var(--app-bar-button-border-color)] tw-cursor-pointer tw-text-[color: var(--app-bar-button-color)] tw-bg-[color:var(--app-bar-button-background-color)] tw-transition-[color] tw-duration-200 hover:tw-text-[color:var(--app-bar-button-color-hover)] hover:tw-bg-[color:var(--app-bar-button-background-color-hover)]"
             :class="{ 'vc-app-bar__button_accent': item.isAccent }"
             :title="item.title"
             @click="$emit('button:click', item)"
@@ -86,7 +88,7 @@
     <!-- Show menu toggler on mobile devices -->
     <div
       v-if="$isMobile.value"
-      class="text-[#319ed4] w-[var(--app-bar-button-width)] flex items-center justify-center h-full box-border"
+      class="tw-text-[#319ed4] tw-w-[var(--app-bar-button-width)] tw-flex tw-items-center tw-justify-center tw-h-full tw-box-border tw-cursor-pointer"
       @click="$emit('menubutton:click')"
     >
       <VcIcon icon="fas fa-bars"></VcIcon>
@@ -95,14 +97,16 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "@/components";
-import { IBladeToolbar, IBladeElement } from "@/core/types";
+import { VcIcon } from "@/ui/components";
+import { IBladeToolbar } from "@/core/types";
+import { IBladeElement } from "@/shared";
 
 export interface Props {
   logo: string;
   version: string;
   blades: IBladeElement[];
   buttons: IBladeToolbar[];
+  title?: string;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -139,7 +143,7 @@ defineEmits([
 .vc-app-bar {
   &__button {
     &_accent:before {
-      @apply content-[""] block absolute right-3 top-[18px] w-[7px] h-[7px] bg-[#ff4a4a] rounded-full z-[1];
+      @apply tw-content-[""] tw-block tw-absolute tw-right-3 tw-top-[18px] tw-w-[7px] tw-h-[7px] tw-bg-[#ff4a4a] tw-rounded-full tw-z-[1];
     }
   }
 }

package/{components → ui/components}/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue

@@ -68,80 +68,80 @@ defineEmits<Emits>();
 }
 
 .vc-app-menu-item {
-  @apply flex items-center w-full h-[var(--app-menu-item-height)]
-  border-none
-  flex-nowrap box-border cursor-pointer relative uppercase;
+  @apply tw-flex tw-items-center tw-w-full tw-h-[var(--app-menu-item-height)]
+  tw-border-none
+  tw-flex-nowrap tw-box-border tw-cursor-pointer tw-relative tw-uppercase;
 
   &_active {
-    @apply bg-[color:var(--app-menu-item-background-color-hover)]
-    rounded-[var(--app-menu-item-hover-radius)]
-    before:opacity-100;
+    @apply tw-bg-[color:var(--app-menu-item-background-color-hover)]
+    tw-rounded-[var(--app-menu-item-hover-radius)]
+    before:tw-opacity-100;
   }
 
   &__handler {
-    @apply w-[var(--app-menu-item-handler-width)]
-    text-[color:var(--app-menu-item-handler-color)]
-    text-center invisible shrink-0;
+    @apply tw-w-[var(--app-menu-item-handler-width)]
+    tw-text-[color:var(--app-menu-item-handler-color)]
+    tw-text-center tw-invisible tw-shrink-0;
 
     &_enabled {
-      @apply cursor-move;
+      @apply tw-cursor-move;
     }
   }
 
   &__icon {
-    @apply w-[var(--app-menu-item-icon-width)]
-    text-[color:var(--app-menu-item-icon-color)]
-    overflow-hidden flex
-    justify-center shrink-0 transition-[color] duration-200;
+    @apply tw-w-[var(--app-menu-item-icon-width)]
+    tw-text-[color:var(--app-menu-item-icon-color)]
+    tw-overflow-hidden tw-flex
+    tw-justify-center tw-shrink-0  tw-transition-[color]  tw-duration-200;
   }
 
   &_active &__icon {
-    @apply text-[color:var(--app-menu-item-icon-color-active)];
+    @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
   }
 
   &__title {
-    @apply truncate
-    text-lg
-    font-medium
-    px-3
-    text-[color:var(--app-menu-item-title-color)]
+    @apply tw-truncate
+    tw-text-lg
+    tw-font-medium
+    tw-px-3
+    tw-text-[color:var(--app-menu-item-title-color)]
     [transition:color_0.2s_ease] [transition:opacity_0.1s_ease]
-    opacity-100 w-full;
+    tw-opacity-100 tw-w-full;
   }
 
   &__title-icon {
-    @apply text-[color:var(--app-menu-item-icon-color)] ml-3;
+    @apply tw-text-[color:var(--app-menu-item-icon-color)] tw-ml-3;
   }
 
   &_active &__title {
-    @apply text-[color:var(--app-menu-item-title-color-active)]
-    font-bold;
+    @apply tw-text-[color:var(--app-menu-item-title-color-active)]
+    tw-font-bold;
   }
 
   &_active &__title-icon {
-    @apply text-[color:var(--app-menu-item-icon-color-active)];
+    @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
   }
 
   &:hover {
-    @apply bg-[color:var(--app-menu-item-background-color-hover)]
-    rounded-[var(--app-menu-item-hover-radius)];
+    @apply tw-bg-[color:var(--app-menu-item-background-color-hover)]
+    tw-rounded-[var(--app-menu-item-hover-radius)];
   }
 
   &:hover &__title {
-    @apply text-[color:var(--app-menu-item-title-color-active)];
+    @apply tw-text-[color:var(--app-menu-item-title-color-active)];
   }
 
   &:hover &__icon {
-    @apply text-[color:var(--app-menu-item-icon-color-active)];
+    @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
   }
 
   &:hover &__title-icon {
-    @apply text-[color:var(--app-menu-item-icon-color-active)];
+    @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
   }
 
   &:hover &__handler {
     &_enabled {
-      @apply invisible;
+      @apply tw-invisible;
     }
   }
 }

package/{components → ui/components}/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue

@@ -8,7 +8,7 @@
           :sticky="sticky"
           :icon="icon"
           :title="title"
-          @onClick="onMenuItemClick(navigate)"
+          @onClick="onMenuItemClick(() => navigate($event))"
         />
       </router-link>
     </template>
@@ -56,7 +56,7 @@
 import { onMounted, ref, computed } from "vue";
 import { ExtendedComponent, IMenuItems } from "@/core/types";
 import VcAppMenuLink from "./_internal/vc-app-menu-link.vue";
-import {NavigationFailure, useRoute} from "vue-router";
+import { NavigationFailure, useRoute } from "vue-router";
 
 export interface Props {
   sticky?: boolean;
@@ -102,7 +102,7 @@ const emit = defineEmits<Emits>();
 
 const isOpened = ref(false);
 
-const isHomePage = computed(() => route.path === '/')
+const isHomePage = computed(() => route.path === "/");
 
 onMounted(() => {
   if (
@@ -140,17 +140,17 @@ function onMenuItemClick(
 }
 .vc-app-menu-item {
   &__child {
-    @apply ml-[42px] gap-[4px] flex flex-col;
+    @apply tw-ml-[42px] tw-gap-[4px] tw-flex tw-flex-col;
   }
 
   &__child-item {
-    @apply cursor-pointer w-fit py-[5px] px-[9px] rounded-[4px]
-    hover:bg-[color:var(--app-menu-item-background-color-hover)]
-    hover:text-[color:var(--app-menu-item-title-color-active)];
+    @apply tw-cursor-pointer tw-w-fit tw-py-[5px] tw-px-[9px] tw-rounded-[4px]
+    hover:tw-bg-[color:var(--app-menu-item-background-color-hover)]
+    hover:tw-text-[color:var(--app-menu-item-title-color-active)];
 
     &_active {
-      @apply bg-[color:var(--app-menu-item-background-color-hover)]
-      text-[color:var(--app-menu-item-title-color-active)] font-bold;
+      @apply tw-bg-[color:var(--app-menu-item-background-color-hover)]
+      tw-text-[color:var(--app-menu-item-title-color-active)] tw-font-bold;
     }
   }
 }

package/{components → ui/components}/organisms/vc-app/_internal/vc-app-menu/vc-app-menu.vue

@@ -1,23 +1,23 @@
 <template>
   <div
-    class="relative w-[var(--app-menu-width)] transition duration-100 pt-4"
+    class="tw-relative tw-w-[var(--app-menu-width)] tw-transition tw-duration-100 tw-pt-4"
     :class="{
-      'vc-app-menu_mobile hidden !fixed !left-0 !top-0 !w-full !bottom-0 !z-[9999]':
+      'vc-app-menu_mobile tw-hidden !tw-fixed !tw-left-0 !tw-top-0 !tw-w-full !tw-bottom-0 !tw-z-[9999]':
         $isMobile.value,
-      '!block': isMobileVisible,
+      '!tw-block': isMobileVisible,
     }"
   >
     <!-- Show backdrop overlay on mobile devices -->
     <div
       v-if="$isMobile.value"
-      class="absolute left-0 top-0 right-0 bottom-0 z-[9998] bg-[#808c99] opacity-60"
+      class="tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-z-[9998] tw-bg-[#808c99] tw-opacity-60"
       @click="isMobileVisible = false"
     ></div>
-    <div class="vc-app-menu__inner flex flex-col h-full">
+    <div class="vc-app-menu__inner tw-flex tw-flex-col tw-h-full">
       <!-- Show menu close handler on mobile devices -->
       <div
         v-if="$isMobile.value"
-        class="text-[#319ed4] flex justify-end items-center p-4"
+        class="tw-text-[#319ed4] tw-flex tw-justify-end tw-items-center tw-p-4"
       >
         <VcIcon
           icon="fas fa-times"
@@ -27,8 +27,8 @@
       </div>
 
       <!-- Show scrollable area with menu items -->
-      <VcContainer :noPadding="true" class="grow basis-0">
-        <div class="gap-[5px] flex flex-col px-4">
+      <VcContainer :noPadding="true" class="tw-grow tw-basis-0">
+        <div class="tw-gap-[5px] tw-flex tw-flex-col tw-px-4">
           <template
             v-for="(item, index) in mobileMenuItems"
             :key="`info_item_${index}`"
@@ -38,7 +38,7 @@
                 v-if="item.component"
                 :is="item.component"
                 v-bind="item.bladeOptions"
-                class="p-0 mb-2 w-full"
+                class="tw-p-0 tw-mb-2 tw-w-full"
               ></component>
             </template>
           </template>
@@ -69,7 +69,7 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import VcAppMenuItem from "./_internal/vc-app-menu-item/vc-app-menu-item.vue";
-import { VcContainer } from "@/components";
+import { VcContainer } from "@/ui/components";
 import { IMenuItems } from "@/core/types";
 import { IMenuClickEvent } from "@/shared";
 
@@ -104,7 +104,7 @@ defineExpose({
 
 .vc-app-menu {
   &_mobile &__inner {
-    @apply absolute z-[9999] right-0 top-0 bottom-0 w-[300px] max-w-[60%] bg-[color:var(--app-menu-background-color)];
+    @apply tw-absolute tw-z-[9999] tw-right-0 tw-top-0 tw-bottom-0 tw-w-[300px] tw-max-w-[60%] tw-bg-[color:var(--app-menu-background-color)];
   }
 }
 </style>

package/{components → ui/components}/organisms/vc-app/vc-app.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="vc-app flex flex-col w-full h-full box-border m-0 overflow-hidden text-base"
+    class="vc-app tw-flex tw-flex-col tw-w-full tw-h-full tw-box-border tw-m-0 tw-overflow-hidden tw-text-base"
     :class="[
       `vc-theme_${theme}`,
       {
@@ -12,7 +12,7 @@
   >
     <!-- Init application top bar -->
     <VcAppBar
-      class="shrink-0"
+      class="tw-shrink-0"
       :logo="logo"
       :blades="bladesRefs"
       :version="version"
@@ -21,21 +21,18 @@
       @menubutton:click="$refs.menu.isMobileVisible = true"
       @backlink:click="$emit('backlink:click', bladesRefs.length - 2)"
       @logo:click="openDashboard"
+      :title="title"
     >
       <template v-slot:appSwitcher>
         <slot name="appSwitcher"></slot>
       </template>
-
-      <template v-slot:productName v-if="$slots['productName']">
-        <slot name="productName"></slot>
-      </template>
     </VcAppBar>
 
-    <div class="overflow-hidden flex grow basis-0">
+    <div class="tw-overflow-hidden tw-flex tw-grow tw-basis-0">
       <!-- Init main menu -->
       <VcAppMenu
         ref="menu"
-        class="shrink-0"
+        class="tw-shrink-0"
         :items="menuItems"
         :mobileMenuItems="mobileMenuItems"
         @item:click="onMenuItemClick"
@@ -43,13 +40,13 @@
 
       <!-- Workspace blades -->
       <div
-        class="vc-app__workspace px-2 w-full overflow-hidden flex grow basis-0"
+        class="vc-app__workspace tw-px-2 tw-w-full tw-overflow-hidden !tw-flex tw-grow tw-basis-0"
       >
         <slot name="bladeNavigation"></slot>
       </div>
 
       <div
-        class="[pointer-events:painted] absolute flex z-[1000] overflow-hidden top-0 left-2/4 -translate-x-2/4 flex-col items-center p-2 box-border"
+        class="[pointer-events:painted] tw-absolute tw-flex tw-z-[1000] tw-overflow-hidden tw-top-0 tw-left-2/4 -tw-translate-x-2/4 tw-flex-col tw-items-center tw-p-2 tw-box-border"
       >
         <slot name="notifications"></slot>
       </div>
@@ -91,6 +88,7 @@ export interface Props {
   version: string;
   theme?: "light" | "dark";
   bladesRefs: IBladeElement[];
+  title?: string;
 }
 
 export interface Emits {
@@ -164,7 +162,7 @@ defineExpose({
 
   &__workspace {
     .vc-app_mobile & {
-      @apply p-0;
+      @apply tw-p-0;
     }
   }
 }

package/{components → ui/components}/organisms/vc-blade/_internal/vc-blade-header/vc-blade-header.vue

@@ -1,16 +1,16 @@
 <template>
   <div
-    class="shrink-0 h-[var(--blade-header-height)] bg-[color:var(--blade-header-background-color)] flex items-center py-0 px-4 border-solid border-b border-b-[color:#eaedf3]"
+    class="tw-shrink-0 tw-h-[var(--blade-header-height)] tw-bg-[color:var(--blade-header-background-color)] tw-flex tw-items-center tw-py-0 tw-px-4 tw-border-solid tw-border-b tw-border-b-[color:#eaedf3]"
   >
-    <div v-if="icon" class="text-[color:var(--blade-header-icon-color)] mr-3">
+    <div v-if="icon" class="tw-text-[color:var(--blade-header-icon-color)] tw-mr-3">
       <VcIcon :icon="icon" size="xxl"></VcIcon>
     </div>
 
-    <div class="overflow-hidden grow basis-0">
+    <div class="tw-overflow-hidden tw-grow tw-basis-0">
       <div
-        class="text-[color:var(--blade-header-title-color)] text-lg truncate"
+        class="tw-text-[color:var(--blade-header-title-color)] tw-text-lg tw-truncate"
         :class="{
-          '!text-[length:var(--blade-header-title-font-size)] font-medium':
+          '!tw-text-[length:var(--blade-header-title-font-size)] tw-font-medium':
             !subtitle,
         }"
       >
@@ -18,7 +18,7 @@
       </div>
       <div
         v-if="subtitle"
-        class="text-[color:var(--blade-header-subtitle-color)] text-xs mt-1"
+        class="tw-text-[color:var(--blade-header-subtitle-color)] tw-text-xs tw-mt-1"
       >
         {{ subtitle }}
       </div>
@@ -28,11 +28,11 @@
       <slot name="actions"></slot>
     </div>
 
-    <div v-if="!$isMobile.value" class="flex items-center">
+    <div v-if="!$isMobile.value" class= "tw-flex tw-items-center">
       <template v-if="expandable">
         <div
           v-if="expanded"
-          class="text-[color:var(--blade-header-button-color)] ml-4 cursor-pointer hover:text-[color:var(--blade-header-button-color-hover)]"
+          class="tw-text-[color:var(--blade-header-button-color)] tw-ml-4 tw-cursor-pointer hover:tw-text-[color:var(--blade-header-button-color-hover)]"
           @click="onCollapse"
         >
           <VcIcon icon="fas fa-window-minimize" size="s"></VcIcon>
@@ -43,7 +43,7 @@
       </template>
       <div
         v-if="closable"
-        class="text-[color:var(--blade-header-button-color)] ml-4 cursor-pointer hover:text-[color:var(--blade-header-button-color-hover)]"
+        class="tw-text-[color:var(--blade-header-button-color)] tw-ml-4 tw-cursor-pointer hover:tw-text-[color:var(--blade-header-button-color-hover)]"
         @click="onClose"
       >
         <VcIcon icon="fas fa-times"></VcIcon>
@@ -53,7 +53,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "@/components";
+import { VcIcon } from "@/ui/components";
 
 const props = defineProps({
   expandable: {