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

package/src/components/data/pl-tabs/components/pl-tab.vue

@@ -1,130 +0,0 @@
-<template>
-  <div
-    v-if="props.label"
-    :class="['pl-tab__container', { disabled: props.disabled }, { active: props.active }]"
-  >
-    <div class="pl-tab__content">
-      <PlBtn2 class="pl-tab__content-text">
-        {{ props.label }}
-      </PlBtn2>
-      <div v-if="props.icon || props.counter !== null" class="pl-tab__content-suffix">
-        <PlIcon v-if="props.icon" :icon="props.icon" :color="iconColor" />
-        <PlTabCounter v-else-if="props.counter !== null" :active="props.active">
-          {{ props.counter }}
-        </PlTabCounter>
-      </div>
-    </div>
-    <div :class="['pl-tab__indicator', { active: props.active }]" />
-    <div class="pl-tab__indicator-wider" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import PlIcon from '@/components/shared/pl-icon/pl-icon.vue';
-import PlTabCounter from './pl-tab-counter.vue';
-import type { TIcon } from '@/components/shared/pl-icon/types';
-
-interface IProps {
-  label?: string;
-  active?: boolean;
-  disabled?: boolean;
-  icon?: TIcon;
-  counter?: number;
-}
-
-const props = withDefaults(defineProps<IProps>(), {
-  label: '',
-  active: false,
-  disabled: false,
-  icon: '',
-  counter: null,
-});
-
-const iconColor = computed(() => {
-  if (props.disabled) return 'var(--color-text-icons-tertiary)';
-  if (props.active) return 'var(--color-text-icons-interactive)';
-  return 'var(--color-text-icons-secondary)';
-});
-</script>
-
-<style lang="scss">
-@use '@/styles/tokens' as *;
-@use '@/styles/customBootstrap' as *;
-
-.pl-tab__container {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-x2;
-  justify-content: center;
-  width: 100%;
-  padding-top: $spacing-x2;
-  color: var(--color-text-icons-secondary);
-  cursor: pointer;
-
-  &:first-child {
-    .pl-tab__indicator {
-      border-radius: $spacing-x2 0 0 $spacing-x2;
-    }
-  }
-
-  &:nth-last-child(2) {
-    .pl-tab__indicator {
-      width: 100%;
-      border-radius: 0 $spacing-x2 $spacing-x2 0;
-    }
-
-    .pl-tab__indicator-wider {
-      display: none;
-    }
-  }
-
-  &:only-child {
-    .pl-tab__indicator {
-      border-radius: $spacing-x2;
-    }
-
-    .pl-tab__indicator-wider {
-      display: none;
-    }
-  }
-
-  .pl-tab__content {
-    display: flex;
-    gap: $spacing-x2;
-    align-self: center;
-    width: max-content;
-    padding: 0 $spacing-x4;
-  }
-
-  &.disabled {
-    color: var(--color-text-icons-tertiary);
-    cursor: not-allowed;
-  }
-
-  &.active {
-    color: var(--color-text-icons-interactive);
-  }
-
-  .pl-tab__indicator {
-    z-index: 2;
-    height: 2px;
-    background: var(--color-border-divider);
-
-    &.active {
-      background: var(--color-border-active);
-      border-radius: $spacing-x2;
-    }
-  }
-
-  .pl-tab__indicator-wider {
-    position: absolute;
-    bottom: 0;
-    width: calc(100% + $spacing-x4);
-    height: 2px;
-    background: var(--color-border-divider);
-    border-radius: $spacing-x2 0 0 $spacing-x2;
-  }
-}
-</style>

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

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

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

