mediacube-ui-v2 0.0.5 → 0.0.7

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

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

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

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

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

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

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

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

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

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

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