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

package/src/components/form/pl-select-plus/pl-select-plus.vue

@@ -1,427 +0,0 @@
-<template>
-  <div :id="`pl-select-${id}`" class="pl-select__wrapper">
-    <div
-      :id="`pl-select__select-container-${id}`"
-      ref="selectRef"
-      data-testid="selectLabel"
-      class="pl-select__select-container"
-      @mouseup="clickToFocus"
-    >
-      <label
-        v-if="props.label || props.tooltip"
-        class="pl-select__label-container"
-        role="label-container"
-      >
-        <div class="pl-select__label-container-text">
-          <PlBody2 v-if="props.label" class="pl-select__label"> {{ props.label }}</PlBody2>
-          <PlBody2 v-if="props.optional" class="pl-select__optional">
-            {{ props.optional }}
-          </PlBody2>
-        </div>
-        <PlTooltipPlus v-if="props.tooltip || $slots['tooltip-text']" :width="props.tooltipWidth">
-          <PlIcon :icon="Question20" class="cursor-pointer" />
-          <template #tooltip-text>
-            <slot name="tooltip-text">{{ props.tooltip }}</slot>
-          </template>
-        </PlTooltipPlus>
-      </label>
-      <PlAccount
-        v-if="props.account"
-        v-bind="props"
-        :id="id"
-        v-model:focus="focus"
-        :model-value="selectedOption"
-        :placeholder="props.placeholder"
-        :show-error="showError"
-      />
-      <PlDefault
-        v-else
-        v-bind="props"
-        :id="id"
-        v-model:focus="focus"
-        :model-value="selectedOption"
-        :show-description="showDescription"
-        :show-error="showError"
-        @reset="resetValue"
-      />
-
-      <div
-        v-if="props.helpertext || errors.length > 0"
-        class="pl-select__helpertext-container"
-        role="helpertext-container"
-      >
-        <PlCap v-if="errors.length > 0" class="pl-select__error">
-          {{ errors[0].message }}
-        </PlCap>
-        <PlCap v-else-if="props.helpertext" class="pl-select__helpertext">
-          {{ props.helpertext }}
-        </PlCap>
-      </div>
-    </div>
-    <Teleport to="body">
-      <PlSelectDropdown
-        :id="id"
-        ref="dropdownRef"
-        :input-element="selectRef"
-        :id-prop="`pl-select-${id}`"
-        :focus="focus"
-        :helpertext="props.helpertext"
-        :errors="errors"
-        :options="props.options"
-        :selected-value="selectedValue"
-        @select-value="selectValue"
-      />
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch, inject, nextTick, ComputedRef } from 'vue';
-import { onClickOutside } from '@vueuse/core';
-import PlIcon from '@/components/shared/pl-icon/pl-icon.vue';
-import PlDefault from './components/pl-default.vue';
-import PlAccount from './components/pl-account.vue';
-import PlSelectDropdown from './components/pl-select-dropdown.vue';
-
-import type { ValidateError } from 'async-validator';
-
-import uniqid from '@/utils/uniqId';
-
-import type { IOption, ISelectProps } from './types';
-import { Question20 } from '@/components/shared/pl-icon/assets-map';
-
-const props = withDefaults(defineProps<ISelectProps>(), {
-  modelValue: '',
-  prop: '',
-  placeholder: '',
-  width: '100%',
-  helpertext: '',
-  optional: '',
-  label: '',
-  tooltip: '',
-  leftIcon: '',
-  rightIcon: '',
-  options: () => [],
-  disabled: false,
-  clearable: false,
-  showDescription: false,
-  account: false,
-  teleport: false,
-});
-
-const id = uniqid('id-');
-
-const errors = ref<ValidateError[]>([]);
-if (props.prop) {
-  const errorsState = inject('errorsState') as ComputedRef<ValidateError[]>;
-  if (errorsState)
-    watch(
-      errorsState,
-      () => {
-        errors.value = errorsState.value.filter(
-          (error: ValidateError) => error.field === props.prop,
-        );
-      },
-      { deep: true },
-    );
-}
-const showError = computed(() => errors.value.length);
-
-const focus = ref(false);
-watch(focus, (value) => {
-  if (value) {
-    document.getElementById(id)?.focus();
-  } else {
-    blurInput();
-  }
-});
-const selectRef = ref();
-const dropdownRef = ref();
-onClickOutside(
-  selectRef,
-  (e) => {
-    if (
-      (e.target as HTMLElement).className === 'pl-scrollbar__thumb' ||
-      dropdownRef.value.isDragging
-    ) {
-      return;
-    }
-    focus.value = false;
-  },
-  { ignore: [dropdownRef] },
-);
-
-const clickToFocus = (): void => {
-  if (props.disabled) {
-    return;
-  }
-  focus.value = !focus.value;
-};
-
-const emit = defineEmits(['update:modelValue', 'change']);
-const clickToBlur = (): void => {
-  if (props.disabled || !focus.value) {
-    return;
-  }
-  nextTick(() => {
-    focus.value = false;
-  });
-};
-
-const selectedValue = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value);
-  },
-});
-
-const blurInput = (): void => {
-  const element = document.getElementById(id);
-  if (element) {
-    if ('createEvent' in document) {
-      const evt = document.createEvent('HTMLEvents');
-      evt.initEvent('blur', false, true);
-      element.dispatchEvent(evt);
-    } else {
-      (element as any).fireEvent('onblur');
-    }
-  }
-};
-
-watch(selectedValue, () => {
-  const element = document.getElementById(id);
-  if ('createEvent' in document) {
-    const evt = document.createEvent('HTMLEvents');
-    evt.initEvent('change', false, true);
-    element.dispatchEvent(evt);
-  } else {
-    (element as any).fireEvent('onchange');
-  }
-  emit('change');
-});
-
-const selectValue = (option: IOption): void => {
-  if (option.disabled) {
-    return;
-  }
-  clickToBlur();
-  selectedValue.value = option.value;
-};
-
-const resetValue = (): void => {
-  selectedValue.value = null;
-};
-
-const showDescription = computed(() => {
-  if (
-    props.showDescription &&
-    (selectedOption.value?.description || selectedOption.value?.customDescription)
-  ) {
-    if (selectedOption.value?.customDescription) {
-      return selectedOption.value?.customDescription;
-    }
-    return selectedOption.value?.description;
-  }
-  return false;
-});
-
-const selectedOption = computed(() => {
-  return props.options.filter((option) => option.value === selectedValue.value)[0];
-});
-</script>
-
-<style lang="scss">
-@use '@/styles/customBootstrap' as *;
-@use '@/styles/tokens' as *;
-@use '@/styles/transitions' as *;
-@use '@/styles/media' as *;
-
-.pl-select__wrapper {
-  position: relative;
-  width: v-bind('props.width');
-
-  .pl-select__select-container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    align-self: stretch;
-    cursor: pointer;
-
-    .pl-select__label-container {
-      display: flex;
-      gap: $spacing-x2;
-      align-items: center;
-      align-self: stretch;
-      justify-content: space-between;
-      padding: 0 $spacing-x1 $spacing-x1;
-
-      svg {
-        color: var(--color-text-icons-secondary);
-      }
-
-      .pl-select__label-container-text {
-        display: flex;
-        gap: $spacing-x2;
-
-        .pl-select__label {
-          color: var(--color-text-icons-secondary);
-        }
-
-        .pl-select__optional {
-          color: var(--color-text-icons-tertiary);
-        }
-      }
-    }
-
-    .pl-select__select {
-      display: flex;
-      gap: $spacing-x2;
-      align-items: center;
-      width: 100%;
-      min-height: 40px;
-      padding: calc($spacing-x2 - 1px) $spacing-x3;
-      background: var(--color-surface-card);
-      border: 1px solid var(--color-border-inactive);
-      border-radius: $radius-x2;
-
-      @include mq(min768) {
-        &:hover {
-          border-color: var(--color-border-hover);
-        }
-      }
-
-      &.focus {
-        border-color: var(--color-border-active);
-        border-width: 2px;
-      }
-
-      &.is-error {
-        border-color: var(--color-border-error);
-        border-width: 2px;
-      }
-
-      &.focus,
-      &.is-error {
-        padding: calc($spacing-x2 - 2px) calc($spacing-x3 - 1px);
-      }
-
-      .pl-select__prefix-container {
-        display: flex;
-        align-items: center;
-        height: 24px;
-
-        svg {
-          color: var(--color-text-icons-tertiary);
-        }
-      }
-
-      .pl-select__inner-container {
-        display: flex;
-        gap: $spacing-x1;
-        align-items: center;
-        width: 100%;
-
-        @include text-truncate;
-
-        .pl-select__inner {
-          width: 100%;
-          padding: 0;
-          margin: 0;
-          color: var(--color-text-icons-primary);
-          cursor: pointer;
-          background: transparent;
-          border: none;
-          outline: none;
-
-          @include text-truncate;
-
-          &::placeholder {
-            color: var(--color-text-icons-tertiary);
-          }
-
-          &:disabled {
-            cursor: not-allowed;
-          }
-        }
-
-        .pl-select__description {
-          color: var(--color-text-icons-primary);
-
-          @include text-truncate;
-        }
-
-        &_account {
-          flex-direction: column;
-
-          .pl-select__description {
-            color: var(--color-text-icons-secondary);
-          }
-
-          .pl-select__inner,
-          .pl-select__description {
-            width: 100%;
-          }
-        }
-      }
-
-      .pl-select__suffix-container {
-        display: flex;
-        gap: $spacing-x2;
-        align-items: center;
-
-        .pl-select__summ {
-          color: var(--text-icons-primary);
-        }
-
-        svg {
-          color: var(--color-text-icons-secondary);
-          transition: rotate 0.2s;
-        }
-
-        .pl-select__suffix_rotate {
-          svg {
-            rotate: -180deg;
-          }
-        }
-      }
-
-      &.disabled {
-        cursor: not-allowed;
-        background: var(--color-surface-opacity-1);
-        border: 1px solid var(--color-border-inactive);
-
-        .pl-select__inner {
-          color: var(--color-text-icons-tertiary);
-          cursor: not-allowed;
-        }
-
-        .pl-select__description {
-          color: var(--color-text-icons-tertiary);
-        }
-
-        .pl-select__summ {
-          color: var(--color-text-icons-tertiary);
-        }
-
-        svg {
-          color: var(--color-text-icons-tertiary);
-        }
-      }
-    }
-
-    .pl-select__helpertext-container {
-      display: flex;
-      padding: $spacing-x1 $spacing-x1 0;
-      cursor: default;
-
-      .pl-select__helpertext {
-        color: var(--color-text-icons-secondary);
-      }
-
-      .pl-select__error {
-        color: var(--color-text-icons-error);
-      }
-    }
-  }
-}
-</style>

