mediacube-ui-v2 0.0.5 → 0.0.7

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

@@ -1,378 +0,0 @@
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, type PropType, provide, reactive, ref, watch } from 'vue'
-import McSideBarTop from '@/components/patterns/McSideBar/McSideBarTop/McSideBarTop.vue'
-import McSideBarCenter from '@/components/patterns/McSideBar/McSideBarCenter/McSideBarCenter.vue'
-import McSideBarBottom from '@/components/patterns/McSideBar/McSideBarBottom/McSideBarBottom.vue'
-import type {
-  IconsListUnion,
-  ISideBarApp,
-  ISideBarChatra,
-  ISideBarMenuItem,
-  ISidebarThemeConfig,
-  ISidebarThemeConfigProvide,
-  TitleVariationsUnion
-} from '@/types'
-import { defaultThemes } from '@/mocks/sidebar'
-import { SidebarTheme, TitleVariations } from '@/enums'
-
-const emit = defineEmits<{
-  (e: 'absolute-mode', value: boolean): void
-  (e: 'hidden-mode', value: boolean): void
-  (e: 'compact', value: boolean): void
-  (e: 'chatraClick'): void
-}>()
-const props = defineProps({
-  /**
-   *  Название сервиса
-   *
-   */
-  logoTitle: {
-    type: String as PropType<string>,
-    default: 'Dashboard'
-  },
-  /**
-   *  Размер текста названия сервиса
-   *
-   */
-  logoTitleVariation: {
-    type: String as () => TitleVariationsUnion,
-    default: TitleVariations.Subtitle
-  },
-  /**
-   *  Путь до изображения
-   *
-   */
-  logoSrc: {
-    type: String as PropType<string>,
-    default: ''
-  },
-  /**
-   *  Имя иконки
-   *  заголовка
-   */
-  logoIcon: {
-    type: String as () => IconsListUnion,
-    default: ''
-  },
-  /**
-   *  Заголовок
-   *  центрального блока
-   */
-  menuMainTitle: {
-    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: () => ({})
-  },
-  /**
-   *  Меню приложений
-   *
-   */
-  menuApps: {
-    type: Array as PropType<ISideBarApp[]>,
-    default: () => []
-  },
-  /**
-   *  Config чатры
-   *
-   */
-  chatraConfig: {
-    type: Object as PropType<ISideBarChatra>,
-    default: () => ({})
-  },
-  /**
-   *  Текст кнопки
-   *  сворачивания меню
-   */
-  hideText: {
-    type: String as PropType<string>,
-    default: ''
-  },
-  /**
-   *  Компактный вид
-   */
-  compact: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   * Цветовая схема
-   */
-  variable: {
-    type: String as PropType<SidebarTheme>,
-    default: SidebarTheme.Black
-  },
-  /**
-   * Ширина сайдбара
-   */
-  width: {
-    type: String as PropType<string>,
-    default: '216px'
-  },
-  /**
-   * Ширина компактного сайдбара
-   */
-  compactWidth: {
-    type: String as PropType<string>,
-    default: '56px'
-  },
-  /**
-   * Брейкпоинт после которого
-   * сайдбар становится абсолютным и появляется затемненный бэкдроп
-   */
-  absoluteBreakpoint: {
-    type: Number as PropType<number>,
-    default: null
-  },
-  /**
-   * Брейкпоинт после которого
-   * сайдбар полностью прячется
-   */
-  hiddenBreakpoint: {
-    type: Number as PropType<number>,
-    default: null
-  }
-})
-
-const is_hidden = ref<boolean>(false)
-const pretty_compact = ref<boolean>(props.compact)
-const has_compact_class = ref<boolean>(props.compact)
-const window_width = ref<number>(0)
-
-const sideBarClasses = computed((): { [key: string]: boolean } => {
-  return {
-    'mc-side-bar--compact': has_compact_class.value,
-    [currentThemeConfig.value.className]: true
-  }
-})
-
-const sideBarStyles = computed((): { [key: string]: string } => {
-  return {
-    overflow: `${is_hidden.value ? 'hidden' : 'visible'}`,
-    width: has_compact_class.value ? props.compactWidth : props.width
-  }
-})
-
-const wrapperStyles = computed((): { [key: string]: string | undefined } => {
-  const position =
-    hiddenMode.value && has_compact_class.value
-      ? {
-          position: 'absolute',
-          left: `-${props.compactWidth}`
-        }
-      : {}
-
-  let width = {
-    width: has_compact_class.value ? props.compactWidth : props.width
-  }
-  if (absoluteMode.value) {
-    width.width = props.compactWidth
-  }
-  if (hiddenMode.value) {
-    width.width = '0px'
-  }
-  return {
-    ...width,
-    ...position
-  }
-})
-
-const backdropClasses = computed((): { [key: string]: boolean } => {
-  return {
-    'mc-side-bar-wrapper__backdrop--full-width':
-      !has_compact_class.value && window_width.value < props.absoluteBreakpoint
-  }
-})
-
-const absoluteMode = computed((): boolean => {
-  return !!props.absoluteBreakpoint && window_width.value < props.absoluteBreakpoint
-})
-
-const hiddenMode = computed((): boolean => {
-  return !!props.hiddenBreakpoint && window_width.value < props.hiddenBreakpoint
-})
-
-const currentThemeConfig = computed((): ISidebarThemeConfig => {
-  return sidebarThemeConfig.value[props.variable] || sidebarThemeConfig.value[SidebarTheme.Black]
-})
-
-const sidebarThemeConfig = computed((): Record<SidebarTheme, ISidebarThemeConfig> => {
-  return {
-    black: defaultThemes.black,
-    white: defaultThemes.white
-  }
-})
-
-onMounted((): void => {
-  if (props.absoluteBreakpoint || (props.hiddenBreakpoint && window)) {
-    resize()
-    window.addEventListener('resize', resize)
-  }
-})
-
-onBeforeUnmount((): void => {
-  window.removeEventListener('resize', resize)
-})
-
-const handleToggleSize = (): void => {
-  has_compact_class.value = !has_compact_class.value
-  emit('compact', has_compact_class.value)
-}
-
-const openSideBar = (): void => {
-  has_compact_class.value = false
-  emit('compact', has_compact_class.value)
-}
-
-const resize = (): void => {
-  window_width.value = window.innerWidth
-}
-
-watch(
-  () => has_compact_class.value,
-  (value: boolean): void => {
-    if (value) {
-      setTimeout((): void => {
-        pretty_compact.value = value
-      }, 280)
-    } else {
-      pretty_compact.value = value
-    }
-    is_hidden.value = true
-    setTimeout((): void => {
-      is_hidden.value = false
-    }, 280)
-  }
-)
-
-watch(
-  () => props.compact,
-  (value: boolean): void => {
-    has_compact_class.value = value
-  }
-)
-
-watch(
-  () => absoluteMode.value,
-  (value: boolean): void => {
-    emit('absolute-mode', value)
-  },
-  { immediate: true }
-)
-
-watch(
-  () => hiddenMode.value,
-  (value: boolean): void => {
-    emit('hidden-mode', value)
-  },
-  { immediate: true }
-)
-
-provide('provideData', reactive<ISidebarThemeConfigProvide>({ currentThemeConfig: currentThemeConfig.value }))
-</script>
-
-<template>
-  <article ref="sidebar-wrapper" class="mc-side-bar-wrapper" :style="wrapperStyles">
-    <section class="mc-side-bar-wrapper__backdrop" :class="backdropClasses" @click.stop.prevent="handleToggleSize">
-      <div ref="sidebar" class="mc-side-bar" :class="sideBarClasses" :style="sideBarStyles" @click.stop>
-        <mc-side-bar-top
-          :logo-title="logoTitle"
-          :logo-title-variation="logoTitleVariation"
-          :logo-src="logoSrc"
-          :logo-icon="logoIcon"
-          :compact="pretty_compact"
-          :menu-apps="menuApps"
-        >
-          <template #title-append>
-            <slot name="title-append" />
-          </template>
-        </mc-side-bar-top>
-        <section class="mc-side-bar__scrollable-container">
-          <mc-side-bar-center
-            :title="menuMainTitle"
-            :menu-main="menuMain"
-            :counts="counts"
-            :chatra-config="chatraConfig"
-            :compact="pretty_compact"
-            @handlerChatraClick="emit('chatraClick')"
-            @open-side-bar="openSideBar"
-          />
-          <mc-side-bar-bottom
-            :hide-text="hideText"
-            :compact="pretty_compact"
-            :hidden-mode="hiddenMode"
-            :sidebar-width="width"
-            @toggle-size="handleToggleSize"
-          >
-            <template #bottom-message>
-              <slot name="bottom-message" />
-            </template>
-          </mc-side-bar-bottom>
-        </section>
-      </div>
-    </section>
-  </article>
-</template>
-
-<style lang="scss">
-@use '../../../assets/styles/mixins' as *;
-@use '../../../assets/tokens/spacings' as *;
-@use '../../../assets/tokens/colors' as *;
-.mc-side-bar {
-  $block-name: &;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  padding: $space-250 $space-100 $space-400;
-  transition: width 300ms ease;
-  overflow-x: hidden;
-  overflow-y: auto;
-  @include child-indent-bottom($space-400);
-  &--color-theme-black {
-    background-color: $color-black;
-  }
-  &--color-theme-white {
-    background-color: $color-white;
-    border-inline-end: 1px solid $color-hover-gray;
-  }
-  &__scrollable-container {
-    overflow-y: auto;
-    overflow-x: hidden;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    @include hide-scrollbar;
-  }
-  &-wrapper {
-    height: 100%;
-    transition: width 300ms ease;
-    &__backdrop {
-      position: absolute;
-      background-color: rgba($color-black, 0.6);
-      z-index: 25;
-      height: inherit;
-      .mc-side-bar {
-        height: inherit;
-      }
-      &--full-width {
-        width: 100%;
-      }
-    }
-  }
-}
-</style>

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

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McSideBarBottom from './McSideBarBottom.vue'
-
-const meta = {
-    title: 'McSideBarBottom',
-    component: McSideBarBottom,
-    tags: ['autodocs'],
-    argTypes: {
-        hideText: { control: 'text' },
-        compact: { control: 'boolean' },
-        hiddenMode: { control: 'boolean' },
-    },
-    args: {
-        hideText: 'Hide',
-        'bottom-message': 'bottom-message',
-        compact: false,
-        hiddenMode: false,
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: '',
-        },
-    },
-} satisfies Meta<typeof McSideBarBottom>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {}
-};

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

