mediacube-ui-v2 0.0.5 → 0.0.7

package/src/components/patterns/McSideBar/McSideBarButton/McSideBarButton.vue

@@ -1,232 +0,0 @@
-<script setup lang="ts">
-import McButton from '@/components/elements/McButton/McButton.vue'
-import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
-import McChip from '@/components/elements/McChip/McChip.vue'
-import type { ButtonVariationUnion, ColorTypes, IconsListUnion, ISidebarThemeConfigProvide } from '@/types'
-import { computed, inject, type PropType, useAttrs } from 'vue'
-import { ButtonSize, HorizontalAlignment, SidebarTheme, TooltipPositions } from '@/enums'
-import { defaultThemes } from '@/mocks/sidebar'
-
-const attrs = useAttrs()
-const provideData = inject<ISidebarThemeConfigProvide>('provideData', {} as ISidebarThemeConfigProvide)
-const props = defineProps({
-  /**
-   *  Если нужна ссылка внутри приложения:
-   */
-  to: {
-    type: Object as PropType<string>,
-    default: null
-  },
-  /**
-   *  Если нужна обычная ссылка:
-   * `https://mcpay.io/`
-   */
-  href: {
-    type: String as PropType<string>,
-    default: null
-  },
-  /**
-   *  Если нужна иконка
-   */
-  icon: {
-    type: String as () => IconsListUnion,
-    default: ''
-  },
-  /**
-   *  Если нужен конкретный
-   *  цвет иконки
-   */
-  iconColor: {
-    type: String as () => ColorTypes,
-    default: 'currentColor'
-  },
-  /**
-   *  Тайтл кнопки
-   */
-  title: {
-    type: String as PropType<string>,
-    default: ''
-  },
-  /**
-   *  Compact size
-   */
-  compact: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   *  Дизайн:
-   *  `purple, red, purple-outline, purple-invert, purple-flat и т.д.`
-   */
-  variation: {
-    type: String as () => ButtonVariationUnion
-  },
-  /**
-   * Если нужен другой цвет при взаимодействии
-   */
-  secondaryColor: {
-    type: String as () => ColorTypes
-  },
-  withTooltip: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  withIndicator: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  isActive: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   *  Additional info
-   */
-  info: {
-    type: [String, Number] as PropType<string | number | null>,
-    default: ''
-  },
-  /**
-   *  Exact
-   *
-   */
-  exact: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   *  Отключенное состояние
-   *
-   */
-  disabled: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  }
-})
-
-const themeConfig = computed(() => {
-  return provideData.currentThemeConfig || defaultThemes[SidebarTheme.Black]
-})
-
-const classes = computed(() => {
-  return {
-    'mc-side-bar-button': true,
-    [`mc-side-bar--${themeConfig.value.mode || 'black'}__button`]: true,
-    'purple-hover': !props.secondaryColor && themeConfig.value.mainMenuLinks.variable === 'black-flat',
-    //@ts-ignore
-    [attrs.class]: !!attrs.class
-  }
-})
-
-const btnAttrs = computed(() => {
-  return {
-    ...attrs,
-    variation: props.variation || themeConfig.value.mainMenuLinks.variable,
-    secondaryColor: props.secondaryColor || themeConfig.value.mainMenuLinks.secondaryColor,
-    textAlign: HorizontalAlignment.Left,
-    fullWidth: true,
-    size: props.compact ? ButtonSize.SCompact : ButtonSize.S,
-    href: props.href,
-    to: props.to,
-    exact: props.exact,
-    disabled: props.disabled,
-    isActive: props.isActive,
-    tooltip: props.compact && props.withTooltip ? props.title : '',
-    tooltipPlacement: TooltipPositions.Right
-  }
-})
-</script>
-
-<template>
-  <mc-button v-bind="btnAttrs" :class="classes">
-    <template #icon-prepend>
-      <mc-svg-icon v-if="icon" :fill="iconColor" class="mc-side-bar-button__icon" :name="icon" />
-      <span v-if="icon && compact && (info || withIndicator)" class="mc-side-bar-button__dot" />
-    </template>
-    <template v-if="!compact">{{ title }}</template>
-    <template v-if="!compact" #icon-append>
-      <mc-chip
-        v-if="info || withIndicator"
-        variation="purple"
-        class="mc-side-bar-button__chip"
-        :class="{ indicator: withIndicator }"
-      >
-        {{ withIndicator ? '' : info }}
-      </mc-chip>
-    </template>
-  </mc-button>
-</template>
-
-<style lang="scss">
-@use '../../../../assets/styles/mixins' as *;
-@use '../../../../assets/tokens/colors' as *;
-@use '../../../../assets/tokens/sizes' as *;
-@use '../../../../assets/tokens/spacings' as *;
-@use '../../../../assets/tokens/border-radius' as *;
-.mc-side-bar-button {
-  $block-name: &;
-  &__tooltip {
-    width: 100%;
-  }
-  &__dot {
-    @include position(absolute, $space-100 6px null null);
-    @include size($size-100);
-    background-color: $color-purple;
-    border-radius: $radius-circle;
-  }
-  &__chip {
-    &.indicator {
-      margin: 6px;
-      padding: 0 !important;
-      width: $size-150;
-      min-height: $size-150;
-    }
-  }
-  &.mc-button {
-    padding: $space-100;
-    opacity: 1;
-    height: auto;
-    border-radius: $space-50;
-    justify-content: flex-start;
-    .mc-svg-icon {
-      @include size($size-300);
-    }
-    &.purple-hover:hover {
-      background-color: $color-lighter-purple;
-    }
-
-    .mc-button__text {
-      margin-inline-end: $space-100;
-    }
-    .mc-button__prepend {
-      margin-inline-end: $space-100;
-    }
-    .mc-button__append {
-      margin-inline-start: auto;
-    }
-    .mc-chip {
-      height: auto;
-      padding: $space-50 $space-100;
-      font-variant-numeric: tabular-nums;
-    }
-  }
-}
-.mc-side-bar {
-  &--black__button {
-    &.mc-button--is-active,
-    &.mc-button.nuxt-link-active {
-      color: $color-white;
-      background-color: rgba(92, 102, 112, 0.4);
-      pointer-events: auto;
-    }
-  }
-  &--white__button {
-    &.mc-button--is-active,
-    &.mc-button.nuxt-link-active {
-      color: $color-purple;
-      background-color: $color-lighter-purple;
-      pointer-events: auto;
-    }
-  }
-}
-</style>

