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

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

@@ -1,11 +1,7 @@
 <template>
   <Transition name="table-header">
     <div
-      v-show="
-        shouldShowSearch &&
-        (hasHeaderSlot || header) &&
-        (!columnsInit || searchValue || searchValue === '' || activeFilterCount)
-      "
+      v-if="showHeader && shouldShowSearch"
       class="vc-table-header"
     >
       <slot
@@ -19,11 +15,14 @@
 </template>
 
 <script lang="ts" setup>
-import { VNode, computed, inject, Ref, h, useSlots } from "vue";
+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;
@@ -59,6 +58,7 @@ const blade = inject(
 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;
@@ -74,6 +74,49 @@ const shouldShowSearch = computed(() => {
   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,

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

@@ -2,15 +2,15 @@
   <div
     ref="container"
     v-on-click-outside="reset"
-    v-touch:hold="handleHold"
     class="vc-table-mobile"
     @click="handleClick"
     @contextmenu.prevent
+    @touchhold="handleHold"
   >
     <div
       ref="target"
       class="vc-table-mobile__item"
-      :class="{ animated: !isSwiping, 'vc-table-mobile__item-selected': isSelected }"
+      :class="{ 'vc-table-mobile__item-selected': isSelected }"
     >
       <div
         v-if="anySelected"
@@ -28,81 +28,75 @@
           :class="{
             'vc-table-mobile__slot--left': anySelected,
           }"
-          :style="{ transform: `translateX(${left})` }"
+          :style="{ transform: `translateX(${translateX}px)` }"
         >
           <slot></slot>
         </div>
         <!-- Item actions -->
         <div
-          v-if="rightSwipeActions && rightSwipeActions.length && direction === 'left'"
-          class="vc-table-mobile__swipe-actions vc-table-mobile__swipe-actions_right"
-          :style="{ width: actionsWidth }"
+          v-if="swipeActions && swipeActions.length"
+          class="vc-table-mobile__swipe-actions"
+          :style="{ width: `${actionsWidth}px` }"
           @touchstart.stop
         >
-          <div
-            v-for="(action, idx) in rightSwipeActions.slice(0, rightSwipeActions.length > 2 ? 1 : 2)"
-            :key="`rightSwipeAction-${idx}`"
+          <!-- More button for additional actions after first 2 -->
+          <template v-if="swipeActions.length > 2">
+            <button
+              class="vc-table-mobile__action vc-table-mobile__action_more-left"
+              @click.stop="() => (isActionsPopupVisible = true)"
+            >
+              <VcIcon icon="material-pending" />
+              <div class="vc-table-mobile__action-title">
+                {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.MORE") }}
+              </div>
+            </button>
+          </template>
+
+          <!-- First 2 actions -->
+          <button
+            v-for="(action, idx) in swipeActions.slice(0, 2)"
+            :key="`swipeAction-${idx}`"
             class="vc-table-mobile__action"
             :class="`vc-table-mobile__item-action_${action.type}`"
-            @click.stop="action.clickHandler(items[index] as T, index)"
+            @click.stop="() => action.clickHandler(items[index] as T, index)"
           >
-            <VcIcon :icon="action.icon" />
+            <VcIcon
+              :icon="action.icon"
+              size="s"
+            />
             <div class="vc-table-mobile__action-title">
               {{ action.title }}
             </div>
-          </div>
-
-          <!-- Other available actions -->
-          <template v-if="rightSwipeActions.length > 2">
-            <div
-              class="vc-table-mobile__action vc-table-mobile__action_more"
-              @click.stop="isActionsPopupVisible = true"
-            >
-              <VcIcon icon="fas fa-ellipsis-h" />
-              <div class="vc-table-mobile__action-title">
-                {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.MORE") }}
-              </div>
-            </div>
-
-            <!-- Actions popup -->
-            <teleport
-              v-if="isActionsPopupVisible"
-              to="body"
-            >
-              <div class="vc-table-mobile__actions-popup-overlay">
-                <div class="vc-table-mobile__actions-popup">
-                  <div class="vc-table-mobile__actions-popup-header">
-                    <span class="vc-table-mobile__actions-popup-title">
-                      {{ t("COMPONENTS.ORGANISMS.VC_TABLE.ALL_ACTIONS") }}
-                    </span>
-                    <VcIcon
-                      class="vc-table-mobile__actions-popup-close"
-                      icon="fas fa-times-circle"
-                      size="xl"
-                      @click="isActionsPopupVisible = false"
-                    ></VcIcon>
-                  </div>
+          </button>
 
-                  <div class="vc-table-mobile__actions-popup-content">
-                    <div
-                      v-for="(itemAction, i) in itemActions"
-                      :key="i"
-                      class="vc-table-mobile__actions-popup-action"
-                      @click="itemAction.clickHandler(items[index] as T, index)"
-                    >
-                      <VcIcon
-                        :icon="itemAction.icon"
-                        size="xl"
-                      ></VcIcon>
-                      <div class="vc-table-mobile__actions-popup-action-title">
-                        {{ itemAction.title }}
-                      </div>
-                    </div>
+          <!-- Actions popup -->
+          <VcPopup
+            v-if="isActionsPopupVisible"
+            :title="t('COMPONENTS.ORGANISMS.VC_TABLE.ALL_ACTIONS')"
+            @close="isActionsPopupVisible = false"
+          >
+            <template #content>
+              <div class="vc-table-mobile__actions-popup-content">
+                <div
+                  v-for="(itemAction, i) in itemActions"
+                  :key="i"
+                  class="vc-table-mobile__actions-popup-action"
+                  @click="
+                    itemAction.clickHandler(items[index] as T, index);
+                    isActionsPopupVisible = false;
+                  "
+                >
+                  <VcIcon
+                    :icon="itemAction.icon"
+                    size="s"
+                  ></VcIcon>
+                  <div class="vc-table-mobile__actions-popup-action-title">
+                    {{ itemAction.title }}
                   </div>
                 </div>
               </div>
-            </teleport>
-          </template>
+            </template>
+          </VcPopup>
         </div>
       </div>
     </div>
@@ -111,12 +105,13 @@
 </template>
 
 <script lang="ts" setup generic="T extends TableItem | string">
-import { Ref, computed, ref, watch, unref } from "vue";
+import { Ref, computed, ref, watch, unref, onMounted, onBeforeUnmount } from "vue";
 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";
+import { VcPopup } from "../../../../../../ui/components";
 
 export interface Emits {
   (event: "click"): void;
@@ -144,81 +139,230 @@ const isActionsPopupVisible = ref(false);
 const itemActions: Ref<IActionBuilderResult<T>[] | undefined> = ref([]);
 const target = ref<HTMLElement | null>(null);
 const container = ref<HTMLElement | null>(null);
-const containerWidth = computed(() => container.value?.offsetWidth);
-const left = ref("0");
 const anySelected = computed(() => props.selection && props.selection.length > 0);
 
-const actionsWidth = ref("0");
+// The iOS-like swipe system
+const translateX = ref(0);
+const actionsWidth = ref(0);
+const isAnimating = ref(false);
+const swipeThreshold = 40; // The threshold for the swipe activation
+const animationId = ref<number | null>(null);
+
+// The constants of the animation
+const SPRING_STIFFNESS = 0.08; // The stiffness of the spring
+const SPRING_DAMPING = 0.7; // The damping of the spring
+const SPRING_MASS = 1; // The mass of the object
 
 const { activeSwipeId, setActiveSwipe } = useTableSwipe();
 
-const { isSwiping, lengthX } = useSwipe(target, {
-  threshold: 0,
-  onSwipeStart() {
-    getActions();
-    const item = props.items[props.index];
-    if (typeof item !== "string") {
-      setActiveSwipe(null);
-      setTimeout(() => {
-        setActiveSwipe(item.id);
-      }, 50);
-    }
-  },
-  onSwipe() {
-    if (containerWidth.value) {
-      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`;
-        }
-      }
-    }
-  },
-  onSwipeEnd() {
-    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();
-      }
+// We calculate the maximum width of the actions
+const totalActionsWidth = computed(() => {
+  const actionsCount = swipeActions.value?.length ?? 0;
+  const maxVisible = Math.min(actionsCount, actionsCount > 2 ? 3 : 2);
+  return maxVisible * 70;
+});
+
+const swipeActions = computed(() => (props.selection?.length === 0 && itemActions.value) || undefined);
+
+// The handler for touch events for the iOS-like swipe
+const startX = ref(0);
+const startTranslateX = ref(0);
+const velocity = ref(0);
+const lastTime = ref(0);
+const lastX = ref(0);
+const rafId: number | null = null;
+
+// The spring animation for the iOS-like effect
+function springAnimation(targetValue: number, duration = 300) {
+  if (animationId.value !== null) {
+    cancelAnimationFrame(animationId.value);
+  }
+
+  const startValue = translateX.value;
+  const startTime = performance.now();
+
+  // The variables for the spring animation
+  let springVelocity = velocity.value;
+  let currentValue = startValue;
+
+  isAnimating.value = true;
+
+  function animate(time: number) {
+    const elapsed = time - startTime;
+
+    if (elapsed < duration) {
+      // We calculate the spring force
+      const springForce = (targetValue - currentValue) * SPRING_STIFFNESS;
+      // We calculate the damping force
+      const dampingForce = springVelocity * SPRING_DAMPING;
+      // We calculate the acceleration
+      const acceleration = (springForce - dampingForce) / SPRING_MASS;
+
+      // We update the speed and position
+      springVelocity += acceleration;
+      currentValue += springVelocity;
+
+      // We apply the new value
+      translateX.value = currentValue;
+      actionsWidth.value = Math.abs(translateX.value);
+
+      animationId.value = requestAnimationFrame(animate);
+    } else {
+      // The final value
+      translateX.value = targetValue;
+      actionsWidth.value = Math.abs(targetValue);
+      isAnimating.value = false;
+      animationId.value = null;
     }
-  },
+  }
+
+  animationId.value = requestAnimationFrame(animate);
+}
+
+// We configure the touch handlers
+onMounted(() => {
+  if (target.value) {
+    target.value.addEventListener("touchstart", handleTouchStart, { passive: true });
+    target.value.addEventListener("touchmove", handleTouchMove, { passive: false });
+    target.value.addEventListener("touchend", handleTouchEnd, { passive: true });
+  }
+});
+
+onBeforeUnmount(() => {
+  if (target.value) {
+    target.value.removeEventListener("touchstart", handleTouchStart);
+    target.value.removeEventListener("touchmove", handleTouchMove);
+    target.value.removeEventListener("touchend", handleTouchEnd);
+  }
+
+  if (rafId !== null) {
+    cancelAnimationFrame(rafId);
+  }
+
+  if (animationId.value !== null) {
+    cancelAnimationFrame(animationId.value);
+  }
 });
 
-const rightSwipeActions = computed(() => (props.selection?.length === 0 && itemActions.value) || undefined);
+function handleTouchStart(e: TouchEvent) {
+  if (isAnimating.value) return;
 
+  getActions();
+  const item = props.items[props.index];
+  if (typeof item === "string") return;
+
+  const touch = e.touches[0];
+  startX.value = touch.clientX;
+  startTranslateX.value = translateX.value;
+  velocity.value = 0;
+  lastTime.value = Date.now();
+  lastX.value = touch.clientX;
+
+  setActiveSwipe(item.id);
+}
+
+function handleTouchMove(e: TouchEvent) {
+  if (isAnimating.value) return;
+
+  const item = props.items[props.index];
+  if (typeof item === "string" || activeSwipeId.value !== item.id) return;
+
+  const touch = e.touches[0];
+  const currentX = touch.clientX;
+  const deltaX = currentX - startX.value;
+
+  // We calculate the speed for inertia
+  const now = Date.now();
+  const dt = now - lastTime.value;
+  if (dt > 0) {
+    velocity.value = (currentX - lastX.value) / dt;
+  }
+  lastTime.value = now;
+  lastX.value = currentX;
+
+  // The new position with the initial position
+  let newTranslateX = startTranslateX.value + deltaX;
+
+  // The limitation with the spring effect (we can go in the negative direction only to the width of the actions)
+  if (newTranslateX < -totalActionsWidth.value) {
+    // The spring effect - the further we pull, the harder it is
+    const overscroll = newTranslateX + totalActionsWidth.value;
+    newTranslateX = -totalActionsWidth.value + overscroll * 0.3;
+  }
+
+  // We do not allow the swipe to the right beyond the initial position
+  if (newTranslateX > 0) {
+    newTranslateX = 0;
+  }
+
+  translateX.value = newTranslateX;
+  actionsWidth.value = Math.abs(newTranslateX);
+
+  // We prevent the page scrolling if the swipe is horizontal
+  if (Math.abs(deltaX) > 10) {
+    e.preventDefault();
+  }
+}
+
+function handleTouchEnd() {
+  if (isAnimating.value) return;
+
+  const item = props.items[props.index];
+  if (typeof item === "string" || activeSwipeId.value !== item.id) return;
+
+  // We use the speed to determine whether we should open or close the swipe
+  const absVelocity = Math.abs(velocity.value);
+  const direction = velocity.value < 0 ? -1 : 1;
+
+  // If the speed is high enough, we use it to determine the direction
+  if (absVelocity > 0.5) {
+    if (direction < 0 && swipeActions.value && swipeActions.value.length) {
+      // Swipe to the left with a high speed - open fully
+      springAnimation(-totalActionsWidth.value);
+    } else {
+      // Swipe to the right with a high speed - close
+      springAnimation(0);
+    }
+  } else {
+    // Otherwise, we use the position to determine
+    const threshold = totalActionsWidth.value * 0.4; // 40% threshold
+
+    if (Math.abs(translateX.value) > threshold && swipeActions.value && swipeActions.value.length) {
+      // Enough to open
+      springAnimation(-totalActionsWidth.value);
+    } else {
+      // Not enough - close
+      springAnimation(0);
+    }
+  }
+}
+
+// We track the change of the active swipe
 watch(
   activeSwipeId,
   (newVal) => {
     const item = props.items[props.index];
-    if (typeof item !== "string" && (!newVal || newVal !== item.id)) {
-      reset();
+    if (typeof item !== "string" && (!newVal || newVal !== item.id) && translateX.value !== 0) {
+      // Close the swipe if other is activated
+      springAnimation(0);
     }
   },
   { immediate: true },
 );
 
+// We reset the swipe state
 function reset() {
-  left.value = "0";
-  actionsWidth.value = "0";
+  if (isAnimating.value) return;
+
+  // We start the animation to return to the initial position
+  springAnimation(0);
+
   const item = props.items[props.index];
   if (typeof item !== "string" && activeSwipeId.value === item.id) {
     setActiveSwipe(null);
   }
 }
 
-const direction = computed(() => {
-  if (lengthX.value < 0) {
-    return "right";
-  }
-  return "left";
-});
-
 function getActions() {
   if (!(itemActions.value && itemActions.value.length)) {
     if (props.actionBuilder && typeof props.actionBuilder === "function") {
@@ -250,27 +394,26 @@ 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(--primary-100);
+  --table-mobile-action-more: var(--neutrals-400);
 }
 
 .vc-table-mobile {
   @apply tw-select-none tw-block tw-overflow-visible;
+  touch-action: pan-y; // Allow only vertical scrolling
 
   &__item {
     @apply tw-w-full tw-h-full tw-flex-shrink-0 tw-bg-[--table-mobile-background-color] tw-flex tw-flex-row;
-
-    &.animated {
-      transition: transform 0.3s ease;
-    }
+    will-change: transform;
 
     &.vc-table-mobile__item-selected {
-      @apply tw-bg-[--table-mobile-action-selected]  #{!important};
+      @apply tw-bg-[--table-mobile-action-selected] #{!important};
     }
   }
 
@@ -280,25 +423,33 @@ function handleClick() {
 
   &__content {
     @apply tw-flex-auto tw-flex tw-flex-col tw-relative tw-w-full;
+    overflow: hidden;
   }
 
   &__swipe-actions {
-    @apply tw-flex-shrink-0 tw-flex tw-flex-col [justify-content:stretch] tw-bg-[--table-mobile-action-bg] tw-absolute tw-top-0 tw-bottom-0;
-
-    &_left {
-    }
-
-    &_right {
-      @apply tw-right-0;
-    }
+    @apply tw-flex-shrink-0 tw-flex tw-flex-row [justify-content:stretch] tw-bg-[--table-mobile-action-bg] tw-absolute tw-top-0 tw-bottom-0 tw-right-0;
+    will-change: width;
   }
 
   &__action {
-    @apply tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-[color:var(--table-mobile-action-text-color)];
+    @apply tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-[color:var(--table-mobile-action-text-color)] tw-w-[70px];
+    position: relative;
+    background: none;
+    border: none;
+    outline: none;
+    padding: 0;
+    transition:
+      opacity 0.15s ease,
+      transform 0.15s ease;
+
+    &:active {
+      opacity: 0.8;
+      transform: scale(0.95);
+    }
   }
 
   &__action-title {
-    @apply tw-mt-1 tw-text-lg tw-text-center;
+    @apply tw-mt-1 tw-text-xs tw-text-center;
   }
 
   &__item-action_success {
@@ -315,6 +466,7 @@ function handleClick() {
 
   &__slot {
     @apply tw-flex tw-flex-col tw-grow;
+    will-change: transform;
 
     &--left {
       @apply tw-translate-x-[34px] #{!important};
@@ -325,6 +477,10 @@ function handleClick() {
     @apply tw-text-[--table-mobile-action-text-color];
   }
 
+  &__action_more-left {
+    @apply tw-text-[--table-mobile-action-text-color] tw-bg-[--table-mobile-action-more];
+  }
+
   &__actions-popup-overlay {
     @apply tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-bg-[--table-mobile-action-popup-overlay] tw-flex tw-items-center tw-justify-center tw-z-[99];
   }
@@ -346,15 +502,23 @@ function handleClick() {
   }
 
   &__actions-popup-content {
-    @apply tw-flex tw-flex-wrap tw-my-5 tw-justify-between;
+    @apply tw-flex tw-flex-wrap tw-justify-between;
   }
 
   &__actions-popup-action {
     @apply tw-flex tw-grow tw-shrink-0 tw-flex-col tw-items-center tw-text-[color:var(--table-mobile-action-popup-action-text-color)] tw-my-2 tw-box-border tw-p-1 tw-max-w-[80px];
+    transition:
+      opacity 0.15s ease,
+      transform 0.15s ease;
+
+    &:active {
+      opacity: 0.8;
+      transform: scale(0.95);
+    }
   }
 
   &__actions-popup-action-title {
-    @apply tw-text-base tw-mt-2 tw-text-center;
+    @apply tw-text-sm tw-mt-2 tw-text-center;
   }
 
   &__spacer {