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

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

@@ -0,0 +1,49 @@
+<template>
+  <div :class="['pl-label-container', { 'pl-label-container-disabled': props.disabled }]">
+    <PlBody2 color="var(--color-text-icons-primary)" class="pl-label-title">
+      {{ props.title }}
+    </PlBody2>
+    <slot name="custom-description" />
+    <PlCap v-if="props.description" color="var(--color-text-icons-secondary)" class="pl-label-desc">
+      {{ props.description }}
+    </PlCap>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<style lang="scss">
+@use '@/styles/tokens' as *;
+
+.pl-label-container {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-x1;
+  cursor: pointer;
+  user-select: none;
+
+  &.pl-label-container-disabled {
+    cursor: not-allowed;
+
+    .pl-label-desc,
+    .pl-label-title {
+      opacity: 0.4;
+    }
+  }
+}
+</style>

package/src/components/shared/pl-mark-text/index.ts

@@ -0,0 +1,5 @@
+import markText from './pl-mark-text.vue';
+import { withInstallFunction } from '@/install-function';
+
+export const PlMarkText = withInstallFunction(markText, 'PlMarkText');
+export default PlMarkText;

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

@@ -0,0 +1,57 @@
+<template>
+  <template v-if="props.modelValue">
+    <span class="pl-mark-text">{{ matchName(props.modelValue.toString())[0] }}</span>
+    <span class="pl-mark-text pl-mark-text__match-text">{{
+      matchName(props.modelValue.toString())[1]
+    }}</span>
+    <span class="pl-mark-text">{{ matchName(props.modelValue.toString())[2] }}</span>
+  </template>
+  <template v-else>
+    <span class="pl-mark-text">{{ props.modelValue }}</span>
+  </template>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: {
+    type: String,
+  },
+  searchValue: {
+    type: String,
+  },
+});
+
+const escapeRegex = (string: string): string => string.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
+
+// Выделение найденной подстроки
+let reggie;
+let found;
+let machedCase;
+let unMachedCase;
+const matchName = (current): any[] => {
+  const regexString = escapeRegex(props.searchValue);
+  reggie = new RegExp(regexString, 'gi');
+  found = current.search(reggie) !== -1;
+  machedCase = current.slice(current.search(reggie), current.search(reggie) + regexString.length);
+
+  unMachedCase = !found
+    ? current
+    : [
+        current.slice(0, current.search(reggie)),
+        current.slice(current.search(reggie) + regexString.length),
+      ];
+
+  return !found ? ['', '', unMachedCase] : [unMachedCase[0], machedCase, unMachedCase[1]];
+};
+</script>
+
+<style lang="scss">
+.pl-mark-text {
+  font-weight: inherit !important;
+  line-height: inherit !important;
+
+  & .pl-mark-text__match-text {
+    color: var(--color-text-icons-interactive);
+  }
+}
+</style>

package/src/components/shared/pl-option/index.ts

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

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

@@ -0,0 +1,215 @@
+<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

@@ -0,0 +1,3 @@
+<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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,89 @@
+<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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,14 @@
+<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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,30 @@
+<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

@@ -0,0 +1,13 @@
+<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

@@ -0,0 +1,13 @@
+<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

@@ -0,0 +1,13 @@
+<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

@@ -0,0 +1,13 @@
+<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

@@ -0,0 +1,13 @@
+<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

@@ -0,0 +1,13 @@
+<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

@@ -0,0 +1,13 @@
+<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>