@vc-shell/framework 1.0.232 → 1.0.234

package/ui/components/organisms/vc-app/_internal/vc-app-menu/vc-app-menu.vue

@@ -1,12 +1,16 @@
 <template>
   <div
     v-if="isMenuVisible"
-    class="tw-relative tw-w-[var(--app-menu-width)] tw-transition tw-duration-100 tw-pt-[22px]"
+    class="tw-relative tw-w-[var(--app-menu-width)] [transition:width_300ms_cubic-bezier(0.2,0,0,1)_0s] tw-pt-[22px]"
     :class="{
       'vc-app-menu_mobile tw-hidden !tw-fixed !tw-left-0 !tw-top-0 !tw-w-full !tw-bottom-0 !tw-z-[9999]':
         $isMobile.value,
       '!tw-block': isMobileVisible,
+      '!tw-w-[63px]': $isDesktop.value && !isExpanded,
     }"
+    @mouseenter="!isExpanded && expandOverHandler(true)"
+    @mouseover="!isExpanded && expandOverHandler(true)"
+    @mouseleave="expandOverHandler(false)"
   >
     <!-- Show backdrop overlay on mobile devices -->
     <div
@@ -14,17 +18,41 @@
       class="tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-z-[9998] tw-bg-[#808c99] tw-opacity-60"
       @click="isMobileVisible = false"
     ></div>
-    <div class="vc-app-menu__inner tw-flex tw-flex-col tw-h-full">
+    <div
+      class="!tw-absolute vc-app-menu__inner tw-flex tw-flex-col tw-h-full [transition:width_300ms_cubic-bezier(0.2,0,0,1)_0s] tw-z-[9999] tw-top-0 tw-bottom-0 tw-bg-[color:var(--app-background)] tw-shadow-[inset_0px_2px_5px_0px_#3654751A]"
+      :class="{
+        'tw-left-0 tw-pt-[22px]': $isDesktop.value,
+        '!tw-w-[63px] !tw-shadow-[inset_4px_2px_5px_0px_#3654751A]': $isDesktop.value && !isExpanded && !isExpandedOver,
+        'tw-w-[var(--app-menu-width)]': $isDesktop.value && (isExpanded || isExpandedOver),
+        'tw-shadow-none': $isDesktop.value && isExpanded,
+      }"
+    >
       <!-- Show menu close handler on mobile devices -->
       <div
         v-if="$isMobile.value"
         class="tw-text-[#319ed4] tw-flex tw-justify-end tw-items-center tw-p-4 tw-cursor-pointer"
       >
-        <VcIcon
-          icon="fas fa-times"
-          size="xl"
-          @click="isMobileVisible = false"
-        ></VcIcon>
+        <button @click="isMobileVisible = false">
+          <VcIcon
+            icon="fas fa-times"
+            size="xl"
+          ></VcIcon>
+        </button>
+      </div>
+
+      <div
+        v-if="$isDesktop.value"
+        class="tw-pl-[21px] tw-pb-2"
+      >
+        <button
+          class="tw-p-[10px] tw-h-[var(--app-menu-item-height)] tw-rounded tw-text-[color:var(--app-menu-burger-color)] hover:tw-bg-[color:var(--app-menu-burger-background-color)]"
+          @click="toggleMenu"
+        >
+          <VcIcon
+            icon="fas fa-bars"
+            size="xl"
+          ></VcIcon>
+        </button>
       </div>
 
       <!-- Show scrollable area with menu items -->
@@ -32,7 +60,13 @@
         :no-padding="true"
         class="tw-grow tw-basis-0"
       >
-        <div class="tw-gap-[5px] tw-flex tw-flex-col tw-px-6 tw-h-full">
+        <div
+          class="tw-gap-[5px] tw-flex tw-flex-col tw-h-full"
+          :class="{
+            'tw-px-[21px]': ($isDesktop.value && (isExpanded || isExpandedOver)) || $isMobile.value,
+            'tw-pl-[21px] tw-pr-[2px]': $isDesktop.value && !isExpanded && !isExpandedOver,
+          }"
+        >
           <slot
             v-if="!$isDesktop.value"
             name="mobile"
@@ -48,6 +82,7 @@
             :icon="item.icon"
             :title="item.title as string"
             :children="item.children"
