@vc-shell/framework 1.0.341 → 1.1.0-alpha.10

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

@@ -0,0 +1,214 @@
+<template>
+  <div
+    class="vc-table-desktop-view"
+    :class="{
+      'vc-table-desktop-view--empty': !items || !items.length,
+      'vc-table-desktop-view--multiselect': multiselect,
+    }"
+  >
+    <VcTableHeader
+      v-if="filteredCols.length"
+      :items="items"
+      :filtered-cols="filteredCols"
+      :multiselect="multiselect"
+      :header-checkbox="headerCheckbox"
+      :selection="selection"
+      :is-header-hover="isHeaderHover"
+      :expanded="expanded"
+      :editing="editing"
+      :sort-field="sortField"
+      :sort-direction="sortDirection"
+      :resizable-columns="resizableColumns"
+      :internal-columns-sorted="internalColumnsSorted"
+      :state-key="stateKey"
+      :internal-columns="internalColumns"
+      :reorderable-columns="reorderableColumns"
+      @header-mouse-over="handleHeaderMouseOver"
+      @column-switcher="handleColumnSwitcher"
+      @header-click="handleHeaderClick"
+      @update:header-checkbox="$emit('update:headerCheckbox', $event)"
+      @column-reorder="$emit('columnReorder')"
+      @column-resize="$emit('columnResize')"
+      @toggle-column="toggleColumn"
+    />
+
+    <VcTableSelectAllHeader
+      :select-all="selectAll"
+      :show-selection-choice="showSelectionChoice"
+      :all-selected="allSelected"
+      @select-all="handleSelectAll"
+    />
+
+    <VcTableBody
+      :items="items"
+      :filtered-cols="filteredCols"
+      :multiselect="multiselect"
+      :selected-item-id="selectedItemId"
+      :selection="selection"
+      :disabled-selection="disabledSelection"
+      :reorderable-rows="reorderableRows"
+      :dragged-row="draggedRow"
+      :has-click-listener="hasClickListener"
+      :editing="editing"
+      :enable-item-actions="enableItemActions"
+      :item-action-builder="itemActionBuilder"
+      :item-actions="itemActions"
+      :selected-row-index="selectedRowIndex"
+      :columns-init="columnsInit"
+      :search-value="searchValue"
+      :active-filter-count="activeFilterCount"
+      :notfound="notfound"
+      :empty="empty"
+      :is-selected="isSelected"
+      @item-click="$emit('itemClick', $event)"
+      @close-actions="closeActions"
+      @row-mouse-down="onRowMouseDown"
+      @row-drag-start="onRowDragStart"
+      @row-drag-over="onRowDragOver"
+      @row-drag-leave="onRowDragLeave"
+      @row-drag-end="onRowDragEnd"
+      @row-drop="onRowDrop"
+      @show-actions="showActions"
+      @row-checkbox="rowCheckbox"
+      @on-edit-complete="$emit('onEditComplete', $event)"
+      @on-cell-blur="$emit('onCellBlur', $event)"
+    >
+      <template
+        v-for="(slot, i) in slotName"
+        :key="i"
+        #[slot]="slotProps"
+      >
+        <slot
+          :name="slot"
+          v-bind="{ ...slotProps, item: slotProps.item as T }"
+        />
+      </template>
+    </VcTableBody>
+  </div>
+</template>
+
+<script lang="ts" setup generic="T extends TableItem | string">
+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 { IActionBuilderResult, ITableColumns } from "../../../../../../core/types";
+import { useTableRowReorder } from "../../composables/useTableRowReorder";
+import type { TableSlots, TableItem, TableColPartial, StatusImage } from "../../vc-table.vue";
+
+const props = defineProps<{
+  items: T[];
+  filteredCols: TableColPartial[];
+  multiselect?: boolean;
+  headerCheckbox: boolean;
+  isHeaderHover: boolean;
+  expanded?: boolean;
+  editing?: boolean;
+  sortField?: string;
+  sortDirection?: string;
+  resizableColumns?: boolean;
+  internalColumnsSorted: TableColPartial[];
+  stateKey: string;
+  selectAll?: boolean;
+  showSelectionChoice?: boolean;
+  allSelected?: boolean;
+  selection: T[];
+  disabledSelection: T[];
+  columnsInit: boolean;
+  selectedItemId?: MaybeRef<string>;
+  reorderableRows?: boolean;
+  reorderableColumns?: boolean;
+  enableItemActions?: boolean;
+  itemActionBuilder?: (item: T) => IActionBuilderResult<T>[] | undefined;
+  itemActions: IActionBuilderResult<T>[][];
+  selectedRowIndex?: number;
+  hasClickListener?: boolean;
+  searchValue?: string;
+  activeFilterCount?: number;
+  notfound?: StatusImage;
+  empty?: StatusImage;
+  isSelected: (item: T) => boolean;
+  rowCheckbox: (item: T) => void;
+  internalColumns: TableColPartial[];
+}>();
+
+const emit = defineEmits<{
+  (e: "itemClick", item: T): void;
+  (e: "onEditComplete", args: { event: { field: string; value: string | number }; index: number }): void;
+  (e: "onCellBlur", args: { row: number | undefined; field: string }): void;
+  (e: "headerMouseOver", value: boolean): void;
+  (e: "columnSwitcher", value: boolean): void;
+  (e: "headerClick", item: ITableColumns): void;
+  (e: "selectAll"): void;
+  (e: "update:headerCheckbox", value: boolean): void;
+  (e: "columnReorder"): void;
+  (e: "columnResize"): void;
+  (e: "row:reorder", args: { dragIndex: number; dropIndex: number; value: T[] }): void;
+  (e: "showActions", index: number): void;
+  (e: "closeActions"): void;
+  (e: "toggleColumn", item: ITableColumns): void;
+}>();
+
+defineSlots<TableSlots<T>>();
+
+const { items } = toRefs(props);
+const slots = useSlots();
+
+const slotName = Object.keys(slots) as unknown;
+
+const { draggedRow, onRowMouseDown, onRowDragStart, onRowDragOver, onRowDragLeave, onRowDragEnd, onRowDrop } =
+  useTableRowReorder<T>(items, (args) => emit("row:reorder", args));
+
+function handleHeaderMouseOver(state: boolean) {
+  emit("headerMouseOver", state);
+}
+
+function handleColumnSwitcher(state: boolean) {
+  emit("columnSwitcher", state);
+}
+
+function handleHeaderClick(item: TableColPartial) {
+  const cleanCol = { ...item };
+  delete cleanCol.predefined;
+  emit("headerClick", cleanCol as ITableColumns);
+}
+
+function handleSelectAll() {
+  emit("selectAll");
+}
+
+function showActions(index: number) {
+  emit("showActions", index);
+}
+
+function closeActions() {
+  emit("closeActions");
+}
+
+function toggleColumn(item: ITableColumns) {
+  emit("toggleColumn", item);
+}
+
+defineExpose({
+  onRowMouseDown,
+  onRowDragStart,
+  onRowDragOver,
+  onRowDragLeave,
+  onRowDragEnd,
+  onRowDrop,
+});
+</script>
+
+<style lang="scss">
+.vc-table-desktop-view {
+  @apply tw-relative tw-box-border tw-w-full tw-h-full tw-flex tw-flex-col;
+
+  &--empty {
+    @apply tw-overflow-auto;
+  }
+
+  &--multiselect {
+    @apply tw-overflow-auto;
+  }
+}
+</style>

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

