feat: component "Popup"

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

- TreeList;

- MenuDial;

- Popup;

- Slider;

- Drawer;

- Modal;

- SelectButton;

- Button;

- ToggleSwitch;

- Divider;

- Divider.

## Components count: 10

## Bundle size: 248.7KB

### Настройка окружения

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

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

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

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

const gentleIcons = [

  Age18Icon,

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

const value = ref();

const active = ref(false);

const popupActive = ref(false);

const popupActive2 = ref(false);

const sliderValue = ref(1);

</script>

<template>

  <div class="hui" style="width: 500px; height: 500px; background-color: gray"></div>

  <Popup v-model:active="popupActive" parentSelector=".hui" theme="sky">

    <Button

      @click="

        () => {

          popupActive = false;

          visible = true;

        }

      "

      label="Открыть модальное окно"

    />

  </Popup>

  <Popup v-model:active="popupActive2" theme="sky"

    >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat

    soluta, vel velit voluptas. Accusamus aut, error et minima neque praesentium, ratione,

    reprehenderit repudiandae saepe ut vero! Lorem ipsum dolor sit amet, consectetur adipisicing

    elit. Amet fugiat harum maiores placeat soluta, vel velit voluptas. Accusamus aut, error et

    minima neque praesentium, ratione, reprehenderit repudiandae saepe ut vero!</Popup

  >

  <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

  headerDivider?: boolean;

}

export interface IPopupProps {

  parentSelector?: string;

  theme?: TThemeColor;

  maxWidth?: string;

  maxHeight?: string;

  padding?: string;

}

export interface ISBProps {

  options: ISBOption[];

  size?: TSize;

.button {

  position: relative;

  border-radius: 7px;

  display: flex;

  display: inline-flex;

  gap: 8px;

  justify-content: center;

  align-items: center;

import type { Meta, StoryObj } from '@storybook/vue3';

import Popup from './Popup.vue';

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

const meta: Meta = {

  title: 'Components/Popup',

  component: Popup,

  tags: ['autodocs'],

  parameters: {

    docs: {

      description: {

        component: 'A component that is used as a Popup. Can be used with icon.',

      },

    },

  },

  argTypes: {

    default: { control: 'text' },

    parentSelector: { control: 'text' },

    maxWidth: { control: 'text' },

    maxHeight: { control: 'text' },

    padding: { control: 'text' },

    theme: {

      control: 'select',

      options: [

        'white',

        'slate',

        'blue',

        'sky',

        'teal',

        'green',

        'yellow',

        'orange',

        'pink',

        'fuchsia',

        'purple',

        'indigo',

        'rose',

        'red',

        'black',

      ],

    },

  },

  args: {},

} satisfies Meta<typeof Popup>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Primary: Story = {

  args: {

    default:

      'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat\n    soluta, vel velit voluptas. Accusamus aut, error et minima neque praesentium, ratione,\n    reprehenderit repudiandae saepe ut vero! Lorem ipsum dolor sit amet, consectetur adipisicing\n    elit. Amet fugiat harum maiores placeat soluta, vel velit voluptas. Accusamus aut, error et\n    minima neque praesentium, ratione, reprehenderit repudiandae saepe ut vero!',

    maxWidth: '200px',

    maxHeight: '100px',

  },

};

export const Full: Story = {

  render: (args) => ({

    components: { Popup, Button },

    setup() {

      return { args };

    },

    template:

      '<Popup v-bind="args"><Button label="Создать" theme="sky" /><p style="display: inline-block; padding: 0 30px"></p><Button label="Удалить" theme="red" /></Popup>',

  }),

  args: {

    theme: 'black',

  },

};