@vc-shell/framework 1.0.231 → 1.0.233

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.stories.ts

@@ -16,7 +16,7 @@ export default {
     columns: [
       {
         id: "img",
-        title: "Pic",
+        title: "Img",
         width: "60px",
         type: "image",
       },

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,35 +346,18 @@
                 :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
                 v-if="
                   enableItemActions && itemActionBuilder && typeof item === 'object' && selectedRowIndex === itemIndex
                 "
-                class="tw-absolute tw-flex tw-right-[10px] actions tw-h-full tw-bg-[#f4f8fb]"
+                class="tw-absolute tw-flex tw-right-0 tw-px-[10px] actions tw-h-full tw-bg-[#f4f8fb]"
                 :class="{
                   'group-hover:!tw-bg-[#dfeef9]': hasClickListener,
                 }"
@@ -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;
@@ -936,12 +1006,12 @@ function onColumnHeaderDragStart(event: DragEvent, item: ITableColumns) {
 }
 
 function findParentHeader(element: HTMLElement) {
-  if (element.nodeName === "TH") {
+  if (element.classList.contains("vc-table__header")) {
     return element;
   } else {
     let parent = element.parentElement;
 
-    while (parent && parent.nodeName !== "TH") {
+    while (parent && !parent.classList.contains("vc-table__header")) {
       parent = parent.parentElement;
       if (!parent) break;
     }
@@ -965,11 +1035,11 @@ function onColumnHeaderDragOver(event: DragEvent) {
       reorderRef.value.style.top = dropHeaderOffset.top - getOffset(tableRef.value).top + "px";
 
       if (event.pageX > columnCenter) {
-        reorderRef.value.style.left = targetLeft + dropHeader.offsetWidth + "px";
+        reorderRef.value.style.left = targetLeft + dropHeader.offsetWidth - 5 + "px";
 
         dropPosition.value = 1;
       } else {
-        reorderRef.value.style.left = targetLeft + "px";
+        reorderRef.value.style.left = targetLeft - 5 + "px";
         dropPosition.value = -1;
       }
 
@@ -1024,7 +1094,8 @@ function onColumnHeaderDrop(event: DragEvent, item: ITableColumns) {
 function saveState() {
   console.debug("[@vc-shell/framework#vc-table.vue] - Save state");
 
-  state.value = internalColumns.value.map((col) => _.pick(col, "id", "visible", "width", "predefined"));
+  const colsClone = _.cloneDeep(internalColumns.value);
+  state.value = colsClone.map((col) => _.pick(col, "id", "visible", "width", "predefined"));
 }
 
 function restoreState() {
@@ -1045,9 +1116,14 @@ function restoreState() {
       }
     }
     // Merge the updated columns with the remaining state columns
-    internalColumns.value = _.values(
-      _.merge(_.keyBy(props.columns, "id"), _.keyBy(allColumns.value, "id"), _.keyBy(state.value, "id")),
-    );
+    internalColumns.value = state.value.map((stateItem) => {
+      const id = stateItem.id;
+
+      const propsColumn = _.find(props.columns, { id });
+      const allColumn = _.find(allColumns.value, { id });
+
+      return _.merge({}, propsColumn, allColumn, stateItem);
+    });
   } else {
     internalColumns.value = allColumns.value;
   }