@factoringplus/pl-components-pack-v3 2.0.0-pre-optimized-19-icons → 2.0.0-pre-optimized-21-icons

package/src/components/data/pl-table-plus/pl-table-plus.vue

@@ -0,0 +1,685 @@
+<template>
+  <div id="lk-table" ref="wrapper" data-testid="table-main" role="table">
+    <!--		table header-->
+    <div v-if="width >= ScreenSizes.TABLET">
+      <!--		header skeleton-->
+      <div v-if="isFirstLoading" class="px-4">
+        <row-mask :is-selectable="!!isSelectable" :headers="headers" :table-style="tableStyle" />
+      </div>
+      <!-- 		header row-->
+      <div v-else class="px-4">
+        <PlScrollbar
+          ref="tableHeaderScroll"
+          view-class="d-grid gap-1 pl-table-plus-scrollbar-view__inherit-max-width"
+          hide-scroll-thumb
+          @scroll="scrollHeaderHandler"
+        >
+          <div data-testid="table-headers" class="table-row" role="rowgroup">
+            <div class="d-grid flex-grow-1" :style="tableStyle" role="row">
+              <div v-if="isSelectable" class="table-cell pr-10" role="columnheader">
+                <PlCheckboxPlus
+                  v-model="headerCheckboxValue"
+                  :disabled="isLoading || !notDisabledRows.length"
+                  :is-indeterminate="!!isIndeterminateHeaderCheckbox"
+                  size="small"
+                  @mousedown="headerCheckboxClickHandler"
+                />
+              </div>
+              <div
+                v-for="(header, index) in headers"
+                :key="index + 'headerCell'"
+                class="table-cell"
+                :class="[{ 'table-cell_align-right': header.alignRight || props.alignRight }]"
+                role="columnheader"
+              >
+                <PlBody2 class="tertiary-text-color">
+                  {{ header.label }}
+                </PlBody2>
+              </div>
+            </div>
+          </div>
+        </PlScrollbar>
+      </div>
+      <div class="divider" />
+    </div>
+    <!--		rows skeleton-->
+    <div
+      v-if="isLoading"
+      class="table-body rows-skeleton"
+      :class="[{ 'table-body__fixed': wrapHeight !== '100%' }]"
+    >
+      <div v-for="(i, idx) in loadingRowsCount" :key="i + 'skeletonRow'">
+        <row-mask
+          :is-selectable="!!isSelectable"
+          :headers="headers"
+          :table-style="tableStyle"
+          :mobile-bottom="slots.mobileBottom"
+          :mobile-top="slots.mobileTop"
+        />
+        <div v-if="width < ScreenSizes.TABLET && idx < loadingRowsCount - 1" class="py-4">
+          <div class="divider" />
+        </div>
+      </div>
+    </div>
+    <!--		noData-->
+    <div v-show="!isLoading && slots.noDataContainer && !rows.length" class="no-data-container">
+      <slot name="noDataContainer" />
+    </div>
+    <!--		rows-->
+    <PlScrollbar
+      v-show="!isLoading && rows.length"
+      ref="tableBodyScroll"
+      v-pl-infinite-scroll="infiniteScroll"
+      :infinite-scroll-distance="5"
+      data-testid="table-body"
+      class="table-body mt-md-table-0"
+      role="rowgroup"
+      :max-height="bodyHeight"
+      :wrap-class="`pt-1 pt-md-table-0 ${showXThumb ? 'pb-3' : ''}`"
+      view-class="d-grid gap-1 pl-table-plus-scrollbar-view__inherit-max-width"
+      always-show-x-thumb
+      @scroll="scrollBodyHandler"
+    >
+      <div
+        v-for="(row, idx) in rows"
+        :id="customId + idx"
+        :key="row?.[uniqKey] || idx + 'tableRow'"
+        v-tap="(e) => rowClickHandler(e, row)"
+        :class="[
+          { 'with-hover': withHover && width >= ScreenSizes.TABLET && !border },
+          { 'with-border': border && width >= ScreenSizes.TABLET },
+        ]"
+        data-testid="table-row"
+        class="table-row"
+        role="row"
+      >
+        <div
+          v-if="!virtual || visibleItems[customId + idx]"
+          class="d-grid flex-grow-1 row-gap-md-table-6 py-md-table-4"
+        >
+          <div
+            v-if="width < ScreenSizes.TABLET && slots.mobileTop"
+            class="d-flex align-content-start gap-4"
+            role="cell"
+          >
+            <PlCheckboxPlus
+              v-if="isSelectable"
+              v-model="localSelectedRows[row?.[uniqKey] || idx]"
+              :disabled="row?.isDisabledSelect"
+              size="small"
+            />
+            <slot name="mobileTop" :row="row" />
+          </div>
+          <div
+            v-if="headers.length"
+            class="d-grid gap-md-table-1 row-gap-md-table-1"
+            :style="tableStyle"
+          >
+            <div
+              v-if="isSelectable && width >= ScreenSizes.TABLET"
+              class="table-cell pr-10 align-self-center"
+              role="cell"
+            >
+              <PlCheckboxPlus
+                v-model="localSelectedRows[row?.[uniqKey] || idx]"
+                :disabled="row?.isDisabledSelect"
+                size="small"
+              />
+            </div>
+            <div
+              v-for="(header, index) in headers"
+              :key="index + 'tableCell'"
+              data-testid="table-cell"
+              class="table-cell"
+              :class="[{ 'table-cell_align-right': header.alignRight || props.alignRight }]"
+              role="cell"
+            >
+              <PlBody2
+                v-if="width < ScreenSizes.TABLET && header?.label"
+                class="tertiary-text-color white-space-nowrap mobile-label"
+              >
+                {{ header.label }}
+              </PlBody2>
+              <div
+                :style="`max-width: ${
+                  width >= ScreenSizes.TABLET ? header.maxWidthContent : '100%'
+                }`"
+              >
+                <slot :name="header.key" :row="row">
+                  {{ row[header.label] }}
+                </slot>
+              </div>
+            </div>
+          </div>
+          <div v-if="width < ScreenSizes.TABLET && slots.mobileBottom" role="cell">
+            <slot name="mobileBottom" :row="row" />
+          </div>
+        </div>
+        <div v-else style="height: 70px" />
+        <div v-if="width < ScreenSizes.TABLET && idx < rows.length - 1" class="prevent-click py-4">
+          <div class="divider" />
+        </div>
+      </div>
+    </PlScrollbar>
+    <PlPagination
+      v-if="props.pagination"
+      v-model:page-size="pageSize"
+      v-model:page-number="currentPage"
+      :total="props.total"
+      :show-page-size="props.showPageSize"
+      :options="pageSizeOptions"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed, ref, watch, useSlots, onMounted, toRefs, nextTick } from 'vue';
+import { useWindowSize } from '@vueuse/core';
+import RowMask from './components/row-mask.vue';
+import PlBody2 from '@/components/shared/pl-text/components/pl-body2.vue';
+import PlCheckboxPlus from '@/components/form/pl-checkbox-plus/pl-checkbox-plus.vue';
+import isEqual from '@/utils/isEqual';
+import { getSizeWithUnits } from '@/utils/getSizeWithUnits';
+import uniqId from '@/utils/uniqId';
+import { ScreenSizes } from '@/utils/screenSizes';
+
+interface IProps {
+  headers: {
+    label: string;
+    key: string;
+    width?: number;
+    minWidth?: number;
+    maxWidthContent?: string;
+  }[];
+  hideHeadersOnMobile?: string[];
+  rows: Record<string, string | number>[];
+  isLoading?: boolean;
+  withHover?: boolean;
+  isSelectable?: boolean;
+  selectedRows?: Record<string, string | number>[];
+  uniqKey?: string | '';
+  defaultWrapperWidth?: number | null;
+  pagination?: boolean;
+  pageSizeOptions?: Array<number>;
+  total?: number;
+  bodyHeight?: number | string;
+  alignRight?: boolean;
+  border?: boolean;
+  showPageSize?: boolean;
+  virtualSize?: number;
+  loadingSize?: number;
+  minLoadingRows?: number;
+}
+
+const emit = defineEmits([
+  'infiniteScroll',
+  'update:selectedRows',
+  'rowClick',
+  'headerCheckboxClicked',
+  'pageChange',
+  'pageSizeChange',
+  'change',
+  'scroll',
+]);
+
+const props = withDefaults(defineProps<IProps>(), {
+  headers: () => [],
+  rows: () => [],
+  isLoading: false,
+  isSelectable: false,
+  selectedRows: () => [],
+  uniqKey: '',
+  hideHeadersOnMobile: () => [],
+  defaultWrapperWidth: null,
+  pagination: false,
+  bodyHeight: '100%',
+  alignRight: false,
+  pageSizeOptions: () => [],
+  virtualSize: 100,
+  loadingSize: 20,
+  showPageSize: true,
+  minLoadingRows: 5,
+});
+
+const wrapHeight = computed(() => getSizeWithUnits(props.bodyHeight));
+
+const { width } = useWindowSize();
+const { rows } = toRefs(props);
+const slots = useSlots();
+const localSelectedRows = ref<Record<string | number, any>>({});
+const wrapper = ref();
+const isLoading = computed(() => props.isLoading);
+const isFirstLoading = ref(true);
+const currentPage = defineModel('pageNumber', { default: 1 });
+const pageSize = defineModel('pageSize', { default: 20 });
+
+onMounted(() => {
+  if (props.pageSizeOptions && props.pageSizeOptions.length)
+    pageSize.value = props.pageSizeOptions[0];
+});
+
+const virtual = computed(() => pageSize.value >= props.virtualSize);
+const tableBodyScroll = ref();
+const showXThumb = computed(() => tableBodyScroll?.value?.showXThumb);
+
+const loadingRowsCount = computed(() => {
+  if (!props.isLoading) return props.rows.length;
+  return Math.max(props.rows.length, props.minLoadingRows);
+});
+
+const scrollHeaderHandler = (e, data): void => {
+  tableBodyScroll.value.setScrollLeft(data.left);
+  emit('scroll', e);
+};
+
+const tableHeaderScroll = ref();
+const scrollBodyHandler = (e, data): void => {
+  if (width.value >= ScreenSizes.TABLET) {
+    tableHeaderScroll.value.setScrollLeft(data.left);
+    emit('scroll', e);
+  }
+};
+
+const selectedRows = computed({
+  get: () => props.selectedRows,
+  set: (val) => emit('update:selectedRows', val),
+});
+
+const rowsMap = computed(() => {
+  const map: Record<string | number, any> = {};
+  props.rows.forEach((row, idx) => {
+    const key: string | number = props.uniqKey ? row[props.uniqKey] : idx;
+    map[key] = row;
+  });
+  return map;
+});
+
+const visibleItems = ref([]);
+const customId = uniqId();
+const addClassList = (index: number) => {
+  const elClassList = document.getElementById(customId + index)?.classList;
+  if (!elClassList) return;
+  if (!elClassList.contains('visible')) {
+    visibleItems.value[customId + index] = true;
+    elClassList.add('visible');
+  }
+};
+const observer = new IntersectionObserver(
+  (rows) => {
+    rows.forEach((entry) => {
+      if (entry.isIntersecting && !entry.target.classList.contains('visible')) {
+        visibleItems.value[entry.target.id] = true;
+        entry.target.classList.add('visible');
+        const currentIdx = Number(entry.target.id.replace(customId, ''));
+
+        for (let index = currentIdx; index >= currentIdx - props.loadingSize; index--) {
+          addClassList(index);
+        }
+
+        for (let index = currentIdx; index < currentIdx + props.loadingSize; index++) {
+          addClassList(index);
+        }
+      }
+    });
+  },
+  {
+    root: tableBodyScroll.value,
+    rootMargin: '400px',
+    threshold: 0.01,
+  },
+);
+
+const update = () => {
+  if (!virtual.value) return;
+  visibleItems.value = [];
+  observer.disconnect();
+
+  props.rows.forEach((_, index) => {
+    const el = document.getElementById(customId + index);
+    if (el) {
+      visibleItems.value[customId + index] = document
+        .getElementById(customId + index)
+        .classList.contains('visible');
+      observer.observe(el);
+    }
+  });
+};
+watch(
+  () => props.rows.length,
+  () => {
+    nextTick(() => {
+      update();
+    });
+  },
+);
+
+const handleChange = (filter: { page: number; size: number }, changeSize = false) => {
+  tableBodyScroll.value.setScrollTop(0);
+  currentPage.value = filter.page;
+  pageSize.value = filter.size;
+
+  if (!changeSize) {
+    emit('pageChange', currentPage.value);
+  }
+  if (changeSize) {
+    emit('pageSizeChange', pageSize.value, currentPage.value);
+  }
+  emit('change', filter);
+};
+
+const resetSelectedAllHandler = (): void => {
+  localSelectedRows.value = {};
+};
+
+const selectAllRowsHandler = (): void => {
+  props.rows.forEach((row, idx) => {
+    if (row?.isDisabledSelect) return;
+    const key: any = props.uniqKey ? row[props.uniqKey] : idx;
+    localSelectedRows.value[key] = true;
+  });
+};
+
+const headerCheckboxValue = ref(false);
+
+const notDisabledRows = computed(() => props.rows.filter((row) => !row?.isDisabledSelect));
+
+const isIndeterminateHeaderCheckbox = computed(
+  () => Object.values(selectedRows.value).map((row) => row).length,
+);
+
+const headers = computed(() => {
+  if (width.value < ScreenSizes.TABLET) {
+    return props.headers.filter((h) => !props.hideHeadersOnMobile.includes(h.key));
+  } else {
+    return props.headers;
+  }
+});
+
+const wrapperWidth = ref(1);
+
+const tableStyle = computed(() => {
+  let gridTemplateColumns = props.isSelectable ? '60px' : '';
+
+  headers.value.forEach((header) => {
+    let widthColumn = '1fr';
+    let minWidthColumn = '0';
+
+    if (header?.width && typeof header.width === 'number') {
+      widthColumn = `${(100 / wrapperWidth.value) * header.width}%`;
+      minWidthColumn = widthColumn;
+    } else if (header?.width && typeof header.width === 'string') {
+      widthColumn = header?.width;
+      minWidthColumn = widthColumn;
+    }
+
+    if (header?.minWidth && typeof header.minWidth === 'number') {
+      minWidthColumn = `${(100 / wrapperWidth.value) * header.minWidth}%`;
+    } else if (header?.minWidth && typeof header.minWidth === 'string') {
+      minWidthColumn = header.minWidth;
+    }
+
+    gridTemplateColumns += ` minmax(${minWidthColumn}, ${widthColumn})`;
+  });
+  return width.value < ScreenSizes.TABLET
+    ? {}
+    : {
+        'grid-template-columns': gridTemplateColumns,
+      };
+});
+
+const infiniteScroll = (): void => {
+  if (isLoading.value || !rows.value.length) return;
+  emit('infiniteScroll');
+};
+
+const selectAllRows = (): void => {
+  isCanRunCheckboxWatcher.value = true;
+  headerCheckboxValue.value = true;
+};
+
+const resetSelectedRows = (): void => {
+  resetSelectedAllHandler();
+};
+
+const isCanRunCheckboxWatcher = ref(false);
+const headerCheckboxClickHandler = (): void => {
+  isCanRunCheckboxWatcher.value = true;
+};
+
+const rowClickHandler = (e: Event, row: any): void => {
+  if ((e.target as HTMLElement).closest?.('.prevent-click')) return;
+  emit('rowClick', row);
+};
+
+watch(headerCheckboxValue, (value) => {
+  if (isCanRunCheckboxWatcher.value) {
+    if (value) selectAllRowsHandler();
+    else resetSelectedAllHandler();
+    emit('headerCheckboxClicked', value);
+  }
+  isCanRunCheckboxWatcher.value = false;
+});
+
+watch(
+  localSelectedRows,
+  () => {
+    setTimeout(() => {
+      const _selectedRows = [];
+      for (const key in localSelectedRows.value) {
+        if (localSelectedRows.value[key]) {
+          _selectedRows.push(rowsMap.value[key]);
+        }
+      }
+      headerCheckboxValue.value =
+        !!notDisabledRows.value.length && _selectedRows.length === notDisabledRows.value.length;
+      if (isEqual(selectedRows.value, _selectedRows)) return;
+      selectedRows.value = _selectedRows;
+    });
+  },
+  { deep: true },
+);
+
+watch(
+  selectedRows,
+  (val, oldValue) => {
+    if (isEqual(val, oldValue)) return;
+    const _selectedRows = {};
+    val.forEach((row, idx) => {
+      const key: any = props.uniqKey ? row[props.uniqKey] : idx;
+      _selectedRows[key] = true;
+    });
+    localSelectedRows.value = _selectedRows;
+  },
+  { deep: true, immediate: true },
+);
+
+watch(
+  isLoading,
+  (value) => {
+    if (!isFirstLoading.value) return;
+    if (!value) {
+      isFirstLoading.value = false;
+    }
+  },
+  { immediate: true },
+);
+
+const setWrapperWidth = (): void => {
+  const { width: thisWrapperWidth } = wrapper.value.getBoundingClientRect();
+  const width = props.defaultWrapperWidth || thisWrapperWidth;
+  wrapperWidth.value = width - 32;
+};
+
+watch(width, (): void => {
+  setWrapperWidth();
+});
+
+onMounted(() => {
+  setWrapperWidth();
+});
+
+defineExpose({ resetSelectedRows, selectAllRows });
+</script>
+
+<style lang="scss">
+@use '@/styles/media' as *;
+
+#lk-table {
+  overflow: hidden;
+
+  .divider {
+    border-bottom: 1px solid var(--color-surface-fill-2);
+  }
+
+  .table-row {
+    display: flex;
+    transition: background-color 0.25s ease;
+
+    @include mq(mobile-table) {
+      flex-direction: column;
+      padding: 0;
+    }
+
+    .table-cell {
+      align-content: center;
+      align-self: center;
+      height: 100%;
+      padding: 16px;
+      word-break: break-word;
+
+      &.table-cell_align-right {
+        @include mq(desktop-table) {
+          justify-content: flex-end;
+          text-align: right;
+        }
+      }
+
+      &:first-child {
+        padding-left: 24px;
+        border-radius: 12px 0 0 12px;
+      }
+
+      &:last-child {
+        padding-right: 24px;
+        border-radius: 0 12px 12px 0;
+      }
+
+      &:first-child,
+      &:last-child {
+        @include mq(mobile-table) {
+          padding: 0;
+        }
+      }
+
+      @include mq(mobile-table) {
+        display: flex;
+        gap: 16px;
+        justify-content: space-between;
+        padding: 0;
+      }
+
+      .mobile-label {
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  .table-body {
+    padding: 0 16px;
+
+    &.table-body__fixed {
+      height: v-bind('wrapHeight');
+      overflow: hidden;
+    }
+
+    @include mq(mobile-table) {
+      padding: 0;
+    }
+
+    .table-row {
+      &.with-hover:hover {
+        .table-cell {
+          cursor: pointer;
+          background-color: var(--color-surface-opacity-1);
+        }
+      }
+
+      &.with-border {
+        .table-cell {
+          position: relative;
+          border-radius: 0;
+
+          &::after {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 1px;
+            content: '';
+            background-color: var(--color-border-divider);
+          }
+
+          &:first-child {
+            &::after {
+              left: 24px;
+            }
+          }
+
+          &:last-child {
+            &::after {
+              right: 24px;
+            }
+          }
+        }
+      }
+
+      &:last-child {
+        &.with-border {
+          .table-cell {
+            &::after {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .tertiary-text-color {
+    color: var(--color-text-icons-tertiary);
+  }
+
+  .align-self-center {
+    align-self: center;
+  }
+
+  .no-data-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    align-items: center;
+    height: 242px;
+    margin-top: 24px;
+
+    @include mq(mobile-table) {
+      gap: 8px;
+      height: 172px;
+      margin-top: 0;
+    }
+
+    svg {
+      max-width: 100%;
+      height: 178px;
+      object-fit: contain;
+
+      @include mq(mobile-table) {
+        height: 124px;
+      }
+    }
+  }
+
+  #pl-scrollbar .pl-scrollbar__view {
+    min-height: inherit;
+  }
+}
+</style>

package/src/components/data/pl-tabs/components/pl-tab-counter.vue

@@ -0,0 +1,34 @@
+<template>
+  <div :class="['pl-counter__container', { active: props.active }]">
+    <PlBody2 class="pl-counter__inner">
+      <slot />
+    </PlBody2>
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+<style lang="scss">
+@use '@/styles/tokens' as *;
+
+.pl-counter__container {
+  padding: 0 $spacing-x2;
+  background: var(--color-surface-fill-1);
+  border-radius: $spacing-x6;
+
+  &.active {
+    background: var(--color-buttons-alternative);
+  }
+
+  .pl-counter__inner {
+    display: flex;
+    justify-content: center;
+    min-width: 16px;
+  }
+}
+</style>