@vc-shell/framework 1.0.168 → 1.0.170

package/shared/pages/LoginPage/components/login/Login.vue

@@ -7,14 +7,13 @@
     <template v-if="isLogin">
       <VcForm @submit.prevent="login">
         <Field
-          v-slot="{ field, errorMessage, handleChange, errors }"
+          v-slot="{ errorMessage, handleChange, errors }"
           :label="t('LOGIN.FIELDS.LOGIN.LABEL')"
           name="username"
           :model-value="form.username"
           rules="required"
         >
           <VcInput
-            v-bind="field"
             ref="loginField"
             v-model="form.username"
             class="tw-mb-4 tw-mt-1"
@@ -27,14 +26,13 @@
           />
         </Field>
         <Field
-          v-slot="{ field, errorMessage, handleChange, errors }"
+          v-slot="{ errorMessage, handleChange, errors }"
           :label="t('LOGIN.FIELDS.PASSWORD.LABEL')"
           name="password"
           :model-value="form.password"
           rules="required"
         >
           <VcInput
-            v-bind="field"
             ref="passwordField"
             v-model="form.password"
             class="tw-mb-4"
@@ -78,6 +76,7 @@
         <div
           class="tw-flex tw-items-center tw-text-center tw-uppercase tw-text-[color:var(--separator-text)] before:tw-content-[''] before:tw-flex-1 before:tw-border-b before:tw-border-b-[color:var(--separator)] before:tw-mr-2 after:tw-content-[''] after:tw-flex-1 after:tw-border-b after:tw-border-b-[color:var(--separator)] after:tw-ml-2"
         >
+          <!-- TODO add to localization -->
           OR
         </div>
         <div class="tw-flex tw-justify-center tw-mt-4 tw-flex-wrap tw-gap-2">
@@ -198,7 +197,7 @@ const props = defineProps<Props>();
 
 const router = useRouter();
 
-useForm({ validateOnMount: false });
+const { setFieldError, resetForm, setErrors, validateField } = useForm({ validateOnMount: false });
 const { uiSettings, loading: customizationLoading } = useSettings();
 const { t } = useI18n({ useScope: "global" });
 let useLogin;