+            :expand="$isDesktop.value ? isExpanded || isExpandedOver : true"
             @click="
               (event) => {
                 $emit('item:click', event ? event : item);
@@ -58,7 +93,7 @@
         </div>
       </VcContainer>
       <div
-        class="tw-text-[color:var(--app-menu-version-color)] tw-text-xs tw-mt-auto tw-self-center tw-p-1"
+        class="tw-text-[color:var(--app-menu-version-color)] tw-text-xs tw-mt-auto tw-self-start tw-py-1 tw-pl-4"
         @click="$emit('version:click')"
       >
         {{ version }}
@@ -73,6 +108,7 @@ import VcAppMenuItem from "./_internal/vc-app-menu-item/vc-app-menu-item.vue";
 import { VcContainer, VcIcon } from "./../../../../";
 import { useMenuService } from "../../../../../../core/composables";
 import { MenuItem } from "../../../../../../core/types";
+import { useLocalStorage } from "@vueuse/core";
 
 export interface Props {
   version: string;
@@ -91,6 +127,8 @@ withDefaults(defineProps<Props>(), {
 
 defineEmits<Emits>();
 const { menuItems } = useMenuService();
+const isExpanded = useLocalStorage("VC_APP_MENU_EXPANDED", true);
+const isExpandedOver = ref(false);
 
 const isMobileVisible = ref(false);
 
@@ -98,6 +136,16 @@ const isMenuVisible = computed(() => {
   return !!menuItems.value.length;
 });
 
+function toggleMenu() {
+  isExpanded.value = !isExpanded.value;
+}
+
+function expandOverHandler(state: boolean) {
+  if (isExpandedOver.value !== state) {
+    isExpandedOver.value = state;
+  }
+}
+
 defineExpose({
   isMobileVisible,
 });
@@ -108,6 +156,9 @@ defineExpose({
   --app-menu-width: 230px;
   --app-menu-background-color: #ffffff;
   --app-menu-version-color: #838d9a;
+
+  --app-menu-burger-background-color: rgba(255, 255, 255, 0.5);
+  --app-menu-burger-color: #319ed4;
 }
 
 .vc-app-menu {

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

@@ -10,7 +10,6 @@
     :class="[
       {
         'vc-app_touch': $isTouch,
-        'vc-app_phone': $isPhone.value,
         'vc-app_mobile': $isMobile.value,
       },
     ]"

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

@@ -70,12 +70,64 @@
       class="tw-shrink-0"
       :items="toolbarItems"
     ></VcBladeToolbar>
-    <slot></slot>
+
+    <div class="tw-flex-1 tw-overflow-auto">
+      <div
+        class="tw-flex tw-flex-row tw-h-full"
+        :class="{
+          'tw-flex-col': $isMobile.value,
+        }"
+      >
+        <slot></slot>
+
+        <div
+          v-show="$slots['widgets'] && !isWidgetContainerEmpty"
+          ref="widgetsRef"
+          class="vc-blade__widgets tw-flex"
+          :class="{
+            'tw-w-[var(--blade-widgets-width)] tw-flex-col': $isDesktop.value && !isExpanded,
+            'tw-w-[var(--blade-widgets-width-expanded)] tw-flex-col': $isDesktop.value && isExpanded,
+            'tw-w-auto tw-border-t tw-border-solid tw-border-t-[#eaedf3] tw-flex-row': $isMobile.value,
+          }"
+        >
+          <div
+            ref="widgetsContainerRef"
+            class="vc-blade__widget-container tw-flex tw-overflow-auto"
+            :class="{
+              'tw-flex-col': $isDesktop.value,
+              'tw-flex-row': $isMobile.value,
+            }"
+          >
+            <slot
+              name="widgets"
+              :is-expanded="isExpanded"
+            ></slot>
+          </div>
+
+          <div
+            class="tw-flex tw-flex-auto"
+            :class="{
+              'tw-flex-col tw-justify-end': $isDesktop.value,
+              'tw-w-12 tw-max-w-12 tw-bg-white tw-items-center tw-justify-center tw-px-4 tw-ml-auto': $isMobile.value,
+            }"
+          >
+            <VcIcon
+              class="tw-self-center tw-justify-self-center tw-text-[#a1c0d4] tw-cursor-pointer hover:tw-text-[#7ea8c4]"
+              :class="{
+                'tw-mb-4': $isDesktop.value,
+              }"
+              :icon="`fas fa-chevron-${$isDesktop.value ? (isExpanded ? 'right' : 'left') : isExpanded ? 'up' : 'down'}`"
+              @click="toggleWidgets"
+            ></VcIcon>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, Ref, reactive, useAttrs, toRefs, toValue } from "vue";
+import { computed, Ref, reactive, useAttrs, toRefs, toValue, ref, onMounted, onUpdated } from "vue";
 import { IBladeToolbar } from "../../../../core/types";
 import { usePopup } from "./../../../../shared";
 import { useI18n } from "vue-i18n";
