mediacube-ui-v2 0.0.5 → 0.0.7

package/src/components/patterns/McCollapse/McCollapse.vue

@@ -1,303 +0,0 @@
-<script setup lang="ts">
-import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
-import McSlideUpDown from '@/components/elements/McSlideUpDown/McSlideUpDown.vue'
-import { computed, type PropType, ref, useSlots, watch, inject, onMounted } from 'vue'
-import type { ICollapse, ICollapseEmitPayload } from '@/types/ICollapse'
-import { useRandomNumber } from '@/composables/useRandomNumber'
-
-const randomNumber = useRandomNumber()
-const selfRegisterCollapseMethod: Function = inject('selfRegisterCollapseMethod', () => {})
-const accordionTriggerMethod: Function = inject('accordionTriggerMethod', () => {})
-
-const slots = useSlots()
-const emit = defineEmits<{
-  (e: 'toggle', value: ICollapseEmitPayload): void
-  (e: 'open', value: ICollapseEmitPayload): void
-  (e: 'close', value: ICollapseEmitPayload): void
-  (e: 'collapse-open-start', value: ICollapseEmitPayload): void
-  (e: 'collapse-open-end', value: ICollapseEmitPayload): void
-  (e: 'collapse-close-start', value: ICollapseEmitPayload): void
-  (e: 'collapse-close-end', value: ICollapseEmitPayload): void
-}>()
-const props = defineProps({
-  /*
-   * Если нужно
-   * отключённое состояние
-   */
-  isDisabled: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /*
-   * Если нужен бордер
-   */
-  border: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   *  Иконка состояния коллапса
-   *
-   */
-  icon: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  }
-})
-
-const id = ref<number>(randomNumber.timestamp(5))
-const isCollapsed = ref<boolean>(false)
-const animated = ref<boolean>(false)
-
-const classes = computed((): { [key: string]: boolean } => {
-  return {
-    'mc-collapse--is-open': isCollapsed.value,
-    'mc-collapse--is-disabled': props.isDisabled,
-    'mc-collapse--is-empty': isEmpty.value,
-    'mc-collapse--has-icon': props.icon,
-    'mc-collapse--border': props.border
-  }
-})
-const isEmpty = computed((): boolean => {
-  return !slots.body
-})
-
-const iCollapseParams = computed((): ICollapse => {
-  return {
-    isDisabled: props.isDisabled,
-    border: props.border,
-    icon: props.icon,
-    id: id.value,
-    isCollapsed: isCollapsed.value,
-    open: open,
-    close: close,
-    toggle: toggle
-  }
-})
-
-onMounted((): void => {
-  if (selfRegisterCollapseMethod) {
-    const payload: ICollapse = iCollapseParams.value
-
-    selfRegisterCollapseMethod(payload)
-  }
-})
-
-watch(
-  () => isCollapsed.value,
-  (value: boolean): void => {
-    /**
-     * Событие тоггла
-     */
-    const payload: ICollapseEmitPayload = { value, component: iCollapseParams.value }
-    emit('toggle', payload)
-    value ? emit('open', payload) : emit('close', payload)
-    if (accordionTriggerMethod) {
-      accordionTriggerMethod(value ? 'open' : 'close', payload)
-    }
-  }
-)
-const open = (): void => {
-  if (props.isDisabled || animated.value) return
-  isCollapsed.value = true
-}
-const close = (): void => {
-  if (props.isDisabled || animated.value) return
-  isCollapsed.value = false
-}
-const toggle = (): void => {
-  if (props.isDisabled || animated.value) return
-  isCollapsed.value = !isCollapsed.value
-}
-const slideOpenStart = (value: boolean): void => {
-  animated.value = true
-  const payload: ICollapseEmitPayload = { value, component: iCollapseParams.value }
-  /**
-   * Событие перед началом открытия
-   */
-  emit('collapse-open-start', payload)
-}
-const slideOpenEnd = (value: boolean): void => {
-  animated.value = false
-  const payload: ICollapseEmitPayload = { value, component: iCollapseParams.value }
-  /**
-   * Событие после открытия
-   */
-  emit('collapse-open-end', payload)
-}
-const slideCloseStart = (value: boolean): void => {
-  animated.value = true
-  const payload: ICollapseEmitPayload = { value, component: iCollapseParams.value }
-  /**
-   * Событие перед началом закрытия
-   */
-  emit('collapse-close-start', payload)
-}
-const slideCloseEnd = (value: boolean): void => {
-  animated.value = false
-  const payload: ICollapseEmitPayload = { value, component: iCollapseParams.value }
-  /**
-   * Событие после закрытия
-   */
-  emit('collapse-close-end', payload)
-}
-</script>
-
-<template>
-  <section class="mc-collapse" :class="classes">
-    <div class="mc-collapse__header" tabindex="0" @keyup.esc="close">
-      <mc-svg-icon
-        v-if="icon && !isEmpty"
-        class="mc-collapse__icon"
-        name="arrow_drop_down"
-        :color="isDisabled ? 'outline-gray' : 'black'"
-      />
-      <!-- @slot Слот для элемента по которому будет меняться состояние компонента -->
-      <div v-if="slots.activator" @click="toggle">
-        <slot name="activator" />
-      </div>
-      <a v-if="slots.body" class="mc-collapse__link" href="#" @click.prevent="toggle" />
-    </div>
-    <mc-slide-up-down
-      class="mc-collapse__body"
-      :active="isCollapsed"
-      :duration="300"
-      @slide-open-start="slideOpenStart"
-      @slide-open-end="slideOpenEnd"
-      @slide-close-start="slideCloseStart"
-      @slide-close-end="slideCloseEnd"
-    >
-      <div class="mc-collapse__body-inner">
-        <!-- @slot Слот контента -->
-        <slot name="body" />
-      </div>
-    </mc-slide-up-down>
-    <div v-if="slots.bottom" class="mc-collapse__bottom">
-      <!-- @slot Общий нижний слот -->
-      <slot name="bottom" />
-    </div>
-  </section>
-</template>
-
-<style lang="scss">
-@use '../../../assets/styles/mixins' as *;
-@use '../../../assets/tokens/durations' as *;
-@use '../../../assets/tokens/colors' as *;
-@use '../../../assets/tokens/spacings' as *;
-@use '../../../assets/tokens/border-radius' as *;
-.mc-collapse {
-  $block-name: &;
-
-  &--border {
-    border-radius: $radius-100;
-    border: 1px solid $color-outline-gray;
-
-    #{$block-name} {
-      &__header {
-        display: flex;
-        padding: $space-100 $space-200;
-      }
-    }
-  }
-
-  &__link {
-    display: block;
-    @include position(absolute, 0);
-    z-index: 1;
-  }
-
-  &__header {
-    display: inline-flex;
-    align-items: center;
-    outline: none;
-    cursor: pointer;
-    position: relative;
-  }
-
-  &__icon {
-    transition: all $duration-s;
-    margin-inline: $space-50 $space-50;
-  }
-
-  &__body {
-    #{$block-name} {
-      border: none;
-      border-radius: 0;
-      border-bottom: 1px solid $color-outline-gray;
-
-      &__header {
-        padding-inline: $space-400 $space-200;
-      }
-
-      &__body {
-        #{$block-name} {
-          &__header {
-            padding-inline-start: $space-800;
-          }
-        }
-      }
-
-      &:first-child {
-        border-top: 1px solid $color-outline-gray;
-      }
-
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-  }
-
-  &__bottom {
-    position: relative;
-  }
-
-  &--is-open {
-    > #{$block-name} {
-      &__header {
-        #{$block-name} {
-          &__icon {
-            transform: rotate(180deg);
-          }
-        }
-      }
-    }
-  }
-
-  &--is-empty {
-    #{$block-name} {
-      &__header {
-        cursor: default;
-        &:hover {
-          color: inherit;
-        }
-      }
-      &__link {
-        cursor: default;
-      }
-    }
-  }
-
-  &--is-disabled {
-    #{$block-name} {
-      &__header {
-        cursor: not-allowed;
-        color: $color-outline-gray;
-        &:hover {
-          color: $color-outline-gray;
-        }
-      }
-      &__link {
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  &--has-icon {
-    &#{$block-name}--is-empty {
-      #{$block-name}__header {
-        padding-inline-start: $space-400;
-      }
-    }
-  }
-}
-</style>

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