@@ -253,6 +252,7 @@ const forgotPasswordForm = reactive({
 
 const login = async () => {
   if (isValid.value) {
+    signInResult.value.error = "";
     signInResult.value = (await signIn(form.username, form.password)) as SignInResult & {
       status?: number;
       error?: any;
@@ -264,6 +264,8 @@ const login = async () => {
       if (signInResult.value.status) {
         if (signInResult.value.status === 401) {
           signInResult.value.error = "The login or password is incorrect.";
+          form.password = "";
+          validateField("password");
         } else {
           signInResult.value.error = "Authentication error (code: " + signInResult.value.status + ").";
         }
@@ -288,6 +290,7 @@ const forgot = async () => {
 
 const togglePassRequest = () => {
   isLogin.value = !isLogin.value;
+  signInResult.value.error = "";
   if (isLogin.value) {
     forgotPasswordRequestSent.value = false;
     forgotPasswordForm.loginOrEmail = "";

package/ui/components/atoms/vc-container/vc-container.vue

@@ -24,10 +24,12 @@
         :style="{ height: dist ? `${dist}px` : '0px' }"
       >
         <VcIcon
-          icon="fas fa-spinner"
-          :style="{ 'tw-font-size': `${dist / 2}px` }"
-          class="vc-container__overscroll-icon"
+          :icon="status === 'pulling' ? 'fas fa-arrow-down' : 'fas fa-sync'"
+          :class="[iconClass]"
+          :style="{ transform: status === 'pulling' ? `rotate(${dist * 3}deg)` : '' }"
         ></VcIcon>
+        <span v-if="status === 'pulling'">{{ $t("COMPONENTS.ATOMS.VC_CONTAINER.PULL_TO_REFRESH") }}</span>
+        <span v-else-if="status === 'loosing'">{{ $t("COMPONENTS.ATOMS.VC_CONTAINER.REFRESHING") }}</span>
       </div>
       <slot></slot>
     </div>
@@ -73,6 +75,15 @@ onMounted(() => {
 
 const touchable = computed(() => status.value !== "refresh" && status.value !== "success");
 
+const iconClass = computed(() => {
+  if (status.value === "loosing") {
+    return "vc-container__overscroll-icon_refresh";
+  } else if (status.value === "pulling") {
+    return "vc-container__overscroll-icon_pulling";
+  }
+  return "vc-container__overscroll-icon";
+});
+
 const scrollTop = () => {
   if (component.value) {
     component.value.scroll(0, 0);
@@ -178,15 +189,27 @@ defineExpose({
   }
 
   &__overscroll {
-    @apply tw-relative tw-w-full tw-flex tw-items-start tw-justify-center tw-overflow-hidden;
+    @apply tw-relative tw-w-full tw-flex tw-items-start tw-justify-center tw-overflow-hidden tw-gap-2;
 
-    &-icon {
-      @apply tw-text-[color:#a1c0d4] tw-animate-spin;
+    &_passed {
+      @apply tw-text-[#43b0e6];
     }
+  }
 
-    &_passed &-icon {
-      @apply tw-text-[#43b0e6];
+  &__overscroll-icon {
+    @apply tw-text-[color:#a1c0d4];
+
+    &_pulling {
+      @apply tw-text-[color:#a1c0d4];
     }
+
+    &_refresh {
+      animation: tw-spin 2s linear infinite;
+    }
+  }
+
+  &__overscroll span {
+    @apply tw-mb-2 tw-text-sm tw-text-gray-500;
   }
 
   &__inner {
@@ -214,4 +237,13 @@ defineExpose({
     @apply tw-p-0;
   }
 }
+
+@keyframes tw-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>

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

@@ -1,131 +1,131 @@
 <template>
   <div
-    class="tw-relative tw-flex tw-flex-nowrap tw-items-stretch tw-transition tw-duration-200"
-    :class="{ ' tw-transition-none': isMoving }"
-    :style="`transform: translateX(${offsetX}px)`"
-    @click="$emit('click')"
-    @touchstart="touchStart"
-    @touchmove="touchMove"
-    @touchend="touchEnd"
-    @touchcancel="touchCancel"
+    ref="container"
+    v-on-click-outside="reset"
+    v-touch:hold="handleHold"
+    class="tw-select-none tw-relative tw-overflow-hidden tw-flex"
+    @click="handleClick"
+    @contextmenu.prevent
   >
-    <!-- Left swipe actions-->
     <div
-      v-if="leftSwipeActions && leftSwipeActions.length"
-      class="tw-flex-shrink-0 tw-w-[80px] tw-flex tw-flex-col [justify-content:stretch] tw-bg-[#a9bfd2]"
+      ref="target"
+      class="tw-top-0 tw-left-0 tw-bottom-0 tw-right-0 tw-w-full tw-h-full tw-absolute tw-flex-shrink-0 tw-bg-white"
+      :class="{ animated: !isSwiping, 'vc-table-mobile__item_selected': isSelected }"
+      :style="{ left }"
     >
-      <div
-        class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
-        :class="[`vc-table-mobile__item-action_${leftSwipeActions[0].variant}`]"
-        @click.stop="leftSwipeActions[0].clickHandler(item as T)"
-      >
-        <VcIcon :icon="leftSwipeActions[0].icon"></VcIcon>
-        <div class="tw-mt-1 tw-text-lg">
-          {{ leftSwipeActions[0].title }}
-        </div>
-      </div>
-    </div>
-
-    <div class="tw-flex-shrink-0 tw-w-full">
       <!-- Mobile item slot content -->
       <slot></slot>
     </div>
-
-    <!-- Item actions -->
-    <div
-      v-if="rightSwipeActions && rightSwipeActions.length"
-      class="tw-flex-shrink-0 tw-w-[80px] tw-flex tw-flex-col [justify-content:stretch] tw-bg-[#a9bfd2]"
-    >
-      <!-- First available action -->
+    <div class="tw-flex tw-justify-between tw-flex-auto">
+      <!-- Left swipe actions -->
       <div
-        class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
-        :class="[`vc-table-mobile__item-action_${rightSwipeActions[0].variant}`]"
-        @click.stop="rightSwipeActions[0].clickHandler(item as T)"
+        v-if="leftSwipeActions && leftSwipeActions.length && direction === 'right'"
+        class="tw-flex-shrink-0 tw-flex tw-flex-col [justify-content:stretch] tw-bg-[#a9bfd2]"
+        :style="{
+          width: actionsWidth,
+        }"
       >
-        <VcIcon :icon="rightSwipeActions[0].icon"></VcIcon>
-        <div class="vc-table-mobile__item-action-text">
-          {{ rightSwipeActions[0].title }}
+        <div
+          class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
+          :class="[`vc-table-mobile__item-action_${leftSwipeActions[0].type}`]"
+          @click.stop="leftSwipeActions[0].clickHandler(item as T)"
+        >
+          <VcIcon :icon="leftSwipeActions[0].icon" />
+          <div class="tw-mt-1 tw-text-lg tw-text-center">
+            {{ leftSwipeActions[0].title }}
+          </div>
         </div>
       </div>
-
-      <!-- Second available action -->
+      <!-- Item actions -->
       <div
-        v-if="rightSwipeActions.length === 2"
-        class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
-        :class="[`vc-table-mobile__item-action_${rightSwipeActions[1].variant}`]"
-        @click.stop="rightSwipeActions[1].clickHandler(item as T)"
+        v-if="rightSwipeActions && rightSwipeActions.length && direction === 'left'"
+        class="tw-flex-shrink-0 tw-flex tw-flex-col [justify-content:stretch] tw-bg-[#a9bfd2] tw-ml-auto"
+        :style="{
+          width: actionsWidth,
+        }"
       >
-        <VcIcon :icon="rightSwipeActions[1].icon"></VcIcon>
-        <div class="tw-mt-1 tw-text-lg">
-          {{ rightSwipeActions[1].title }}
-        </div>
-      </div>
-
-      <!-- Other available actions -->
-      <template v-if="rightSwipeActions.length > 2">
         <div
+          v-for="(action, index) in rightSwipeActions.slice(0, rightSwipeActions.length > 2 ? 1 : 2)"
+          :key="`rightSwipeAction-${index}`"
           class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
-          @click.stop="isActionsPopupVisible = true"
+          :class="[`vc-table-mobile__item-action_${action.type}`]"
+          @click.stop="action.clickHandler(item as T)"
         >
-          <VcIcon icon="fas fa-ellipsis-h"></VcIcon>
-          <div class="tw-mt-1 tw-text-lg">More</div>
+          <VcIcon :icon="action.icon" />
+          <div class="tw-mt-1 tw-text-lg tw-text-center">
+            {{ action.title }}
+          </div>
         </div>
 
-        <!-- Actions popup -->
-        <teleport
-          v-if="isActionsPopupVisible"
-          to="body"
-        >
+        <!-- Other available actions -->
+        <template v-if="rightSwipeActions.length > 2">
           <div
-            class="tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-bg-[rgba(107,121,135,0.15)] tw-flex tw-items-center tw-justify-center tw-z-[99]"
+            class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
+            @click.stop="isActionsPopupVisible = true"
+          >
+            <VcIcon icon="fas fa-ellipsis-h" />
+            <div class="tw-mt-1 tw-text-lg">{{ $t("COMPONENTS.ORGANISMS.VC_TABLE.MORE") }}</div>
+          </div>
+
+          <!-- Actions popup -->
+          <teleport
+            v-if="isActionsPopupVisible"
+            to="body"
           >
             <div
-              class="tw-bg-white tw-rounded-[6px] tw-overflow-hidden tw-p-5 tw-max-w-[80%] tw-w-[350px] tw-border tw-border-solid tw-border-[#eef0f2] tw-box-border tw-shadow-[1px_1px_22px_rgba(126,142,157,0.2)]"
+              class="tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-bg-[rgba(107,121,135,0.15)] tw-flex tw-items-center tw-justify-center tw-z-[99]"
             >
-              <div class="tw-flex tw-w-full tw-items-center">
-                <span class="tw-grow tw-text-[#2e3d4e] tw-text-[19px] tw-font-semibold tw-tracking-[-0.01em]">
-                  {{ t("COMPONENTS.ORGANISMS.VC_TABLE.ALL_ACTIONS") }}
-                </span>
-                <VcIcon
-                  class="tw-text-[#c2d7e4]"
-                  icon="fas fa-times-circle"
-                  size="xl"
-                  @click="isActionsPopupVisible = false"
-                ></VcIcon>
-              </div>
-
-              <div class="tw-flex tw-flex-wrap tw-my-5 tw-justify-between">
-                <div
-                  v-for="(itemAction, i) in itemActions"
-                  :key="i"
-                  class="tw-flex tw-grow tw-shrink-0 tw-flex-col tw-items-center tw-text-[#319ed4] tw-my-2 tw-box-border tw-p-1 tw-max-w-[80px]"
-                  @click="itemAction.clickHandler(item as T)"
-                >
+              <div
+                class="tw-bg-white tw-rounded-[6px] tw-overflow-hidden tw-p-5 tw-max-w-[80%] tw-w-[350px] tw-border tw-border-solid tw-border-[#eef0f2] tw-box-border tw-shadow-[1px_1px_22px_rgba(126,142,157,0.2)]"
+              >
+                <div class="tw-flex tw-w-full tw-items-center">
+                  <span class="tw-grow tw-text-[#2e3d4e] tw-text-[19px] tw-font-semibold tw-tracking-[-0.01em]">
+                    {{ t("COMPONENTS.ORGANISMS.VC_TABLE.ALL_ACTIONS") }}
+                  </span>
                   <VcIcon
-                    :icon="itemAction.icon"
+                    class="tw-text-[#c2d7e4]"
+                    icon="fas fa-times-circle"
                     size="xl"
+                    @click="isActionsPopupVisible = false"
                   ></VcIcon>
-                  <div class="tw-text-base tw-mt-2 tw-text-center">
-                    {{ itemAction.title }}
+                </div>
+
+                <div class="tw-flex tw-flex-wrap tw-my-5 tw-justify-between">
+                  <div
+                    v-for="(itemAction, i) in itemActions"
+                    :key="i"
+                    class="tw-flex tw-grow tw-shrink-0 tw-flex-col tw-items-center tw-text-[#319ed4] tw-my-2 tw-box-border tw-p-1 tw-max-w-[80px]"
+                    @click="itemAction.clickHandler(item as T)"
+                  >
+                    <VcIcon
+                      :icon="itemAction.icon"
+                      size="xl"
+                    ></VcIcon>
+                    <div class="tw-text-base tw-mt-2 tw-text-center">
+                      {{ itemAction.title }}
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-        </teleport>
-      </template>
+          </teleport>
+        </template>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup generic="T extends TableItem | string">
-import { Ref, computed, ref, watch } from "vue";
-import { IActionBuilderResult } from "./../../../../../../core/types";
+import { Ref, computed, ref, onMounted, watch } from "vue";
+import { IActionBuilderResult } from "../../../../../../core/types";
 import { useI18n } from "vue-i18n";
+import { useSwipe } from "@vueuse/core";
+import { vOnClickOutside } from "@vueuse/components";
 
 export interface Emits {
   (event: "swipeStart", id: string): void;
   (event: "click"): void;
+  (event: "select"): void;
 }
 export interface TableItem {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -135,112 +135,119 @@ export interface TableItem {
 
 const props = defineProps<{
   item: T;
-  actionBuilder?: (item: T) => IActionBuilderResult[];
+  actionBuilder?: (item: T) => IActionBuilderResult[] | undefined;
   swipingItem?: string;
+  isSelected?: boolean;
 }>();
 
 const emit = defineEmits<Emits>();
 const { t } = useI18n({ useScope: "global" });
-const offsetX = ref(0);
-const startX = ref(0);
-const startY = ref(0);
-const startOffsetX = ref(0);
-const isMoving = ref(false);
-const threshold = 10;
-const maxWidth = 80;
+
 const isActionsPopupVisible = ref(false);
-const itemActions: Ref<IActionBuilderResult<T>[]> = ref([]);
+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");
 
-watch(
-  () => props.swipingItem,
-  (newVal) => {
-    if (typeof props.item !== "string" && newVal !== props.item.id) {
-      handleOffset();
+const actionsWidth = ref("0");
+
+const { isSwiping, lengthX } = useSwipe(target, {
+  threshold: 0,
+  onSwipeStart() {
+    getActions();
+    if (typeof props.item !== "string") {
+      emit("swipeStart", props.item.id);
+    }
+    if (containerWidth.value) {
+      reset();
     }
   },
-);
+  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`;
+      }
+
+      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";
+      }
+
+      actionsWidth.value = "80px";
+    } else {
+      reset();
+    }
+  },
+});
 
 const rightSwipeActions = computed(
   () =>
     itemActions.value &&
     itemActions.value.length &&
-    itemActions.value.filter((actions: IActionBuilderResult) => !actions.leftActions),
+    itemActions.value.filter((actions: IActionBuilderResult) => actions.position === "right"),
 );
 const leftSwipeActions = computed(
   () =>
     itemActions.value &&
     itemActions.value.length &&
-    itemActions.value.filter((actions: IActionBuilderResult) => actions.leftActions),
+    itemActions.value.filter((actions: IActionBuilderResult) => actions.position === "left"),
 );
 
-function handleOffset() {
-  if (itemActions.value.some((action: IActionBuilderResult) => action.leftActions)) {
-    offsetX.value = -maxWidth;
-    startOffsetX.value = offsetX.value;
-  } else {
-    offsetX.value = 0;
-    startOffsetX.value = 0;
-  }
-}
+watch(
+  () => props.swipingItem,
+  (newVal) => {
+    if (typeof props.item !== "string" && newVal !== props.item.id) {
+      left.value = "0";
+      actionsWidth.value = "0";
+    }
+  },
+);
 
-async function touchStart(e: TouchEvent) {
-  startX.value = e.touches[0].clientX;
-  startY.value = e.touches[0].clientY;
-  startOffsetX.value = offsetX.value;
-  isMoving.value = true;
+onMounted(() => {
+  adjustHeight();
+});
 
-  if (!itemActions.value.length) {
-    if (typeof props.actionBuilder === "function") {
-      itemActions.value = props.actionBuilder(props.item);
+function reset() {
+  left.value = "0";
+  actionsWidth.value = "0";
+}
 
-      handleOffset();
-    }
+function adjustHeight() {
+  if (container.value && target.value) {
+    container.value.style.height = target.value.scrollHeight + "px";
   }
 }
 
-function touchMove(e: TouchEvent) {
-  if (typeof props.item !== "string") emit("swipeStart", props.item.id);
-  if (itemActions.value && itemActions.value.length) {
-    const deltaX = e.touches[0].clientX - startX.value;
-    const deltaY = e.touches[0].clientY - startY.value;
+const direction = computed(() => {
+  if (lengthX.value < 0) {
+    return "right";
+  }
+  return "left";
+});
 
-    if (
-      Math.abs(deltaX) > threshold &&
-      (rightSwipeActions.value && rightSwipeActions.value.length
-        ? leftSwipeActions.value && leftSwipeActions.value.length
-          ? Math.abs(startOffsetX.value + deltaX) <= maxWidth * 2
-          : Math.abs(startOffsetX.value + deltaX) <= maxWidth
-        : Math.abs(startOffsetX.value + deltaX) <= maxWidth) &&
-      startOffsetX.value + deltaX < 0
-    ) {
-      if (Math.abs(deltaY) < threshold * 2) {
-        e.preventDefault();
-      }
-      offsetX.value = startOffsetX.value + deltaX;
+function getActions() {
+  if (!(itemActions.value && itemActions.value.length)) {
+    if (props.actionBuilder && typeof props.actionBuilder === "function") {
+      itemActions.value = props.actionBuilder(props.item);
     }
   }
 }
 
-function touchEnd() {
-  const absoluteOffsetX = Math.abs(offsetX.value);
-  if (absoluteOffsetX < maxWidth) {
-    offsetX.value = absoluteOffsetX < maxWidth / 2 ? 0 : -maxWidth;
-  } else {
-    offsetX.value = absoluteOffsetX <= maxWidth * 2 - threshold * 2 ? -maxWidth : -maxWidth * 2;
-  }
-
-  isMoving.value = false;
+function handleHold() {
+  emit("select");
 }
 
-function touchCancel() {
-  const absoluteOffsetX = Math.abs(offsetX.value);
-  if (absoluteOffsetX < maxWidth) {
-    offsetX.value = absoluteOffsetX < maxWidth / 2 ? 0 : -maxWidth;
-  } else {
-    offsetX.value = absoluteOffsetX <= maxWidth * 2 - threshold * 2 ? -maxWidth : -maxWidth * 2;
-  }
-
-  isMoving.value = false;
+function handleClick() {
+  emit("click");
 }
 </script>
 
@@ -255,5 +262,9 @@ function touchCancel() {
       @apply tw-bg-[#ff4a4a];
     }
   }
+
+  &_selected {
+    @apply tw-bg-[#dfeef9] #{!important};
+  }
 }
 </style>

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

@@ -64,7 +64,7 @@
         v-if="items && items.length"
         ref="scrollContainer"
         :no-padding="true"
-        class="tw-grow tw-basis-0"
+        class="tw-grow tw-basis-0 tw-relative"
         :use-ptr="pullToReload"
         @scroll:ptr="$emit('scroll:ptr')"
       >
@@ -77,8 +77,10 @@
               :item="item"
               :action-builder="itemActionBuilder"
               :swiping-item="mobileSwipeItem"
+              :is-selected="isSelected(item)"
               @click="$emit('itemClick', item)"
               @swipe-start="handleSwipe"
+              @select="rowCheckbox(item)"
             >
               <slot
                 name="mobile-item"
@@ -118,7 +120,7 @@
                 </div>
               </th>
               <th
-                v-if="itemActionBuilder"
+                v-if="enableItemActions && itemActionBuilder"
                 class="tw-h-[42px] tw-w-[21px] tw-max-w-[21px] tw-min-w-[21px] tw-bg-[#f9f9f9] tw-m-w-[70px] !tw-border-0 tw-shadow-[inset_0px_1px_0px_#eaedf3,_inset_0px_-1px_0px_#eaedf3] tw-box-border tw-sticky tw-top-0 tw-select-none tw-z-[1]"
               >
                 <div class="tw-w-3 tw-top-0 tw-bottom-0 tw-absolute tw-right-0 tw-flex tw-justify-end">
@@ -262,7 +264,7 @@
                 <div class="tw-w-px tw-top-0 tw-bottom-0 tw-absolute tw-right-0 tw-bg-[#e5e7eb]"></div>
               </td>
               <td
-                v-if="itemActionBuilder && typeof item === 'object'"
+                v-if="enableItemActions && itemActionBuilder && typeof item === 'object'"
                 class="tw-box-border tw-overflow-visible tw-w-[21px] tw-max-w-[21px] tw-min-w-[21px] tw-relative"
                 @click.stop
               >
@@ -298,7 +300,7 @@
                         :key="i"
                         :class="[
                           'tw-flex tw-flex-row tw-items-center tw-text-[#319ed4] tw-cursor-pointer',
-                          `vc-table__body-actions-item_${itemAction.variant}`,
+                          `vc-table__body-actions-item_${itemAction.type}`,
                         ]"
                         @click.stop="itemAction.clickHandler(item)"
                       >
@@ -477,7 +479,7 @@ const props = withDefaults(
   defineProps<{
     columns: ITableColumns[];
     items: T[];
-    itemActionBuilder?: (item: T) => IActionBuilderResult[];
+    itemActionBuilder?: (item: T) => IActionBuilderResult[] | undefined;
     sort?: string;
     multiselect?: boolean;
     expanded?: boolean;
@@ -500,6 +502,7 @@ const props = withDefaults(
     reorderableRows?: boolean;
     stateKey: string;
     selectAll?: boolean;
+    enableItemActions?: boolean;
   }>(),
   {
     items: () => [],
@@ -788,12 +791,14 @@ const arrowStyle = computed(() => {
 });
 
 async function calculateActions(items: T[]) {
-  if (typeof props.itemActionBuilder === "function") {
-    const populatedItems = [];
+  if (props.enableItemActions && typeof props.itemActionBuilder === "function") {
+    const populatedItems: IActionBuilderResult[][] = [];
     for (let index = 0; index < items.length; index++) {
       if (typeof items[index] === "object") {
         const elementWithActions = await props.itemActionBuilder(items[index]);
-        populatedItems.push(elementWithActions);
+        if (elementWithActions) {
+          populatedItems.push(elementWithActions);
+        }
       }
     }
     itemActions.value = populatedItems;

package/dist/shared/modules/assets/locales/index.d.ts

@@ -1,3 +0,0 @@
-import * as en from "./en.json";
-export { en };
-//# sourceMappingURL=index.d.ts.map

package/dist/shared/modules/assets/locales/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../shared/modules/assets/locales/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,EAAE,EAAE,CAAC"}

package/dist/shared/modules/assets-manager/locales/index.d.ts

@@ -1,3 +0,0 @@
-import * as en from "./en.json";
-export { en };
-//# sourceMappingURL=index.d.ts.map