@vc-shell/framework 1.0.290 → 1.0.292

package/ui/components/atoms/vc-row/vc-row.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vc-row tw-flex-nowrap tw-flex tw-items-stretch">
+  <div class="vc-row">
     <slot></slot>
   </div>
 </template>
@@ -13,8 +13,10 @@ defineSlots<{
 
 <style lang="scss">
 .vc-row {
+  @apply tw-flex tw-flex-nowrap tw-items-stretch;
+
   .vc-app_mobile & {
-    display: grid;
+    @apply tw-grid;
   }
 }
 </style>

package/ui/components/atoms/vc-status/vc-status.vue

@@ -6,7 +6,7 @@
     <slot></slot>
   </div>
 </template>
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+
 <script lang="ts" setup>
 export interface Props {
   variant?: "info" | "warning" | "danger" | "success" | "light-danger" | "info-dark" | "primary";
@@ -20,6 +20,7 @@ withDefaults(defineProps<Props>(), {
 });
 
 defineSlots<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   default: (props?: any) => any;
 }>();
 </script>
@@ -33,45 +34,53 @@ defineSlots<{
   --status-border-radius-extended: 4px;
   --status-border-width: 1px;
 
-  --status-info-color: #ffffff;
-  --status-info-main-color: #bdd1df;
+  --status-info-color: var(--neutrals-50);
+  --status-info-main-color: var(--info-300);
+
+  --status-warning-color: var(--neutrals-50);
+  --status-warning-main-color: var(--warning-500);
 
-  --status-warning-color: #ffffff;
-  --status-warning-main-color: #f89406;
+  --status-danger-color: var(--neutrals-50);
+  --status-danger-main-color: var(--danger-500);
 
-  --status-danger-color: #ffffff;
-  --status-danger-main-color: #ef796f;
+  --status-success-color: var(--neutrals-50);
+  --status-success-main-color: var(--success-500);
 
-  --status-success-color: #ffffff;
-  --status-success-main-color: #87b563;
+  --status-light-danger-color: var(--neutrals-50);
+  --status-light-danger-main-color: var(--danger-200);
 
-  --status-light-danger-color: #333333;
-  --status-light-danger-main-color: #ffefef;
+  --status-info-dark-color: var(--neutrals-50);
+  --status-info-dark-main-color: var(--info-600);
 
-  --status-info-dark-color: #ffffff;
-  --status-info-dark-main-color: #82a6bd;
+  --status-primary-main-color: var(--primary-500);
+  --status-primary-color: var(--neutrals-50);
 
-  --status-primary-main-color: #319ed4;
-  --status-primary-color: #ffffff;
+  --status-outline-bg-color: var(--additional-50);
 }
 
 $variants: info, warning, danger, success, light-danger, info-dark, primary;
 
 .vc-status {
-  @apply tw-inline-block tw-rounded-[var(--status-border-radius)] tw-py-1 tw-px-3.5 tw-text-base tw-font-normal tw-whitespace-nowrap;
+  @apply tw-inline-block tw-font-normal tw-whitespace-nowrap tw-text-sm tw-truncate tw-text-center tw-border tw-border-solid tw-box-border tw-w-full;
+
+  @apply tw-py-1 tw-px-3.5 tw-rounded-[var(--status-border-radius)];
+
+  border-width: var(--status-border-width);
 
   @each $variant in $variants {
-    &_#{$variant} {
-      @apply tw-text-[color:var(--status-#{$variant}-color)] tw-border tw-border-solid tw-border-[color:var(--status-#{$variant}-main-color)] tw-bg-[color:var(--status-#{$variant}-main-color)];
+    &.vc-status_#{$variant} {
+      @apply tw-text-[color:var(--status-#{$variant}-color)] tw-border-[color:var(--status-#{$variant}-main-color)] tw-bg-[color:var(--status-#{$variant}-main-color)];
 
       &.vc-status_outline {
-        @apply tw-text-[color:var(--status-#{$variant}-main-color)] tw-border tw-border-solid tw-border-[color:var(--status-#{$variant}-main-color)] tw-bg-white;
+        @apply tw-text-[color:var(--status-#{$variant}-main-color)] tw-bg-[color:var(--status-outline-bg-color)];
       }
     }
   }
 
   &.vc-status_extended {
-    @apply tw-whitespace-normal tw-p-[var(--status-padding-extended)] tw-rounded-[var(--status-border-radius-extended)];
+    @apply tw-whitespace-normal tw-rounded-[var(--status-border-radius-extended)];
+
+    padding: var(--status-padding-extended);
   }
 }
 </style>

package/ui/components/atoms/vc-status-icon/vc-status-icon.vue

@@ -1,15 +1,15 @@
 <template>
-  <div>
+  <div class="vc-status-icon">
     <template v-if="status">
       <VcIcon
         icon="fas fa-check-circle"
-        class="tw-text-[color:#87b563]"
+        class="vc-status-icon__icon vc-status-icon__icon--success"
       ></VcIcon>
     </template>
     <template v-else>
       <VcIcon
         icon="fas fa-times-circle"
-        class="tw-text-[color:#bdd1df]"
+        class="vc-status-icon__icon vc-status-icon__icon--info"
       ></VcIcon>
     </template>
   </div>
@@ -23,3 +23,20 @@ export interface Props {
 
 defineProps<Props>();
 </script>
+
+<style lang="scss">
+:root {
+  --status-success-main-color: var(--success-400);
+  --status-info-main-color: var(--info-300);
+}
+
+.vc-status-icon {
+  &__icon--success {
+    @apply tw-text-[color:var(--status-success-main-color)];
+  }
+
+  &__icon--info {
+    @apply tw-text-[color:var(--status-info-main-color)];
+  }
+}
+</style>

package/ui/components/atoms/vc-switch/vc-switch.vue

@@ -1,14 +1,14 @@
 <template>
-  <div>
+  <div class="vc-switch">
     <!-- Switch label -->
     <VcLabel
       v-if="label"
-      class="tw-mb-2"
+      class="vc-switch__label"
       :required="required"
     >
       <span>{{ label }}</span>
     </VcLabel>
-    <div class="tw-relative tw-inline-block tw-w-[32px] tw-h-[18px]">
+    <div class="vc-switch__container">
       <label>
         <input
           type="checkbox"
@@ -21,7 +21,7 @@
       </label>
       <VcHint
         v-if="tooltip"
-        class="tw-mt-2 tw-w-max"
+        class="vc-switch__hint"
       >
         {{ tooltip }}
       </VcHint>
@@ -66,34 +66,58 @@ function onInput(e: Event) {
 
 <style lang="scss">
 :root {
-  --switch-main-color: #43b0e6;
-  --switch-secondary-color: #d2d4d7;
+  --switch-width: 32px;
+  --switch-height: 18px;
+  --switch-thumb-size: 16px;
+  --switch-translate: 14px;
+
+  --switch-main-color: var(--primary-500);
+  --switch-secondary-color: var(--neutrals-300);
+  --switch-icon-background: var(--additional-50);
+  --switch-icon-color: var(--neutrals-400);
+  --switch-shadow-color: var(--additional-950);
+  --switch-shadow: inset 0px 2px 4px rgb(from var(--switch-shadow-color) r g b / 10%);
   --switch-transition: all 0.2s ease-in-out;
-  --switch-icon-transition: opacity 0.3s ease-in-out;
 }
 
 .vc-switch {
-  &__input {
-    @apply tw-w-0 tw-h-0 tw-opacity-0;
+  &__label {
+    @apply tw-mb-2;
+  }
 
-    &:checked + .vc-switch__slider:before {
-      @apply tw-translate-x-[14px];
-    }
+  &__container {
+    @apply tw-relative tw-inline-block tw-w-[var(--switch-width)] tw-h-[var(--switch-height)];
+  }
+
+  &__hint {
+    @apply tw-mt-2 tw-w-max;
+  }
+
+  &__input {
+    @apply tw-w-0 tw-h-0 tw-opacity-0 tw-cursor-pointer;
 
     &:checked + .vc-switch__slider {
-      @apply tw-bg-[color:var(--switch-main-color)] after:tw-bg-[position:10px] after:tw-bg-[length:10px_7px];
+      @apply tw-bg-[color:var(--switch-main-color)];
+
+      &::before {
+        @apply [transform:translateX(var(--switch-translate))_translateY(-50%)];
+      }
     }
 
     &:disabled + .vc-switch__slider {
-      @apply tw-bg-[color:var(--switch-secondary-color)];
+      @apply tw-bg-[color:var(--switch-secondary-color)] tw-cursor-not-allowed;
+    }
+
+    &:disabled {
+      @apply tw-cursor-not-allowed;
     }
   }
 
   &__slider {
-    @apply tw-absolute tw-top-0 tw-right-0 tw-bottom-0 tw-left-0 tw-bg-[color:var(--switch-secondary-color)] tw-rounded-[9999px] tw-cursor-pointer tw-transition  tw-duration-200 tw-shadow-[inset_0px_2px_4px_rgba(0,0,0,0.1)];
+    @apply tw-absolute tw-inset-0 tw-bg-[color:var(--switch-secondary-color)] tw-rounded-full tw-transition tw-duration-200 [box-shadow:var(--switch-shadow)] tw-cursor-pointer;
 
-    &:before {
-      @apply tw-absolute tw-bottom-px tw-left-px tw-flex tw-justify-center tw-items-center tw-w-[16px] tw-h-[16px] tw-bg-white tw-rounded-[9999px] tw-text-[color:#d2d2d2] tw-text-[10px] tw-transition tw-shadow-[0_2px_4px_rgba(0,0,0,0.1)] tw-duration-200 tw-content-[""];
+    &::before {
+      @apply tw-absolute tw-left-px tw-top-1/2 tw-transition tw-duration-200 tw-bg-[color:var(--switch-icon-background)] tw-rounded-full tw-w-[var(--switch-thumb-size)] tw-h-[var(--switch-thumb-size)] [content:''] [box-shadow:var(--switch-shadow)] [transform:translateX(0)_translateY(-50%)];
     }
   }
 }

package/ui/components/atoms/vc-tooltip/vc-tooltip.vue

@@ -1,10 +1,11 @@
 <template>
-  <div>
+  <div
+    ref="target"
+    class="vc-tooltip"
+  >
     <div
       ref="tooltipCompRef"
-      class="tw-inline-flex tw-h-full tw-w-full"
-      @mouseenter="tooltipVisible = true"
-      @mouseleave="tooltipVisible = false"
+      class="vc-tooltip__trigger"
     >
       <slot></slot>
     </div>
@@ -14,9 +15,7 @@
         v-if="tooltipVisible && $slots['tooltip']"
         ref="tooltipRef"
         :style="floatingStyles"
-        class="tw-absolute tw-z-[101] tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2"
-        @mouseenter="tooltipVisible = true"
-        @mouseleave="tooltipVisible = false"
+        class="vc-tooltip__content"
       >
         <slot name="tooltip"></slot>
       </span>
@@ -26,7 +25,9 @@
 
 <script lang="ts" setup>
 import { useFloating, shift, Placement, offset as floatingOffset } from "@floating-ui/vue";
-import { ref } from "vue";
+import { ref, nextTick, watch } from "vue";
+import { useMouseInElement } from "@vueuse/core";
+
 export interface Props {
   placement?: Placement;
   offset?: {
@@ -51,11 +52,36 @@ defineSlots<{
 const tooltipVisible = ref(false);
 const tooltipCompRef = ref<HTMLElement | null>(null);
 const tooltipRef = ref<HTMLElement | null>(null);
+const target = ref(null);
 
 const { floatingStyles } = useFloating(tooltipCompRef, tooltipRef, {
   placement: props.placement,
   middleware: [floatingOffset(props.offset), shift()],
 });
+
+const { isOutside } = useMouseInElement(target);
+
+watch(isOutside, (outside) => {
+  tooltipVisible.value = !outside;
+});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+:root {
+  --tooltip-background-color: var(--additional-50);
+  --tooltip-border-color: var(--base-border-color, var(--neutrals-200));
+  --tooltip-shadow-color: var(--secondary-300);
+  --tooltip-shadow: 1px 1px 8px rgba(var(--tooltip-shadow-color), 0.25);
+  --tooltip-text-color: var(--neutrals-600);
+}
+
+.vc-tooltip {
+  &__trigger {
+    @apply tw-inline-flex tw-w-full tw-h-full;
+  }
+
+  &__content {
+    @apply tw-absolute tw-z-50 tw-bg-[color:var(--tooltip-background-color)] tw-border tw-border-solid tw-border-[color:var(--tooltip-border-color)] tw-shadow-lg tw-rounded tw-text-[color:var(--tooltip-text-color)] tw-font-normal tw-py-1 tw-px-2;
+  }
+}
+</style>

package/ui/components/atoms/vc-video/vc-video.vue

@@ -1,18 +1,19 @@
 <template>
-  <div class="tw-inline-block tw-relative">
+  <div class="vc-video">
     <VcLabel
       v-if="label"
-      class="tw-mb-2"
+      class="vc-video__label"
     >
       <span>{{ label }}</span>
       <template
         v-if="tooltip"
         #tooltip
-        >{{ tooltip }}</template
       >
+        {{ tooltip }}
+      </template>
     </VcLabel>
 
-    <div class="tw-w-full tw-relative">
+    <div class="vc-video__container">
       <div v-if="source">
         <iframe
           :src="`${source}`"
@@ -26,7 +27,7 @@
       </div>
       <div
         v-else
-        class="tw-absolute tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center tw-text-[#83a3be]"
+        class="vc-video__placeholder"
       >
         <VcIcon
           icon="fas fa-film"
@@ -51,6 +52,27 @@ export interface Emits {
 }
 
 defineProps<Props>();
-
 defineEmits<Emits>();
 </script>
+
+<style lang="scss">
+:root {
+  --video-icon-color: var(--primary-400);
+}
+
+.vc-video {
+  @apply tw-inline-block tw-relative;
+
+  &__label {
+    @apply tw-mb-2;
+  }
+
+  &__container {
+    @apply tw-w-full tw-relative;
+  }
+
+  &__placeholder {
+    @apply tw-absolute tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center tw-text-[color:var(--video-icon-color)];
+  }
+}
+</style>

package/ui/components/atoms/vc-widget/vc-widget.vue

@@ -7,20 +7,20 @@
     }"
   >
     <div
-      class="vc-widget tw-relative tw-shrink-0 tw-py-4 tw-px-2"
-      :class="{
-        'tw-w-[120px] tw-h-[120px]': isExpanded,
-        'vc-widget_disabled': disabled,
-        'tw-w-[50px] tw-h-[50px]': !isExpanded,
-        'tw-w-[100px]': $isMobile.value,
-      }"
+      class="vc-widget"
+      :class="[
+        { 'vc-widget--expanded': isExpanded },
+        { 'vc-widget--collapsed': !isExpanded },
+        { 'vc-widget--mobile': $isMobile.value },
+        { 'vc-widget--disabled': disabled },
+      ]"
       @click="onClick"
     >
       <VcBadge
         :content="truncateCount"
         :size="isExpanded ? 'm' : 's'"
       >
-        <div class="tw-flex tw-flex-col tw-items-center tw-justify-center">
+        <div class="vc-widget__icon-container">
           <VcIcon
             v-if="icon"
             class="vc-widget__icon"
@@ -29,10 +29,10 @@
           ></VcIcon>
         </div>
       </VcBadge>
-      <div class="tw-w-full">
+      <div class="vc-widget__content">
         <div
           v-if="title && isExpanded"
-          class="vc-widget__title tw-line-clamp-2"
+          class="vc-widget__title"
         >
           {{ title }}
         </div>
@@ -85,39 +85,70 @@ function onClick() {
 </script>
 
 <style lang="scss">
+:root {
+  --widget-bg-color: var(--additional-50);
+  --widget-border-color: var(--base-border-color, var(--neutrals-200));
+  --widget-bg-hover-color: var(--primary-50);
+  --widget-icon-color: var(--secondary-500);
+  --widget-icon-disabled-color: var(--neutrals-300);
+  --widget-title-color: var(--base-text-color, var(--neutrals-950));
+  --widget-title-disabled-color: var(--neutrals-300);
+  --widget-value-color: var(--primary-400);
+  --widget-value-disabled-color: var(--neutrals-300);
+}
+
 .vc-widget {
-  @apply tw-flex  tw-overflow-hidden
-    tw-box-border tw-flex-col tw-items-center
-    tw-justify-center tw-border-b tw-border-solid
-    tw-border-b-[#eaedf3] tw-cursor-pointer tw-bg-white
-    hover:tw-bg-[#eff7fc];
-
-  &_disabled {
-    @apply tw-cursor-default hover:tw-bg-white;
+  @apply tw-relative tw-shrink-0 tw-py-4 tw-px-2;
+  @apply tw-flex tw-overflow-hidden tw-box-border tw-flex-col tw-items-center tw-justify-center tw-border-b tw-border-solid tw-cursor-pointer;
+  @apply tw-bg-[color:var(--widget-bg-color)] tw-border-b-[color:var(--widget-border-color)];
+
+  &:hover {
+    @apply tw-bg-[color:var(--widget-bg-hover-color)];
+  }
+
+  &--expanded {
+    @apply tw-w-32 tw-h-32;
+  }
+
+  &--collapsed {
+    @apply tw-w-12 tw-h-12;
+  }
+
+  &--mobile {
+    @apply tw-w-28;
+    @apply tw-border-none #{!important};
+  }
+
+  &__icon-container {
+    @apply tw-flex tw-flex-col tw-items-center tw-justify-center;
   }
 
   &__icon {
-    @apply tw-text-[#a9bfd2];
+    @apply tw-text-[color:var(--widget-icon-color)];
   }
 
-  &_disabled &__icon {
-    @apply tw-text-[#d2d4d7];
+  &--disabled &__icon {
+    @apply tw-text-[color:var(--widget-icon-disabled-color)];
   }
 
   &__title {
-    @apply tw-font-medium tw-text-sm tw-text-[#333333] tw-mt-2 tw-mx-0 tw-text-center;
+    @apply tw-font-medium tw-text-sm tw-text-[color:var(--widget-title-color)] tw-mt-2 tw-mx-0 tw-text-center tw-line-clamp-2;
   }
 
-  &_disabled &__title {
-    @apply tw-text-[#d2d4d7];
+  &--disabled &__title {
+    @apply tw-text-[color:var(--widget-title-disabled-color)];
   }
 
-  &__value {
-    @apply tw-font-medium tw-text-[22px] tw-text-[#43b0e6];
+  &__content {
+    @apply tw-w-full;
   }
 
-  &_disabled &__value {
-    @apply tw-text-[#d2d4d7];
+  &--disabled {
+    @apply tw-cursor-default tw-bg-[color:var(--widget-bg-color)];
+
+    &:hover {
+      @apply tw-bg-[color:var(--widget-bg-color)];
+    }
   }
 }
 </style>

package/ui/components/molecules/vc-breadcrumbs/_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue

@@ -2,8 +2,8 @@
   <div
     class="vc-breadcrumbs-item"
     :class="{
-      'vc-breadcrumbs-item_current': current,
-      'tw-px-1 tw-h-[var(--breadcrumbs-item-height-light)]': variant === 'light',
+      'vc-breadcrumbs-item--current': current,
+      'vc-breadcrumbs-item--light': variant === 'light',
     }"
     @click="onClick"
   >
@@ -13,7 +13,7 @@
       :icon="icon"
       size="s"
     />
-    <div class="vc-breadcrumbs-item__title tw-max-w-[150px] tw-truncate">
+    <div class="vc-breadcrumbs-item__title">
       {{ title }}
     </div>
   </div>
@@ -51,40 +51,42 @@ function onClick(): void {
 :root {
   --breadcrumbs-item-height: 28px;
   --breadcrumbs-item-height-light: 20px;
-  --breadcrumbs-item-border-color: #a1c0d4;
-  --breadcrumbs-item-border-color-hover: #8fb0c6;
-  --breadcrumbs-item-border-color-current: #838d9a;
-  --breadcrumbs-item-color: #43b0e6;
-  --breadcrumbs-item-color-current: #465769;
-  --breadcrumbs-item-icon-color: #a1c0d4;
+  --breadcrumbs-item-border-color: var(--secondary-300);
+  --breadcrumbs-item-border-color-hover: var(--secondary-400);
+  --breadcrumbs-item-border-color-current: var(--secondary-500);
+  --breadcrumbs-item-color: var(--primary-500);
+  --breadcrumbs-item-color-current: var(--primary-600);
+  --breadcrumbs-item-icon-color: var(--secondary-300);
 }
 
 .vc-breadcrumbs-item {
-  @apply tw-h-[var(--breadcrumbs-item-height)]
-  tw-box-border tw-rounded-[3px]
-  tw-border tw-border-solid
-  tw-border-[color:var(--breadcrumbs-item-border-color)]
-  tw-text-[color:var(--breadcrumbs-item-color)]
-  tw-whitespace-nowrap
-  tw-px-3
-  tw-text-sm tw-cursor-pointer tw-inline-flex tw-items-center
-  hover:tw-border
-  hover:tw-border-solid
-  hover:tw-border-[color:var(--breadcrumbs-item-border-color-hover)];
+  @apply tw-box-border tw-rounded-[3px] tw-border tw-border-solid tw-text-sm tw-cursor-pointer tw-inline-flex tw-items-center;
+  @apply tw-h-[var(--breadcrumbs-item-height)] tw-px-3 tw-whitespace-nowrap;
+  @apply tw-border-[color:var(--breadcrumbs-item-border-color)] tw-text-[color:var(--breadcrumbs-item-color)];
+  @apply tw-transition-colors tw-duration-300;
+
+  &--current {
+    @apply tw-text-[color:var(--breadcrumbs-item-color-current)] tw-border-[color:var(--breadcrumbs-item-border-color-current)] tw-cursor-default tw-mr-0;
+  }
+
+  &--light {
+    @apply tw-px-1 tw-h-[var(--breadcrumbs-item-height-light)];
+  }
 
   &__icon {
     @apply tw-mr-2 tw-text-[color:var(--breadcrumbs-item-icon-color)];
   }
 
-  &_disabled {
-    @apply tw-opacity-[0.4];
+  &__title {
+    @apply tw-max-w-[150px] tw-truncate;
+  }
+
+  &--error {
+    @apply tw-border-[color:var(--breadcrumbs-item-border-color-error)] tw-text-[color:var(--breadcrumbs-item-color-error)];
   }
 
-  &_current,
-  &_current:hover {
-    @apply tw-text-[color:var(--breadcrumbs-item-color-current)]
-    tw-border tw-border-solid tw-border-[color:var(--breadcrumbs-item-border-color-current)]
-    tw-cursor-default tw-mr-0;
+  &:hover {
+    @apply tw-border tw-border-solid tw-border-[color:var(--breadcrumbs-item-border-color-hover)];
   }
 }
 </style>