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

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

@@ -10,7 +10,7 @@
     <div
       ref="target"
       class="vc-table-mobile__item"
-      :class="{ animated: !isSwiping, 'vc-table-mobile__item_selected': isSelected }"
+      :class="{ animated: !isSwiping, 'vc-table-mobile__item-selected': isSelected }"
     >
       <div
         v-if="anySelected"
@@ -23,26 +23,11 @@
         ></VcCheckbox>
       </div>
       <div class="vc-table-mobile__content">
-        <!-- Left swipe actions -->
-        <div
-          v-if="leftSwipeActions && leftSwipeActions.length && direction === 'right'"
-          class="vc-table-mobile__swipe-actions vc-table-mobile__swipe-actions_left"
-          :style="{ width: actionsWidth }"
-        >
-          <div
-            class="vc-table-mobile__action"
-            :class="`vc-table-mobile__item-action_${leftSwipeActions[0].type}`"
-            @click.stop="leftSwipeActions?.[0].clickHandler(items[index] as T, index)"
-            @touchstart.stop
-          >
-            <VcIcon :icon="leftSwipeActions[0].icon" />
-            <div class="vc-table-mobile__action-title">
-              {{ leftSwipeActions[0].title }}
-            </div>
-          </div>
-        </div>
         <div
           class="vc-table-mobile__slot"
+          :class="{
+            'vc-table-mobile__slot--left': anySelected,
+          }"
           :style="{ transform: `translateX(${left})` }"
         >
           <slot></slot>
@@ -131,9 +116,9 @@ import { IActionBuilderResult } from "../../../../../../core/types";
 import { useI18n } from "vue-i18n";
 import { useSwipe } from "@vueuse/core";
 import { vOnClickOutside } from "@vueuse/components";
+import { useTableSwipe } from "../../composables/useTableSwipe";
 
 export interface Emits {
-  (event: "swipeStart", id: string): void;
   (event: "click"): void;
   (event: "select"): void;
 }
