Commit 68de986b authored by Дмитрий Малюгин's avatar Дмитрий Малюгин 🕓
Browse files

feat: 'Toast' in process (add styles and icons)

parent 909222d3

src/App.vue

+8 −2
Original line number Diff line number Diff line
@@ -41,7 +41,7 @@ import CompassIcon from '@icons/Mono/CompassIcon.vue'; 
import ConstructionWorkerIcon from '@icons/Mono/ConstructionWorkerIcon.vue';

import ContactsIcon from '@icons/Mono/ContactsIcon.vue';

import CropIcon from '@icons/Mono/CropIcon.vue';

import CrossCircleIcon from '@icons/Mono/CrossCircleIcon.vue';

import CrossRoundFilledIcon from '@icons/Mono/CrossRoundFilledIcon.vue';

import CrossIcon from '@icons/Mono/CrossIcon.vue';

import CubeIcon from '@icons/Mono/CubeIcon.vue';

import CupIcon from '@icons/Mono/CupIcon.vue';
@@ -119,6 +119,9 @@ import CornerLeftBottomIcon from '@icons/Mono/CornerLeftBottomIcon.vue'; 
import CornerLeftTopIcon from '@icons/Mono/CornerLeftTopIcon.vue';

import CornerRightBottomIcon from '@icons/Mono/CornerRightBottomIcon.vue';

import CornerRightTopIcon from '@icons/Mono/CornerRightTopIcon.vue';

import InfoIcon from '@icons/Mono/InfoIcon.vue';

import WarningIcon from '@icons/Mono/WarningIcon.vue';

import CrossRoundIcon from '@icons/Mono/CrossRoundIcon.vue';



