mediacube-ui-v2 0.0.5 → 0.0.7

package/src/components/templates/McTable/McTableCard/McTableCard.stories.ts

@@ -1,94 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McTableCard from '@/components/templates/McTable/McTableCard/McTableCard.vue'
-import McTableCardHeader from '@/components/templates/McTable/McTableCard/McTableCardHeader/McTableCardHeader.vue'
-import McButton from '@/components/elements/McButton/McButton.vue'
-import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
-import McTitle from '@/components/elements/McTitle/McTitle.vue'
-
-const meta = {
-  title: 'McTableCard',
-  component: McTableCard,
-  tags: ['autodocs'],
-  argTypes: {},
-  args: {},
-  parameters: {
-    componentSubtitle: 'Status: Ready',
-    design: {
-      type: 'figma',
-      url: ''
-    }
-  }
-} satisfies Meta<typeof McTableCard>
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render() {
-    return {
-      components: {
-        McTableCard,
-        McTableCardHeader,
-        McButton,
-        McSvgIcon,
-        McTitle
-      },
-      data() {
-        return {}
-      },
-      computed: {},
-      methods: {
-        showChat() {
-          console.log('showChat')
-        }
-      },
-      template: `
-        <div style="height: 500px">
-          <mc-table-card :ml="ml" footer-blur>
-            <template #header>
-              <mc-table-card-header button-back-text="Back to list">
-                <template #right>
-                  <mc-button variation="purple-link" size="xs">
-                    Add channel
-                    <template #icon-append>
-                      <mc-svg-icon name="add" />
-                    </template>
-                  </mc-button>
-                  <mc-button variation="purple-link" size="xs">
-                    Amount
-                    <template #icon-append>
-                      <mc-svg-icon name="edit_solid" />
-                    </template>
-                  </mc-button>
-                  <mc-button variation="purple-link" size="xs" @click.prevent="showChat">
-                    Chat
-                    <template #icon-append>
-                      <mc-svg-icon name="chat" />
-                    </template>
-                  </mc-button>
-                </template>
-              </mc-table-card-header>
-            </template>
-            <mc-title v-for="num in 3" class="mb-200" :key="num">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consectetur magnam possimus rerum!
-              Cupiditate delectus dolor earum eos eum id inventore, itaque, labore molestiae nobis nulla odio perspiciatis
-              quidem quisquam repudiandae sint temporibus veritatis. Distinctio illo iusto voluptas! Adipisci animi aut cum
-              eius error esse ex hic impedit itaque labore laboriosam natus neque nisi odio porro qui quisquam repellat
-              repellendus, saepe suscipit! At delectus deserunt dicta distinctio modi pariatur perspiciatis quos sed velit
-              voluptates? Ab aliquam assumenda corporis dicta incidunt nihil obcaecati quibusdam quidem? Ad amet at consequuntur
-              cupiditate dolorem, doloribus eaque eius, enim est eum eveniet ex facilis incidunt ipsum minima modi molestias
-              mollitia, provident quae quam repellat reprehenderit sequi similique suscipit tenetur ullam vero voluptates!
-              Dolore est excepturi laboriosam magnam, odit pariatur. Aliquid animi architecto autem consectetur corporis
-              debitis distinctio dolor eius eum exercitationem explicabo id incidunt inventore libero maiores, modi mollitia
-              nemo, nostrum numquam quis quod tempora ut veritatis?
-            </mc-title>
-            <template #footer>
-              <mc-button>Apply</mc-button>
-              <mc-button variation="red-invert">Block</mc-button>
-              <mc-button disabled>Disabled button</mc-button>
-            </template>
-          </mc-table-card>
-        </div>
-      `
-    }
-  }
-}

package/src/components/templates/McTable/McTableCard/McTableCard.vue