@@ -1,124 +0,0 @@
-<template>
-  <div class="pl-tab-container">
-    <div :class="['pl-tab-nav tabs__wrap tabs__wrap--hidden-default', props.navClass]">
-      <PlTab
-        v-for="tab in tabs"
-        :key="tab?.name"
-        v-tap="() => changeTab(tab)"
-        :label="tab?.label"
-        :active="props.modelValue === tab?.name"
-        :icon="tab?.icon"
-        :disabled="tab?.disabled"
-        :counter="tab?.counter"
-        role="tab"
-      />
-      <div class="pl-tab-divider" />
-    </div>
-    <template v-if="!keepAlive">
-      <div :class="props.contentClass">
-        <component :is="currentTab" />
-      </div>
-    </template>
-    <template v-else-if="keepAlive">
-      <div :class="props.contentClass">
-        <KeepAlive>
-          <component :is="currentTab" :key="currentTab?.props.name" />
-        </KeepAlive>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useSlots, computed, ref, toRefs, onMounted, watch } from 'vue';
-import PlTab from './components/pl-tab.vue';
-
-interface IProps {
-  modelValue?: string;
-  navClass?: string;
-  contentClass?: string;
-  keepAlive?: boolean;
-  name?: string;
-}
-
-const props = withDefaults(defineProps<IProps>(), {
-  modelValue: '',
-  navClass: '',
-  contentClass: '',
-  keepAlive: false,
-});
-
-const { keepAlive } = toRefs(props);
-
-const slots = useSlots();
-const tabs = computed(() => {
-  const defaultSlot = slots.default();
-  if (Array.isArray(defaultSlot[0].children)) {
-    return defaultSlot[0].children.map((item: any) => item.props);
-  }
-  return slots.default().map((item: any) => item.props);
-});
-
-const currentTab = ref(null);
-
-const asyncFilter = async (arr: any, predicate: any): Promise<any> => {
-  const results = await Promise.all(arr.map(predicate));
-
-  return arr.filter((_v: IProps, index: number) => results[index])[0];
-};
-const asyncRes = async (item: { props: IProps }): Promise<boolean> => {
-  return props.modelValue === item.props?.name;
-};
-const setTabPane = async (): Promise<void> => {
-  if (Array.isArray(slots.default()[0].children)) {
-    currentTab.value = await asyncFilter(slots.default()[0].children, asyncRes);
-  } else {
-    currentTab.value = await asyncFilter(slots.default(), asyncRes);
-  }
-};
-watch(
-  () => props.modelValue,
-  async () => {
-    await setTabPane();
-  },
-);
-
-onMounted(async () => {
-  await setTabPane();
-});
-
-const emit = defineEmits(['update:modelValue']);
-const changeTab = (tab: any): void => {
-  if (tab.disabled) {
-    return;
-  }
-  emit('update:modelValue', tab.name);
-};
-</script>
-
-<style lang="scss">
-@use '@/styles/tokens' as *;
-
-.pl-tab-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.pl-tab-nav {
-  position: relative;
-  display: flex;
-  gap: $spacing-x4;
-  width: 100%;
-}
-
-.pl-tab-divider {
-  position: absolute;
-  bottom: 0;
-  z-index: 1;
-  width: 100%;
-  height: 2px;
-  background: var(--color-border-divider);
-  border-radius: $spacing-x2;
-}
-</style>

package/src/components/data/pl-tags-chips/index.ts

@@ -1,5 +0,0 @@
-import TagsChips from './pl-tags-chips.vue';
-import { withInstallFunction } from '@/install-function';
-
-export const PlTagsChips = withInstallFunction(TagsChips, 'PlTagsChips');
-export default PlTagsChips;

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

