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

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

@@ -185,12 +185,11 @@
 </template>
 
 <script lang="ts" setup generic="T extends TableItem | string">
-import { toValue, computed } from "vue";
-import { VcLabel } from "../../../../atoms";
+import { computed } from "vue";
 import VcTableCell from "../vc-table-cell/vc-table-cell.vue";
 import VcTableEmpty from "../vc-table-empty/vc-table-empty.vue";
 import VcTableMobileItem from "../vc-table-mobile-item/vc-table-mobile-item.vue";
-import type { TableItem, StatusImage } from "../../types";
+import type { TableItem, StatusImage } from "../../vc-table.vue";
 import { IActionBuilderResult, ITableColumns } from "../../../../../../core/types";
 import { provideTableSwipe } from "../../composables/useTableSwipe";
 
@@ -217,77 +216,126 @@ const emit = defineEmits<{
   (e: "onCellBlur", args: { row: number | undefined; field: string }): void;
 }>();
 
-const hasMobilePositions = computed(() => props.columns.some((col) => col.mobilePosition?.row !== undefined));
+// Check if any columns have specified mobilePosition
+const hasMobilePositions = computed(() => props.columns.some((col) => typeof col.mobilePosition === "string"));
+
+// Define constants for positions and their order
+const POSITION_ORDER: { [key: string]: number } = {
+  status: 0,
+  image: 1,
+  "top-left": 2,
+  "top-right": 3,
+  "bottom-left": 4,
+  "bottom-right": 5,
+};
 