@@ -1,116 +0,0 @@
-<script setup lang="ts">
-import McSideBarButton from '@/components/patterns/McSideBar/McSideBarButton/McSideBarButton.vue'
-import { computed, inject, type PropType } from 'vue'
-import type { ButtonVariationUnion, ColorTypes, ISidebarThemeConfigProvide } from '@/types'
-import { defaultThemes } from '@/mocks/sidebar'
-import { SidebarTheme } from '@/enums'
-
-const provideData = inject<ISidebarThemeConfigProvide>('provideData', {} as ISidebarThemeConfigProvide)
-const emit = defineEmits<{
-  (e: 'toggle-size', value: boolean): void
-}>()
-const props = defineProps({
-  /**
-   *  Текст кнопки
-   *  сворачивания меню
-   */
-  hideText: {
-    type: String as PropType<string>,
-    default: ''
-  },
-  /**
-   *  Компактный вид
-   */
-  compact: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  hiddenMode: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  sidebarWidth: {
-    type: String as PropType<string>,
-    default: null
-  }
-})
-
-const themeConfig = computed(() => {
-  return provideData.currentThemeConfig || defaultThemes[SidebarTheme.Black]
-})
-
-const closeButtonProps = computed((): { variable: ButtonVariationUnion; secondaryColor: ColorTypes } => {
-  return themeConfig.value?.closeButton
-})
-
-const classes = computed((): { [key: string]: boolean } => {
-  return {
-    'mc-side-bar-bottom--compact': props.compact
-  }
-})
-
-const messageStyles = computed((): { [key: string]: string } => {
-  return {
-    minWidth: props.sidebarWidth
-  }
-})
-
-const handleClick = (): void => {
-  emit('toggle-size', !props.compact)
-}
-</script>
-
-<template>
-  <div class="mc-side-bar-bottom" :class="classes">
-    <div v-if="!compact && $slots['bottom-message']" class="mc-side-bar-bottom__slot-message" :style="messageStyles">
-      <slot name="bottom-message" />
-    </div>
-    <mc-side-bar-button
-      v-if="!hiddenMode"
-      class="mc-side-bar-bottom__hide-button"
-      icon="arrow_backward"
-      :title="hideText"
-      :compact="compact"
-      :variation="closeButtonProps.variable"
-      :secondary-color="closeButtonProps.secondaryColor"
-      @click.stop.prevent="handleClick"
-    />
-  </div>
-</template>
-
-<style lang="scss">
-@use '../../../../assets/tokens/durations' as *;
-@use '../../../../assets/tokens/spacings' as *;
-.mc-side-bar-bottom {
-  $block-name: &;
-
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  justify-content: flex-end;
-  min-height: max-content;
-
-  &__hide-button {
-    .mc-side-bar-button__icon {
-      transition: transform $duration-s;
-    }
-  }
-
-  &--compact {
-    #{$block-name}__hide-button {
-      .mc-side-bar-button__icon {
-        transform: rotate(180deg);
-      }
-    }
-  }
-  &__slot-message {
-    margin-inline-start: -$space-100;
-    margin-inline-end: -$space-100;
-    padding-inline-start: $space-100;
-    padding-inline-end: $space-100;
-    & + * {
-      margin-top: $space-500;
-    }
-  }
-}
-</style>

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

@@ -1,23 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McSideBarButton from './McSideBarButton.vue'
-
-const meta = {
-    title: 'McSideBarButton',
-    component: McSideBarButton,
-    tags: ['autodocs'],
-    argTypes: {},
-    args: {},
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: '',
-        },
-    },
-} satisfies Meta<typeof McSideBarButton>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {}
-};