mediacube-ui-v2 0.0.2 → 0.0.4

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

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

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

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

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

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

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