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

feat: almost finish with Select but still without group's logic (and add one icon)

parent 2caf0a97

.storybook/main.ts

+4 −9
Original line number Diff line number Diff line 
import type { StorybookConfig } from '@storybook/vue3-vite'

import type { StorybookConfig } from '@storybook/vue3-vite';



const config: StorybookConfig = {

  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],

  addons: [

    '@storybook/addon-onboarding',

    '@storybook/addon-essentials',

    '@chromatic-com/storybook',

    '@storybook/addon-interactions',

  ],

  addons: ['@storybook/addon-essentials', '@chromatic-com/storybook', '@storybook/addon-interactions'],

  framework: {

    name: '@storybook/vue3-vite',

    options: {},

  },

}

export default config
 
};

export default config;

README.md

+2 −0
Original line number Diff line number Diff line
@@ -23,7 +23,9 @@ 
## Общая информация

### Components count: 13

### Bundle size: 278.3KB



---



## Важные моменты при разработке

### Общее начало шаблона для компонентов:

```

src/App.vue

+2 −0
Original line number Diff line number Diff line
@@ -107,6 +107,7 @@ 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 Playground from '@/Playground.vue';

import ArrowShortDownIcon from '@stories/icons/Mono/ArrowShortDownIcon.vue';



const gentleIcons = {

  Age18Icon,
@@ -121,6 +122,7 @@ const gentleIcons = { 
  ArrowForwardIcon,

  ArrowLeftIcon,

  ArrowRightIcon,

  ArrowShortDownIcon,

  ArrowsVerticalIcon,

  AtIcon,

  AwardIcon,

src/Playground.vue

+15 −1
Original line number Diff line number Diff line
@@ -15,6 +15,8 @@ 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';



const visibleDrawer = ref(false);

const sliderOptions: ISliderOptions[] = [
@@ -181,13 +183,25 @@ const tableData = [ 
  ],

];

const activeCheckbox = ref();

const selectOptions = [

  {

    value: 'First',

  },

  {

    value: 'Second',

  },

];

</script>



<template>

  <h2 class="title gradient-text">Playground</h2>

  <Select :options="selectOptions" theme="sky">

    <template #icon-left-First>

      <AtIcon color="#3aa" size="20" />

    </template>

  </Select>

  <Tag theme="sky">

    <template #icon-right><TrashIcon color="#3333aa" size="18" /></template>

    <template #icon-left><TrashIcon color="sky" size="18" /></template>

  </Tag>

  {{ activeCheckbox }}

  <Checkbox v-model:active="activeCheckbox" size="small" />

src/common/constants/icons.ts

+105 −103
Original line number Diff line number Diff line
@@ -107,113 +107,115 @@ 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';



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

  Age18Icon: Age18Icon,

  AirplaneIcon: AirplaneIcon,

  AlarmIcon: AlarmIcon,

  AlignCenterIcon: AlignCenterIcon,

  AlignLeftIcon: AlignLeftIcon,

  AlignRightIcon: AlignRightIcon,

  AnchorIcon: AnchorIcon,

  AnchorLinkIcon: AnchorLinkIcon,

  ArchiveIcon: ArchiveIcon,

  ArrowForwardIcon: ArrowForwardIcon,

  ArrowLeftIcon: ArrowLeftIcon,

  ArrowRightIcon: ArrowRightIcon,

  ArrowsVerticalIcon: ArrowsVerticalIcon,

  AtIcon: AtIcon,

  AwardIcon: AwardIcon,

  BackspaceIcon: BackspaceIcon,

  BadgeIcon: BadgeIcon,

  BallFootballIcon: BallFootballIcon,

  BallIcon: BallIcon,

  BanknoteIcon: BanknoteIcon,

  BellIcon: BellIcon,

  BellOffIcon: BellOffIcon,

  BoxIcon: BoxIcon,

  BrightnessIcon: BrightnessIcon,

  BulbIcon: BulbIcon,

  CalculatorIcon: CalculatorIcon,

  CalendarAddIcon: CalendarAddIcon,

  CalendarIcon: CalendarIcon,

  CalendarRemoveIcon: CalendarRemoveIcon,

  CardsIcon: CardsIcon,

  ChartLineIcon: ChartLineIcon,

  ChartPieIcon: ChartPieIcon,

  ChatIcon: ChatIcon,

  ChatWritingIcon: ChatWritingIcon,

  CheckMarkIcon: CheckMarkIcon,

  ChemistryFlaskIcon: ChemistryFlaskIcon,

  CodeIcon: CodeIcon,

  CoinsIcon: CoinsIcon,

  ColorPaletteIcon: ColorPaletteIcon,

  CompassIcon: CompassIcon,

  ConstructionWorkerIcon: ConstructionWorkerIcon,

  ContactsIcon: ContactsIcon,

  CropIcon: CropIcon,

  CrossIcon: CrossIcon,

  CrossCircleIcon: CrossCircleIcon,

  CubeIcon: CubeIcon,

  CupIcon: CupIcon,

  CursorIcon: CursorIcon,

  DiamondIcon: DiamondIcon,

  DiaryIcon: DiaryIcon,

  DiceIcon: DiceIcon,

  DigIcon: DigIcon,

  DislikeIcon: DislikeIcon,

  DisplayIcon: DisplayIcon,

  DocumentIcon: DocumentIcon,

  DocumentAddIcon: DocumentAddIcon,

  DocumentDeleteIcon: DocumentDeleteIcon,

  DocumentEditIcon: DocumentEditIcon,

  DollarIcon: DollarIcon,

  DotsHorizontalIcon: DotsHorizontalIcon,

  DotsVerticalIcon: DotsVerticalIcon,

  DownloadIcon: DownloadIcon,

  DropIcon: DropIcon,

  DumbbelIcon: DumbbelIcon,

  EarthIcon: EarthIcon,

  EditIcon: EditIcon,

  EncyclopediaIcon: EncyclopediaIcon,

  ExitIcon: ExitIcon,

  EyeIcon: EyeIcon,

  FeedbackIcon: FeedbackIcon,

  FilterIcon: FilterIcon,

  FingerprintIcon: FingerprintIcon,

  FireIcon: FireIcon,

  FlagIcon: FlagIcon,

  FlashIcon: FlashIcon,

  FlashlightIcon: FlashlightIcon,

  FolderLockIcon: FolderLockIcon,

  FrameIcon: FrameIcon,

  FullScreenIcon: FullScreenIcon,

  GameControllerIcon: GameControllerIcon,

  GiftIcon: GiftIcon,

  GlassesIcon: GlassesIcon,

  HamburgerIcon: HamburgerIcon,

  HandIcon: HandIcon,

  HomeIcon: HomeIcon,

  ImageIcon: ImageIcon,

  ImageEditIcon: ImageEditIcon,

  LineIcon: LineIcon,

  LineDashedIcon: LineDashedIcon,

  LineDottedIcon: LineDottedIcon,

  LineDiagonalIcon: LineDiagonalIcon,

  MoveIcon: MoveIcon,

  ParagraphIcon: ParagraphIcon,

  PhoneHandsetIcon: PhoneHandsetIcon,

  PlusCircleIcon: PlusCircleIcon,

  PlusIcon: PlusIcon,

  PointerIcon: PointerIcon,

  SaveIcon: SaveIcon,

  SettingsIcon: SettingsIcon,

  Age18: Age18Icon,

  Airplane: AirplaneIcon,

  Alarm: AlarmIcon,

  AlignCenter: AlignCenterIcon,

  AlignLeft: AlignLeftIcon,

  AlignRight: AlignRightIcon,

  Anchor: AnchorIcon,

  AnchorLink: AnchorLinkIcon,

  Archive: ArchiveIcon,

  ArrowForward: ArrowForwardIcon,

  ArrowLeft: ArrowLeftIcon,

  ArrowRight: ArrowRightIcon,

  ArrowShortDown: ArrowShortDownIcon,

  ArrowsVertical: ArrowsVerticalIcon,

  At: AtIcon,

  Award: AwardIcon,

  Backspace: BackspaceIcon,

  Badge: BadgeIcon,

  BallFootball: BallFootballIcon,

  Ball: BallIcon,

  Banknote: BanknoteIcon,

  Bell: BellIcon,

  BellOff: BellOffIcon,

  Box: BoxIcon,

  Brightness: BrightnessIcon,

  Bulb: BulbIcon,

  Calculator: CalculatorIcon,

  CalendarAdd: CalendarAddIcon,

  Calendar: CalendarIcon,

  CalendarRemove: CalendarRemoveIcon,

  Cards: CardsIcon,

  ChartLine: ChartLineIcon,

  ChartPie: ChartPieIcon,

  Chat: ChatIcon,

  ChatWriting: ChatWritingIcon,

  CheckMark: CheckMarkIcon,

  ChemistryFlask: ChemistryFlaskIcon,

  Code: CodeIcon,

  Coins: CoinsIcon,

  ColorPalette: ColorPaletteIcon,

  Compass: CompassIcon,

  ConstructionWorker: ConstructionWorkerIcon,

  Contacts: ContactsIcon,

  Crop: CropIcon,

  Cross: CrossIcon,

  CrossCircle: CrossCircleIcon,

  Cube: CubeIcon,

  Cup: CupIcon,

  Cursor: CursorIcon,

  Diamond: DiamondIcon,

  Diary: DiaryIcon,

  Dice: DiceIcon,

  Dig: DigIcon,

  Dislike: DislikeIcon,

  Display: DisplayIcon,

  Document: DocumentIcon,

  DocumentAdd: DocumentAddIcon,

  DocumentDelete: DocumentDeleteIcon,

  DocumentEdit: DocumentEditIcon,

  Dollar: DollarIcon,

  DotsHorizontal: DotsHorizontalIcon,

  DotsVertical: DotsVerticalIcon,

  Download: DownloadIcon,

  Drop: DropIcon,

  Dumbbel: DumbbelIcon,

  Earth: EarthIcon,

  Edit: EditIcon,

  Encyclopedia: EncyclopediaIcon,

  Exit: ExitIcon,

  Eye: EyeIcon,

  Feedback: FeedbackIcon,

  Filter: FilterIcon,

  Fingerprint: FingerprintIcon,

  Fire: FireIcon,

  Flag: FlagIcon,

  Flash: FlashIcon,

  Flashlight: FlashlightIcon,

  FolderLock: FolderLockIcon,

  Frame: FrameIcon,

  FullScreen: FullScreenIcon,

  GameController: GameControllerIcon,

  Gift: GiftIcon,

  Glasses: GlassesIcon,

  Hamburger: HamburgerIcon,

  Hand: HandIcon,

  Home: HomeIcon,

  Image: ImageIcon,

  ImageEdit: ImageEditIcon,

  Line: LineIcon,

  LineDashed: LineDashedIcon,

  LineDotted: LineDottedIcon,

  LineDiagonal: LineDiagonalIcon,

  Move: MoveIcon,

  Paragraph: ParagraphIcon,

  PhoneHandset: PhoneHandsetIcon,

  PlusCircle: PlusCircleIcon,

  Plus: PlusIcon,

  Pointer: PointerIcon,

  Save: SaveIcon,

  Settings: SettingsIcon,

  SortDownIcon,

  SortHorizontalIcon,

  SortUpIcon,

  SortVerticalIcon,

  TableIcon: TableIcon,

  TrashIcon: TrashIcon,

  TriangleIcon: TriangleIcon,

  UserIcon: UserIcon,

  Table: TableIcon,

  Trash: TrashIcon,

  Triangle: TriangleIcon,

  User: UserIcon,

};