package/src/components/form/pl-select-plus/types/index.ts

@@ -1,46 +0,0 @@
-import type { TIcon } from '@/components/shared/pl-icon';
-
-import type { ValidateError } from 'async-validator';
-
-declare interface IOption {
-  value: string | number | any;
-  description?: string;
-  summ?: number;
-  leftIcon?: TIcon;
-  disabled?: boolean;
-  label?: string;
-  customDescription?: string;
-  action?: () => void;
-}
-
-declare interface ISelectProps {
-  modelValue: any;
-  options: IOption[] | any[];
-  prop?: string;
-  placeholder?: string;
-  width?: string;
-  helpertext?: string;
-  optional?: string;
-  label?: string;
-  tooltip?: string;
-  leftIcon?: TIcon;
-  rightIcon?: TIcon;
-  disabled?: boolean;
-  clearable?: boolean;
-  showDescription?: boolean;
-  account?: boolean;
-  teleport?: boolean;
-  tooltipWidth?: string;
-}
-declare interface IDropdownProps {
-  focus: boolean;
-  id: string;
-  helpertext: string;
-  errors: ValidateError[];
-  options: IOption[];
-  selectedValue: any;
-  inputElement: HTMLElement;
-  idProp: string;
-}
-
-export { IDropdownProps, IOption, ISelectProps };