@@ -58,7 +58,7 @@ export interface Props {
   items: any[];
   columnsInit: boolean;
   searchValue?: string;
-  activeFilterCount: number;
+  activeFilterCount?: number;
   notfound?: {
     image?: string;
     text: string | Ref<string>;
@@ -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

@@ -1,64 +1,71 @@
 <template>
   <!-- Filter button -->
-  <VcButton
+  <VcTooltip
     ref="filterToggle"
-    icon="fas fa-filter"
-    icon-size="m"
-    class="vc-table-filter__button"
-    :disabled="disabled"
-    @click="openPanel"
+    :delay="1000"
   >
-    <template
-      v-if="title || counter"
-      #default
+    <VcButton
+      text
+      class="vc-table-filter__button"
+      @click="openPanel"
     >
-      <div class="vc-table-filter__button-content">
-        <span
-          v-if="title"
-          class="vc-table-filter__button-title"
-        >
-          {{ title }}
-        </span>
-        <div
-          v-if="counter"
-          class="vc-table-filter__counter"
-        >
-          {{ counter }}
+      <VcBadge
+        :content="counter"
+        size="s"
+      >
+        <div class="vc-table-filter__icon-container">
+          <VcIcon
+            class="vc-table-filter__icon"
+            icon="fas fa-filter"
+            size="m"
+          />
         </div>
-      </div>
+      </VcBadge>
+    </VcButton>
+    <template #tooltip>
+      {{ title }}
     </template>
-  </VcButton>
+  </VcTooltip>
   <Sidebar
     :is-expanded="$isMobile.value ? isPanelVisible : false"
     position="left"
     render="mobile"
     @close="closePanel"
   >
+    <template #header>
+      <span />
+    </template>
     <template #content>
       <div class="vc-table-filter">
         <!-- Filter panel -->
-        <teleport to="body">
+        <div
+          v-if="isPanelVisible"
+          ref="filterPanel"
+          :class="panelClass"
+          :style="filterStyle"
+          @click.self="closePanel"
+        >
           <div
-            v-if="isPanelVisible"
-            ref="filterPanel"
-            :class="panelClass"
-            :style="filterStyle"
-            @click.self="closePanel"
+            class="vc-table-filter__panel-inner"
+            :class="{
+              'vc-table-filter__panel-inner--desktop': $isDesktop.value,
+            }"
+            @click.stop
           >
-            <div
-              class="vc-table-filter__panel-inner"
-              @click.stop
-            >
+            <div class="vc-table-filter__panel-header">
+              <div class="vc-table-filter__panel-header-title">
+                {{ title }}
+              </div>
               <VcIcon
                 class="vc-table-filter__panel-close"
-                icon="fas fa-times"
-                size="xl"
+                :icon="CrossSignIcon"
+                size="xs"
                 @click="closePanel"
               />
-              <slot :close-panel="closePanel"></slot>
             </div>
+            <slot :close-panel="closePanel"></slot>
           </div>
-        </teleport>
+        </div>
       </div>
     </template>
   </Sidebar>
@@ -69,6 +76,9 @@ import { ref, watch, computed, inject, Ref } from "vue";
 import { offset, autoUpdate, useFloating, UseFloatingReturn } from "@floating-ui/vue";
 import { VcButton } from "./../../../../atoms/vc-button";
 import { Sidebar } from "./../../../../../../shared/components";
+import { VcBadge } from "./../../../../atoms/vc-badge";
+import { VcTooltip } from "./../../../../atoms/vc-tooltip";
+import { CrossSignIcon } from "./../../../../atoms/vc-icon/icons";
 
 export interface Props {
   title?: string;
@@ -133,12 +143,30 @@ function closePanel() {
   --table-filter-desktop-shadow-color: var(--additional-950);
   --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(--info-500);
+  --table-filter-close-icon-color: var(--neutrals-500);
+  --table-filter-panel-border-color: var(--neutrals-200);
+  --table-filter-panel-header-title-color: var(--neutrals-600);
 }
 
 .vc-table-filter {
   @apply tw-relative tw-overflow-visible;
 
+  &__button {
+    @apply tw-p-0 #{!important};
+  }
+
+  &__icon-container {
+    @apply tw-flex tw-flex-col tw-items-center tw-justify-center;
+  }
+
+  &__icon {
+    @apply tw-text-[color:var(--widget-icon-color)];
+  }
+
+  &__title {
+    @apply tw-font-medium tw-text-xs tw-text-[color:var(--widget-title-color)] tw-mt-1 tw-mx-0 tw-text-center tw-line-clamp-2;
+  }
+
   &__button-content {
     @apply tw-flex tw-flex-row tw-items-center tw-gap-[10px];
   }
@@ -157,15 +185,15 @@ function closePanel() {
       &-inner {
         @apply tw-w-full tw-h-full;
       }
-
-      &-close {
-        @apply tw-self-start;
-      }
     }
 
     .vc-row {
       @apply tw-block;
     }
+
+    .vc-table-filter__panel-inner {
+      @apply tw-bg-transparent;
+    }
   }
 
   &__panel {
@@ -173,12 +201,23 @@ function closePanel() {
   }
 
   &__panel-inner {
-    @apply tw-bg-[--table-filter-panel-bg] tw-box-border tw-p-5 tw-flex tw-flex-col;
-    box-shadow: var(--table-filter-desktop-shadow);
+    @apply tw-bg-[--table-filter-panel-bg] tw-box-border tw-flex tw-flex-col;
+
+    &--desktop {
+      box-shadow: var(--table-filter-desktop-shadow);
+    }
+  }
+
+  &__panel-header {
+    @apply tw-px-6 tw-py-[10px] tw-flex tw-flex-row tw-justify-between tw-items-center tw-border-b tw-border-solid tw-border-[var(--table-filter-panel-border-color)];
+  }
+
+  &__panel-header-title {
+    @apply tw-text-sm tw-font-bold tw-text-[var(--table-filter-panel-header-title-color)];
   }
 
   &__panel-close {
-    @apply tw-text-[var(--table-filter-close-icon-color)] tw-cursor-pointer tw-self-end tw-shrink-0;
+    @apply tw-text-[var(--table-filter-close-icon-color)] tw-cursor-pointer tw-shrink-0;
   }
 }
 </style>

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

@@ -0,0 +1,62 @@
+<template>
+  <div
+    class="vc-table__footer"
+    :class="{
+      'vc-table__footer--mobile': $isMobile.value,
+      'vc-table__footer--desktop': $isDesktop.value,
+    }"
+  >
+    <VcTableCounter
+      :label="totalLabel || t('COMPONENTS.ORGANISMS.VC_TABLE.TOTALS')"
+      :value="totalCount"
+    />
+
+    <VcPagination
+      :expanded="expanded"
+      :pages="pages"
+      :current-page="currentPage"
+      :variant="paginationVariant"
+      @item-click="handlePaginationClick"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { VcPagination } from "../../../../";
+import VcTableCounter from "../vc-table-counter/vc-table-counter.vue";
+import type { ComponentProps } from "vue-component-type-helpers";
+
+const props = defineProps<{
+  totalLabel?: string;
+  totalCount: number;
+  expanded: boolean;
+  pages: number;
+  currentPage: number;
+  paginationVariant: ComponentProps<typeof VcPagination>["variant"];
+}>();
+
+const emit = defineEmits<{
+  (e: "pagination-click", page: number): void;
+}>();
+
+const { t } = useI18n({ useScope: "global" });
+
+function handlePaginationClick(event: number) {
+  emit("pagination-click", event);
+}
+</script>
+
+<style lang="scss">
+.vc-table__footer {
+  @apply tw-flex-shrink-0 tw-flex tw-items-center tw-justify-between;
+
+  &--mobile {
+    @apply tw-p-6;
+  }
+
+  &--desktop {
+    @apply tw-p-[10px];
+  }
+}
+</style>

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

@@ -0,0 +1,160 @@
+<template>
+  <Transition name="table-header">
+    <div
+      v-if="showHeader && shouldShowSearch"
+      class="vc-table-header"
+    >
+      <slot
+        name="header"
+        :header="headerComponent"
+      >
+        <component :is="headerComponent" />
+      </slot>
+    </div>
+  </Transition>
+</template>
+
+<script lang="ts" setup>
+import { VNode, computed, inject, Ref, h, useSlots, onBeforeUnmount, watch, onMounted, ref } from "vue";
+import { useGlobalSearch } from "../../../../../../core/composables/useGlobalSearch";
+import { BladeInstance } from "../../../../../../injection-keys";
+import VcTableBaseHeader from "../vc-table-base-header/vc-table-base-header.vue";
+import { IBladeInstance } from "../../../../../../shared";
+import { useAppBarMobileButtons } from "../../../../../../core/composables/useAppBarMobileButtons";
+import { SearchIcon } from "../../../../atoms/vc-icon/icons";
+import { FALLBACK_BLADE_ID } from "../../../../../../core/constants";
+
+const props = defineProps<{
+  hasHeaderSlot: boolean;
+  header: boolean;
+  columnsInit: boolean;
+  searchValue?: string;
+  activeFilterCount?: number;
+  searchPlaceholder?: string;
+  disableFilter?: boolean;
+  expanded?: boolean;
+}>();
+
+const emit = defineEmits<{
+  "search:change": [string];
+}>();
+
+defineSlots<{
+  filters: (props: { closePanel: () => void }) => VNode;
+  header: (props: { header: VNode }) => VNode;
+}>();
+
+const blade = inject(
+  BladeInstance,
+  computed(
+    (): Partial<IBladeInstance> => ({
+      navigation: {
+        idx: 0,
+        instance: null,
+      },
+    }),
+  ),
+);
+const globalSearch = useGlobalSearch();
+const isMobile = inject("isMobile") as Ref<boolean>;
+const slots = useSlots();
+const { register: registerMobileButton, unregister: unregisterMobileButton } = useAppBarMobileButtons();
+
+const currentBladeId = computed(() => {
+  return blade?.value?.id || 0;
+});
+
+const shouldShowSearch = computed(() => {
+  if (!isMobile.value) return true;
+
+  if (blade?.value.navigation?.idx === 0) {
+    return globalSearch.isSearchVisible.value[currentBladeId.value];
+  }
+
+  return true;
+});
+
+const showHeader = computed(() => {
+  return (
+    ((!!props.hasHeaderSlot || !!props.header) &&
+      (!props.columnsInit || !!props.searchValue || props.searchValue === "" || !!props.activeFilterCount)) ||
+    false
+  );
+});
+
+const bladeId = computed(() => {
+  return blade.value?.id || FALLBACK_BLADE_ID;
+});
+
+const searchButtonConfig = ref({
+  id: "global-search",
+  icon: SearchIcon,
+  onClick: () => {
+    globalSearch.toggleSearch(bladeId.value);
+  },
+  onClose: () => {
+    globalSearch.closeSearch(bladeId.value);
+  },
+  // Button is visible only if:
+  // 1. We are in the root blade (idx === 0)
+  // 2. Header is available for display
+  isVisible: computed(() => Boolean(blade.value?.navigation?.idx === 0 && showHeader.value)),
+  order: 5,
+});
+
+// Register search button when mounted, if there is a search functionality
+onMounted(() => {
+  if (props.hasHeaderSlot || props.header) {
+    registerMobileButton(searchButtonConfig.value);
+  }
+});
+
+// When unmounted, close the search and unregister the button
+onBeforeUnmount(() => {
+  if (globalSearch.isSearchVisible.value[bladeId.value]) {
+    globalSearch.closeSearch(bladeId.value);
+  }
+  unregisterMobileButton("global-search");
+});
+
+const headerComponent = () =>
+  h(
+    VcTableBaseHeader,
+    {
+      searchValue: props.searchValue,
+      searchPlaceholder: props.searchPlaceholder,
+      activeFilterCount: props.activeFilterCount,
+      expanded: props.expanded,
+      "onSearch:change": (value: string) => emit("search:change", value),
+      disableFilter: props.disableFilter,
+    },
+    slots.filters
+      ? {
+          filters: () => {
+            return slots.filters?.({ closePanel: () => {} });
+          },
+        }
+      : undefined,
+  );
+</script>
+
+<style lang="scss">
+.vc-table-header {
+  // @apply tw-relative;
+}
+
+.table-header-enter-active,
+.table-header-leave-active {
+  @apply tw-transition-all tw-duration-200 tw-ease-in-out;
+}
+
+.table-header-enter-from,
+.table-header-leave-to {
+  @apply tw-opacity-0 tw-transform tw-translate-y-[-30px];
+}
+
+.table-header-enter-to,
+.table-header-leave-from {
+  @apply tw-opacity-100 tw-transform tw-translate-y-0;
+}
+</style>