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

package/src/components/shared/pl-option/pl-option.vue

@@ -1,215 +0,0 @@
-<template>
-  <div :class="['pl-option__container', optionClasses]">
-    <div v-if="props.leftIcon" class="pl-option__left-icon-container">
-      <PlIcon :icon="props.leftIcon" />
-    </div>
-    <div class="pl-option__text-container">
-      <PlBody2
-        :class="['pl-option__text-item', { 'pl-option__text-item_account': props.summ !== null }]"
-        :data-testid="props.summ !== null ? 'accountType' : 'optionTitle'"
-      >
-        <PlMarkText :model-value="props.label" :search-value="props.searchValue" />
-      </PlBody2>
-      <PlCap
-        v-if="props.description && props.summ !== null"
-        class="pl-option__text-description"
-        data-testid="accountNum"
-      >
-        {{ formatAccount(props.description) }}
-      </PlCap>
-      <PlCap
-        v-else-if="props.description"
-        class="pl-option__text-description"
-        data-testid="optionDescription"
-      >
-        <PlMarkText
-          :model-value="props.description"
-          :search-value="!props.disableMarkerBottom ? props.searchValue : ''"
-        />
-      </PlCap>
-    </div>
-    <div v-if="props.rightIcon || props.summ !== null" class="pl-option__right-icon-container">
-      <PlBody3 v-if="props.summ !== null" class="pl-option__summ" data-testid="accountSumm">
-        {{ formatCurrency(props.summ) }}
-      </PlBody3>
-      <PlIcon v-if="props.rightIcon" :icon="props.rightIcon" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import formatCurrency from '@/utils/formatCurrency';
-import formatAccount from '@/utils/formatAccount';
-import PlIcon from '@/components/shared/pl-icon/pl-icon.vue';
-import PlMarkText from '@/components/shared/pl-mark-text/pl-mark-text.vue';
-
-const props = defineProps({
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  leftIcon: {
-    type: String,
-    default: '',
-  },
-  leftIconColor: {
-    type: String,
-    default: 'var(--color-text-icons-tertiary)',
-  },
-  rightIcon: {
-    type: String,
-    default: '',
-  },
-  rightIconColor: {
-    type: String,
-    default: 'var(--color-text-icons-secondary)',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-  descriptionColor: {
-    type: String,
-    default: 'var(--color-text-icons-secondary)',
-  },
-  summ: {
-    type: Number,
-    default: null,
-  },
-  active: {
-    type: Boolean,
-    default: false,
-  },
-  width: {
-    type: String,
-    default: '100%',
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  searchValue: {
-    type: String,
-    default: '',
-  },
-  disableMarkerBottom: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const optionClasses = computed(() => ({
-  disabled: props.disabled,
-  active: props.active,
-}));
-</script>
-
-<style lang="scss">
-@use '@/styles/tokens' as *;
-@use '@/styles/customBootstrap' as *;
-@use '@/styles/media' as *;
-
-.pl-option__container {
-  display: flex;
-  gap: $spacing-x2;
-  align-items: center;
-  width: v-bind(width);
-  height: fit-content;
-  padding: $spacing-x2;
-  cursor: pointer;
-  background: var(--color-surface-card);
-  border-radius: $radius-x2;
-  transition: background 0.2s;
-
-  @include mq(min768) {
-    &:hover {
-      background: var(--color-surface-fill-1);
-    }
-  }
-
-  .pl-option__left-icon-container {
-    display: flex;
-    align-items: center;
-    align-self: flex-start;
-    height: 24px;
-
-    svg {
-      color: v-bind(leftIconColor);
-    }
-  }
-
-  .pl-option__right-icon-container {
-    display: flex;
-    align-items: center;
-    height: 24px;
-
-    svg {
-      color: v-bind(rightIconColor);
-    }
-  }
-
-  .pl-option__text-container {
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-x1;
-    align-items: flex-start;
-    width: 100%;
-
-    @include text-truncate;
-
-    .pl-option__text-item {
-      width: 100%;
-      color: var(--color-text-icons-primary);
-
-      @include text-truncate;
-    }
-
-    .pl-option__text-item_account {
-      color: var(--color-text-icons-secondary);
-    }
-
-    .pl-option__text-description {
-      display: -webkit-box;
-      overflow: hidden;
-      color: v-bind(descriptionColor);
-      text-overflow: ellipsis;
-      white-space: pre-line;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-    }
-  }
-}
-
-.pl-option__container.disabled {
-  cursor: not-allowed;
-
-  @include mq(min768) {
-    &:hover {
-      background: var(--color-surface-card);
-    }
-  }
-
-  .pl-option__text-container {
-    .pl-option__text-item {
-      color: var(--color-text-icons-tertiary);
-    }
-
-    .pl-option__text-description {
-      color: var(--color-text-icons-tertiary);
-    }
-  }
-
-  .pl-option__summ {
-    color: var(--color-text-icons-tertiary);
-  }
-}
-
-.pl-option__summ {
-  color: var(--color-text-icons-primary);
-}
-
-.pl-option__container.active {
-  background: var(--color-surface-fill-2);
-}
-</style>

package/src/components/shared/pl-status-icon/assets/Ellipse.svg

@@ -1,3 +0,0 @@
-<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="StatusIcon" d="M64 32C64 57.6 57.6 64 32 64C6.4 64 0 57.6 0 32C0 6.4 6.4 0 32 0C57.6 0 64 6.4 64 32Z"/>
-</svg>

package/src/components/shared/pl-status-icon/index.ts

@@ -1,29 +0,0 @@
-import StatusIcon from './pl-status-icon.vue';
-import { withInstallFunction } from '@/install-function';
-
-import type { TStatusIconProps } from './types';
-
-export const PlStatusIcon = withInstallFunction(StatusIcon, 'PlStatusIcon');
-export default PlStatusIcon;
-export type { TStatusIconProps };
-
-declare module 'vue' {
-  export interface GlobalComponents {
-    /**
-     * Базовые свойства для компонента StatusIcon.
-     *
-     * @property {('successful' | 'attention' | 'delete' | 'info' | 'neutral')} [status] - Вариант статуса эллипса. Определяет стиль в зависимости от состояния.
-     *
-     * Свойства для кастомного статуса.
-     *
-     * @property {'custom'} status - Кастомный статус.
-     * @property {{ icon: TIcon, colorIcon: string, colorIconOverlay: string }} customColors - Объект с настройками иконки и цветовыми значениями для кастомного статуса.
-     * @property {TIcon} customColors.icon - Иконка для кастомного статуса.
-     * @property {string} customColors.colorIcon - Цвет иконки для кастомного статуса.
-     * @property {string} customColors.colorIconOverlay - Цвет наложения для иконки в кастомном статусе.
-     *
-     * Итоговый тип: либо базовый статус (с необязательными полями), либо кастомный (с обязательными).
-     */
-    PlStatusIcon: import('vue').DefineComponent<TStatusIconProps>;
-  }
-}

package/src/components/shared/pl-status-icon/pl-status-icon.vue

@@ -1,89 +0,0 @@
-<template>
-  <div class="pl-status-icon-container">
-    <component :is="Ellipse" class="pl-status-icon_icon-overlay" />
-    <PlIcon :icon="statusIcon" :color="colorIcon" class="pl-status-icon_icon" />
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import Ellipse from './assets/Ellipse.svg';
-import { TStatusIconProps } from './types';
-import { TIcon } from '../pl-icon';
-import PlIcon from '../pl-icon/pl-icon.vue';
-import { Bin40, CheckCircle40, WarningCircle40 } from '../pl-icon/assets-map';
-
-const props = withDefaults(defineProps<TStatusIconProps>(), {
-  status: 'neutral',
-});
-
-const colorIcon = ref('');
-const colorIconOverlay = ref('');
-const statusIcon = ref<TIcon>('');
-
-const handleStatus = (status: TStatusIconProps['status']) => {
-  switch (status) {
-    case 'successful':
-      colorIcon.value = 'var(--color-text-icons-success)';
-      colorIconOverlay.value = 'var(--color-system-surface-success)';
-      statusIcon.value = CheckCircle40;
-      break;
-    case 'attention':
-      colorIcon.value = 'var(--color-text-icons-warning)';
-      colorIconOverlay.value = 'var(--color-system-surface-warning)';
-      statusIcon.value = WarningCircle40;
-      break;
-    case 'delete':
-      colorIcon.value = 'var(--color-text-icons-error)';
-      colorIconOverlay.value = 'var(--color-system-surface-error)';
-      statusIcon.value = Bin40;
-      break;
-    case 'info':
-      colorIcon.value = 'var(--color-text-icons-interactive)';
-      colorIconOverlay.value = 'var(--color-system-surface-interactive)';
-      statusIcon.value = CheckCircle40;
-      break;
-    case 'neutral':
-      colorIcon.value = 'var(--color-text-icons-primary)';
-      colorIconOverlay.value = 'var(--color-surface-opacity-1)';
-      statusIcon.value = WarningCircle40;
-      break;
-    case 'custom':
-      colorIcon.value = props.customColors.colorIcon;
-      colorIconOverlay.value = props.customColors.colorIconOverlay;
-      statusIcon.value = props.customColors.icon;
-      break;
-    default:
-      break;
-  }
-};
-
-handleStatus(props.status);
-
-watch(
-  () => props.status,
-  (value) => {
-    handleStatus(value);
-  },
-);
-</script>
-<style lang="scss">
-.pl-status-icon-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 64px;
-  height: 64px;
-
-  .pl-status-icon_icon-overlay {
-    position: absolute;
-
-    path {
-      fill: v-bind('colorIconOverlay');
-    }
-  }
-
-  .pl-status-icon_icon {
-    z-index: 1;
-  }
-}
-</style>

package/src/components/shared/pl-status-icon/types/index.ts

@@ -1,46 +0,0 @@
-import { TIcon } from '../../pl-icon';
-
-type TStatusIconStatuses = 'successful' | 'attention' | 'delete' | 'info' | 'neutral' | 'custom';
-
-/**
- * Базовые свойства для компонента StatusIcon.
- *
- * @property {('successful' | 'attention' | 'delete' | 'info' | 'neutral')} [status] - Вариант статуса эллипса. Определяет стиль в зависимости от состояния.
- */
-export interface TStatusIconBaseProps {
-  status: Exclude<TStatusIconStatuses, 'custom'>;
-  customColors?: never;
-}
-
-/**
- * Объект с настройками иконки и цветовыми значениями для кастомного статуса.
- *
- * @property {TIcon} customColors.icon - Иконка для кастомного статуса.
- * @property {string} customColors.colorIcon - Цвет иконки для кастомного статуса.
- * @property {string} customColors.colorIconOverlay - Цвет наложения для иконки в кастомном статусе.
- */
-
-export interface TStatusIconCustomColors {
-  icon: TIcon;
-  colorIcon: string;
-  colorIconOverlay: string;
-}
-
-/**
- * Свойства для кастомного статуса.
- *
- * @property {'custom'} status - Кастомный статус.
- * @property {{ icon: TIcon, colorIcon: string, colorIconOverlay: string }} customColors - Объект с настройками иконки и цветовыми значениями для кастомного статуса.
- * @property {TIcon} customColors.icon - Иконка для кастомного статуса.
- * @property {string} customColors.colorIcon - Цвет иконки для кастомного статуса.
- * @property {string} customColors.colorIconOverlay - Цвет наложения для иконки в кастомном статусе.
- */
-export interface TStatusIconCustomProps {
-  status: 'custom';
-  customColors: TStatusIconCustomColors;
-}
-
-/**
- * Итоговый тип: либо базовый статус (с необязательными полями), либо кастомный (с обязательными).
- */
-export type TStatusIconProps = TStatusIconBaseProps | TStatusIconCustomProps;

package/src/components/shared/pl-tab-pane/index.ts

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

package/src/components/shared/pl-tab-pane/pl-tab-pane.vue

@@ -1,14 +0,0 @@
-<template>
-  <slot />
-</template>
-<script setup lang="ts">
-import type { ITabPaneProps } from './types';
-withDefaults(defineProps<ITabPaneProps>(), {
-  label: '',
-  disabled: false,
-  icon: '',
-  counter: null,
-  name: '',
-  badge: false,
-});
-</script>

package/src/components/shared/pl-tab-pane/types/index.ts

@@ -1,9 +0,0 @@
-import type { TIcon } from '@/components/shared/pl-icon';
-export interface ITabPaneProps {
-  label?: string;
-  disabled?: boolean;
-  icon?: TIcon;
-  counter?: number | null;
-  name?: string;
-  badge?: boolean;
-}

package/src/components/shared/pl-tags-chips/pl-tags-chips.vue

@@ -1,30 +0,0 @@
-<template>
-  <PlCap
-    :class="['pl-tags-chips-container', { 'pl-tags-chips-container__disabled': props.disabled }]"
-  >
-    <slot />
-  </PlCap>
-</template>
-<script setup lang="ts">
-import PlCap from '@/components/shared/pl-text/components/pl-cap.vue';
-
-interface ITagsChipsProps {
-  disabled?: boolean;
-}
-
-const props = withDefaults(defineProps<ITagsChipsProps>(), {
-  disabled: false,
-});
-</script>
-<style lang="scss">
-.pl-tags-chips-container {
-  padding: 5px 12px;
-  color: var(--color-text-icons-primary);
-  background: var(--color-buttons-secondary);
-  border-radius: 6px;
-
-  &.pl-tags-chips-container__disabled {
-    color: var(--color-text-icons-tertiary);
-  }
-}
-</style>

package/src/components/shared/pl-text/components/pl-body1.vue

@@ -1,13 +0,0 @@
-<template>
-  <span
-    class="typography-body-b1-regular pl-color-text-icons-primary"
-    :style="{ color: props.color }"
-    ><slot
-  /></span>
-</template>
-
-<script setup lang="ts">
-import { ITextProps } from '../types';
-
-const props = defineProps<ITextProps>();
-</script>

package/src/components/shared/pl-text/components/pl-body2.vue

@@ -1,13 +0,0 @@
-<template>
-  <span
-    class="typography-body-b2-medium pl-color-text-icons-primary"
-    :style="{ color: props.color }"
-    ><slot
-  /></span>
-</template>
-
-<script setup lang="ts">
-import { ITextProps } from '../types';
-
-const props = defineProps<ITextProps>();
-</script>

package/src/components/shared/pl-text/components/pl-body3.vue

@@ -1,13 +0,0 @@
-<template>
-  <span
-    class="typography-body-b3-semi-bold pl-color-text-icons-primary"
-    :style="{ color: props.color }"
-    ><slot
-  /></span>
-</template>
-
-<script setup lang="ts">
-import { ITextProps } from '../types';
-
-const props = defineProps<ITextProps>();
-</script>

package/src/components/shared/pl-text/components/pl-bodyu.vue

@@ -1,13 +0,0 @@
-<template>
-  <span
-    class="typography-body-underline pl-color-text-icons-primary"
-    :style="{ color: props.color }"
-    ><slot
-  /></span>
-</template>
-
-<script setup lang="ts">
-import { ITextProps } from '../types';
-
-const props = defineProps<ITextProps>();
-</script>

package/src/components/shared/pl-text/components/pl-btn1.vue

@@ -1,13 +0,0 @@
-<template>
-  <span
-    class="typography-button-button-1 pl-color-text-icons-primary"
-    :style="{ color: props.color }"
-    ><slot
-  /></span>
-</template>
-
-<script setup lang="ts">
-import { ITextProps } from '../types';
-
-const props = defineProps<ITextProps>();
-</script>

package/src/components/shared/pl-text/components/pl-btn2.vue

@@ -1,13 +0,0 @@
-<template>
-  <span
-    class="typography-button-button-2 pl-color-text-icons-primary"
-    :style="{ color: props.color }"
-    ><slot
-  /></span>
-</template>
-
-<script setup lang="ts">
-import { ITextProps } from '../types';
-
-const props = defineProps<ITextProps>();
-</script>

package/src/components/shared/pl-text/components/pl-btn3.vue

@@ -1,13 +0,0 @@
-<template>
-  <span
-    class="typography-button-button-3 pl-color-text-icons-primary"
-    :style="{ color: props.color }"
-    ><slot
-  /></span>
-</template>
-
-<script setup lang="ts">
-import { ITextProps } from '../types';
-
-const props = defineProps<ITextProps>();
-</script>

package/src/components/shared/pl-text/components/pl-cap.vue

@@ -1,13 +0,0 @@
-<template>
-  <span
-    class="typography-caption-caption-medium pl-color-text-icons-primary"
-    :style="{ color: props.color }"
-    ><slot
-  /></span>
-</template>
-
-<script setup lang="ts">
-import { ITextProps } from '../types';
-
-const props = defineProps<ITextProps>();
-</script>

package/src/components/shared/pl-text/components/pl-h1.vue

@@ -1,14 +0,0 @@
-<template>
-  <h1
-    class="typography-headline-h1-semi-bold pl-color-text-icons-primary"
-    :style="{ color: props.color }"
-  >
-    <slot />
-  </h1>
-</template>
-
-<script setup lang="ts">
-import { ITextProps } from '../types';
-
-const props = defineProps<ITextProps>();
-</script>

package/src/components/shared/pl-text/components/pl-h2.vue

@@ -1,14 +0,0 @@
-<template>
-  <h2
-    class="typography-headline-h2-semi-bold pl-color-text-icons-primary"
-    :style="{ color: props.color }"
-  >
-    <slot />
-  </h2>
-</template>
-
-<script setup lang="ts">
-import { ITextProps } from '../types';
-
-const props = defineProps<ITextProps>();
-</script>

package/src/components/shared/pl-text/components/pl-h3.vue

@@ -1,14 +0,0 @@
-<template>
-  <h3
-    class="typography-headline-h3-semi-bold pl-color-text-icons-primary"
-    :style="{ color: props.color }"
-  >
-    <slot />
-  </h3>
-</template>
-
-<script setup lang="ts">
-import { ITextProps } from '../types';
-
-const props = defineProps<ITextProps>();
-</script>

package/src/components/shared/pl-text/components/pl-h4.vue

@@ -1,14 +0,0 @@
-<template>
-  <h4
-    class="typography-headline-h4-semi-bold pl-color-text-icons-primary"
-    :style="{ color: props.color }"
-  >
-    <slot />
-  </h4>
-</template>
-
-<script setup lang="ts">
-import { ITextProps } from '../types';
-
-const props = defineProps<ITextProps>();
-</script>

package/src/components/shared/pl-text/components/pl-sub1.vue

@@ -1,13 +0,0 @@
-<template>
-  <span
-    class="typography-subtitle-s1-semi-bold pl-color-text-icons-primary"
-    :style="{ color: props.color }"
-    ><slot
-  /></span>
-</template>
-
-<script setup lang="ts">
-import { ITextProps } from '../types';
-
-const props = defineProps<ITextProps>();
-</script>

package/src/components/shared/pl-text/components/pl-sub2.vue

@@ -1,13 +0,0 @@
-<template>
-  <span
-    class="typography-subtitle-s2-medium pl-color-text-icons-primary"
-    :style="{ color: props.color }"
-    ><slot
-  /></span>
-</template>
-
-<script setup lang="ts">
-import { ITextProps } from '../types';
-
-const props = defineProps<ITextProps>();
-</script>