mediacube-ui-v2 0.0.3 → 0.0.4

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

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

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

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