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

package/src/components/data/pl-snackbar/renderSnackbar.ts

@@ -0,0 +1,171 @@
+import { createApp, h, ref, TransitionGroup } from 'vue';
+import PlSnackbar from './pl-snackbar.vue';
+import './snackbarAnimation.scss';
+import { useEventListener } from '@vueuse/core';
+
+import type { IProps, IPlNotification, IRenderSnackbar } from './types';
+
+let snackbarId = 0;
+const renderSnackbar = (options: IProps): IRenderSnackbar => {
+  const {
+    icon,
+    color,
+    title,
+    message,
+    button,
+    action,
+    progress,
+    blockHide,
+    longDuration = false,
+  } = options;
+
+  const snackbarContainer = document.getElementById('snackbar');
+
+  if (!snackbarContainer) {
+    const container = document.createElement('div');
+    container.id = 'snackbar';
+    document.body.appendChild(container);
+  }
+
+  const snackbar = document.createElement('div');
+  const currentId = snackbarId++;
+  const currentIdStr = `snackbar-${currentId}`;
+  snackbar.id = currentIdStr;
+  snackbar?.classList.add('slideIn-animation');
+  snackbar?.classList.add('px-md-4');
+  document.getElementById('snackbar')?.appendChild(snackbar);
+
+  let timerId: number;
+  const duration = longDuration ? 8000 : 4200;
+  let startTime = Date.now();
+
+  let pausedAt = 0;
+  let isPaused = false;
+
+  const pause = () => {
+    if (!isPaused) {
+      isPaused = true;
+      pausedAt = Date.now();
+      clearTimeout(timerId);
+    }
+  };
+
+  const resume = () => {
+    if (isPaused) {
+      const pauseDuration = Date.now() - pausedAt;
+      startTime += pauseDuration;
+      isPaused = false;
+      updateProgress();
+    }
+  };
+
+  const progressPercentage = ref(0);
+
+  const close = () => closeSnackbar(snackbar.id);
+
+  const updateProgress = () => {
+    if (isPaused) return;
+
+    const elapsed = Date.now() - startTime;
+    const transitionTime = 300;
+    const adjustedDuration = duration - transitionTime;
+    const percent = Math.max(100 - (elapsed / adjustedDuration) * 100, 0);
+    progressPercentage.value = percent;
+
+    if (percent > 0) {
+      requestAnimationFrame(updateProgress);
+    } else {
+      setTimeout(() => {
+        if (!blockHide) close();
+      }, transitionTime);
+    }
+  };
+
+  if (!blockHide) {
+    timerId = window.setTimeout(close, duration);
+
+    useEventListener(snackbar, 'mouseenter', pause);
+    useEventListener(snackbar, 'mouseleave', resume);
+  }
+
+  if (progress) updateProgress();
+
+  const app = createApp({
+    render() {
+      return h(TransitionGroup, {}, () => [
+        h(PlSnackbar, {
+          id: currentId,
+          icon,
+          color,
+          title,
+          message,
+          button,
+          action,
+          blockHide,
+          progress,
+          longDuration,
+          percentage: progressPercentage.value,
+          key: snackbar.id,
+        }),
+      ]);
+    },
+  });
+
+  app.mount(`#${currentIdStr}`);
+  snackbarId++;
+
+  return {
+    id: currentIdStr,
+    close: (): void => {
+      closeSnackbar(currentIdStr);
+    },
+  };
+};
+
+const removeSnackbar = (elem: HTMLElement): void => {
+  if (elem) {
+    elem.classList.remove('slideIn-animation');
+    elem.classList.add('fadeOut-animation');
+    useEventListener(elem, 'animationend', () => {
+      if (elem) {
+        elem.remove();
+      }
+    });
+  }
+};
+
+const closeSnackbar = (snackbarId: string): void => {
+  const snackbar = document.getElementById(snackbarId);
+  if (!snackbar) return;
+  removeSnackbar(snackbar);
+};
+
+const closeAllSnackbar = (): void => {
+  const snackbar = document.getElementById('snackbar');
+  if (!snackbar) return;
+  removeSnackbar(snackbar);
+};
+
+const Notification: IPlNotification = {
+  success: (options: IProps) =>
+    renderSnackbar({ ...options, icon: 'CircleCheck24', color: 'var(--color-text-icons-success)' }),
+  error: (options: IProps) =>
+    renderSnackbar({
+      ...options,
+      icon: 'WarningCircle24',
+      color: 'var(--color-buttons-error)',
+    }),
+  warning: (options: IProps) =>
+    renderSnackbar({
+      ...options,
+      icon: 'WarningPolygon24',
+      color: 'var(--color-text-icons-warning)',
+    }),
+  info: (options: IProps) =>
+    renderSnackbar({ ...options, icon: 'Info24', color: 'var(--color-text-icons-white)' }),
+  custom: renderSnackbar,
+  closeAll: () => {
+    closeAllSnackbar();
+  },
+};
+export default Notification;

