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

Merge pull request #6 from malyusgun/develop 

Finish "UI-library v1.0.0"
parents 05c8a1fa 166a90a3

README.md

+6 −2
Original line number Diff line number Diff line
@@ -7,6 +7,7 @@ 
## Список компонентов:

- Table;

- TreeList;

- Carousel;

- Popup;

- Modal;

- Drawer;
@@ -15,21 +16,24 @@ 
- Paginator;

- Slider;

- Knob;

- ColorPicker;

- Select;

- InputDiv;

- SelectButton;

- Button;

- Rating;

- ToggleSwitch;

- Checkbox;



- Toast;

- ProgressBar;

- Tag;

- Divider.



---

## Общая информация

### Components count: 18

### Bundle size: 319.4KB

### Components count: 22

### Bundle size: 336.6KB



---

eslint.config.js

+1 −0
Original line number Diff line number Diff line
@@ -25,6 +25,7 @@ export default [ 
  {

    rules: {

      'vue/multi-word-component-names': 'off',

      '@typescript-eslint/no-explicit-any': 'off',

    },

  },

];

src/App.vue

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

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

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

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

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

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

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

import CupIcon from '@icons/Mono/CupIcon.vue';
@@ -115,6 +115,13 @@ 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';

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

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

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

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

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

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

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



const gentleIcons = {

  Age18Icon,
@@ -164,9 +171,14 @@ const gentleIcons = { 
  CompassIcon,

  ConstructionWorkerIcon,

  ContactsIcon,

  CornerLeftBottomIcon,

  CornerLeftTopIcon,

  CornerRightBottomIcon,

  CornerRightTopIcon,

  CropIcon,

  CrossIcon,

  CrossCircleIcon,

  CrossRoundIcon,

  CrossRoundFilledIcon,

  CubeIcon,

  CupIcon,

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

  ImageIcon,

  ImageEditIcon,

  InfoIcon,

  LineIcon,

  LineDashedIcon,

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

  TriangleIcon,

  UserIcon,

  WarningIcon,

};

</script>

src/Playground.vue

+55 −0
Original line number Diff line number Diff line
@@ -21,6 +21,9 @@ import Knob from '@components/Knob/Knob.vue'; 
import Rating from '@components/Rating/Rating.vue';

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

import ProgressBar from '@components/ProgressBar/ProgressBar.vue';

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

import Toast from '@components/Toast/Toast.vue';

import InputDiv from '@components/InputDiv/InputDiv.vue';



const visibleDrawer = ref(false);

const sliderOptions: ISliderOptions[] = [
@@ -173,11 +176,33 @@ const selectOptions = [ 
];

const knob = ref(0);

const pbValue = ref(0);

const toast = ref(false);

const toast2 = ref(false);

const toast3 = ref(false);

const toast4 = ref(false);

const openDrawer = () => (visibleDrawer.value = true);

</script>



<template>

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

  <Button

    theme="black"

    label="Open all toasts"

    @click="

      () => {

        toast = true;

        toast2 = true;

        toast3 = true;

        toast4 = true;

      }

    "

  />

  <InputDiv :regex="/^[0-9-+=]+$/" />

  <Button label="Open toast" @click="toast2 = true" />

  <Toast v-model="toast" static :duration="60" type="success" position="topLeft" width="500px" />

  <Toast v-model="toast4" :duration="2" type="info" position="topLeft" width="500px" />

  <Toast v-model="toast3" :duration="2" type="warn" position="bottomRight" width="500px" />

  <Toast v-model="toast2" :duration="60" type="error" position="bottomRight" width="500px" />

  <Rating theme="red">

    <template #offIcon>

      <CrossIcon color="red" />
@@ -201,6 +226,35 @@ const openDrawer = () => (visibleDrawer.value = true); 
  <Checkbox v-model="activeCheckbox" size="large" />

  <Checkbox v-model="activeCheckbox" size="huge" />

  <ProgressBar v-model="pbValue" />

  <Carousel

    style="margin: 20px"

    theme="rose"

    :itemsProps="[

      {

        index: 1,

        text: 'This is SPARTA!',

        src: 'storybook.svg',

      },

      {

        index: 2,

        text: 'This is the second item!',

        src: 'https://www.industrialempathy.com/img/remote/ZiClJf-640w.avif',

      },

      {

        index: 3,

        text:

          'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi atque blanditiis debitis distinctio, doloribus,\n' +

          '        eius est eveniet excepturi facere id iure laboriosam laborum libero, minus nesciunt nostrum nulla repellat\n' +

          '        veritatis.',

      },

    ]"

  >

    <template v-slot="item: any">

      <h2 style="text-align: center; margin-bottom: 20px">Element {{ item?.index }}</h2>

      <p>{{ item?.text }}</p>

      <img :src="item.src" :style="`width: ${item.index === 1 ? '30px' : '100%'}`"

    /></template>

  </Carousel>

  {{ tableData[1] }}

  <Table

    center
@@ -211,6 +265,7 @@ const openDrawer = () => (visibleDrawer.value = true); 
    theme="black"

    stripedRows

    paginator

    editable

    :no-editing-settings="{

      cells: [[0, 0]],

    }"

src/common/constants/icons.ts

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

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

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

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

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

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

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

import CheckMarkIcon from '@icons/Mono/CheckMarkIcon.vue';
@@ -111,6 +111,13 @@ 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';

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

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

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

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

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

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

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



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

  Age18: Age18Icon,
@@ -156,9 +163,14 @@ export const iconsSet: Record<string, Component> = { 
  Compass: CompassIcon,

  ConstructionWorker: ConstructionWorkerIcon,

  Contacts: ContactsIcon,

  CornerLeftBottom: CornerLeftBottomIcon,

  CornerLeftTop: CornerLeftTopIcon,

  CornerRightBottom: CornerRightBottomIcon,

  CornerRightTop: CornerRightTopIcon,

  Crop: CropIcon,

  Cross: CrossIcon,

  CrossCircle: CrossCircleIcon,

  CrossRound: CrossRoundIcon,

  CrossRoundFilled: CrossRoundFilledIcon,

  Cube: CubeIcon,

  Cup: CupIcon,

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

  Image: ImageIcon,

  ImageEdit: ImageEditIcon,

  Info: InfoIcon,

  Line: LineIcon,

  LineDashed: LineDashedIcon,

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

  Triangle: TriangleIcon,

  User: UserIcon,

  Warning: WarningIcon,

};