@vc-shell/framework 1.0.340 → 1.1.0-alpha.2

package/ui/components/organisms/vc-table/_internal/vc-table-desktop-view/vc-table-desktop-view.vue

@@ -0,0 +1,215 @@
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<template>
+  <div
+    class="vc-table-desktop-view"
+    :class="{
+      'vc-table-desktop-view--empty': !items || !items.length,
+      'vc-table-desktop-view--multiselect': multiselect,
+    }"
+  >
+    <VcTableHeader
+      v-if="filteredCols.length"
+      :items="items"
+      :filtered-cols="filteredCols"
+      :multiselect="multiselect"
+      :header-checkbox="headerCheckbox"
+      :is-header-hover="isHeaderHover"
+      :expanded="expanded"
+      :editing="editing"
+      :sort-field="sortField"
+      :sort-direction="sortDirection"
+      :resizable-columns="resizableColumns"
+      :internal-columns-sorted="internalColumnsSorted"
+      :state-key="stateKey"
+      :internal-columns="internalColumns"
+      :reorderable-columns="reorderableColumns"
+      @header-mouse-over="handleHeaderMouseOver"
+      @column-switcher="handleColumnSwitcher"
+      @header-click="handleHeaderClick"
+      @update:header-checkbox="$emit('update:headerCheckbox', $event)"
+      @column-reorder="$emit('columnReorder')"
+      @column-resize="$emit('columnResize')"
+      @toggle-column="toggleColumn"
+    />
+
+    <VcTableSelectAllHeader
+      :select-all="selectAll"
+      :show-selection-choice="showSelectionChoice"
+      :all-selected="allSelected"
+      @select-all="handleSelectAll"
+    />
+
+    <VcTableBody
+      :items="items"
+      :filtered-cols="filteredCols"
+      :multiselect="multiselect"
+      :selected-item-id="selectedItemId"
+      :selection="selection"
+      :disabled-selection="disabledSelection"
+      :reorderable-rows="reorderableRows"
+      :dragged-row="draggedRow"
+      :has-click-listener="hasClickListener"
+      :editing="editing"
+      :enable-item-actions="enableItemActions"
+      :item-action-builder="itemActionBuilder"
+      :item-actions="itemActions"
+      :selected-row-index="selectedRowIndex"
+      :columns-init="columnsInit"
+      :search-value="searchValue"
+      :active-filter-count="activeFilterCount"
+      :notfound="notfound"
+      :empty="empty"
+      :is-selected="isSelected"
+      @item-click="$emit('itemClick', $event)"
+      @close-actions="closeActions"
+      @row-mouse-down="onRowMouseDown"
+      @row-drag-start="onRowDragStart"
+      @row-drag-over="onRowDragOver"
+      @row-drag-leave="onRowDragLeave"
+      @row-drag-end="onRowDragEnd"
+      @row-drop="onRowDrop"
+      @show-actions="showActions"
+      @row-checkbox="rowCheckbox"
+      @on-edit-complete="$emit('onEditComplete', $event)"
+      @on-cell-blur="$emit('onCellBlur', $event)"
+    >
+      <template
+        v-for="(slot, i) in slotName"
+        :key="i"
+        #[slot]="slotProps"
+      >
+        <slot
+          :name="slot"
+          v-bind="slotProps"
+        />
+      </template>
+    </VcTableBody>
+  </div>
+</template>
+
+<script lang="ts" setup generic="T extends TableItem | string">
+import { toRefs, MaybeRef, useSlots } from "vue";
+import VcTableHeader from "./_internal/vc-table-header/vc-table-header.vue";
+import VcTableSelectAllHeader from "./_internal/vc-table-select-all-header/vc-table-select-all-header.vue";
+import VcTableBody from "./_internal/vc-table-body/vc-table-body.vue";
+import type { ITableColumns, TableItem, TableColPartial, StatusImage } from "../../types";
+import type { IActionBuilderResult } from "../../../../../../core/types";
+import { useTableRowReorder } from "../../composables/useTableRowReorder";
+import type { TableSlots } from "../../vc-table.vue";
+
+const props = defineProps<{
+  items: T[];
+  filteredCols: TableColPartial[];
+  multiselect?: boolean;
+  headerCheckbox: boolean;
+  isHeaderHover: boolean;
+  expanded?: boolean;
+  editing?: boolean;
+  sortField?: string;
+  sortDirection?: string;
+  resizableColumns?: boolean;
+  internalColumnsSorted: TableColPartial[];
+  stateKey: string;
+  selectAll?: boolean;
+  showSelectionChoice?: boolean;
+  allSelected?: boolean;
+  selection: T[];
+  disabledSelection: T[];
+  columnsInit: boolean;
+  selectedItemId?: MaybeRef<string>;
+  reorderableRows?: boolean;
+  reorderableColumns?: boolean;
+  enableItemActions?: boolean;
+  itemActionBuilder?: (item: T) => IActionBuilderResult<T>[] | undefined;
+  itemActions: IActionBuilderResult<T>[][];
+  selectedRowIndex?: number;
+  hasClickListener?: boolean;
+  searchValue?: string;
+  activeFilterCount?: number;
+  notfound?: StatusImage;
+  empty?: StatusImage;
+  isSelected: (item: T) => boolean;
+  rowCheckbox: (item: T) => void;
+  internalColumns: TableColPartial[];
+}>();
+
+const emit = defineEmits<{
+  (e: "itemClick", item: T): void;
+  (e: "onEditComplete", args: { event: { field: string; value: string | number }; index: number }): void;
+  (e: "onCellBlur", args: { row: number | undefined; field: string }): void;
+  (e: "headerMouseOver", value: boolean): void;
+  (e: "columnSwitcher", value: boolean): void;
+  (e: "headerClick", item: ITableColumns): void;
+  (e: "selectAll"): void;
+  (e: "update:headerCheckbox", value: boolean): void;
+  (e: "columnReorder"): void;
+  (e: "columnResize"): void;
+  (e: "row:reorder", args: { dragIndex: number; dropIndex: number; value: T[] }): void;
+  (e: "showActions", index: number): void;
+  (e: "closeActions"): void;
+  (e: "toggleColumn", item: ITableColumns): void;
+}>();
+
+defineSlots<TableSlots<T>>();
+
+const { items } = toRefs(props);
+const slots = useSlots();
+
+const slotName = Object.keys(slots) as unknown;
+
+const { draggedRow, onRowMouseDown, onRowDragStart, onRowDragOver, onRowDragLeave, onRowDragEnd, onRowDrop } =
+  useTableRowReorder<T>(items, (args) => emit("row:reorder", args));
+
+function handleHeaderMouseOver(state: boolean) {
+  emit("headerMouseOver", state);
+}
+
+function handleColumnSwitcher(state: boolean) {
+  emit("columnSwitcher", state);
+}
+
+function handleHeaderClick(item: TableColPartial) {
+  const cleanCol = { ...item };
+  delete cleanCol.predefined;
+  emit("headerClick", cleanCol as ITableColumns);
+}
+
+function handleSelectAll() {
+  emit("selectAll");
+}
+
+function showActions(index: number) {
+  emit("showActions", index);
+}
+
+function closeActions() {
+  emit("closeActions");
+}
+
+function toggleColumn(item: ITableColumns) {
+  emit("toggleColumn", item);
+}
+
+defineExpose({
+  onRowMouseDown,
+  onRowDragStart,
+  onRowDragOver,
+  onRowDragLeave,
+  onRowDragEnd,
+  onRowDrop,
+});
+</script>
+
+<style lang="scss">
+.vc-table-desktop-view {
+  @apply tw-relative tw-box-border tw-w-full tw-h-full tw-flex tw-flex-col;
+
+  &--empty {
+    @apply tw-overflow-auto;
+  }
+
+  &--multiselect {
+    @apply tw-overflow-auto;
+  }
+}
+</style>

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

