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

src/App.vue

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

@@ -11,3 +11,7 @@
   width: 8px;
   height: 8px;
 }
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: #888;
+}

src/common/interfaces/common.ts

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

 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

@@ -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;

src/stories/components/Divider/Divider.stories.ts

@@ -37,11 +37,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
-    // onClick: fn(),
-  },
+  args: {},
 } satisfies Meta<typeof Divider>;
 
 export default meta;

src/stories/components/Drawer/Drawer.stories.ts

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Drawer from './Drawer.vue';
 import { iconsSet } from '@/common/constants/icons';
-import { fn } from '@storybook/test';
 
 const meta: Meta = {
   title: 'Components/Drawer',
@@ -48,11 +47,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
-    onClose: fn(),
-  },
+  args: {},
 } satisfies Meta<typeof Drawer>;
 
 export default meta;

src/stories/components/Drawer/Drawer.vue

@@ -46,7 +46,7 @@ const drawerWidth = computed(() => {
           drawerBackgroundOpened: visible,
         },
       ]"
-      @click.prevent="dismissible ? (visible = false) : false"
+      @click.prevent="dismissible ? (visible = false) : ''"
     ></section>
     <section
       :style="`color: ${textColor}; background-color: ${themeColor}`"
@@ -150,6 +150,7 @@ const drawerWidth = computed(() => {
   flex: 1 1 auto;
   overflow: auto;
   margin: 10px;
+  padding-right: 10px;
 }
 .drawerFooter {
   padding: 10px 10px 0 10px;

src/stories/components/Modal/Modal.stories.ts

@@ -57,10 +57,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 Modal>;
 
 export default meta;

src/stories/components/Modal/Modal.vue

@@ -85,8 +85,8 @@ document.addEventListener('keydown', onKeydown);
   position: fixed;
   top: -100%;
   left: -100%;
-  width: 250vw;
-  height: 250vh;
+  width: 200vw;
+  height: 200vh;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: -50;
   opacity: 0;

src/stories/components/SelectButton/SelectButton.stories.ts

 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import SelectButton from './SelectButton.vue';
-import { fn } from '@storybook/test';
 
 const meta: Meta = {
   title: 'Components/SelectButton',
@@ -16,7 +15,7 @@ const meta: Meta = {
   },
   argTypes: {
     options: {
-      control: 'array',
+      control: 'object',
     },
     size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
     rounded: { control: 'boolean' },
@@ -62,11 +61,7 @@ const meta: Meta = {
     },
     disabled: { control: 'boolean' },
   },
-  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
-    onClick: fn(),
-  },
+  args: {},
 } satisfies Meta<typeof SelectButton>;
 
 export default meta;

src/stories/components/Slider/Slider.stories.ts

@@ -63,10 +63,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 Slider>;
 
 export default meta;

src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts

@@ -59,10 +59,7 @@ const meta: Meta = {
     darkNegative: { control: 'boolean' },
     disabled: { control: 'boolean' },
   },
-  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 ToggleSwitch>;
 
 export default meta;

src/stories/components/ToggleSwitch/ToggleSwitch.vue

@@ -77,7 +77,7 @@ const sizes = computed(() => {
     <span
       :style="`background-color: ${disabled ? '#e1e7f1 !important' : themeColor}; border-radius: ${sizes.borderRadius}px;`"
       :class="[
-        'activeBackground',
+        'background',
         {
           inactiveBackground: !active && !disabled,
         },
@@ -94,20 +94,20 @@ const sizes = computed(() => {
 .switcher {
   position: relative;
 }
-.activeBackground {
+.background {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  transition: background-color 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
 }
 .inactiveBackground {
   background-color: v-bind(inactiveColor) !important;
-  transition: background-color 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
 }
-.switcher:hover .inactiveBackground {
+.switcher:hover .background {
   filter: brightness(90%);
 }
 .switcherCircle {

src/stories/components/TreeList/TreeItems.vue

@@ -48,13 +48,6 @@ const emit = defineEmits(['toggleIsOpen', 'onClick']);
             "
             size="17"
           />
-          <component
-            :is="iconsSet[item.iconBefore]"
-            v-if="item.iconBefore"
-            :color="convert500ThemeToColor(item.iconColor)"
-            style="min-width: 17px"
-            size="17"
-          />
           <a
             :href="item.link"
             :target="item.linkBlank ? '_blank' : '_self'"
@@ -76,15 +69,20 @@ const emit = defineEmits(['toggleIsOpen', 'onClick']);
                 emit('onClick', item.link);
               }
             "
-            >{{ item.label }}</a
-          >
-          <component
-            :is="iconsSet[item.iconAfter]"
-            v-if="item.iconAfter"
-            :color="convert500ThemeToColor(item.iconColor)"
-            style="min-width: 17px"
-            size="17"
-          />
+            ><component
+              :is="iconsSet[item.iconBefore]"
+              v-if="item.iconBefore"
+              :color="convert500ThemeToColor(item.iconColor)"
+              style="min-width: 17px"
+              size="17" />
+            <span>{{ item.label }}</span
+            ><component
+              :is="iconsSet[item.iconAfter]"
+              v-if="item.iconAfter"
+              :color="convert500ThemeToColor(item.iconColor)"
+              style="min-width: 17px"
+              size="17"
+          /></a>
         </section>
         <section class="children">
           <TreeItems
@@ -107,7 +105,8 @@ const emit = defineEmits(['toggleIsOpen', 'onClick']);
   background-color: v-bind(themeColor);
 }
 .label {
-  display: inline-block;
+  display: flex;
+  gap: 5px;
   position: relative;
   padding: 4px 5px;
   background-color: v-bind(themeColor);

src/stories/components/TreeList/TreeList.stories.ts

@@ -39,10 +39,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 TreeList>;
 
 export default meta;

src/stories/components/examples/ExampleStorybookButton/ButtonStorybook.stories.ts

-import { fn } from '@storybook/test';
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import Button from './ButtonStorybook.vue';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const meta: Meta = {
-  title: 'Examples/Button',
-  component: Button,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: 'select', options: ['small', 'medium', 'large'] },
-    backgroundColor: { control: 'color' },
-  },
-  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
-    onClick: fn(),
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    primary: false,
-    label: 'Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    label: 'Button',
-    size: 'large',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    label: 'Button',
-    size: 'small',
-  },
-};
-
-export const DefaultButton: Story = {
-  args: {
-    primary: false,
-    label: 'Button',
-  },
-};

src/stories/components/examples/ExampleStorybookButton/ButtonStorybook.vue

-<template>
-  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
-</template>
-
-<script lang="ts" setup>
-import './buttonStorybook.css';
-import { computed } from 'vue';
-
-const props = withDefaults(
-  defineProps<{
-    /**
-     * The label of the button
-     */
-    label: string;
-    /**
-     * primary or secondary button
-     */
-    primary?: boolean;
-    /**
-     * size of the button
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * background color of the button
-     */
-    backgroundColor?: string;
-  }>(),
-  { primary: false },
-);
-
-const emit = defineEmits<{
-  (e: 'click', id: number): void;
-}>();
-
-const classes = computed(() => ({
-  'storybook-button': true,
-  'storybook-button--primary': props.primary,
-  'storybook-button--secondary': !props.primary,
-  [`storybook-button--${props.size || 'medium'}`]: true,
-}));
-
-const style = computed(() => ({
-  backgroundColor: props.backgroundColor,
-}));
-
-const onClick = () => {
-  emit('click', 1);
-};
-</script>

src/stories/components/examples/ExampleStorybookButton/buttonStorybook.css

-.storybook-button {
-  display: inline-block;
-  cursor: pointer;
-  border: 0;
-  border-radius: 3em;
-  font-weight: 700;
-  line-height: 1;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-.storybook-button--primary {
-  background-color: #1ea7fd;
-  color: white;
-}
-.storybook-button--secondary {
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-  background-color: transparent;
-  color: #333;
-}
-.storybook-button--small {
-  padding: 10px 16px;
-  font-size: 12px;
-}
-.storybook-button--medium {
-  padding: 11px 20px;
-  font-size: 14px;
-}
-.storybook-button--large {
-  padding: 12px 24px;
-  font-size: 16px;
-}

src/stories/components/examples/ExampleStorybookHeader/Header.stories.ts

-import { fn } from '@storybook/test';
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import MyHeader from './Header.vue';
-
-const meta: Meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Examples/Header',
-  component: MyHeader,
-  render: (args: unknown) => ({
-    components: { MyHeader },
-    setup() {
-      return { args };
-    },
-    template: '<my-header :user="args.user" />',
-  }),
-  parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
-  },
-  args: {
-    onLogin: fn(),
-    onLogout: fn(),
-    onCreateAccount: fn(),
-  },
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-} satisfies Meta<typeof MyHeader>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const LoggedIn: Story = {
-  args: {
-    user: {
-      name: 'Jane Doe',
-    },
-  },
-};
-
-export const LoggedOut: Story = {
-  args: {
-    user: null,
-  },
-};