@@ -1,239 +0,0 @@
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, type PropType, ref, useSlots, watch } from 'vue'
-import {
-  type ITableColumn,
-  type ITableColumnWidth,
-  type ITableData,
-  type ITableSort,
-  type ITableTotals,
-  type TableCardState
-} from '@/types/ITable'
-import { TABLE } from '@/consts/table'
-import { useHelper } from '@/composables'
-
-const slots = useSlots()
-const emit = defineEmits<{
-  (e: 'set-table-card-state', value: TableCardState): void
-  (e: 'card-id-updated', value: TableCardState): void
-}>()
-
-/**
- * Если карточка исползуется как отдельная страница!
- *  1. Если карточка используется как рутовый узел страницы, то компонент McTableCard, автоматически получит все пропсы от таблицы
- *  2. Если карточка используется НЕ как рутовый узел, нужно принять в компоненте все пропсы как в карточке, и передать их в компонент McTableCard
- *
- *  При использовании как описано в п1. Автоматически получит все пропсы от таблицы, так же будут доступны через slot-scope в дефолтном слоте.
- * */
-const props = defineProps({
-  /**
-   * Обязательно что бы таблица правильно подсвечивала выбранную строку. Проверка будет по полю id
-   * Если карточка используется как рутовый узел страницы, будет автоматически приходить router.params.id
-   * */
-  id: {
-    type: [String, Number] as PropType<string | number>
-  },
-  tableColumns: {
-    type: Array as PropType<ITableColumnWidth[]>,
-    default: () => []
-  },
-  tableData: {
-    type: Array as PropType<ITableData>,
-    default: () => []
-  },
-  tableTotals: {
-    type: Object as PropType<ITableTotals<ITableColumn>>,
-    default: () => ({})
-  },
-  tableSort: {
-    type: Object as PropType<ITableSort>,
-    default: () => ({})
-  },
-  tableFixedFirstColumn: {
-    type: Boolean as PropType<boolean>,
-    default: true
-  },
-  tableHeaderRowHeight: {
-    type: Number as PropType<number>,
-    default: TABLE.defaultHeaderHeight
-  },
-  tableFooterRowHeight: {
-    type: Number as PropType<number>,
-    default: TABLE.defaultFooterRowHeight
-  },
-  tableCardProps: {
-    type: Object as PropType<Record<any, any>>,
-    default: () => ({})
-  },
-  footerBlur: {
-    type: Boolean,
-    default: false
-  }
-})
-
-const helper = useHelper()
-
-const tableFirstColWidth = computed((): number => {
-  const [first] = props.tableColumns
-  return first?.width ? first.width : TABLE.defaultTableFirstColWidth
-})
-
-const bodyEl = ref<HTMLElement | null>(null)
-const body_scrolled_to_bottom = ref(true)
-
-const computedFooterClasses = computed((): { [key: string]: boolean } => {
-  return {
-    'mc-table-card__footer': !!slots.footer,
-    'mc-table-card__footer--with-blur': props.footerBlur && !body_scrolled_to_bottom.value
-  }
-})
-
-const cardStyle = computed((): { [key: string]: string } => {
-  const borderCompensations = -1
-  return {
-    '--table-card-header-height': helper.isNumber(props.tableHeaderRowHeight)
-      ? `${props.tableHeaderRowHeight + borderCompensations}px`
-      : `${TABLE.defaultHeaderHeight}px`,
-    '--table-card-footer-height': helper.isNumber(props.tableFooterRowHeight)
-      ? `${props.tableFooterRowHeight + borderCompensations}px`
-      : `${TABLE.defaultFooterRowHeight}px`,
-    marginLeft: `${tableFirstColWidth.value}px`
-  }
-})
-
-const initBlur = () => {
-  try {
-    body_scrolled_to_bottom.value = false
-    bodyEl.value && bodyEl.value.addEventListener('scroll', handlerScroll)
-  } catch (e) {
-    console.error(e)
-  }
-}
-
-const handlerScroll = () => {
-  try {
-    if (bodyEl.value) {
-      const { offsetHeight, scrollTop, scrollHeight } = bodyEl.value
-      body_scrolled_to_bottom.value = offsetHeight + scrollTop === scrollHeight
-    }
-  } catch (e) {
-    body_scrolled_to_bottom.value = true
-    console.error(e)
-  }
-}
-
-const handleEmitTableCardState = (payload: TableCardState) => {
-  emit('set-table-card-state', payload)
-}
-
-onMounted(() => {
-  if (props.footerBlur) {
-    initBlur()
-  }
-  handleEmitTableCardState({ state: true, id: props.id })
-})
-
-onBeforeUnmount(() => {
-  bodyEl.value && bodyEl.value.removeEventListener('scroll', handlerScroll)
-  handleEmitTableCardState({ state: false })
-})
-
-watch(
-  () => props.footerBlur,
-  (val) => {
-    if (val) {
-      initBlur()
-    } else {
-      bodyEl.value && bodyEl.value.removeEventListener('scroll', handlerScroll)
-    }
-  }
-)
-watch(
-  () => props.id,
-  (id) => {
-    const state: TableCardState = { state: true, id }
-    handleEmitTableCardState(state)
-    emit('card-id-updated', state)
-  }
-)
-</script>
-
-<template>
-  <div class="mc-table-card" :style="cardStyle">
-    <div v-if="$slots.header" class="mc-table-card__header">
-      <!-- @slot Слот заголовка -->
-      <slot name="header" />
-    </div>
-    <div ref="bodyEl" class="mc-table-card__body">
-      <!-- @slot Слот контента -->
-      <slot v-bind="props" />
-    </div>
-    <div v-if="$slots.footer || footerBlur" :class="computedFooterClasses">
-      <!-- @slot Слот футера -->
-      <slot name="footer" />
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@use '../../../../assets/styles/mixins' as *;
-@use '../../../../assets/tokens/colors' as *;
-@use '../../../../assets/tokens/spacings' as *;
-@use '../../../../assets/tokens/sizes' as *;
-@use '../../../../assets/tokens/z-indexes' as *;
-.mc-table-card {
-  $block-name: &;
-
-  --table-card-header-height: $size-500;
-  --table-card-footer-height: $size-500;
-  @include position(absolute, 0);
-  z-index: $z-index-overlay;
-  background-color: $color-white;
-  border-inline-start: 1px solid $color-hover-gray;
-  display: flex;
-  flex-direction: column;
-  @include custom-scroll();
-
-  &__header {
-    height: var(--table-card-header-height);
-    border-bottom: 1px solid $color-hover-gray;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-  }
-
-  &__body {
-    position: relative;
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    overflow-y: auto;
-  }
-
-  &__footer {
-    border-top: 1px solid $color-hover-gray;
-    height: var(--table-card-footer-height);
-    flex-shrink: 0;
-    padding: 0 $space-200;
-    display: flex;
-    align-items: center;
-    @include child-indent-right($space-150);
-    &:empty {
-      display: none;
-    }
-    &--with-blur {
-      position: relative;
-      &::after {
-        @include pseudo;
-        height: $space-900;
-        background: linear-gradient(to top, $color-white, transparent);
-        position: absolute;
-        width: 100%;
-        inset-inline-start: 0;
-        bottom: 100%;
-        pointer-events: none;
-      }
-    }
-  }
-}
-</style>