@@ -145,12 +130,11 @@ export interface TableItem {
 
 const props = defineProps<{
   items: T[];
-  actionBuilder?: (item: T) => IActionBuilderResult[] | undefined;
-  swipingItem?: string;
-  isSelected?: boolean;
+  actionBuilder?: (item: T) => IActionBuilderResult<T>[] | undefined;
   index: number;
   selection?: T[];
   disabledSelection?: (TableItem | string)[];
+  isSelected?: boolean;
 }>();
 
 const emit = defineEmits<Emits>();
@@ -166,75 +150,66 @@ const anySelected = computed(() => props.selection && props.selection.length > 0
 
 const actionsWidth = ref("0");
 
+const { activeSwipeId, setActiveSwipe } = useTableSwipe();
+
 const { isSwiping, lengthX } = useSwipe(target, {
   threshold: 0,
   onSwipeStart() {
     getActions();
     const item = props.items[props.index];
     if (typeof item !== "string") {
-      emit("swipeStart", item.id);
-    }
-    if (containerWidth.value) {
-      reset();
+      setActiveSwipe(null);
+      setTimeout(() => {
+        setActiveSwipe(item.id);
+      }, 50);
     }
   },
   onSwipe() {
     if (containerWidth.value) {
-      if (lengthX.value < 0 && leftSwipeActions.value && leftSwipeActions.value.length) {
-        left.value = `${Math.abs(lengthX.value)}px`;
-      } else if (lengthX.value > 0 && rightSwipeActions.value && rightSwipeActions.value.length) {
-        left.value = `${-lengthX.value}px`;
+      const item = props.items[props.index];
+      if (typeof item !== "string" && activeSwipeId.value === item.id) {
+        if (lengthX.value > 0 && rightSwipeActions.value && rightSwipeActions.value.length) {
+          left.value = `${-lengthX.value}px`;
+          actionsWidth.value = `${Math.abs(lengthX.value)}px`;
+        }
       }
-
-      actionsWidth.value = `${Math.abs(lengthX.value)}px`;
     }
   },
   onSwipeEnd() {
-    if (containerWidth.value && Math.abs(lengthX.value) / containerWidth.value >= 0.1) {
-      if (lengthX.value < 0 && leftSwipeActions.value && leftSwipeActions.value.length) {
-        left.value = "80px";
-      } else if (lengthX.value > 0 && rightSwipeActions.value && rightSwipeActions.value.length) {
-        left.value = "-80px";
+    const item = props.items[props.index];
+    if (typeof item !== "string" && activeSwipeId.value === item.id) {
+      if (containerWidth.value && Math.abs(lengthX.value) / containerWidth.value >= 0.1) {
+        if (lengthX.value > 0 && rightSwipeActions.value && rightSwipeActions.value.length) {
+          left.value = "-80px";
+          actionsWidth.value = "80px";
+        }
+      } else {
+        reset();
       }
-
-      actionsWidth.value = "80px";
-    } else {
-      reset();
     }
   },
 });
 
-const rightSwipeActions = computed(
-  () =>
-    (props.selection?.length === 0 &&
-      itemActions.value &&
-      itemActions.value.length &&
-      itemActions.value.filter((actions: IActionBuilderResult) => actions.position === "right")) ||
-    undefined,
-);
-const leftSwipeActions = computed(
-  () =>
-    (props.selection?.length === 0 &&
-      itemActions.value &&
-      itemActions.value.length &&
-      itemActions.value.filter((actions: IActionBuilderResult) => actions.position === "left")) ||
-    undefined,
-);
+const rightSwipeActions = computed(() => (props.selection?.length === 0 && itemActions.value) || undefined);
 
 watch(
-  () => props.swipingItem,
+  activeSwipeId,
   (newVal) => {
     const item = props.items[props.index];
-    if (typeof item !== "string" && newVal !== item.id) {
-      left.value = "0";
-      actionsWidth.value = "0";
+    if (typeof item !== "string" && (!newVal || newVal !== item.id)) {
+      reset();
     }
   },
+  { immediate: true },
 );
 
 function reset() {
   left.value = "0";
   actionsWidth.value = "0";
+  const item = props.items[props.index];
+  if (typeof item !== "string" && activeSwipeId.value === item.id) {
+    setActiveSwipe(null);
+  }
 }
 
 const direction = computed(() => {
@@ -267,7 +242,6 @@ function handleClick() {
 
 <style lang="scss">
 :root {
-  --table-mobile-checkbox-border-color: var(--secondary-200);
   --table-mobile-background-color: var(--additional-50);
   --table-mobile-action-bg: var(--secondary-400);
   --table-mobile-border-color: var(--secondary-200);
@@ -276,13 +250,13 @@ function handleClick() {
   --table-mobile-action-popup-bg: var(--additional-50);
   --table-mobile-action-popup-shadow-color: var(--secondary-200);
   --table-mobile-action-popup-shadow: 1px 1px 22px var(--table-mobile-action-popup-shadow-color);
-  --table-mobile-action-popup-border-color: var(--base-border-color, var(--neutrals-200));
+  --table-mobile-action-popup-border-color: var(--neutrals-200);
   --table-mobile-action-popup-title-color: var(--neutrals-700);
   --table-mobile-action-popup-icon-color: var(--secondary-600);
   --table-mobile-action-popup-action-text-color: var(--primary-500);
   --table-mobile-action-success: var(--success-400);
   --table-mobile-action-danger: var(--danger-500);
-  --table-mobile-action-selected: var(--secondary-100);
+  --table-mobile-action-selected: var(--primary-100);
 }
 
 .vc-table-mobile {
@@ -295,13 +269,13 @@ function handleClick() {
       transition: transform 0.3s ease;
     }
 
-    &.vc-table-mobile__item_selected {
+    &.vc-table-mobile__item-selected {
       @apply tw-bg-[--table-mobile-action-selected]  #{!important};
     }
   }
 
   &__checkbox-container {
-    @apply tw-pl-4 tw-flex tw-items-center tw-justify-center tw-border-b tw-border-solid tw-border-b-[color:var(--table-mobile-checkbox-border-color)];
+    @apply tw-absolute tw-px-2 tw-pt-[10px] tw-flex tw-items-start tw-justify-center;
   }
 
   &__content {
@@ -335,12 +309,16 @@ function handleClick() {
     @apply tw-bg-[--table-mobile-action-danger];
   }
 
-  &__item_selected {
+  &__item-selected {
     @apply tw-bg-[--table-mobile-action-selected] #{!important};
   }
 
   &__slot {
-    @apply tw-flex tw-flex-col tw-border-b tw-border-solid tw-border-b-[color:var(--table-mobile-border-color)] tw-grow;
+    @apply tw-flex tw-flex-col tw-grow;
+
+    &--left {
+      @apply tw-translate-x-[34px] #{!important};
+    }
   }
 
   &__action_more {

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

@@ -0,0 +1,386 @@
+<!-- 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"
+                      @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"
+                      @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"
+                          @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"
+                          @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 { toValue, computed } from "vue";
+import { VcLabel } from "../../../../atoms";
+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 "../../vc-table.vue";
+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?: StatusImage;
+  empty?: StatusImage;
+}>();
+
+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;
+}>();
+
+const hasMobilePositions = computed(() => props.columns.some((col) => col.mobilePosition?.row !== undefined));
+
+const autoDistributeColumns = (columns: ITableColumns[]) => {
+  const result: ITableColumns[] = [];
+
+  const statusColumn = columns.find((col) => col.type === "status" || col.type === "status-icon");
+  if (statusColumn) {
+    result.push(statusColumn);
+  }
+
+  const remainingColumns = columns.filter((col) => !result.includes(col));
+  const columnsToAdd = 4;
+  result.push(...remainingColumns.slice(0, columnsToAdd));
+
+  return result;
+};
+
+const distributeColumnsToRows = (columns: ITableColumns[]) => {
+  const hasStatus = columns[0]?.type === "status" || columns[0]?.type === "status-icon";
+
+  if (hasStatus) {
+    return {
+      firstRow: [columns[0], columns[1], columns[2]],
+      secondRow: columns.slice(3),
+    };
+  }
+
+  return {
+    firstRow: columns.slice(0, 2),
+    secondRow: columns.slice(2, 4),
+  };
+};
+
+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;
+      });
+  }
+
+  const visibleColumns = props.columns.filter((col) => col.mobileVisible !== false);
+  const autoDistributed = autoDistributeColumns(visibleColumns);
+  return distributeColumnsToRows(autoDistributed).firstRow;
+});
+
+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;
+      });
+  }
+
+  const visibleColumns = props.columns.filter((col) => col.mobileVisible !== false);
+  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>