@@ -83,6 +135,7 @@ import VcBladeHeader from "./_internal/vc-blade-header/vc-blade-header.vue";
 import VcBladeToolbar from "./_internal/vc-blade-toolbar/vc-blade-toolbar.vue";
 import { VcButton, VcIcon } from "./../../";
 import vcPopupError from "../../../../shared/components/common/popup/vc-popup-error.vue";
+import { useLocalStorage } from "@vueuse/core";
 
 export interface Props {
   icon?: string;
@@ -117,12 +170,39 @@ withDefaults(defineProps<Props>(), {
 defineSlots<{
   actions: void;
   default: void;
+  widgets: void;
 }>();
 
 defineEmits<Emits>();
 const attrs = useAttrs();
 const { maximized, error }: { maximized?: Ref<boolean>; error?: Ref<string> } = toRefs(reactive(attrs));
 const { t } = useI18n({ useScope: "global" });
+const widgetsRef = ref();
+const widgetsContainerRef = ref();
+
+const isExpanded = useLocalStorage("VC_BLADE_WIDGETS_IS_EXPANDED", true);
+
+const toggleWidgets = () => {
+  isExpanded.value = !isExpanded.value;
+};
+const isWidgetContainerEmpty = ref(false);
+
+const checkEmpty = (el: HTMLElement) => {
+  const isEmpty = !el.innerText.trim() && Array.from(el.children).every((node) => node.nodeType === Node.COMMENT_NODE);
+  isWidgetContainerEmpty.value = isEmpty;
+};
+
+onMounted(() => {
+  if (widgetsRef.value) {
+    checkEmpty(widgetsContainerRef.value);
+  }
+});
+
+onUpdated(() => {
+  if (widgetsRef.value) {
+    checkEmpty(widgetsContainerRef.value);
+  }
+});
 
 const { open } = usePopup({
   component: vcPopupError,
@@ -142,9 +222,16 @@ const { open } = usePopup({
   --blade-color-error: #f14e4e;
   --blade-color-unsaved-changes: #82a6bd;
   --blade-color-unsaved-changes: #82a6bd;
+
+  --blade-widgets-width: 36px;
+  --blade-widgets-width-expanded: 80px;
 }
 
 .vc-app_mobile .vc-blade {
   @apply tw-m-0 tw-rounded-none;
 }
+
+.vc-app_mobile .vc-blade__widgets {
+  @apply tw-flex tw-flex-row;
+}
 </style>

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

@@ -129,6 +129,7 @@
         size="s"
         aspect="1x1"
         :src="value as string"
+        :empty-icon="('emptyIcon' in cell && cell.emptyIcon) || undefined"
         background="contain"
       />
     </template>

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

@@ -9,12 +9,21 @@
   >
     <div
       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="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 tw-flex tw-flex-row"
       :class="{ animated: !isSwiping, 'vc-table-mobile__item_selected': isSelected }"
       :style="{ left }"
     >
-      <!-- Mobile item slot content -->
-      <slot></slot>
+      <div
+        v-if="anySelected"
+        class="tw-pl-4 tw-flex tw-items-center tw-justify-center tw-border-b tw-border-solid tw-border-b-[#e3e7ec]"
+      >
+        <VcCheckbox :model-value="unref(isSelected ?? false)"></VcCheckbox>
+      </div>
+      <div class="tw-flex-1 tw-w-full">
+        <div class="tw-flex tw-flex-col tw-h-full tw-border-b tw-border-solid tw-border-b-[#e3e7ec]">
+          <slot></slot>
+        </div>
+      </div>
     </div>
     <div class="tw-flex tw-justify-between tw-flex-auto">
       <!-- Left swipe actions -->
@@ -116,10 +125,10 @@
 </template>
 
 <script lang="ts" setup generic="T extends TableItem | string">
-import { Ref, computed, ref, onMounted, watch, onUpdated, nextTick } from "vue";
+import { Ref, computed, ref, onMounted, watch, onUpdated, unref } from "vue";
 import { IActionBuilderResult } from "../../../../../../core/types";
 import { useI18n } from "vue-i18n";
-import { useSwipe, watchDebounced } from "@vueuse/core";
+import { useElementVisibility, useSwipe, watchDebounced } from "@vueuse/core";
 import { vOnClickOutside } from "@vueuse/components";
 
 export interface Emits {
@@ -139,6 +148,7 @@ const props = defineProps<{
   swipingItem?: string;
   isSelected?: boolean;
   index: number;
+  selection?: T[];
 }>();
 
 const emit = defineEmits<Emits>();
@@ -150,6 +160,8 @@ 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 targetIsVisible = useElementVisibility(container);
 
 const actionsWidth = ref("0");
 
@@ -193,14 +205,16 @@ const { isSwiping, lengthX } = useSwipe(target, {
 
 const rightSwipeActions = computed(
   () =>
-    (itemActions.value &&
+    (props.selection?.length === 0 &&
+      itemActions.value &&
       itemActions.value.length &&
       itemActions.value.filter((actions: IActionBuilderResult) => actions.position === "right")) ||
     undefined,
 );
 const leftSwipeActions = computed(
   () =>
-    (itemActions.value &&
+    (props.selection?.length === 0 &&
+      itemActions.value &&
       itemActions.value.length &&
       itemActions.value.filter((actions: IActionBuilderResult) => actions.position === "left")) ||
     undefined,
@@ -233,6 +247,8 @@ watchDebounced(
   { deep: true, debounce: 450 },
 );
 
+watch(() => targetIsVisible.value, adjustHeight);
+
 function reset() {
   left.value = "0";
   actionsWidth.value = "0";
@@ -264,6 +280,10 @@ function handleHold() {
 }
 
 function handleClick() {
+  if (anySelected.value) {
+    emit("select");
+    return;
+  }
   emit("click");
 }
 </script>

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

@@ -1,14 +1,71 @@
 <template>
   <div
     v-loading="unref(loading) || columnsInit"
-    class="tw-relative tw-overflow-hidden tw-flex tw-flex-col tw-grow tw-basis-0 tw-border tw-border-[color:#eef0f2] tw-border-solid tw-border-t-0"
+    class="tw-relative tw-overflow-hidden tw-flex tw-flex-col tw-grow tw-basis-0 tw-border-[color:#eef0f2] tw-border-solid tw-border-t-0"
   >
+    <div
+      v-if="$isMobile.value && selection.length > 0"
+      class="tw-flex tw-flex-col"
+    >
+      <div
+        class="tw-flex tw-flex-row tw-items-center tw-justify-between tw-px-4 tw-py-2 tw-min-h-[56px] tw-font-bold tw-text-lg tw-border-[color:#eef0f2] tw-border-b tw-border-solid tw-box-border"
+      >
+        <div class="tw-flex tw-flex-row tw-w-full tw-justify-between">
+          <div class="tw-flex tw-flex-row tw-items-center tw-justify-center tw-gap-3">
+            <VcCheckbox
+              v-model="headerCheckbox"
+              class="tw-font-normal tw-self-center tw-flex"
+              @click.stop
+              >{{ $t("COMPONENTS.ORGANISMS.VC_TABLE.SELECT_ALL_TRUNCATED") }}</VcCheckbox
+            >
+            {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.SELECTED") }}: {{ selection.length }}
+          </div>
+
+          <VcButton
+            text
+            @click="() => (selection = [])"
+            >{{ $t("COMPONENTS.ORGANISMS.VC_TABLE.CANCEL") }}</VcButton
+          >
+        </div>
+      </div>
+      <div
+        v-if="selectAll && showSelectionChoice"
+        class="tw-w-full tw-flex tw-py-2"
+      >
+        <div class="tw-w-full tw-flex tw-items-center tw-justify-center">
+          <div>
+            {{
+              allSelected
+                ? t("COMPONENTS.ORGANISMS.VC_TABLE.ALL_SELECTED")
+                : t("COMPONENTS.ORGANISMS.VC_TABLE.CURRENT_PAGE_SELECTED")
+            }}
+            <VcButton
+              text
+              class="tw-text-[13px]"
+              @click="handleSelectAll"
+              >{{
+                allSelected ? t("COMPONENTS.ORGANISMS.VC_TABLE.CANCEL") : t("COMPONENTS.ORGANISMS.VC_TABLE.SELECT_ALL")
+              }}</VcButton
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- Header slot with filter and searchbar -->
     <slot
-      v-if="($slots['header'] || header) && (!columnsInit || searchValue || searchValue === '' || activeFilterCount)"
+      v-else-if="
+        ($slots['header'] || header) && (!columnsInit || searchValue || searchValue === '' || activeFilterCount)
+      "
       name="header"
     >
-      <div class="tw-shrink-0 tw-flex tw-items-center tw-justify-between tw-p-4">
+      <div
+        class="tw-shrink-0 tw-flex tw-items-center tw-justify-between tw-box-border"
+        :class="{
+          'tw-px-4 tw-py-2 tw-border-[color:#eef0f2] tw-border-solid tw-border-b ': $isMobile.value,
+          'tw-p-4': $isDesktop.value,
+        }"
+      >
         <!-- Table filter mobile button -->
         <div
           v-if="$isMobile.value && $slots['filters']"
@@ -32,7 +89,14 @@
           name="table_search"
           :model-value="searchValue"
           @update:model-value="$emit('search:change', $event)"
-        ></VcInput>
+        >
+          <template #prepend-inner>
+            <VcIcon
+              icon="fas fa-search"
+              class="tw-text-[color:#a5a5a5]"
+            ></VcIcon>
+          </template>
+        </VcInput>
 
         <!-- Table filter desktop button -->
         <div
@@ -61,7 +125,7 @@
         ref="scrollContainer"
         :no-padding="true"
         class="tw-grow tw-basis-0 tw-relative"
-        :use-ptr="pullToReload"
+        :use-ptr="selection.length === 0 ? pullToReload : undefined"
         @scroll:ptr="$emit('scroll:ptr')"
       >
         <!-- Mobile table view -->
@@ -74,6 +138,7 @@
               :items="items"
               :action-builder="itemActionBuilder"
               :swiping-item="mobileSwipeItem"
+              :selection="selection"
               :is-selected="isSelected(item)"
               @click="$emit('itemClick', item)"
               @swipe-start="handleSwipe"
@@ -130,20 +195,6 @@
             @mouseleave="handleHeaderMouseOver(false)"
           >
             <div class="vc-table__header-row tw-flex tw-flex-row">
-              <div
-                v-if="multiselect"
-                class="tw-flex-1 tw-flex tw-items-center tw-justify-center tw-w-[28px] tw-max-w-[28px] tw-min-w-[28px] tw-bg-[#f9f9f9] !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-overflow-hidden tw-z-[1]"
-              >
-                <div class="tw-flex tw-justify-center tw-items-center">
-                  <VcCheckbox
-                    v-model="headerCheckbox"
-                    @click.stop
-                  ></VcCheckbox>
-                </div>
-                <div class="tw-top-0 tw-bottom-0 tw-absolute tw-right-0 tw-flex tw-justify-end">
-                  <div class="tw-w-px tw-bg-[#e5e7eb] tw-h-full"></div>
-                </div>
-              </div>
               <div
                 v-for="(item, index) in filteredCols"
                 :id="item.id"
@@ -164,6 +215,17 @@
                 @drop="onColumnHeaderDrop($event, item)"
                 @click="handleHeaderClick(item)"
               >
+                <div
+                  v-if="multiselect && index === 0 && isHeaderHover"
+                  class="tw-flex tw-pl-3 tw-items-center tw-justify-center tw-w-auto tw-bg-[#f9f9f9] tw-box-border tw-select-none tw-overflow-hidden tw-z-[1]"
+                >
+                  <div class="tw-flex tw-justify-center tw-items-center">
+                    <VcCheckbox
+                      v-model="headerCheckbox"
+                      @click.stop
+                    ></VcCheckbox>
+                  </div>
+                </div>
                 <div class="tw-flex tw-items-center tw-flex-nowrap tw-truncate tw-px-3 tw-font-bold">
                   <div class="tw-truncate">
                     <span
@@ -275,20 +337,6 @@
               @drop="onRowDrop"
               @mouseover="showActions(itemIndex)"
             >
-              <div
-                v-if="multiselect && typeof item === 'object'"
-                class="tw-w-[28px] tw-max-w-[28px] tw-min-w-[28px] tw-relative tw-flex-1 tw-flex tw-items-center tw-justify-center"
-                @click.stop
-              >
-                <div class="tw-flex tw-justify-center tw-items-center">
-                  <VcCheckbox
-                    :model-value="isSelected(item)"
-                    @update:model-value="rowCheckbox(item)"
-                  ></VcCheckbox>
-                </div>
-                <div class="tw-w-px tw-top-0 tw-bottom-0 tw-absolute tw-right-0 tw-bg-[#e5e7eb]"></div>
-              </div>
-
               <div
                 v-for="cell in filteredCols"
                 :id="`${(typeof item === 'object' && 'id' in item && item.id) || itemIndex}_${cell.id}`"
@@ -298,28 +346,11 @@
                 :style="{ maxWidth: cell.width, width: cell.width }"
               >
                 <div class="tw-truncate">
-                  <slot
-                    :name="`item_${cell.id}`"
+                  <renderCellSlot
                     :item="item"
                     :cell="cell"
                     :index="itemIndex"
-                  >
-                    <VcTableCell
-                      v-if="typeof item === 'object'"
-                      class="tw-flex-1"
-                      :cell="cell"
-                      :item="item"
-                      :editing="editing"
-                      :index="itemIndex"
-                      :width="
-                        calculateElWidth(
-                          `${(typeof item === 'object' && 'id' in item && item.id) || itemIndex}_${cell.id}`,
-                        )
-                      "
-                      @update="$emit('onEditComplete', { event: $event, index: itemIndex })"
-                      @blur="$emit('onCellBlur', $event)"
-                    ></VcTableCell>
-                  </slot>
+                  />
                 </div>
               </div>
               <div
@@ -400,7 +431,11 @@
       name="footer"
     >
       <div
-        class="tw-bg-[#fbfdfe] tw-border-t tw-border-solid tw-border-[#eaedf3] tw-flex-shrink-0 tw-flex tw-items-center tw-justify-between tw-p-4"
+        class="tw-bg-[#fbfdfe] tw-border-t tw-border-solid tw-border-[#eaedf3] tw-flex-shrink-0 tw-flex tw-items-center tw-justify-between"
+        :class="{
+          'tw-py-2 tw-px-4': $isMobile.value,
+          'tw-p-4': $isDesktop.value,
+        }"
       >
         <!-- Table pagination -->
         <VcPagination
@@ -596,6 +631,41 @@ const sortField = computed(() => {
 
 const hasClickListener = typeof instance?.vnode.props?.["onItemClick"] === "function";
 
+const renderCellSlot = ({ item, cell, index }: { item: T; cell: ITableColumns; index: number }) => {
+  const isSlotExist = slots[`item_${cell.id}`];
+
+  const isFirstCell = filteredCols.value.indexOf(cell) === 0;
+
+  const isRowSelected = selection.value.includes(item);
+
+  if ((isFirstCell && selectedRowIndex.value === index) || (isRowSelected && isFirstCell)) {
+    return h(
+      "div",
+      { onClick: (e) => e.stopPropagation() },
+      h(VcCheckbox, {
+        modelValue: selection.value.includes(item),
+        "onUpdate:modelValue": (value: boolean) => {
+          rowCheckbox(item);
+        },
+      }),
+    );
+  }
+
+  if (!isSlotExist) {
+    return h(VcTableCell, {
+      cell,
+      item: item as TableItem,
+      index,
+      editing: props.editing,
+      onUpdate: (event) => {
+        emit("onEditComplete", { event, index });
+      },
+      onBlur: (event) => emit("onCellBlur", event),
+    });
+  }
+  return slots[`item_${cell.id}`]?.({ item, cell, index });
+};
+
 const calculateElWidth = (id: string) => {
   const el = document.getElementById(id);
   return el ? el.offsetWidth : 0;