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

package/src/components/basic/pl-tooltip-plus/pl-tooltip-plus.vue

@@ -0,0 +1,381 @@
+<template>
+  <div>
+    <div
+      v-if="isTriggerHover"
+      ref="tooltipRef"
+      class="d-grid"
+      @mouseenter="showTooltip"
+      @mouseleave="hideTooltip"
+    >
+      <slot />
+    </div>
+    <div v-else ref="tooltipRef" v-tap="showTooltip" class="d-grid">
+      <slot />
+    </div>
+    <teleport to="body">
+      <div
+        v-if="tooltipVisible && !disabled && slotNotEmpty($slots['tooltip-text'])"
+        data-testid="tooltipPlus"
+        :style="tooltipStyle"
+        :class="['tooltip-container', { 'tooltip-closeing': tooltipClosing }, props.customClass]"
+      >
+        <div ref="tooltipContentRef" class="word-wrap-any-pre typography-caption-caption-medium">
+          <slot name="tooltip-text" />
+        </div>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  onUpdated,
+  nextTick,
+  watch,
+  onMounted,
+  onUnmounted,
+  watchEffect,
+} from 'vue';
+import type { Slot } from 'vue';
+import { useEventListener, onClickOutside, useWindowSize } from '@vueuse/core';
+
+// триггер, дисейбл и класс pre-wrap
+interface IProps {
+  placement?:
+    | 'top-right'
+    | 'top'
+    | 'top-left'
+    | 'right-top'
+    | 'right'
+    | 'right-bottom'
+    | 'bottom-left'
+    | 'bottom'
+    | 'bottom-right'
+    | 'left-bottom'
+    | 'left'
+    | 'left-top';
+
+  width?: string;
+  delay?: boolean | undefined;
+  truncated?: boolean;
+  trigger?: 'click' | 'hover';
+  disabled?: boolean;
+  customClass?: string;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  placement: 'top',
+  delay: undefined,
+  truncated: false,
+  trigger: 'hover',
+  disabled: false,
+  customClass: '',
+});
+
+const tooltipVisible = ref(false);
+const tooltipClosing = ref(false);
+const tooltipRef = ref();
+const tooltipContentRef = ref();
+const tooltipHeight = ref(0);
+const tooltipWidth = ref(0);
+
+const isTriggerHover = computed(() => props.trigger === 'hover' && windowWidth.value >= 768);
+const isTriggerClick = computed(() => props.trigger === 'click' || windowWidth.value < 768);
+
+const isTruncated = ref(false);
+
+const truncatedHandler = async (): Promise<void> => {
+  await nextTick();
+  const element = tooltipRef.value;
+  if (!element) return;
+
+  // Клонируем содержимое tooltipRef
+  const clone = element.cloneNode(true) as HTMLElement;
+  clone.style.visibility = 'hidden'; // Скрываем клонированный элемент
+  clone.style.position = 'absolute'; // Позиционирование, чтобы не влиять на остальной контент
+  clone.style.whiteSpace = 'nowrap'; // Убеждаемся, что текст в одну строку
+  clone.classList.remove('text-truncate'); // Удаляем класс, который мог усекать текст
+
+  // Прикрепляем клонированный элемент к элементу tooltipRef для измерения
+  tooltipRef.value.appendChild(clone);
+  const isTextTruncated = clone.offsetWidth > element.offsetWidth;
+  isTruncated.value = isTextTruncated;
+
+  // Удаляем клонированный элемент после измерения
+  tooltipRef.value.removeChild(clone);
+};
+
+// отслеживаем изменения размера окна
+const { width: windowWidth } = useWindowSize();
+// отслеживаем появление элемента через его ширину
+const currentTooltipWidth = ref(0);
+onMounted(() => {
+  const observer = new ResizeObserver((entries) => {
+    entries.forEach((entry) => {
+      currentTooltipWidth.value = entry.contentRect.width;
+    });
+  });
+  observer.observe(tooltipRef.value);
+  onUnmounted(() => {
+    observer.disconnect();
+  });
+});
+watch(
+  [windowWidth, currentTooltipWidth],
+  () => {
+    if (props.truncated) {
+      truncatedHandler();
+    }
+  },
+  { immediate: true },
+);
+
+const isHovering = ref(false);
+const showTooltip = (): void => {
+  isHovering.value = true;
+  if (!tooltipVisible.value && (!props.truncated || isTruncated.value)) {
+    if (isTriggerHover.value) {
+      setTimeout(() => {
+        if (isHovering.value) {
+          tooltipVisible.value = true;
+        }
+      }, 400);
+    } else {
+      tooltipVisible.value = true;
+    }
+  }
+};
+const hideTooltip = (): void => {
+  // Фиксируем, что tooltip в процессе закрытия
+  isHovering.value = false;
+  tooltipClosing.value = true;
+  setTimeout(() => {
+    // Дожидаемся завершения анимации
+    if (!isHovering.value || isTriggerClick.value) {
+      // Для правильной работы, если вернули мышку в tooltip до завершения анимации
+      tooltipVisible.value = false;
+    }
+    tooltipClosing.value = false;
+  }, 200);
+};
+// Функция определяет, пустой ли слот
+const slotNotEmpty = (mySlot: Slot): boolean =>
+  (!!mySlot && mySlot().length > 0 && !!mySlot()[0].children) || !!mySlot()[0].props;
+
+const calculatePosition = (): {
+  top: number | string;
+  left: number | string;
+  borderRadius?: string;
+  width?: string;
+} => {
+  if (!tooltipContentRef.value) return { top: 0, left: 0 };
+  const elem = tooltipRef.value.parentElement.getBoundingClientRect();
+  const tooltipRectHeight = tooltipHeight.value;
+  const tooltipRectWidth = tooltipWidth.value;
+  const parentElemWidth = tooltipRef.value.parentElement.offsetWidth;
+  const parentElemHeight = tooltipRef.value.parentElement.offsetHeight;
+
+  let top = '';
+  let left = '';
+  let borderRadius = '';
+
+  if (tooltipRectHeight > 40) {
+    borderRadius = '12px';
+  }
+
+  const spaceLeft = elem.left;
+  const spaceRight = window.innerWidth - (elem.left + tooltipRectWidth);
+  const clientWidth = document.documentElement.clientWidth;
+
+  const shouldMoveLeft = spaceLeft - tooltipRectWidth / 2 + parentElemWidth / 2 <= 10;
+  const shouldMoveRight = spaceRight <= 10;
+  const isTooltipOutOfScreen =
+    window.innerWidth - (elem.left + tooltipRectWidth / 2 + parentElemWidth / 2) <= 10;
+
+  const leftPosition = elem.left - tooltipRectWidth - 4;
+
+  switch (props.placement) {
+    case 'top-right':
+      left = shouldMoveRight
+        ? `${clientWidth - tooltipRectWidth - 10}px`
+        : spaceLeft < tooltipRectWidth - parentElemWidth
+          ? '10px'
+          : (left = `${elem.left + parentElemWidth - tooltipRectWidth + 16}px`);
+
+      top = `${elem.top - tooltipRectHeight - 4}px`;
+      break;
+    case 'top':
+      left = isTooltipOutOfScreen
+        ? `${clientWidth - tooltipRectWidth - 10}px`
+        : shouldMoveLeft
+          ? '10px'
+          : `${elem.left + parentElemWidth / 2 - tooltipRectWidth / 2}px`;
+      top = `${elem.top - tooltipRectHeight - 4}px`;
+      break;
+    case 'top-left':
+      left = shouldMoveRight
+        ? `${clientWidth - tooltipRectWidth - 10}px`
+        : shouldMoveLeft
+          ? '10px'
+          : `${elem.right - parentElemWidth - 16}px`;
+
+      top = `${elem.top - tooltipRectHeight - 4}px`;
+      break;
+    case 'bottom-right':
+      left =
+        window.innerWidth - elem.left < 10
+          ? `${clientWidth - tooltipRectWidth - 10}px`
+          : shouldMoveLeft
+            ? '10px'
+            : `${elem.left + parentElemWidth - tooltipRectWidth + 16}px`;
+      top = `${elem.top + parentElemHeight + 4}px`;
+      break;
+    case 'bottom':
+      left = isTooltipOutOfScreen
+        ? `${clientWidth - tooltipRectWidth - 10}px`
+        : shouldMoveLeft
+          ? '10px'
+          : `${elem.left + parentElemWidth / 2 - tooltipRectWidth / 2}px`;
+      top = `${elem.top + parentElemHeight + 4}px`;
+      break;
+    case 'bottom-left':
+      left =
+        window.innerWidth - elem.left < 10
+          ? `${clientWidth - tooltipRectWidth - 10}px`
+          : shouldMoveLeft
+            ? '10px'
+            : `${elem.right - parentElemWidth - 16}px`;
+      top = `${elem.top + parentElemHeight + 4}px`;
+      break;
+    case 'right-top':
+      left = shouldMoveRight
+        ? `${elem.left - tooltipRectWidth - 4}px`
+        : `${elem.left + parentElemWidth + 4}px`;
+      top = `${elem.top}px`;
+      break;
+    case 'right':
+      left = shouldMoveRight
+        ? `${elem.left - tooltipRectWidth - 4}px`
+        : `${elem.left + parentElemWidth + 4}px`;
+      top = `${elem.top + parentElemHeight / 2 - tooltipRectHeight / 2}px`;
+      break;
+    case 'right-bottom':
+      left = shouldMoveRight
+        ? `${elem.left - tooltipRectWidth - 4}px`
+        : `${elem.left + parentElemWidth + 4}px`;
+      top = `${elem.top + parentElemHeight - tooltipRectHeight}px`;
+      break;
+    case 'left-top':
+      left =
+        leftPosition < 0 && spaceLeft >= leftPosition
+          ? `${elem.left + parentElemWidth + 4}px`
+          : `${elem.left - tooltipRectWidth - 4}px`;
+      top = `${elem.top}px`;
+      break;
+    case 'left':
+      left =
+        leftPosition < 0 && spaceLeft >= leftPosition
+          ? `${elem.left + parentElemWidth + 4}px`
+          : `${elem.left - tooltipRectWidth - 4}px`;
+      top = `${elem.top + parentElemHeight / 2 - tooltipRectHeight / 2}px`;
+      break;
+    case 'left-bottom':
+      left =
+        leftPosition < 0 && spaceLeft >= leftPosition
+          ? `${elem.left + parentElemWidth + 4}px`
+          : `${elem.left - tooltipRectWidth - 4}px`;
+      top = `${elem.top + parentElemHeight - tooltipRectHeight}px`;
+      break;
+  }
+
+  return { top, left, borderRadius, width: props.width };
+};
+
+const tooltipStyle = computed(() => {
+  return calculatePosition();
+});
+
+onUpdated(() => {
+  if (tooltipContentRef.value) {
+    tooltipHeight.value = tooltipContentRef.value.parentElement.offsetHeight;
+    tooltipWidth.value = tooltipContentRef.value.parentElement.offsetWidth;
+  }
+});
+
+watchEffect((onWatcherCleanup) => {
+  if (!tooltipVisible.value) return;
+  const stop = useEventListener(window, 'scroll', hideTooltip);
+  onWatcherCleanup(stop);
+});
+
+const handleTouchOutside = (event: Event) => {
+  if (windowWidth.value > 768) return;
+  const target = event.target as HTMLElement;
+
+  if (tooltipRef.value && !tooltipRef.value.contains(target)) {
+    hideTooltip();
+  }
+};
+
+useEventListener(document, 'touchstart', handleTouchOutside, { capture: true });
+
+onClickOutside(
+  tooltipRef,
+  () => {
+    hideTooltip();
+  },
+  { ignore: [tooltipContentRef] },
+);
+</script>
+
+<style lang="scss">
+@use '@/styles/tokens' as *;
+@use '@/styles/media' as *;
+
+.tooltip-container {
+  position: fixed;
+  z-index: 25;
+  max-width: 470px;
+  padding: $spacing-x3;
+  color: var(--color-text-icons-white);
+  word-wrap: break-word;
+  white-space: normal;
+  background-color: var(--color-background-dark);
+  border-radius: $radius-x2;
+  opacity: 0;
+  animation: tooltip-in 0.2s ease forwards;
+
+  @include mq(phone-430) {
+    max-width: calc(100dvw - 32px);
+  }
+
+  &.tooltip-closeing {
+    // Стиль анимации закрытия
+    animation: tooltip-out 0.2s ease;
+  }
+}
+
+@keyframes tooltip-in {
+  // Анимации открытия
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes tooltip-out {
+  // Анимации закрытия
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+</style>

package/src/components/data/pl-banner/index.ts

@@ -0,0 +1,26 @@
+import Banner from './pl-banner.vue';
+import { withInstallFunction } from '@/install-function';
+
+import type { TBannerProps, ICustomColors } from './types';
+
+export const PlBanner = withInstallFunction(Banner, 'PlBanner');
+export default PlBanner;
+export type { TBannerProps, ICustomColors };
+declare module 'vue' {
+  export interface GlobalComponents {
+    /**
+     * Свойства баннера.
+     *
+     * @property type - Тип баннера: определяет стиль отображения. Может быть:
+     * 'info' | 'interactive' | 'success' | 'warning' | 'critical' | 'custom'
+     * @property title - Заголовок баннера
+     * @property description - Описание или дополнительный текст баннера
+     * @property buttonText - Текст кнопки действия
+     * @property icon - Иконка, отображаемая в баннере
+     * @property width - Ширина баннера (CSS-значение, например '100%', '400px')
+     * @property closeButton - Показывать ли кнопку закрытия (крестик)
+     * @property customColors - Пользовательские цвета для баннера (используется, если тип 'custom')
+     */
+    PlBanner: import('vue').DefineComponent<TBannerProps>;
+  }
+}

package/src/components/data/pl-banner/pl-banner.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="pl-banner">
+    <div v-if="props.icon" class="pl-banner_icon-container">
+      <PlIcon :icon="props.icon" :color="iconColor" />
+    </div>
+    <div
+      :class="[
+        'pl-banner_text-button-container',
+        { 'pl-banner_text-button-container__icon': props.icon },
+      ]"
+    >
+      <div class="pl-banner_text-container">
+        <PlSub1 v-if="props.title" :color="textTitleColor">
+          {{ props.title }}
+        </PlSub1>
+        <PlSystemRegular v-if="props.title && props.description" :color="textDescriptionColor">
+          {{ props.description }}
+        </PlSystemRegular>
+        <PlSystem v-else-if="props.description" :color="textDescriptionColor">
+          {{ props.description }}
+        </PlSystem>
+      </div>
+      <button v-if="props.buttonText" class="pl-banner_button">
+        <PlBtn3 v-tap="() => emit('buttonClicked')">
+          {{ props.buttonText }}
+        </PlBtn3>
+      </button>
+    </div>
+    <div class="close-button-container">
+      <PlButton
+        v-if="props.closeButton"
+        v-tap="() => emit('close')"
+        :icon="Close20"
+        type="empty"
+        size="small"
+        icon-color="var(--color-text-icons-tertiary)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { TBannerProps } from './types';
+import PlSystemRegular from '@/components/shared/pl-text/components/pl-system-regular.vue';
+import { Close20 } from '@/components/shared/pl-icon/assets-map';
+
+const props = withDefaults(defineProps<TBannerProps>(), {
+  width: '',
+  icon: '',
+  buttonText: '',
+  title: '',
+  description: '',
+  type: 'info',
+  closeButton: false,
+});
+defineOptions({
+  name: 'PlBanner',
+});
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'buttonClicked'): void;
+}>();
+
+const iconColor = computed(() => {
+  switch (props.type) {
+    case 'info':
+      return 'var(--color-text-icons-primary)';
+    case 'interactive':
+      return 'var(--color-text-icons-interactive)';
+    case 'success':
+      return 'var(--color-text-icons-success)';
+    case 'warning':
+      return 'var(--color-text-icons-warning)';
+    case 'critical':
+      return 'var(--color-text-icons-error)';
+    case 'custom':
+      return props.customColors?.icon ?? 'var(--color-text-icons-primary)';
+    default:
+      return 'var(--color-text-icons-primary)';
+  }
+});
+
+const textButtonColor = computed(() => {
+  switch (props.type) {
+    case 'info':
+      return 'var(--color-text-icons-primary)';
+    case 'interactive':
+      return 'var(--color-text-icons-interactive)';
+    case 'success':
+      return 'var(--color-text-icons-success)';
+    case 'warning':
+      return 'var(--color-text-icons-warning)';
+    case 'critical':
+      return 'var(--color-text-icons-error)';
+    case 'custom':
+      return props.customColors?.textButton ?? 'var(--color-text-icons-primary)';
+    default:
+      return 'var(--color-text-icons-primary)';
+  }
+});
+
+const textDescriptionColor = computed(() => {
+  switch (props.type) {
+    case 'custom':
+      return props.customColors?.description ?? 'var(--color-text-icons-primary)';
+    default:
+      return 'var(--color-text-icons-primary)';
+  }
+});
+
+const textTitleColor = computed(() => {
+  switch (props.type) {
+    case 'custom':
+      return props.customColors?.title ?? 'var(--color-text-icons-primary)';
+    default:
+      return 'var(--color-text-icons-primary)';
+  }
+});
+
+const backgroundButtonColor = computed(() => {
+  switch (props.type) {
+    case 'info':
+      return 'var(--color-surface-opacity-1)';
+    case 'interactive':
+      return 'var(--color-system-surface-interactive)';
+    case 'success':
+      return 'var(--color-system-surface-success)';
+    case 'warning':
+      return 'var(--color-system-surface-warning)';
+    case 'critical':
+      return 'var(--color-system-surface-error)';
+    case 'custom':
+      return props.customColors?.backgroundButton ?? 'var(--color-surface-opacity-1)';
+    default:
+      return 'var(--color-surface-opacity-1)';
+  }
+});
+
+const backgroundBorderColor = computed(() => {
+  switch (props.type) {
+    case 'info':
+      return 'var(--color-surface-opacity-1)';
+    case 'interactive':
+      return 'var(--color-system-surface-interactive)';
+    case 'success':
+      return 'var(--color-system-surface-success)';
+    case 'warning':
+      return 'var(--color-system-surface-warning)';
+    case 'critical':
+      return 'var(--color-system-surface-error)';
+    case 'custom':
+      return props.customColors?.borderButton ?? 'transparent';
+    default:
+      return 'var(--color-surface-opacity-1)';
+  }
+});
+
+const backgroundBannerColor = computed(() => {
+  switch (props.type) {
+    case 'info':
+      return 'var(--color-surface-opacity-1)';
+    case 'interactive':
+      return 'var(--color-system-surface-interactive)';
+    case 'success':
+      return 'var(--color-system-surface-success)';
+    case 'warning':
+      return 'var(--color-system-surface-warning)';
+    case 'critical':
+      return 'var(--color-system-surface-error)';
+    case 'custom':
+      return props.customColors?.backgroundBanner ?? 'var(--color-surface-opacity-1)';
+    default:
+      return 'var(--color-surface-opacity-1)';
+  }
+});
+</script>
+
+<style lang="scss">
+@use '@/styles/tokens' as *;
+
+$padding-6: 6px;
+
+.pl-banner {
+  display: flex;
+  gap: $spacing-x2;
+  padding: $spacing-x4;
+  border-radius: $radius-x3;
+  width: v-bind('width');
+  background: v-bind('backgroundBannerColor');
+
+  & .close-button-container {
+    min-width: 20px;
+  }
+
+  & .pl-banner_icon-container {
+    padding: $padding-6;
+    border-radius: 100px;
+    background: var(--color-surface-card);
+    height: fit-content;
+  }
+
+  & .pl-banner_text-button-container {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-x3;
+    flex: 1;
+
+    &.pl-banner_text-button-container__icon {
+      padding-top: $padding-6;
+    }
+    & .pl-banner_text-container {
+      display: flex;
+      flex-direction: column;
+      gap: $spacing-x1;
+    }
+    & .pl-banner_button {
+      width: fit-content;
+      padding: calc($spacing-x2 - 1px) calc($spacing-x3 - 1px);
+      border-radius: $radius-x2;
+      border: 1px solid v-bind('backgroundBorderColor');
+      background: v-bind('backgroundButtonColor');
+      color: v-bind('textButtonColor');
+    }
+  }
+}
+</style>

