@vc-shell/framework 1.0.60 → 1.0.62

package/ui/components/organisms/vc-table/vc-table.stories.ts

@@ -1,28 +1,26 @@
-/**
- * Table component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcTable from "./vc-table.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import { VcTable } from "./";
 import VcHint from "../../atoms/vc-hint/vc-hint.vue";
 import VcImage from "../../atoms/vc-image/vc-image.vue";
 
-export default {
-  title: "organisms/vc-table",
+const meta: Meta<typeof VcTable> = {
+  title: "organisms/VcTable",
   component: VcTable,
 };
 
-const Template: Story = (args) => ({
-  components: { VcTable, VcHint, VcImage },
-  setup() {
-    return { args };
-  },
-  template: `
+export default meta;
+type Story = StoryObj<typeof VcTable>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcTable, VcHint, VcImage },
+    setup() {
+      return { args };
+    },
+    template: `
     <div class= "tw-flex tw-h-[400px] tw-overflow-hidden">
       <vc-table v-bind="args">
-         <template v-slot:item_img="itemData">
-            <vc-image aspect="1x1" size="auto" :tw-border-ed="true" :src="itemData.item.img"></vc-image>
-         </template>
          <template v-slot:item_name="itemData">
             <div class= "tw-flex tw-flex-col">
                <div>{{ itemData.item.name }}</div>
@@ -32,68 +30,67 @@ const Template: Story = (args) => ({
       </vc-table>
     </div>
    `,
-});
+  }),
+  args: {
+    multiselect: true,
+    stateKey: "storybook_table",
 
-export const Table = Template.bind({});
-Table.storyName = "vc-table";
-Table.args = {
-  multiselect: true,
+    columns: [
+      {
+        id: "img",
+        title: "Pic",
+        width: 60,
+        type: "image",
+      },
+      {
+        id: "name",
+        title: "Name",
+        sortable: true,
+      },
+      {
+        id: "sku",
+        title: "SKU",
+        sortable: true,
+        width: 100,
+      },
+    ],
 
-  columns: [
-    {
-      id: "img",
-      title: "Pic",
-      width: 60,
-      class: "pr-0",
-    },
-    {
-      id: "name",
-      title: "Name",
-      sortable: true,
-    },
-    {
-      id: "sku",
-      title: "SKU",
-      sortable: true,
-      width: 100,
-    },
-  ],
-
-  items: [
-    {
-      id: 1,
-      img: "/images/1.jpg",
-      name: "Lenovo IdeaCentre 310S-08",
-      description: "Physical",
-      sku: "990555005",
-    },
-    {
-      id: 2,
-      img: "/images/2.jpg",
-      name: "BLU Win HD LTE X150Q 8GB",
-      description: "Physical",
-      sku: "003578948",
-    },
-    {
-      id: 3,
-      img: "/images/3.jpg",
-      name: "Samsung Galaxy S6 SM-G920F 32GB",
-      description: "Physical",
-      sku: "334590-095",
-    },
-    {
-      id: 4,
-      img: "/images/4.jpg",
-      name: "DJI Phantom 3 Professional Quadcopter",
-      description: "Physical",
-      sku: "000545432",
-    },
-    {
-      id: 5,
-      img: "/images/5.jpg",
-      name: "3DR X8-M Octocopter for Visual-Spectr",
-      description: "Physical",
-      sku: "435344443",
-    },
-  ],
+    items: [
+      {
+        id: "1",
+        img: "/images/1.jpg",
+        name: "Lenovo IdeaCentre 310S-08",
+        description: "Physical",
+        sku: "990555005",
+      },
+      {
+        id: "2",
+        img: "/images/2.jpg",
+        name: "BLU Win HD LTE X150Q 8GB",
+        description: "Physical",
+        sku: "003578948",
+      },
+      {
+        id: "3",
+        img: "/images/3.jpg",
+        name: "Samsung Galaxy S6 SM-G920F 32GB",
+        description: "Physical",
+        sku: "334590-095",
+      },
+      {
+        id: "4",
+        img: "/images/4.jpg",
+        name: "DJI Phantom 3 Professional Quadcopter",
+        description: "Physical",
+        sku: "000545432",
+      },
+      {
+        id: "5",
+        img: "/images/5.jpg",
+        name: "3DR X8-M Octocopter for Visual-Spectr",
+        description: "Physical",
+        sku: "435344443",
+      },
+    ],
+  },
 };

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

@@ -201,18 +201,42 @@
               class="tw-w-0.5 tw-bg-[#41afe6] tw-h-full tw-absolute tw-top-0 tw-bottom-0 tw-z-[2] tw-hidden"
             ></div>
           </thead>
-
+          <!-- <div
+            class="tw-h-[60px] tw-bg-[#dfeef9] tw-w-full tw-absolute tw-flex"
+            v-if="allSelected"
+          >
+            <div class="tw-w-full tw-flex tw-items-center tw-justify-center">
+              <div>
+                {{
+                  bulkSelected
+                    ? $t("COMPONENTS.ORGANISMS.VC_TABLE.ALL_BULK_SELECTED")
+                    : $t("COMPONENTS.ORGANISMS.VC_TABLE.ALL_SELECTED")
+                }}
+                <VcButton
+                  variant="onlytext"
+                  class="tw-text-[13px]"
+                  @click="handleBulkSelection"
+                  >{{
+                    bulkSelected
+                      ? $t("COMPONENTS.ORGANISMS.VC_TABLE.CANCEL")
+                      : $t("COMPONENTS.ORGANISMS.VC_TABLE.SELECT")
+                  }}</VcButton
+                >
+              </div>
+            </div>
+          </div> -->
           <tbody
             v-if="items"
             class="vc-table__body"
+            :class="{ 'tw-translate-y-[60px]': allSelected }"
           >
             <tr
               v-for="(item, itemIndex) in items"
               :key="(typeof item === 'object' && 'id' in item && item.id) || itemIndex"
-              class="vc-table__body-row tw-h-[60px] tw-bg-white hover:tw-bg-[#dfeef9] tw-cursor-pointer"
+              class="vc-table__body-row tw-h-[60px] tw-bg-white hover:!tw-bg-[#dfeef9] tw-cursor-pointer"
               :class="{
                 '!tw-bg-[#F9F9F9]': itemIndex % 2 === 1,
-                '!tw-bg-[#dfeef9] hover:tw-bg-[#dfeef9]':
+                '!tw-bg-[#dfeef9] hover:!tw-bg-[#dfeef9]':
                   typeof item === 'object' && 'id' in item && item.id ? selectedItemId === item.id : false,
               }"
               @click="$emit('itemClick', item)"
@@ -246,10 +270,12 @@
                   class="vc-table__body-actions-container tw-relative tw-flex tw-justify-center tw-items-center tw-group"
                 >
                   <button
-                    class="tw-text-[#41afe6] tw-cursor-pointer tw-border-none tw-bg-transparent disabled:tw-text-[gray] tw-w-full group-hover:tw-text-[#319ed4]"
+                    class="tw-text-[#41afe6] tw-cursor-pointer tw-border-none tw-bg-transparent disabled:tw-text-[gray] tw-w-full"
+                    :class="{
+                      'group-hover:tw-text-[#319ed4]': itemActions[itemIndex] && itemActions[itemIndex].length,
+                    }"
                     @click.stop="showActions(item, item.id)"
                     :ref="(el: Element) => setActionToggleRefs(el, item.id)"
-                    aria-describedby="tooltip"
                     :disabled="!(itemActions[itemIndex] && itemActions[itemIndex].length)"
                   >
                     <VcIcon
@@ -258,11 +284,11 @@
                     />
                   </button>
                   <div
-                    class="vc-table__body-tooltip tw-bg-white tw-rounded-[4px] tw-p-[15px] tw-z-[1] tw-absolute tw-right-0 tw-drop-shadow-[1px_3px_14px_rgba(111,122,131,0.25)]"
+                    class="vc-table__body-tooltip tw-bg-white tw-rounded-[4px] tw-p-[15px] tw-z-[1] tw-absolute tw-right-0 tw-drop-shadow-[1px_3px_14px_rgba(111,122,131,0.25)] tw-w-max"
                     v-show="selectedRow === item.id"
                     @mouseleave="closeActions"
                     :ref="(el: Element) => setTooltipRefs(el, item.id)"
-                    role="tooltip"
+                    :style="tooltipStyle"
                   >
                     <div
                       class="tw-flex tw-items-start tw-flex-col tw-text-[#3f3f3f] tw-font-normal not-italic tw-text-base tw-leading-[20px] tw-gap-[25px]"
@@ -289,7 +315,8 @@
                     </div>
                     <div
                       class="vc-table__body-tooltip-arrow"
-                      data-popper-arrow
+                      :style="arrowStyle"
+                      :ref="(el: Element) => setTooltipArrowRefs(el, item.id)"
                     ></div>
                   </div>
                 </div>
@@ -396,16 +423,16 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, ref, watch, onBeforeUpdate, onBeforeUnmount, Ref, onUpdated, onBeforeMount } from "vue";
+import { computed, ref, watch, onBeforeUpdate, onBeforeUnmount, Ref, onUpdated, onBeforeMount, nextTick } from "vue";
 import VcTableCounter from "./_internal/vc-table-counter/vc-table-counter.vue";
 import VcTableFilter from "./_internal/vc-table-filter/vc-table-filter.vue";
 import VcTableMobileItem from "./_internal/vc-table-mobile-item/vc-table-mobile-item.vue";
 import VcTableCell from "./_internal/vc-table-cell/vc-table-cell.vue";
 import VcTableColumnSwitcher from "./_internal/vc-table-column-switcher/vc-table-column-switcher.vue";
-import { createPopper, Instance } from "@popperjs/core";
+import { offset, flip, arrow, computePosition, ComputePositionReturn } from "@floating-ui/vue";
 import { IActionBuilderResult, ITableColumns } from "./../../../../core/types";
 import { useLocalStorage, useCurrentElement } from "@vueuse/core";
-import VcContainer from "./../../atoms/vc-container/vc-container.vue";
+import { VcContainer, VcInput, VcCheckbox, VcIcon, VcPagination, VcButton, VcLoading } from "./../../";
 
 export interface StatusImage {
   image?: string;
@@ -429,11 +456,6 @@ export interface Props {
   itemActionBuilder?: (item: TableItem) => IActionBuilderResult[];
   sort?: string;
   multiselect?: boolean;
-  /**
-   * Emit whole item instead of {id: boolean} while prop multiselect = true
-   * @default false
-   */
-  multiselectEmitItem?: boolean;
   expanded?: boolean;
   totalLabel?: string;
   totalCount?: number;