-const autoDistributeColumns = (columns: ITableColumns[]) => {
-  const result: ITableColumns[] = [];
+// Group positions by rows
+const TOP_ROW_POSITIONS = ["status", "image", "top-left", "top-right"];
+const BOTTOM_ROW_POSITIONS = ["bottom-left", "bottom-right"];
 
-  const statusColumn = columns.find((col) => col.type === "status" || col.type === "status-icon");
-  if (statusColumn) {
-    result.push(statusColumn);
-  }
+/**
+ * Finds special columns (status and image) and distributes other
+ * columns by positions. Returns a list of columns in display order.
+ * @param columns Columns to distribute
+ * @returns Sorted list of columns
+ */
+const autoDistributeColumns = (columns: ITableColumns[]) => {
+  const statusColumns = columns.filter((col) => col.type === "status" || col.type === "status-icon");
+  const imageColumns = columns.filter((col) => col.type === "image");
+  const otherColumns = columns.filter((col) => !statusColumns.includes(col) && !imageColumns.includes(col));
 
-  const remainingColumns = columns.filter((col) => !result.includes(col));
-  const columnsToAdd = 4;
-  result.push(...remainingColumns.slice(0, columnsToAdd));
+  // Form the resulting array, starting with special columns
+  const result = [...statusColumns, ...imageColumns, ...otherColumns];
 
-  return result;
+  // Return no more than 5 columns for optimal display
+  return result.slice(0, 5);
 };
 
+/**
+ * Distributes columns between first and second rows in mobile view
+ * @param columns Columns to distribute
+ * @returns Object with arrays of columns for first and second rows
+ */
 const distributeColumnsToRows = (columns: ITableColumns[]) => {
-  const hasStatus = columns[0]?.type === "status" || columns[0]?.type === "status-icon";
-
-  if (hasStatus) {
+  // Determine if there is a status column in the first position
+  const hasStatus = columns.some((col) => col.type === "status" || col.type === "status-icon");
+  const hasImage = columns.some((col) => col.type === "image");
+
+  // Distribute columns considering special types
+  if (hasStatus || hasImage) {
+    // For tables with statuses and images, allocate more space in first row
+    // for main content (usually the most important information)
     return {
-      firstRow: [columns[0], columns[1], columns[2]],
+      firstRow: columns.slice(0, 3),
       secondRow: columns.slice(3),
     };
   }
 
+  // Standard distribution - evenly
+  const midpoint = Math.ceil(Math.min(columns.length, 4) / 2);
   return {
-    firstRow: columns.slice(0, 2),
-    secondRow: columns.slice(2, 4),
+    firstRow: columns.slice(0, midpoint),
+    secondRow: columns.slice(midpoint, 4),
   };
 };
 
+/**
+ * Sorts columns according to their position
+ * @param columns Columns to sort
+ * @returns Sorted array of columns
+ */
+const sortColumnsByPosition = (columns: ITableColumns[]) => {
+  return [...columns].sort((a, b) => {
+    const posA = a.mobilePosition as string;
+    const posB = b.mobilePosition as string;
+
+    return (POSITION_ORDER[posA] ?? 999) - (POSITION_ORDER[posB] ?? 999);
+  });
+};
+
+/**
+ * Gets visible columns from the provided set
+ * @param columns Source columns
+ * @returns Only visible columns
+ */
+const getVisibleColumns = (columns: ITableColumns[]) => {
+  return columns.filter((col) => col.mobileVisible !== false);
+};
+
+// Columns for the first row
 const firstRowColumns = computed(() => {
   if (hasMobilePositions.value) {
-    return props.columns
-      .filter((col) => {
-        return col.mobileVisible !== false && col.mobilePosition?.row === 1;
-      })
-      .sort((a, b) => {
-        if (a.mobilePosition?.order !== undefined && b.mobilePosition?.order !== undefined) {
-          return a.mobilePosition.order - b.mobilePosition.order;
-        }
-        if (a.mobilePosition?.order !== undefined) return -1;
-        if (b.mobilePosition?.order !== undefined) return 1;
-        return 0;
-      });
+    // Filter columns for the first row and sort them
+    const topRowColumns = props.columns.filter(
+      (col) =>
+        col.mobileVisible !== false && col.mobilePosition && TOP_ROW_POSITIONS.includes(col.mobilePosition as string),
+    );
+
+    return sortColumnsByPosition(topRowColumns);
   }
 
-  const visibleColumns = props.columns.filter((col) => col.mobileVisible !== false);
+  // If no positions are specified, use automatic distribution
+  const visibleColumns = getVisibleColumns(props.columns);
   const autoDistributed = autoDistributeColumns(visibleColumns);
   return distributeColumnsToRows(autoDistributed).firstRow;
 });
 
+// Columns for the second row
 const secondRowColumns = computed(() => {
   if (hasMobilePositions.value) {
-    return props.columns
-      .filter((col) => {
-        return col.mobileVisible !== false && col.mobilePosition?.row === 2;
-      })
-      .sort((a, b) => {
-        if (a.mobilePosition?.order !== undefined && b.mobilePosition?.order !== undefined) {
-          return a.mobilePosition.order - b.mobilePosition.order;
-        }
-        if (a.mobilePosition?.order !== undefined) return -1;
-        if (b.mobilePosition?.order !== undefined) return 1;
-        return 0;
-      });
+    // Filter columns for the second row and sort them
+    const bottomRowColumns = props.columns.filter(
+      (col) =>
+        col.mobileVisible !== false &&
+        col.mobilePosition &&
+        BOTTOM_ROW_POSITIONS.includes(col.mobilePosition as string),
+    );
+
+    return sortColumnsByPosition(bottomRowColumns);
   }
 
-  const visibleColumns = props.columns.filter((col) => col.mobileVisible !== false);
+  // If no positions are specified, use automatic distribution
+  const visibleColumns = getVisibleColumns(props.columns);
   const autoDistributed = autoDistributeColumns(visibleColumns);
   return distributeColumnsToRows(autoDistributed).secondRow;
 });

package/ui/components/organisms/vc-table/composables/useTableActions.ts

@@ -1,6 +1,6 @@
 import { Ref, ref, shallowRef } from "vue";
 import { IActionBuilderResult } from "../../../../../core/types";
-import { TableItem } from "../types";
+import type { TableItem } from "./../vc-table.vue";
 
 export interface UseTableActionsOptions<T extends TableItem | string> {
   enableItemActions?: boolean;

package/ui/components/organisms/vc-table/composables/useTableColumnReorder.ts

@@ -1,5 +1,5 @@
 import { ref, Ref } from "vue";
-import { TableItem, TableColPartial } from "../types";
+import { TableItem, TableColPartial } from "../vc-table.vue";
 
 export function useTableColumnReorder<T extends TableItem | string>(
   internalColumns: Ref<TableColPartial[]>,

package/ui/components/organisms/vc-table/composables/useTableColumnResize.ts

@@ -1,5 +1,5 @@
 import { ref, Ref } from "vue";
-import { TableColPartial } from "../types";
+import { TableColPartial } from "../vc-table.vue";
 import * as _ from "lodash-es";
 
 export function useTableColumnResize(

package/ui/components/organisms/vc-table/composables/useTableRowReorder.ts

@@ -1,5 +1,5 @@
 import { computed, ref, Ref } from "vue";
-import { TableItem } from "../types";
+import { TableItem } from "../vc-table.vue";
 
 export function useTableRowReorder<T extends TableItem | string>(
   items: Ref<T[]>,

package/ui/components/organisms/vc-table/composables/useTableSelection.ts

@@ -1,5 +1,5 @@
 import { computed, ref, Ref, watch } from "vue";
-import { TableItem } from "../types";
+import { TableItem } from "../vc-table.vue";
 import * as _ from "lodash-es";
 
 type TableItemType = TableItem | string;

package/ui/components/organisms/vc-table/composables/useTableState.ts

@@ -2,7 +2,8 @@
 import { ref, Ref, computed, toValue, toRefs, MaybeRef } from "vue";
 import { useLocalStorage } from "@vueuse/core";
 import * as _ from "lodash-es";
-import { ITableColumns, TableColPartial } from "../types";
+import { TableColPartial } from "../vc-table.vue";
+import { ITableColumns } from "../../../../../core/types";
 
 export interface UseTableStateOptions {
   stateKey: Ref<string, string>;

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

@@ -1,7 +1,6 @@
-
 <template>
   <div
-    v-loading:1000="unref(loading) || columnsInit"
+    v-loading:49="unref(loading) || columnsInit"
     class="vc-table"
   >
     <VcTableSelectAll
@@ -161,51 +160,30 @@
       </VcContainer>
     </div>
 
-    <!-- Table footer -->
-    <slot
+    <VcTableFooter
       v-if="($slots['footer'] || footer) && items && items.length && !columnsInit"
-      name="footer"
-    >
-      <div
-        class="vc-table__footer"
-        :class="{
-          'vc-table__footer--mobile': $isMobile.value,
-          'vc-table__footer--desktop': $isDesktop.value,
-        }"
-      >
-        <!-- Table counter -->
-        <VcTableCounter
-          :label="totalLabel || $t('COMPONENTS.ORGANISMS.VC_TABLE.TOTALS')"
-          :value="totalCount"
-        ></VcTableCounter>
-
-        <!-- Table pagination -->
-        <VcPagination
-          :expanded="expanded"
-          :pages="pages"
-          :current-page="currentPage"
-          :variant="paginationVariant"
-          @item-click="
-            (event) => {
-              //scroll table to top
-              tableBody?.scrollTo(0, 0);
-              $emit('paginationClick', event);
-            }
-          "
-        ></VcPagination>
-      </div>
-    </slot>
+      :total-label="totalLabel"
+      :total-count="totalCount"
+      :expanded="expanded"
+      :pages="pages"
+      :current-page="currentPage"
+      :pagination-variant="paginationVariant"
+      @item-click="
+        (event: number) => {
+          //scroll table to top
+          tableBody?.scrollTo(0, 0);
+          $emit('paginationClick', event);
+        }
+      "
+    ></VcTableFooter>
   </div>
 </template>
 
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup generic="T extends TableItem | string">
-import { useCurrentElement } from "@vueuse/core";
 import { MaybeRef, Ref, computed, ref, unref, watch, getCurrentInstance, VNode, useSlots, toRefs } from "vue";
-import { useI18n } from "vue-i18n";
 import { VcContainer, VcPagination } from "./../../";
-import { IActionBuilderResult } from "./../../../../core/types";
-import VcTableCounter from "./_internal/vc-table-counter/vc-table-counter.vue";
+import { IActionBuilderResult, ITableColumns } from "./../../../../core/types";
 import * as _ from "lodash-es";
 import "core-js/actual/array/to-spliced";
 import "core-js/actual/array/to-sorted";
@@ -218,7 +196,7 @@ import VcTableMobileView from "./_internal/vc-table-mobile-view/vc-table-mobile-
 import VcTableDesktopView from "./_internal/vc-table-desktop-view/vc-table-desktop-view.vue";
 import VcTableHeader from "./_internal/vc-table-header/vc-table-header.vue";
 import VcTableSelectAll from "./_internal/vc-table-select-all/vc-table-select-all.vue";
-import type { ITableColumns } from "./types";
+import VcTableFooter from "./_internal/vc-table-footer/vc-table-footer.vue";
 
 export interface StatusImage {
   image?: string;
@@ -229,7 +207,7 @@ export interface StatusImage {
 
 export interface TableItem {
   [x: string]: any;
-  actions?: IActionBuilderResult[];
+  actions?: IActionBuilderResult<any>[];
 }
 
 export type TableColPartial = Partial<
@@ -255,7 +233,7 @@ const props = withDefaults(
   defineProps<{
     columns: ITableColumns[];
     items: T[];
-    itemActionBuilder?: (item: T) => IActionBuilderResult[] | undefined;
+    itemActionBuilder?: (item: T) => IActionBuilderResult<T>[] | undefined;
     sort?: string;
     multiselect?: boolean;
     disableItemCheckbox?: (item: T) => boolean;
@@ -350,7 +328,7 @@ const {
   onSelectAll: (value) => emit("select:all", value),
 });
 
-const { itemActions, selectedRowIndex, calculateActions, showActions, closeActions } = useTableActions({
+const { itemActions, selectedRowIndex, calculateActions, showActions, closeActions } = useTableActions<T>({
   enableItemActions: props.enableItemActions,
   itemActionBuilder: props.itemActionBuilder,
 });
@@ -438,14 +416,14 @@ function handleHeaderClick(item: TableColPartial) {
 
 <style lang="scss">
 :root {
-  --table-border-color: var(--base-border-color, var(--neutrals-200));
-  --table-select-all-border-color: var(--base-border-color, var(--neutrals-200));
+  --table-border-color: var(--neutrals-200);
+  --table-select-all-border-color: var(--neutrals-200);
   --table-header-bg: var(--primary-50);
-  --table-header-border-color: var(--base-border-color, var(--neutrals-200));
+  --table-header-border-color: var(--neutrals-200);
   --table-header-border:
     inset 0px 1px 0px var(--table-header-border-color), inset 0px -1px 0px var(--table-header-border-color);
-  --table-header-text-color: var(--base-text-color, var(--secondary-950));
-  --table-resizer-color: var(--base-border-color, var(--neutrals-200));
+  --table-header-text-color: var(--secondary-950);
+  --table-resizer-color: var(--neutrals-200);
   --table-reorder-color: var(--primary-400);
   --table-select-all-bg: var(--primary-100);
   --table-row-bg-hover: var(--primary-100);
@@ -461,13 +439,13 @@ function handleHeaderClick(item: TableColPartial) {
   --table-actions-icon-color: var(--primary-500);
   --table-actions-icon-color-hover: var(--primary-600);
   --table-footer-bg: var(--neutrals-50);
-  --table-footer-border-color: var(--base-border-color, var(--neutrals-200));
+  --table-footer-border-color: var(--neutrals-200);
   --table-row-drag-color: var(--primary-400);
   --table-row-drag-shadow: inset 0 -2px 0 0 var(--table-row-drag-color);
   --table-actions-color-danger: var(--danger-500);
   --table-actions-color-success: var(--success-500);
   --table-mobile-border-color: var(--secondary-200);
-  --table-text-color: var(--base-text-color, var(--neutrals-950));
+  --table-text-color: var(--neutrals-950);
   --table-sort-icon-color: var(--neutrals-400);
 }
 
@@ -724,18 +702,6 @@ $variants: (
     @apply tw-overflow-auto tw-flex tw-flex-col tw-flex-auto;
   }
 
-  &__footer {
-    @apply tw-flex-shrink-0 tw-flex tw-items-center tw-justify-between;
-  }
-
-  &__footer--mobile {
-    @apply tw-p-6;
-  }
-
-  &__footer--desktop {
-    @apply tw-p-6;
-  }
-
   /* Drag row styles */
   &__drag-row-bottom {
     box-shadow: inset 0 -2px 0 0 var(--table-row-drag-color);

package/ui/composables/README.md

@@ -0,0 +1,160 @@
+# UI Composables
+
+This directory contains reusable composables for UI components.
+
+## Available Composables
+
+### useAdaptiveItems
+
+A composable for adaptive rendering of elements in a container that automatically determines which elements fit in the available space without using hidden "measure" containers.
+
+#### Features
+
+- **Automatic size measurement** — precise element size detection using ResizeObserver
+- **Size caching** — improves performance by storing element dimensions
+- **Support for different display strategies** — choose between displaying from the beginning or end of the list
+- **Reactivity** — automatic recalculation when container or element sizes change
+- **Performance** — optimized algorithm with minimal DOM operations
+
+#### Usage
+
+```vue
+<template>
+  <div ref="containerRef">
+    <!-- Visible elements -->
+    <div 
+      v-for="item in visibleItems" 
+      :key="item.id"
+      :data-item-key="item.id"
+    >
+      {{ item.content }}
+    </div>
+    
+    <!-- Dropdown menu for hidden elements -->
+    <dropdown-menu 
+      v-if="showMoreButton"
+      :items="hiddenItems"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { useAdaptiveItems } from 'framework/ui/composables/useAdaptiveItems';
+
+const containerRef = ref(null);
+const items = ref([
+  { id: '1', content: 'Item 1' },
+  { id: '2', content: 'Item 2' },
+  // ...
+]);
+
+const { 
+  visibleItems,      // Elements that fit in the container
+  hiddenItems,       // Elements that don't fit
+  showMoreButton,    // Flag indicating if "More" button should be shown
+  recalculate,       // Function for manual recalculation
+  updateObserver     // Function to update the observer
+} = useAdaptiveItems({
+  containerRef,
+  items,
+  getItemKey: (item) => item.id,             // Function to get unique element key
+  moreButtonWidth: 80,                       // Width of the "More" button
+  calculationStrategy: 'forward',            // Strategy: 'forward' or 'reverse'
+  initialItemWidth: 100                      // Initial estimate of element width
+});
+</script>
+```
+
+#### Important: data-item-key Attribute
+
+For the composable to work correctly, you need to add the `data-item-key` attribute to each element:
+
+```vue
+<div 
+  v-for="item in visibleItems" 
+  :key="item.id"
+  :data-item-key="item.id" <!-- Required for size measurement -->
+>
+  {{ item.content }}
+</div>
+```
+
+#### API
+
+```typescript
+function useAdaptiveItems<T>(options: {
+  // Reference to the container
+  containerRef: Ref<HTMLElement | null>;
+  
+  // List of items
+  items: Ref<T[]> | ComputedRef<T[]>;
+  
+  // Function to get unique key for an item
+  getItemKey: (item: T) => string;
+  
+  // Width of the "More" button
+  moreButtonWidth: number;
+  
+  // Calculation strategy: 'forward' (from beginning) or 'reverse' (from end)
+  calculationStrategy?: 'forward' | 'reverse';
+  
+  // Initial estimate of item width (before measurement)
+  initialItemWidth?: number;
+}): {
+  // Elements that fit in the container
+  visibleItems: Ref<T[]>;
+  
+  // Elements that don't fit
+  hiddenItems: Ref<T[]>;
+  
+  // Flag indicating if "More" button should be shown
+  showMoreButton: Ref<boolean>;
+  
+  // Function for manual recalculation
+  recalculate: () => void;
+  
+  // Function to update the observer (if the list of elements has changed)
+  updateObserver: () => void;
+}
+```
+
+#### Calculation Strategies
+
+- **forward** (default) — elements are displayed from the beginning of the list, remaining ones are hidden
+- **reverse** — elements are displayed from the end of the list, first elements are hidden
+
+#### Usage Examples
+
+##### Breadcrumbs (with reverse strategy)
+
+```typescript
+const { visibleItems, hiddenItems, showMoreButton } = useAdaptiveItems({
+  containerRef: el,
+  items: toRef(props, "items"),
+  getItemKey: (item) => item.id,
+  moreButtonWidth: 100,
+  calculationStrategy: "reverse", // Show last elements, hide first ones
+  initialItemWidth: 100
+});
+```
+
+##### Toolbar
+
+```typescript
+const { visibleItems, hiddenItems, showMoreButton } = useAdaptiveItems({
+  containerRef: toolbarRef,
+  items: computed(() => tools),
+  getItemKey: (item) => item.id,
+  moreButtonWidth: 70,
+  calculationStrategy: "forward", // Show first elements, hide last ones
+  initialItemWidth: 60
+});
+```
+
+#### Performance Optimization
+
+1. **Don't overuse recalculations** — use `recalculate()` only when truly necessary
+2. **Set accurate initialItemWidth** — this reduces the number of redraws during initial loading
+3. **Use updateObserver** — after adding new elements, call this function to update the observer
+4. **Let the composable do its job** — the automatic measurement mechanism is efficient, trust it