@vc-shell/framework 1.0.341 → 1.1.0-alpha.10

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

@@ -0,0 +1,250 @@
+<template>
+  <div
+    ref="headerRef"
+    class="vc-table-columns-header"
+    @mouseenter="$emit('headerMouseOver', true)"
+    @mouseleave="$emit('headerMouseOver', false)"
+  >
+    <div class="vc-table-columns-header__row">
+      <div
+        v-if="multiselect && items && items.length"
+        class="vc-table-columns-header__checkbox"
+      >
+        <div class="vc-table-columns-header__checkbox-content">
+          <VcCheckbox
+            :model-value="headerCheckbox"
+            size="s"
+            :indeterminate="selection && selection.length > 0 && selection.length !== items.length"
+            @update:model-value="$emit('update:headerCheckbox', $event)"
+            @click.stop
+          />
+        </div>
+        <div class="vc-table-columns-header__checkbox-resizer" />
+      </div>
+      <div
+        v-for="(item, index) in filteredCols"
+        :id="item.id"
+        :key="item.id"
+        class="vc-table-columns-header__cell"
+        :class="[
+          {
+            'vc-table-columns-header__cell--sortable': item.sortable,
+            'vc-table-columns-header__cell--last': index === filteredCols.length - 1,
+          },
+          item.align ? tableAlignment[item.align] : '',
+        ]"
+        :style="{ maxWidth: item.width, width: item.width }"
+        @mousedown="reorderableColumns && onColumnHeaderMouseDown($event)"
+        @dragstart="reorderableColumns && onColumnHeaderDragStart($event, item)"
+        @dragover="reorderableColumns && onColumnHeaderDragOver($event)"
+        @dragleave="reorderableColumns && onColumnHeaderDragLeave($event)"
+        @drop="reorderableColumns && onColumnHeaderDrop($event, item)"
+        @click="$emit('headerClick', item)"
+      >
+        <div class="vc-table-columns-header__cell-content">
+          <div class="vc-table-columns-header__cell-title">
+            <span
+              v-if="editing && item.rules?.required"
+              class="vc-table-columns-header__cell-required"
+              >*</span
+            >
+            <slot :name="`header_${item.id}`">{{ item.title }}</slot>
+          </div>
+          <div
+            v-if="sortField === item.id"
+            class="vc-table-columns-header__cell-sort-icon"
+          >
+            <VcIcon
+              size="xs"
+              :icon="`fas fa-chevron-${sortDirection === 'DESC' ? 'down' : 'up'}`"
+            />
+          </div>
+          <div
+            v-else
+            class="vc-table-columns-header__cell-sort-icons"
+          >
+            <VcIcon
+              size="xs"
+              icon="fas fa-chevron-up"
+            />
+            <VcIcon
+              size="xs"
+              icon="fas fa-chevron-down"
+            />
+          </div>
+        </div>
+        <div
+          v-if="resizableColumns"
+          class="vc-table-columns-header__cell-resizer"
+          :class="{
+            'vc-table-columns-header__cell-resizer--cursor': resizableColumns,
+          }"
+          @mousedown.stop="resizableColumns && handleMouseDown($event, item)"
+        />
+      </div>
+
+      <div
+        v-if="isHeaderHover && expanded"
+        class="vc-table-columns-header__column-switcher"
+      >
+        <VcTableColumnSwitcher
+          :items="internalColumnsSorted"
+          :state-key="stateKey"
+          @change="$emit('toggleColumn', $event)"
+          @on-active="$emit('columnSwitcher', $event)"
+        />
+      </div>
+    </div>
+
+    <div
+      ref="resizer"
+      class="vc-table-columns-header__resizer"
+    />
+    <div
+      ref="reorderRef"
+      class="vc-table-columns-header__reorder-ref"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup generic="T extends TableItem | string">
+import { toRefs, ref } from "vue";
+import { VcCheckbox, VcIcon } from "../../../../../..";
+import VcTableColumnSwitcher from "../../../vc-table-column-switcher/vc-table-column-switcher.vue";
+import type { TableItem, TableColPartial } from "../../../../vc-table.vue";
+import { useTableColumnReorder } from "../../../../composables/useTableColumnReorder";
+import { useTableColumnResize } from "../../../../composables/useTableColumnResize";
+import { ITableColumns } from "../../../../../../../../core/types";
+
+const props = defineProps<{
+  items: T[];
+  filteredCols: TableColPartial[];
+  multiselect?: boolean;
+  headerCheckbox: boolean;
+  isHeaderHover: boolean;
+  expanded?: boolean;
+  editing?: boolean;
+  sortField?: string;
+  sortDirection?: string;
+  resizableColumns?: boolean;
+  reorderableColumns?: boolean;
+  internalColumnsSorted: TableColPartial[];
+  stateKey: string;
+  internalColumns: TableColPartial[];
+  selection?: T[];
+}>();
+
+const emit = defineEmits<{
+  (e: "headerMouseOver", value: boolean): void;
+  (e: "columnSwitcher", value: boolean): void;
+  (e: "headerClick", item: TableColPartial): void;
+  (e: "update:headerCheckbox", value: boolean): void;
+  (e: "columnReorder"): void;
+  (e: "columnResize"): void;
+  (e: "toggleColumn", item: ITableColumns): void;
+}>();
+
+const tableAlignment = {
+  start: "tw-justify-start",
+  end: "tw-justify-end",
+  center: "tw-justify-center",
+  between: "tw-justify-between",
+  around: "tw-justify-around",
+  evenly: "tw-justify-evenly",
+};
+
+const { internalColumns } = toRefs(props);
+
+const headerRef = ref<HTMLElement>();
+
+const {
+  reorderRef,
+  onColumnHeaderMouseDown,
+  onColumnHeaderDragStart,
+  onColumnHeaderDragOver,
+  onColumnHeaderDragLeave,
+  onColumnHeaderDrop,
+} = useTableColumnReorder<T>(internalColumns, () => emit("columnReorder"), headerRef);
+
+const { resizer, handleMouseDown } = useTableColumnResize(internalColumns, () => emit("columnResize"), headerRef);
+</script>
+
+<style lang="scss">
+:root {
+  --table-header-height: 60px;
+  --table-header-border-color: var(--neutrals-200);
+}
+
+.vc-table-columns-header {
+  @apply tw-border-y tw-border-[color:var(--table-header-border-color)] tw-border-solid;
+  &__row {
+    @apply tw-flex tw-flex-row [box-shadow:var(--table-header-border)] tw-bg-[--table-header-bg];
+  }
+
+  &__checkbox {
+    @apply tw-flex-1 tw-flex tw-items-center tw-justify-center tw-w-9 tw-max-w-9 tw-min-w-9 tw-bg-[--table-header-bg] tw-box-border tw-sticky tw-top-0 tw-select-none tw-overflow-hidden tw-z-[1];
+  }
+
+  &__checkbox-content {
+    @apply tw-flex tw-justify-center tw-items-center;
+  }
+
+  &__checkbox-resizer {
+    @apply tw-w-px tw-bg-[--table-resizer-color] tw-h-full tw-absolute tw-right-0 tw-flex tw-justify-end;
+  }
+
+  &__cell {
+    @apply tw-flex-1 tw-flex tw-items-center tw-h-[var(--table-header-height)] tw-bg-[--table-header-bg] tw-box-border tw-sticky tw-top-0 tw-select-none tw-overflow-hidden tw-z-[1];
+
+    &--sortable {
+      @apply tw-cursor-pointer;
+
+      &:hover {
+        .vc-table-columns-header__cell-sort-icons {
+          @apply tw-visible;
+        }
+      }
+    }
+  }
+
+  &__cell-content {
+    @apply tw-flex tw-items-center tw-flex-nowrap tw-truncate tw-px-3 tw-font-semibold tw-text-sm tw-text-[color:var(--table-header-text-color)] tw-leading-5;
+  }
+
+  &__cell-title {
+    @apply tw-truncate;
+  }
+
+  &__cell-required {
+    @apply tw-text-[color:var(--label-required-color)] tw-mr-1;
+  }
+
+  &__cell-sort-icon {
+    @apply tw-ml-1 tw-text-[color:var(--table-sort-icon-color)];
+  }
+
+  &__cell-sort-icons {
+    @apply tw-flex tw-flex-col tw-ml-1 tw-invisible tw-text-[color:var(--table-sort-icon-color)];
+  }
+
+  &__cell-resizer {
+    @apply tw-w-3 tw-mr-1 tw-border-r tw-border-[--table-resizer-color] tw-border-solid tw-h-full tw-absolute tw-right-0 tw-flex tw-justify-end;
+
+    &--cursor {
+      @apply tw-cursor-col-resize;
+    }
+  }
+
+  &__column-switcher {
+    @apply tw-absolute tw-h-[var(--table-header-height)] tw-z-10 tw-right-0 tw-flex tw-items-center;
+  }
+
+  &__resizer {
+    @apply tw-w-px tw-absolute tw-z-10 tw-hidden tw-h-full tw-bg-[--table-resizer-color] tw-cursor-col-resize;
+  }
+
+  &__reorder-ref {
+    @apply tw-w-0.5 tw-bg-[--table-reorder-color] tw-h-full tw-absolute tw-top-0 tw-bottom-0 tw-z-20 tw-hidden;
+  }
+}
+</style>

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