@@ -58,7 +58,7 @@ export interface Props {
   items: any[];
   columnsInit: boolean;
   searchValue?: string;
-  activeFilterCount: number;
+  activeFilterCount?: number;
   notfound?: {
     image?: string;
     text: string | Ref<string>;

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

@@ -1,33 +1,30 @@
 <template>
   <!-- Filter button -->
-  <VcButton
+  <VcTooltip
     ref="filterToggle"
-    icon="fas fa-filter"
-    icon-size="m"
-    class="vc-table-filter__button"
-    :disabled="disabled"
-    @click="openPanel"
+    :delay="1000"
   >
-    <template
-      v-if="title || counter"
-      #default
+    <VcButton
+      text
+      @click="openPanel"
     >
-      <div class="vc-table-filter__button-content">
-        <span
-          v-if="title"
-          class="vc-table-filter__button-title"
-        >
-          {{ title }}
-        </span>
-        <div
-          v-if="counter"
-          class="vc-table-filter__counter"
-        >
-          {{ counter }}
+      <VcBadge
+        :content="counter"
+        size="s"
+      >
+        <div class="vc-table-filter__icon-container">
+          <VcIcon
+            class="vc-table-filter__icon"
+            icon="fas fa-filter"
+            size="m"
+          />
         </div>
-      </div>
+      </VcBadge>
+    </VcButton>
+    <template #tooltip>
+      {{ title }}
     </template>
-  </VcButton>
+  </VcTooltip>
   <Sidebar
     :is-expanded="$isMobile.value ? isPanelVisible : false"
     position="left"
@@ -49,12 +46,17 @@
               class="vc-table-filter__panel-inner"
               @click.stop
             >
-              <VcIcon
-                class="vc-table-filter__panel-close"
-                icon="fas fa-times"
-                size="xl"
-                @click="closePanel"
-              />
+              <div class="vc-table-filter__panel-header">
+                <div class="vc-table-filter__panel-header-title">
+                  {{ title }}
+                </div>
+                <VcIcon
+                  class="vc-table-filter__panel-close"
+                  :icon="CrossSignIcon"
+                  size="xs"
+                  @click="closePanel"
+                />
+              </div>
               <slot :close-panel="closePanel"></slot>
             </div>
           </div>
@@ -69,6 +71,9 @@ import { ref, watch, computed, inject, Ref } from "vue";
 import { offset, autoUpdate, useFloating, UseFloatingReturn } from "@floating-ui/vue";
 import { VcButton } from "./../../../../atoms/vc-button";
 import { Sidebar } from "./../../../../../../shared/components";
+import { VcBadge } from "./../../../../atoms/vc-badge";
+import { VcTooltip } from "./../../../../atoms/vc-tooltip";
+import { CrossSignIcon } from "./../../../../atoms/vc-icon/icons";
 
 export interface Props {
   title?: string;
@@ -133,12 +138,26 @@ function closePanel() {
   --table-filter-desktop-shadow-color: var(--additional-950);
   --table-filter-desktop-shadow: 1px 1px 11px rgb(from var(--table-filter-desktop-shadow-color) r g b / 7%);
   --table-filter-panel-bg: var(--additional-50);
-  --table-filter-close-icon-color: var(--info-500);
+  --table-filter-close-icon-color: var(--neutrals-500);
+  --table-filter-panel-border-color: var(--base-border-color, var(--neutrals-200));
+  --table-filter-panel-header-title-color: var(--neutrals-600);
 }
 
 .vc-table-filter {
   @apply tw-relative tw-overflow-visible;
 
+  &__icon-container {
+    @apply tw-flex tw-flex-col tw-items-center tw-justify-center;
+  }
+
+  &__icon {
+    @apply tw-text-[color:var(--widget-icon-color)];
+  }
+
+  &__title {
+    @apply tw-font-medium tw-text-xs tw-text-[color:var(--widget-title-color)] tw-mt-1 tw-mx-0 tw-text-center tw-line-clamp-2;
+  }
+
   &__button-content {
     @apply tw-flex tw-flex-row tw-items-center tw-gap-[10px];
   }
@@ -173,10 +192,18 @@ function closePanel() {
   }
 
   &__panel-inner {
-    @apply tw-bg-[--table-filter-panel-bg] tw-box-border tw-p-5 tw-flex tw-flex-col;
+    @apply tw-bg-[--table-filter-panel-bg] tw-box-border tw-flex tw-flex-col;
     box-shadow: var(--table-filter-desktop-shadow);
   }
 
+  &__panel-header {
+    @apply tw-px-6 tw-py-[10px] tw-flex tw-flex-row tw-justify-between tw-items-center tw-border-b tw-border-solid tw-border-[var(--table-filter-panel-border-color)];
+  }
+
+  &__panel-header-title {
+    @apply tw-text-sm tw-font-bold tw-text-[var(--table-filter-panel-header-title-color)];
+  }
+
   &__panel-close {
     @apply tw-text-[var(--table-filter-close-icon-color)] tw-cursor-pointer tw-self-end tw-shrink-0;
   }

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

@@ -0,0 +1,70 @@
+<template>
+  <div
+    v-if="(hasFooterSlot || footer) && items?.length && !columnsInit"
+    class="vc-table__footer"
+    :class="{
+      'vc-table__footer--mobile': isMobile,
+      'vc-table__footer--desktop': isDesktop,
+    }"
+  >
+    <VcTableCounter
+      :label="totalLabel || t('COMPONENTS.ORGANISMS.VC_TABLE.TOTALS')"
+      :value="totalCount"
+    />
+
+    <VcPagination
+      :expanded="expanded"
+      :pages="pages"
+      :current-page="currentPage"
+      :variant="paginationVariant"
+      @item-click="handlePaginationClick"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { VcPagination } from "../../../../";
+import VcTableCounter from "../vc-table-counter/vc-table-counter.vue";
+import type { ComponentProps } from "vue-component-type-helpers";
+
+const props = defineProps<{
+  hasFooterSlot: boolean;
+  footer: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  items?: any[];
+  columnsInit: boolean;
+  isMobile: boolean;
+  isDesktop: boolean;
+  totalLabel?: string;
+  totalCount: number;
+  expanded: boolean;
+  pages: number;
+  currentPage: number;
+  paginationVariant: ComponentProps<typeof VcPagination>["variant"];
+}>();
+
+const emit = defineEmits<{
+  (e: "pagination-click", page: number): void;
+}>();
+
+const { t } = useI18n({ useScope: "global" });
+
+function handlePaginationClick(event: number) {
+  emit("pagination-click", event);
+}
+</script>
+
+<style lang="scss">
+.vc-table__footer {
+  @apply tw-flex-shrink-0 tw-flex tw-items-center tw-justify-between;
+
+  &--mobile {
+    @apply tw-p-6;
+  }
+
+  &--desktop {
+    @apply tw-p-6;
+  }
+}
+</style>

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

@@ -0,0 +1,106 @@
+<template>
+  <Transition name="table-header">
+    <div
+      v-show="
+        shouldShowSearch &&
+        (hasHeaderSlot || header) &&
+        (!columnsInit || searchValue || searchValue === '' || activeFilterCount)
+      "
+      class="vc-table-header"
+    >
+      <slot
+        name="header"
+        :header="headerComponent"
+      >
+        <component :is="headerComponent" />
+      </slot>
+    </div>
+  </Transition>
+</template>
+
+<script lang="ts" setup>
+import { VNode, computed, inject, Ref, h, useSlots } 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";
+
+const props = defineProps<{
+  hasHeaderSlot: boolean;
+  header: boolean;
+  columnsInit: boolean;
+  searchValue?: string;
+  activeFilterCount?: number;
+  searchPlaceholder?: string;
+  disableFilter?: boolean;
+  expanded?: boolean;
+}>();
+
+const emit = defineEmits<{
+  "search:change": [string];
+}>();
+
+defineSlots<{
+  filters: (props: { closePanel: () => void }) => VNode;
+  header: (props: { header: VNode }) => VNode;
+}>();
+
+const blade = inject(BladeInstance);
+const globalSearch = useGlobalSearch();
+const isMobile = inject("isMobile") as Ref<boolean>;
+const slots = useSlots();
+
+const currentBladeId = computed(() => {
+  return blade?.value.navigation?.idx || 0;
+});
+
+const shouldShowSearch = computed(() => {
+  if (!isMobile.value) return true;
+
+  if (blade?.value.navigation?.idx === 0) {
+    return globalSearch.isSearchVisible.value[currentBladeId.value];
+  }
+
+  return true;
+});
+
+const headerComponent = () =>
+  h(
+    VcTableBaseHeader,
+    {
+      searchValue: props.searchValue,
+      searchPlaceholder: props.searchPlaceholder,
+      activeFilterCount: props.activeFilterCount,
+      expanded: props.expanded,
+      "onSearch:change": (value: string) => emit("search:change", value),
+      disableFilter: props.disableFilter,
+    },
+    slots.filters
+      ? {
+          filters: () => {
+            return slots.filters?.({ closePanel: () => {} });
+          },
+        }
+      : undefined,
+  );
+</script>
+
+<style lang="scss">
+.vc-table-header {
+  // @apply tw-relative;
+}
+
+.table-header-enter-active,
+.table-header-leave-active {
+  @apply tw-transition-all tw-duration-200 tw-ease-in-out;
+}
+
+.table-header-enter-from,
+.table-header-leave-to {
+  @apply tw-opacity-0 tw-transform tw-translate-y-[-30px];
+}
+
+.table-header-enter-to,
+.table-header-leave-from {
+  @apply tw-opacity-100 tw-transform tw-translate-y-0;
+}
+</style>