Unverified Commit c26a42d3 authored by Dmitriy's avatar Dmitriy Committed by GitHub
Browse files

Merge pull request #4 from malyusgun/develop 

Rating, ProgressBar and Paginator
parents 500b104b 1e2fd85b

README.md

+8 −3
Original line number Diff line number Diff line
@@ -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(() => );

```

package.json

+0 −3
Original line number Diff line number Diff line
@@ -52,8 +52,5 @@ 
    "extends": [

      "plugin:storybook/recommended"

    ]

  },

  "volta": {

    "node": "23.6.0"

  }

}

src/App.vue

+121 −109
Original line number Diff line number Diff line 
<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,

src/Playground.vue

+33 −23
Original line number Diff line number Diff line 
<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

src/common/constants/icons.ts

+118 −114

File changed.

Preview size limit exceeded, changes collapsed.