@@ -0,0 +1,238 @@
+<template>
+  <div
+    class="vc-table-row"
+    role="button"
+    :class="{
+      'vc-table-row--odd': index % 2 === 0,
+      'vc-table-row--clickable': hasClickListener,
+      'vc-table-row--even': index % 2 === 1,
+      'vc-table-row--selected':
+        item && typeof item === 'object' && 'id' in item && item.id ? selectedItemId === item.id : false,
+      'vc-table-row--selection': selection && selection.length && selection.includes(item as T),
+      'vc-table-row__drag-row-bottom': draggedRow === index,
+      'vc-table-row__drag-row-top': draggedRow === index,
+    }"
+    @click="$emit('itemClick', item as T)"
+    @mouseleave="$emit('closeActions')"
+    @mousedown="reorderableRows && $emit('rowMouseDown', $event)"
+    @dragstart="reorderableRows && $emit('rowDragStart', $event)"
+    @dragover="reorderableRows && $emit('rowDragOver', $event)"
+    @dragleave="reorderableRows && $emit('rowDragLeave', $event)"
+    @dragend="reorderableRows && $emit('rowDragEnd', $event)"
+    @drop="reorderableRows && $emit('rowDrop', $event)"
+    @mouseover="$emit('showActions', index)"
+  >
+    <div
+      v-if="multiselect && typeof item === 'object'"
+      class="vc-table-row__checkbox"
+      @click.stop
+    >
+      <div class="vc-table-row__checkbox-content">
+        <VcCheckbox
+          :model-value="isSelected(item as T)"
+          size="s"
+          :disabled="disabledSelection.includes(item as T)"
+          @update:model-value="$emit('rowCheckbox', item as T)"
+        />
+      </div>
+      <div class="vc-table-row__checkbox-resizer" />
+    </div>
+    <div
+      v-for="cell in filteredCols"
+      :id="`${(item && typeof item === 'object' && 'id' in item && item.id) || index}_${cell.id}`"
+      :key="`${(item && typeof item === 'object' && 'id' in item && item.id) || index}_${cell.id}`"
+      class="vc-table-row__cell"
+      :class="[cell.class]"
+      :style="{ maxWidth: cell.width, width: cell.width }"
+    >
+      <div class="vc-table-row__cell-content">
+        <slot
+          :name="`item_${cell.id}`"
+          :item="item"
+          :cell="cell"
+          :index="index"
+        >
+          <VcTableCell
+            :item="item as TableItem"
+            :cell="cell as ITableColumns"
+            :index="index"
+            :editing="editing"
+            @update="$emit('onEditComplete', { event: $event, index: index })"
+            @blur="$emit('onCellBlur', $event)"
+          />
+        </slot>
+      </div>
+    </div>
+    <div
+      v-if="enableItemActions && itemActionBuilder && typeof item === 'object' && selectedRowIndex === index"
+      class="vc-table-row__actions"
+      :class="{
+        'vc-table-row__actions--hover': hasClickListener,
+        'vc-table-row__actions--selected':
+          hasClickListener && selection && selection.length && selection.includes(item as T),
+      }"
+      @click.stop
+    >
+      <div class="vc-table-row__actions-content">
+        <div
+          v-for="(itemAction, i) in itemActions[index]"
+          :key="i"
+          class="vc-table-row__actions-item"
+          @click.stop="itemAction.clickHandler(item as T, index)"
+        >
+          <VcTooltip
+            placement="bottom"
+            :offset="{
+              mainAxis: 5,
+            }"
+          >
+            <VcIcon
+              :icon="itemAction.icon"
+              size="m"
+            />
+            <template #tooltip>
+              <div class="vc-table-row__actions-tooltip">
+                {{ itemAction.title }}
+              </div>
+            </template>
+          </VcTooltip>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup generic="T extends TableItem | string">
+import { VcCheckbox, VcIcon, VcTooltip } from "../../../../../../";
+import VcTableCell from "../../../vc-table-cell/vc-table-cell.vue";
+import type { TableItem, TableColPartial } from "../../../../vc-table.vue";
+import type { IActionBuilderResult, ITableColumns } from "../../../../../../../../core/types";
+import { MaybeRef } from "vue";
+defineProps<{
+  item: T;
+  index: number;
+  filteredCols: TableColPartial[];
+  multiselect?: boolean;
+  selectedItemId?: MaybeRef<string>;
+  selection: T[];
+  disabledSelection: T[];
+  reorderableRows?: boolean;
+  draggedRow?: number;
+  hasClickListener?: boolean;
+  editing?: boolean;
+  enableItemActions?: boolean;
+  itemActionBuilder?: (item: T) => IActionBuilderResult[] | undefined;
+  itemActions: IActionBuilderResult[][];
+  selectedRowIndex?: number;
+  isSelected: (item: T) => boolean;
+}>();
+
+defineEmits<{
+  (e: "itemClick", item: T): void;
+  (e: "closeActions"): void;
+  (e: "rowMouseDown", event: MouseEvent): void;
+  (e: "rowDragStart", event: DragEvent): void;
+  (e: "rowDragOver", event: DragEvent): void;
+  (e: "rowDragLeave", event: DragEvent): void;
+  (e: "rowDragEnd", event: DragEvent): void;
+  (e: "rowDrop", event: DragEvent): void;
+  (e: "showActions", index: number): void;
+  (e: "rowCheckbox", item: T): void;
+  (e: "onEditComplete", args: { event: { field: string; value: string | number }; index: number }): void;
+  (e: "onCellBlur", args: { row: number | undefined; field: string }): void;
+}>();
+</script>
+
+<style lang="scss">
+.vc-table-row {
+  @apply tw-flex tw-w-full tw-h-14 tw-min-h-14 tw-relative;
+
+  &--odd {
+    @apply tw-bg-[--table-row-bg-odd];
+  }
+
+  &--even {
+    @apply tw-bg-[--table-row-bg-even];
+  }
+
+  &--clickable {
+    @apply hover:tw-bg-[--table-row-bg-hover] tw-cursor-pointer tw-border-solid;
+  }
+
+  &--selected {
+    @apply tw-bg-[--table-row-hover] hover:tw-bg-[--table-row-hover];
+  }
+
+  &--selection {
+    @apply hover:tw-bg-[--table-row-bg-selected] tw-bg-[--table-row-bg-selected];
+  }
+
+  &__checkbox {
+    @apply tw-w-[36px] tw-max-w-[36px] tw-min-w-[36px] tw-relative tw-flex-1 tw-flex tw-items-center tw-justify-center;
+  }
+
+  &__checkbox-content {
+    @apply tw-flex tw-justify-center tw-items-center;
+  }
+
+  &__checkbox-resizer {
+    @apply tw-w-px tw-top-0 tw-bottom-0 tw-absolute tw-right-0 tw-bg-[--table-resizer-color];
+  }
+
+  &__cell {
+    @apply tw-box-border tw-overflow-hidden tw-px-3 tw-flex-1 tw-flex tw-items-center tw-relative;
+  }
+
+  &__cell-content {
+    @apply tw-truncate tw-w-full tw-text-[color:var(--table-text-color)] tw-text-sm;
+  }
+
+  &__actions {
+    @apply tw-absolute tw-flex tw-right-0 tw-px-2.5 tw-h-full tw-bg-[--table-actions-bg];
+
+    &--hover {
+      @apply hover:tw-bg-[--table-actions-bg-hover];
+    }
+
+    &--selected {
+      @apply hover:tw-bg-[--table-actions-bg-hover-selected-item];
+    }
+  }
+
+  &__actions-content {
+    @apply tw-flex tw-flex-row tw-items-center tw-text-[color:var(--table-actions-text-color)] tw-font-normal tw-text-base tw-leading-5 tw-gap-2.5;
+  }
+
+  &__actions-item {
+    @apply tw-text-[color:var(--table-actions-icon-color)] tw-cursor-pointer tw-w-6 tw-h-6 tw-flex tw-items-center tw-justify-center hover:tw-text-[color:var(--table-actions-icon-color-hover)];
+  }
+
+  &__actions-tooltip {
+    @apply tw-not-italic tw-font-normal tw-text-base tw-leading-5 tw-text-[--table-actions-tooltip-text];
+  }
+
+  &__drag-row-bottom {
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      box-shadow: var(--table-row-drag-shadow);
+    }
+  }
+
+  &__drag-row-top {
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      box-shadow: var(--table-row-drag-shadow);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,54 @@
+<template>
+  <div
+    v-if="selectAll && showSelectionChoice"
+    class="vc-table-select-all-footer"
+  >
+    <div class="vc-table-select-all-footer__content">
+      <div>
+        {{
+          allSelected
+            ? t("COMPONENTS.ORGANISMS.VC_TABLE.ALL_SELECTED")
+            : t("COMPONENTS.ORGANISMS.VC_TABLE.CURRENT_PAGE_SELECTED")
+        }}
+        <VcButton
+          text
+          class="vc-table-select-all-footer__button"
+          @click="$emit('selectAll')"
+        >
+          {{ allSelected ? t("COMPONENTS.ORGANISMS.VC_TABLE.CANCEL") : t("COMPONENTS.ORGANISMS.VC_TABLE.SELECT_ALL") }}
+        </VcButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { VcButton } from "../../../../../../";
+
+const { t } = useI18n({ useScope: "global" });
+
+defineProps<{
+  selectAll?: boolean;
+  showSelectionChoice?: boolean;
+  allSelected?: boolean;
+}>();
+
+defineEmits<{
+  (e: "selectAll"): void;
+}>();
+</script>
+
+<style lang="scss">
+.vc-table-select-all-footer {
+  @apply tw-h-16 tw-min-h-16 tw-bg-[--table-select-all-bg] tw-w-full tw-flex;
+
+  &__content {
+    @apply tw-w-full tw-flex tw-items-center tw-justify-center;
+  }
+
+  &__button {
+    @apply tw-text-sm;
+  }
+}
+</style>