@vc-shell/framework 1.0.290 → 1.0.292

package/ui/components/organisms/vc-table/_internal/vc-table-cell/vc-table-cell.vue

@@ -1,19 +1,15 @@
 <template>
-  <div>
-    <!-- Money cell -->
+  <div class="vc-table-cell">
+    <!-- Money Cell -->
     <template v-if="cell.type === 'money'">
       <template v-if="!isEditable && (typeof value === 'undefined' || Number(value) === 0)">
-        <div
-          class="tw-truncate"
-          :class="cell.class"
-        >
+        <div class="vc-table-cell__not-set">
           {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_SET") }}
         </div>
       </template>
       <div
         v-else-if="typeof Number(value) === 'number'"
-        class="tw-truncate"
-        :class="cell.class"
+        :class="['vc-table-cell__money', cell.class]"
       >
         <template v-if="isEditable">
           <Field
@@ -30,7 +26,7 @@
                   :options="[]"
                   :option="(item[cell.currencyField || 'currency'] as string) || 'USD'"
                   currency-display="symbol"
-                  class="tw-w-full"
+                  class="vc-table-cell__input-currency"
                   :error="errors.length > 0"
                   :error-message="$isMobile.value ? errorMessage : undefined"
                   @update:model-value="$emit('update', { field: cell.id, value: $event })"
@@ -40,75 +36,75 @@
                     v-if="$isDesktop.value && errors.length > 0"
                     #append-inner
                   >
-                    <VcIcon icon="fas fa-exclamation-circle tw-text-[color:var(--error-color)]"></VcIcon>
+                    <VcIcon
+                      icon="fas fa-exclamation-circle"
+                      class="vc-table-cell__error-icon"
+                    ></VcIcon>
                   </template>
                 </VcInputCurrency>
               </template>
-              <template
-                v-if="errors.length > 0"
-                #tooltip
-              >
-                <div class="tw-text-[color:var(--error-color)]">{{ errorMessage }}</div>
+              <template #tooltip>
+                <div class="vc-table-cell__error-tooltip">
+                  {{ errorMessage }}
+                </div>
               </template>
             </VcTooltip>
           </Field>
         </template>
         <template v-else>
-          <span class="tw-truncate">{{ intlMoney(Number(value)) }}</span>
+          <span class="vc-table-cell__money-display">{{ intlMoney(Number(value)) }}</span>
         </template>
       </div>
     </template>
 
-    <!-- Date ago cell -->
+    <!-- Date Ago Cell -->
     <span
       v-else-if="cell.type === 'date-ago'"
-      class="tw-text-[#a5a5a5]"
-      :class="cell.class"
+      :class="['vc-table-cell__date-ago', cell.class]"
       :title="(value instanceof Date && value.toLocaleString(locale)) || ''"
     >
       <div
         v-if="value"
-        class="tw-truncate"
+        class="vc-table-cell__date-ago-content"
       >
         {{ moment(value).fromNow() }}
       </div>
       <div
         v-else
-        class="tw-truncate"
+        class="vc-table-cell__not-set"
       >
         {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_SET") }}
       </div>
     </span>
 
-    <!-- Date exact cell -->
+    <!-- Exact Date/Time Cell -->
     <div
       v-else-if="cell.type === 'date' || cell.type === 'time' || cell.type === 'date-time'"
-      class="tw-text-[#a5a5a5] tw-truncate"
-      :class="cell.class"
+      :class="['vc-table-cell__date', cell.class]"
     >
       <template v-if="value">
         <div
           v-if="cell.format"
-          class="tw-truncate"
+          class="vc-table-cell__date-content"
         >
           {{ moment(value).locale(locale).format(cell.format) }}
         </div>
         <template v-else>
           <div
             v-if="cell.type === 'date'"
-            class="tw-truncate"
+            class="vc-table-cell__date-content"
           >
             {{ value instanceof Date && value.toLocaleDateString(locale) }}
           </div>
           <div
             v-if="cell.type === 'time'"
-            class="tw-truncate"
+            class="vc-table-cell__date-content"
           >
             {{ value instanceof Date && value.toLocaleTimeString(locale) }}
           </div>
           <p
             v-if="cell.type === 'date-time'"
-            class="tw-truncate"
+            class="vc-table-cell__date-content"
           >
             {{ value instanceof Date && value.toLocaleString(locale) }}
           </p>
@@ -116,15 +112,16 @@
       </template>
       <div
         v-else
-        class="tw-truncate"
+        class="vc-table-cell__not-set"
       >
         {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_SET") }}
       </div>
     </div>
 
-    <!-- Image cell -->
+    <!-- Image Cell -->
     <template v-else-if="cell.type === 'image'">
       <VcImage
+        class="vc-table-cell__image"
         :bordered="true"
         size="s"
         aspect="1x1"
@@ -134,15 +131,15 @@
       />
     </template>
 
-    <!-- Status cell -->
+    <!-- Status Cell -->
     <template v-else-if="cell.type === 'status'">
-      <VcStatus>{{ value }}</VcStatus>
+      <VcStatus class="vc-table-cell__status">{{ value }}</VcStatus>
     </template>
 
-    <!-- Status icon cell -->
+    <!-- Status Icon Cell -->
     <div
       v-else-if="cell.type === 'status-icon'"
-      class="tw-flex tw-justify-center"
+      class="vc-table-cell__status-icon"
       :class="cell.class"
     >
       <VcStatusIcon
@@ -151,11 +148,10 @@
       ></VcStatusIcon>
     </div>
 
-    <!-- Number cell -->
+    <!-- Number Cell -->
     <div
       v-else-if="cell.type === 'number'"
-      class="tw-truncate"
-      :class="cell.class"
+      :class="['vc-table-cell__number', cell.class]"
     >
       <template v-if="isEditable">
         <Field
@@ -169,7 +165,7 @@
             <template #default>
               <VcInput
                 :model-value="value"
-                class="tw-w-full"
+                class="vc-table-cell__input-number"
                 type="number"
                 :error="errors.length > 0"
                 :error-message="$isMobile.value ? errorMessage : undefined"
@@ -180,15 +176,17 @@
                   v-if="$isDesktop.value && errors.length > 0"
                   #append-inner
                 >
-                  <VcIcon icon="fas fa-exclamation-circle tw-text-[color:var(--error-color)]"></VcIcon>
+                  <VcIcon
+                    icon="fas fa-exclamation-circle"
+                    class="vc-table-cell__error-icon"
+                  ></VcIcon>
                 </template>
               </VcInput>
             </template>
-            <template
-              v-if="errors.length > 0"
-              #tooltip
-            >
-              <div class="tw-text-[color:var(--error-color)]">{{ errorMessage }}</div>
+            <template #tooltip>
+              <div class="vc-table-cell__error-tooltip">
+                {{ errorMessage }}
+              </div>
             </template>
           </VcTooltip>
         </Field>
@@ -202,29 +200,28 @@
       </template>
     </div>
 
-    <!-- Link cell -->
+    <!-- Link Cell -->
     <template v-else-if="cell.type === 'link'">
       <VcLink
-        class="tw-truncate"
+        class="vc-table-cell__link"
         :class="cell.class"
         >{{ value }}</VcLink
       >
     </template>
 
-    <!-- HTML cell -->
+    <!-- HTML Cell -->
     <template v-else-if="cell.type === 'html'">
       <div
-        class="tw-p-1"
+        class="vc-table-cell__html"
         :class="cell.class"
         v-html="truncatedHtml"
       />
     </template>
 
-    <!-- Default cell -->
+    <!-- Default Cell -->
     <div
       v-else
-      class="tw-truncate"
-      :class="cell.class"
+      :class="['vc-table-cell__default', cell.class]"
     >
       <template v-if="isEditable">
         <Field
@@ -238,7 +235,7 @@
             <template #default>
               <VcInput
                 :model-value="value"
-                class="tw-w-full"
+                class="vc-table-cell__input-default"
                 :error="errors.length > 0"
                 :error-message="$isMobile.value ? errorMessage : undefined"
                 @update:model-value="$emit('update', { field: cell.id, value: $event })"
@@ -248,14 +245,17 @@
                   v-if="$isDesktop.value && errors.length > 0"
                   #append-inner
                 >
-                  <VcIcon icon="fas fa-exclamation-circle tw-text-[color:var(--error-color)]"></VcIcon> </template
-              ></VcInput>
+                  <VcIcon
+                    icon="fas fa-exclamation-circle"
+                    class="vc-table-cell__error-icon"
+                  ></VcIcon>
+                </template>
+              </VcInput>
             </template>
-            <template
-              v-if="errors.length > 0"
-              #tooltip
-            >
-              <div class="tw-text-[color:var(--error-color)]">{{ errorMessage }}</div>
+            <template #tooltip>
+              <div class="vc-table-cell__error-tooltip">
+                {{ errorMessage }}
+              </div>
             </template>
           </VcTooltip>
         </Field>
@@ -334,6 +334,76 @@ function onBlur(args: { row: number | undefined; field: string; errors?: string[
 
 <style lang="scss">
 :root {
-  --error-color: #f14e4e;
+  --table-cell-error-color: var(--base-error-color, var(--danger-500));
+  --table-cell-text-color: var(--neutrals-400);
+  --table-cell-text-base-color: var(--base-text-color, var(--additional-950));
+}
+
+.vc-table-cell {
+  @apply tw-text-sm tw-text-[color:var(--table-cell-text-base-color)];
+
+  &__not-set {
+    @apply tw-truncate;
+  }
+
+  &__money {
+    @apply tw-truncate;
+  }
+
+  &__input-currency {
+    @apply tw-w-full;
+  }
+
+  &__error-icon {
+    @apply tw-text-[color:var(--table-cell-error-color)];
+  }
+
+  &__error-tooltip {
+    @apply tw-text-[color:var(--table-cell-error-color)];
+  }
+
+  &__date-ago {
+    @apply tw-text-[color:var(--table-cell-text-color)];
+  }
+
+  &__date-ago-content {
+    @apply tw-truncate;
+  }
+
+  &__date {
+    @apply tw-truncate tw-text-[color:var(--table-cell-text-color)];
+  }
+
+  &__date-content {
+    @apply tw-truncate;
+  }
+
+  &__status-icon {
+    @apply tw-flex tw-justify-center;
+  }
+
+  &__number {
+    @apply tw-truncate;
+  }
+
+  &__input-number {
+    @apply tw-w-full;
+  }
+
+  &__link {
+    @apply tw-truncate;
+  }
+
+  &__html {
+    @apply tw-p-1 tw-truncate;
+  }
+
+  &__default {
+    @apply tw-truncate;
+  }
+
+  &__input-default {
+    @apply tw-w-full;
+  }
 }
 </style>

package/ui/components/organisms/vc-table/_internal/vc-table-column-switcher/vc-table-column-switcher.vue

@@ -1,9 +1,13 @@
 <template>
-  <div class="tw-relative tw-w-min tw-float-right tw-mr-4">
-    <div ref="referenceButton">
+  <div class="vc-table-column-switcher">
+    <div
+      ref="referenceButton"
+      class="vc-table-column-switcher__button-container"
+    >
       <VcButton
         small
         icon="fas fa-th"
+        class="vc-table-column-switcher__toggle-button"
         @click.stop="isActive = !isActive"
       ></VcButton>
     </div>
@@ -13,25 +17,26 @@
         ref="floatingDrop"
         v-on-click-outside="[close, { ignore: [referenceButton] }]"
         :style="floatingDropStyle"
-        class="tw-flex tw-flex-col tw-box-border tw-max-h-[300px] tw-h-auto tw-z-10 tw-overflow-hidden tw-absolute tw-bg-white tw-border tw-border-solid tw-border-[#e5e7eb] tw-w-max tw-right-0"
+        class="vc-table-column-switcher__dropdown"
       >
         <VcContainer
           v-if="internalItems && internalItems.length"
           :no-padding="true"
+          class="vc-table-column-switcher__container"
         >
-          <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col">
+          <div class="vc-table-column-switcher__list">
             <div
               v-for="item in internalItems"
               :key="item.id"
-              class="tw-flex tw-items-center tw-min-h-[30px] tw-box-border tw-rounded-[3px] tw-px-2 tw-cursor-pointer hover:tw-bg-[#eff7fc] tw-border-b"
+              class="vc-table-column-switcher__item"
               @click="selectItem(item)"
             >
               <VcIcon
                 :icon="item.visible ? 'fas fa-check' : ''"
                 size="s"
-                class="tw-w-4"
+                class="vc-table-column-switcher__item-icon"
               />
-              <p class="tw-ml-2">
+              <p class="vc-table-column-switcher__item-title">
                 {{
                   $te(`COMPONENTS.ORGANISMS.VC_TABLE.${stateKey}.${item.id}`)
                     ? $t(`COMPONENTS.ORGANISMS.VC_TABLE.${stateKey}.${item.id}`)
@@ -117,3 +122,46 @@ function close() {
   }
 }
 </script>
+
+<style lang="scss">
+:root {
+  --table-column-switcher-dropdown-bg: var(--additional-50);
+  --table-column-switcher-dropdown-border: var(--base-border-color, var(--neutrals-200));
+  --table-column-switcher-dropdown-item-hover: var(--primary-50);
+  --table-column-switcher-text-color: var(--base-text-color, var(--neutrals-950));
+}
+
+.vc-table-column-switcher {
+  @apply tw-relative tw-w-min tw-float-right tw-mr-4;
+
+  &__dropdown {
+    @apply tw-flex tw-flex-col tw-box-border tw-z-10 tw-overflow-hidden tw-absolute tw-border tw-border-solid tw-w-max tw-right-0;
+    @apply tw-max-h-[300px] tw-h-auto;
+    background-color: var(--table-column-switcher-dropdown-bg);
+    border-color: var(--table-column-switcher-dropdown-border);
+  }
+
+  &__container {
+    @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col;
+  }
+
+  &__item {
+    @apply tw-flex tw-text-sm tw-items-center tw-box-border tw-cursor-pointer tw-border-b;
+    @apply tw-min-h-[30px] tw-px-2 tw-rounded-[3px];
+    @apply tw-bg-[--table-column-switcher-dropdown-bg];
+    &:hover {
+      @apply tw-bg-[--table-column-switcher-dropdown-item-hover];
+    }
+    border-color: var(--table-column-switcher-dropdown-border);
+    color: var(--table-column-switcher-text-color);
+  }
+
+  &__item-icon {
+    @apply tw-w-4;
+  }
+
+  &__item-title {
+    @apply tw-ml-2;
+  }
+}
+</style>

package/ui/components/organisms/vc-table/_internal/vc-table-counter/vc-table-counter.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="tw-font-medium tw-text-base">
-    <span class="tw-text-[color:var(--table-counter-label-color)]">{{ label }}&nbsp;</span>
-    <span class="tw-text-[color:var(--table-counter-value-color)]">{{ value }}</span>
+  <div class="vc-table-counter">
+    <span class="vc-table-counter__label">{{ label }}&nbsp;</span>
+    <span class="vc-table-counter__value">{{ value }}</span>
   </div>
 </template>
 
@@ -19,7 +19,19 @@ withDefaults(defineProps<Props>(), {
 
 <style lang="scss">
 :root {
-  --table-counter-label-color: #465769;
-  --table-counter-value-color: #43b0e6;
+  --table-counter-label-color: var(--base-text-color, var(--secondary-950));
+  --table-counter-value-color: var(--info-500);
+}
+
+.vc-table-counter {
+  @apply tw-font-medium tw-text-sm;
+
+  &__label {
+    @apply tw-text-[color:var(--table-counter-label-color)];
+  }
+
+  &__value {
+    @apply tw-text-[color:var(--table-counter-value-color)];
+  }
 }
 </style>

package/ui/components/organisms/vc-table/_internal/vc-table-empty/vc-table-empty.vue

@@ -2,19 +2,22 @@
   <!-- Empty table view -->
   <template v-if="!(items && items.length && !columnsInit)">
     <slot
-      v-if="searchValue || searchValue === '' || activeFilterCount"
+      v-if="searchValue !== undefined || activeFilterCount"
       name="notfound"
     >
-      <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center">
+      <div class="vc-table-empty">
         <img
           v-if="notfound?.image"
           :src="notfound.image"
+          alt="Not Found"
+          class="vc-table-empty__image"
         />
-        <div class="tw-m-4 vc-table__empty-text">
+        <div class="vc-table-empty__text">
           {{ notfound?.text || $t("COMPONENTS.ORGANISMS.VC_TABLE.NOT_FOUND") }}
         </div>
         <VcButton
           v-if="notfound?.action"
+          class="vc-table-empty__button"
           @click="notfound?.clickHandler"
         >
           {{ notfound.action }}
@@ -25,16 +28,19 @@
       v-else
       name="empty"
     >
-      <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center">
+      <div class="vc-table-empty vc-table-empty--default">
         <img
           v-if="empty?.image"
           :src="empty.image"
+          alt="Empty Table"
+          class="vc-table-empty__image"
         />
-        <div class="tw-m-4 tw-text-xl tw-font-medium">
+        <div class="vc-table-empty__text">
           {{ empty?.text || $t("COMPONENTS.ORGANISMS.VC_TABLE.EMPTY") }}
         </div>
         <VcButton
           v-if="empty?.action"
+          class="vc-table-empty__button"
           @click="empty?.clickHandler"
         >
           {{ empty.action }}
@@ -43,6 +49,7 @@
     </slot>
   </template>
 </template>
+
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { Ref } from "vue";
@@ -73,4 +80,29 @@ defineSlots<{
 }>();
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+.vc-table-empty {
+  @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center;
+
+  &__image {
+    @apply tw-w-auto tw-h-auto;
+  }
+
+  /* Элемент: Text */
+  &__text {
+    @apply tw-m-4;
+    @apply tw-text-center;
+    @apply tw-text-xl tw-font-medium;
+  }
+
+  &__button {
+    @apply tw-px-4 tw-py-2 tw-rounded tw-font-medium tw-text-sm tw-cursor-pointer;
+    @apply tw-bg-blue-500 tw-text-white;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      @apply tw-bg-blue-600;
+    }
+  }
+}
+</style>