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

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

@@ -0,0 +1,658 @@
+<template>
+  <teleport to="body" :disabled="disabledTeleport">
+    <transition name="pl-dialog-plus-back">
+      <div
+        v-show="props.modelValue"
+        :id="dialogId"
+        :class="['pl-dialog-plus-overlay', props.overlayClass]"
+        @mousedown="onOverlayMouseDown"
+      >
+        <PlScrollbar
+          ref="dialogScrollRef"
+          :view-class="props.type !== 'side' ? 'pl-dialog-scroll-view' : ''"
+          :height="props.innerScroll ? 'fit-content' : '100%'"
+        >
+          <transition :name="transitionName">
+            <div
+              v-if="props.modelValue"
+              v-loading-plus="props.loading"
+              role="dialog"
+              :class="[
+                'pl-dialog-plus-container',
+                { 'with-grabber': isMobile },
+                { 'with-grabber_none': !props.closeOnOverlay },
+                { 'pl-dialog-plus-container_illustration': props.type === 'illustration' },
+                { 'pl-dialog-plus-container_side': props.type === 'side' && !isMobile },
+                { 'pl-dialog-plus-container_calendar': props.calendar },
+                props.dialogClass,
+              ]"
+              @mousedown.stop
+            >
+              <div v-if="isMobile" class="grabber-overlay" @touchstart="drag" />
+              <div
+                v-if="props.type === 'status'"
+                class="pl-dialog-plus-header pl-dialog-plus-header_status"
+                @touchstart="drag"
+              >
+                <div class="pl-dialog-plus-header_icon-block">
+                  <PlStatusIcon :status="props.status" />
+                </div>
+              </div>
+              <template v-else-if="props.type === 'illustration'">
+                <div class="pl-dialog-plus-header pl-dialog-plus-header__illustration">
+                  <slot name="header" @touchstart="drag" />
+                </div>
+              </template>
+              <div
+                v-else-if="showHeader"
+                :class="[
+                  'pl-dialog-plus-header',
+                  {
+                    'pl-dialog-plus-header_side':
+                      (props.type === 'side' && !isMobile) || props.calendar,
+                  },
+                  { 'pl-dialog-plus-header_after-disabled': $slots.additional },
+                ]"
+                @touchstart="drag"
+              >
+                <template v-if="props.showHeader">
+                  <div v-if="props.title" class="w-100 d-grid gap-1" data-testid="dialog-title">
+                    <PlTitle1 color="var(--color-text-icons-primary)">
+                      {{ props.title }}
+                    </PlTitle1>
+                    <PlCap
+                      v-if="props.subTitle"
+                      class="word-wrap-any-pre"
+                      color="var(--color-text-icons-secondary)"
+                    >
+                      {{ props.subTitle }}
+                    </PlCap>
+                  </div>
+                  <div class="pl-dialog-plus-button-container">
+                    <slot name="headerBtns" />
+                    <PlButton
+                      v-if="props.showClose"
+                      v-tap="closeModal"
+                      type="secondary"
+                      icon="Close24"
+                      icon-color="var(--color-text-icons-secondary)"
+                      size="small"
+                      data-locator="closeX"
+                      class="close-dialog"
+                    />
+                  </div>
+                </template>
+              </div>
+              <div v-if="$slots.additional" class="pl-dialog-plus-additional pb-4">
+                <slot name="additional" />
+              </div>
+              <template v-if="!isMobile">
+                <PlScrollbar
+                  v-if="props.innerScroll || props.type === 'side'"
+                  ref="dialogScrollRef"
+                  :class="[
+                    'pl-dialog-plus-content',
+                    { 'pl-dialog-plus-content_illustration': props.type === 'illustration' },
+                    { 'pl-dialog-plus-content_side': props.type === 'side' && !isMobile },
+                  ]"
+                  :style="{ 'max-height': scrollHeight }"
+                  :max-height="`${props.innerScroll ? scrollHeight : 'fit-content'}`"
+                  :view-class="scrollViewClass"
+                  offset-right="4px"
+                >
+                  <slot name="default" />
+                </PlScrollbar>
+                <div
+                  v-else
+                  :class="[
+                    'pl-dialog-plus-content pt-2 pb-3 px-6',
+                    { 'pl-dialog-plus-content_illustration': props.type === 'illustration' },
+                    { 'pb-6': !$slots.footer },
+                  ]"
+                >
+                  <slot name="default" />
+                </div>
+              </template>
+              <PlScrollbar
+                v-else
+                ref="dialogScrollRef"
+                :class="[
+                  'pl-dialog-plus-content',
+                  { 'pl-dialog-plus-content_illustration': props.type === 'illustration' },
+                ]"
+                :style="{ 'max-height': scrollHeight }"
+                :max-height="`${props.innerScroll ? scrollHeight : 'fit-content'}`"
+                offset-right="4px"
+                :view-class="scrollViewClassMobile"
+              >
+                <slot name="default" />
+              </PlScrollbar>
+              <div
+                v-if="$slots.footer"
+                :class="[
+                  'pl-dialog-plus-footer',
+                  { 'pl-dialog-plus-footer_illustration': props.type === 'illustration' },
+                  { 'pl-dialog-plus-footer_side': props.type === 'side' && !isMobile },
+                ]"
+              >
+                <slot name="footer" />
+              </div>
+            </div>
+          </transition>
+        </PlScrollbar>
+      </div>
+    </transition>
+  </teleport>
+</template>
+<script setup lang="ts">
+import { ref, watch, computed, nextTick, useSlots, onMounted } from 'vue';
+import uniqid from '@/utils/uniqId';
+import { useWindowSize } from '@vueuse/core';
+import type { TIcon } from '@/components/shared/pl-icon';
+
+const slots = useSlots();
+
+const { width: screenWidth } = useWindowSize();
+
+const isMobile = computed(() => screenWidth.value < 768);
+
+const dialogId = uniqid();
+const dialogScrollRef = ref();
+
+interface IPlDialogPlusProps {
+  modelValue: boolean;
+  beforeClose?: () => void;
+  width?: string;
+  showHeader?: boolean;
+  showClose?: boolean;
+  disabledTeleport?: boolean;
+  closeOnOverlay?: boolean;
+  innerScroll?: boolean;
+  title?: string;
+  subTitle?: string;
+  icon?: TIcon;
+  status?: 'successful' | 'info' | 'delete' | 'attention' | 'neutral';
+  type?: 'standart' | 'status' | 'illustration' | 'side';
+  loading?: boolean;
+  overlayClass?: string;
+  dialogClass?: string;
+  manualClose?: boolean;
+  calendar?: boolean;
+}
+
+const props = withDefaults(defineProps<IPlDialogPlusProps>(), {
+  modelValue: false,
+  width: '446px',
+  showHeader: true,
+  showClose: true,
+  disabledTeleport: false,
+  closeOnOverlay: true,
+  innerScroll: false,
+  type: 'standart',
+  status: 'successful',
+  icon: 'Bin40',
+  loading: false,
+  overlayClass: '',
+  dialogClass: '',
+  manualClose: false,
+  calendar: false,
+});
+
+const containerWidth = ref(props.width);
+const negativeContainerWidth = ref('');
+
+const scrollViewClass = computed(() => {
+  if (props.type === 'side') {
+    return 'p-6';
+  }
+  return 'pt-2 pb-3 px-6';
+});
+
+const scrollViewClassMobile = computed(() => {
+  if (props.calendar) {
+    return 'py-4';
+  }
+  if (slots.footer) {
+    return 'pt-2 pb-3 px-4';
+  }
+  return 'pt-2 pb-6 px-4';
+});
+
+onMounted(() => {
+  if (props.type === 'side') {
+    containerWidth.value = '518px';
+  }
+  negativeContainerWidth.value = '-' + containerWidth.value;
+});
+
+const translateYValue = ref('calc(100% + 12px)');
+const dialogTransitionDelay = ref('0.26s');
+const startDragPostion = ref(0);
+
+const transitionName = ref('');
+const scrollHeight = ref('100%');
+const sidePaddingBottom = ref('0px');
+if (slots.footer) {
+  sidePaddingBottom.value = '24px';
+} else {
+  sidePaddingBottom.value = '0px';
+}
+const calculateHeight = (): void => {
+  document.getElementById(dialogId)?.scrollTo({ top: 0 });
+  translateYValue.value = '0';
+  const header = document
+    .getElementById(dialogId)
+    ?.querySelector('.pl-dialog-plus-header')
+    ?.getBoundingClientRect().height;
+  let footer = document
+    .getElementById(dialogId)
+    ?.querySelector('.pl-dialog-plus-footer')
+    ?.getBoundingClientRect().height;
+
+  let additional =
+    document
+      .getElementById(dialogId)
+      ?.querySelector('.pl-dialog-plus-additional')
+      ?.getBoundingClientRect().height + 24;
+  additional = additional ? additional : 0;
+  footer = footer ? footer : -24;
+
+  if (dialogScrollRef.value) {
+    dialogScrollRef.value.scrollTo({ top: 0 });
+  }
+  if (isMobile.value) {
+    footer = footer === -24 ? -48 : footer;
+    scrollHeight.value = `calc(100dvh - 145px - ${header}px - ${footer}px - ${additional}px)`;
+  } else if (props.innerScroll) {
+    // footer = footer === -24 ? -24 : 64;
+    scrollHeight.value = `calc(100dvh - 200px - ${header}px - ${footer + 24}px - ${additional}px)`;
+  } else if (props.type === 'side') {
+    scrollHeight.value = `calc(100dvh - 48px - ${header}px - ${footer}px - ${additional}px)`;
+  } else {
+    scrollHeight.value = 'fit-content';
+  }
+};
+
+const calculateClassesTransition = (): void => {
+  if (!isMobile.value) {
+    if (props.type === 'side') {
+      transitionName.value = 'pl-dialog-plus-right-slide';
+    } else {
+      transitionName.value = 'pl-dialog-plus-fade';
+    }
+  } else {
+    transitionName.value = '';
+  }
+  if (props.modelValue) {
+    calculateHeight();
+  }
+};
+calculateClassesTransition();
+
+watch(
+  () => isMobile.value,
+  () => {
+    calculateClassesTransition();
+  },
+);
+
+const drag = (): void => {
+  if (!props.closeOnOverlay) {
+    return;
+  }
+
+  const moveAt = (event: TouchEvent): void => {
+    dialogTransitionDelay.value = '0s';
+    if (!startDragPostion.value) {
+      startDragPostion.value = event.changedTouches[0].pageY;
+    } else {
+      const translateValue = event.changedTouches[0].pageY - startDragPostion.value;
+      if (translateValue >= 0) {
+        translateYValue.value = `${translateValue}px`;
+      }
+    }
+  };
+  document.ontouchmove = (event): void => {
+    moveAt(event);
+    document.ontouchend = (event): void => {
+      dialogTransitionDelay.value = '0.38s';
+      document.ontouchmove = null;
+      document.ontouchend = null;
+      const translateValue = event.changedTouches[0].pageY - startDragPostion.value;
+      const isTranslateValueInCloseZone = translateValue > 80;
+      if (isTranslateValueInCloseZone) {
+        closeModal();
+      } else {
+        translateYValue.value = `0%`;
+      }
+    };
+  };
+};
+
+const dynamicDialogs = ref<Element[]>([]);
+const calculateClasses = (): void => {
+  setTimeout(
+    () => {
+      dynamicDialogs.value = [];
+      const dialog = document.querySelectorAll('.pl-dialog-plus-overlay');
+
+      dialog.forEach((item: Element) => {
+        const displayDialog = window.getComputedStyle(item).getPropertyValue('display');
+        item.classList.remove('dark-overlay');
+
+        if (displayDialog === 'block') {
+          dynamicDialogs.value.push(item);
+        }
+      });
+
+      if (dynamicDialogs.value.length) {
+        dynamicDialogs.value[0].classList.add('dark-overlay');
+        document.body.classList.add('pl-dialog-plus-overflow-hidden');
+      } else {
+        document.body.classList.remove('pl-dialog-plus-overflow-hidden');
+      }
+    },
+    props.modelValue ? 0 : 300,
+  );
+};
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (!value) {
+      translateYValue.value = 'calc(100% + 12px)';
+      dialogTransitionDelay.value = '0.380s';
+      emit('close-modal');
+    }
+
+    nextTick(() => {
+      calculateClasses();
+      if (value) {
+        calculateHeight();
+        if (dialogScrollRef.value) {
+          dialogScrollRef.value.scrollTo({ top: 0 });
+        }
+      }
+    });
+  },
+);
+
+const emit = defineEmits(['update:modelValue', 'close-modal']);
+const closeModal = (): void => {
+  if (props.beforeClose) {
+    props.beforeClose();
+  }
+  if (!props.manualClose) {
+    emit('update:modelValue', false);
+  }
+};
+const onOverlayMouseDown = (event: MouseEvent): void => {
+  if (!props.closeOnOverlay) return;
+  const target = event.target as HTMLElement;
+  const isScrollbarClick =
+    target === event.currentTarget &&
+    (event.clientX >= target.clientWidth || event.clientY >= target.clientHeight);
+  if (!isScrollbarClick) closeModal();
+};
+defineExpose({ closeModal });
+</script>
+<style lang="scss">
+@use '@/styles/media' as *;
+@use '@/styles/tokens' as *;
+
+.pl-dialog-plus-overflow-hidden {
+  overflow: hidden;
+}
+
+.pl-dialog-plus-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 25;
+  overflow: hidden auto;
+  background-color: rgb(39 39 41 / 24%);
+  transition: background-color 0.2s cubic-bezier(0, 0, 0.2, 1);
+
+  .pl-dialog-scroll-view {
+    min-height: unset !important;
+    padding: $spacing-x16 0;
+  }
+
+  .pl-dialog-plus-container {
+    position: relative;
+    z-index: 26;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-x6;
+    width: v-bind('containerWidth');
+    padding: $spacing-x6 0 v-bind('sidePaddingBottom');
+    margin: 0 auto;
+    background: var(--color-surface-card);
+    border-radius: $radius-x4;
+    box-shadow: $shadows-elevation-small;
+
+    &.pl-dialog-plus-container_illustration {
+      padding: $spacing-x4 0 $spacing-x4;
+    }
+
+    .grabber-overlay {
+      position: absolute;
+      top: -12px;
+      z-index: 2;
+      width: 100%;
+      height: 12px;
+    }
+
+    &.pl-dialog-plus-container_side {
+      position: fixed;
+      right: 0;
+      gap: 0;
+      height: 100vh;
+      padding: $spacing-x6 0 v-bind('sidePaddingBottom');
+      margin: 0;
+      border-radius: 0;
+    }
+
+    @include mq(phone-430) {
+      padding: $spacing-x4 0 v-bind('sidePaddingBottom');
+      box-shadow: none;
+
+      &.pl-dialog-plus-container_side {
+        position: fixed;
+        right: 0;
+        gap: 0;
+        height: 100vh;
+        margin: 0;
+        border-radius: 0;
+      }
+
+      &.pl-dialog-plus-container_illustration {
+        padding: $spacing-x4 0 $spacing-x6;
+      }
+
+      &.pl-dialog-plus-container_calendar {
+        gap: 0;
+      }
+    }
+
+    &.with-grabber {
+      margin-top: 12px;
+      transition: transform v-bind(dialogTransitionDelay) cubic-bezier(0, 0, 0.2, 1);
+      transform: translateY(v-bind(translateYValue));
+
+      &::after {
+        position: absolute;
+        top: -12px;
+        left: 50%;
+        width: 48px;
+        height: 12px;
+        content: '';
+        border-radius: $radius-x2;
+        transform: translateX(-50%);
+      }
+
+      &::before {
+        position: absolute;
+        top: -12px;
+        left: 50%;
+        width: 48px;
+        height: 4px;
+        content: '';
+        background: var(--color-surface-fill-2);
+        border-radius: $radius-x2;
+        transform: translateX(-50%);
+      }
+
+      &.with-grabber_none {
+        &::before {
+          display: none;
+        }
+      }
+    }
+
+    @include mq(phone-430) {
+      position: fixed;
+      bottom: 0;
+      width: 100%;
+      margin: 0;
+      border-radius: $radius-x4 $radius-x4 0 0;
+    }
+
+    .pl-dialog-plus-content {
+      display: flex;
+      flex-direction: column;
+
+      @include mq(phone-430) {
+        max-height: calc(100vh - 240px);
+      }
+    }
+
+    .pl-dialog-plus-header {
+      position: relative;
+      display: flex;
+      gap: $spacing-x6;
+      align-items: center;
+      padding: 0 $spacing-x6;
+
+      &.pl-dialog-plus-header__illustration {
+        padding: 0 $spacing-x4;
+      }
+
+      @include mq(phone-430) {
+        gap: $spacing-x4;
+        padding: 0 $spacing-x4;
+      }
+
+      .close-dialog {
+        padding: 8px 6px;
+      }
+
+      .pl-dialog-plus-button-container {
+        display: flex;
+        gap: $spacing-x4;
+        align-items: center;
+        align-self: flex-start;
+      }
+
+      &.pl-dialog-plus-header_side {
+        padding-bottom: $spacing-x4;
+
+        &::after {
+          position: absolute;
+          bottom: 0;
+          display: block;
+          width: calc(100% + 48px);
+          height: 1px;
+          margin-left: -24px;
+          content: '';
+          background-color: var(--color-border-divider);
+        }
+      }
+
+      &.pl-dialog-plus-header_after-disabled {
+        &::after {
+          display: none;
+        }
+      }
+
+      &.pl-dialog-plus-header_status {
+        display: flex;
+        justify-content: center;
+      }
+    }
+
+    .pl-dialog-plus-footer {
+      padding: 0 $spacing-x6;
+
+      @include mq(min768) {
+        &.pl-dialog-plus-footer_illustration {
+          padding-right: $spacing-x6;
+          padding-bottom: $spacing-x2;
+          padding-left: $spacing-x6;
+        }
+      }
+
+      @include mq(phone-430) {
+        padding: 0 $spacing-x4;
+
+        button {
+          width: 100%;
+        }
+      }
+
+      &.pl-dialog-plus-footer_side {
+        position: relative;
+        padding-top: $spacing-x4;
+
+        &::before {
+          position: absolute;
+          top: 0;
+          display: block;
+          width: calc(100% + 48px);
+          height: 1px;
+          margin-left: -24px;
+          content: '';
+          background-color: var(--color-border-divider);
+        }
+      }
+    }
+  }
+}
+
+.dark-overlay {
+  background-color: var(--color-background-overlay);
+}
+
+.pl-dialog-plus-back-enter-from,
+.pl-dialog-plus-back-leave-to {
+  background-color: rgb(39 39 41 / 0%);
+}
+
+.pl-dialog-plus-fade-enter-active,
+.pl-dialog-plus-fade-leave-active {
+  opacity: 1;
+  transition: opacity 0.26s cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+
+.pl-dialog-plus-fade-enter-from,
+.pl-dialog-plus-fade-leave-to {
+  opacity: 0;
+}
+
+.pl-dialog-plus-right-slide-enter-active {
+  animation: right-slide-in 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+
+.pl-dialog-plus-right-slide-leave-active {
+  animation: right-slide-in 0.3s cubic-bezier(0.65, 0.05, 0.36, 1) reverse;
+}
+
+@keyframes right-slide-in {
+  0% {
+    right: v-bind('negativeContainerWidth');
+  }
+
+  100% {
+    right: 0;
+  }
+}
+</style>

package/src/components/basic/pl-link/index.ts

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