package/src/components/data/pl-snackbar/snackbarAnimation.scss

@@ -0,0 +1,55 @@
+@use '@/styles/media' as *;
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slide-in {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  50% {
+    transform: translateX(18%);
+  }
+
+  75% {
+    transform: translateX(-3%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.slideIn-animation {
+  animation: slide-in 0.482s ease;
+}
+
+.fadeOut-animation {
+  animation: fade-out 0.2s ease forwards;
+}
+
+#snackbar {
+  position: fixed;
+  bottom: 24px;
+  left: 24px;
+  z-index: 90;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 12px;
+  width: 100%;
+  max-width: 380px;
+
+  @include mq(phone-430) {
+    bottom: 16px;
+    left: 0;
+    max-width: 100%;
+  }
+}

package/src/components/data/pl-snackbar/types.ts

@@ -0,0 +1,30 @@
+import { TIcon } from '@/components/shared/pl-icon';
+import type { Ref } from 'vue';
+
+export interface IProps {
+  id?: number;
+  icon?: TIcon;
+  color?: string;
+  title: string;
+  button?: string;
+  action?: any;
+  message?: string;
+  blockHide?: boolean;
+  longDuration?: boolean;
+  progress?: boolean;
+  percentage?: number | Ref<number>;
+}
+
+export interface IRenderSnackbar {
+  id: string;
+  close: () => void;
+}
+
+export interface IPlNotification {
+  success: (options: IProps) => IRenderSnackbar;
+  error: (options: IProps) => IRenderSnackbar;
+  warning: (options: IProps) => IRenderSnackbar;
+  info: (options: IProps) => IRenderSnackbar;
+  custom: (options: IProps) => IRenderSnackbar;
+  closeAll: () => void;
+}

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

@@ -0,0 +1,302 @@
+<template>
+  <nav class="pagination-wrapper">
+    <div
+      v-if="props.showPageSize && props.options?.length && width >= 768"
+      class="d-flex align-items-center gap-2"
+    >
+      <PlBody2>На странице:</PlBody2>
+      <PlSelectPlus
+        v-model="pageSize"
+        teleport
+        :options="formattedOptions"
+        width="90px"
+        @change="changePageSize"
+      />
+    </div>
+    <div class="pagination">
+      <!--      left arrow-->
+      <PlButton
+        type="empty"
+        :disabled="currentPage === 1"
+        icon="ChevronLeft24"
+        icon-color="var(--color-text-icons-secondary)"
+        @click="prevPage"
+      />
+      <!--      fist page-->
+
+      <PlBody2 :class="['pagination-page', { active: currentPage === 1 }]" @click="goToPage(1)">
+        1
+      </PlBody2>
+      <!--      ellipsis with double arrow back-->
+      <div v-if="showLeftEllipsis">
+        <span
+          class="pagination-page"
+          @mouseover="showLeftDoubleArrow = true"
+          @mouseleave="showLeftDoubleArrow = false"
+          @click="scrollBack"
+        >
+          <span v-if="!showLeftDoubleArrow">...</span>
+          <span v-else>
+            <PlIcon :icon="ChevronDoubleLeft20" color="var(--color-text-icons-interactive)" />
+          </span>
+        </span>
+      </div>
+      <!--      pages-->
+      <PlBody2
+        v-for="page in visiblePages"
+        :key="page"
+        :class="['pagination-page', { active: currentPage === page }]"
+        :style="getPageStyle(page)"
+        @click="goToPage(page)"
+      >
+        {{ page }}
+        <!--        ellipsis with double arrow forward -->
+      </PlBody2>
+      <div v-if="showRightEllipsis">
+        <span
+          class="pagination-page"
+          @mouseover="showDoubleArrow = true"
+          @mouseleave="showDoubleArrow = false"
+          @click="scrollForward"
+        >
+          <span v-if="!showDoubleArrow">...</span>
+          <span v-else>
+            <PlIcon :icon="ChevronDoubleRight20" color="var(--color-text-icons-interactive)" />
+          </span>
+        </span>
+      </div>
+      <!--      last page -->
+      <PlBody2
+        v-if="totalPages > 1"
+        :class="['pagination-page', { active: currentPage === totalPages }]"
+        :style="getPageStyle(totalPages)"
+        @click="goToPage(totalPages)"
+      >
+        {{ totalPages }}
+      </PlBody2>
+      <!--       right arrow-->
+      <PlButton
+        type="empty"
+        icon="ChevronRight24"
+        icon-color="var(--color-text-icons-secondary)"
+        :disabled="currentPage === totalPages || currentPage > totalPages"
+        @click="nextPage"
+      />
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, ref, watch, onMounted } from 'vue';
+import { useWindowSize } from '@vueuse/core';
+import { ChevronDoubleLeft20, ChevronDoubleRight20 } from '@/components/shared/pl-icon/assets-map';
+
+interface IProps {
+  total: number;
+  showPageSize?: boolean;
+  options?: Array<number>;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  showPageSize: true,
+});
+
+const currentPage = defineModel('pageNumber', { default: 1 });
+const pageSize = defineModel('pageSize', { default: 20 });
+
+onMounted(() => {
+  if (props.options && props.options.length) pageSize.value = props.options[0];
+});
+
+const totalPages = computed(() => Math.ceil(props.total / pageSize.value));
+const showDoubleArrow = ref(false);
+const showLeftDoubleArrow = ref(false);
+
+const { width } = useWindowSize();
+
+const emit = defineEmits(['pageChange', 'pageSizeChange', 'change']);
+
+const defaultOptions = [20, 50, 100, 1000];
+const formattedOptions = computed(() =>
+  (props.options || defaultOptions).map((option) => ({
+    label: option.toString(),
+    value: option,
+  })),
+);
+
+watch(
+  () => props.total,
+  (val) => {
+    if (!val) {
+      goToPage(1, true);
+    }
+  },
+);
+
+const visiblePages = computed(() => {
+  const pages = [];
+  let maxVisiblePages = 4;
+
+  if (showLeftEllipsis.value && showRightEllipsis.value) {
+    maxVisiblePages = 3;
+  }
+
+  if (totalPages.value <= 7) {
+    for (let i = 2; i < totalPages.value; i++) {
+      pages.push(i);
+    }
+  } else {
+    let startPage: number;
+    let endPage: number;
+
+    if (currentPage.value >= totalPages.value - 3) {
+      startPage = totalPages.value - 4;
+      endPage = totalPages.value - 1;
+    } else if (maxVisiblePages === 3) {
+      startPage = Math.max(2, currentPage.value - 1);
+      endPage = Math.min(totalPages.value - 1, currentPage.value + 1);
+    } else {
+      startPage = Math.max(2, currentPage.value - 2);
+      endPage = startPage + maxVisiblePages - 1;
+
+      if (startPage <= 2) {
+        startPage = 2;
+        endPage = startPage + maxVisiblePages - 1;
+      }
+
+      if (endPage >= totalPages.value) {
+        endPage = totalPages.value - 1;
+        startPage = endPage - maxVisiblePages + 1;
+      }
+    }
+    for (let i = startPage; i <= endPage && i < totalPages.value; i++) {
+      pages.push(i);
+    }
+  }
+  // refactor this
+  return pages;
+});
+
+const showLeftEllipsis = computed(() => totalPages.value > 7 && currentPage.value > 4);
+const showRightEllipsis = computed(
+  () => totalPages.value > 7 && currentPage.value < totalPages.value - 3,
+);
+
+const goToPage = (page: number, changeSize = false): void => {
+  if (page >= 1 && page <= totalPages.value) {
+    currentPage.value = page;
+    if (!changeSize) {
+      emit('pageChange', page);
+      emit('change', { page, size: pageSize.value }, false);
+    }
+  } else if (page >= totalPages.value) {
+    currentPage.value = 1;
+  }
+};
+
+const changePageSize = (): void => {
+  goToPage(1, true);
+  emit('pageSizeChange', pageSize.value);
+  emit('change', { page: 1, size: pageSize.value }, true);
+};
+
+const prevPage = (): void => {
+  if (currentPage.value > 1) {
+    goToPage(currentPage.value - 1);
+  }
+};
+
+const nextPage = (): void => {
+  if (currentPage.value < totalPages.value) {
+    goToPage(currentPage.value + 1);
+  }
+};
+
+const scrollForward = (): void => {
+  const newPage = currentPage.value + 5;
+  if (newPage >= totalPages.value) {
+    goToPage(totalPages.value);
+  } else {
+    goToPage(newPage);
+  }
+
+  showDoubleArrow.value = false;
+};
+
+const scrollBack = (): void => {
+  const newPage = currentPage.value - 5;
+  if (newPage < 1) {
+    goToPage(1);
+  } else {
+    goToPage(newPage);
+  }
+
+  showLeftDoubleArrow.value = false;
+};
+
+const getPageStyle = (page: number): CSSProperties => {
+  const length = page.toString().length;
+  return {
+    width: length >= 5 ? '50px' : length === 4 ? '44px' : '40px',
+  };
+};
+</script>
+
+<style lang="scss">
+@use '@/styles/tokens' as *;
+@use '@/styles/media' as *;
+
+.pagination-wrapper {
+  display: flex;
+  gap: $spacing-x4;
+  align-items: center;
+  justify-content: end;
+  padding: $spacing-x8 $spacing-x10 0;
+
+  @include mq(phone-430) {
+    justify-content: center;
+  }
+
+  @include mq(min768) {
+    .pl-button:not(:disabled):hover svg {
+      color: var(--color-text-icons-interactive);
+    }
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+
+    svg {
+      padding: $spacing-x1;
+    }
+
+    .pagination-page {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 36px;
+      cursor: pointer;
+      user-select: none;
+      background-color: transparent;
+      border: none;
+      transition: color 0.2s;
+    }
+
+    .pagination-page.active {
+      color: var(--color-text-icons-interactive);
+      background: var(--color-system-surface-interactive);
+      border-radius: $spacing-x2;
+    }
+
+    @include mq(min768) {
+      .pagination-page:not(.active):hover {
+        background: var(--color-surface-fill-1);
+        border-radius: $spacing-x2;
+      }
+    }
+  }
+}
+</style>