const gentleIcons = {

  Age18Icon,
@@ -174,7 +177,8 @@ const gentleIcons = { 
  CornerRightTopIcon,

  CropIcon,

  CrossIcon,

  CrossCircleIcon,

  CrossRoundIcon,

  CrossRoundFilledIcon,

  CubeIcon,

  CupIcon,

  CursorIcon,
@@ -217,6 +221,7 @@ const gentleIcons = { 
  HomeIcon,

  ImageIcon,

  ImageEditIcon,

  InfoIcon,

  LineIcon,

  LineDashedIcon,

  LineDottedIcon,
@@ -240,6 +245,7 @@ const gentleIcons = { 
  TrashIcon,

  TriangleIcon,

  UserIcon,

  WarningIcon,

};

</script>

src/common/constants/icons.ts

+8 −2
Original line number Diff line number Diff line
@@ -33,7 +33,7 @@ import CardsIcon from '@icons/Mono/CardsIcon.vue'; 
import ChartLineIcon from '@icons/Mono/ChartLineIcon.vue';

import ChartPieIcon from '@icons/Mono/ChartPieIcon.vue';

import ChatIcon from '@icons/Mono/ChatIcon.vue';

import CrossCircleIcon from '@icons/Mono/CrossCircleIcon.vue';

import CrossRoundFilledIcon from '@icons/Mono/CrossRoundFilledIcon.vue';

import CropIcon from '@icons/Mono/CropIcon.vue';

import ChatWritingIcon from '@icons/Mono/ChatWritingIcon.vue';

import CheckMarkIcon from '@icons/Mono/CheckMarkIcon.vue';
@@ -115,6 +115,9 @@ import CornerLeftBottomIcon from '@icons/Mono/CornerLeftBottomIcon.vue'; 
import CornerLeftTopIcon from '@icons/Mono/CornerLeftTopIcon.vue';

import CornerRightBottomIcon from '@icons/Mono/CornerRightBottomIcon.vue';

import CornerRightTopIcon from '@icons/Mono/CornerRightTopIcon.vue';

import InfoIcon from '@icons/Mono/InfoIcon.vue';

import WarningIcon from '@icons/Mono/WarningIcon.vue';

import CrossRoundIcon from '@icons/Mono/CrossRoundIcon.vue';



export const iconsSet: Record<string, Component> = {

  Age18: Age18Icon,
@@ -166,7 +169,8 @@ export const iconsSet: Record<string, Component> = { 
  CornerRightTop: CornerRightTopIcon,

  Crop: CropIcon,

  Cross: CrossIcon,

  CrossCircle: CrossCircleIcon,

  CrossRound: CrossRoundIcon,

  CrossRoundFilled: CrossRoundFilledIcon,

  Cube: CubeIcon,

  Cup: CupIcon,

  Cursor: CursorIcon,
@@ -209,6 +213,7 @@ export const iconsSet: Record<string, Component> = { 
  Home: HomeIcon,

  Image: ImageIcon,

  ImageEdit: ImageEditIcon,

  Info: InfoIcon,

  Line: LineIcon,

  LineDashed: LineDashedIcon,

  LineDotted: LineDottedIcon,
@@ -232,4 +237,5 @@ export const iconsSet: Record<string, Component> = { 
  Trash: TrashIcon,

  Triangle: TriangleIcon,

  User: UserIcon,

  Warning: WarningIcon,

};

src/common/helpers/common.ts

+8 −1
Original line number Diff line number Diff line 
import { EThemeColor, type TDarkness, type TThemeColor } from '@interfaces/common';

import { EThemeColor, type TDarkness, type TSize, type TThemeColor } from '@interfaces/common';

import {

  convert100ThemeToColor,

  convert200ThemeToColor,
@@ -58,3 +58,10 @@ export const convertThemeToSecondaryColor = (theme: TThemeColor, darkness: TDark 
    ? convertWhiteOrBlackToColor(theme, darkness as TDarkness)

    : convertThemeToColor(theme, String(100 + ((+darkness + 600) % 900)));

};



export const getValueFromSize = (size: TSize, options: string[] | number[]) => {

  if (size === 'normal') return options[1];

  if (size === 'large') return options[2];

  if (size === 'huge') return options[3];

  return options[0];

};

src/common/interfaces/componentsProps.ts

+3 −0
Original line number Diff line number Diff line
@@ -296,6 +296,9 @@ export interface IToastProps { 
  text?: string;

  header?: string;

  icon?: TIcon;

  width?: string;

  position?: TExpandedPosition;

  static?: boolean;

}



export interface ITagProps {

src/components/Carousel/Carousel.vue

+10 −15
Original line number Diff line number Diff line
@@ -2,7 +2,7 @@ 
import type { ICarouselProps } from '@interfaces/componentsProps';

import CarouselButtonContainer from '@components/Carousel/CarouselButtonContainer.vue';

import { computed, ref } from 'vue';

import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';

import { convertThemeToColor, convertThemeToTextColor, getValueFromSize } from '@helpers/common';

import ArrowLeftShortIcon from '@icons/Mono/ArrowLeftShortIcon.vue';

import ArrowRightShortIcon from '@icons/Mono/ArrowRightShortIcon.vue';

import { defaultProps, getNewValue } from './helpers';
@@ -25,22 +25,17 @@ const isStartDisabled = computed(() => (props.circular ? false : current.value = 
const isEndDisabled = computed(() =>

  props.circular ? false : current.value === Math.ceil(itemsLength.value / props.perView) || !itemsLength.value,

);

const sizeCoefficient = computed(() => {

  const size = props.size;

  if (size === 'normal') return 1;

  if (size === 'large') return 2;

  if (size === 'huge') return 3;

  return 0.75;

});

const sizeCoefficient = computed(() => getValueFromSize(props.size, [0.75, 1, 2, 3]));

const iconSize = computed(() => 10 * sizeCoefficient.value);

const itemWidth = computed(() => `calc(${props.innerWidth} / ${props.perView}`);

const buttonSize = computed(() => {

  const size = props.size;

  if (size === 'normal') return 12 * sizeCoefficient.value + 'px';

  if (size === 'large') return 12 * sizeCoefficient.value + 'px';

  if (size === 'huge') return 15 * sizeCoefficient.value + 'px';

  return 9 * sizeCoefficient.value + 'px';

});

const buttonSize = computed(() =>

  getValueFromSize(props.size, [

    9 * sizeCoefficient.value + 'px',

    12 * sizeCoefficient.value + 'px',

    12 * sizeCoefficient.value + 'px',

    15 * sizeCoefficient.value + 'px',

  ]),

);

const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props.perView} * ${current.value - 1}))`);

</script>