package/src/components/data/pl-banner/types/index.ts

@@ -0,0 +1,72 @@
+import type { TIcon } from '@/components/shared/pl-icon';
+
+/**
+ * Интерфейс для задания пользовательских цветов различных элементов UI.
+ */
+export declare interface ICustomColors {
+  /**
+   * Цвет фона баннера
+   */
+  backgroundBanner?: string;
+  /**
+   * Цвет фона кнопки
+   */
+  backgroundButton?: string;
+  /**
+   * Цвет обводки кнопки
+   */
+  borderButton?: string;
+  /**
+   * Цвет текста кнопки
+   */
+  textButton?: string;
+  /**
+   * Цвет иконки
+   */
+  icon?: string;
+
+  /**
+   * Цвет описания
+   */
+  description?: string;
+
+  /**
+   * Цвет заголовка
+   */
+  title?: string;
+}
+
+export declare interface TBannerProps {
+  /**
+   * Тип баннера: определяет стиль отображения
+   */
+  type?: 'info' | 'interactive' | 'success' | 'warning' | 'critical' | 'custom';
+  /**
+   * Заголовок баннера
+   */
+  title?: string;
+  /**
+   * Описание или дополнительный текст баннера
+   */
+  description?: string;
+  /**
+   * Текст кнопки действия
+   */
+  buttonText?: string;
+  /**
+   * Иконка, отображаемая в баннере
+   */
+  icon?: TIcon;
+  /**
+   * Ширина баннера (CSS-значение, например '100%', '400px')
+   */
+  width?: string;
+  /**
+   * Показывать ли кнопку закрытия (крестик)
+   */
+  closeButton?: boolean;
+  /**
+   * Пользовательские цвета для баннера (используется, если тип 'custom')
+   */
+  customColors?: ICustomColors;
+}