mediacube-ui-v2 0.0.3 → 0.0.4

package/src/components/patterns/McGridRow/McGridRow.stories.ts

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import McGridRow from './McGridRow.vue'
+import McGridCol from '@/components/patterns/McGridCol/McGridCol.vue'
+
+const meta = {
+    title: 'McGridRow',
+    component: McGridRow,
+    tags: ['autodocs'],
+    argTypes: {},
+    args: {
+        gutterX: 20,
+    },
+    parameters: {
+        componentSubtitle: 'Status: Ready',
+        design: {
+            type: 'figma',
+            url: '',
+        },
+    },
+} satisfies Meta<typeof McGridRow>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render() {
+    return {
+      components: { McGridRow, McGridCol },
+      template: `
+                <mc-grid-row>
+                    <mc-grid-col span="12" span-m="1"><div style="background: #e74c3c">1</div></mc-grid-col>
+                    <mc-grid-col span="12" span-m="2"><div style="background: #1abc9c">2</div></mc-grid-col>
+                    <mc-grid-col span="12" span-m="3"><div style="background: #9b59b6">3</div></mc-grid-col>
+                    <mc-grid-col span="12" span-m="6"><div style="background: #f1c40f">6</div></mc-grid-col>
+                </mc-grid-row>
+            `
+    }
+  }
+}
+export const NestedGrid: Story = {
+    render() {
+        return {
+            components: { McGridRow, McGridCol },
+            template: `
+                <mc-grid-row :gutter-x="30" :gutter-y="10">
+                    <mc-grid-col span="12" span-m="1"><div style="background: #e74c3c">1</div></mc-grid-col>
+                    <mc-grid-col span="12" span-m="2"><div style="background: #1abc9c">2</div></mc-grid-col>
+                    <mc-grid-col span="12" span-m="3"><div style="background: #9b59b6">3</div></mc-grid-col>
+                    <mc-grid-col span="12" span-m="6">
+                        <mc-grid-row :gutter-x="5">
+                            <mc-grid-col span="3"><div style="background: violet; color: white;">3</div></mc-grid-col>
+                            <mc-grid-col span="3"><div style="background: blue; color: white;">3</div></mc-grid-col>
+                            <mc-grid-col span="6"><div style="background: blueviolet; color: white;">6</div></mc-grid-col>
+                        </mc-grid-row>
+                    </mc-grid-col>
+                </mc-grid-row>
+            `
+        }
+    },
+};
+
+export const AutoSize: Story = {
+    render() {
+        return {
+            components: { McGridRow, McGridCol },
+            template: `
+                <mc-grid-row :gutter-x="30" :gutter-y="10" justify="center" align="middle">
+                    <mc-grid-col><div style="background: #e74c3c">Auto Size</div></mc-grid-col>
+                    <mc-grid-col><div style="background: #f1c40f">Auto Size middle</div></mc-grid-col>
+                    <mc-grid-col><div style="background: cornflowerblue">Auto Size large content</div></mc-grid-col>
+                </mc-grid-row>
+            `
+        }
+    },
+};