@@ -495,6 +517,7 @@ const emit = defineEmits<Emits>();
 
 // template refs
 const tooltipRefs = ref<ITableItemRef[]>([]);
+const tooltipArrowRefs = ref<ITableItemRef[] | null>([]);
 const reorderRef = ref<HTMLElement | null>();
 const tableRef = ref<HTMLElement | null>();
 
@@ -503,9 +526,10 @@ let columnResizeListener = null;
 let columnResizeEndListener = null;
 
 const selection = ref<TableItemType[]>([]);
+const bulkSelected = ref(false);
 
 const selectedRow = ref<string>();
-const tooltip = ref<Instance>();
+const tooltip = ref<ComputePositionReturn>();
 const scrollContainer = ref<typeof VcContainer>();
 const actionToggleRefs = ref<ITableItemRef[]>([]);
 
@@ -598,6 +622,8 @@ const filteredCols = computed(() => {
   });
 });
 
+const allSelected = computed(() => selection.value.length === props.items.length && props.pages > 1);
+
 watch(
   () => props.items,
   (newVal) => {
@@ -621,13 +647,19 @@ watch(
 watch(
   () => props.columns,
   (newVal) => {
-    if (!defaultColumns.value.length) {
-      defaultColumns.value = newVal;
-    }
+    defaultColumns.value = newVal;
   },
   { deep: true, immediate: true }
 );
 
+// function handleBulkSelection() {
+//   bulkSelected.value = !bulkSelected.value;
+
+//   if (!bulkSelected.value) {
+//     selection.value = [];
+//   }
+// }
+
 function isSelected(item: TableItemType) {
   return selection.value.indexOf(item) > -1;
 }
@@ -660,33 +692,65 @@ function setActionToggleRefs(el: Element, id: string) {
   }
 }
 
+function setTooltipArrowRefs(el: Element, id: string) {
+  if (el) {
+    const isExists = tooltipArrowRefs.value.some((item) => item.id === id);
+    if (!isExists) {
+      tooltipArrowRefs.value.push({ element: el, id });
+    }
+  }
+}
+
 function showActions(item: TableItem, index: string) {
+  if (selectedRow.value) {
+    closeActions();
+    return;
+  }
   selectedRow.value = item.id;
 
-  const toggleRef = actionToggleRefs.value.find((item) => item.id === index);
-  const tooltipRef = tooltipRefs.value.find((item) => item.id === index);
+  const toggleRef = actionToggleRefs.value.find((item) => item.id === index).element;
+  const tooltipRef = tooltipRefs.value.find((item) => item.id === index).element;
+  const tooltipArrowRef = tooltipArrowRefs.value.find((item) => item.id === index).element;
 
-  if (toggleRef && tooltipRef) {
+  if (toggleRef && tooltipRef && tooltipArrowRef) {
     nextTick(() => {
-      tooltip.value = createPopper(toggleRef.element, tooltipRef.element as HTMLElement, {
+      computePosition(toggleRef, tooltipRef as HTMLElement, {
         placement: "bottom",
-        onFirstUpdate: () => tooltip.value?.update(),
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [-15, 15],
-            },
-          },
+        middleware: [
+          flip({ fallbackPlacements: ["top", "bottom"] }),
+          offset({ crossAxis: 15, mainAxis: 15 }),
+          arrow({ element: tooltipArrowRef as HTMLElement }),
         ],
-      });
+      }).then((item) => (tooltip.value = item));
     });
   }
 }
 
+const tooltipStyle = computed(() => {
+  return {
+    top: `${tooltip.value?.y ?? 0}px`,
+    left: `${tooltip.value?.x ?? 0}px`,
+  };
+});
+
+const arrowStyle = computed(() => {
+  if (tooltip.value && tooltip.value.middlewareData.arrow) {
+    const { x } = tooltip.value && tooltip.value.middlewareData.arrow;
+    return {
+      top: (tooltip.value.placement === "bottom" && "-4px") || undefined,
+      bottom: (tooltip.value.placement === "top" && "-4px") || undefined,
+      left: `${x ?? 0}px`,
+    };
+  }
+  return {
+    top: "0px",
+    left: "0px",
+  };
+});
+
 async function calculateActions(items: TableItemType[]) {
   if (typeof props.itemActionBuilder === "function") {
-    let populatedItems = [];
+    const populatedItems = [];
     for (let index = 0; index < items.length; index++) {
       if (typeof items[index] === "object") {
         const elementWithActions = await props.itemActionBuilder(items[index] as TableItem);
@@ -699,7 +763,6 @@ async function calculateActions(items: TableItemType[]) {
 
 function closeActions() {
   selectedRow.value = undefined;
-  tooltip.value?.destroy();
 }
 
 function handleSwipe(id: string) {
@@ -711,7 +774,7 @@ function handleHeaderClick(item: ITableColumns) {
 }
 
 function handleMouseDown(e: MouseEvent, item: ITableColumns) {
-  let containerLeft = getOffset(table.value as HTMLElement).left;
+  const containerLeft = getOffset(table.value as HTMLElement).left;
   resizeColumnElement.value = item;
   columnResizing.value = true;
   lastResize.value = e.pageX - containerLeft + table.value.scrollLeft;
@@ -749,7 +812,7 @@ function unbindColumnResizeEvents() {
 }
 
 function onColumnResize(event: MouseEvent) {
-  let containerLeft = getOffset(table.value as HTMLElement).left;
+  const containerLeft = getOffset(table.value as HTMLElement).left;
 
   resizer.value.style.top = 0 + "px";
   resizer.value.style.left = event.pageX - containerLeft + table.value.scrollLeft + "px";
@@ -761,8 +824,8 @@ function getOffset(element: HTMLElement) {
     return { top: 0, left: 0 };
   }
 
-  let rect = element.getBoundingClientRect();
-  let win = element.ownerDocument.defaultView;
+  const rect = element.getBoundingClientRect();
+  const win = element.ownerDocument.defaultView;
   return {
     top: rect.top + win.pageYOffset,
     left: rect.left + win.pageXOffset,
@@ -770,14 +833,14 @@ function getOffset(element: HTMLElement) {
 }
 
 function onColumnResizeEnd() {
-  let delta = resizer.value.offsetLeft - lastResize.value;
+  const delta = resizer.value.offsetLeft - lastResize.value;
 
   const columnElement: HTMLElement = table.value.querySelector(`#${resizeColumnElement.value.id}`);
 
-  let columnWidth = columnElement.offsetWidth;
-  let newColumnWidth = columnWidth + delta;
+  const columnWidth = columnElement.offsetWidth;
+  const newColumnWidth = columnWidth + delta;
 
-  let minWidth = 15;
+  const minWidth = 15;
 
   if (columnWidth + delta > parseInt(minWidth.toString(), 10)) {
     nextColumn.value = filteredCols.value[filteredCols.value.indexOf(resizeColumnElement.value) + 1];
@@ -785,7 +848,7 @@ function onColumnResizeEnd() {
     if (nextColumn.value) {
       const nextColElement: HTMLElement = table.value.querySelector(`#${nextColumn.value.id}`);
 
-      let nextColumnWidth = nextColElement.offsetWidth - delta;
+      const nextColumnWidth = nextColElement.offsetWidth - delta;
       if (newColumnWidth > 15 && nextColumnWidth > 15) {
         resizeTableCells(newColumnWidth, nextColumnWidth);
       }
@@ -834,16 +897,16 @@ function findParentHeader(element: HTMLElement) {
 }
 
 function onColumnHeaderDragOver(event: DragEvent) {
-  let dropHeader = findParentHeader(event.target as HTMLElement);
+  const dropHeader = findParentHeader(event.target as HTMLElement);
 
   if (props.reorderableColumns && draggedColumn.value && dropHeader) {
     event.preventDefault();
-    let containerOffset = getOffset(table.value as HTMLElement);
-    let dropHeaderOffset = getOffset(dropHeader);
+    const containerOffset = getOffset(table.value as HTMLElement);
+    const dropHeaderOffset = getOffset(dropHeader);
 
     if (draggedElement.value !== dropHeader) {
-      let targetLeft = dropHeaderOffset.left - containerOffset.left;
-      let columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
+      const targetLeft = dropHeaderOffset.left - containerOffset.left;
+      const columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
 
       reorderRef.value.style.top = dropHeaderOffset.top - getOffset(tableRef.value).top + "px";
 
@@ -873,8 +936,8 @@ function onColumnHeaderDrop(event: DragEvent, item: ITableColumns) {
   event.preventDefault();
 
   if (draggedColumn.value) {
-    let dragIndex = defaultColumns.value.indexOf(draggedColumn.value);
-    let dropIndex = defaultColumns.value.indexOf(item);
+    const dragIndex = defaultColumns.value.indexOf(draggedColumn.value);
+    const dropIndex = defaultColumns.value.indexOf(item);
 
     let allowDrop = dragIndex !== dropIndex;
 
@@ -973,11 +1036,11 @@ function onRowDragOver(event: DragEvent, item: TableItem | string) {
   const index = props.items.indexOf(item);
 
   if (rowDragged.value && draggedRow.value !== item) {
-    let rowElement = event.currentTarget as HTMLElement;
-    let rowY = getOffset(rowElement).top;
-    let pageY = event.pageY;
-    let rowMidY = rowY + rowElement.offsetHeight / 2;
-    let previousRowElement = rowElement.previousElementSibling;
+    const rowElement = event.currentTarget as HTMLElement;
+    const rowY = getOffset(rowElement).top;
+    const pageY = event.pageY;
+    const rowMidY = rowY + rowElement.offsetHeight / 2;
+    const previousRowElement = rowElement.previousElementSibling;
 
     if (pageY < rowMidY) {
       rowElement.classList.remove("vc-table__drag-row-bottom");
@@ -1005,8 +1068,8 @@ function onRowDragOver(event: DragEvent, item: TableItem | string) {
 function onRowDragLeave(event: DragEvent) {
   event.preventDefault();
 
-  let rowElement = event.currentTarget as HTMLElement;
-  let previousRowElement = rowElement.previousElementSibling;
+  const rowElement = event.currentTarget as HTMLElement;
+  const previousRowElement = rowElement.previousElementSibling;
 
   if (previousRowElement) {
     previousRowElement.classList.remove("vc-table__drag-row-bottom");
@@ -1025,14 +1088,14 @@ function onRowDragEnd(event: DragEvent & { currentTarget?: { draggable: boolean
 
 function onRowDrop(event: DragEvent) {
   if (droppedRowIndex.value != null) {
-    let dropIndex =
+    const dropIndex =
       draggedRowIndex.value > droppedRowIndex.value
         ? droppedRowIndex.value
         : droppedRowIndex.value === 0
         ? 0
         : droppedRowIndex.value - 1;
 
-    let processedItems = [...props.items];
+    const processedItems = [...props.items];
 
     reorderArray(processedItems, draggedRowIndex.value, dropIndex);
 

package/ui/locales/en.json

@@ -0,0 +1,12 @@
+{
+  "COMPONENTS":{
+    "ORGANISMS":{
+      "VC_TABLE":{
+        "ALL_SELECTED":"All items in this page are selected.",
+        "SELECT":"Select all items",
+        "ALL_BULK_SELECTED":"All items are selected.",
+        "CANCEL": "Cancel selection"
+      }
+    }
+  }
+}

package/ui/locales/index.ts

@@ -0,0 +1,2 @@
+import * as en from "./en.json";
+export { en };

package/dist/types/core/api/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../core/api/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}