mediacube-ui-v2 0.0.3 → 0.0.4

package/src/components/patterns/McWrapScroll/McWrapScroll.vue

@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import McGridRow from '../../patterns/McGridRow/McGridRow.vue'
+import { computed, onBeforeUnmount, onMounted, type PropType, reactive, ref } from 'vue'
+import { Spaces, type SpaceTypes } from '@/types/styles/Spaces'
+import type { SpacesUnion } from '@/types/styles/Spaces'
+import type { ColumnJustifyAlignmentUnion } from '@/types/styles/Grid'
+import { ColumnAlignment, ColumnJustifyAlignment } from '@/enums/Grid'
+
+const emit = defineEmits(['content-scrolled'])
+const props = defineProps({
+  wrap: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  gutterY: {
+    type: Number as PropType<number>,
+    default: 0
+  },
+  gutterX: {
+    type: Number as PropType<number>,
+    default: 0
+  },
+  justify: {
+    type: String as () => ColumnJustifyAlignmentUnion,
+    default: ColumnJustifyAlignment.Left
+  },
+  scrollable: {
+    type: Boolean as PropType<boolean>,
+    default: true
+  },
+  gutterBottom: {
+    type: String as () => SpaceTypes,
+    default: null
+  },
+  hasScroll: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  withBlur: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  moreSpace: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  rtl: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  scrollSpeed: {
+    type: Number as PropType<number>,
+    default: 1
+  },
+  tagName: {
+    type: String as PropType<string>,
+    default: 'div'
+  }
+})
+
+const drag_options = reactive({
+  scroll_pos: 0,
+  start_client_pos: 0,
+  distance: 0,
+  is_drag: false,
+  mouse_is_down: false
+})
+
+const show_left_blur = ref<boolean>(false)
+const show_right_blur = ref<boolean>(false)
+const observer = ref<MutationObserver | null>(null)
+const scrollContainer = ref<HTMLElement | null>(null)
+
+const containerProps = computed((): { [key: string]: string | number | boolean } => {
+  return {
+    wrap: props.wrap,
+    align: ColumnAlignment.Top,
+    gutterY: props.gutterY,
+    gutterX: props.gutterX,
+    justify: props.justify
+  }
+})
+
+const containerClasses = computed((): { [key: string]: boolean } => {
+  return {
+    'mc-wrap-scroll': true,
+    'mc-wrap-scroll--scrollable': props.scrollable,
+    'mc-wrap-scroll--no-scrollbar': !props.hasScroll,
+    'mc-wrap-scroll--more-space': props.moreSpace
+  }
+})
+
+const containerStyles = computed((): { [key: string]: SpacesUnion } => {
+  return {
+    '--mc-wrap-scroll-bottom': Spaces[props.gutterBottom]
+  }
+})
+
+const wrapperClasses = computed(() => {
+  return {
+    [`mc-wrap-scroll__wrapper--left-blur`]: props.withBlur && show_left_blur.value,
+    [`mc-wrap-scroll__wrapper--right-blur`]: props.withBlur && show_right_blur.value,
+    [`mc-wrap-scroll__wrapper--more-space`]: props.moreSpace
+  }
+})
+
+onMounted(() => {
+  window.addEventListener('mousemove', onMouseMove)
+  window.addEventListener('mouseup', onMouseUp)
+  init()
+  setTimeout(() => handlerScroll(), 10)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('mousemove', onMouseMove)
+  window.removeEventListener('mouseup', onMouseUp)
+  scrollContainer.value && scrollContainer.value.removeEventListener('scroll', handlerScroll)
+  observer.value && observer.value.disconnect()
+})
+
+const init = () => {
+  if (scrollContainer.value) {
+    scrollContainer.value.addEventListener('scroll', handlerScroll)
+    if (props.withBlur) createMutationObserver()
+  }
+}
+const handlerScroll = () => {
+  emit('content-scrolled')
+  if (!props.withBlur) return
+  if (scrollContainer.value) {
+    try {
+      const container_width = Math.ceil(scrollContainer.value.getBoundingClientRect()?.width)
+      const scroll_width = Math.ceil(scrollContainer.value.scrollWidth)
+      const scroll_left = Math.ceil(scrollContainer.value.scrollLeft)
+      // Левый блюр
+      show_left_blur.value = props.rtl
+        ? scroll_width > container_width && scroll_width - 10 > Math.abs(scroll_left) + container_width
+        : !!scroll_left
+      // Правый блюр
+      show_right_blur.value = props.rtl
+        ? Math.abs(scroll_left) > 1
+        : scroll_width > container_width && scroll_width > Math.abs(scroll_left) + container_width
+    } catch (e) {
+      show_left_blur.value = false
+      show_right_blur.value = false
+    }
+  }
+}
+
+const createMutationObserver = () => {
+  if (scrollContainer.value) {
+    try {
+      observer.value = new MutationObserver(handlerScroll)
+
+      const config = {
+        attributes: true,
+        childList: true,
+        subtree: true
+      }
+      observer.value.observe(scrollContainer.value, config)
+    } catch (e) {
+      console.error('Error when try to create observer in McWrapScroll')
+    }
+  } else console.error('Error when try to create observer in McWrapScroll')
+}
+
+const onMouseDown = (e: MouseEvent) => {
+  if (scrollContainer.value) {
+    const dragOptions = drag_options
+    dragOptions.start_client_pos = e.clientX
+    dragOptions.mouse_is_down = true
+    dragOptions.scroll_pos = scrollContainer.value.scrollLeft
+    // // Удалить все выделения на странице, иначе скролл "лагает" если где то на странице есть выделение
+    if (window.getSelection) {
+      let sel = window.getSelection()
+      sel?.removeAllRanges()
+    }
+  }
+}
+
+const onMouseMove = (e: MouseEvent) => {
+  if (scrollContainer.value) {
+    const dragOptions = drag_options
+    if (!dragOptions.mouse_is_down) return
+    dragOptions.distance = e.clientX - dragOptions.start_client_pos
+    if (Math.abs(dragOptions.distance) > 2 && !dragOptions.is_drag) {
+      dragOptions.is_drag = true
+    }
+    if (dragOptions.is_drag) {
+      scrollContainer.value.scrollTo({
+        left: dragOptions.scroll_pos - dragOptions.distance * props.scrollSpeed
+      })
+    }
+    // Math.abs(dragOptions.scroll_pos) && (dragOptions.scroll_pos = 0)
+  }
+}
+
+const onMouseUp = () => {
+  drag_options.is_drag && (drag_options.is_drag = false)
+  drag_options.mouse_is_down = false
+}
+</script>
+
+<template>
+  <component :is="props.tagName" :class="wrapperClasses" class="mc-wrap-scroll__wrapper">
+    <div ref="scrollContainer" :class="containerClasses" :style="containerStyles" @mousedown="onMouseDown">
+      <mc-grid-row
+        v-bind="containerProps"
+        :style="{ 'pointer-events': drag_options.is_drag ? 'none' : 'auto' }"
+        class="mc-wrap-scroll__row"
+      >
+        <slot />
+      </mc-grid-row>
+    </div>
+  </component>
+</template>
+
+<style lang="scss">
+@use '../../../assets/styles/mixins' as *;
+@use '../../../assets/tokens/spacings' as *;
+@use '../../../assets/tokens/colors' as *;
+@use '../../../assets/tokens/font-families' as *;
+.mc-wrap-scroll {
+  $block-name: &;
+  $more-space-indent: $space-200;
+  --mc-wrap-scroll-bottom: #{$space-zero};
+  padding-bottom: var(--mc-wrap-scroll-bottom);
+  margin-bottom: -(var(--mc-wrap-scroll-bottom));
+  font-family: $font-family-main;
+  &.mc-wrap-scroll--scrollable {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  &--more-space {
+    padding: $more-space-indent;
+    margin: -(#{$more-space-indent});
+  }
+  &.mc-wrap-scroll--no-scrollbar {
+    @include hide-scrollbar();
+  }
+  &__wrapper {
+    position: relative;
+    overflow-x: hidden;
+    @mixin blur-common-styles {
+      @include pseudo();
+      top: 0;
+      bottom: 0;
+      width: $space-500;
+      z-index: 2;
+      pointer-events: none;
+      user-select: none;
+    }
+    @mixin right-blur {
+      background: linear-gradient(to left, #{$color-bg-gray}, rgba($color-bg-gray, 0));
+    }
+    @mixin left-blur {
+      background: linear-gradient(to right, #{$color-bg-gray}, rgba($color-bg-gray, 0));
+    }
+    &--more-space {
+      padding: $more-space-indent;
+      margin: -(#{$more-space-indent});
+      &#{$block-name}__wrapper {
+        &--left-blur {
+          #{$block-name} {
+            padding-inline-start: 0;
+            margin-inline-start: 0;
+          }
+          &::before {
+            top: $more-space-indent;
+            bottom: $more-space-indent;
+            inset-inline-start: $more-space-indent;
+            @include left-blur;
+          }
+        }
+        &--right-blur {
+          #{$block-name} {
+            padding-right: 0;
+            margin-right: 0;
+          }
+          &::after {
+            top: $more-space-indent;
+            bottom: $more-space-indent;
+            inset-inline-end: $more-space-indent;
+            @include right-blur;
+          }
+        }
+      }
+    }
+    &--left-blur {
+      &::before {
+        @include blur-common-styles;
+        @include left-blur;
+        inset-inline-start: 0;
+      }
+    }
+    &--right-blur {
+      &::after {
+        @include blur-common-styles;
+        @include right-blur;
+        inset-inline-end: 0;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import McDrawer from './McDrawer.vue'
+import McDrawerContentTemplate from '@/components/templates/McDrawer/McDrawerContentTemplate/McDrawerContentTemplate.vue'
+import McButton from '@/components/elements/McButton/McButton.vue'
+import McTitle from '@/components/elements/McTitle/McTitle.vue'
+import { DrawerPositions } from '@/enums/Drawer'
+import iconsList from '@/mocks/icons.json'
+
+const iconsArrayList = Object.keys(iconsList)
+
+const meta = {
+  title: 'McDrawer',
+  component: McDrawer,
+  tags: ['autodocs'],
+  argTypes: {
+    position: { control: 'select', options: Object.values(DrawerPositions) },
+    modelValue: { control: 'none' },
+    duration: { control: 'number' },
+    width: { control: 'number' },
+    closeVisible: { control: 'boolean' },
+    showOverlay: { control: 'boolean' },
+    iconClose: { control: 'select', options: iconsArrayList },
+  },
+  args: {
+    position: DrawerPositions.Right,
+    duration: 300,
+    width: 300,
+    closeVisible: true,
+    showOverlay: true,
+    iconClose: 'close',
+  },
+  parameters: {
+    componentSubtitle: 'Status: Ready',
+    design: {
+      type: 'figma',
+      url: ''
+    }
+  }
+} satisfies Meta<typeof McDrawer>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render() {
+    return {
+      data() {
+        return {
+          showDrawer: false
+        }
+      },
+      components: { McButton, McDrawer, McTitle, McDrawerContentTemplate },
+      methods: {
+        openDrawer() {
+          this.showDrawer = !this.showDrawer
+        },
+        handleClose() {
+          this.showDrawer = false
+        },
+      },
+      template: `
+                <div style="height: 500px">
+                  <mc-button @click.prevent="openDrawer">Show Drawer</mc-button>
+                  <mc-drawer v-model="showDrawer">
+                    <mc-drawer-content-template title="McDrawer">
+                      <mc-title v-for="num in 5" :key="num" class="mt-300">
+                        Этот пример демонстрирует как использовать 1 дровер.
+                        <br />
+                        <br />
+                        Если нужно использование несколько дроверов без их явной вставки на странице/в компоненте:
+                        <ol>
+                          <li>Необходимо создать компонент, рутовым узлом которого будет mc-drawer-content-template (опционально, для типовой разметки)</li>
+                          <li>при использовании ДС, передать все компоненты в drawerComponents (<code>app.use(MediacubeUI, { drawerComponents: {...} })</code>)</li>
+                          <li>открывать дроверы в любом месте вашего проекта используя метод showDrawer из useDrawer</li>
+                        </ol>
+                      </mc-title>
+
+                      <template #footer>
+                        <mc-button @click.prevent="handleClose">Close</mc-button>
+                      </template>
+                    </mc-drawer-content-template>
+                  </mc-drawer>
+                </div>
+            
+            `
+    }
+  }
+}

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

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import { TransitionPresets, useTransition } from '@vueuse/core'
+import { computed, type PropType, ref, watch } from 'vue'
+import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
+import type { IconsListUnion } from '@/types/styles/Icons'
+import type { DrawerPositionsUnion } from '@/types/IDrawer'
+import { DrawerPositions } from '@/enums/Drawer'
+
+const emit = defineEmits<{
+  (e: 'toggle', value: boolean): void
+  (e: 'open'): void
+  (e: 'close'): void
+  (e: 'update:modelValue', value: boolean): void
+}>()
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  duration: {
+    type: Number as PropType<number>,
+    default: 300
+  },
+  position: {
+    type: String as () => DrawerPositionsUnion,
+    default: DrawerPositions.Right
+  },
+  /**
+   * Нужна ли кнопка
+   * закрытия в шапке
+   */
+  closeVisible: {
+    type: Boolean as PropType<boolean>,
+    default: true
+  },
+  showOverlay: {
+    type: Boolean as PropType<boolean>,
+    default: true
+  },
+  /**
+   * Тип иконки
+   * закрытия в шапке
+   */
+  iconClose: {
+    type: String as () => IconsListUnion,
+    default: 'close'
+  },
+  width: {
+    type: Number as PropType<number>,
+    default: 300
+  }
+})
+
+const overlayStartAnimationPosition = ref<number>(0)
+const overlayEndAnimationPosition = ref<number>(100)
+const isRightDrawerPosition = computed((): boolean => {
+  return props.position === DrawerPositions.Right
+})
+const drawerStartAnimationPosition = computed((): number => {
+  return isRightDrawerPosition.value ? 100 : -100
+})
+const drawerStartStaticPosition = computed((): { [key: string]: number } => {
+  return {
+    [isRightDrawerPosition.value ? DrawerPositions.Right : DrawerPositions.Left]: 0
+  }
+})
+
+const overlayStateNumber = ref<number>(overlayStartAnimationPosition.value)
+const drawerStateNumber = ref<number>(drawerStartAnimationPosition.value)
+
+const drawerNumber = useTransition(drawerStateNumber, {
+  duration: props.duration,
+  transition: TransitionPresets.easeOutQuart
+})
+
+const drawerOverlayNumber = useTransition(overlayStateNumber, {
+  duration: props.duration,
+  transition: TransitionPresets.easeOutQuart
+})
+
+const overlayStyle = computed((): { [key: string]: number | string } => {
+  return {
+    visibility: drawerOverlayNumber.value ? 'visible' : 'hidden',
+    zIndex: drawerOverlayNumber.value ? 1 : -1
+  }
+})
+
+const drawerStyle = computed((): { [key: string]: number | string } => {
+  return {
+    transform: `translateX(${drawerNumber.value}%)`,
+    width: `${props.width}px`,
+    [props.position]: 0,
+    ...drawerStartStaticPosition.value
+  }
+})
+
+const overlayClasses = computed((): { [key: string]: boolean } => {
+  return {
+    'mc-drawer__overlay': true,
+    'mc-drawer__overlay--hidden': !props.showOverlay
+  }
+})
+
+const openDrawer = () => {
+  overlayStateNumber.value = overlayEndAnimationPosition.value
+  drawerStateNumber.value = overlayStateNumber.value === 0 ? 100 : 0
+  if (!props.modelValue) {
+    emit('update:modelValue', true)
+    emit('open')
+  }
+}
+const closeDrawer = () => {
+  overlayStateNumber.value = overlayStartAnimationPosition.value
+  drawerStateNumber.value = overlayStateNumber.value === 0 ? (isRightDrawerPosition.value ? 100 : -100) : 0
+  if (props.modelValue) {
+    emit('update:modelValue', false)
+    emit('close')
+  }
+}
+
+const handleOverlayClick = () => {
+  if (!props.showOverlay) return
+  closeDrawer()
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    value ? openDrawer() : closeDrawer()
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <div class="mc-drawer__wrapper" :style="overlayStyle">
+    <div :class="overlayClasses" :style="overlayStyle" @click.stop="handleOverlayClick" />
+    <div class="mc-drawer" :style="drawerStyle" @click.stop>
+      <slot />
+      <button v-if="closeVisible" type="button" class="mc-drawer__btn-close" @click.prevent="closeDrawer">
+        <mc-svg-icon class="mc-drawer__icon-close" :name="iconClose" />
+        <mc-svg-icon class="mc-drawer__icon-close--small" :name="iconClose" size="200" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use '../../../assets/tokens/box-shadows' as *;
+@use '../../../assets/tokens/spacings' as *;
+@use '../../../assets/tokens/sizes' as *;
+@use '../../../assets/tokens/colors' as *;
+@use '../../../assets/tokens/media-queries' as *;
+@use '../../../assets/styles/mixins' as *;
+.mc-drawer {
+  $block-name: &;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: white;
+  height: 100%;
+  box-shadow: $shadow-s;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 2;
+  &__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.15);
+    display: flex;
+    justify-content: flex-start;
+    &--hidden {
+      background: transparent;
+    }
+  }
+  &__wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    overflow: hidden;
+  }
+  &__btn-close {
+    z-index: 1;
+    padding: $space-100 !important;
+    & {
+      @include close-link();
+    }
+    & {
+      @include position(absolute, $space-100 $space-100 null null);
+    }
+    & {
+      @include reset-btn();
+    }
+  }
+  &__icon-close {
+    @include size($size-300);
+    &--small {
+      display: none;
+    }
+  }
+  @media #{$media-query-m-down} {
+    #{$block-name}__icon-close {
+      display: none;
+      &--small {
+        display: block;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed, type PropType } from 'vue'
+import McDrawer from '@/components/templates/McDrawer/McDrawer.vue'
+import type { IDrawerServiceState, IDrawerState } from '@/types/IDrawer'
+
+const props = defineProps({
+  drawerServiceState: {
+    type: Object as PropType<IDrawerServiceState>,
+    default: () => ({})
+  },
+  reactiveProps: {
+    type: Object as () => { drawers: IDrawerState[] },
+    default: () => ({})
+  }
+})
+
+const containerStyle = computed((): { [key: string]: string | number } => ({
+  zIndex: props.reactiveProps.drawers.length ? 99 : -1,
+  visibility: props.reactiveProps.drawers.length ? 'visible' : 'hidden'
+}))
+const closeDrawer = (value: IDrawerState) => {
+  value.close()
+  setTimeout(() => {
+    if (props.reactiveProps.drawers.every((d) => !d.modelValue)) {
+      props.drawerServiceState.closeServiceState()
+    }
+  }, value?.drawerProps?.duration || 300)
+}
+</script>
+
+<template>
+  <div class="mc-drawer-container" :style="containerStyle">
+    <mc-drawer
+      v-for="(drawer, i) in props.reactiveProps.drawers"
+      :key="drawer.id"
+      v-model="drawer.modelValue"
+      v-bind="drawer.drawerProps"
+      :show-overlay="i + 1 === props.reactiveProps.drawers.length"
+      @close="() => closeDrawer(drawer)"
+    >
+      <component :is="drawer.component" v-bind="drawer.componentProps" @close-drawer="() => closeDrawer(drawer)" />
+    </mc-drawer>
+  </div>
+</template>
+
+<style>
+.mc-drawer-container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+}
+</style>

package/src/components/templates/McDrawer/McDrawerContentTemplate/McDrawerContentTemplate.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import McDrawerContentTemplate from '@/components/templates/McDrawer/McDrawerContentTemplate/McDrawerContentTemplate.vue'
+
+const meta = {
+  title: 'McDrawerContentTemplate',
+  component: McDrawerContentTemplate,
+  tags: ['autodocs'],
+  argTypes: {
+    titleEllipsis: { control: 'boolean' },
+  },
+  args: {
+    titleEllipsis: true,
+    title: 'Title - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquam, architecto consequatur consequuntur, ' +
+      'dolor est exercitationem harum ipsa mollitia nihil nostrum possimus quod quos rem, soluta. Ab cupiditate magni quibusdam!',
+    default: 'Content - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquam, architecto consequatur consequuntur, ' +
+      'dolor est exercitationem harum ipsa mollitia nihil nostrum possimus quod quos rem, soluta. Ab cupiditate magni quibusdam!',
+    footer: 'Footer - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquam, architecto consequatur consequuntur, ' +
+      'dolor est exercitationem harum ipsa mollitia nihil nostrum possimus quod quos rem, soluta. Ab cupiditate magni quibusdam!',
+  },
+  parameters: {
+    componentSubtitle: 'Status: Ready',
+    design: {
+      type: 'figma',
+      url: ''
+    }
+  }
+} satisfies Meta<typeof McDrawerContentTemplate>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}