mediacube-ui-v2 0.0.5 → 0.0.7

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

@@ -1,305 +0,0 @@
-<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

@@ -1,88 +0,0 @@
-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

@@ -1,217 +0,0 @@
-<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

@@ -1,54 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-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: {},
-}