@vc-shell/framework 1.1.0-alpha.8 → 1.1.0

package/ui/components/organisms/vc-popup/vc-popup.vue

@@ -156,13 +156,13 @@ const isMobile = inject("isMobile") as Ref<boolean>;
 const icon = computed(() => {
   switch (props.variant) {
     case "warning":
-      return "fas fa-exclamation-triangle";
+      return "material-warning";
     case "error":
-      return "fas fa-exclamation-circle";
+      return "material-error";
     case "success":
-      return "fas fa-check-circle";
+      return "material-check_circle";
     case "info":
-      return "fas fa-info-circle";
+      return "material-info";
     default:
       return "";
   }
@@ -197,10 +197,10 @@ function closeModal() {
   --popup-header-color: var(--primary-700);
   --popup-content-text-color: var(--primary-700);
   --popup-warning-icon-color: var(--warning-500);
-  --popup-error-icon-color: var(--base-error-color, var(--danger-500));
+  --popup-error-icon-color: var(--danger-500);
   --popup-success-icon-color: var(--success-500);
   --popup-info-icon-color: var(--info-500);
-  --popup-footer-separator: var(--base-border-color, var(--neutrals-200));
+  --popup-footer-separator: var(--neutrals-200);
   --popup-overlay-color: var(--additional-50);
   --popup-overlay: rgb(from var(--popup-overlay-color) r g b / 75%);
   --popup-bg: var(--additional-50);
@@ -208,7 +208,7 @@ function closeModal() {
 
 .vc-popup {
   &__overlay {
-    @apply tw-fixed tw-inset-0 tw-bg-[var(--popup-overlay)] tw-backdrop-blur-[3px];
+    @apply tw-fixed tw-inset-0 tw-bg-black/50 tw-backdrop-blur-[3px];
   }
 
   &__container {

package/ui/components/organisms/vc-table/_internal/vc-table-add-new/vc-table-add-new.vue

@@ -1,63 +1,63 @@
-<template>
-  <div
-    v-if="editing && addNewRowButton"
-    class="vc-table-add-new-row"
-  >
-    <div class="vc-table-add-new-row__container">
-      <VcButton
-        v-if="addNewRowButton.show"
-        text
-        class="vc-table-add-new-row__button"
-        @click="$emit('onAddNewRow')"
-      >
-        <div class="vc-table-add-new-row__content">
-          <VcIcon
-            icon="fas fa-plus"
-            size="m"
-            class="vc-table-add-new-row__icon"
-          />
-          {{ unref(addNewRowButton.title) }}
-        </div>
-      </VcButton>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { unref } from "vue";
-export interface Props {
-  editing: boolean | undefined;
-  addNewRowButton:
-    | {
-        show: boolean;
-        title: string;
-      }
-    | undefined;
-}
-
-export interface Emits {
-  (event: "onAddNewRow"): void;
-}
-
-defineProps<Props>();
-
-defineEmits<Emits>();
-</script>
-
-<style lang="scss">
-:root {
-  --table-add-new-icon-color: var(--primary-400);
-}
-
-.vc-table-add-new-row {
-  @apply tw-p-3;
-
-  &__content {
-    @apply tw-flex tw-flex-row tw-gap-2 tw-items-center;
-  }
-
-  &__icon {
-    @apply tw-text-[color:var(--table-add-new-icon-color)];
-  }
-}
-</style>
+<template>
+  <div
+    v-if="editing && addNewRowButton"
+    class="vc-table-add-new-row"
+  >
+    <div class="vc-table-add-new-row__container">
+      <VcButton
+        v-if="addNewRowButton.show"
+        text
+        class="vc-table-add-new-row__button"
+        @click="$emit('onAddNewRow')"
+      >
+        <div class="vc-table-add-new-row__content">
+          <VcIcon
+            icon="material-add"
+            size="m"
+            class="vc-table-add-new-row__icon"
+          />
+          {{ unref(addNewRowButton.title) }}
+        </div>
+      </VcButton>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { unref } from "vue";
+export interface Props {
+  editing: boolean | undefined;
+  addNewRowButton:
+    | {
+        show: boolean;
+        title: string;
+      }
+    | undefined;
+}
+
+export interface Emits {
+  (event: "onAddNewRow"): void;
+}
+
+defineProps<Props>();
+
+defineEmits<Emits>();
+</script>
+
+<style lang="scss">
+:root {
+  --table-add-new-icon-color: var(--primary-400);
+}
+
+.vc-table-add-new-row {
+  @apply tw-p-3;
+
+  &__content {
+    @apply tw-flex tw-flex-row tw-gap-2 tw-items-center;
+  }
+
+  &__icon {
+    @apply tw-text-[color:var(--table-add-new-icon-color)];
+  }
+}
+</style>

package/ui/components/organisms/vc-table/_internal/vc-table-base-header/vc-table-base-header.vue

@@ -34,7 +34,7 @@
     >
       <template #prepend-inner="{ focus }">
         <VcIcon
-          icon="fas fa-search"
+          icon="material-search"
           class="vc-table-base-header__search-icon"
           @click="focus?.()"
         ></VcIcon>
@@ -84,8 +84,8 @@ defineEmits<Emits>();
 
 <style lang="scss">
 :root {
-  --table-base-header-border-color: var(--base-border-color, var(--neutrals-200));
-  --table-base-header-input-icon-color: var(--neutrals-300);
+  --table-base-header-border-color: var(--neutrals-200);
+  --table-base-header-input-icon-color: var(--neutrals-400);
   --table-base-header-padding-horizontal: 18px;
   --table-base-header-padding-vertical: 9px;
   --table-base-header-mobile-padding: 28px;

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

@@ -37,7 +37,7 @@
                     #append-inner
                   >
                     <VcIcon
-                      icon="fas fa-exclamation-circle"
+                      icon="material-error"
                       class="vc-table-cell__error-icon"
                     ></VcIcon>
                   </template>
@@ -180,7 +180,7 @@
                   #append-inner
                 >
                   <VcIcon
-                    icon="fas fa-exclamation-circle"
+                    icon="material-error"
                     class="vc-table-cell__error-icon"
                   ></VcIcon>
                 </template>
@@ -252,7 +252,7 @@
                   #append-inner
                 >
                   <VcIcon
-                    icon="fas fa-exclamation-circle"
+                    icon="material-error"
                     class="vc-table-cell__error-icon"
                   ></VcIcon>
                 </template>
@@ -287,7 +287,8 @@ import VcInputCurrency from "../../../../molecules/vc-input-currency/vc-input-cu
 import VcInput from "../../../../molecules/vc-input/vc-input.vue";
 import VcTooltip from "../../../../atoms/vc-tooltip/vc-tooltip.vue";
 import { Field } from "vee-validate";
-import type { TableItem, ITableColumns } from "../../types";
+import type { TableItem } from "../../vc-table.vue";
+import { ITableColumns } from "../../../../../../core/types";
 
 export interface Props {
   cell: ITableColumns;
@@ -343,9 +344,9 @@ function onBlur(args: { row: number | undefined; field: string; errors?: string[
 
 <style lang="scss">
 :root {
-  --table-cell-error-color: var(--base-error-color, var(--danger-500));
+  --table-cell-error-color: var(--danger-500);
   --table-cell-text-color: var(--neutrals-400);
-  --table-cell-text-base-color: var(--base-text-color, var(--additional-950));
+  --table-cell-text-base-color: var(--additional-950);
 }
 
 .vc-table-cell {

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

@@ -1,62 +1,48 @@
 <template>
   <div class="vc-table-column-switcher">
-    <div
-      ref="referenceButton"
-      class="vc-table-column-switcher__button-container"
+    <GenericDropdown
+      :opened="isActive"
+      :items="internalItems"
+      placement="bottom-end"
+      floating
+      @item-click="selectItem"
+      @update:opened="(state) => emit('onActive', state)"
     >
-      <VcButton
-        small
-        icon="fas fa-th"
-        class="vc-table-column-switcher__toggle-button"
-        @click.stop="isActive = !isActive"
-      ></VcButton>
-    </div>
-    <teleport to="body">
-      <div
-        v-if="isActive"
-        ref="floatingDrop"
-        v-on-click-outside="[close, { ignore: [referenceButton] }]"
-        :style="floatingDropStyle"
-        class="vc-table-column-switcher__dropdown"
-      >
-        <VcContainer
-          v-if="internalItems && internalItems.length"
-          :no-padding="true"
-          class="vc-table-column-switcher__container"
-        >
-          <div class="vc-table-column-switcher__list">
-            <div
-              v-for="item in internalItems"
-              :key="item.id"
-              class="vc-table-column-switcher__item"
-              @click="selectItem(item)"
-            >
-              <VcIcon
-                :icon="item.visible ? 'fas fa-check' : ''"
-                size="s"
-                class="vc-table-column-switcher__item-icon"
-              />
-              <p class="vc-table-column-switcher__item-title">
-                {{
-                  $te(`COMPONENTS.ORGANISMS.VC_TABLE.${stateKey}.${item.id}`)
-                    ? $t(`COMPONENTS.ORGANISMS.VC_TABLE.${stateKey}.${item.id}`)
-                    : item.title
-                }}
-              </p>
-            </div>
-          </div>
-        </VcContainer>
-      </div>
-    </teleport>
+      <template #trigger>
+        <VcButton
+          size="xs"
+          icon-size="l"
+          icon="material-view_column"
+          class="vc-table-column-switcher__toggle-button"
+          @click="isActive = !isActive"
+        ></VcButton>
+      </template>
+
+      <template #item="{ item }">
+        <div class="vc-table-column-switcher__item">
+          <VcIcon
+            :icon="item.visible ? 'material-check' : ''"
+            size="s"
+            class="vc-table-column-switcher__item-icon"
+          />
+          <p class="vc-table-column-switcher__item-title">
+            {{
+              $te(`COMPONENTS.ORGANISMS.VC_TABLE.${stateKey}.${item.id}`)
+                ? $t(`COMPONENTS.ORGANISMS.VC_TABLE.${stateKey}.${item.id}`)
+                : item.title
+            }}
+          </p>
+        </div>
+      </template>
+    </GenericDropdown>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch } from "vue";
+import { ref, watch } from "vue";
 import { ITableColumns } from "./../../../../../../core/types";
-import { vOnClickOutside } from "@vueuse/components";
-import { useFloating, flip, shift, autoUpdate } from "@floating-ui/vue";
-import { TableColPartial } from "../../types";
+import { TableColPartial } from "../../vc-table.vue";
+import { GenericDropdown } from "../../../../../../shared/components/generic-dropdown";
 
 export interface Props {
   items: TableColPartial[];
@@ -70,32 +56,16 @@ export interface Emits {
 
 const props = withDefaults(defineProps<Props>(), {});
 const emit = defineEmits<Emits>();
-
 const isActive = ref(false);
-const referenceButton = ref(null);
-const floatingDrop = ref(null);
-const internalItems = ref();
-const floater = useFloating(referenceButton, floatingDrop, {
-  placement: "bottom-end",
-  whileElementsMounted: autoUpdate,
-  middleware: [flip({ fallbackPlacements: ["top-end", "bottom-end"] }), shift({ mainAxis: false })],
-});
-
-const floatingDropStyle = computed(() => {
-  return {
-    top: `${floater.y.value ?? 0}px`,
-    left: `${floater.x.value ?? 0}px`,
-  };
-});
+const internalItems = ref<ITableColumns[]>([]);
 
 watch(
   () => props.items,
   (newVal) => {
-    internalItems.value = newVal;
+    internalItems.value = newVal as ITableColumns[];
   },
   { immediate: true, deep: true },
 );
-
 watch(
   () => isActive.value,
   (newVal) => {
@@ -104,7 +74,7 @@ watch(
 );
 
 function selectItem(item: ITableColumns) {
-  const numberVisible = internalItems.value.filter((i: ITableColumns) => i.visible).length;
+  const numberVisible = internalItems.value?.filter((i: ITableColumns) => i.visible).length || 0;
 
   if (numberVisible > 1 || !item.visible) {
     emit("change", toggleVisibility(item));
@@ -127,33 +97,17 @@ function close() {
 <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-border: var(--neutrals-200);
   --table-column-switcher-dropdown-item-hover: var(--primary-50);
-  --table-column-switcher-text-color: var(--base-text-color, var(--neutrals-950));
+  --table-column-switcher-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;
-  }
+  @apply tw-relative tw-w-min tw-float-right tw-mr-4 tw-h-full;
 
   &__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);
+    @apply tw-flex tw-text-sm tw-items-center tw-box-border tw-cursor-pointer;
+    @apply tw-w-full tw-px-3 tw-py-2;
     color: var(--table-column-switcher-text-color);
   }
 

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

@@ -19,7 +19,7 @@ withDefaults(defineProps<Props>(), {
 
 <style lang="scss">
 :root {
-  --table-counter-label-color: var(--base-text-color, var(--secondary-950));
+  --table-counter-label-color: var(--secondary-950);
   --table-counter-value-color: var(--primary-500);
   --table-counter-value-border-color: var(--neutrals-500);
 }

package/ui/components/organisms/vc-table/_internal/vc-table-desktop-view/_internal/vc-table-body/vc-table-body.vue

@@ -74,8 +74,7 @@
 import VcTableRow from "../vc-table-row/vc-table-row.vue";
 import VcTableEmpty from "../../../vc-table-empty/vc-table-empty.vue";
 import type { IActionBuilderResult } from "../../../../../../../../core/types";
-import { TableColPartial, TableItem, StatusImage } from "../../../../types";
-import type { TableSlots } from "../../../../vc-table.vue";
+import type { TableSlots, TableItem, TableColPartial, StatusImage } from "../../../../vc-table.vue";
 import { MaybeRef, useSlots } from "vue";
 
 defineProps<{

package/ui/components/organisms/vc-table/_internal/vc-table-desktop-view/_internal/vc-table-columns-header/vc-table-columns-header.vue

@@ -13,7 +13,8 @@
         <div class="vc-table-columns-header__checkbox-content">
           <VcCheckbox
             :model-value="headerCheckbox"
-            size="m"
+            size="s"
+            :indeterminate="selection && selection.length > 0 && selection.length !== items.length"
             @update:model-value="$emit('update:headerCheckbox', $event)"
             @click.stop
           />
@@ -55,7 +56,7 @@
           >
             <VcIcon
               size="xs"
-              :icon="`fas fa-chevron-${sortDirection === 'DESC' ? 'down' : 'up'}`"
+              :icon="`material-keyboard_arrow_${sortDirection === 'DESC' ? 'down' : 'up'}`"
             />
           </div>
           <div
@@ -64,11 +65,11 @@
           >
             <VcIcon
               size="xs"
-              icon="fas fa-chevron-up"
+              icon="material-keyboard_arrow_up"
             />
             <VcIcon
               size="xs"
-              icon="fas fa-chevron-down"
+              icon="material-keyboard_arrow_down"
             />
           </div>
         </div>
@@ -110,9 +111,10 @@
 import { toRefs, ref } from "vue";
 import { VcCheckbox, VcIcon } from "../../../../../..";
 import VcTableColumnSwitcher from "../../../vc-table-column-switcher/vc-table-column-switcher.vue";
-import type { ITableColumns, TableItem, TableColPartial } from "../../../../types";
+import type { TableItem, TableColPartial } from "../../../../vc-table.vue";
 import { useTableColumnReorder } from "../../../../composables/useTableColumnReorder";
 import { useTableColumnResize } from "../../../../composables/useTableColumnResize";
+import { ITableColumns } from "../../../../../../../../core/types";
 
 const props = defineProps<{
   items: T[];
@@ -129,6 +131,7 @@ const props = defineProps<{
   internalColumnsSorted: TableColPartial[];
   stateKey: string;
   internalColumns: TableColPartial[];
+  selection?: T[];
 }>();
 
 const emit = defineEmits<{
@@ -150,7 +153,7 @@ const tableAlignment = {
   evenly: "tw-justify-evenly",
 };
 
-const { filteredCols, internalColumns } = toRefs(props);
+const { internalColumns } = toRefs(props);
 
 const headerRef = ref<HTMLElement>();
 
@@ -169,7 +172,7 @@ const { resizer, handleMouseDown } = useTableColumnResize(internalColumns, () =>
 <style lang="scss">
 :root {
   --table-header-height: 60px;
-  --table-header-border-color: var(--base-border-color, var(--neutrals-200));
+  --table-header-border-color: var(--neutrals-200);
 }
 
 .vc-table-columns-header {

package/ui/components/organisms/vc-table/_internal/vc-table-desktop-view/_internal/vc-table-row/vc-table-row.vue

@@ -30,7 +30,7 @@
       <div class="vc-table-row__checkbox-content">
         <VcCheckbox
           :model-value="isSelected(item as T)"
-          size="m"
+          size="s"
           :disabled="disabledSelection.includes(item as T)"
           @update:model-value="$emit('rowCheckbox', item as T)"
         />
@@ -105,8 +105,8 @@
 <script lang="ts" setup generic="T extends TableItem | string">
 import { VcCheckbox, VcIcon, VcTooltip } from "../../../../../../";
 import VcTableCell from "../../../vc-table-cell/vc-table-cell.vue";
-import type { ITableColumns, TableItem, TableColPartial } from "../../../../types";
-import type { IActionBuilderResult } from "../../../../../../../../core/types";
+import type { TableItem, TableColPartial } from "../../../../vc-table.vue";
+import type { IActionBuilderResult, ITableColumns } from "../../../../../../../../core/types";
 import { MaybeRef } from "vue";
 defineProps<{
   item: T;

package/ui/components/organisms/vc-table/_internal/vc-table-desktop-view/vc-table-desktop-view.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <template>
   <div
     class="vc-table-desktop-view"
@@ -13,6 +12,7 @@
       :filtered-cols="filteredCols"
       :multiselect="multiselect"
       :header-checkbox="headerCheckbox"
+      :selection="selection"
       :is-header-hover="isHeaderHover"
       :expanded="expanded"
       :editing="editing"
@@ -80,7 +80,7 @@
       >
         <slot
           :name="slot"
-          v-bind="slotProps"
+          v-bind="{ ...slotProps, item: slotProps.item as T }"
         />
       </template>
     </VcTableBody>
@@ -92,10 +92,9 @@ import { toRefs, MaybeRef, useSlots } from "vue";
 import VcTableHeader from "./_internal/vc-table-columns-header/vc-table-columns-header.vue";
 import VcTableSelectAllHeader from "./_internal/vc-table-select-all-header/vc-table-select-all-header.vue";
 import VcTableBody from "./_internal/vc-table-body/vc-table-body.vue";
-import type { ITableColumns, TableItem, TableColPartial, StatusImage } from "../../types";
-import type { IActionBuilderResult } from "../../../../../../core/types";
+import type { IActionBuilderResult, ITableColumns } from "../../../../../../core/types";
 import { useTableRowReorder } from "../../composables/useTableRowReorder";
-import type { TableSlots } from "../../vc-table.vue";
+import type { TableSlots, TableItem, TableColPartial, StatusImage } from "../../vc-table.vue";
 
 const props = defineProps<{
   items: T[];

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

@@ -81,6 +81,7 @@ defineSlots<{
 </script>
 
 <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;
 
@@ -88,7 +89,6 @@ defineSlots<{
     @apply tw-w-auto tw-h-auto;
   }
 
-  /* Элемент: Text */
   &__text {
     @apply tw-m-4;
     @apply tw-text-center;
@@ -97,12 +97,7 @@ defineSlots<{
 
   &__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>

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

@@ -16,7 +16,7 @@
         <div class="vc-table-filter__icon-container">
           <VcIcon
             class="vc-table-filter__icon"
-            icon="fas fa-filter"
+            icon="lucide-funnel"
             size="m"
           />
         </div>
@@ -144,7 +144,7 @@ function closePanel() {
   --table-filter-desktop-shadow: 1px 1px 11px rgb(from var(--table-filter-desktop-shadow-color) r g b / 7%);
   --table-filter-panel-bg: var(--additional-50);
   --table-filter-close-icon-color: var(--neutrals-500);
-  --table-filter-panel-border-color: var(--base-border-color, var(--neutrals-200));
+  --table-filter-panel-border-color: var(--neutrals-200);
   --table-filter-panel-header-title-color: var(--neutrals-600);
 }
 

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

@@ -1,10 +1,9 @@
 <template>
   <div
-    v-if="(hasFooterSlot || footer) && items?.length && !columnsInit"
     class="vc-table__footer"
     :class="{
-      'vc-table__footer--mobile': isMobile,
-      'vc-table__footer--desktop': isDesktop,
+      'vc-table__footer--mobile': $isMobile.value,
+      'vc-table__footer--desktop': $isDesktop.value,
     }"
   >
     <VcTableCounter
@@ -29,13 +28,6 @@ import VcTableCounter from "../vc-table-counter/vc-table-counter.vue";
 import type { ComponentProps } from "vue-component-type-helpers";
 
 const props = defineProps<{
-  hasFooterSlot: boolean;
-  footer: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  items?: any[];
-  columnsInit: boolean;
-  isMobile: boolean;
-  isDesktop: boolean;
   totalLabel?: string;
   totalCount: number;
   expanded: boolean;
@@ -64,7 +56,7 @@ function handlePaginationClick(event: number) {
   }
 
   &--desktop {
-    @apply tw-p-6;
+    @apply tw-p-[10px];
   }
 }
 </style>