package/src/components/patterns/McSideBar/McSideBarCenter/McSideBarCenter.stories.ts

@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McSideBarCenter from './McSideBarCenter.vue'
-import { menu } from '@/mocks/sidebar'
-
-const meta = {
-    title: 'McSideBarCenter',
-    component: McSideBarCenter,
-    tags: ['autodocs'],
-    argTypes: {
-        title: { control: 'text' },
-        menuMain: { control: 'object' },
-        counts: { control: 'object' },
-        compact: { control: 'boolean' },
-    },
-    args: {
-        title: 'Dashboard',
-        menuMain: menu,
-        counts: { roles: 123 },
-        compact: false,
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: '',
-        },
-    },
-} satisfies Meta<typeof McSideBarCenter>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {}
-};

package/src/components/patterns/McSideBar/McSideBarCenter/McSideBarCenter.vue

@@ -1,342 +0,0 @@
-<script setup lang="ts">
-import McTitle from '@/components/elements/McTitle/McTitle.vue'
-import McSideBarButton from '@/components/patterns/McSideBar/McSideBarButton/McSideBarButton.vue'
-import McSeparator from '@/components/elements/McSeparator/McSeparator.vue'
-import McButton from '@/components/elements/McButton/McButton.vue'
-import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
-import { useRandomNumber } from '@/composables/useRandomNumber'
-import { computed, inject, nextTick, onBeforeMount, type PropType, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import type { ISideBarChatra, ISideBarMenuItem, ISideBarMenuItemEnrichment, ISidebarThemeConfigProvide } from '@/types'
-import { ButtonSize, SidebarTheme } from '@/enums'
-import McSlideUpDown from '@/components/elements/McSlideUpDown/McSlideUpDown.vue'
-import { defaultThemes } from '@/mocks/sidebar'
-
-const route = useRoute()
-const randomNumber = useRandomNumber()
-const provideData = inject<ISidebarThemeConfigProvide>('provideData', {} as ISidebarThemeConfigProvide)
-const emit = defineEmits<{
-  (e: 'open-side-bar'): void
-  (e: 'handlerChatraClick'): void
-}>()
-const props = defineProps({
-  /**
-   *  Заголовок
-   */
-  title: {
-    type: String as PropType<string>,
-    default: ''
-  },
-  /**
-   *  Центральное меню
-   */
-  menuMain: {
-    type: Array as PropType<ISideBarMenuItem[]>,
-    default: () => []
-  },
-  /**
-   *  Каунты для пунктов меню
-   *  вставляются в пункты с ключем 'count_key'
-   *
-   */
-  counts: {
-    type: Object as PropType<Record<string, number | null>>,
-    default: () => ({})
-  },
-  /**
-   *  Id чатры
-   *
-   */
-  chatraConfig: {
-    type: Object as PropType<ISideBarChatra>,
-    default: () => ({})
-  },
-  /**
-   *  Компактный вид
-   */
-  compact: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  }
-})
-
-const loading = ref<boolean>(true)
-const preparedMainMenu = ref<ISideBarMenuItemEnrichment[]>([])
-
-const themeConfig = computed(() => {
-  return provideData.currentThemeConfig || defaultThemes[SidebarTheme.Black]
-})
-
-onBeforeMount((): void => {
-  setMainMenu()
-})
-
-watch(
-  () => props.menuMain,
-  (): void => {
-    setMainMenu()
-  },
-  { deep: true }
-)
-watch(
-  () => props.compact,
-  (): void => {
-    setMainMenu()
-  }
-)
-
-// если переходим на роут с вложенным меню, открываем вложенное меню
-watch(
-  () => route,
-  (newRoute, oldRoute): void => {
-    loading.value = true
-    if (oldRoute.path !== newRoute.path) {
-      const target_route = preparedMainMenu.value.find(
-        (r) => r.to === newRoute.path || r.menu?.find((childRoute) => childRoute.to === newRoute.path)
-      )
-      target_route?.menu && !props.compact && (target_route.open = true)
-    }
-    nextTick(() => {
-      preparedMainMenu.value.forEach((mi) => {
-        const exact_route = mi.to === newRoute.path
-        const route_menu_match_new_route =
-          mi.menu && mi.menu.some((mim) => mim.to?.match(newRoute?.path) || newRoute.path?.match(mim.to as string))
-        if (!(exact_route || route_menu_match_new_route)) mi.open = false
-      })
-      loading.value = false
-    })
-  }
-)
-
-const getMenuItemHeadClasses = (menuMainItem: ISideBarMenuItemEnrichment) => {
-  return {
-    open: menuMainItem.open,
-    active: menuMainItem.active(),
-    'with-submenu': menuMainItem.menu && menuMainItem.menu.length,
-    [`mc-side-bar--${themeConfig.value.mode || 'black'}__button`]: true,
-    'purple-hover': themeConfig.value.mainMenuLinks.variable === 'black-flat',
-    [`mc-button--variation-${themeConfig.value.mainMenuLinks.variable}`]: !!themeConfig.value.mainMenuLinks.variable,
-    ['mc-side-bar--black__button mc-button nuxt-link-active']:
-      menuMainItem.menu && menuMainItem.menu.length && !menuMainItem.open && menuMainItem.active()
-  }
-}
-
-const handlerSidebarItemClick = () => {
-  props.compact && emit('open-side-bar')
-}
-
-// заранее формируем меню один раз, так как компьютед излишен и во вторых нужна переменная "open" что бы ее тогглить
-const setMainMenu = (): void => {
-  loading.value = true
-  preparedMainMenu.value = props.menuMain.map((i: ISideBarMenuItem) => {
-    const active = () => {
-      return (i.menu && i.menu.some((r) => route?.path?.match(r.to as string))) || !!route?.path?.match(i.to as string)
-    }
-
-    return {
-      id: randomNumber.timestamp(5),
-      ...i,
-      active,
-      indicator: () => i.menu && i.menu.some((r) => !!props.counts?.[r.count_key]),
-      open: !props.compact && active()
-    } as ISideBarMenuItemEnrichment
-  })
-  loading.value = false
-}
-</script>
-
-<template>
-  <div class="mc-side-bar-center">
-    <mc-title v-if="title" class="mc-side-bar-center__title" :color="compact ? 'transparent' : 'dark-gray'">
-      {{ title }}
-    </mc-title>
-    <!-- v-show hides jumping with child menu opening after locale switch  -->
-    <div v-show="!loading" v-if="preparedMainMenu && preparedMainMenu.length" class="mc-side-bar-center__content">
-      <div
-        v-for="menuMainItem in preparedMainMenu"
-        :key="menuMainItem.id"
-        :class="{ 'item-active': menuMainItem.active() }"
-        class="mc-side-bar-center__content-item item"
-      >
-        <div class="item__head" :class="getMenuItemHeadClasses(menuMainItem)" @click="handlerSidebarItemClick">
-          <!-- TODO refactor info -->
-          <mc-side-bar-button
-            :info="
-              !(menuMainItem.menu && !!menuMainItem.menu.length)
-                ? menuMainItem.info || props.counts[menuMainItem.count_key] || null
-                : null
-            "
-            :href="menuMainItem.href"
-            :to="menuMainItem.to"
-            :icon="menuMainItem.icon"
-            :icon-color="menuMainItem.iconColor"
-            :title="menuMainItem.name"
-            :compact="compact"
-            :is-active="menuMainItem.active()"
-            :with-submenu="menuMainItem.menu && !!menuMainItem.menu.length"
-            :with-indicator="menuMainItem.indicator() && !menuMainItem.open"
-            with-tooltip
-            class="item__head-button--no-hover"
-          />
-          <mc-button
-            v-if="menuMainItem.menu && menuMainItem.menu.length && !compact"
-            :variation="menuMainItem.active() ? 'white-link' : 'gray-link'"
-            :size="ButtonSize.MCompact"
-            class="item__head-arrow"
-            :class="{
-              rotate: menuMainItem.active() ? menuMainItem.active() && menuMainItem.open : menuMainItem.open
-            }"
-            @click="menuMainItem.open = !menuMainItem.open"
-          >
-            <template #icon-prepend>
-              <mc-svg-icon name="arrow_forward" />
-            </template>
-          </mc-button>
-        </div>
-        <mc-slide-up-down
-          v-if="menuMainItem.menu && menuMainItem.menu.length"
-          class="item__submenu"
-          :active="menuMainItem.active() ? menuMainItem.active() && menuMainItem.open : menuMainItem.open"
-        >
-          <mc-side-bar-button
-            v-for="(menuItem, i) in menuMainItem.menu"
-            :key="i"
-            :info="counts[menuItem.count_key]"
-            :href="menuItem.href"
-            :to="menuItem.to"
-            :icon="menuItem.icon"
-            :icon-color="menuItem.iconColor"
-            :title="menuItem.name"
-            :compact="compact"
-            with-tooltip
-          />
-        </mc-slide-up-down>
-      </div>
-    </div>
-    <mc-separator
-      v-if="chatraConfig.title"
-      color="dark-gray"
-      indent-top="150"
-      indent-bottom="150"
-      :indent-left="compact ? '50' : '100'"
-      :indent-right="compact ? '50' : '100'"
-    />
-    <mc-side-bar-button
-      v-if="chatraConfig.title"
-      icon="chat_messages"
-      :title="chatraConfig.title"
-      :compact="compact"
-      with-tooltip
-      @click="emit('handlerChatraClick')"
-    />
-  </div>
-</template>
-
-<style lang="scss">
-@use '../../../../assets/styles/mixins' as *;
-@use '../../../../assets/tokens/spacings' as *;
-@use '../../../../assets/tokens/colors' as *;
-.mc-side-bar-center {
-  $block-name: &;
-  margin-bottom: $space-150;
-  &__title {
-    margin: $space-100;
-  }
-
-  &__content {
-    @include child-indent-bottom($space-50);
-    .item {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      @include child-indent-bottom($space-50);
-      &-active {
-        .item__head.active:not(.with-submenu),
-        .nuxt-link-exact-active {
-          pointer-events: none;
-        }
-      }
-      .with-submenu {
-        pointer-events: all !important;
-        .item__head {
-          &-button--no-hover {
-            .mc-button {
-              background: none;
-            }
-          }
-        }
-        .mc-side-bar-button {
-          &__tooltip {
-            width: calc(100% - #{$space-250});
-            .mc-button {
-              &__text {
-                margin-inline-end: $space-zero;
-              }
-            }
-          }
-        }
-      }
-      &__head {
-        display: flex;
-        align-items: center;
-        border-radius: 4px;
-
-        .mc-button {
-          &__background {
-            display: none;
-          }
-        }
-        &:hover {
-          background-color: rgba($color-gray, 0.1);
-        }
-        &-arrow {
-          &.rotate {
-            .mc-svg-icon {
-              transform: rotate(90deg);
-            }
-          }
-          .mc-svg-icon {
-            transition: all 0.3s ease;
-          }
-        }
-        &-button {
-          &--no-hover {
-            .mc-button {
-              &:hover {
-                background-color: unset;
-              }
-            }
-            .mc-side-bar-button__with-submenu {
-              background-color: unset;
-            }
-            &:hover {
-              background-color: unset;
-            }
-          }
-        }
-        &.active {
-          padding: 0;
-          border-radius: 4px;
-          border: none;
-          &.open {
-            background-color: unset;
-          }
-        }
-      }
-      &__submenu {
-        overflow: hidden;
-        transition: all 0.3s ease;
-        @include child-indent-bottom($space-50);
-        .mc-side-bar-button {
-          padding-inline-start: $space-500;
-          height: 42px;
-        }
-        &.open {
-          max-height: 230px;
-        }
-      }
-    }
-  }
-}
-</style>

package/src/components/patterns/McSideBar/McSideBarTop/McSideBarTop.stories.ts

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McSideBarTop from './McSideBarTop.vue'
-import { apps } from '@/mocks/sidebar'
-import { DropdownPositions, TitleVariations } from '@/enums'
-import iconsList from '@/mocks/icons.json'
-
-const meta = {
-    title: 'McSideBarTop',
-    component: McSideBarTop,
-    tags: ['autodocs'],
-    argTypes: {
-        menuApps: { control: 'object' },
-        logoTitle: { control: 'text' },
-        logoTitleVariation: { control: 'select', options: Object.values(TitleVariations) },
-        logoIcon: { control: 'select', options: Object.keys(iconsList) },
-        dropdownPosition: { control: 'select', options: Object.values(DropdownPositions) },
-        compact: { control: 'boolean' }
-    },
-    args: {
-        menuApps: apps,
-        logoTitle: 'Dashboard',
-        logoTitleVariation: TitleVariations.Subtitle,
-        logoIcon: 'mc_pay_app',
-        dropdownPosition: DropdownPositions.Left,
-        compact: false
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: '',
-        },
-    },
-} satisfies Meta<typeof McSideBarTop>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {}
-};