package/src/components/patterns/McGridRow/McGridRow.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import type { IGridGutters } from '@/types/IGrid'
+import { ColumnAlignment, ColumnJustifyAlignment } from '@/enums/Grid'
+import type { ColumnAlignmentUnion, ColumnJustifyAlignmentUnion } from '@/types/styles/Grid'
+
+const props = defineProps({
+  /**
+   *  Расстояние между колонками по горизонтали
+   */
+  gutterX: {
+    type: Number,
+    default: 0
+  },
+
+  /**
+   *  Расстояние между колонками по вертикали
+   */
+  gutterY: {
+    type: Number,
+    default: 0
+  },
+
+  /**
+   *  Выравнивание по горизонтали
+   */
+  justify: {
+    type: String as () => ColumnJustifyAlignmentUnion,
+    default: ColumnJustifyAlignment.Left
+  },
+
+  /**
+   *  Выравнивание по вертикали
+   */
+  align: {
+    type: String as () => ColumnAlignmentUnion,
+    default: ColumnAlignment.Top
+  },
+
+  /**
+   *  Автоматически тянущиеся колонки
+   */
+  stretch: {
+    type: Boolean,
+    default: false
+  },
+
+  /**
+   *  Перенос колонок
+   */
+  wrap: {
+    type: Boolean,
+    default: true
+  }
+})
+
+provide('provideData', { gutterX: props.gutterX, gutterY: props.gutterY } as IGridGutters)
+
+const classes = computed((): { [key: string]: boolean } => {
+  return {
+    [`mc-grid-row--justify-${props.justify}`]: !!props.justify,
+    [`mc-grid-row--align-${props.align}`]: !!props.align,
+    ['mc-grid-row--stretch']: !!props.stretch
+  }
+})
+
+const styles = computed((): { [key: string]: string | number } => {
+  let result = {} as { [key: string]: string | number }
+
+  if (props.gutterX !== 0) {
+    result['margin-left'] = `${-props.gutterX / 2}px`
+    result['margin-right'] = `${-props.gutterX / 2}px`
+  }
+
+  if (props.gutterY !== 0) {
+    result['margin-top'] = `${-props.gutterY / 2}px`
+    result['margin-bottom'] = `${-props.gutterY / 2}px`
+  }
+
+  if (props.wrap) {
+    result['flex-wrap'] = 'wrap'
+  }
+  let justify
+  switch (props.justify) {
+    case 'left':
+      justify = 'flex-start'
+      break
+    case 'right':
+      justify = 'flex-end'
+      break
+    case 'center':
+      justify = 'center'
+      break
+    case 'around':
+      justify = 'space-around'
+      break
+    case 'between':
+      justify = 'space-between'
+      break
+  }
+  let align
+  switch (props.align) {
+    case 'top':
+      align = 'flex-start'
+      break
+    case 'middle':
+      align = 'center'
+      break
+    case 'bottom':
+      align = 'flex-end'
+      break
+    case 'stretch':
+      align = 'stretch'
+      break
+  }
+  if (align) result['--mc-grid-row-align'] = align
+  if (justify) result['--mc-grid-row-justify'] = justify
+
+  return result
+})
+</script>
+
+<template>
+  <div class="mc-grid-row" :class="classes" :style="styles">
+    <!-- @slot Слот для дочерних mc-grid-col -->
+    <slot />
+  </div>
+</template>
+
+<style lang="scss">
+.mc-grid-row {
+  $block-name: &;
+  display: flex;
+  flex-direction: row;
+  justify-content: var(--mc-grid-row-justify);
+  align-items: var(--mc-grid-row-align);
+  &--stretch {
+    > .mc-grid-col {
+      flex: 1;
+    }
+  }
+}
+</style>