package/src/components/templates/McTable/McTableCard/McTableCardHeader/McTableCardHeader.vue

@@ -1,74 +0,0 @@
-<script setup lang="ts">
-import McButton from '@/components/elements/McButton/McButton.vue'
-import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
-import { ButtonSize } from '@/enums'
-import type { PropType } from 'vue'
-
-const props = defineProps({
-  buttonBackText: {
-    type: String as PropType<string>,
-    default: 'Back'
-  },
-  backTo: {
-    type: String as PropType<string>,
-    default: null
-  }
-})
-</script>
-
-<template>
-  <section class="mc-table-card-header">
-    <div class="mc-table-card-header__left">
-      <!-- @slot Слот контента -->
-      <slot>
-        <mc-button :to="props.backTo" exact variation="purple-link" :size="ButtonSize.Xs">
-          <template #icon-prepend>
-            <mc-svg-icon name="arrow_backward" />
-          </template>
-          {{ props.buttonBackText }}
-        </mc-button>
-      </slot>
-    </div>
-    <div class="mc-table-card-header__right">
-      <!-- @slot right -->
-      <slot name="right" />
-    </div>
-  </section>
-</template>
-
-<style lang="scss">
-@use '../../../../../assets/styles/mixins' as *;
-@use '../../../../../assets/tokens/colors' as *;
-@use '../../../../../assets/tokens/spacings' as *;
-.mc-table-card-header {
-  $block-name: &;
-
-  display: flex;
-  flex-wrap: nowrap;
-  background-color: $color-white;
-  padding: 0;
-  padding-inline: $space-150 $space-200;
-  align-items: center;
-  height: 100%;
-
-  &__left,
-  &__right {
-    @include layout-flex-fix();
-    display: flex;
-    flex-wrap: nowrap;
-    @include child-indent-right($space-200);
-
-    &:empty {
-      display: none;
-    }
-  }
-
-  &__left {
-    margin-inline-end: auto;
-  }
-
-  &__right {
-    margin-inline-start: auto;
-  }
-}
-</style>