package/src/components/form/pl-switch/index.ts

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

package/src/components/form/pl-switch/pl-switch.vue

@@ -1,127 +0,0 @@
-<template>
-  <div v-tap="check" :class="['pl-switch-container', { 'pl-switch-disabled': props.disabled }]">
-    <div :class="['pl-switch', { 'pl-switch-isChecked': props.modelValue }]">
-      <input v-model="isChecked" type="checkbox" :disabled="props.disabled" />
-      <span class="pl-switch-slider" />
-    </div>
-    <label v-if="props.label">
-      <PlLabel :title="label" :description="description" :disabled="props.disabled" />
-    </label>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue';
-import PlLabel from '@/components/shared/pl-label/pl-label.vue';
-
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-});
-
-const isChecked = ref<boolean>(props.modelValue);
-
-const emitUpdate = (value: boolean): void => {
-  emit('update:modelValue', value);
-  emit('change', value);
-};
-
-const check = (): void => {
-  if (!props.disabled) {
-    isChecked.value = !isChecked.value;
-    emitUpdate(isChecked.value);
-  }
-};
-
-const emit = defineEmits(['update:modelValue', 'change']);
-
-watch(
-  () => props.modelValue,
-  (newValue: boolean) => {
-    isChecked.value = newValue;
-  },
-);
-</script>
-
-<style lang="scss">
-@use '@/styles/tokens' as *;
-
-input[type='checkbox'] {
-  all: initial;
-}
-
-.pl-switch-container {
-  display: flex;
-  gap: $spacing-x3;
-  align-items: center;
-  width: fit-content;
-  cursor: pointer;
-}
-
-.pl-switch {
-  position: relative;
-  display: inline-block;
-  min-width: 44px;
-  height: 24px;
-  padding: 2px;
-}
-
-.pl-switch-slider {
-  position: absolute;
-  inset: 0;
-  background-color: var(--color-surface-fill-2);
-  border-radius: $radius-x8;
-  transition: 0.4s;
-}
-
-.pl-switch-slider::before {
-  position: absolute;
-  bottom: 2px;
-  left: 2px;
-  width: 20px;
-  height: 20px;
-  content: '';
-  background-color: var(--color-text-icons-white);
-  border-radius: $radius-x8;
-  box-shadow: $shadows-elevation-tab;
-  transition: 0.4s;
-}
-
-input:checked + .pl-switch-slider {
-  background-color: var(--color-text-icons-interactive);
-}
-
-input:checked + .pl-switch-slider::before {
-  box-shadow: none;
-  transform: translateX(20px);
-}
-
-input:checked:disabled + .pl-switch-slider {
-  background-color: var(--color-text-icons-interactive);
-  opacity: 0.4;
-}
-
-input:disabled + .pl-switch-slider {
-  cursor: not-allowed;
-  background-color: var(--color-surface-fill-2);
-  opacity: 0.4;
-}
-
-.pl-switch-disabled {
-  cursor: not-allowed;
-}
-</style>