package/src/components/patterns/McOverlay/McOverlay.stories.ts

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import McOverlay from './McOverlay.vue'
+import { Colors, Sizes } from '@/types'
+
+const meta = {
+    title: 'McOverlay',
+    component: McOverlay,
+    tags: ['autodocs'],
+    argTypes: {
+        size: { control: 'select', options: Object.keys(Sizes) },
+        backgroundColor: { control: 'select', options: Object.keys(Colors) }
+    },
+    args: {
+        size: '500',
+        backgroundColor: 'white'
+    },
+    parameters: {
+        componentSubtitle: 'Status: Ready',
+        design: {
+            type: 'figma',
+            url: '',
+        },
+    },
+} satisfies Meta<typeof McOverlay>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render() {
+        return {
+            components: { McOverlay },
+            template: `
+                <div>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas semper nisi at finibus. Nunc dictum laoreet justo, vel efficitur mi pretium et. Donec a lacus neque. Curabitur sapien augue, sagittis in ligula suscipit, placerat ultricies urna. Proin rhoncus nisl ac libero ullamcorper rutrum. Maecenas enim nunc, molestie ac odio sed, fermentum iaculis mi. Phasellus dui nibh, interdum nec viverra in, fringilla quis orci. Curabitur eu turpis vitae justo congue ullamcorper vulputate sit amet nibh. Cras lorem neque, ullamcorper non faucibus a, accumsan nec sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis aliquet sapien pulvinar pretium consequat. Ut sollicitudin blandit mi, vel vulputate nunc consectetur at. Vestibulum at augue non sem consectetur lacinia. Etiam quis sem sollicitudin, fermentum felis sed, suscipit elit. Suspendisse lacus diam, hendrerit a eros a, hendrerit hendrerit diam.
+                    Maecenas at libero vel ligula cursus lobortis sed in sem. Nunc facilisis tempus malesuada. In eu elit nisl. Fusce cursus accumsan aliquam. Morbi ullamcorper vel libero vel feugiat. Mauris lectus risus, porta eu massa et, congue mollis libero. Mauris egestas lacinia nibh, ac lacinia lectus ultricies eget.
+                    Proin auctor ornare nunc, quis sagittis ante faucibus sed. Praesent elementum tortor sit amet leo hendrerit tempus. Nulla congue orci est, sed consectetur tellus aliquam ut. Cras consectetur arcu pellentesque eros aliquet, nec sagittis nibh iaculis. Aenean non sapien convallis, tristique nunc a, porta odio. Suspendisse interdum ligula id sem scelerisque, a lacinia orci placerat. Cras tortor libero, dapibus quis orci et, euismod imperdiet nunc. Sed in imperdiet turpis. Mauris hendrerit aliquet arcu, ut ultrices nibh maximus sit amet. Fusce purus odio, malesuada nec congue vitae, tincidunt sed sapien. Aenean at laoreet sem. Integer ut nulla eleifend quam fringilla efficitur. Ut aliquet rhoncus nisl.
+                    Sed pretium nisl quis dapibus varius. Curabitur ac hendrerit magna. Quisque egestas gravida consectetur. Suspendisse et euismod eros. Sed eget enim lectus. Pellentesque scelerisque nulla non mi venenatis, at pulvinar est dapibus. Suspendisse sodales, dolor at commodo iaculis, est lectus blandit ante, sed rutrum augue nibh nec nunc. Nulla in euismod eros. Sed vitae turpis sollicitudin, sagittis odio non, ultrices mi. Proin et aliquet augue, eget porta sem. Integer id vulputate nisi. In lobortis pretium nisi non tristique. Donec ipsum dolor, dictum eget purus ut, mattis volutpat massa. In hac habitasse platea dictumst. Aenean dictum blandit arcu, vel vestibulum libero dignissim non.
+                    Pellentesque feugiat sem lectus, sodales laoreet sem semper quis. Maecenas iaculis felis vel ipsum facilisis laoreet. Maecenas fermentum est sed tortor finibus, quis vestibulum quam auctor. Suspendisse potenti. In tincidunt felis erat, ac euismod augue tristique non. Etiam tincidunt est purus, a molestie dui sagittis eget. Nulla lacinia nulla metus, vel luctus metus pulvinar vitae. Phasellus tristique leo augue, eu luctus est tempus ac. Curabitur eget nulla quis enim accumsan bibendum. Nam tristique congue sollicitudin. Fusce viverra est orci, eu cursus libero semper a. Suspendisse sagittis enim tellus, sed lobortis justo cursus in. Maecenas auctor in lacus sed aliquet. In gravida nisl quis blandit tincidunt.
+                </div>
+                <mc-overlay size="500" background-color="white" />
+            `,
+        }
+    }
+};

package/src/components/patterns/McOverlay/McOverlay.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { Colors, type ColorTypes, Sizes, type SizeTypes } from '@/types'
+import { computed } from 'vue'
+
+const props = defineProps({
+  size: {
+    type: String as () => SizeTypes,
+    default: '500'
+  },
+  backgroundColor: {
+    type: String as () => ColorTypes,
+    default: 'white'
+  }
+})
+const styles = computed((): { [key: string]: string } => {
+  return {
+    '--mc-overlay-color': props.backgroundColor && Colors[props.backgroundColor],
+    '--mc-overlay-spinner-size': props.size && Sizes[props.size]
+  }
+})
+</script>
+
+<template>
+  <section ref="overlay" class="mc-overlay" :style="styles">
+    <div class="mc-overlay__background" />
+    <section class="mc-overlay__spinner" />
+  </section>
+</template>
+
+<style lang="scss">
+@use '../../../assets/tokens/z-indexes' as *;
+@use '../../../assets/tokens/colors' as *;
+.mc-overlay {
+  $block-name: &;
+  --mc-overlay-spinner-size: initial;
+  --mc-overlay-color: initial;
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: $z-index-overlay;
+  &__background {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--mc-overlay-color);
+    opacity: 0.85;
+  }
+  &__spinner {
+    display: block;
+    border: 2px solid $color-purple;
+    border-inline-start-color: transparent;
+    border-radius: 50%;
+    animation: rotate 1.5s infinite linear;
+
+    width: var(--mc-overlay-spinner-size);
+    min-width: var(--mc-overlay-spinner-size);
+    height: var(--mc-overlay-spinner-size);
+    min-height: var(--mc-overlay-spinner-size);
+
+    @keyframes rotate {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  }
+}
+</style>

