mediacube-ui-v2 0.0.3 → 0.0.4

package/src/components/templates/McDrawer/McDrawerContentTemplate/McDrawerContentTemplate.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { TitleVariations } from '@/enums/Title'
+import { Weights } from '@/enums/ui/Weights'
+import McTitle from '@/components/elements/McTitle/McTitle.vue'
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  /**
+   * Заголовок
+   */
+  title: {
+    type: String as PropType<string>,
+    default: ''
+  },
+  titleEllipsis: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <div class="mc-drawer-content-template">
+    <div v-if="$slots.title || props.title" class="mc-drawer-content-template__header">
+      <!-- @slot Слот заголовка -->
+      <slot name="title">
+        <mc-title :variation="TitleVariations.Subtitle" :ellipsis="props.titleEllipsis" :weight="Weights.SemiBold">
+          {{ props.title }}
+        </mc-title>
+      </slot>
+    </div>
+    <div class="mc-drawer-content-template__body">
+      <div class="mc-drawer-content-template__tint"></div>
+      <div class="mc-drawer-content-template__body-inner">
+        <!-- @slot Слот контента -->
+        <slot />
+      </div>
+    </div>
+    <div v-if="$slots.footer" class="mc-drawer-content-template__footer">
+      <!-- @slot Слот футера -->
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use '../../../../assets/styles/mixins' as *;
+@use '../../../../assets/tokens/spacings' as *;
+@use '../../../../assets/tokens/sizes' as *;
+@use '../../../../assets/tokens/colors' as *;
+@use '../../../../assets/tokens/font-families' as *;
+.mc-drawer-content-template {
+  font-family: $font-family-main;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  &__header {
+    padding: 18px $space-600 18px $space-200;
+    border-bottom: 1px solid $color-hover-gray;
+  }
+
+  &__body {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    height: 100%;
+    &-inner {
+      max-height: 100%;
+      height: 100%;
+      overflow-y: auto;
+      padding: $space-400 $space-200;
+      box-sizing: border-box;
+    }
+  }
+  &__footer {
+    border-top: 1px solid $color-hover-gray;
+    padding: $space-200 $space-200;
+  }
+
+  &__tint {
+    @include position(absolute, 0 5px null 0);
+    height: $size-400;
+    background: linear-gradient(180deg, $color-white 0%, rgba(255, 255, 255, 0) 100%);
+  }
+}
+</style>

package/src/components/templates/McModal/McModal.stories.ts

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import McModal from './McModal.vue'
+import McButton from '@/components/elements/McButton/McButton.vue'
+import McTitle from '@/components/elements/McTitle/McTitle.vue'
+import { HorizontalAlignment } from '@/enums'
+import { ModalVariation } from '@/enums/Modal'
+
+const meta = {
+  title: 'McModal',
+  component: McModal,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: { control: 'none' },
+    name: { control: 'text' },
+    maxWidth: { control: 'number' },
+    duration: { control: 'number' },
+    clickBackdropToClose: { control: 'boolean' },
+    arrowVisible: { control: 'boolean' },
+    scrollableContent: { control: 'boolean' },
+    separators: { control: 'boolean' },
+    topPadding: { control: 'boolean' },
+    headerAlign: { control: 'select', options: Object.values(HorizontalAlignment) },
+    variation: { control: 'select', options: Object.values(ModalVariation) }
+  },
+  args: {
+    name: 'McModal',
+    maxWidth: 510,
+    duration: 300,
+    clickBackdropToClose: true,
+    arrowVisible: true,
+    scrollableContent: true,
+    separators: true,
+    topPadding: true,
+    headerAlign: HorizontalAlignment.Center,
+    variation: ModalVariation.Default
+  },
+  parameters: {
+    componentSubtitle: 'Status: Ready',
+    design: {
+      type: 'figma',
+      url: ''
+    }
+  }
+} satisfies Meta<typeof McModal>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render() {
+    return {
+      data() {
+        return {
+          showModal: false
+        }
+      },
+      components: { McButton, McModal, McTitle },
+      methods: {
+        openModal() {
+          this.showModal = !this.showModal
+        },
+        handleClose() {
+          this.showModal = false
+        }
+      },
+      template: `
+                <div style="height: 500px">
+                  <mc-button @click.prevent="openModal">Show Modal</mc-button>
+                  <mc-modal v-model="showModal" @close="handleClose">
+                    <template #title>McModal</template>
+                    <mc-title v-for="num in 1" :key="num" class="mt-300">
+                      Этот пример демонстрирует как использовать 1 модаль.
+                      <br />
+                      <br />
+                      Если нужно использование несколько модальных окон или не вставлять модальные окна на каждой стнанице:
+                      <ol>
+                        <li>Необходимо создать компонент, рутовым узлом которого будет mc-modal</li>
+                        <li>при использовании ДС, зарегистрировать все компоненты в modalComponents (<code>app.use(MediacubeUI, { modalComponents: {...} })</code>)</li>
+                        <li>открывать модаль в любом месте вашего проекта используя метод showModal из useModal</li>
+                      </ol>
+                    </mc-title>
+
+                    <template #footer>
+                      <mc-button @click.prevent="handleClose">Close</mc-button>
+                    </template>
+                  </mc-modal>
+                </div>
+            
+            `
+    }
+  }
+}