@@ -1,65 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import selectOptions from '@/mocks/selectOptions.json'
-import McDropdown from './McDropdown.vue'
-import McButton from '@/components/elements/McButton/McButton.vue'
-import { DropdownListPositions, DropdownPositions } from '@/enums'
-
-const meta = {
-    title: 'McDropdown',
-    component: McDropdown,
-    tags: ['autodocs'],
-    argTypes: {
-        modelValue: { control: 'none' },
-        items: { control: 'array' },
-        listPosition: { control: 'select', options: Object.values(DropdownListPositions) },
-        position: { control: 'select', options: Object.values(DropdownPositions) },
-        listMinWidth: { control: 'select' },
-        hideOnSelect: { control: 'boolean' },
-    },
-    args: {
-        items: [1, 2, 3],
-        listPosition: DropdownListPositions.Bottom,
-        position: DropdownPositions.Left,
-        hideOnSelect: true,
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=19%3A280',
-        },
-    },
-} satisfies Meta<typeof McDropdown>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    render() {
-        return {
-            data() {
-                return {
-                    v: null,
-                }
-            },
-            components: {
-                McDropdown,
-                McButton,
-            },
-            computed: {
-                items() {
-                    return selectOptions
-                },
-            },
-            template: `
-              <mc-dropdown :items="this.items" @select="v = $event">
-                  <template #activator>
-                      <mc-button>{{ v?.title || 'Select McPay service' }}</mc-button>
-                  </template>
-                  <template #item="{ item }">
-                      <mc-button variation="purple-link">{{ item.title }}</mc-button>
-                  </template>
-              </mc-dropdown>
-            `
-        }
-    },
-};