package/src/components/patterns/McPreview/McPreview.stories.ts

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import McPreview from './McPreview.vue'
+import McButton from '@/components/elements/McButton/McButton.vue'
+import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
+
+const meta = {
+    title: 'McPreview',
+    component: McPreview,
+    tags: ['autodocs'],
+    argTypes: {},
+    args: { },
+    parameters: {
+        componentSubtitle: 'Status: Ready',
+        design: {
+            type: 'figma',
+            url: '',
+        },
+    },
+} satisfies Meta<typeof McPreview>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render() {
+        return {
+            components: { McPreview, McButton, McSvgIcon },
+            template: `
+              <mc-preview>
+                  <template #left>
+                      <mc-svg-icon name="fly_dollar" size="500" />
+                  </template>
+                  <template #top>
+                      McPay Early Funds it's fantastic
+                  </template>
+                  <template #bottom>
+                      Just try!
+                  </template>
+                  <template #right>
+                      <mc-button>GO!</mc-button>
+                  </template>
+              </mc-preview>
+            `
+        }
+    },
+};

package/src/components/patterns/McPreview/McPreview.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PreviewSizesUnion } from '@/types/IPreview'
+
+const props = defineProps({
+  /**
+   *  Размеры:
+   *  `s, m, l`
+   */
+  size: {
+    type: String as () => PreviewSizesUnion,
+    default: 'm'
+  }
+})
+const classes = computed((): { [key: string]: boolean } => {
+  return {
+    'mc-preview': true,
+    [`mc-preview--size-${props.size}`]: !!props.size
+  }
+})
+</script>
+
+<template>
+  <section :class="classes">
+    <div v-if="$slots.left" class="mc-preview__left">
+      <!-- @slot Слот слева -->
+      <slot name="left" />
+    </div>
+    <div class="mc-preview__center">
+      <div class="mc-preview__top">
+        <!-- @slot Слот сверху -->
+        <slot name="top" />
+      </div>
+      <div v-if="$slots.bottom" class="mc-preview__bottom">
+        <!-- @slot Слот внизу -->
+        <slot name="bottom" />
+      </div>
+    </div>
+    <div v-if="$slots.right" class="mc-preview__right">
+      <!-- @slot Слот справа -->
+      <slot name="right" />
+    </div>
+  </section>
+</template>
+
+<style lang="scss">
+@use '../../../assets/styles/mixins' as *;
+@use '../../../assets/tokens/spacings' as *;
+.mc-preview {
+  $block-name: &;
+  display: flex;
+  flex-wrap: nowrap;
+  max-width: 100%;
+  &__left {
+    flex: 0 0 auto;
+    &:empty {
+      display: none;
+    }
+  }
+  &__center {
+    @include layout-flex-fix();
+    flex: 1 1 auto;
+    align-self: center;
+  }
+  &__top {
+    &:empty {
+      display: none;
+    }
+  }
+  &__bottom {
+    &:empty {
+      display: none;
+    }
+  }
+  &__right {
+    flex: 0 0 auto;
+    &:empty {
+      display: none;
+    }
+  }
+  @mixin previewIndents($indent, $bottom: '') {
+    #{$block-name}__left {
+      margin-inline-end: $indent;
+    }
+    #{$block-name}__right {
+      margin-inline-start: $indent;
+    }
+    @if $bottom {
+      #{$block-name}__bottom {
+        margin-top: $bottom;
+      }
+    }
+  }
+  &--size {
+    &-s {
+      @include previewIndents($space-50);
+    }
+    &-m {
+      @include previewIndents($space-100);
+    }
+    &-l {
+      @include previewIndents($space-150, $space-50);
+    }
+    &-xl {
+      @include previewIndents($space-200, $space-50);
+    }
+  }
+}
+</style>

package/src/components/patterns/McSideBar/McSideBar.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import McSideBar from './McSideBar.vue'
+import McTitle from '@/components/elements/McTitle/McTitle.vue'
+import { menu, apps } from '@/mocks/sidebar'
+
+const meta = {
+  title: 'McSideBar',
+  component: McSideBar,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+  parameters: {
+    componentSubtitle: 'Status: Ready',
+    design: {
+      type: 'figma',
+      url: ''
+    }
+  }
+} satisfies Meta<typeof McSideBar>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render() {
+    return {
+      data() {
+        return {
+          compact: false
+        }
+      },
+      components: { McSideBar, McTitle },
+      computed: {
+        menu() {
+          return menu
+        },
+        apps() {
+          return apps
+        }
+      },
+      methods: {
+        handleCompact() {
+          console.log('handleCompact')
+        }
+      },
+      template: `
+        <mc-side-bar :compact="compact" :menu-main="menu" :menu-apps="apps" logo-icon="mc_dashboard" hide-text="Collapse me" @compact="handleCompact">
+          <template #bottom-message>
+            <mc-title color="white">bottom-message slot</mc-title>
+          </template>
+        </mc-side-bar>
+            `
+    }
+  }
+}