mediacube-ui-v2 0.0.3 → 0.0.5

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

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

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

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

@@ -0,0 +1,40 @@
+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: {}
+};