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

feat: completed with 9 initial components (bundle size: 248.7KB)

parent 5d51ed45

src/App.vue

+40 −4
Original line number Diff line number Diff line
@@ -281,18 +281,51 @@ const options: ISBOption[] = [ 
const visible = ref(false);

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

const value = ref();

const active = ref(false);

const sliderValue = ref(1);

</script>



<template>

  {{ 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

    repellat saepe temporibus? 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' }]" />

  <MenuDial

    v-model:active="active"

    theme="sky"

    direction="right"

    :items="[

      {

        label: 'font-family',

        theme: 'green',

        link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family',

        linkBlank: true,

        textStyle: 'bold',

      },

      {

        label: 'Second',

        theme: 'red',

        textStyle: 'italic',

      },

    ]"

  >

    <template #1IconBefore>

      <AnchorLinkIcon size="20" color="white" />

    </template>

    <template #2IconBefore>

      <CrossIcon color="white" />

    </template>

    <template #2IconAfter>

      <CrossIcon color="white" />

    </template>

  </MenuDial>

  <Slider

    v-model:value="sliderValue"

    :options="sliderOptions"

    orientation="vertical"

    width="400"
@@ -330,7 +363,10 @@ const value = ref(); 
      recusandae voluptatibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque

      blanditiis consectetur cum delectus ducimus eius est hic incidunt iusto molestiae odio optio

      reiciendis reprehenderit saepe tempora vel, veniam veritatis voluptates. Lorem ipsum dolor sit

      amet, consectetur adipisicing elit.

      amet, consectetur adipisicing elit. 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?

    </p>

    <template #footer>

      pizdwertyukilokl,kmjhgfw ewesrdtyukilo,kmjng eartyukikdhgfgjhklj.,kga</template

src/assets/components.css

+4 −0
Original line number Diff line number Diff line
@@ -11,3 +11,7 @@ 
  width: 8px;

  height: 8px;

}

::-webkit-scrollbar-thumb {

  border-radius: 5px;

  background-color: #888;

}

src/common/interfaces/common.ts

+2 −0
Original line number Diff line number Diff line
@@ -23,6 +23,8 @@ export type TSize = 'small' | 'medium' | 'large' | 'huge'; 


export type TTextStyle = 'bold' | 'italic';



export type TDirection = 'up' | 'right' | 'down' | 'left';



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



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

src/common/interfaces/componentsProps.ts

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

  TBorder,

  TDirection,

  TExpandedPosition,

  TIcons,

  TPosition,
@@ -32,11 +33,14 @@ export interface IMDProps { 
    label: string;

    theme?: string;

    textStyle?: TTextStyle;

    link?: string;

    linkBlank?: boolean;

    onClick?: () => void;

  }[];

  size?: TSize;

  theme?: string;

  direction?: TPosition;

  direction?: TDirection;

  // direction?: TDirection | 'circle';

}



export interface ISliderProps {

src/stories/components/Button/Button.stories.ts

+1 −4
Original line number Diff line number Diff line
@@ -80,10 +80,7 @@ const meta: Meta = { 
      ],

    },

  },

  args: {

    // primary: false,

    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args

  },

  args: {},

} satisfies Meta<typeof Button>;



export default meta;