@@ -1,206 +0,0 @@
-<template>
-  <div :class="computedClasses" :style="computedStyles" data-testid="tag" @click="handleTagClicked">
-    <PlIcon v-if="props.icon" :color="computedColor" :icon="props.icon" />
-    <slot />
-    <PlIcon
-      v-if="props.deleteBtn"
-      class="pl-tags-chips-delete-btn"
-      :class="{ 'pl-tags-chips-disabled': props.disabled }"
-      color="var(--color-text-icons-tertiary)"
-      :icon="computedIconName"
-      @click.stop="handleCrossClicked"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { TIcon } from '@/components/shared/pl-icon';
-import { Close16, Close20 } from '@/components/shared/pl-icon/assets-map';
-
-type InteractiveTypes = 'primary' | 'outline';
-
-interface IProps {
-  textColor?: string;
-  icon?: TIcon;
-  iconColor?: string;
-  backgroundColor?: string;
-  size?: 'large' | 'small';
-  chip?: boolean;
-  type?: 'success' | 'interactive' | 'warning' | 'error' | 'info' | InteractiveTypes;
-  deleteBtn?: boolean;
-  interactive?: boolean;
-  active?: boolean;
-  disabled?: boolean;
-}
-
-const props = withDefaults(defineProps<IProps>(), {
-  textColor: '',
-  icon: '',
-  iconColor: '',
-  backgroundColor: '',
-  size: 'large',
-  chip: false,
-  type: 'info',
-  deleteBtn: false,
-  interactive: false,
-  active: false,
-  disabled: false,
-});
-
-const emit = defineEmits(['tagClicked', 'crossClicked']);
-
-const computedTypes = computed(() => {
-  if (props.interactive) {
-    return ['primary', 'outline'].includes(props.type) ? props.type : 'primary';
-  }
-  return props.type;
-});
-
-const typeColors = computed(() => {
-  const types = {
-    success: {
-      text: 'var(--color-text-icons-success)',
-      background: 'var(--color-system-surface-success)',
-    },
-    interactive: {
-      text: 'var(--color-text-icons-interactive)',
-      background: 'var(--color-system-surface-interactive)',
-    },
-    warning: {
-      text: 'var(--color-text-icons-warning)',
-      background: 'var(--color-system-surface-warning)',
-    },
-    error: {
-      text: 'var(--color-text-icons-error)',
-      background: 'var(--color-system-surface-error)',
-    },
-    info: { text: 'var(--color-text-icons-primary)', background: 'var(--color-surface-opacity-2)' },
-    primary: {
-      text: 'var(--color-text-icons-primary)',
-      background: 'var(--color-surface-opacity-1)',
-    },
-    outline: {
-      text: 'var(--color-text-icons-primary)',
-      background: '',
-    },
-  };
-
-  return types[computedTypes.value] || types.info;
-});
-
-const computedClasses = computed(() => [
-  'pl-tags-chips',
-  props.size === 'small' ? 'pl-tags-chips-small' : 'pl-tags-chips-large typography-body-b2-medium',
-  { chip: props.chip },
-  { 'pl-tags-chips-primary-hover': computedTypes.value === 'primary' && !props.active },
-  {
-    'pl-tags-chips-primary-active ':
-      computedTypes.value === 'primary' && props.active && !props.disabled,
-  },
-  { 'pl-tags-chips-outline-hover': computedTypes.value === 'outline' && !props.active },
-  {
-    'pl-tags-chips-outline-active ':
-      computedTypes.value === 'outline' && props.active && !props.disabled,
-  },
-  { 'cursor-pointer': props.interactive },
-  { 'pl-tags-chips-disabled': props.disabled && props.interactive },
-]);
-
-const computedStyles = computed(() => ({
-  color: props.textColor || typeColors.value.text,
-  backgroundColor: props.backgroundColor || typeColors.value.background,
-  padding: props.icon && props.deleteBtn ? '4px 8px' : props.icon ? '4px 12px 4px 8px' : '4px 12px',
-  border: computedTypes.value === 'outline' ? '1px solid var(--color-border-inactive)' : 'none',
-}));
-
-const computedColor = computed(() => {
-  if (props.disabled) return 'var(--color-text-icons-tertiary)';
-  return props.iconColor || props.textColor || typeColors.value.text;
-});
-
-const computedIconName = computed(() => (props.size === 'large' ? Close20 : Close16));
-
-const handleCrossClicked = (): void => {
-  if (!props.disabled) emit('crossClicked');
-};
-
-const handleTagClicked = (event: Event): void => {
-  if (props.disabled) {
-    event.stopImmediatePropagation();
-    return;
-  }
-  emit('tagClicked');
-};
-</script>
-
-<style lang="scss">
-@use '@/styles/tokens' as *;
-@use '@/styles/media' as *;
-@use '@/styles/tokens_scss/typeface_mixins' as *;
-
-.pl-tags-chips {
-  display: flex;
-  flex-shrink: 0;
-  gap: $spacing-x1;
-  align-items: center;
-  justify-content: center;
-  width: fit-content;
-  height: 32px;
-  user-select: none;
-}
-
-.pl-tags-chips-large {
-  @include typography-body-b2-medium;
-
-  border-radius: $spacing-x2;
-}
-
-.pl-tags-chips-small {
-  @include typography-caption-caption-medium;
-
-  height: 24px;
-  border-radius: $radius-x1-5;
-}
-
-@include mq(min768) {
-  .pl-tags-chips-primary-hover:hover:not(.pl-tags-chips-disabled) {
-    background: var(--color-surface-opacity-2) !important;
-  }
-
-  .pl-tags-chips-outline-hover:hover:not(.pl-tags-chips-disabled) {
-    border: 1px solid var(--color-border-hover) !important;
-  }
-
-  .pl-tags-chips-delete-btn:hover:not(.pl-tags-chips-disabled) {
-    color: var(--color-text-icons-secondary) !important;
-  }
-}
-
-.pl-tags-chips-outline-active {
-  border: 1px solid var(--color-border-active) !important;
-}
-
-.pl-tags-chips-primary-active {
-  background: var(--color-buttons-alternative) !important;
-}
-
-.chip {
-  border-radius: $spacing-x12;
-}
-
-.pl-tags-chips-disabled {
-  color: var(--color-text-icons-tertiary) !important;
-  cursor: not-allowed;
-
-  @include mq(phone-375) {
-    pointer-events: none;
-  }
-}
-
-.pl-tags-chips:not(.cursor-pointer) {
-  @include mq(phone-375) {
-    pointer-events: none;
-  }
-}
-</style>

