@vc-shell/framework 1.2.3-beta.1 → 1.2.4-beta.1

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

@@ -1,438 +0,0 @@
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<template>
-  <div class="vc-table-mobile-view">
-    <div
-      v-if="items && items.length"
-      class="vc-table-mobile-view__items"
-      @contextmenu.prevent
-    >
-      <VcTableMobileItem
-        v-for="(item, i) in items"
-        :key="i"
-        :index="i"
-        :items="items"
-        :action-builder="itemActionBuilder"
-        :disabled-selection="disabledSelection"
-        :selection="selection"
-        :is-selected="isSelected(item)"
-        @contextmenu.prevent
-        @click="$emit('itemClick', item)"
-        @select="multiselect ? rowCheckbox(item) : undefined"
-      >
-        <slot
-          name="mobile-item"
-          :item="item"
-        >
-          <div class="vc-table-mobile-view__item-renderer">
-            <div class="vc-table-mobile-view__content">
-              <!-- Status column -->
-              <template
-                v-for="column in firstRowColumns"
-                :key="column.id"
-              >
-                <div
-                  v-if="column.type === 'status-icon' || column.type === 'status'"
-                  :class="[
-                    'vc-table-mobile-view__cell',
-                    {
-                      'vc-table-mobile-view__cell--status': column.type === 'status',
-                      'vc-table-mobile-view__cell--status-icon': column.type === 'status-icon',
-                    },
-                    column.class,
-                  ]"
-                >
-                  <slot
-                    :name="`item_${column.id}`"
-                    :item="item"
-                    :cell="column"
-                    :index="i"
-                  >
-                    <VcTableCell
-                      v-if="typeof item === 'object'"
-                      :key="`mobile-view-cell-${i}-${column.id}`"
-                      :cell="column"
-                      :item="item"
-                      :index="i"
-                      :editing="editing"
-                      @update="$emit('onEditComplete', { event: $event, index: i })"
-                      @blur="$emit('onCellBlur', $event)"
-                    />
-                  </slot>
-                </div>
-              </template>
-
-              <!-- Image column -->
-              <template
-                v-for="column in firstRowColumns"
-                :key="column.id"
-              >
-                <div
-                  v-if="column.type === 'image'"
-                  :class="['vc-table-mobile-view__cell', 'vc-table-mobile-view__cell--image', column.class]"
-                >
-                  <slot
-                    :name="`item_${column.id}`"
-                    :item="item"
-                    :cell="column"
-                    :index="i"
-                  >
-                    <VcTableCell
-                      v-if="typeof item === 'object'"
-                      :key="`mobile-view-cell-${i}-${column.id}`"
-                      :cell="column"
-                      :item="item"
-                      :index="i"
-                      :editing="editing"
-                      @update="$emit('onEditComplete', { event: $event, index: i })"
-                      @blur="$emit('onCellBlur', $event)"
-                    />
-                  </slot>
-                </div>
-              </template>
-
-              <!-- Main content container -->
-              <div class="vc-table-mobile-view__rows">
-                <!-- First row -->
-                <div class="vc-table-mobile-view__row">
-                  <template
-                    v-for="column in firstRowColumns"
-                    :key="column.id"
-                  >
-                    <div
-                      v-if="column.type !== 'status-icon' && column.type !== 'status' && column.type !== 'image'"
-                      :class="[
-                        'vc-table-mobile-view__cell',
-                        `vc-table-mobile-view__cell--${column.type || 'default'}`,
-                        column.class,
-                      ]"
-                    >
-                      <slot
-                        :name="`item_${column.id}`"
-                        :item="item"
-                        :cell="column"
-                        :index="i"
-                      >
-                        <VcTableCell
-                          v-if="typeof item === 'object'"
-                          :key="`mobile-view-cell-${i}-${column.id}`"
-                          :cell="column"
-                          :item="item"
-                          :index="i"
-                          :editing="editing"
-                          @update="$emit('onEditComplete', { event: $event, index: i })"
-                          @blur="$emit('onCellBlur', $event)"
-                        />
-                      </slot>
-                    </div>
-                  </template>
-                </div>
-                <!-- Second row -->
-                <div class="vc-table-mobile-view__row">
-                  <template
-                    v-for="column in secondRowColumns"
-                    :key="column.id"
-                  >
-                    <div
-                      :class="[
-                        'vc-table-mobile-view__cell',
-                        `vc-table-mobile-view__cell--${column.type || 'default'}`,
-                        column.class,
-                      ]"
-                    >
-                      <slot
-                        :name="`item_${column.id}`"
-                        :item="item"
-                        :cell="column"
-                        :index="i"
-                      >
-                        <VcTableCell
-                          v-if="typeof item === 'object'"
-                          :key="`mobile-view-cell-${i}-${column.id}`"
-                          :cell="column"
-                          :item="item"
-                          :index="i"
-                          :editing="editing"
-                          @update="$emit('onEditComplete', { event: $event, index: i })"
-                          @blur="$emit('onCellBlur', $event)"
-                        />
-                      </slot>
-                    </div>
-                  </template>
-                </div>
-              </div>
-            </div>
-          </div>
-        </slot>
-      </VcTableMobileItem>
-    </div>
-    <div
-      v-else
-      class="vc-table-mobile-view__empty"
-    >
-      <VcTableEmpty
-        :items="items"
-        :columns-init="columnsInit"
-        :search-value="searchValue"
-        :active-filter-count="activeFilterCount || 0"
-        :notfound="notfound"
-        :empty="empty"
-      >
-        <template #notfound>
-          <slot name="notfound" />
-        </template>
-        <template #empty>
-          <slot name="empty" />
-        </template>
-      </VcTableEmpty>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup generic="T extends TableItem | string">
-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, TableEmptyAction } from "../../types";
-import { IActionBuilderResult, ITableColumns } from "../../../../../../core/types";
-import { provideTableSwipe } from "../../composables/useTableSwipe";
-
-const props = defineProps<{
-  items: T[];
-  columns: ITableColumns[];
-  itemActionBuilder?: (item: T) => IActionBuilderResult<T>[] | undefined;
-  multiselect?: boolean;
-  disabledSelection: T[];
-  selection: T[];
-  isSelected: (item: T) => boolean;
-  rowCheckbox: (item: T) => void;
-  editing?: boolean;
-  columnsInit: boolean;
-  searchValue?: string;
-  activeFilterCount?: number;
-  notfound?: TableEmptyAction;
-  empty?: TableEmptyAction;
-}>();
-
-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;
-}>();
-
-// 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,
-};
-
-// Group positions by rows
-const TOP_ROW_POSITIONS = ["status", "image", "top-left", "top-right"];
-const BOTTOM_ROW_POSITIONS = ["bottom-left", "bottom-right"];
-
-/**
- * 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));
-
-  // Form the resulting array, starting with special columns
-  const result = [...statusColumns, ...imageColumns, ...otherColumns];
-
-  // 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[]) => {
-  // 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.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, 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) {
-    // 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);
-  }
-
-  // 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) {
-    // 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);
-  }
-
-  // If no positions are specified, use automatic distribution
-  const visibleColumns = getVisibleColumns(props.columns);
-  const autoDistributed = autoDistributeColumns(visibleColumns);
-  return distributeColumnsToRows(autoDistributed).secondRow;
-});
-
-provideTableSwipe();
-</script>
-
-<style lang="scss">
-.vc-table-mobile-view {
-  @apply tw-grow tw-basis-0 tw-relative tw-h-full;
-
-  &__items {
-    @apply tw-flex-grow tw-flex tw-flex-col tw-h-max [width:-webkit-fill-available] [width:-moz-available];
-  }
-
-  &__empty {
-    @apply tw-overflow-auto tw-flex tw-flex-col tw-h-full tw-flex-grow;
-  }
-
-  &__item-renderer {
-    @apply tw-py-2 tw-px-[28px];
-  }
-
-  &__items > *:nth-child(odd) .vc-table-mobile__item {
-    @apply tw-bg-[color:var(--additional-50)];
-  }
-
-  &__items > *:nth-child(even) .vc-table-mobile__item {
-    @apply tw-bg-[color:var(--neutrals-50)];
-  }
-
-  &__content {
-    @apply tw-flex tw-flex-row tw-items-start;
-  }
-
-  &__rows {
-    @apply tw-flex tw-flex-col tw-flex-grow tw-w-full;
-  }
-
-  &__row {
-    @apply tw-flex tw-flex-row tw-items-center tw-justify-between tw-w-full tw-gap-3;
-
-    &:first-child {
-      @apply tw-mb-2;
-    }
-  }
-
-  &__cell {
-    @apply tw-flex tw-items-center tw-min-w-0 tw-max-w-[50%] tw-truncate;
-
-    &--image {
-      @apply tw-min-w-14 tw-min-h-14 tw-overflow-hidden tw-mr-4;
-    }
-
-    // Status and icon cells
-    &--status,
-    &--status-icon {
-      @apply tw-absolute tw-left-0 tw-w-6 tw-h-6 tw-flex-shrink-0 tw-flex tw-items-center tw-justify-center;
-    }
-
-    &--status-icon {
-      @apply tw-top-10;
-    }
-
-    &--title,
-    &--code {
-      @apply tw-flex-grow tw-truncate tw-mr-4;
-    }
-
-    &--title {
-      @apply tw-text-lg tw-font-medium;
-    }
-
-    &--code {
-      @apply tw-text-base tw-font-normal tw-text-[--table-cell-text-color];
-    }
-
-    &--date,
-    &--date-ago,
-    &--money,
-    &--number {
-      @apply tw-flex-shrink-0 tw-text-right;
-    }
-
-    &--date,
-    &--date-ago {
-      @apply tw-text-sm tw-text-[--table-cell-text-color];
-    }
-
-    &--money,
-    &--number {
-      @apply tw-text-base tw-font-medium;
-    }
-  }
-}
-</style>

package/ui/components/organisms/vc-table/_internal/vc-table-select-all/vc-table-select-all.vue

@@ -1,118 +0,0 @@
-<template>
-  <div
-    v-if="multiselect && $isMobile.value && (selection.length > 0 || allSelected)"
-    class="vc-table-select-all"
-  >
-    <div class="vc-table-select-all__bar">
-      <div class="vc-table-select-all__content">
-        <div class="vc-table-select-all__checkbox">
-          <VcCheckbox
-            :model-value="headerCheckbox"
-            class="vc-table-select-all__checkbox-input"
-            size="m"
-            @update:model-value="$emit('update:header-checkbox', $event)"
-            @click.stop
-          >
-            {{ t("COMPONENTS.ORGANISMS.VC_TABLE.SELECT_ALL_TRUNCATED") }}
-          </VcCheckbox>
-          {{ t("COMPONENTS.ORGANISMS.VC_TABLE.SELECTED") }}: {{ allSelected ? totalCount : selection.length }}
-        </div>
-
-        <VcButton
-          text
-          @click="handleCancelSelection"
-        >
-          {{ t("COMPONENTS.ORGANISMS.VC_TABLE.CANCEL") }}
-        </VcButton>
-      </div>
-    </div>
-    <div
-      v-if="selectAll && showSelectionChoice"
-      class="vc-table-select-all__choice"
-    >
-      <div class="vc-table-select-all__choice-content">
-        <div>
-          {{
-            allSelected
-              ? t("COMPONENTS.ORGANISMS.VC_TABLE.ALL_SELECTED")
-              : t("COMPONENTS.ORGANISMS.VC_TABLE.CURRENT_PAGE_SELECTED")
-          }}
-          <VcButton
-            text
-            class="vc-table-select-all__choice-button"
-            @click="$emit('select:all')"
-          >
-            {{
-              allSelected ? t("COMPONENTS.ORGANISMS.VC_TABLE.CANCEL") : t("COMPONENTS.ORGANISMS.VC_TABLE.SELECT_ALL")
-            }}
-          </VcButton>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useI18n } from "vue-i18n";
-import { VcButton, VcCheckbox } from "../../../../";
-
-const props = defineProps<{
-  multiselect?: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  selection: any[];
-  allSelected: boolean;
-  totalCount: number;
-  headerCheckbox: boolean;
-  selectAll?: boolean;
-  showSelectionChoice: boolean;
-}>();
-
-const emit = defineEmits<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (e: "update:selection", value: any[]): void;
-  (e: "update:allSelected", value: boolean): void;
-  (e: "update:header-checkbox", value: boolean): void;
-  (e: "select:all"): void;
-}>();
-
-const { t } = useI18n({ useScope: "global" });
-
-function handleCancelSelection() {
-  emit("update:selection", []);
-  emit("update:allSelected", false);
-}
-</script>
-
-<style lang="scss">
-.vc-table-select-all {
-  @apply tw-flex tw-flex-col;
-
-  &__bar {
-    @apply tw-flex tw-flex-row tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-min-h-14 tw-font-bold tw-text-lg tw-border-[color:var(--table-select-all-border-color)] tw-border-b tw-border-solid tw-box-border;
-  }
-
-  &__content {
-    @apply tw-flex tw-flex-row tw-w-full tw-justify-between;
-  }
-
-  &__checkbox {
-    @apply tw-flex tw-flex-row tw-items-center tw-justify-center tw-gap-3;
-  }
-
-  &__checkbox-input {
-    @apply tw-font-normal tw-self-center tw-flex;
-  }
-
-  &__choice {
-    @apply tw-w-full tw-flex tw-py-2;
-  }
-
-  &__choice-content {
-    @apply tw-w-full tw-flex tw-items-center tw-justify-center;
-  }
-
-  &__choice-button {
-    @apply tw-text-sm;
-  }
-}
-</style>

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

@@ -1,58 +0,0 @@
-import { type MaybeRef, Ref, ref, shallowRef, unref } from "vue";
-import { IActionBuilderResult } from "../../../../../core/types";
-import type { TableItem } from "./../types";
-
-export interface UseTableActionsOptions<T extends TableItem | string> {
-  enableItemActions?: MaybeRef<boolean | undefined>;
-  itemActionBuilder?: MaybeRef<
-    ((item: T) => Promise<IActionBuilderResult<T>[]> | IActionBuilderResult<T>[] | undefined) | undefined
-  >;
-}
-
-export function useTableActions<T extends TableItem | string>(options: UseTableActionsOptions<T>) {
-  const { enableItemActions, itemActionBuilder } = options;
-
-  const itemActions: Ref<IActionBuilderResult<T>[][]> = ref([]);
-  const selectedRowIndex = shallowRef<number>();
-  const mobileSwipeItem = ref<string>();
-
-  async function calculateActions(items: T[]) {
-    const builder = unref(itemActionBuilder);
-
-    if (unref(enableItemActions) && typeof builder === "function") {
-      // Use Promise.all for parallel execution instead of sequential awaits
-      const actionPromises = items
-        .filter((item) => typeof item === "object")
-        .map((item) => builder(item));
-
-      const results = await Promise.all(actionPromises);
-      itemActions.value = results.filter((result): result is IActionBuilderResult<T>[] => !!result);
-    } else {
-      itemActions.value = [];
-    }
-  }
-
-  function showActions(index: number) {
-    if (typeof index === "number") {
-      selectedRowIndex.value = index;
-    }
-  }
-
-  function closeActions() {
-    selectedRowIndex.value = undefined;
-  }
-
-  function handleSwipe(id: string) {
-    mobileSwipeItem.value = id;
-  }
-
-  return {
-    itemActions,
-    selectedRowIndex,
-    mobileSwipeItem,
-    calculateActions,
-    showActions,
-    closeActions,
-    handleSwipe,
-  };
-}