package/src/components/data/pl-table-plus/components/Pagination/index.ts

@@ -0,0 +1,5 @@
+import pagination from './PlPagination.vue';
+import { withInstallFunction } from '@/install-function';
+
+export const PlPagination = withInstallFunction(pagination, 'PlPagination');
+export default PlPagination;

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="table-row">
+    <div class="d-grid flex-grow-1 py-md-table-4 row-gap-md-table-6">
+      <div v-if="width < 1024 && props.mobileTop" class="d-flex align-content-start gap-4">
+        <pl-skeleton v-if="props.isSelectable" width="20px" height="20px" variant="button" />
+        <div class="flex-grow-1 d-flex align-content-end">
+          <pl-skeleton variant="p" width="70%" />
+        </div>
+      </div>
+      <div
+        v-if="props.headers.length"
+        class="d-grid gap-md-table-1 row-gap-md-table-1"
+        :style="props.tableStyle"
+      >
+        <div v-if="props.isSelectable && width >= 1024" class="table-cell pr-10">
+          <pl-skeleton width="20px" height="20px" variant="button" />
+        </div>
+        <div v-for="(header, index) in props.headers" :key="index" class="table-cell">
+          <div v-if="width < 1024 && header?.label" style="width: 140px">
+            <pl-skeleton variant="p" width="70%" />
+          </div>
+          <div class="flex-grow-1">
+            <pl-skeleton
+              variant="p"
+              :width="`${
+                width >= 1024 && header?.maxWidthContent ? header.maxWidthContent : '70%'
+              }`"
+              :class="{ 'ml-auto': width < 1024 }"
+            />
+          </div>
+        </div>
+      </div>
+      <div v-if="width < 1024 && props.mobileBottom">
+        <pl-skeleton variant="p" width="70%" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import { useWindowSize } from '@vueuse/core';
+import PlSkeleton from '@/components/basic/pl-skeleton/pl-skeleton.vue';
+
+interface IProps {
+  isSelectable: boolean;
+  tableStyle: Record<string, string> | null;
+  headers: {
+    label: string;
+    key: string;
+    maxWidthContent?: string;
+  }[];
+  mobileTop?: any;
+  mobileBottom?: any;
+}
+
+const { width } = useWindowSize();
+const props = withDefaults(defineProps<IProps>(), {
+  headers: () => [],
+  isSelectable: false,
+  tableStyle: () => ({}),
+  mobileTop: false,
+  mobileBottom: false,
+});
+</script>

package/src/components/data/pl-table-plus/index.ts

@@ -0,0 +1,10 @@
+import TablePlus from './pl-table-plus.vue';
+import type { App } from 'vue';
+
+const PlTablePlus = {
+  install(app: App): void {
+    app.component('PlTablePlus', TablePlus);
+  },
+};
+
+export default PlTablePlus;