package/src/components/data/pl-text-cell/index.ts

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

package/src/components/data/pl-text-cell/pl-text-cell.vue

@@ -1,133 +0,0 @@
-<template>
-  <div :class="containerClass">
-    <div :class="mainTextClass">
-      {{ mainText }}
-    </div>
-    <div v-if="description || content" :class="descriptionClass">
-      {{ secondText }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-interface IPlTextProps {
-  label?: string;
-  content?: string;
-  description?: string;
-  subtitle?: string;
-  direction?: 'vertical' | 'horizontal';
-  descriptionColor?: 'secondary' | 'tertiary';
-  type?: 'success' | 'warning' | 'error' | 'info' | 'interactive';
-}
-
-const props = withDefaults(defineProps<IPlTextProps>(), {
-  direction: 'vertical',
-  descriptionColor: 'secondary',
-});
-
-const containerClass = computed(() => ({
-  'pl-text-cell': true,
-  'pl-text-cell__horizontal': props.direction === 'horizontal',
-  'pl-text-cell__with-gap': props.subtitle,
-}));
-
-const descriptionClass = computed(() => ({
-  'pl-text-cell__description': props.description,
-  'pl-text-cell__content': props.content && !props.description,
-  'pl-text-cell__description-secondary':
-    props.description && props.descriptionColor === 'secondary',
-  'pl-text-cell__description-tertiary': props.description && props.descriptionColor === 'tertiary',
-  [`pl-text-cell__${props.type}`]: props.type && props.content && !props.description,
-}));
-
-const mainTextClass = computed(() => ({
-  'pl-text-cell__label': props.label,
-  'pl-text-cell__content': props.content && !props.label,
-  'pl-text-cell__subtitle': props.subtitle,
-  [`pl-text-cell__${props.type}`]: props.type && props.content && !props.label && !props.subtitle,
-}));
-
-const mainText = computed(() => {
-  if (props.label) return props.label;
-  if (props.subtitle) return props.subtitle;
-  return props.content;
-});
-
-const secondText = computed(() => {
-  if (props.label && props.content) return props.content;
-  if (mainText.value !== props.label && props.description) return props.description;
-  return '';
-});
-</script>
-
-<style lang="scss">
-@use '@/styles/tokens' as *;
-@use '@/styles/media' as *;
-@use '@/styles/tokens_scss/typeface_mixins' as *;
-
-.pl-text-cell {
-  display: flex;
-  flex-direction: column;
-  width: fit-content;
-
-  .pl-text-cell__label {
-    color: var(--color-text-icons-secondary);
-
-    @include typography-body-b1-regular;
-  }
-
-  .pl-text-cell__content {
-    color: var(--color-text-icons-primary);
-
-    @include typography-body-b2-medium;
-  }
-
-  .pl-text-cell__subtitle {
-    color: var(--color-text-icons-primary);
-
-    @include typography-headline-h4-semi-bold;
-  }
-
-  .pl-text-cell__description {
-    color: var(--color-text-icons-secondary);
-
-    @include typography-body-b1-regular;
-  }
-
-  .pl-text-cell__description-tertiary {
-    color: var(--color-text-icons-tertiary);
-  }
-
-  .pl-text-cell__error {
-    color: var(--color-text-icons-error);
-  }
-
-  .pl-text-cell__warning {
-    color: var(--color-text-icons-warning);
-  }
-
-  .pl-text-cell__success {
-    color: var(--color-text-icons-success);
-  }
-
-  .pl-text-cell__info {
-    color: var(--color-text-icons-info);
-  }
-
-  .pl-text-cell__interactive {
-    color: var(--color-text-icons-interactive);
-  }
-}
-
-.pl-text-cell__horizontal {
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.pl-text-cell__with-gap {
-  gap: $spacing-x1;
-}
-</style>

package/src/components/entry.ts

@@ -1,61 +0,0 @@
-import type { App } from 'vue';
-
-import ApiJs, { cancelAllApiRequests } from '../plugins/api/api';
-import plLoading from '../services/plLoading';
-import '../styles/customBootstrap.scss';
-import '../styles/fonts/InterWeb/inter.css';
-import '../styles/tokens_map/color.css';
-import '../styles/tokens_scss/typeface.scss';
-import '../styles/loading.scss';
-import { createPinia } from 'pinia';
-import Maska from 'maska';
-import PlDirectives from '@/directives';
-import formatCurrency from '@/utils/formatCurrency';
-import declOfNum from '@/utils/declOfNum';
-import filters from '@/plugins/filters';
-import isEqual from '@/utils/isEqual';
-import formatDate from '@/utils/formatDate';
-import deepSet from '@/utils/deepSet';
-import dataParser from '@/utils/dadataParser';
-import uniqId from '@/utils/uniqId';
-import plugins from './components';
-import type { Plugin } from 'vue';
-const pinia = createPinia();
-
-const PlComponentsPack: Plugin = {
-  install(app: App) {
-    // Устанавливаем все компоненты-плагины
-    plugins.forEach((comp) => {
-      if (comp && typeof comp.install === 'function') {
-        comp.install(app);
-      }
-    });
-
-    // Устанавливаем директивы
-    if (PlDirectives.install) {
-      PlDirectives.install(app);
-    }
-
-    // Подключаем Pinia и Maska
-    app.use(pinia).use(Maska);
-  },
-};
-
-export default PlComponentsPack;
-
-export {
-  ApiJs as apiJs,
-  plLoading,
-  formatCurrency,
-  filters,
-  declOfNum,
-  isEqual,
-  formatDate,
-  deepSet,
-  dataParser,
-  uniqId,
-  cancelAllApiRequests,
-  PlDirectives,
-};
-
-export * from './components';