package/src/components/templates/McTable/McTableSkeletonLoading/McTableSkeletonLoading.vue

@@ -1,155 +0,0 @@
-<script setup lang="ts">
-import { computed, type PropType } from 'vue'
-import type { ITableColumnEnriched } from '@/types'
-
-const props = defineProps({
-  columns: {
-    type: Array as PropType<ITableColumnEnriched[]>,
-    required: true,
-    default: () => [] as ITableColumnEnriched[]
-  }
-})
-
-const firstColsWidth = computed(() => {
-  const [firstColumn] = props.columns
-  return firstColumn.width
-})
-</script>
-
-<template>
-  <section class="mc-table-skeleton-loading skeleton-load-wrapper">
-    <div
-      v-for="(column, i) in props.columns"
-      :style="column.style"
-      class="mc-table-skeleton-loading__col"
-      :key="`skeleton-col__${i}`"
-    >
-      <div v-for="(cell, cellI) in 36" :key="`skeleton-cell-${cellI}`" class="mc-table-skeleton-loading__cell">
-        <div v-if="!cellI" class="mc-table-skeleton-loading__loader mc-table-skeleton-loading__loader--more-height">
-          <div class="mc-table-skeleton-loading__loader_line"></div>
-        </div>
-        <div v-if="!i" class="mc-table-skeleton-loading__loader" :style="{ minWidth: `${firstColsWidth}px` }">
-          <div class="mc-table-skeleton-loading__loader_avatar"></div>
-          <div class="mc-table-skeleton-loading__loader_preview-content">
-            <div class="mc-table-skeleton-loading__loader_line"></div>
-            <div class="mc-table-skeleton-loading__loader_line"></div>
-          </div>
-        </div>
-        <div v-else class="mc-table-skeleton-loading__loader">
-          <div class="mc-table-skeleton-loading__loader_line"></div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style lang="scss">
-@use '../../../../assets/styles/mixins' as *;
-@use '../../../../assets/tokens/z-indexes' as *;
-@use '../../../../assets/tokens/colors' as *;
-@use '../../../../assets/tokens/spacings' as *;
-@use '../../../../assets/tokens/sizes' as *;
-@mixin gradient() {
-  background: $color-hover-gray;
-  background-image: -webkit-gradient(
-    linear,
-    left center,
-    right center,
-    from($color-hover-gray),
-    color-stop(0.2, rgba($color-white, 0.5)),
-    color-stop(0.4, $color-hover-gray),
-    to($color-hover-gray)
-  );
-  background-image: -webkit-linear-gradient(
-    left,
-    $color-hover-gray 0%,
-    rgba($color-white, 0.5) 20%,
-    $color-hover-gray 40%,
-    $color-hover-gray 100%
-  );
-  background-repeat: no-repeat;
-  background-size: 800px 100%;
-  animation: placeHolderShimmer 1s linear infinite forwards;
-  border-radius: 10px;
-  > * {
-    background: transparent;
-    position: relative;
-    margin: 0 auto;
-    width: 100%;
-    overflow: hidden;
-    &:after {
-      content: '';
-      position: absolute;
-      border: 500px solid $color-white;
-      width: 100%;
-    }
-  }
-}
-
-.mc-table-skeleton-loading {
-  display: flex;
-  overflow: hidden;
-  max-width: 100%;
-  width: 100%;
-  position: absolute;
-  height: 100%;
-  z-index: $z-index-overlay;
-  background-color: $color-white;
-  user-select: none;
-  //margin-top: calc(var(--mc-table-header-row-height) * -1);
-  &__col {
-    width: var(--mc-table-cell-width);
-    max-width: var(--mc-table-cell-max-width);
-    min-width: var(--mc-table-cell-min-width);
-  }
-  &__cell {
-    height: var(--mc-table-row-height);
-  }
-  &__loader {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    height: $space-500;
-    padding: $space-100 $space-200;
-    &_avatar {
-      display: block;
-      float: left;
-      position: relative;
-      height: $size-300;
-      width: $size-300;
-      min-width: $size-300;
-      margin-inline-end: $space-50;
-      @include gradient();
-    }
-    &_preview-content {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      @include child-indent-bottom($space-50);
-    }
-    &_line {
-      display: block;
-      position: relative;
-      height: $size-100;
-      width: 100%;
-      @include gradient();
-    }
-    &--more-height {
-      .line {
-        height: $size-150;
-        width: 75%;
-        min-width: 150px;
-      }
-    }
-
-    @keyframes placeHolderShimmer {
-      0% {
-        background-position: -468px 0;
-      }
-      100% {
-        background-position: 468px 0;
-      }
-    }
-  }
-}
-</style>

