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

feat: finished - Modal

parent 935172ea

README.md

+3 −1
Original line number Diff line number Diff line
@@ -6,9 +6,11 @@ 


## Список компонентов:

- TreeList;

- Slider;

- Drawer;

- Modal;

- SelectButton;

- Button;

- ToggleButton;

- ToggleSwitch;

- Divider;

src/App.vue

+11 −2
Original line number Diff line number Diff line
@@ -110,6 +110,7 @@ import Button from '@stories/components/Button/Button.vue'; 
import Slider from '@stories/components/Slider/Slider.vue';

import type { ISBOption } from '@interfaces/componentsProp';

import Modal from '@stories/components/Modal/Modal.vue';

import MenuDial from '@stories/components/MenuDial/MenuDial.vue';



const gentleIcons = [

  Age18Icon,
@@ -279,10 +280,18 @@ const options: ISBOption[] = [ 
];

const visible = ref(false);

const onClose = () => console.log('close!');

const value = ref();

</script>



<template>

  <Modal v-model:visible="visible" @onClose="onClose"></Modal>

  {{ value }}

  <Modal v-model:visible="visible" theme="red" @onClose="onClose"

    ><template #header>huuuuuuuuuuui</template>Lorem ipsum dolor sit amet, consectetur adipisicing

    elit. Eaque explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo

    nesciunt nihil officia, pariatu nemo nesciunt nihil officia, pariatur praesentium quas quisquam

    repellat saepe temporibus?</Modal

  >

  <MenuDial :items="[{ label: 'First' }]" />

  <Slider

    :options="sliderOptions"

    orientation="vertical"
@@ -295,7 +304,7 @@ const onClose = () => console.log('close!'); 
    isSmooth

  />

  <Button @click="visible = true" theme="sky" label="I'm a button"></Button>

  <SelectButton :options="options" size="large">

  <SelectButton :options="options" size="large" v-model:value="value">

    <template #1Icon>

      <TrashIcon />

    </template>

src/assets/components.css

+4 −0
Original line number Diff line number Diff line
@@ -7,3 +7,7 @@ 
.flex-column {

  flex-direction: column;

}

::-webkit-scrollbar {

  width: 8px;

  height: 8px;

}

src/common/interfaces/common.ts

+2 −0
Original line number Diff line number Diff line
@@ -25,6 +25,8 @@ export type TTextStyle = 'bold' | 'italic'; 


export type TPosition = 'top' | 'right' | 'bottom' | 'left';



export type TExpandedPosition = TPosition | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';



export type TBorder = 'solid' | 'dashed' | 'dotted';



export type TIcons = keyof typeof iconsSet;

src/common/interfaces/componentsProps.ts

+17 −1
Original line number Diff line number Diff line 
import type {

  TBorder,

  TExpandedPosition,

  TIcons,

  TPosition,

  TSize,
@@ -26,6 +27,18 @@ export interface ITIProps { 
  themeColor: string;

}



export interface IMDProps {

  items: {

    label: string;

    theme?: string;

    textStyle?: TTextStyle;

    onClick?: () => void;

  }[];

  size?: TSize;

  theme?: string;

  direction?: TPosition;

}



export interface ISliderProps {

  width?: string | number;

  min?: string | number;
@@ -52,7 +65,10 @@ export interface IDrawerProps { 


export interface IModalProps {

  theme?: TThemeColor;

  width?: number | string;

  width?: string;

  height?: string;

  position?: TExpandedPosition;

  dismissible?: boolean;

  closeIcon?: TIcons;

  headerDivider?: boolean;

}