package/src/components/patterns/McDropdown/McDropdown.vue

@@ -1,297 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, type PropType, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import { useThrottleFn } from '@vueuse/core'
-import McDropdownPanel from '@/components/patterns/McDropdown/McDropdownPanel.vue'
-import type { DropdownListPositionsUnion, DropdownPositionsUnion } from '@/types/IDropdown'
-import { DropdownListPositions, DropdownPositions } from '@/enums/Dropdown'
-
-const throttle = useThrottleFn((method) => {
-  method()
-}, 200)
-
-const id = 'dropdown-element-id'
-const localList_position = ref<string | null>(null)
-const local_position = ref<string | null>(null)
-const dropdown_body = ref<HTMLElement | null>(null)
-const activator = ref<HTMLElement | null>(null)
-const is_open = ref<boolean>(false)
-const route = useRoute()
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
-  (e: 'select', value: any): void
-}>()
-
-const props = defineProps({
-  /**
-   * Состояние видимости контента
-   */
-  modelValue: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  items: {
-    type: Array as PropType<any[]>,
-    default: () => []
-  },
-  /**
-   * Выравнивание
-   * контента: 'left', 'right', 'auto'
-   */
-  position: {
-    type: String as () => DropdownPositionsUnion,
-    default: DropdownPositions.Left
-  },
-  /**
-   * Направление отображения
-   * контента: 'top', 'bottom', 'auto'
-   */
-  listPosition: {
-    type: String as () => DropdownListPositionsUnion,
-    default: DropdownListPositions.Bottom
-  },
-  /**
-   * Минимальная ширина выпадаюзего списка
-   */
-  listMinWidth: {
-    type: String as PropType<string>,
-    default: 'inherit'
-  },
-  /**
-   * Минимальная ширина выпадаюзего списка
-   */
-  listMaxHeight: {
-    type: Number as PropType<number>,
-    default: 300
-  },
-  hideOnSelect: {
-    type: Boolean as PropType<boolean>,
-    default: true
-  }
-})
-
-const dropdownClasses = computed((): { [key: string]: boolean } => {
-  return {
-    [`mc-dropdown--position-${local_position.value}`]: !!local_position.value,
-    [`mc-dropdown--list-position-${localList_position.value}`]: !!localList_position.value,
-    ['mc-dropdown--is-open']: is_open.value
-  }
-})
-
-const dropdownStyles = computed((): { [key: string]: string | number } => {
-  return {
-    '--dropdown-body-min-width': props.listMinWidth
-  }
-})
-
-onMounted((): void => {
-  window.addEventListener('resize', throttledCalculateDropdownPosition)
-  window.addEventListener('transitionrun', throttledCalculateDropdownPosition)
-})
-
-onBeforeUnmount((): void => {
-  window.removeEventListener('resize', throttledCalculateDropdownPosition)
-  window.removeEventListener('transitionrun', throttledCalculateDropdownPosition)
-})
-
-const toggleDropdown = (): void => {
-  setOpenState(!is_open.value)
-}
-
-const handleClickOutside = (e: Event): void => {
-  const target = e.target as HTMLElement
-  if (is_open.value && !target.closest(`#${id}`)) closeDropdown()
-}
-
-const closeDropdown = (): void => {
-  setOpenState(false)
-}
-
-const setOpenState = (payload: boolean): void => {
-  is_open.value = payload
-  emit('update:modelValue', payload)
-
-  if (is_open.value) document.addEventListener('click', handleClickOutside)
-  else document.removeEventListener('click', handleClickOutside)
-}
-
-const handleItemClick = (payload: any): void => {
-  emit('select', payload)
-  if (props.hideOnSelect) closeDropdown()
-}
-
-const calculateDropdownPosition = (): void => {
-  if (!dropdown_body.value) return
-  const rect = activator.value?.getBoundingClientRect()
-  if (!rect) return
-  const space_below: number = window.innerHeight - rect.bottom
-  const space_left: number = window.innerWidth - rect.left
-  const { offsetHeight: dropdown_height, offsetWidth: dropdown_width } = dropdown_body.value
-  // Определяем направление отображения списка
-  const auto_list_position: string =
-    space_below < dropdown_height ? DropdownListPositions.Top : DropdownListPositions.Bottom
-  const auto_position: string = space_left > dropdown_width ? DropdownPositions.Left : DropdownPositions.Right
-  // Устанавливаем значения в зависимости от position
-  localList_position.value = props.listPosition === DropdownListPositions.Auto ? auto_list_position : props.listPosition
-  local_position.value = props.position === DropdownPositions.Auto ? auto_position : props.position
-}
-
-const throttledCalculateDropdownPosition = () => throttle(() => calculateDropdownPosition())
-
-watch(() => route, closeDropdown)
-watch(
-  () => props.modelValue,
-  (val: boolean): void => {
-    if (is_open.value !== val) setOpenState(val)
-
-    nextTick((): void => {
-      calculateDropdownPosition()
-    })
-  },
-  { immediate: true }
-)
-</script>
-
-<template>
-  <div class="mc-dropdown" :id="id" :class="dropdownClasses" :style="dropdownStyles">
-    <div
-      class="mc-dropdown__toggle"
-      ref="activator"
-      tabindex="0"
-      @keyup.esc="closeDropdown"
-      @click.prevent.stop="toggleDropdown"
-    >
-      <!-- @slot активатора переключения состояния -->
-      <slot name="activator" />
-    </div>
-    <div ref="dropdown_body" class="mc-dropdown__body">
-      <!-- @slot контента -->
-      <mc-dropdown-panel :max-height="listMaxHeight">
-        <slot>
-          <div
-            v-for="(item, index) in items"
-            :key="`dropdown-list-item-${item.id || item.key || index}`"
-            class="mc-dropdown-panel__item"
-            @click="handleItemClick(item)"
-          >
-            <slot name="item" :item="item"></slot>
-          </div>
-        </slot>
-      </mc-dropdown-panel>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@use '../../../assets/styles/mixins' as *;
-@use '../../../assets/tokens/z-indexes' as *;
-@use '../../../assets/tokens/durations' as *;
-@use '../../../assets/tokens/colors' as *;
-@use '../../../assets/tokens/spacings' as *;
-@use 'sass:color' as sasscolor;
-.mc-dropdown {
-  $block-name: &;
-  --dropdown-body-min-width: inherit;
-
-  position: relative;
-  display: inline-block;
-
-  &__toggle {
-    outline: none;
-    @include reset-text-indents();
-    .mc-svg-icon {
-      transition: all $duration-s;
-    }
-  }
-
-  &__body {
-    @include position(absolute, null null null 0);
-    z-index: $z-index-dropdown;
-    height: 0;
-    overflow: hidden;
-    margin: 0;
-    background-color: transparent;
-    opacity: 0;
-    visibility: hidden;
-    min-width: var(--dropdown-body-min-width);
-    transition:
-      opacity $duration-s,
-      transform $duration-s;
-
-    .mc-button {
-      &:not(.nuxt-link-active):not(.mc-button--is-active):not(.mc-button--variation-red-flat) {
-        &:hover {
-          background-color: sasscolor.scale($color-purple, $lightness: 90%);
-          .mc-button__background {
-            opacity: 0 !important;
-          }
-        }
-      }
-    }
-  }
-
-  &--list-position-top {
-    #{$block-name} {
-      &__body {
-        bottom: 100%;
-        margin-bottom: $space-100;
-      }
-    }
-  }
-
-  &--list-position-bottom {
-    #{$block-name} {
-      &__body {
-        top: 100%;
-        margin-top: $space-100;
-      }
-    }
-  }
-
-  &--is-open {
-    #{$block-name} {
-      &__body {
-        height: auto;
-        visibility: visible;
-        overflow: visible;
-        opacity: 1;
-      }
-    }
-
-    #{$block-name} {
-      &__toggle--rotate-icon {
-        .rotate {
-          position: relative;
-          transform: rotate(180deg);
-        }
-      }
-    }
-  }
-
-  &--position-right {
-    #{$block-name} {
-      &__body {
-        inset-inline-start: auto;
-        inset-inline-end: 0;
-      }
-    }
-  }
-
-  &--position-left {
-    #{$block-name} {
-      &__body {
-        inset-inline-start: 0;
-        inset-inline-end: auto;
-      }
-    }
-  }
-  .mc-dropdown-panel {
-    &__item {
-      & > * {
-        width: 100%;
-      }
-    }
-  }
-}
-</style>