diff --git a/README.md b/README.md
index 3e593b3386228a225f274933186d256386682f67..2a832084152b3eaeb6a039a03b10995ebd867096 100644
--- a/README.md
+++ b/README.md
@@ -10,12 +10,17 @@
- MenuDial;
- Popup;
- Slider;
+
+- Paginator;
- Drawer;
- Modal;
- Knob;
- Select;
- SelectButton;
+
- Button;
+- ProgressBar;
+- Rating;
- ToggleSwitch;
- Tag;
- Checkbox;
@@ -23,8 +28,8 @@
---
## ÐžÐ±Ñ‰Ð°Ñ Ð¸Ð½Ñ„Ð¾Ñ€Ð¼Ð°Ñ†Ð¸Ñ
-### Components count: 15
-### Bundle size: 292.7KB
+### Components count: 18
+### Bundle size: 296.4KB
---
@@ -35,7 +40,7 @@ const props = withDefaults(defineProps<IProps>(), {
});
const emit = defineEmits(['']);
-const visible = defineModel('');
+const visible = defineModel();
// watch(, () => {});
// const computed1 = computed(() => );
```
diff --git a/package.json b/package.json
index 6d95ea9d335f6710e3832e860abaa79408d4565d..d29dba71070676761cce419dcc926c8eadb033a6 100644
--- a/package.json
+++ b/package.json
@@ -52,8 +52,5 @@
"extends": [
"plugin:storybook/recommended"
]
- },
- "volta": {
- "node": "23.6.0"
}
}
diff --git a/src/App.vue b/src/App.vue
index e48e3c752edab69ba8a30efca5a41a107111b169..ebb55d44bd16bd36d1c49f9fd240ca7cf8cfa7ec 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,114 +1,120 @@
<script setup lang="ts">
-import Age18Icon from '@stories/icons/Mono/Age18Icon.vue';
-import AlarmIcon from '@stories/icons/Mono/AlarmIcon.vue';
-import AirplaneIcon from '@stories/icons/Mono/AirplaneIcon.vue';
-import ArrowLeftIcon from '@stories/icons/Mono/ArrowLeftIcon.vue';
-import ArrowForwardIcon from '@stories/icons/Mono/ArrowForwardIcon.vue';
-import ArchiveIcon from '@stories/icons/Mono/ArchiveIcon.vue';
-import AnchorLinkIcon from '@stories/icons/Mono/AnchorLinkIcon.vue';
-import AnchorIcon from '@stories/icons/Mono/AnchorIcon.vue';
-import AlignRightIcon from '@stories/icons/Mono/AlignRightIcon.vue';
-import AlignLeftIcon from '@stories/icons/Mono/AlignLeftIcon.vue';
-import AlignCenterIcon from '@stories/icons/Mono/AlignCenterIcon.vue';
-import ArrowRightIcon from '@stories/icons/Mono/ArrowRightIcon.vue';
-import AtIcon from '@stories/icons/Mono/AtIcon.vue';
-import AwardIcon from '@stories/icons/Mono/AwardIcon.vue';
-import BackspaceIcon from '@stories/icons/Mono/BackspaceIcon.vue';
-import BadgeIcon from '@stories/icons/Mono/BadgeIcon.vue';
-import BallFootballIcon from '@stories/icons/Mono/BallFootballIcon.vue';
-import BallIcon from '@stories/icons/Mono/BallIcon.vue';
-import BanknoteIcon from '@stories/icons/Mono/BanknoteIcon.vue';
-import BellIcon from '@stories/icons/Mono/BellIcon.vue';
-import BellOffIcon from '@stories/icons/Mono/BellOffIcon.vue';
-import BoxIcon from '@stories/icons/Mono/BoxIcon.vue';
-import BrightnessIcon from '@stories/icons/Mono/BrightnessIcon.vue';
-import BulbIcon from '@stories/icons/Mono/BulbIcon.vue';
-import CalculatorIcon from '@stories/icons/Mono/CalculatorIcon.vue';
-import CalendarIcon from '@stories/icons/Mono/CalendarIcon.vue';
-import CalendarAddIcon from '@stories/icons/Mono/CalendarAddIcon.vue';
-import CalendarRemoveIcon from '@stories/icons/Mono/CalendarRemoveIcon.vue';
-import CardsIcon from '@stories/icons/Mono/CardsIcon.vue';
-import ChartLineIcon from '@stories/icons/Mono/ChartLineIcon.vue';
-import ChartPieIcon from '@stories/icons/Mono/ChartPieIcon.vue';
-import ChatIcon from '@stories/icons/Mono/ChatIcon.vue';
-import ChatWritingIcon from '@stories/icons/Mono/ChatWritingIcon.vue';
-import CheckMarkIcon from '@stories/icons/Mono/CheckMarkIcon.vue';
-import ChemistryFlaskIcon from '@stories/icons/Mono/ChemistryFlaskIcon.vue';
-import CodeIcon from '@stories/icons/Mono/CodeIcon.vue';
-import CoinsIcon from '@stories/icons/Mono/CoinsIcon.vue';
-import ColorPaletteIcon from '@stories/icons/Mono/ColorPaletteIcon.vue';
-import CompassIcon from '@stories/icons/Mono/CompassIcon.vue';
-import ConstructionWorkerIcon from '@stories/icons/Mono/ConstructionWorkerIcon.vue';
-import ContactsIcon from '@stories/icons/Mono/ContactsIcon.vue';
-import CropIcon from '@stories/icons/Mono/CropIcon.vue';
-import CrossCircleIcon from '@stories/icons/Mono/CrossCircleIcon.vue';
-import CrossIcon from '@stories/icons/Mono/CrossIcon.vue';
-import CubeIcon from '@stories/icons/Mono/CubeIcon.vue';
-import CupIcon from '@stories/icons/Mono/CupIcon.vue';
-import CursorIcon from '@stories/icons/Mono/CursorIcon.vue';
-import LineDashedIcon from '@stories/icons/Mono/LineDashedIcon.vue';
-import LineDiagonalIcon from '@stories/icons/Mono/LineDiagonalIcon.vue';
-import DiamondIcon from '@stories/icons/Mono/DiamondIcon.vue';
-import DiaryIcon from '@stories/icons/Mono/DiaryIcon.vue';
-import DiceIcon from '@stories/icons/Mono/DiceIcon.vue';
-import DigIcon from '@stories/icons/Mono/DigIcon.vue';
-import DislikeIcon from '@stories/icons/Mono/DislikeIcon.vue';
-import DisplayIcon from '@stories/icons/Mono/DisplayIcon.vue';
-import DocumentIcon from '@stories/icons/Mono/DocumentIcon.vue';
-import DollarIcon from '@stories/icons/Mono/DollarIcon.vue';
-import DotsHorizontalIcon from '@stories/icons/Mono/DotsHorizontalIcon.vue';
-import DotsVerticalIcon from '@stories/icons/Mono/DotsVerticalIcon.vue';
-import LineDottedIcon from '@stories/icons/Mono/LineDottedIcon.vue';
-import DownloadIcon from '@stories/icons/Mono/DownloadIcon.vue';
-import DropIcon from '@stories/icons/Mono/DropIcon.vue';
-import DumbbelIcon from '@stories/icons/Mono/DumbbelIcon.vue';
-import EarthIcon from '@stories/icons/Mono/EarthIcon.vue';
-import EditIcon from '@stories/icons/Mono/EditIcon.vue';
-import EyeIcon from '@stories/icons/Mono/EyeIcon.vue';
-import EncyclopediaIcon from '@stories/icons/Mono/EncyclopediaIcon.vue';
-import ExitIcon from '@stories/icons/Mono/ExitIcon.vue';
-import FeedbackIcon from '@stories/icons/Mono/FeedbackIcon.vue';
-import FilterIcon from '@stories/icons/Mono/FilterIcon.vue';
-import FingerprintIcon from '@stories/icons/Mono/FingerprintIcon.vue';
-import FireIcon from '@stories/icons/Mono/FireIcon.vue';
-import FlagIcon from '@stories/icons/Mono/FlagIcon.vue';
-import FlashIcon from '@stories/icons/Mono/FlashIcon.vue';
-import FlashlightIcon from '@stories/icons/Mono/FlashlightIcon.vue';
-import FolderLockIcon from '@stories/icons/Mono/FolderLockIcon.vue';
-import FrameIcon from '@stories/icons/Mono/FrameIcon.vue';
-import FullScreenIcon from '@stories/icons/Mono/FullScreenIcon.vue';
-import GameControllerIcon from '@stories/icons/Mono/GameControllerIcon.vue';
-import GiftIcon from '@stories/icons/Mono/GiftIcon.vue';
-import GlassesIcon from '@stories/icons/Mono/GlassesIcon.vue';
-import HamburgerIcon from '@stories/icons/Mono/HamburgerIcon.vue';
-import HandIcon from '@stories/icons/Mono/HandIcon.vue';
-import HomeIcon from '@stories/icons/Mono/HomeIcon.vue';
-import ImageEditIcon from '@stories/icons/Mono/ImageEditIcon.vue';
-import ImageIcon from '@stories/icons/Mono/ImageIcon.vue';
-import MoveIcon from '@stories/icons/Mono/MoveIcon.vue';
-import DocumentAddIcon from '@stories/icons/Mono/DocumentAddIcon.vue';
-import DocumentDeleteIcon from '@stories/icons/Mono/DocumentDeleteIcon.vue';
-import DocumentEditIcon from '@stories/icons/Mono/DocumentEditIcon.vue';
-import ParagraphIcon from '@stories/icons/Mono/ParagraphIcon.vue';
-import PhoneHandsetIcon from '@stories/icons/Mono/PhoneHandsetIcon.vue';
-import PlusCircleIcon from '@stories/icons/Mono/PlusCircleIcon.vue';
-import PlusIcon from '@stories/icons/Mono/PlusIcon.vue';
-import PointerIcon from '@stories/icons/Mono/PointerIcon.vue';
-import SaveIcon from '@stories/icons/Mono/SaveIcon.vue';
-import SearchIcon from '@stories/icons/Mono/SearchIcon.vue';
-import SettingsIcon from '@stories/icons/Mono/SettingsIcon.vue';
-import SortHorizontalIcon from '@stories/icons/Mono/SortHorizontalIcon.vue';
-import SortDownIcon from '@stories/icons/Mono/SortDownIcon.vue';
-import SortUpIcon from '@stories/icons/Mono/SortUpIcon.vue';
-import SortVerticalIcon from '@stories/icons/Mono/SortVerticalIcon.vue';
-import LineIcon from '@stories/icons/Mono/LineIcon.vue';
-import TableIcon from '@stories/icons/Mono/TableIcon.vue';
-import TrashIcon from '@stories/icons/Mono/TrashIcon.vue';
-import UserIcon from '@stories/icons/Mono/UserIcon.vue';
-import ArrowsVerticalIcon from '@stories/icons/Mono/ArrowsVerticalIcon.vue';
-import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue';
+import Age18Icon from '@icons/Mono/Age18Icon.vue';
+import AlarmIcon from '@icons/Mono/AlarmIcon.vue';
+import AirplaneIcon from '@icons/Mono/AirplaneIcon.vue';
+import ArrowLeftIcon from '@icons/Mono/ArrowLeftIcon.vue';
+import ArrowForwardIcon from '@icons/Mono/ArrowForwardIcon.vue';
+import ArchiveIcon from '@icons/Mono/ArchiveIcon.vue';
+import AnchorLinkIcon from '@icons/Mono/AnchorLinkIcon.vue';
+import AnchorIcon from '@icons/Mono/AnchorIcon.vue';
+import AlignRightIcon from '@icons/Mono/AlignRightIcon.vue';
+import AlignLeftIcon from '@icons/Mono/AlignLeftIcon.vue';
+import AlignCenterIcon from '@icons/Mono/AlignCenterIcon.vue';
+import ArrowRightIcon from '@icons/Mono/ArrowRightIcon.vue';
+import AtIcon from '@icons/Mono/AtIcon.vue';
+import AwardIcon from '@icons/Mono/AwardIcon.vue';
+import BackspaceIcon from '@icons/Mono/BackspaceIcon.vue';
+import BadgeIcon from '@icons/Mono/BadgeIcon.vue';
+import BallFootballIcon from '@icons/Mono/BallFootballIcon.vue';
+import BallIcon from '@icons/Mono/BallIcon.vue';
+import BanknoteIcon from '@icons/Mono/BanknoteIcon.vue';
+import BellIcon from '@icons/Mono/BellIcon.vue';
+import BellOffIcon from '@icons/Mono/BellOffIcon.vue';
+import BoxIcon from '@icons/Mono/BoxIcon.vue';
+import BrightnessIcon from '@icons/Mono/BrightnessIcon.vue';
+import BulbIcon from '@icons/Mono/BulbIcon.vue';
+import CalculatorIcon from '@icons/Mono/CalculatorIcon.vue';
+import CalendarIcon from '@icons/Mono/CalendarIcon.vue';
+import CalendarAddIcon from '@icons/Mono/CalendarAddIcon.vue';
+import CalendarRemoveIcon from '@icons/Mono/CalendarRemoveIcon.vue';
+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 ChatWritingIcon from '@icons/Mono/ChatWritingIcon.vue';
+import CheckMarkIcon from '@icons/Mono/CheckMarkIcon.vue';
+import ChemistryFlaskIcon from '@icons/Mono/ChemistryFlaskIcon.vue';
+import CodeIcon from '@icons/Mono/CodeIcon.vue';
+import CoinsIcon from '@icons/Mono/CoinsIcon.vue';
+import ColorPaletteIcon from '@icons/Mono/ColorPaletteIcon.vue';
+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 CrossIcon from '@icons/Mono/CrossIcon.vue';
+import CubeIcon from '@icons/Mono/CubeIcon.vue';
+import CupIcon from '@icons/Mono/CupIcon.vue';
+import CursorIcon from '@icons/Mono/CursorIcon.vue';
+import LineDashedIcon from '@icons/Mono/LineDashedIcon.vue';
+import LineDiagonalIcon from '@icons/Mono/LineDiagonalIcon.vue';
+import DiamondIcon from '@icons/Mono/DiamondIcon.vue';
+import DiaryIcon from '@icons/Mono/DiaryIcon.vue';
+import DiceIcon from '@icons/Mono/DiceIcon.vue';
+import DigIcon from '@icons/Mono/DigIcon.vue';
+import DislikeIcon from '@icons/Mono/DislikeIcon.vue';
+import DisplayIcon from '@icons/Mono/DisplayIcon.vue';
+import DocumentIcon from '@icons/Mono/DocumentIcon.vue';
+import DollarIcon from '@icons/Mono/DollarIcon.vue';
+import DotsHorizontalIcon from '@icons/Mono/DotsHorizontalIcon.vue';
+import DotsVerticalIcon from '@icons/Mono/DotsVerticalIcon.vue';
+import LineDottedIcon from '@icons/Mono/LineDottedIcon.vue';
+import DownloadIcon from '@icons/Mono/DownloadIcon.vue';
+import DropIcon from '@icons/Mono/DropIcon.vue';
+import DumbbelIcon from '@icons/Mono/DumbbelIcon.vue';
+import EarthIcon from '@icons/Mono/EarthIcon.vue';
+import EditIcon from '@icons/Mono/EditIcon.vue';
+import EyeIcon from '@icons/Mono/EyeIcon.vue';
+import EncyclopediaIcon from '@icons/Mono/EncyclopediaIcon.vue';
+import ExitIcon from '@icons/Mono/ExitIcon.vue';
+import FeedbackIcon from '@icons/Mono/FeedbackIcon.vue';
+import FilterIcon from '@icons/Mono/FilterIcon.vue';
+import FingerprintIcon from '@icons/Mono/FingerprintIcon.vue';
+import FireIcon from '@icons/Mono/FireIcon.vue';
+import FlagIcon from '@icons/Mono/FlagIcon.vue';
+import FlashIcon from '@icons/Mono/FlashIcon.vue';
+import FlashlightIcon from '@icons/Mono/FlashlightIcon.vue';
+import FolderLockIcon from '@icons/Mono/FolderLockIcon.vue';
+import FrameIcon from '@icons/Mono/FrameIcon.vue';
+import FullScreenIcon from '@icons/Mono/FullScreenIcon.vue';
+import GameControllerIcon from '@icons/Mono/GameControllerIcon.vue';
+import GiftIcon from '@icons/Mono/GiftIcon.vue';
+import GlassesIcon from '@icons/Mono/GlassesIcon.vue';
+import HamburgerIcon from '@icons/Mono/HamburgerIcon.vue';
+import HandIcon from '@icons/Mono/HandIcon.vue';
+import HomeIcon from '@icons/Mono/HomeIcon.vue';
+import ImageEditIcon from '@icons/Mono/ImageEditIcon.vue';
+import ImageIcon from '@icons/Mono/ImageIcon.vue';
+import MoveIcon from '@icons/Mono/MoveIcon.vue';
+import DocumentAddIcon from '@icons/Mono/DocumentAddIcon.vue';
+import DocumentDeleteIcon from '@icons/Mono/DocumentDeleteIcon.vue';
+import DocumentEditIcon from '@icons/Mono/DocumentEditIcon.vue';
+import ParagraphIcon from '@icons/Mono/ParagraphIcon.vue';
+import PhoneHandsetIcon from '@icons/Mono/PhoneHandsetIcon.vue';
+import PlusCircleIcon from '@icons/Mono/PlusCircleIcon.vue';
+import PlusIcon from '@icons/Mono/PlusIcon.vue';
+import PointerIcon from '@icons/Mono/PointerIcon.vue';
+import SaveIcon from '@icons/Mono/SaveIcon.vue';
+import SearchIcon from '@icons/Mono/SearchIcon.vue';
+import SettingsIcon from '@icons/Mono/SettingsIcon.vue';
+import SortHorizontalIcon from '@icons/Mono/SortHorizontalIcon.vue';
+import SortDownIcon from '@icons/Mono/SortDownIcon.vue';
+import SortUpIcon from '@icons/Mono/SortUpIcon.vue';
+import SortVerticalIcon from '@icons/Mono/SortVerticalIcon.vue';
+import LineIcon from '@icons/Mono/LineIcon.vue';
+import TableIcon from '@icons/Mono/TableIcon.vue';
+import TrashIcon from '@icons/Mono/TrashIcon.vue';
+import UserIcon from '@icons/Mono/UserIcon.vue';
+import ArrowsVerticalIcon from '@icons/Mono/ArrowsVerticalIcon.vue';
+import TriangleIcon from '@icons/Mono/TriangleIcon.vue';
import Playground from '@/Playground.vue';
-import ArrowShortDownIcon from '@stories/icons/Mono/ArrowShortDownIcon.vue';
+import ArrowShortDownIcon from '@icons/Mono/ArrowDownShortIcon.vue';
+import StarIcon from '@icons/Mono/StarIcon.vue';
+import StarFilledIcon from '@icons/Mono/StarFilledIcon.vue';
+import ArrowLeftShortIcon from '@icons/Mono/ArrowLeftShortIcon.vue';
+import ArrowDoubleLeftShortIcon from '@icons/Mono/ArrowDoubleLeftShortIcon.vue';
+import ArrowRightShortIcon from '@icons/Mono/ArrowRightShortIcon.vue';
+import ArrowDoubleRightShortIcon from '@icons/Mono/ArrowDoubleRightShortIcon.vue';
const gentleIcons = {
Age18Icon,
@@ -120,9 +126,13 @@ const gentleIcons = {
AnchorIcon,
AnchorLinkIcon,
ArchiveIcon,
+ ArrowLeftShortIcon,
+ ArrowDoubleLeftShortIcon,
ArrowForwardIcon,
ArrowLeftIcon,
ArrowRightIcon,
+ ArrowRightShortIcon,
+ ArrowDoubleRightShortIcon,
ArrowShortDownIcon,
ArrowsVerticalIcon,
AtIcon,
@@ -212,6 +222,8 @@ const gentleIcons = {
SaveIcon,
SearchIcon,
SettingsIcon,
+ StarIcon,
+ StarFilledIcon,
SortDownIcon,
SortHorizontalIcon,
SortUpIcon,
diff --git a/src/Playground.vue b/src/Playground.vue
index bc22e0da78f24c5e2aab222f6f2007c951a30c02..cdb68c000d8a865181dc8ca8a20d8127812c5a88 100644
--- a/src/Playground.vue
+++ b/src/Playground.vue
@@ -1,23 +1,25 @@
<script setup lang="ts">
-import Modal from '@stories/components/Modal/Modal.vue';
-import ToggleSwitch from '@stories/components/ToggleSwitch/ToggleSwitch.vue';
-import AnchorLinkIcon from '@stories/icons/Mono/AnchorLinkIcon.vue';
-import SelectButton from '@stories/components/SelectButton/SelectButton.vue';
-import Drawer from '@stories/components/Drawer/Drawer.vue';
-import Slider from '@stories/components/Slider/Slider.vue';
-import TrashIcon from '@stories/icons/Mono/TrashIcon.vue';
-import CrossIcon from '@stories/icons/Mono/CrossIcon.vue';
-import Button from '@stories/components/Button/Button.vue';
-import MenuDial from '@stories/components/MenuDial/MenuDial.vue';
-import Popup from '@stories/components/Popup/Popup.vue';
-import Table from '@stories/components/Table/Table.vue';
+import Modal from '@components/Modal/Modal.vue';
+import ToggleSwitch from '@components/ToggleSwitch/ToggleSwitch.vue';
+import AnchorLinkIcon from '@icons/Mono/AnchorLinkIcon.vue';
+import SelectButton from '@components/SelectButton/SelectButton.vue';
+import Drawer from '@components/Drawer/Drawer.vue';
+import Slider from '@components/Slider/Slider.vue';
+import TrashIcon from '@icons/Mono/TrashIcon.vue';
+import CrossIcon from '@icons/Mono/CrossIcon.vue';
+import Button from '@components/Button/Button.vue';
+import MenuDial from '@components/MenuDial/MenuDial.vue';
+import Popup from '@components/Popup/Popup.vue';
+import Table from '@components/Table/Table.vue';
import { ref } from 'vue';
import type { ISBOption, ISliderOptions, ITableColumn } from '@interfaces/componentsProp';
-import Checkbox from '@stories/components/Checkbox/Checkbox.vue';
-import Tag from '@stories/components/Tag/Tag.vue';
-import Select from '@stories/components/Select/Select.vue';
-import AtIcon from '@stories/icons/Mono/AtIcon.vue';
-import Knob from '@stories/components/Knob/Knob.vue';
+import Checkbox from '@components/Checkbox/Checkbox.vue';
+import Tag from '@components/Tag/Tag.vue';
+import Select from '@components/Select/Select.vue';
+import AtIcon from '@icons/Mono/AtIcon.vue';
+import Knob from '@components/Knob/Knob.vue';
+import Rating from '@components/Rating/Rating.vue';
+import HomeIcon from '@icons/Mono/HomeIcon.vue';
const visibleDrawer = ref(false);
const sliderOptions: ISliderOptions[] = [
@@ -111,7 +113,7 @@ const tableColumns: ITableColumn[] = [
type: 'text',
},
];
-const tableData = [
+const tableData = ref([
[
{
value: 'Pete',
@@ -182,7 +184,7 @@ const tableData = [
value: 'Russia',
},
],
-];
+]);
const activeCheckbox = ref();
const selectOptions = [
{
@@ -192,12 +194,20 @@ const selectOptions = [
value: 'Second',
},
];
-const knob = ref();
+const knob = ref(0);
</script>
<template>
<h2 class="title gradient-text">Playground</h2>
- <Knob v-model:value="knob" />
+ <Rating theme="red">
+ <template #offIcon>
+ <CrossIcon color="red" />
+ </template>
+ <template #onIcon>
+ <HomeIcon color="blue" />
+ </template>
+ </Rating>
+ <Knob v-model="knob" />
<Select :options="selectOptions" theme="sky">
<template #icon-left-First>
<AtIcon color="#3aa" size="20" />
@@ -215,7 +225,7 @@ const knob = ref();
show-all-lines
:columns="tableColumns"
darknessTextColor="500"
- :data="tableData"
+ v-model="tableData"
fontSize="36px"
theme="black"
stripedRows
@@ -224,7 +234,7 @@ const knob = ref();
show-all-lines
:columns="tableColumns"
darknessTextColor="500"
- :data="tableData"
+ v-model="tableData"
fontSize="20px"
theme="black"
stripedRows
diff --git a/src/common/constants/icons.ts b/src/common/constants/icons.ts
index 41c5605d90d6a8359dfb517fbc6148dfe8b8a3e4..9ae57d651b1f9edee175925585210415f0134d62 100644
--- a/src/common/constants/icons.ts
+++ b/src/common/constants/icons.ts
@@ -1,114 +1,116 @@
import type { Component } from 'vue';
-import Age18Icon from '@stories/icons/Mono/Age18Icon.vue';
-import AirplaneIcon from '@stories/icons/Mono/AirplaneIcon.vue';
-import AlarmIcon from '@stories/icons/Mono/AlarmIcon.vue';
-import AlignCenterIcon from '@stories/icons/Mono/AlignCenterIcon.vue';
-import AlignLeftIcon from '@stories/icons/Mono/AlignLeftIcon.vue';
-import AlignRightIcon from '@stories/icons/Mono/AlignRightIcon.vue';
-import AnchorIcon from '@stories/icons/Mono/AnchorIcon.vue';
-import AnchorLinkIcon from '@stories/icons/Mono/AnchorLinkIcon.vue';
-import ArchiveIcon from '@stories/icons/Mono/ArchiveIcon.vue';
-import ArrowForwardIcon from '@stories/icons/Mono/ArrowForwardIcon.vue';
-import ArrowLeftIcon from '@stories/icons/Mono/ArrowLeftIcon.vue';
-import ArrowRightIcon from '@stories/icons/Mono/ArrowRightIcon.vue';
-import ArrowsVerticalIcon from '@stories/icons/Mono/ArrowsVerticalIcon.vue';
-import AtIcon from '@stories/icons/Mono/AtIcon.vue';
-import AwardIcon from '@stories/icons/Mono/AwardIcon.vue';
-import BackspaceIcon from '@stories/icons/Mono/BackspaceIcon.vue';
-import BadgeIcon from '@stories/icons/Mono/BadgeIcon.vue';
-import BallFootballIcon from '@stories/icons/Mono/BallFootballIcon.vue';
-import BallIcon from '@stories/icons/Mono/BallIcon.vue';
-import BanknoteIcon from '@stories/icons/Mono/BanknoteIcon.vue';
-import BellIcon from '@stories/icons/Mono/BellIcon.vue';
-import BellOffIcon from '@stories/icons/Mono/BellOffIcon.vue';
-import BoxIcon from '@stories/icons/Mono/BoxIcon.vue';
-import BrightnessIcon from '@stories/icons/Mono/BrightnessIcon.vue';
-import BulbIcon from '@stories/icons/Mono/BulbIcon.vue';
-import CalculatorIcon from '@stories/icons/Mono/CalculatorIcon.vue';
-import CalendarAddIcon from '@stories/icons/Mono/CalendarAddIcon.vue';
-import CalendarIcon from '@stories/icons/Mono/CalendarIcon.vue';
-import CalendarRemoveIcon from '@stories/icons/Mono/CalendarRemoveIcon.vue';
-import CardsIcon from '@stories/icons/Mono/CardsIcon.vue';
-import ChartLineIcon from '@stories/icons/Mono/ChartLineIcon.vue';
-import ChartPieIcon from '@stories/icons/Mono/ChartPieIcon.vue';
-import ChatIcon from '@stories/icons/Mono/ChatIcon.vue';
-import CrossCircleIcon from '@stories/icons/Mono/CrossCircleIcon.vue';
-import CropIcon from '@stories/icons/Mono/CropIcon.vue';
-import ChatWritingIcon from '@stories/icons/Mono/ChatWritingIcon.vue';
-import CheckMarkIcon from '@stories/icons/Mono/CheckMarkIcon.vue';
-import ChemistryFlaskIcon from '@stories/icons/Mono/ChemistryFlaskIcon.vue';
-import CodeIcon from '@stories/icons/Mono/CodeIcon.vue';
-import CoinsIcon from '@stories/icons/Mono/CoinsIcon.vue';
-import ColorPaletteIcon from '@stories/icons/Mono/ColorPaletteIcon.vue';
-import CompassIcon from '@stories/icons/Mono/CompassIcon.vue';
-import ConstructionWorkerIcon from '@stories/icons/Mono/ConstructionWorkerIcon.vue';
-import ContactsIcon from '@stories/icons/Mono/ContactsIcon.vue';
-import CrossIcon from '@stories/icons/Mono/CrossIcon.vue';
-import CubeIcon from '@stories/icons/Mono/CubeIcon.vue';
-import CupIcon from '@stories/icons/Mono/CupIcon.vue';
-import CursorIcon from '@stories/icons/Mono/CursorIcon.vue';
-import DiamondIcon from '@stories/icons/Mono/DiamondIcon.vue';
-import DiaryIcon from '@stories/icons/Mono/DiaryIcon.vue';
-import DiceIcon from '@stories/icons/Mono/DiceIcon.vue';
-import DigIcon from '@stories/icons/Mono/DigIcon.vue';
-import DislikeIcon from '@stories/icons/Mono/DislikeIcon.vue';
-import DisplayIcon from '@stories/icons/Mono/DisplayIcon.vue';
-import DocumentIcon from '@stories/icons/Mono/DocumentIcon.vue';
-import DocumentAddIcon from '@stories/icons/Mono/DocumentAddIcon.vue';
-import DocumentDeleteIcon from '@stories/icons/Mono/DocumentDeleteIcon.vue';
-import DocumentEditIcon from '@stories/icons/Mono/DocumentEditIcon.vue';
-import DollarIcon from '@stories/icons/Mono/DollarIcon.vue';
-import DotsHorizontalIcon from '@stories/icons/Mono/DotsHorizontalIcon.vue';
-import DotsVerticalIcon from '@stories/icons/Mono/DotsVerticalIcon.vue';
-import DownloadIcon from '@stories/icons/Mono/DownloadIcon.vue';
-import DropIcon from '@stories/icons/Mono/DropIcon.vue';
-import DumbbelIcon from '@stories/icons/Mono/DumbbelIcon.vue';
-import EarthIcon from '@stories/icons/Mono/EarthIcon.vue';
-import EditIcon from '@stories/icons/Mono/EditIcon.vue';
-import EncyclopediaIcon from '@stories/icons/Mono/EncyclopediaIcon.vue';
-import ExitIcon from '@stories/icons/Mono/ExitIcon.vue';
-import EyeIcon from '@stories/icons/Mono/EyeIcon.vue';
-import FeedbackIcon from '@stories/icons/Mono/FeedbackIcon.vue';
-import FilterIcon from '@stories/icons/Mono/FilterIcon.vue';
-import FingerprintIcon from '@stories/icons/Mono/FingerprintIcon.vue';
-import FireIcon from '@stories/icons/Mono/FireIcon.vue';
-import FlagIcon from '@stories/icons/Mono/FlagIcon.vue';
-import FlashIcon from '@stories/icons/Mono/FlashIcon.vue';
-import FlashlightIcon from '@stories/icons/Mono/FlashlightIcon.vue';
-import FolderLockIcon from '@stories/icons/Mono/FolderLockIcon.vue';
-import FrameIcon from '@stories/icons/Mono/FrameIcon.vue';
-import FullScreenIcon from '@stories/icons/Mono/FullScreenIcon.vue';
-import GameControllerIcon from '@stories/icons/Mono/GameControllerIcon.vue';
-import GiftIcon from '@stories/icons/Mono/GiftIcon.vue';
-import GlassesIcon from '@stories/icons/Mono/GlassesIcon.vue';
-import HamburgerIcon from '@stories/icons/Mono/HamburgerIcon.vue';
-import HandIcon from '@stories/icons/Mono/HandIcon.vue';
-import HomeIcon from '@stories/icons/Mono/HomeIcon.vue';
-import ImageIcon from '@stories/icons/Mono/ImageIcon.vue';
-import ImageEditIcon from '@stories/icons/Mono/ImageEditIcon.vue';
-import LineIcon from '@stories/icons/Mono/LineIcon.vue';
-import LineDashedIcon from '@stories/icons/Mono/LineDashedIcon.vue';
-import LineDottedIcon from '@stories/icons/Mono/LineDottedIcon.vue';
-import LineDiagonalIcon from '@stories/icons/Mono/LineDiagonalIcon.vue';
-import MoveIcon from '@stories/icons/Mono/MoveIcon.vue';
-import ParagraphIcon from '@stories/icons/Mono/ParagraphIcon.vue';
-import PhoneHandsetIcon from '@stories/icons/Mono/PhoneHandsetIcon.vue';
-import PlusCircleIcon from '@stories/icons/Mono/PlusCircleIcon.vue';
-import PlusIcon from '@stories/icons/Mono/PlusIcon.vue';
-import PointerIcon from '@stories/icons/Mono/PointerIcon.vue';
-import SaveIcon from '@stories/icons/Mono/SaveIcon.vue';
-import SettingsIcon from '@stories/icons/Mono/SettingsIcon.vue';
-import TableIcon from '@stories/icons/Mono/TableIcon.vue';
-import TrashIcon from '@stories/icons/Mono/TrashIcon.vue';
-import UserIcon from '@stories/icons/Mono/UserIcon.vue';
-import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue';
-import SortHorizontalIcon from '@stories/icons/Mono/SortHorizontalIcon.vue';
-import SortDownIcon from '@stories/icons/Mono/SortDownIcon.vue';
-import SortUpIcon from '@stories/icons/Mono/SortUpIcon.vue';
-import SortVerticalIcon from '@stories/icons/Mono/SortVerticalIcon.vue';
-import ArrowShortDownIcon from '@stories/icons/Mono/ArrowShortDownIcon.vue';
-import SearchIcon from '@stories/icons/Mono/SearchIcon.vue';
+import Age18Icon from '@icons/Mono/Age18Icon.vue';
+import AirplaneIcon from '@icons/Mono/AirplaneIcon.vue';
+import AlarmIcon from '@icons/Mono/AlarmIcon.vue';
+import AlignCenterIcon from '@icons/Mono/AlignCenterIcon.vue';
+import AlignLeftIcon from '@icons/Mono/AlignLeftIcon.vue';
+import AlignRightIcon from '@icons/Mono/AlignRightIcon.vue';
+import AnchorIcon from '@icons/Mono/AnchorIcon.vue';
+import AnchorLinkIcon from '@icons/Mono/AnchorLinkIcon.vue';
+import ArchiveIcon from '@icons/Mono/ArchiveIcon.vue';
+import ArrowForwardIcon from '@icons/Mono/ArrowForwardIcon.vue';
+import ArrowLeftIcon from '@icons/Mono/ArrowLeftIcon.vue';
+import ArrowRightIcon from '@icons/Mono/ArrowRightIcon.vue';
+import ArrowsVerticalIcon from '@icons/Mono/ArrowsVerticalIcon.vue';
+import AtIcon from '@icons/Mono/AtIcon.vue';
+import AwardIcon from '@icons/Mono/AwardIcon.vue';
+import BackspaceIcon from '@icons/Mono/BackspaceIcon.vue';
+import BadgeIcon from '@icons/Mono/BadgeIcon.vue';
+import BallFootballIcon from '@icons/Mono/BallFootballIcon.vue';
+import BallIcon from '@icons/Mono/BallIcon.vue';
+import BanknoteIcon from '@icons/Mono/BanknoteIcon.vue';
+import BellIcon from '@icons/Mono/BellIcon.vue';
+import BellOffIcon from '@icons/Mono/BellOffIcon.vue';
+import BoxIcon from '@icons/Mono/BoxIcon.vue';
+import BrightnessIcon from '@icons/Mono/BrightnessIcon.vue';
+import BulbIcon from '@icons/Mono/BulbIcon.vue';
+import CalculatorIcon from '@icons/Mono/CalculatorIcon.vue';
+import CalendarAddIcon from '@icons/Mono/CalendarAddIcon.vue';
+import CalendarIcon from '@icons/Mono/CalendarIcon.vue';
+import CalendarRemoveIcon from '@icons/Mono/CalendarRemoveIcon.vue';
+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 CropIcon from '@icons/Mono/CropIcon.vue';
+import ChatWritingIcon from '@icons/Mono/ChatWritingIcon.vue';
+import CheckMarkIcon from '@icons/Mono/CheckMarkIcon.vue';
+import ChemistryFlaskIcon from '@icons/Mono/ChemistryFlaskIcon.vue';
+import CodeIcon from '@icons/Mono/CodeIcon.vue';
+import CoinsIcon from '@icons/Mono/CoinsIcon.vue';
+import ColorPaletteIcon from '@icons/Mono/ColorPaletteIcon.vue';
+import CompassIcon from '@icons/Mono/CompassIcon.vue';
+import ConstructionWorkerIcon from '@icons/Mono/ConstructionWorkerIcon.vue';
+import ContactsIcon from '@icons/Mono/ContactsIcon.vue';
+import CrossIcon from '@icons/Mono/CrossIcon.vue';
+import CubeIcon from '@icons/Mono/CubeIcon.vue';
+import CupIcon from '@icons/Mono/CupIcon.vue';
+import CursorIcon from '@icons/Mono/CursorIcon.vue';
+import DiamondIcon from '@icons/Mono/DiamondIcon.vue';
+import DiaryIcon from '@icons/Mono/DiaryIcon.vue';
+import DiceIcon from '@icons/Mono/DiceIcon.vue';
+import DigIcon from '@icons/Mono/DigIcon.vue';
+import DislikeIcon from '@icons/Mono/DislikeIcon.vue';
+import DisplayIcon from '@icons/Mono/DisplayIcon.vue';
+import DocumentIcon from '@icons/Mono/DocumentIcon.vue';
+import DocumentAddIcon from '@icons/Mono/DocumentAddIcon.vue';
+import DocumentDeleteIcon from '@icons/Mono/DocumentDeleteIcon.vue';
+import DocumentEditIcon from '@icons/Mono/DocumentEditIcon.vue';
+import DollarIcon from '@icons/Mono/DollarIcon.vue';
+import DotsHorizontalIcon from '@icons/Mono/DotsHorizontalIcon.vue';
+import DotsVerticalIcon from '@icons/Mono/DotsVerticalIcon.vue';
+import DownloadIcon from '@icons/Mono/DownloadIcon.vue';
+import DropIcon from '@icons/Mono/DropIcon.vue';
+import DumbbelIcon from '@icons/Mono/DumbbelIcon.vue';
+import EarthIcon from '@icons/Mono/EarthIcon.vue';
+import EditIcon from '@icons/Mono/EditIcon.vue';
+import EncyclopediaIcon from '@icons/Mono/EncyclopediaIcon.vue';
+import ExitIcon from '@icons/Mono/ExitIcon.vue';
+import EyeIcon from '@icons/Mono/EyeIcon.vue';
+import FeedbackIcon from '@icons/Mono/FeedbackIcon.vue';
+import FilterIcon from '@icons/Mono/FilterIcon.vue';
+import FingerprintIcon from '@icons/Mono/FingerprintIcon.vue';
+import FireIcon from '@icons/Mono/FireIcon.vue';
+import FlagIcon from '@icons/Mono/FlagIcon.vue';
+import FlashIcon from '@icons/Mono/FlashIcon.vue';
+import FlashlightIcon from '@icons/Mono/FlashlightIcon.vue';
+import FolderLockIcon from '@icons/Mono/FolderLockIcon.vue';
+import FrameIcon from '@icons/Mono/FrameIcon.vue';
+import FullScreenIcon from '@icons/Mono/FullScreenIcon.vue';
+import GameControllerIcon from '@icons/Mono/GameControllerIcon.vue';
+import GiftIcon from '@icons/Mono/GiftIcon.vue';
+import GlassesIcon from '@icons/Mono/GlassesIcon.vue';
+import HamburgerIcon from '@icons/Mono/HamburgerIcon.vue';
+import HandIcon from '@icons/Mono/HandIcon.vue';
+import HomeIcon from '@icons/Mono/HomeIcon.vue';
+import ImageIcon from '@icons/Mono/ImageIcon.vue';
+import ImageEditIcon from '@icons/Mono/ImageEditIcon.vue';
+import LineIcon from '@icons/Mono/LineIcon.vue';
+import LineDashedIcon from '@icons/Mono/LineDashedIcon.vue';
+import LineDottedIcon from '@icons/Mono/LineDottedIcon.vue';
+import LineDiagonalIcon from '@icons/Mono/LineDiagonalIcon.vue';
+import MoveIcon from '@icons/Mono/MoveIcon.vue';
+import ParagraphIcon from '@icons/Mono/ParagraphIcon.vue';
+import PhoneHandsetIcon from '@icons/Mono/PhoneHandsetIcon.vue';
+import PlusCircleIcon from '@icons/Mono/PlusCircleIcon.vue';
+import PlusIcon from '@icons/Mono/PlusIcon.vue';
+import PointerIcon from '@icons/Mono/PointerIcon.vue';
+import SaveIcon from '@icons/Mono/SaveIcon.vue';
+import SettingsIcon from '@icons/Mono/SettingsIcon.vue';
+import TableIcon from '@icons/Mono/TableIcon.vue';
+import TrashIcon from '@icons/Mono/TrashIcon.vue';
+import UserIcon from '@icons/Mono/UserIcon.vue';
+import TriangleIcon from '@icons/Mono/TriangleIcon.vue';
+import SortHorizontalIcon from '@icons/Mono/SortHorizontalIcon.vue';
+import SortDownIcon from '@icons/Mono/SortDownIcon.vue';
+import SortUpIcon from '@icons/Mono/SortUpIcon.vue';
+import SortVerticalIcon from '@icons/Mono/SortVerticalIcon.vue';
+import ArrowShortDownIcon from '@icons/Mono/ArrowDownShortIcon.vue';
+import SearchIcon from '@icons/Mono/SearchIcon.vue';
+import StarIcon from '@icons/Mono/StarIcon.vue';
+import StarFilledIcon from '@icons/Mono/StarFilledIcon.vue';
export const iconsSet: Record<string, Component> = {
Age18: Age18Icon,
@@ -210,12 +212,14 @@ export const iconsSet: Record<string, Component> = {
Plus: PlusIcon,
Pointer: PointerIcon,
Save: SaveIcon,
- SearchIcon,
+ Search: SearchIcon,
Settings: SettingsIcon,
- SortDownIcon,
- SortHorizontalIcon,
- SortUpIcon,
- SortVerticalIcon,
+ Star: StarIcon,
+ StarFilled: StarFilledIcon,
+ SortDown: SortDownIcon,
+ SortHorizontal: SortHorizontalIcon,
+ SortUp: SortUpIcon,
+ SortVertical: SortVerticalIcon,
Table: TableIcon,
Trash: TrashIcon,
Triangle: TriangleIcon,
diff --git a/src/common/interfaces/common.ts b/src/common/interfaces/common.ts
index cb8b4722869060f1ece1258a6894e4e4e50be7a2..cd3723629357a19406b4cae9cd1a10817bd35dc4 100644
--- a/src/common/interfaces/common.ts
+++ b/src/common/interfaces/common.ts
@@ -1,6 +1,6 @@
import type { iconsSet } from '@/common/constants/icons';
-export type TIcons = keyof typeof iconsSet;
+export type TIcon = keyof typeof iconsSet;
export type TThemeColor =
| 'white'
diff --git a/src/common/interfaces/componentsProp.ts b/src/common/interfaces/componentsProp.ts
index 3b7b90a1a0febd3d52de2597fcfcc7acadd0935d..ae44f557bff7cae5428a33904cd4a2d4453afec2 100644
--- a/src/common/interfaces/componentsProp.ts
+++ b/src/common/interfaces/componentsProp.ts
@@ -1,4 +1,4 @@
-import type { TDarkness, TIcons, TPosition, TTextStyle, TThemeColor } from '@interfaces/common';
+import type { TDarkness, TIcon, TPosition, TTextStyle, TThemeColor } from '@interfaces/common';
export interface ITableColumn {
name: string;
@@ -34,8 +34,8 @@ export interface ITreeItem {
color?: TThemeColor;
textStyle?: TTextStyle;
isTriangleToColor?: boolean;
- iconBefore?: TIcons;
- iconAfter?: TIcons;
+ iconBefore?: TIcon;
+ iconAfter?: TIcon;
iconColor?: TThemeColor;
children?: ITreeItem[];
darknessColor?: TDarkness;
@@ -55,7 +55,7 @@ export interface IMDItemProps {
onClick?: () => void;
}
-export interface IKnobColorGap {
+export interface IColorGap {
start: number;
end: number;
color: TThemeColor;
@@ -66,8 +66,8 @@ export interface ISelectOption {
value: string;
label?: string;
group?: string;
- iconLeft?: TIcons;
- iconRight?: TIcons;
+ iconLeft?: TIcon;
+ iconRight?: TIcon;
iconLeftColor?: TThemeColor;
iconRightColor?: TThemeColor;
color?: TThemeColor;
@@ -81,8 +81,8 @@ export interface ISelectGroup {
nameColor?: TThemeColor;
background?: TThemeColor;
items?: ISelectOption[];
- iconLeft?: TIcons;
- iconRight?: TIcons;
+ iconLeft?: TIcon;
+ iconRight?: TIcon;
iconLeftColor?: TThemeColor;
iconRightColor?: TThemeColor;
}
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 46309d8b77c67b3d7b3c57f8887ccb45e1e14489..48ee7d80727b77370c53a4d7f9cede8214096817 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -3,7 +3,7 @@ import type {
TDarkness,
TDirection,
TExpandedPosition,
- TIcons,
+ TIcon,
TPosition,
TSize,
TTextStyle,
@@ -11,7 +11,7 @@ import type {
TThemeColorNoWhite,
} from '@interfaces/common';
import type {
- IKnobColorGap,
+ IColorGap,
IMDItemProps,
ISBOption,
ISelectGroup,
@@ -23,8 +23,8 @@ import type {
} from '@interfaces/componentsProp';
export interface ITableProps {
+ data?: ITableItem[][];
columns: ITableColumn[];
- data: ITableItem[][];
multipleSort?: boolean;
gap?: string;
size?: TSize;
@@ -58,6 +58,16 @@ export interface ITIProps {
themeColor: string;
}
+export interface IPaginatorProps {
+ total?: number;
+ itemsPerPage?: number;
+ itemsPerPageOptions?: number[];
+ size?: TSize;
+ fontSize?: string;
+ theme?: TThemeColor;
+ darknessTheme?: TDarkness;
+}
+
export interface IMDProps {
items: IMDItemProps[];
size?: TSize;
@@ -75,7 +85,7 @@ export interface IKnobProps {
step?: number;
size?: TSize;
theme?: TThemeColor;
- colorGaps?: IKnobColorGap[];
+ colorGaps?: IColorGap[];
negativeTheme?: TThemeColor;
color?: TThemeColor;
background?: string;
@@ -115,7 +125,7 @@ export interface IDrawerProps {
darknessTextColor?: TDarkness;
modal?: boolean;
dismissible?: boolean;
- closeIcon?: TIcons;
+ closeIcon?: TIcon;
headerDivider?: boolean;
footerDivider?: boolean;
}
@@ -129,7 +139,7 @@ export interface IModalProps {
height?: string;
position?: TExpandedPosition;
dismissible?: boolean;
- closeIcon?: TIcons;
+ closeIcon?: TIcon;
headerDivider?: boolean;
}
@@ -152,18 +162,18 @@ export interface ISelectProps {
groups?: ISelectGroup[];
width?: string;
placeholder?: string;
- openIcon?: TIcons;
+ openIcon?: TIcon;
size?: TSize;
+ fontSize?: string;
name?: string;
theme?: TThemeColor;
- background?: TThemeColor;
placeholderColor?: TThemeColor;
openIconColor?: TThemeColor;
darknessTheme?: TDarkness;
- darknessBackground?: TDarkness;
darknessOpenIcon?: TDarkness;
filtered?: boolean;
disabled?: boolean;
+ noHighlight?: boolean;
}
export interface ISBProps {
@@ -193,6 +203,34 @@ export interface IButtonProps {
darknessTextColor?: TDarkness;
}
+export interface IProgressBarProps {
+ value: number;
+ max?: number;
+ width?: string;
+ height?: string;
+ size?: TSize;
+ fontSize?: string;
+ colorGaps?: IColorGap[];
+ colorInactiveGaps?: IColorGap[];
+ theme?: TThemeColor;
+ inactiveTheme?: TThemeColor;
+ darknessTheme?: TDarkness;
+ darknessInactiveTheme?: TDarkness;
+ showLabel?: boolean;
+ labelBefore?: string;
+ labelAfter?: string;
+ noBorder?: boolean;
+}
+
+export interface IRatingProps {
+ count?: number;
+ size?: TSize;
+ gap?: string;
+ theme?: TThemeColor;
+ offTheme?: TThemeColor;
+ darknessTheme?: TDarkness;
+}
+
export interface ITSProps {
size?: TSize;
theme?: TThemeColorNoWhite;
@@ -206,8 +244,8 @@ export interface ITagProps {
value?: string;
size?: TSize;
rounded?: boolean;
- iconLeft?: TIcons;
- iconRight?: TIcons;
+ iconLeft?: TIcon;
+ iconRight?: TIcon;
theme?: TThemeColor;
background?: TThemeColor;
border?: TThemeColor;
diff --git a/src/stories/components/Button/Button.stories.ts b/src/components/Button/Button.stories.ts
similarity index 100%
rename from src/stories/components/Button/Button.stories.ts
rename to src/components/Button/Button.stories.ts
diff --git a/src/stories/components/Button/Button.vue b/src/components/Button/Button.vue
similarity index 100%
rename from src/stories/components/Button/Button.vue
rename to src/components/Button/Button.vue
diff --git a/src/stories/components/Checkbox/Checkbox.stories.ts b/src/components/Checkbox/Checkbox.stories.ts
similarity index 98%
rename from src/stories/components/Checkbox/Checkbox.stories.ts
rename to src/components/Checkbox/Checkbox.stories.ts
index 9bdc8ac40bfcd94ca1ed81a050b53659c1f236bc..d377f189891fee55b25b34b67b18f90403832731 100644
--- a/src/stories/components/Checkbox/Checkbox.stories.ts
+++ b/src/components/Checkbox/Checkbox.stories.ts
@@ -14,7 +14,6 @@ const meta: Meta = {
},
},
argTypes: {
- active: { control: 'boolean' },
invalid: { control: 'boolean' },
disabled: { control: 'boolean' },
label: { control: 'text' },
diff --git a/src/stories/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
similarity index 97%
rename from src/stories/components/Checkbox/Checkbox.vue
rename to src/components/Checkbox/Checkbox.vue
index d4572c1c4819c03fe1b2e8ac800db6846098db34..b1224269343c07cbcdc4209fd284a49173b1c47c 100644
--- a/src/stories/components/Checkbox/Checkbox.vue
+++ b/src/components/Checkbox/Checkbox.vue
@@ -2,7 +2,7 @@
import type { ICheckboxProps } from '@interfaces/componentsProps';
import { computed } from 'vue';
import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
-import CheckMarkIcon from '@stories/icons/Mono/CheckMarkIcon.vue';
+import CheckMarkIcon from '@icons/Mono/CheckMarkIcon.vue';
const props = withDefaults(defineProps<ICheckboxProps>(), {
label: '',
@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<ICheckboxProps>(), {
darknessTextColor: '500',
darknessBorder: '500',
});
-const active = defineModel('active');
+const active = defineModel();
// watch(, () => {});
const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
const activeThemeColor = computed(() => convertThemeToColor(props.activeTheme, props.darknessActiveTheme));
diff --git a/src/stories/components/Divider/Divider.stories.ts b/src/components/Divider/Divider.stories.ts
similarity index 100%
rename from src/stories/components/Divider/Divider.stories.ts
rename to src/components/Divider/Divider.stories.ts
diff --git a/src/stories/components/Divider/Divider.vue b/src/components/Divider/Divider.vue
similarity index 100%
rename from src/stories/components/Divider/Divider.vue
rename to src/components/Divider/Divider.vue
diff --git a/src/stories/components/Drawer/Drawer.stories.ts b/src/components/Drawer/Drawer.stories.ts
similarity index 100%
rename from src/stories/components/Drawer/Drawer.stories.ts
rename to src/components/Drawer/Drawer.stories.ts
diff --git a/src/stories/components/Drawer/Drawer.vue b/src/components/Drawer/Drawer.vue
similarity index 100%
rename from src/stories/components/Drawer/Drawer.vue
rename to src/components/Drawer/Drawer.vue
diff --git a/src/stories/components/Knob/Knob.stories.ts b/src/components/Knob/Knob.stories.ts
similarity index 96%
rename from src/stories/components/Knob/Knob.stories.ts
rename to src/components/Knob/Knob.stories.ts
index eafa6c663974f1f64d63e0b246b9be7858215723..8376357dcd64c5f7d3fed34bdfead8ba57f19bbd 100644
--- a/src/stories/components/Knob/Knob.stories.ts
+++ b/src/components/Knob/Knob.stories.ts
@@ -9,7 +9,7 @@ const meta: Meta = {
parameters: {
docs: {
description: {
- component: 'A component that is used as a Knob. Can be used with icon.',
+ component: 'A component to define number inputs with a dial.',
},
},
},
@@ -18,7 +18,6 @@ const meta: Meta = {
showLabel: { control: 'boolean' },
colorAsTheme: { control: 'boolean' },
textBold: { control: 'boolean' },
- value: { control: 'number' },
min: { control: 'number' },
max: { control: 'number' },
step: { control: 'number' },
diff --git a/src/stories/components/Knob/Knob.vue b/src/components/Knob/Knob.vue
similarity index 95%
rename from src/stories/components/Knob/Knob.vue
rename to src/components/Knob/Knob.vue
index 169c6aef6bb0e7b7cbf63249105a1810218a801c..f941d7007b83a158a95420187f63ca7b5dc2d897 100644
--- a/src/stories/components/Knob/Knob.vue
+++ b/src/components/Knob/Knob.vue
@@ -2,17 +2,10 @@
import type { IKnobProps } from '@interfaces/componentsProps';
import { computed, ref, type Ref } from 'vue';
import { convertThemeToColor } from '@helpers/common';
-import {
- calcCenter,
- calcStart,
- calcNewValue,
- calcThemeColor,
- calcContainerSize,
-} from '@stories/components/Knob/helpers';
-import Button from '@stories/components/Button/Button.vue';
+import { calcCenter, calcStart, calcNewValue, calcThemeColor, calcContainerSize } from '@components/Knob/helpers';
+import Button from '@components/Button/Button.vue';
const props = withDefaults(defineProps<IKnobProps>(), {
- value: 0,
min: 0,
max: 5,
step: 1,
@@ -29,7 +22,7 @@ const props = withDefaults(defineProps<IKnobProps>(), {
colorAsTheme: false,
textBold: false,
});
-const value = defineModel<number>('value', {
+const value = defineModel<number>({
default: 0,
}) as Ref<number>;
@@ -153,6 +146,7 @@ const onPointerDown = ($event: MouseEvent) => {
border-radius: 50%;
background: v-bind(backgroundCircle);
clip-path: polygon(0 0, 0 100%, 50% 50%, 50% 50%, 100% 100%, 100% 0);
+ cursor: pointer;
}
.selected {
position: absolute;
diff --git a/src/stories/components/Knob/helpers.ts b/src/components/Knob/helpers.ts
similarity index 95%
rename from src/stories/components/Knob/helpers.ts
rename to src/components/Knob/helpers.ts
index 2a53cd0e573c8d96b940eb92d5c33344fa39e2c9..56cb24e280ebb755686755c77e9260ac9e872ed6 100644
--- a/src/stories/components/Knob/helpers.ts
+++ b/src/components/Knob/helpers.ts
@@ -1,6 +1,6 @@
import { convertThemeToColor } from '@helpers/common';
import { EThemeColor, type TDarkness, type TSize, type TThemeColor } from '@interfaces/common';
-import type { IKnobColorGap } from '@interfaces/componentsProp';
+import type { IColorGap } from '@interfaces/componentsProp';
export const calcNewValue = (
event: MouseEvent,
@@ -40,7 +40,7 @@ export const calcStart = (container: Element) => {
};
export const calcThemeColor = (
- colorGaps: IKnobColorGap[] | undefined,
+ colorGaps: IColorGap[] | undefined,
theme: TThemeColor,
darknessTheme: TDarkness,
value: number,
diff --git a/src/stories/components/MenuDial/MenuDial.stories.ts b/src/components/MenuDial/MenuDial.stories.ts
similarity index 100%
rename from src/stories/components/MenuDial/MenuDial.stories.ts
rename to src/components/MenuDial/MenuDial.stories.ts
diff --git a/src/stories/components/MenuDial/MenuDial.vue b/src/components/MenuDial/MenuDial.vue
similarity index 98%
rename from src/stories/components/MenuDial/MenuDial.vue
rename to src/components/MenuDial/MenuDial.vue
index 95a085618b3678e2e8573cf44b5268466abb00a3..c7bbc57d91d188c760dc1ce4489c6603932d2795 100644
--- a/src/stories/components/MenuDial/MenuDial.vue
+++ b/src/components/MenuDial/MenuDial.vue
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import type { IMDProps } from '@interfaces/componentsProps';
-import PlusIcon from '@stories/icons/Mono/PlusIcon.vue';
+import PlusIcon from '@icons/Mono/PlusIcon.vue';
import { convertThemeToSecondaryColor, convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
import type { IMDItemProps } from '@interfaces/componentsProp';
@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<IMDProps>(), {
size: 'normal',
direction: 'right',
});
-const active = defineModel('active');
+const active = defineModel();
const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
const color = computed(() =>
diff --git a/src/stories/components/Modal/Modal.stories.ts b/src/components/Modal/Modal.stories.ts
similarity index 100%
rename from src/stories/components/Modal/Modal.stories.ts
rename to src/components/Modal/Modal.stories.ts
diff --git a/src/stories/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
similarity index 100%
rename from src/stories/components/Modal/Modal.vue
rename to src/components/Modal/Modal.vue
diff --git a/src/components/Paginator/Paginator.stories.ts b/src/components/Paginator/Paginator.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..159dbde2667fa19b9e9012458f08d85f037dd54e
--- /dev/null
+++ b/src/components/Paginator/Paginator.stories.ts
@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Paginator from './Paginator.vue';
+
+const meta: Meta = {
+ title: 'Components/Paginator',
+ component: Paginator,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'A component to display data in paged format and provide navigation between pages.',
+ },
+ },
+ },
+ argTypes: {
+ total: { control: 'number' },
+ itemsPerPage: { control: 'number' },
+ itemsPerPageOptions: { control: 'object' },
+ size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
+ fontSize: { control: 'text' },
+ darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
+ theme: {
+ control: 'select',
+ options: [
+ 'white',
+ 'blue',
+ 'sky',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ },
+ args: {},
+} satisfies Meta<typeof Paginator>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+ args: {},
+};
+
+export const Full: Story = {
+ args: {
+ itemsPerPageOptions: ['10', '20', '30'],
+ total: 50,
+ size: 'large',
+ theme: 'black',
+ },
+};
diff --git a/src/components/Paginator/Paginator.vue b/src/components/Paginator/Paginator.vue
new file mode 100644
index 0000000000000000000000000000000000000000..058a818db4098c564553dad5361f6b7cc6bd13c2
--- /dev/null
+++ b/src/components/Paginator/Paginator.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import ArrowDoubleLeftShortIcon from '@icons/Mono/ArrowDoubleLeftShortIcon.vue';
+import ArrowDoubleRightShortIcon from '@icons/Mono/ArrowDoubleRightShortIcon.vue';
+import ArrowLeftShortIcon from '@icons/Mono/ArrowLeftShortIcon.vue';
+import ArrowRightShortIcon from '@icons/Mono/ArrowRightShortIcon.vue';
+import type { IPaginatorProps } from '@interfaces/componentsProps';
+import PaginatorItem from '@components/Paginator/PaginatorItem.vue';
+import { computed, ref, type Ref, watch } from 'vue';
+import Select from '@components/Select/Select.vue';
+import type { ISelectOption } from '@interfaces/componentsProp';
+import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
+
+const props = withDefaults(defineProps<IPaginatorProps>(), {
+ total: 10,
+ size: 'normal',
+ theme: 'white',
+ darknessTheme: '500',
+ itemsPerPage: 1,
+});
+
+const current = defineModel({
+ default: 1,
+}) as Ref<number>;
+
+const perPage = ref(props.itemsPerPageOptions?.[0] ?? props.itemsPerPage);
+
+const itemsLength = computed(() => Math.ceil(props.total / perPage.value));
+const initArray = computed(() => Array.from({ length: itemsLength.value }, (_, i) => i + 1));
+const selectOptions = computed(() =>
+ !props.itemsPerPageOptions ? [{ value: '1' }] : props.itemsPerPageOptions.map((item) => ({ value: String(item) })),
+) as unknown as ISelectOption[];
+const isStartDisabled = computed(() => current.value === 1);
+const isEndDisabled = computed(() => current.value === itemsLength.value);
+const items = computed(() => {
+ const length = itemsLength.value;
+ const itemsPerView = Math.min(length, 5);
+ const cur = current.value;
+ if (cur - 2 < 2) return initArray.value.slice(0, itemsPerView + 1);
+ if (cur + 2 > length) return initArray.value.slice(-itemsPerView);
+ if (itemsPerView === 5) return [cur - 2, cur - 1, cur, cur + 1, cur + 2];
+ return initArray.value;
+});
+const iconSize = computed(() => {
+ const size = props.size;
+ if (size === 'normal') return '10';
+ if (size === 'large') return '15';
+ if (size === 'huge') return '18';
+ return '7';
+});
+const fontSize = computed(() => {
+ if (props.fontSize) return props.fontSize;
+ const size = props.size;
+ if (size === 'normal') return '16px';
+ if (size === 'large') return '26px';
+ if (size === 'huge') return '32px';
+ return '12px';
+});
+const itemSize = computed(() => `${+iconSize.value * 2.5}px`);
+const color = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
+const textColor = computed(() => convertThemeToTextColor(props.theme, props.darknessTheme));
+
+watch(perPage, (cur, prev) => {
+ if (cur > prev) current.value = Math.ceil((current.value * prev) / cur);
+ else current.value = Math.ceil((prev * (current.value - 1) + +cur) / cur);
+});
+</script>
+
+<template>
+ <section class="container">
+ <PaginatorItem
+ @click="current = 1"
+ :textColor="textColor"
+ :color="color"
+ :disable="isStartDisabled"
+ class="paginatorItem"
+ >
+ <ArrowDoubleLeftShortIcon :color="isStartDisabled ? '#aaa' : textColor" :size="iconSize" />
+ </PaginatorItem>
+ <PaginatorItem
+ @click="current--"
+ :textColor="textColor"
+ :color="color"
+ :disable="isStartDisabled"
+ class="paginatorItem"
+ >
+ <ArrowLeftShortIcon :color="isStartDisabled ? '#aaa' : textColor" :size="iconSize" />
+ </PaginatorItem>
+ <PaginatorItem
+ v-for="item of items"
+ :key="item"
+ @click="current = item"
+ :textColor="textColor"
+ :color="color"
+ :active="current === item"
+ class="paginatorItem"
+ >
+ <span class="digital">{{ item }}</span>
+ </PaginatorItem>
+ <PaginatorItem
+ @click="isEndDisabled ? '' : current++"
+ :textColor="textColor"
+ :color="color"
+ :disable="isEndDisabled"
+ class="paginatorItem"
+ >
+ <ArrowRightShortIcon :color="isEndDisabled ? '#aaa' : textColor" :size="iconSize" />
+ </PaginatorItem>
+ <PaginatorItem
+ @click="isEndDisabled ? '' : (current = itemsLength)"
+ :textColor="textColor"
+ :color="color"
+ :disable="isEndDisabled"
+ class="paginatorItem"
+ >
+ <ArrowDoubleRightShortIcon :color="isEndDisabled ? '#aaa' : textColor" :size="iconSize" />
+ </PaginatorItem>
+ <Select
+ v-if="itemsPerPageOptions"
+ v-model="perPage"
+ :theme="theme"
+ :darknessTheme="darknessTheme"
+ :size="size"
+ width="max-width"
+ no-highlight
+ :font-size="fontSize"
+ :options="selectOptions"
+ ></Select>
+ </section>
+</template>
+
+<style scoped>
+.container {
+ display: flex;
+ gap: calc(v-bind(fontSize) * 0.25);
+ align-items: center;
+}
+.paginatorItem {
+ width: v-bind(itemSize);
+ height: v-bind(itemSize);
+ user-select: none;
+}
+.digital {
+ font-size: v-bind(fontSize);
+ font-weight: bold;
+}
+</style>
diff --git a/src/components/Paginator/PaginatorItem.vue b/src/components/Paginator/PaginatorItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1b8fe0baaa16a65fba6dbdbe140b6efe06047db3
--- /dev/null
+++ b/src/components/Paginator/PaginatorItem.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+defineProps<{
+ active?: boolean;
+ disable?: boolean;
+ textColor: string;
+ color: string;
+}>();
+</script>
+
+<template>
+ <div
+ :class="[
+ 'item',
+ {
+ disable,
+ },
+ ]"
+ >
+ <div
+ :class="[
+ 'bg',
+ {
+ active,
+ disableBg: disable,
+ },
+ ]"
+ ></div>
+ <slot />
+ </div>
+</template>
+
+<style>
+.item {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ line-height: 1.2;
+ color: v-bind(textColor);
+}
+.item::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ z-index: -1;
+ background-color: v-bind(color);
+}
+.item:hover > .bg:not(.active) {
+ background-color: v-bind(textColor);
+ opacity: 0.1;
+}
+.item:active > .bg:not(.active) {
+ opacity: 0.2;
+}
+.bg {
+ width: 120%;
+ height: 120%;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ padding: 10px;
+ z-index: -1;
+ border-radius: 50%;
+ background-color: transparent;
+ opacity: 0;
+ transition: all 0.2s ease;
+}
+.item > .active {
+ background-color: v-bind(textColor) !important;
+ opacity: 1;
+}
+.active + * {
+ color: v-bind(color);
+}
+.disable {
+ cursor: auto;
+ pointer-events: none;
+}
+.disableBg {
+ background-color: white !important;
+}
+</style>
diff --git a/src/stories/components/Popup/Popup.stories.ts b/src/components/Popup/Popup.stories.ts
similarity index 97%
rename from src/stories/components/Popup/Popup.stories.ts
rename to src/components/Popup/Popup.stories.ts
index 29237c646b459be379f0c09803d9819304e13c5e..01a0d753f8847d63d8ad65116b664697fe2c0752 100644
--- a/src/stories/components/Popup/Popup.stories.ts
+++ b/src/components/Popup/Popup.stories.ts
@@ -1,7 +1,7 @@
import type { Meta, StoryObj } from '@storybook/vue3';
import Popup from './Popup.vue';
-import Button from '@stories/components/Button/Button.vue';
+import Button from '@components/Button/Button.vue';
const meta: Meta = {
title: 'Components/Popup',
diff --git a/src/stories/components/Popup/Popup.vue b/src/components/Popup/Popup.vue
similarity index 97%
rename from src/stories/components/Popup/Popup.vue
rename to src/components/Popup/Popup.vue
index d1eaa9824855da8e7fa83f74cff3aa31ccd49cbe..66e4f56b845b74eb2988771cbfc5a1ccfec814b5 100644
--- a/src/stories/components/Popup/Popup.vue
+++ b/src/components/Popup/Popup.vue
@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<IPopupProps>(), {
padding: '5px',
darknessTheme: '500',
});
-const active = defineModel<boolean>('active') as Ref<boolean>;
+const active = defineModel<boolean>() as Ref<boolean>;
const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
const secondaryColor = computed(() => convertThemeToSecondaryColor(props.theme, props.darknessTheme));
diff --git a/src/components/ProgressBar/ProgressBar.stories.ts b/src/components/ProgressBar/ProgressBar.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..285c1c3335fe98117244f1f424d6945ffc18e54c
--- /dev/null
+++ b/src/components/ProgressBar/ProgressBar.stories.ts
@@ -0,0 +1,140 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import ProgressBar from './ProgressBar.vue';
+
+const meta: Meta = {
+ title: 'Components/ProgressBar',
+ component: ProgressBar,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'A process status indicator.',
+ },
+ },
+ },
+ argTypes: {
+ value: { control: 'number' },
+ max: { control: 'number' },
+ width: { control: 'text' },
+ height: { control: 'text' },
+ labelBefore: { control: 'text' },
+ labelAfter: { control: 'text' },
+ showLabel: { control: 'boolean' },
+ noBorder: { control: 'boolean' },
+ size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
+ fontSize: { control: 'text' },
+ colorGaps: { control: 'object' },
+ colorInactiveGaps: { control: 'object' },
+ darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
+ darknessInactiveTheme: {
+ control: 'select',
+ options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+ },
+ theme: {
+ control: 'select',
+ options: [
+ 'white',
+ 'blue',
+ 'sky',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ inactiveTheme: {
+ control: 'select',
+ options: [
+ 'white',
+ 'blue',
+ 'sky',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ },
+ args: {},
+} satisfies Meta<typeof ProgressBar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+ args: {
+ value: 40,
+ },
+};
+
+export const Small: Story = {
+ args: {
+ size: 'small',
+ value: 40,
+ theme: 'red',
+ inactiveTheme: 'red',
+ labelAfter: '/100',
+ width: '500px',
+ },
+};
+
+export const Full: Story = {
+ args: {
+ colorGaps: [
+ {
+ start: 0,
+ end: 10,
+ color: 'purple',
+ darknessColor: '700',
+ },
+ {
+ start: 10,
+ end: 20,
+ color: 'red',
+ },
+ {
+ start: 20,
+ end: 30,
+ color: 'orange',
+ },
+ {
+ start: 30,
+ end: 40,
+ color: 'yellow',
+ },
+ {
+ start: 40,
+ end: 50,
+ color: 'green',
+ },
+ ],
+
+ size: 'huge',
+ value: 35,
+ max: 50,
+ labelAfter: '',
+ showLabel: true,
+ labelBefore: '$',
+ inactiveTheme: 'white',
+ darknessInactiveTheme: '400',
+ noBorder: true,
+ },
+};
diff --git a/src/components/ProgressBar/ProgressBar.vue b/src/components/ProgressBar/ProgressBar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..61cd3836a05c0f9a0a7ee1a1f62db9dedeb2a6e2
--- /dev/null
+++ b/src/components/ProgressBar/ProgressBar.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { IProgressBarProps } from '@interfaces/componentsProps';
+import { computed } from 'vue';
+import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
+
+const props = withDefaults(defineProps<IProgressBarProps>(), {
+ value: 0,
+ max: 100,
+ size: 'normal',
+ theme: 'black',
+ inactiveTheme: 'white',
+ darknessTheme: '500',
+ darknessInactiveTheme: '300',
+ showLabel: true,
+ labelAfter: '%',
+});
+const active = computed(() => `${(props.value / props.max) * 100}%`);
+const activeColor = computed(() => {
+ if (!props.colorGaps) return convertThemeToColor(props.theme, props.darknessTheme);
+ const current = props.colorGaps.find((item) => item.start <= props.value && props.value <= item.end);
+ if (!current) return convertThemeToColor(props.theme, props.darknessTheme);
+ return convertThemeToColor(current.color, current.darknessColor);
+});
+const inactiveColor = computed(() => {
+ if (!props.colorInactiveGaps) return convertThemeToColor(props.inactiveTheme, props.darknessInactiveTheme);
+ const current = props.colorInactiveGaps.find((item) => item.start <= props.value && props.value <= item.end);
+ if (!current) return convertThemeToColor(props.inactiveTheme, props.darknessInactiveTheme);
+ return convertThemeToColor(current.color, current.darknessColor);
+});
+const textColor = computed(() => convertThemeToTextColor(props.theme, props.darknessTheme));
+const fontSize = computed(() => {
+ if (props.fontSize) return props.fontSize;
+ const size = props.size;
+ if (size === 'normal') return '16px';
+ if (size === 'large') return '20px';
+ if (size === 'huge') return '24px';
+ return '12px';
+});
+const defaultHeight = computed(() => {
+ const size = props.size;
+ if (size === 'normal') return '30px';
+ if (size === 'large') return '45px';
+ if (size === 'huge') return '60px';
+ return '15px';
+});
+</script>
+
+<template>
+ <section
+ class="container"
+ :style="`width: ${width ?? '300px'}; height: ${height ?? defaultHeight}; border: ${noBorder ? '' : '2px solid black'}`"
+ >
+ <div class="active">
+ <span v-show="showLabel" class="value">{{ labelBefore }}{{ value }}{{ labelAfter }}</span>
+ </div>
+ </section>
+</template>
+
+<style scoped>
+.container {
+ position: relative;
+ overflow: hidden;
+ border-radius: calc(v-bind(fontSize) / 2.5);
+ background-color: v-bind(inactiveColor);
+}
+.active {
+ width: v-bind(active);
+ height: 100%;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ top: 0;
+ left: 0;
+ transition: width 0.4s ease-in-out;
+ background-color: v-bind(activeColor);
+}
+.value {
+ font-weight: bold;
+ font-size: v-bind(fontSize);
+ color: v-bind(textColor);
+}
+</style>
diff --git a/src/components/Rating/Rating.stories.ts b/src/components/Rating/Rating.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..825fe69893d1061b7fb83c04a307779ca9659229
--- /dev/null
+++ b/src/components/Rating/Rating.stories.ts
@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Rating from './Rating.vue';
+
+const meta: Meta = {
+ title: 'Components/Rating',
+ component: Rating,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'A component that is used as a rating.',
+ },
+ },
+ },
+ argTypes: {
+ count: { control: 'number' },
+ gap: { control: 'text' },
+ size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
+ darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
+ theme: {
+ control: 'select',
+ options: [
+ 'white',
+ 'blue',
+ 'sky',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ offTheme: {
+ control: 'select',
+ options: [
+ 'white',
+ 'blue',
+ 'sky',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ },
+ args: {},
+} satisfies Meta<typeof Rating>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+ args: {},
+};
+
+export const Small: Story = {
+ args: {
+ size: 'small',
+ theme: 'yellow',
+ offTheme: 'black',
+ },
+};
+
+export const Full: Story = {
+ args: {
+ theme: 'sky',
+ darknessTheme: '400',
+ count: 7,
+ gap: '2px',
+ size: 'huge',
+ },
+};
diff --git a/src/components/Rating/Rating.vue b/src/components/Rating/Rating.vue
new file mode 100644
index 0000000000000000000000000000000000000000..453a9d288aa02074d9b91ac7dffea6350dce9747
--- /dev/null
+++ b/src/components/Rating/Rating.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { IRatingProps } from '@interfaces/componentsProps';
+import { computed, type Ref, ref } from 'vue';
+import { iconsSet } from '@/common/constants/icons';
+import StarFilledIcon from '@icons/Mono/StarFilledIcon.vue';
+import { convertThemeToColor } from '@helpers/common';
+
+const props = withDefaults(defineProps<IRatingProps>(), {
+ count: 5,
+ gap: '5px',
+ size: 'normal',
+ theme: 'black',
+ darknessTheme: '500',
+});
+
+const value = defineModel({
+ default: 0,
+}) as Ref<number>;
+
+const onHoverIndex = ref();
+
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
+const offColor = computed(() => (props.offTheme ? convertThemeToColor(props.offTheme, props.darknessTheme) : null));
+const themeColorOnHover = computed(() => convertThemeToColor(props.offTheme ?? props.theme, '200'));
+const iconSize = computed(() => {
+ const size = props.size;
+ if (size === 'normal') return '20px';
+ if (size === 'large') return '30px';
+ if (size === 'huge') return '40px';
+ return '10px';
+});
+const onActiveClick = (index: number) => {
+ if (value.value > index) {
+ value.value = index;
+ return;
+ }
+ value.value = 0;
+};
+</script>
+
+<template>
+ <ul class="list" :style="`gap: ${gap}`">
+ <li v-for="index of Array(count).keys()" :key="index" class="item iconSize">
+ <div v-show="value < index + 1 && !$slots.offIcon" class="iconSize iconContainer">
+ <component
+ class="icon absoluteIcon"
+ :is="iconsSet['Star']"
+ :color="offColor ?? themeColor"
+ @pointerenter="onHoverIndex = index"
+ @pointerleave="onHoverIndex = null"
+ :size="iconSize"
+ />
+ <Transition>
+ <component
+ class="absoluteIcon"
+ v-show="onHoverIndex === index"
+ :is="iconsSet['Star']"
+ :color="themeColorOnHover"
+ @pointerenter="onHoverIndex = index"
+ @pointerleave="onHoverIndex = null"
+ @click="value = index + 1"
+ :size="iconSize"
+ />
+ </Transition>
+ </div>
+ <div v-show="value < index + 1" @click="value = index + 1">
+ <slot name="offIcon" :size="iconSize"></slot>
+ </div>
+ <StarFilledIcon
+ v-show="value >= index + 1 && !$slots.onIcon"
+ :color="themeColor"
+ :size="iconSize"
+ class="absoluteIcon"
+ @click="onActiveClick(index + 1)"
+ />
+ <div class="iconSize" v-show="value >= index + 1" @click="onActiveClick(index + 1)">
+ <slot name="onIcon" :size="iconSize"></slot>
+ </div>
+ </li>
+ </ul>
+</template>
+
+<style scoped>
+.list {
+ display: flex;
+}
+.item {
+ position: relative;
+ cursor: pointer;
+}
+.icon {
+ opacity: 1;
+ transition: opacity 0.15s ease-in-out;
+ :hover {
+ opacity: 0;
+ }
+}
+.absoluteIcon {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.iconSize {
+ width: v-bind(iconSize);
+ height: v-bind(iconSize);
+}
+.v-enter-active,
+.v-leave-active {
+ transition: opacity 0.15s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+ opacity: 0;
+}
+</style>
diff --git a/src/stories/components/Select/Select.stories.ts b/src/components/Select/Select.stories.ts
similarity index 82%
rename from src/stories/components/Select/Select.stories.ts
rename to src/components/Select/Select.stories.ts
index 3a8358c1f03e7581fcacd4cc90ec45e49da91ce6..c12c0e86922f7d0e441ad0d3cf7cfe81912127be 100644
--- a/src/stories/components/Select/Select.stories.ts
+++ b/src/components/Select/Select.stories.ts
@@ -10,7 +10,7 @@ const meta: Meta = {
parameters: {
docs: {
description: {
- component: 'A component that is used as a Select. Can be used with icon.',
+ component: 'A component that is used to choose an item from a list.',
},
},
},
@@ -18,12 +18,13 @@ const meta: Meta = {
width: { control: 'text' },
filtered: { control: 'boolean' },
disabled: { control: 'boolean' },
+ noHighlight: { control: 'boolean' },
+ fontSize: { control: 'text' },
placeholder: { control: 'text' },
name: { control: 'text' },
openIcon: { control: 'select', options: Object.keys(iconsSet) },
size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
- darknessBackground: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
darknessOpenIcon: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
theme: {
control: 'select',
@@ -45,26 +46,6 @@ const meta: Meta = {
'black',
],
},
- background: {
- control: 'select',
- options: [
- 'white',
- 'blue',
- 'sky',
- 'cyan',
- 'teal',
- 'green',
- 'yellow',
- 'orange',
- 'pink',
- 'fuchsia',
- 'purple',
- 'indigo',
- 'rose',
- 'red',
- 'black',
- ],
- },
openIconColor: {
control: 'select',
options: [
@@ -164,9 +145,7 @@ export const Full: Story = {
size: 'normal',
width: '250px',
theme: 'sky',
- background: 'sky',
- darknessTheme: '700',
- darknessBackground: '200',
+ darknessTheme: '200',
openIconColor: 'sky',
filtered: true,
},
diff --git a/src/stories/components/Select/Select.vue b/src/components/Select/Select.vue
similarity index 82%
rename from src/stories/components/Select/Select.vue
rename to src/components/Select/Select.vue
index f72e5d5b165d39085f926f7b82c08977d24b8b53..9ff0dbdcb97d94427bc7b427dcaa032373eb7339 100644
--- a/src/stories/components/Select/Select.vue
+++ b/src/components/Select/Select.vue
@@ -1,25 +1,24 @@
<script setup lang="ts">
import type { ISelectProps } from '@interfaces/componentsProps';
import { computed, ref } from 'vue';
-import { convertThemeToColor } from '@helpers/common';
+import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
import { iconsSet } from '@/common/constants/icons';
import type { TThemeColor } from '@interfaces/common';
-import SelectItem from '@stories/components/Select/SelectItem.vue';
-import SearchIcon from '@stories/icons/Mono/SearchIcon.vue';
-import { calcFontSize, calcPadding, getOptionsGroups } from '@stories/components/Select/helpers';
+import SelectItem from '@components/Select/SelectItem.vue';
+import SearchIcon from '@icons/Mono/SearchIcon.vue';
+import { calcFontSize, calcPadding, getOptionsGroups } from '@components/Select/helpers';
const props = withDefaults(defineProps<ISelectProps>(), {
size: 'normal',
width: '200px',
- theme: 'black',
- darknessTheme: '700',
+ theme: 'white',
darknessBackground: '200',
darknessOpenIcon: '700',
name: 'select',
placeholder: 'Nothing selected',
openIcon: 'ArrowShortDown',
});
-const selected = defineModel('value');
+const selected = defineModel();
const isOpen = ref<boolean>(false);
const filter = ref<string>('');
@@ -32,15 +31,18 @@ const optionsNoGroup = computed(() =>
),
);
const selectedOption = computed(() => props.options.find((option) => option.value === selected.value));
-const fontSize = computed(() => calcFontSize(props.size));
+const fontSize = computed(() => props.fontSize ?? calcFontSize(props.size));
const fontSizeNumber = computed(() => fontSize.value.slice(0, -2));
const padding = computed(() => calcPadding(props.size));
-const textColor = computed(() => (props.disabled ? '#62708c' : convertThemeToColor(props.theme, props.darknessTheme)));
+const textColor = computed(() =>
+ props.disabled ? '#62708c' : convertThemeToTextColor(props.theme, props.darknessTheme ?? '700'),
+);
const backgroundColor = computed(() =>
- convertThemeToColor(
- props.background ?? (props.theme === 'white' ? 'black' : props.theme === 'black' ? 'white' : props.theme),
- (!props.background && props.theme === 'black') || props.background === 'white' ? '500' : props.darknessBackground,
- ),
+ // convertThemeToColor(
+ // props.background ?? (props.theme === 'white' ? 'black' : props.theme === 'black' ? 'white' : props.theme),
+ // (!props.background && props.theme === 'black') || props.background === 'white' ? '500' : props.darknessBackground,
+ // ),
+ convertThemeToColor(props.theme, props.theme === 'white' && !props.darknessTheme ? '500' : props.darknessTheme),
);
const pickOption = (value: string) => {
@@ -49,6 +51,10 @@ const pickOption = (value: string) => {
};
const calcOptionColor = (color: TThemeColor | undefined, darknessColor: string | undefined, defaultColor: string) =>
color ? convertThemeToColor(color, darknessColor ?? '500') : defaultColor;
+
+document.querySelector('body')!.addEventListener('pointerup', (e: MouseEvent) => {
+ if (isOpen.value && e.button === 0) isOpen.value = false;
+});
</script>
<template>
@@ -59,9 +65,17 @@ const calcOptionColor = (color: TThemeColor | undefined, darknessColor: string |
{{ option.label ?? option.value }}
</option>
</select>
- <div class="list" :style="`background-color: ${backgroundColor}`">
+ <div
+ :class="[
+ 'list',
+ {
+ noHighlight,
+ },
+ ]"
+ :style="`background-color: ${backgroundColor}`"
+ >
<button
- @click.prevent="!disabled ? (isOpen = !isOpen) : ''"
+ @pointerup.stop="!disabled ? (isOpen = !isOpen) : ''"
:class="[
'button',
{
@@ -103,13 +117,13 @@ const calcOptionColor = (color: TThemeColor | undefined, darknessColor: string |
]"
>
<div style="overflow: hidden">
- <div class="flex filter" v-if="filtered">
+ <div class="flex filter" v-if="filtered" @click="isOpen = true">
<input v-model="filter" type="text" /><SearchIcon :size="fontSizeNumber" color="#62708c" />
</div>
<div v-for="group of optionsGroups" :key="group.name" class="group">
<h3
class="flexNoHover groupHeader"
- :style="`color: ${calcOptionColor(group.nameColor, darknessTheme, textColor)};
+ :style="`color: ${calcOptionColor(group.nameColor, darknessTheme ?? '700', textColor)};
background-color: ${calcOptionColor(group.background, group.background === 'white' ? '500' : '200', backgroundColor)};
font-size: calc(${fontSize} * 0.8); padding: calc(${padding} * 0.8)`"
>
@@ -117,13 +131,13 @@ const calcOptionColor = (color: TThemeColor | undefined, darknessColor: string |
v-if="group?.iconLeft"
:is="iconsSet[group?.iconLeft]"
:size="fontSizeNumber"
- :color="calcOptionColor(group?.iconLeftColor ?? group.nameColor, darknessTheme, textColor)"
+ :color="calcOptionColor(group?.iconLeftColor ?? group.nameColor, darknessTheme ?? '700', textColor)"
/>{{ group.name }}
<component
v-if="group?.iconRight"
:is="iconsSet[group?.iconRight]"
:size="fontSizeNumber"
- :color="calcOptionColor(group?.iconRightColor ?? group.nameColor, darknessTheme, textColor)"
+ :color="calcOptionColor(group?.iconRightColor ?? group.nameColor, darknessTheme ?? '700', textColor)"
/>
</h3>
<SelectItem
@@ -257,4 +271,7 @@ const calcOptionColor = (color: TThemeColor | undefined, darknessColor: string |
background-color: #e1e7f1 !important;
border-radius: 4px;
}
+.noHighlight * {
+ user-select: none;
+}
</style>
diff --git a/src/stories/components/Select/SelectItem.vue b/src/components/Select/SelectItem.vue
similarity index 100%
rename from src/stories/components/Select/SelectItem.vue
rename to src/components/Select/SelectItem.vue
diff --git a/src/stories/components/Select/helpers.ts b/src/components/Select/helpers.ts
similarity index 100%
rename from src/stories/components/Select/helpers.ts
rename to src/components/Select/helpers.ts
diff --git a/src/stories/components/SelectButton/SelectButton.stories.ts b/src/components/SelectButton/SelectButton.stories.ts
similarity index 100%
rename from src/stories/components/SelectButton/SelectButton.stories.ts
rename to src/components/SelectButton/SelectButton.stories.ts
diff --git a/src/stories/components/SelectButton/SelectButton.vue b/src/components/SelectButton/SelectButton.vue
similarity index 97%
rename from src/stories/components/SelectButton/SelectButton.vue
rename to src/components/SelectButton/SelectButton.vue
index 9308fb046e0690726dc18b153fe91d2468b36db8..1d1f1b61977cc4073ec1c9a5a8498ef83dbab81c 100644
--- a/src/stories/components/SelectButton/SelectButton.vue
+++ b/src/components/SelectButton/SelectButton.vue
@@ -1,5 +1,5 @@
<script setup lang="ts">
-import { computed } from 'vue';
+import { computed, type Ref } from 'vue';
import type { ISBProps } from '@interfaces/componentsProps';
import { convertThemeToSecondaryColor, convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
import type { ISBOption } from '@interfaces/componentsProp';
@@ -12,7 +12,7 @@ const props = withDefaults(defineProps<ISBProps>(), {
darknessActiveBackgroundColor: '500',
});
const emit = defineEmits(['onClick']);
-const value = defineModel<never>('value');
+const value = defineModel() as Ref<string | number | boolean | never>;
const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
const color = computed(() =>
diff --git a/src/stories/components/Slider/Slider.stories.ts b/src/components/Slider/Slider.stories.ts
similarity index 100%
rename from src/stories/components/Slider/Slider.stories.ts
rename to src/components/Slider/Slider.stories.ts
diff --git a/src/stories/components/Slider/Slider.vue b/src/components/Slider/Slider.vue
similarity index 99%
rename from src/stories/components/Slider/Slider.vue
rename to src/components/Slider/Slider.vue
index d772589fa67e9d6d36118b6878b1183530e4f1c3..f8daeb6c4344cde16fb1dc7cc5833e96d3de5fcc 100644
--- a/src/stories/components/Slider/Slider.vue
+++ b/src/components/Slider/Slider.vue
@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<ISliderProps>(), {
darknessTheme: '500',
darknessBackgroundColor: '500',
});
-const value = defineModel('value');
+const value = defineModel();
const optionValue = computed({
get() {
return typeof value.value === 'string' && props.options
diff --git a/src/stories/components/Table/Table.stories.ts b/src/components/Table/Table.stories.ts
similarity index 99%
rename from src/stories/components/Table/Table.stories.ts
rename to src/components/Table/Table.stories.ts
index 18c530d383d237a754176bb62d227a255f1fea1b..734bada0f866486393ee1842e397b50b9ba09792 100644
--- a/src/stories/components/Table/Table.stories.ts
+++ b/src/components/Table/Table.stories.ts
@@ -14,8 +14,8 @@ const meta: Meta = {
},
},
argTypes: {
+ data: { control: 'object' },
columns: { control: 'text' },
- data: { control: 'text' },
fontSize: { control: 'text' },
gap: { control: 'text' },
size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
diff --git a/src/stories/components/Table/Table.vue b/src/components/Table/Table.vue
similarity index 95%
rename from src/stories/components/Table/Table.vue
rename to src/components/Table/Table.vue
index c7f1a4cd091272205efab70aee64c2523d610293..91c48bb45d1098df18b5031d59b6dbcc9bcdedae 100644
--- a/src/stories/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -3,8 +3,8 @@ import type { ITableProps } from '@interfaces/componentsProps';
import { computed, ref, watch } from 'vue';
import { convertThemeToColor, convertThemeToSecondaryColor, convertThemeToTextColor } from '@helpers/common';
import type { ITableItem } from '@interfaces/componentsProp';
-import { calcAdditionalHeight, calcGap, calcRows } from '@stories/components/Table/helpers';
-import TableHeader from '@stories/components/Table/TableHeader.vue';
+import { calcAdditionalHeight, calcGap, calcRows } from '@components/Table/helpers';
+import TableHeader from '@components/Table/TableHeader.vue';
const props = withDefaults(defineProps<ITableProps>(), {
size: 'normal',
@@ -12,7 +12,9 @@ const props = withDefaults(defineProps<ITableProps>(), {
darknessTheme: '500',
fontSize: '16px',
});
-const data = defineModel<ITableItem[][]>('data');
+const data = defineModel<ITableItem[][]>({
+ required: false,
+});
const columns = ref(props.columns);
const sortStateActive = ref<[number, string] | []>([]);
@@ -43,7 +45,7 @@ const sortState = computed<string[]>(() => {
});
const rows = computed<ITableItem[][]>(() =>
calcRows(
- data.value!,
+ data.value ?? props.data,
sortStateActive.value,
props.multipleSort,
columnToFilter.value,
diff --git a/src/stories/components/Table/TableHeader.vue b/src/components/Table/TableHeader.vue
similarity index 88%
rename from src/stories/components/Table/TableHeader.vue
rename to src/components/Table/TableHeader.vue
index 13264907b50be79103cf356b397065d17b96690e..c21051f7b914b8f1a7fc749ddca9b7336d7fb5ea 100644
--- a/src/stories/components/Table/TableHeader.vue
+++ b/src/components/Table/TableHeader.vue
@@ -1,13 +1,13 @@
<script setup lang="ts">
-import FilterIcon from '@stories/icons/Mono/FilterIcon.vue';
-import SortDownIcon from '@stories/icons/Mono/SortDownIcon.vue';
-import SortUpIcon from '@stories/icons/Mono/SortUpIcon.vue';
-import SortVerticalIcon from '@stories/icons/Mono/SortVerticalIcon.vue';
-import { calcColumnPadding } from '@stories/components/Table/helpers';
-import Popup from '@stories/components/Popup/Popup.vue';
-import Button from '@stories/components/Button/Button.vue';
-import CheckMarkIcon from '@stories/icons/Mono/CheckMarkIcon.vue';
-import CrossIcon from '@stories/icons/Mono/CrossIcon.vue';
+import FilterIcon from '@icons/Mono/FilterIcon.vue';
+import SortDownIcon from '@icons/Mono/SortDownIcon.vue';
+import SortUpIcon from '@icons/Mono/SortUpIcon.vue';
+import SortVerticalIcon from '@icons/Mono/SortVerticalIcon.vue';
+import { calcColumnPadding } from '@components/Table/helpers';
+import Popup from '@components/Popup/Popup.vue';
+import Button from '@components/Button/Button.vue';
+import CheckMarkIcon from '@icons/Mono/CheckMarkIcon.vue';
+import CrossIcon from '@icons/Mono/CrossIcon.vue';
import type { TThemeColor } from '@interfaces/common';
import type { ITableColumn } from '@interfaces/componentsProp';
import { computed } from 'vue';
diff --git a/src/stories/components/Table/helpers.ts b/src/components/Table/helpers.ts
similarity index 97%
rename from src/stories/components/Table/helpers.ts
rename to src/components/Table/helpers.ts
index 9b0d9eb05d72528f003a94dc357c1bc7671bed57..172f8645beb8c23214647b83897237dc6bef7dd8 100644
--- a/src/stories/components/Table/helpers.ts
+++ b/src/components/Table/helpers.ts
@@ -2,7 +2,7 @@ import type { ITableColumn, ITableItem, TTableColumnType } from '@interfaces/com
import type { TSize } from '@interfaces/common';
export const calcRows = (
- initRows: ITableItem[][],
+ initRows: ITableItem[][] | undefined,
sortStateActive: [number, string] | [],
multipleSort: boolean,
columnToFilter: number,
@@ -10,6 +10,7 @@ export const calcRows = (
filterValue: string,
isRegisterSensitive: boolean,
) => {
+ if (!initRows?.length) return [];
// ['up', 'down', ...]
let rows = [...initRows];
diff --git a/src/stories/components/Tag/Tag.stories.ts b/src/components/Tag/Tag.stories.ts
similarity index 99%
rename from src/stories/components/Tag/Tag.stories.ts
rename to src/components/Tag/Tag.stories.ts
index 91c23aa548bdff8e11c480b2289f42b3d5c6be53..d45f2f2656c58cc1570c948ca5d0f72debc83ef0 100644
--- a/src/stories/components/Tag/Tag.stories.ts
+++ b/src/components/Tag/Tag.stories.ts
@@ -10,7 +10,7 @@ const meta: Meta = {
parameters: {
docs: {
description: {
- component: 'A component is used to categorize content. Can be used with icon.',
+ component: 'A component is used to categorize content. Can be used with icons.',
},
},
},
diff --git a/src/stories/components/Tag/Tag.vue b/src/components/Tag/Tag.vue
similarity index 100%
rename from src/stories/components/Tag/Tag.vue
rename to src/components/Tag/Tag.vue
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts b/src/components/ToggleSwitch/ToggleSwitch.stories.ts
similarity index 98%
rename from src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
rename to src/components/ToggleSwitch/ToggleSwitch.stories.ts
index a17df1c6af687bbdc88afc8e24fd5351028e7c7d..65923024e18649dafe6e0f2e5019dd4f4dfc1174 100644
--- a/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
+++ b/src/components/ToggleSwitch/ToggleSwitch.stories.ts
@@ -14,7 +14,6 @@ const meta: Meta = {
},
},
argTypes: {
- active: { control: 'boolean' },
size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
negativeTheme: {
control: 'select',
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.vue b/src/components/ToggleSwitch/ToggleSwitch.vue
similarity index 96%
rename from src/stories/components/ToggleSwitch/ToggleSwitch.vue
rename to src/components/ToggleSwitch/ToggleSwitch.vue
index bbc8c5dbf12beada9c2262711482b6eae7246b36..472ff20a92d9373a8f3e5fcdc126abc3794eef96 100644
--- a/src/stories/components/ToggleSwitch/ToggleSwitch.vue
+++ b/src/components/ToggleSwitch/ToggleSwitch.vue
@@ -1,5 +1,5 @@
<script setup lang="ts">
-import { computed } from 'vue';
+import { computed, type Ref } from 'vue';
import type { ITSProps } from '@interfaces/componentsProps';
import { convertThemeToColor } from '@helpers/common';
@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<ITSProps>(), {
darknessTheme: '500',
darknessNegativeTheme: '500',
});
-const active = defineModel<boolean>('active');
+const active = defineModel() as Ref<boolean>;
const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
const inactiveColor = computed(() => convertThemeToColor(props.negativeTheme, props.darknessNegativeTheme));
diff --git a/src/stories/components/TreeList/TreeItems.vue b/src/components/TreeList/TreeItems.vue
similarity index 98%
rename from src/stories/components/TreeList/TreeItems.vue
rename to src/components/TreeList/TreeItems.vue
index 81f871e1d4a2be4791462fe37a2ffef71be2d9a8..f39607396da7ee90866a45a2e571896c78d74b58 100644
--- a/src/stories/components/TreeList/TreeItems.vue
+++ b/src/components/TreeList/TreeItems.vue
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { iconsSet } from '@/common/constants/icons';
-import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue';
+import TriangleIcon from '@icons/Mono/TriangleIcon.vue';
import type { ITIProps } from '@interfaces/componentsProps';
import { convertThemeToColor } from '@helpers/common';
diff --git a/src/stories/components/TreeList/TreeList.stories.ts b/src/components/TreeList/TreeList.stories.ts
similarity index 100%
rename from src/stories/components/TreeList/TreeList.stories.ts
rename to src/components/TreeList/TreeList.stories.ts
diff --git a/src/stories/components/TreeList/TreeList.vue b/src/components/TreeList/TreeList.vue
similarity index 96%
rename from src/stories/components/TreeList/TreeList.vue
rename to src/components/TreeList/TreeList.vue
index c7153f0c38e20d1aecd477ff52f7f7e717c47405..556c6741fbc10730c5f751d3b553c940ba0edc20 100644
--- a/src/stories/components/TreeList/TreeList.vue
+++ b/src/components/TreeList/TreeList.vue
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import type { ITreeItem } from '@interfaces/componentsProp';
-import TreeItems from '@stories/components/TreeList/TreeItems.vue';
+import TreeItems from '@components/TreeList/TreeItems.vue';
import type { ITLProps } from '@interfaces/componentsProps';
import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
diff --git a/src/stories/icons/Mono/Age18Icon.vue b/src/icons/Mono/Age18Icon.vue
similarity index 100%
rename from src/stories/icons/Mono/Age18Icon.vue
rename to src/icons/Mono/Age18Icon.vue
diff --git a/src/stories/icons/Mono/AirplaneIcon.vue b/src/icons/Mono/AirplaneIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/AirplaneIcon.vue
rename to src/icons/Mono/AirplaneIcon.vue
diff --git a/src/stories/icons/Mono/AlarmIcon.vue b/src/icons/Mono/AlarmIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/AlarmIcon.vue
rename to src/icons/Mono/AlarmIcon.vue
diff --git a/src/stories/icons/Mono/AlignCenterIcon.vue b/src/icons/Mono/AlignCenterIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/AlignCenterIcon.vue
rename to src/icons/Mono/AlignCenterIcon.vue
diff --git a/src/stories/icons/Mono/AlignLeftIcon.vue b/src/icons/Mono/AlignLeftIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/AlignLeftIcon.vue
rename to src/icons/Mono/AlignLeftIcon.vue
diff --git a/src/stories/icons/Mono/AlignRightIcon.vue b/src/icons/Mono/AlignRightIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/AlignRightIcon.vue
rename to src/icons/Mono/AlignRightIcon.vue
diff --git a/src/stories/icons/Mono/AnchorIcon.vue b/src/icons/Mono/AnchorIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/AnchorIcon.vue
rename to src/icons/Mono/AnchorIcon.vue
diff --git a/src/stories/icons/Mono/AnchorLinkIcon.vue b/src/icons/Mono/AnchorLinkIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/AnchorLinkIcon.vue
rename to src/icons/Mono/AnchorLinkIcon.vue
diff --git a/src/stories/icons/Mono/ArchiveIcon.vue b/src/icons/Mono/ArchiveIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ArchiveIcon.vue
rename to src/icons/Mono/ArchiveIcon.vue
diff --git a/src/icons/Mono/ArrowDoubleLeftShortIcon.vue b/src/icons/Mono/ArrowDoubleLeftShortIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c9465e52326644bc9902e980d4474b4587c3aeda
--- /dev/null
+++ b/src/icons/Mono/ArrowDoubleLeftShortIcon.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 532.153 532.153"
+ xml:space="preserve"
+ >
+ <line
+ x1="155"
+ y1="-100"
+ x2="-50"
+ y2="100"
+ transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+ fill="none"
+ :stroke="color ?? '#000000'"
+ stroke-width="50"
+ stroke-linecap="round"
+ />
+ <line
+ x1="-50"
+ y1="100"
+ x2="155"
+ y2="300"
+ transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+ fill="none"
+ :stroke="color ?? '#000000'"
+ stroke-width="50"
+ stroke-linecap="round"
+ />
+ <line
+ x1="335"
+ y1="-100"
+ x2="130"
+ y2="100"
+ transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+ fill="none"
+ :stroke="color ?? '#000000'"
+ stroke-width="50"
+ stroke-linecap="round"
+ />
+ <line
+ x1="130"
+ y1="100"
+ x2="335"
+ y2="300"
+ transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+ fill="none"
+ :stroke="color ?? '#000000'"
+ stroke-width="50"
+ stroke-linecap="round"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/icons/Mono/ArrowDoubleRightShortIcon.vue b/src/icons/Mono/ArrowDoubleRightShortIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7a563bbb5b75ae3e6866725a3f2f16237e0d1bb6
--- /dev/null
+++ b/src/icons/Mono/ArrowDoubleRightShortIcon.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 532.153 532.153"
+ xml:space="preserve"
+ >
+ <line
+ x1="180"
+ y1="-100"
+ x2="385"
+ y2="100"
+ transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+ fill="none"
+ :stroke="color ?? '#000000'"
+ stroke-width="50"
+ stroke-linecap="round"
+ />
+ <line
+ x1="385"
+ y1="100"
+ x2="180"
+ y2="300"
+ transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+ fill="none"
+ :stroke="color ?? '#000000'"
+ stroke-width="50"
+ stroke-linecap="round"
+ />
+ <line
+ x1="0"
+ y1="-100"
+ x2="205"
+ y2="100"
+ transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+ fill="none"
+ :stroke="color ?? '#000000'"
+ stroke-width="50"
+ stroke-linecap="round"
+ />
+ <line
+ x1="205"
+ y1="100"
+ x2="0"
+ y2="300"
+ transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+ fill="none"
+ :stroke="color ?? '#000000'"
+ stroke-width="50"
+ stroke-linecap="round"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ArrowShortDownIcon.vue b/src/icons/Mono/ArrowDownShortIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ArrowShortDownIcon.vue
rename to src/icons/Mono/ArrowDownShortIcon.vue
diff --git a/src/stories/icons/Mono/ArrowForwardIcon.vue b/src/icons/Mono/ArrowForwardIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ArrowForwardIcon.vue
rename to src/icons/Mono/ArrowForwardIcon.vue
diff --git a/src/stories/icons/Mono/ArrowLeftIcon.vue b/src/icons/Mono/ArrowLeftIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ArrowLeftIcon.vue
rename to src/icons/Mono/ArrowLeftIcon.vue
diff --git a/src/icons/Mono/ArrowLeftShortIcon.vue b/src/icons/Mono/ArrowLeftShortIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8c2f7b9ec8c84e9ea7d2f109247174db00b48538
--- /dev/null
+++ b/src/icons/Mono/ArrowLeftShortIcon.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg :width="`${size ?? 40}px`" :height="`${size ?? 40}px`" viewBox="-4.5 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g transform="translate(-345.000000, -6679.000000)" :fill="color ?? '#000000'">
+ <g id="icons" transform="translate(56.000000, 160.000000)">
+ <path
+ d="M299.633777,6519.29231 L299.633777,6519.29231 C299.228878,6518.90256 298.573377,6518.90256 298.169513,6519.29231 L289.606572,6527.55587 C288.797809,6528.33636 288.797809,6529.60253 289.606572,6530.38301 L298.231646,6538.70754 C298.632403,6539.09329 299.27962,6539.09828 299.685554,6538.71753 L299.685554,6538.71753 C300.100809,6538.32879 300.104951,6537.68821 299.696945,6537.29347 L291.802968,6529.67648 C291.398069,6529.28574 291.398069,6528.65315 291.802968,6528.26241 L299.633777,6520.70538 C300.038676,6520.31563 300.038676,6519.68305 299.633777,6519.29231"
+ id="arrow_left-[#335]"
+ ></path>
+ </g>
+ </g>
+ </g>
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ArrowRightIcon.vue b/src/icons/Mono/ArrowRightIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ArrowRightIcon.vue
rename to src/icons/Mono/ArrowRightIcon.vue
diff --git a/src/icons/Mono/ArrowRightShortIcon.vue b/src/icons/Mono/ArrowRightShortIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7ac6fcdfb680425634110a1a6e8402ebbf0b56e7
--- /dev/null
+++ b/src/icons/Mono/ArrowRightShortIcon.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 532.153 532.153"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <line
+ x1="180"
+ y1="-100"
+ x2="385"
+ y2="100"
+ transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+ fill="none"
+ :stroke="color ?? '#000000'"
+ stroke-width="50"
+ stroke-linecap="round"
+ />
+ <line
+ x1="385"
+ y1="100"
+ x2="180"
+ y2="300"
+ transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+ fill="none"
+ :stroke="color ?? '#000000'"
+ stroke-width="50"
+ stroke-linecap="round"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/ArrowsVerticalIcon.vue b/src/icons/Mono/ArrowsVerticalIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ArrowsVerticalIcon.vue
rename to src/icons/Mono/ArrowsVerticalIcon.vue
diff --git a/src/stories/icons/Mono/AtIcon.vue b/src/icons/Mono/AtIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/AtIcon.vue
rename to src/icons/Mono/AtIcon.vue
diff --git a/src/stories/icons/Mono/AwardIcon.vue b/src/icons/Mono/AwardIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/AwardIcon.vue
rename to src/icons/Mono/AwardIcon.vue
diff --git a/src/stories/icons/Mono/BackspaceIcon.vue b/src/icons/Mono/BackspaceIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BackspaceIcon.vue
rename to src/icons/Mono/BackspaceIcon.vue
diff --git a/src/stories/icons/Mono/BadgeIcon.vue b/src/icons/Mono/BadgeIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BadgeIcon.vue
rename to src/icons/Mono/BadgeIcon.vue
diff --git a/src/stories/icons/Mono/BallFootballIcon.vue b/src/icons/Mono/BallFootballIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BallFootballIcon.vue
rename to src/icons/Mono/BallFootballIcon.vue
diff --git a/src/stories/icons/Mono/BallIcon.vue b/src/icons/Mono/BallIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BallIcon.vue
rename to src/icons/Mono/BallIcon.vue
diff --git a/src/stories/icons/Mono/BanknoteIcon.vue b/src/icons/Mono/BanknoteIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BanknoteIcon.vue
rename to src/icons/Mono/BanknoteIcon.vue
diff --git a/src/stories/icons/Mono/BellIcon.vue b/src/icons/Mono/BellIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BellIcon.vue
rename to src/icons/Mono/BellIcon.vue
diff --git a/src/stories/icons/Mono/BellOffIcon.vue b/src/icons/Mono/BellOffIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BellOffIcon.vue
rename to src/icons/Mono/BellOffIcon.vue
diff --git a/src/stories/icons/Mono/BoxIcon.vue b/src/icons/Mono/BoxIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BoxIcon.vue
rename to src/icons/Mono/BoxIcon.vue
diff --git a/src/stories/icons/Mono/BrightnessIcon.vue b/src/icons/Mono/BrightnessIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BrightnessIcon.vue
rename to src/icons/Mono/BrightnessIcon.vue
diff --git a/src/stories/icons/Mono/BulbIcon.vue b/src/icons/Mono/BulbIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BulbIcon.vue
rename to src/icons/Mono/BulbIcon.vue
diff --git a/src/stories/icons/Mono/CalculatorIcon.vue b/src/icons/Mono/CalculatorIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CalculatorIcon.vue
rename to src/icons/Mono/CalculatorIcon.vue
diff --git a/src/stories/icons/Mono/CalendarAddIcon.vue b/src/icons/Mono/CalendarAddIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CalendarAddIcon.vue
rename to src/icons/Mono/CalendarAddIcon.vue
diff --git a/src/stories/icons/Mono/CalendarIcon.vue b/src/icons/Mono/CalendarIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CalendarIcon.vue
rename to src/icons/Mono/CalendarIcon.vue
diff --git a/src/stories/icons/Mono/CalendarRemoveIcon.vue b/src/icons/Mono/CalendarRemoveIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CalendarRemoveIcon.vue
rename to src/icons/Mono/CalendarRemoveIcon.vue
diff --git a/src/stories/icons/Mono/CardsIcon.vue b/src/icons/Mono/CardsIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CardsIcon.vue
rename to src/icons/Mono/CardsIcon.vue
diff --git a/src/stories/icons/Mono/ChartLineIcon.vue b/src/icons/Mono/ChartLineIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ChartLineIcon.vue
rename to src/icons/Mono/ChartLineIcon.vue
diff --git a/src/stories/icons/Mono/ChartPieIcon.vue b/src/icons/Mono/ChartPieIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ChartPieIcon.vue
rename to src/icons/Mono/ChartPieIcon.vue
diff --git a/src/stories/icons/Mono/ChatIcon.vue b/src/icons/Mono/ChatIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ChatIcon.vue
rename to src/icons/Mono/ChatIcon.vue
diff --git a/src/stories/icons/Mono/ChatWritingIcon.vue b/src/icons/Mono/ChatWritingIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ChatWritingIcon.vue
rename to src/icons/Mono/ChatWritingIcon.vue
diff --git a/src/stories/icons/Mono/CheckMarkIcon.vue b/src/icons/Mono/CheckMarkIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CheckMarkIcon.vue
rename to src/icons/Mono/CheckMarkIcon.vue
diff --git a/src/stories/icons/Mono/ChemistryFlaskIcon.vue b/src/icons/Mono/ChemistryFlaskIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ChemistryFlaskIcon.vue
rename to src/icons/Mono/ChemistryFlaskIcon.vue
diff --git a/src/stories/icons/Mono/CodeIcon.vue b/src/icons/Mono/CodeIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CodeIcon.vue
rename to src/icons/Mono/CodeIcon.vue
diff --git a/src/stories/icons/Mono/CoinsIcon.vue b/src/icons/Mono/CoinsIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CoinsIcon.vue
rename to src/icons/Mono/CoinsIcon.vue
diff --git a/src/stories/icons/Mono/ColorPaletteIcon.vue b/src/icons/Mono/ColorPaletteIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ColorPaletteIcon.vue
rename to src/icons/Mono/ColorPaletteIcon.vue
diff --git a/src/stories/icons/Mono/CompassIcon.vue b/src/icons/Mono/CompassIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CompassIcon.vue
rename to src/icons/Mono/CompassIcon.vue
diff --git a/src/stories/icons/Mono/ConstructionWorkerIcon.vue b/src/icons/Mono/ConstructionWorkerIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ConstructionWorkerIcon.vue
rename to src/icons/Mono/ConstructionWorkerIcon.vue
diff --git a/src/stories/icons/Mono/ContactsIcon.vue b/src/icons/Mono/ContactsIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ContactsIcon.vue
rename to src/icons/Mono/ContactsIcon.vue
diff --git a/src/stories/icons/Mono/CropIcon.vue b/src/icons/Mono/CropIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CropIcon.vue
rename to src/icons/Mono/CropIcon.vue
diff --git a/src/stories/icons/Mono/CrossCircleIcon.vue b/src/icons/Mono/CrossCircleIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CrossCircleIcon.vue
rename to src/icons/Mono/CrossCircleIcon.vue
diff --git a/src/icons/Mono/CrossIcon.vue b/src/icons/Mono/CrossIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..eb100f9642aac29bfffe4104c9513cbfa58da5c4
--- /dev/null
+++ b/src/icons/Mono/CrossIcon.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :fill="color ?? '#000000'"
+ :width="`${size ?? 40}px`"
+ :height="`${size ?? 40}px`"
+ viewBox="0 0 1024 1024"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M512.481 421.906L850.682 84.621c25.023-24.964 65.545-24.917 90.51.105s24.917 65.545-.105 90.51L603.03 512.377 940.94 850c25.003 24.984 25.017 65.507.033 90.51s-65.507 25.017-90.51.033L512.397 602.764 174.215 940.03c-25.023 24.964-65.545 24.917-90.51-.105s-24.917-65.545.105-90.51l338.038-337.122L84.14 174.872c-25.003-24.984-25.017-65.507-.033-90.51s65.507-25.017 90.51-.033L512.48 421.906z"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/CubeIcon.vue b/src/icons/Mono/CubeIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CubeIcon.vue
rename to src/icons/Mono/CubeIcon.vue
diff --git a/src/stories/icons/Mono/CupIcon.vue b/src/icons/Mono/CupIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CupIcon.vue
rename to src/icons/Mono/CupIcon.vue
diff --git a/src/stories/icons/Mono/CursorIcon.vue b/src/icons/Mono/CursorIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CursorIcon.vue
rename to src/icons/Mono/CursorIcon.vue
diff --git a/src/stories/icons/Mono/DiamondIcon.vue b/src/icons/Mono/DiamondIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DiamondIcon.vue
rename to src/icons/Mono/DiamondIcon.vue
diff --git a/src/stories/icons/Mono/DiaryIcon.vue b/src/icons/Mono/DiaryIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DiaryIcon.vue
rename to src/icons/Mono/DiaryIcon.vue
diff --git a/src/stories/icons/Mono/DiceIcon.vue b/src/icons/Mono/DiceIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DiceIcon.vue
rename to src/icons/Mono/DiceIcon.vue
diff --git a/src/stories/icons/Mono/DigIcon.vue b/src/icons/Mono/DigIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DigIcon.vue
rename to src/icons/Mono/DigIcon.vue
diff --git a/src/stories/icons/Mono/DislikeIcon.vue b/src/icons/Mono/DislikeIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DislikeIcon.vue
rename to src/icons/Mono/DislikeIcon.vue
diff --git a/src/stories/icons/Mono/DisplayIcon.vue b/src/icons/Mono/DisplayIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DisplayIcon.vue
rename to src/icons/Mono/DisplayIcon.vue
diff --git a/src/stories/icons/Mono/DocumentAddIcon.vue b/src/icons/Mono/DocumentAddIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DocumentAddIcon.vue
rename to src/icons/Mono/DocumentAddIcon.vue
diff --git a/src/stories/icons/Mono/DocumentDeleteIcon.vue b/src/icons/Mono/DocumentDeleteIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DocumentDeleteIcon.vue
rename to src/icons/Mono/DocumentDeleteIcon.vue
diff --git a/src/stories/icons/Mono/DocumentEditIcon.vue b/src/icons/Mono/DocumentEditIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DocumentEditIcon.vue
rename to src/icons/Mono/DocumentEditIcon.vue
diff --git a/src/stories/icons/Mono/DocumentIcon.vue b/src/icons/Mono/DocumentIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DocumentIcon.vue
rename to src/icons/Mono/DocumentIcon.vue
diff --git a/src/stories/icons/Mono/DollarIcon.vue b/src/icons/Mono/DollarIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DollarIcon.vue
rename to src/icons/Mono/DollarIcon.vue
diff --git a/src/stories/icons/Mono/DotsHorizontalIcon.vue b/src/icons/Mono/DotsHorizontalIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DotsHorizontalIcon.vue
rename to src/icons/Mono/DotsHorizontalIcon.vue
diff --git a/src/stories/icons/Mono/DotsVerticalIcon.vue b/src/icons/Mono/DotsVerticalIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DotsVerticalIcon.vue
rename to src/icons/Mono/DotsVerticalIcon.vue
diff --git a/src/stories/icons/Mono/DownloadIcon.vue b/src/icons/Mono/DownloadIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DownloadIcon.vue
rename to src/icons/Mono/DownloadIcon.vue
diff --git a/src/stories/icons/Mono/DropIcon.vue b/src/icons/Mono/DropIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DropIcon.vue
rename to src/icons/Mono/DropIcon.vue
diff --git a/src/stories/icons/Mono/DumbbelIcon.vue b/src/icons/Mono/DumbbelIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DumbbelIcon.vue
rename to src/icons/Mono/DumbbelIcon.vue
diff --git a/src/stories/icons/Mono/EarthIcon.vue b/src/icons/Mono/EarthIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/EarthIcon.vue
rename to src/icons/Mono/EarthIcon.vue
diff --git a/src/stories/icons/Mono/EditIcon.vue b/src/icons/Mono/EditIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/EditIcon.vue
rename to src/icons/Mono/EditIcon.vue
diff --git a/src/stories/icons/Mono/EncyclopediaIcon.vue b/src/icons/Mono/EncyclopediaIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/EncyclopediaIcon.vue
rename to src/icons/Mono/EncyclopediaIcon.vue
diff --git a/src/stories/icons/Mono/ExitIcon.vue b/src/icons/Mono/ExitIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ExitIcon.vue
rename to src/icons/Mono/ExitIcon.vue
diff --git a/src/stories/icons/Mono/EyeIcon.vue b/src/icons/Mono/EyeIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/EyeIcon.vue
rename to src/icons/Mono/EyeIcon.vue
diff --git a/src/stories/icons/Mono/FeedbackIcon.vue b/src/icons/Mono/FeedbackIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FeedbackIcon.vue
rename to src/icons/Mono/FeedbackIcon.vue
diff --git a/src/stories/icons/Mono/FilterIcon.vue b/src/icons/Mono/FilterIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FilterIcon.vue
rename to src/icons/Mono/FilterIcon.vue
diff --git a/src/stories/icons/Mono/FingerprintIcon.vue b/src/icons/Mono/FingerprintIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FingerprintIcon.vue
rename to src/icons/Mono/FingerprintIcon.vue
diff --git a/src/stories/icons/Mono/FireIcon.vue b/src/icons/Mono/FireIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FireIcon.vue
rename to src/icons/Mono/FireIcon.vue
diff --git a/src/stories/icons/Mono/FlagIcon.vue b/src/icons/Mono/FlagIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FlagIcon.vue
rename to src/icons/Mono/FlagIcon.vue
diff --git a/src/stories/icons/Mono/FlashIcon.vue b/src/icons/Mono/FlashIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FlashIcon.vue
rename to src/icons/Mono/FlashIcon.vue
diff --git a/src/stories/icons/Mono/FlashlightIcon.vue b/src/icons/Mono/FlashlightIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FlashlightIcon.vue
rename to src/icons/Mono/FlashlightIcon.vue
diff --git a/src/stories/icons/Mono/FolderLockIcon.vue b/src/icons/Mono/FolderLockIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FolderLockIcon.vue
rename to src/icons/Mono/FolderLockIcon.vue
diff --git a/src/stories/icons/Mono/FrameIcon.vue b/src/icons/Mono/FrameIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FrameIcon.vue
rename to src/icons/Mono/FrameIcon.vue
diff --git a/src/stories/icons/Mono/FullScreenIcon.vue b/src/icons/Mono/FullScreenIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FullScreenIcon.vue
rename to src/icons/Mono/FullScreenIcon.vue
diff --git a/src/stories/icons/Mono/GameControllerIcon.vue b/src/icons/Mono/GameControllerIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/GameControllerIcon.vue
rename to src/icons/Mono/GameControllerIcon.vue
diff --git a/src/stories/icons/Mono/GiftIcon.vue b/src/icons/Mono/GiftIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/GiftIcon.vue
rename to src/icons/Mono/GiftIcon.vue
diff --git a/src/stories/icons/Mono/GlassesIcon.vue b/src/icons/Mono/GlassesIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/GlassesIcon.vue
rename to src/icons/Mono/GlassesIcon.vue
diff --git a/src/stories/icons/Mono/HamburgerIcon.vue b/src/icons/Mono/HamburgerIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/HamburgerIcon.vue
rename to src/icons/Mono/HamburgerIcon.vue
diff --git a/src/stories/icons/Mono/HandIcon.vue b/src/icons/Mono/HandIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/HandIcon.vue
rename to src/icons/Mono/HandIcon.vue
diff --git a/src/stories/icons/Mono/HomeIcon.vue b/src/icons/Mono/HomeIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/HomeIcon.vue
rename to src/icons/Mono/HomeIcon.vue
diff --git a/src/stories/icons/Mono/ImageEditIcon.vue b/src/icons/Mono/ImageEditIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ImageEditIcon.vue
rename to src/icons/Mono/ImageEditIcon.vue
diff --git a/src/stories/icons/Mono/ImageIcon.vue b/src/icons/Mono/ImageIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ImageIcon.vue
rename to src/icons/Mono/ImageIcon.vue
diff --git a/src/stories/icons/Mono/LineDashedIcon.vue b/src/icons/Mono/LineDashedIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/LineDashedIcon.vue
rename to src/icons/Mono/LineDashedIcon.vue
diff --git a/src/stories/icons/Mono/LineDiagonalIcon.vue b/src/icons/Mono/LineDiagonalIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/LineDiagonalIcon.vue
rename to src/icons/Mono/LineDiagonalIcon.vue
diff --git a/src/stories/icons/Mono/LineDottedIcon.vue b/src/icons/Mono/LineDottedIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/LineDottedIcon.vue
rename to src/icons/Mono/LineDottedIcon.vue
diff --git a/src/stories/icons/Mono/LineIcon.vue b/src/icons/Mono/LineIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/LineIcon.vue
rename to src/icons/Mono/LineIcon.vue
diff --git a/src/stories/icons/Mono/MoveIcon.vue b/src/icons/Mono/MoveIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/MoveIcon.vue
rename to src/icons/Mono/MoveIcon.vue
diff --git a/src/stories/icons/Mono/ParagraphIcon.vue b/src/icons/Mono/ParagraphIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ParagraphIcon.vue
rename to src/icons/Mono/ParagraphIcon.vue
diff --git a/src/stories/icons/Mono/PhoneHandsetIcon.vue b/src/icons/Mono/PhoneHandsetIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/PhoneHandsetIcon.vue
rename to src/icons/Mono/PhoneHandsetIcon.vue
diff --git a/src/stories/icons/Mono/PlusCircleIcon.vue b/src/icons/Mono/PlusCircleIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/PlusCircleIcon.vue
rename to src/icons/Mono/PlusCircleIcon.vue
diff --git a/src/stories/icons/Mono/PlusIcon.vue b/src/icons/Mono/PlusIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/PlusIcon.vue
rename to src/icons/Mono/PlusIcon.vue
diff --git a/src/stories/icons/Mono/PointerIcon.vue b/src/icons/Mono/PointerIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/PointerIcon.vue
rename to src/icons/Mono/PointerIcon.vue
diff --git a/src/stories/icons/Mono/SaveIcon.vue b/src/icons/Mono/SaveIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/SaveIcon.vue
rename to src/icons/Mono/SaveIcon.vue
diff --git a/src/stories/icons/Mono/SearchIcon.vue b/src/icons/Mono/SearchIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/SearchIcon.vue
rename to src/icons/Mono/SearchIcon.vue
diff --git a/src/stories/icons/Mono/SettingsIcon.vue b/src/icons/Mono/SettingsIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/SettingsIcon.vue
rename to src/icons/Mono/SettingsIcon.vue
diff --git a/src/stories/icons/Mono/SortDownIcon.vue b/src/icons/Mono/SortDownIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/SortDownIcon.vue
rename to src/icons/Mono/SortDownIcon.vue
diff --git a/src/stories/icons/Mono/SortHorizontalIcon.vue b/src/icons/Mono/SortHorizontalIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/SortHorizontalIcon.vue
rename to src/icons/Mono/SortHorizontalIcon.vue
diff --git a/src/stories/icons/Mono/SortUpIcon.vue b/src/icons/Mono/SortUpIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/SortUpIcon.vue
rename to src/icons/Mono/SortUpIcon.vue
diff --git a/src/stories/icons/Mono/SortVerticalIcon.vue b/src/icons/Mono/SortVerticalIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/SortVerticalIcon.vue
rename to src/icons/Mono/SortVerticalIcon.vue
diff --git a/src/icons/Mono/StarFilledIcon.vue b/src/icons/Mono/StarFilledIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..85b83eecc3f64ca8ad843f1c8c0a5a143deead32
--- /dev/null
+++ b/src/icons/Mono/StarFilledIcon.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="size ?? '40px'"
+ :height="size ?? '40px'"
+ viewBox="0 0 16 16"
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ >
+ <path
+ :fill="color ?? '#000000'"
+ d="M8.67.912a.75.75 0 00-1.34 0L5.266 5.006l-4.622.662a.75.75 0 00-.412 1.285l3.335 3.18-.786 4.488a.75.75 0 001.082.796L8 13.287l4.137 2.13a.75.75 0 001.082-.796l-.786-4.489 3.335-3.18a.75.75 0 00-.412-1.284l-4.622-.662L8.67.912z"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/icons/Mono/StarIcon.vue b/src/icons/Mono/StarIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..56fe686c825e2b2c416bde8c7a3053c1b23ca838
--- /dev/null
+++ b/src/icons/Mono/StarIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+ color?: string;
+ size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+ <svg
+ :width="size ?? '40px'"
+ :height="size ?? '40px'"
+ viewBox="0 0 16 16"
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ >
+ <path
+ :fill="color ?? '#000000'"
+ fill-rule="evenodd"
+ d="M8 .5a.75.75 0 01.67.412l2.064 4.094 4.622.662a.75.75 0 01.412 1.285l-3.335 3.18.786 4.488a.75.75 0 01-1.082.796L8 13.287l-4.137 2.13a.75.75 0 01-1.082-.796l.786-4.489-3.335-3.18a.75.75 0 01.412-1.284l4.622-.662L7.33.912A.75.75 0 018 .5zm0 2.416L6.43 6.03a.75.75 0 01-.564.405l-3.48.498 2.507 2.39a.75.75 0 01.22.672l-.594 3.396 3.138-1.616a.75.75 0 01.686 0l3.138 1.616-.595-3.396a.75.75 0 01.221-.672l2.507-2.39-3.48-.498a.75.75 0 01-.563-.405L8 2.916z"
+ clip-rule="evenodd"
+ />
+ </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/TableIcon.vue b/src/icons/Mono/TableIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/TableIcon.vue
rename to src/icons/Mono/TableIcon.vue
diff --git a/src/stories/icons/Mono/TrashIcon.vue b/src/icons/Mono/TrashIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/TrashIcon.vue
rename to src/icons/Mono/TrashIcon.vue
diff --git a/src/stories/icons/Mono/TriangleIcon.vue b/src/icons/Mono/TriangleIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/TriangleIcon.vue
rename to src/icons/Mono/TriangleIcon.vue
diff --git a/src/stories/icons/Mono/UserIcon.vue b/src/icons/Mono/UserIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/UserIcon.vue
rename to src/icons/Mono/UserIcon.vue
diff --git a/src/stories/icons/Mono/CrossIcon.vue b/src/stories/icons/Mono/CrossIcon.vue
deleted file mode 100644
index 294696a8c1dc4256bd98f9492a5af1973da925ce..0000000000000000000000000000000000000000
--- a/src/stories/icons/Mono/CrossIcon.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-interface Props {
- color?: string;
- size?: string | number;
-}
-defineProps<Props>();
-</script>
-
-<template>
- <svg
- :width="`${size ?? 40}px`"
- :height="`${size ?? 40}px`"
- viewBox="0 0 24 24"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M6.99486 7.00636C6.60433 7.39689 6.60433 8.03005 6.99486 8.42058L10.58 12.0057L6.99486 15.5909C6.60433 15.9814 6.60433 16.6146 6.99486 17.0051C7.38538 17.3956 8.01855 17.3956 8.40907 17.0051L11.9942 13.4199L15.5794 17.0051C15.9699 17.3956 16.6031 17.3956 16.9936 17.0051C17.3841 16.6146 17.3841 15.9814 16.9936 15.5909L13.4084 12.0057L16.9936 8.42059C17.3841 8.03007 17.3841 7.3969 16.9936 7.00638C16.603 6.61585 15.9699 6.61585 15.5794 7.00638L11.9942 10.5915L8.40907 7.00636C8.01855 6.61584 7.38538 6.61584 6.99486 7.00636Z"
- :fill="color ?? '#000000'"
- />
- </svg>
-</template>
-
-<style scoped></style>
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 0cd87b13437415f81546e00f5d07a5c9b1883b93..a7560fb728e407be146659a7b4266c8c74648e88 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -13,7 +13,7 @@
"@icons/*": ["./src/icons/*"],
"@helpers/*": ["src/common/helpers/*"],
"@interfaces/*": ["src/common/interfaces/*"],
- "@stories/*": ["./src/stories/*"]
+ "@components/*": ["./src/components/*"]
}
}
}
diff --git a/vite.config.ts b/vite.config.ts
index b38c6eb4e53b77a8f4df992e0094629525e8fec2..ed01d644e426ec8b49ab368837fdc4f633c1ffa6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,7 +12,7 @@ export default defineConfig({
'@icons': fileURLToPath(new URL('./src/icons', import.meta.url)),
'@helpers': fileURLToPath(new URL('./src/common/helpers', import.meta.url)),
'@interfaces': fileURLToPath(new URL('./src/common/interfaces', import.meta.url)),
- '@stories': fileURLToPath(new URL('./src/stories', import.meta.url)),
+ '@components': fileURLToPath(new URL('./src/components', import.meta.url)),
},
},
});