package/src/components/templates/McTable/McTableSort/McTableSort.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
-import { computed, type PropType } from 'vue'
-import type { ITableSort, ITableSortState } from '@/types/ITable'
-
-const emit = defineEmits<{
-  (e: 'change', value: ITableSort): void
-}>()
-
-const props = defineProps({
-  sort: {
-    type: Object as PropType<ITableSort>,
-    default: () => ({})
-  },
-  column: {
-    type: String as PropType<string>,
-    default: null
-  }
-})
-
-const isActive = computed((): boolean => {
-  return props.column === props.sort.sort_column
-})
-
-const sortState = computed((): ITableSortState => {
-  switch (true) {
-    case props.sort.sort_direction === 'asc' && isActive.value:
-      return {
-        direction: 'asc',
-        next_direction: 'desc',
-        icon: 'arrow_downward'
-      }
-    case props.sort.sort_direction === 'desc' && isActive.value:
-      return {
-        direction: 'desc',
-        next_direction: 'asc',
-        icon: 'arrow_upward'
-      }
-    default:
-      return {
-        direction: null,
-        next_direction: 'asc',
-        icon: 'arrow_up_down'
-      }
-  }
-})
-
-const handleSortChange = () => {
-  emit('change', {
-    sort_column: props.column,
-    sort_direction: sortState.value.next_direction
-  })
-}
-</script>
-
-<template>
-  <div class="mc-table-sort" @click="handleSortChange">
-    <mc-svg-icon size="200" :name="sortState.icon" :color="isActive ? 'black' : 'gray'" />
-  </div>
-</template>
-
-<style lang="scss">
-.mc-table-sort {
-  cursor: pointer;
-}
-</style>

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

@@ -1,68 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McTopBar from '@/components/templates/McTopBar/McTopBar.vue'
-import McButton from '@/components/elements/McButton/McButton.vue'
-import McTitle from '@/components/elements/McTitle/McTitle.vue'
-import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
-import { authUser } from '@/mocks/authUser'
-import { menuLangs } from '@/mocks/menuLangs'
-
-const meta = {
-  title: 'McTopBar',
-  component: McTopBar,
-  tags: ['autodocs'],
-  argTypes: {},
-  args: {},
-  parameters: {
-    componentSubtitle: 'Status: Ready',
-    design: {
-      type: 'figma',
-      url: ''
-    }
-  }
-} satisfies Meta<typeof McTopBar>
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render() {
-    return {
-      components: {
-        McTopBar,
-        McButton,
-        McTitle,
-        McSvgIcon,
-      },
-      data() {
-        return {}
-      },
-      computed: {
-        authUser() {
-          return authUser
-        },
-        menuLangs() {
-          return menuLangs
-        },
-      },
-      methods: {
-      },
-      template: `
-        <div style="height: 500px">
-          <mc-top-bar :user="authUser" :menu-langs="menuLangs">
-            <template #left>
-              <mc-title variation="subtitle" max-width="auto">Left Section Title</mc-title>
-              <mc-button size="xs-compact" rounded variation="black-flat">
-                <template #icon-prepend>
-                  <mc-svg-icon name="add" />
-                </template>
-              </mc-button>
-            </template>
-
-            <template #right>
-              <mc-svg-icon name="search" />
-            </template>
-          </mc-top-bar>
-        </div>
-      `
-    }
-  }
-}