package/src/components/form/pl-upload-plus/img/Download.svg

@@ -1,3 +0,0 @@
-<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7462 2.25C13.1604 2.25 13.4962 2.58579 13.4962 3V15.1893L17.2158 11.4697C17.5087 11.1768 17.9836 11.1768 18.2765 11.4697C18.5694 11.7626 18.5694 12.2374 18.2765 12.5303L13.2765 17.5303C12.9836 17.8232 12.5087 17.8232 12.2158 17.5303L7.21582 12.5303C6.92293 12.2374 6.92293 11.7626 7.21582 11.4697C7.50872 11.1768 7.98359 11.1768 8.27648 11.4697L11.9962 15.1893V3C11.9962 2.58579 12.3319 2.25 12.7462 2.25ZM3.99615 21C3.99615 20.5858 4.33194 20.25 4.74615 20.25H20.7462C21.1604 20.25 21.4962 20.5858 21.4962 21C21.4962 21.4142 21.1604 21.75 20.7462 21.75H4.74615C4.33194 21.75 3.99615 21.4142 3.99615 21Z" fill="#4164EB"/>
-</svg>

package/src/components/form/pl-upload-plus/img/uploadDefaultIcon.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="64" fill="none" viewBox="0 0 48 64">
-    <path stroke="#B0B5BC" d="M46 63.5H2c-.828 0-1.5-.672-1.5-1.5V2C.5 1.172 1.172.5 2 .5h29.172c.397 0 .779.158 1.06.44l14.829 14.828c.281.281.439.663.439 1.06V62c0 .828-.672 1.5-1.5 1.5z"/>
-    <path fill="#B0B5BC" d="M34 16h14L32 0v14c0 1.105.895 2 2 2z"/>
-    <rect width="30" height="22" x="9" y="21" stroke="#E9EDF2" stroke-width="2" rx="1"/>
-    <path fill="#E9EDF2" d="M10 22H18V42H10z"/>
-    <path fill="#E9EDF2" fill-rule="evenodd" d="M18 28h20v2h-9v5h9v2h-9v5h-2v-5h-9v-2h9v-5h-9v-2z" clip-rule="evenodd"/>
-</svg>

package/src/components/form/pl-upload-plus/index.ts

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