mediacube-ui-v2 0.0.2 → 0.0.4

package/src/components/templates/McTopBar/McTopBar.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import McAvatar from '@/components/elements/McAvatar/McAvatar.vue'
+import McButton from '@/components/elements/McButton/McButton.vue'
+import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
+import McSeparator from '@/components/elements/McSeparator/McSeparator.vue'
+import McDropdown from '@/components/patterns/McDropdown/McDropdown.vue'
+import { type PropType, ref } from 'vue'
+import { ButtonSize, DropdownPositions, HorizontalAlignment } from '@/enums'
+import type { IconsListUnion } from '@/types'
+
+const props = defineProps({
+  /**
+   *  Данные пользователя
+   *
+   */
+  user: {
+    type: Object as PropType<Record<string, any>>,
+    default: () => ({})
+  },
+  /**
+   *  Меню языков
+   *
+   */
+  menuLangs: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   *  Локализация или текст по умолчанию
+   *
+   */
+  defaultLang: {
+    type: String as PropType<string>,
+    default: 'Выберите язык'
+  },
+  /**
+   *  Текущая локализация
+   *
+   */
+  currentLang: {
+    type: String as PropType<string>,
+    default: null
+  }
+})
+
+const menuLangsDD = ref<HTMLElement | null>(null)
+const localesDropdownOpen = ref(false)
+const userDropdownOpen = ref(false)
+</script>
+
+<template>
+  <div class="mc-top-bar">
+    <div class="mc-top-bar__inner">
+      <div v-if="$slots.left" class="mc-top-bar__left">
+        <slot name="left" />
+      </div>
+      <div class="mc-top-bar__right">
+        <slot name="right" />
+        <mc-dropdown
+          v-if="menuLangs && menuLangs.length"
+          ref="menuLangsDD"
+          :items="menuLangs"
+          v-model="localesDropdownOpen"
+          list-min-width="auto"
+          class="mc-top-bar__menu-langs"
+        >
+          <template #activator>
+            <mc-button variation="black-link" uppercase>
+              {{ currentLang || defaultLang }}
+              <template #icon-append>
+                <mc-svg-icon class="rotate" name="arrow_drop_down" />
+              </template>
+            </mc-button>
+          </template>
+          <template #item="{ item }">
+            <mc-button
+              :to="item.to || item.href"
+              :exact="item.exact"
+              variation="black-flat"
+              :text-align="HorizontalAlignment.Left"
+              full-width
+            >
+              <template #icon-prepend>
+                <mc-svg-icon :name="`flag_${item.name.toLowerCase()}` as IconsListUnion" />
+              </template>
+              {{ item.name }}
+            </mc-button>
+          </template>
+        </mc-dropdown>
+        <slot name="user">
+          <mc-dropdown v-if="props.user" v-model="userDropdownOpen" :position="DropdownPositions.Right">
+            <template #activator>
+              <mc-button variation="white-flat" :size="ButtonSize.MCompact">
+                <template #icon-prepend>
+                  <mc-avatar :src="props.user.avatar" rounded size="400" />
+                </template>
+              </mc-button>
+            </template>
+            <slot name="user-dropdown-panel" />
+          </mc-dropdown>
+        </slot>
+      </div>
+    </div>
+    <mc-separator color="hover-gray" indent-top="100" />
+    <slot name="bottom" />
+  </div>
+</template>
+
+<style lang="scss">
+@use '../../../assets/styles/mixins' as *;
+@use '../../../assets/tokens/spacings' as *;
+@use '../../../assets/tokens/colors' as *;
+.mc-top-bar {
+  $block-name: &;
+
+  width: 100%;
+
+  &__inner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: $space-100 $space-150 0 $space-150;
+    @include child-indent-right($space-100);
+  }
+
+  &__left,
+  &__right {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    @include child-indent-right($space-100);
+  }
+
+  &__right {
+    min-width: 0;
+    flex: 1 1 auto;
+    justify-content: flex-end;
+  }
+  &__menu-langs {
+    .mc-svg-icon {
+      svg {
+        rect {
+          stroke: $color-hover-gray;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import McVirtualScroll from '@/components/templates/McVirtualScroll/McVirtualScroll.vue'
+import McPreview from '@/components/patterns/McPreview/McPreview.vue'
+import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
+import selectOptions from '@/mocks/selectOptions.json'
+
+const meta = {
+  title: 'McVirtualScroll',
+  component: McVirtualScroll,
+  tags: ['autodocs'],
+  argTypes: {
+    containerHeight: { control: 'number' },
+    itemHeight: { control: 'number' },
+    buffer: { control: 'number' },
+  },
+  args: {
+    containerHeight: 500,
+    itemHeight: 40,
+    buffer: 1,
+  },
+  parameters: {
+    componentSubtitle: 'Status: Ready',
+    design: {
+      type: 'figma',
+      url: ''
+    }
+  }
+} satisfies Meta<typeof McVirtualScroll>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render() {
+    return {
+      components: {
+        McVirtualScroll,
+        McPreview,
+        McSvgIcon,
+      },
+      computed: {
+        items() {
+          return [...selectOptions,...selectOptions,...selectOptions,...selectOptions,...selectOptions,...selectOptions]
+        },
+      },
+      template: `
+      <mc-virtual-scroll :items="items" :item-height="40" :container-height="500">
+        <template #item="{ item, index }">
+          <mc-preview>
+            <template #left>
+              <mc-svg-icon name="mc_pay_app" size="400" />
+            </template>
+            <template #top>{{ item.title }}</template>
+          </mc-preview>
+        </template>
+      </mc-virtual-scroll>
+      `
+    }
+  },
+}

package/src/components/templates/McVirtualScroll/McVirtualScroll.vue

@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import { ref, onMounted, nextTick, watch, type PropType, computed } from 'vue'
+
+interface VisibleItem {
+  key: number
+  data: any
+  index: number
+  top: number
+}
+
+const props = defineProps({
+  /**
+   * Массив данных для рендеринга
+   * */
+  items: {
+    type: Array as PropType<any[]>,
+    default: () => [],
+    required: true
+  },
+  /**
+   * Высота контейнера скролла
+   * */
+  containerHeight: {
+    type: Number as PropType<number>,
+    required: true
+  },
+  /**
+   * Высота 1 элемента списка
+   * */
+  itemHeight: {
+    type: Number as PropType<number>,
+    default: 20,
+    required: true
+  },
+  /**
+   * Буфер для подгрузки дополнительных элементов вне видимой области
+   * */
+  buffer: {
+    type: Number as PropType<number>,
+    default: 1
+  }
+})
+
+const containerRef = ref<HTMLDivElement | null>(null)
+const scrollTop = ref<number>(0)
+const visibleItems = ref<VisibleItem[]>([])
+const totalHeight = ref<number>(0)
+
+const styles = computed((): { [key: string]: string } => {
+  return {
+    height: `${props.containerHeight}px`,
+    overflowY: 'auto',
+    position: 'relative'
+  }
+})
+
+const calculateTotalHeight = (): void => {
+  totalHeight.value = props.items.length * props.itemHeight
+}
+
+const calculateVisibleItems = (): void => {
+  const containerHeight = containerRef.value?.clientHeight || 0
+  const startIndex = Math.floor(scrollTop.value / props.itemHeight)
+  const endIndex = Math.min(props.items.length - 1, Math.floor((scrollTop.value + containerHeight) / props.itemHeight))
+  const buffer = props.buffer || 5
+
+  const result: VisibleItem[] = []
+  for (let i = Math.max(0, startIndex - buffer); i <= Math.min(endIndex + buffer, props.items.length - 1); i++) {
+    result.push({
+      key: i,
+      data: props.items[i],
+      index: i,
+      top: i * props.itemHeight
+    } as VisibleItem)
+  }
+  visibleItems.value = result
+}
+
+const onScroll = (): void => {
+  scrollTop.value = containerRef.value?.scrollTop || 0
+  requestAnimationFrame(calculateVisibleItems)
+}
+
+onMounted((): void => {
+  calculateTotalHeight()
+  nextTick(calculateVisibleItems)
+})
+
+watch(
+  () => props.items,
+  (): void => {
+    calculateTotalHeight()
+    nextTick(calculateVisibleItems)
+  }
+)
+</script>
+
+<template>
+  <div class="mc-virtual-scroll" ref="containerRef" @scroll="onScroll" :style="styles">
+    <div
+      v-for="item in visibleItems"
+      :key="`mc-virtual-scroll__item-${item.key}`"
+      class="mc-virtual-scroll__item"
+      :style="{ top: `${item.top}px` }"
+    >
+      <slot name="item" :item="item.data" :index="item.index"></slot>
+    </div>
+
+    <!-- Пустое пространство для скролла -->
+    <div :style="{ height: `${totalHeight}px` }"></div>
+  </div>
+</template>
+
+<style lang="scss">
+.mc-virtual-scroll {
+  position: relative;
+  overflow-y: auto;
+  &__item {
+    position: absolute;
+    transition: all 0.3s ease;
+    width: 100%;
+  }
+}
+</style>

package/src/composables/index.ts

@@ -0,0 +1,9 @@
+import { useModal } from './useModal'
+import { useDrawer } from './useDrawer'
+import { useTooltip } from './useTooltip'
+import { useRandomNumber } from './useRandomNumber'
+import { useFieldErrors } from './useFieldErrors'
+import { useHelper } from './useHelper'
+import { UseEncodeDecode } from '@/composables/useEncodeDecode'
+
+export { useModal, useDrawer, useTooltip, useRandomNumber, useFieldErrors, useHelper, UseEncodeDecode }

package/src/composables/useDrawer.ts

@@ -0,0 +1,90 @@
+import { reactive, ref, h, render, getCurrentInstance, shallowRef, markRaw } from 'vue'
+import DrawerContainer from '@/components/templates/McDrawer/McDrawerContainer.vue'
+import type { IDrawerServiceState, IDrawerProps, IDrawerState } from '@/types/IDrawer'
+
+const closeServiceState = () => {
+  drawerServiceState.isOpen = false
+  reactiveProps.drawers = []
+}
+
+const drawerServiceState = reactive<IDrawerServiceState>({
+  isOpen: false,
+  closeServiceState: closeServiceState
+})
+
+const drawerComponents = shallowRef({})
+const reactiveProps = reactive<{ drawers: IDrawerState[] }>({ drawers: [] })
+
+const createDrawerContainer = () => {
+  const drawerContainerElement = document.createElement('div')
+  drawerContainerElement.id = 'drawer-container'
+  document.body.appendChild(drawerContainerElement)
+
+  const vnode = h(DrawerContainer, { drawerServiceState, reactiveProps })
+  render(vnode, drawerContainerElement)
+}
+
+// Если компонент DrawerContainer ещё не был добавлен в DOM, создаем его
+const ensureDrawerContainerExists = () => {
+  if (!document.getElementById('drawer-container')) {
+    createDrawerContainer()
+  }
+}
+
+const showDrawer = (
+  componentName: string, // Component name from drawerComponents: {...}
+  drawerProps: Partial<IDrawerProps> = {},
+  componentProps = {}
+) => {
+  //@ts-ignore
+  if (!drawerComponents.value[componentName]) {
+    return console.warn(
+      'The component is not provided in Mediacube-ui DS\n' +
+        'Check and add to app.use(MediacubeUI, { drawerComponents: {...} })'
+    )
+  }
+  ensureDrawerContainerExists()
+
+  const id = Date.now()
+  const newDrawer: IDrawerState = {
+    //@ts-ignore
+    component: markRaw(drawerComponents.value[componentName]),
+    componentName: componentName,
+    drawerProps: drawerProps,
+    componentProps: componentProps,
+    modelValue: true,
+    id,
+    close: () => {
+      //@ts-ignore
+      const drawerToClose = reactiveProps.drawers.findLast((d) => d.id === id)
+      drawerToClose && (drawerToClose.modelValue = false)
+      setTimeout(() => {
+        reactiveProps.drawers = reactiveProps.drawers.filter((d) => d.id !== drawerToClose?.id)
+      }, drawerProps?.duration || 300)
+    }
+  }
+  reactiveProps.drawers.push(newDrawer)
+  drawerServiceState.isOpen = true
+}
+
+const closeDrawer = (componentName: string) => {
+  //@ts-ignore
+  const drawerToClose = reactiveProps.drawers.findLast((d) => d.componentName === componentName)
+  drawerToClose && drawerToClose.close()
+}
+
+const closeAllDrawers = () => {
+  reactiveProps.drawers.forEach((d) => {
+    d.close()
+  })
+}
+
+export function useDrawer() {
+  //@ts-ignore
+  const { proxy } = getCurrentInstance()
+  if (proxy.$dsOptions?.drawerComponents) {
+    drawerComponents.value = proxy.$dsOptions.drawerComponents
+  }
+
+  return { showDrawer, closeDrawer, closeAllDrawers }
+}

package/src/composables/useEncodeDecode.ts

@@ -0,0 +1,22 @@
+class UseEncodeDecode {
+  static encode(value: object)  {
+    if (value.constructor !== Object) return value
+    try {
+      return btoa(encodeURI(JSON.stringify(value)))
+    } catch (e) {
+      console.error(e)
+      return value
+    }
+  }
+  static decode(value: string | null)  {
+    if (!value) return value
+    try {
+      return JSON.parse(decodeURI(atob(value)))
+    } catch (e) {
+      console.error(e)
+      return value
+    }
+  }
+}
+
+export { UseEncodeDecode }

package/src/composables/useFieldErrors.ts

@@ -0,0 +1,24 @@
+import { computed, ref, watch } from 'vue'
+
+export function useFieldErrors(errors: string[]) {
+  const is_error_visible = ref<boolean>(true)
+  const errorText = computed<string | null>(() => {
+    if (errors === null || !errors?.length || !is_error_visible.value) return null
+    return errors.join(', ')?.replace(/-/gm, '&#x2011;')
+  })
+  watch(
+    () => errors,
+    (): void => {
+      is_error_visible.value = false
+    }
+  )
+  const toggleErrorVisible = (): void => {
+    is_error_visible.value = false
+  }
+
+  return {
+    is_error_visible,
+    errorText,
+    toggleErrorVisible
+  }
+}

package/src/composables/useHelper.ts

@@ -0,0 +1,85 @@
+function isEmpty(value: any): boolean {
+  if (value == null) return true
+  if (Array.isArray(value) || typeof value === 'string') {
+    return value.length === 0
+  }
+  if (typeof value === 'object') {
+    return Object.keys(value).length === 0
+  }
+  return false
+}
+
+function isEqual(value1: any, value2: any) {
+  if (value1 === value2) {
+    return true
+  }
+  if (
+    typeof value1 !== 'object' ||
+    typeof value2 !== 'object' ||
+    value1 === null ||
+    value2 === null
+  ) {
+    return false
+  }
+  if (Array.isArray(value1) !== Array.isArray(value2)) {
+    return false
+  }
+  const keys1 = Object.keys(value1)
+  const keys2 = Object.keys(value2)
+
+  if (keys1.length !== keys2.length) {
+    return false
+  }
+  for (const key of keys1) {
+    if (!isEqual(value1[key], value2[key])) {
+      return false
+    }
+  }
+  return true
+}
+
+function cloneDeep(value: any): any {
+  if (value === null || typeof value !== 'object') {
+    return value
+  }
+  if (Array.isArray(value)) {
+    return value.map(cloneDeep)
+  }
+  const clonedObj: any = {}
+  for (const key in value) {
+    if (hasProperty(value, key)) {
+      clonedObj[key] = cloneDeep(value[key])
+    }
+  }
+  return clonedObj
+}
+
+function uniqWith<T>(array: T[], comparator: (a: T, b: T) => boolean): T[] {
+  return array.reduce<T[]>((acc, current) => {
+    if (!acc.some((item) => comparator(item, current))) {
+      acc.push(current)
+    }
+    return acc
+  }, [])
+}
+
+function deepMerge(target: any, source: any) {
+  for (const key in source) {
+    if (source[key] instanceof Object && key in target) {
+      Object.assign(source[key], deepMerge(target[key], source[key]))
+    }
+  }
+  Object.assign(target || {}, source)
+  return target
+}
+
+function hasProperty(object: object, prop: string) {
+  return Object.prototype.hasOwnProperty.call(object, prop)
+}
+function isNumber(payload: any) {
+  return typeof payload === 'number'
+}
+
+export function useHelper() {
+  return { isEmpty, isEqual, cloneDeep, uniqWith, deepMerge, hasProperty, isNumber }
+}

package/src/composables/useModal.ts

@@ -0,0 +1,88 @@
+import { reactive, h, render, getCurrentInstance, shallowRef, markRaw } from 'vue'
+import ModalContainer from '@/components/templates/McModal/McModalContainer.vue'
+import type { IModalServiceState, IModalState } from '@/types/IModal'
+
+const closeServiceState = () => {
+  modalServiceState.isOpen = false
+  reactiveProps.modals = []
+}
+
+const modalServiceState = reactive<IModalServiceState>({
+  isOpen: false,
+  closeServiceState: closeServiceState
+})
+
+const modalComponents = shallowRef({})
+const reactiveProps = reactive<{ modals: IModalState[] }>({ modals: [] })
+
+const createModalContainer = () => {
+  const modalContainerElement = document.createElement('div')
+  modalContainerElement.id = 'modal-container'
+  document.body.appendChild(modalContainerElement)
+
+  const vnode = h(ModalContainer, { modalServiceState, reactiveProps })
+  render(vnode, modalContainerElement)
+}
+
+// Если компонент ModalContainer ещё не был добавлен в DOM, создаем его
+const ensureModalContainerExists = () => {
+  if (!document.getElementById('modal-container')) {
+    createModalContainer()
+  }
+}
+
+const showModal = (
+  componentName: string, // Component name from modalComponents: {...}
+  componentProps = {}
+) => {
+  //@ts-ignore
+  if (!modalComponents.value[componentName]) {
+    return console.warn(
+      'The component is not provided in Mediacube-ui DS\n' +
+        'Check and add to app.use(MediacubeUI, { modalComponents: {...} })'
+    )
+  }
+  ensureModalContainerExists()
+
+  const id = Date.now()
+  const newModal: IModalState = {
+    //@ts-ignore
+    component: markRaw(modalComponents.value[componentName]),
+    componentName: componentName,
+    componentProps: componentProps,
+    modelValue: true,
+    id,
+    close: () => {
+      //@ts-ignore
+      const modalToClose = reactiveProps.modals.findLast((d) => d.id === id)
+      modalToClose && (modalToClose.modelValue = false)
+      setTimeout(() => {
+        reactiveProps.modals = reactiveProps.modals.filter((d) => d.id !== modalToClose?.id)
+      }, 300)
+    }
+  }
+  reactiveProps.modals.push(newModal)
+  modalServiceState.isOpen = true
+}
+
+const closeModal = (componentName: string) => {
+  //@ts-ignore
+  const modalToClose = reactiveProps.modals.findLast((d) => d.componentName === componentName)
+  modalToClose && modalToClose.close()
+}
+
+const closeAllModals = () => {
+  reactiveProps.modals.forEach((d) => {
+    d.close()
+  })
+}
+
+export function useModal() {
+  //@ts-ignore
+  const { proxy } = getCurrentInstance()
+  if (proxy.$dsOptions?.modalComponents) {
+    modalComponents.value = proxy.$dsOptions.modalComponents
+  }
+
+  return { showModal, closeModal, closeAllModals }
+}

package/src/composables/useRandomNumber.ts

@@ -0,0 +1,10 @@
+export function timestamp(postfixLength: number = 0): number {
+  if (!postfixLength) return Date.now()
+  const min = Math.pow(10, postfixLength - 1)
+  const max = Math.pow(10, postfixLength) - 1
+  return +(String(Date.now()) + String(Math.floor(Math.random() * (max - min + 1)) + min))
+}
+
+export function useRandomNumber() {
+  return { timestamp }
+}