mediacube-ui-v2 0.0.5 → 0.0.7

package/src/components/elements/McNodata/McNoData.vue

@@ -1,191 +0,0 @@
-<script setup lang="ts">
-import McTitle from '@/components/elements/McTitle/McTitle.vue'
-import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
-import McButton from '@/components/elements/McButton/McButton.vue'
-import { computed, type PropType } from 'vue'
-import { HorizontalAlignment, TitleVariations, Weights } from '@/enums'
-import type { IconsListUnion } from '@/types'
-//@ts-ignore
-import noTableDataImg from '../../../assets/img/no_table_data.png'
-
-const emit = defineEmits<{
-  (e: 'click'): void
-}>()
-
-const props = defineProps({
-  img: {
-    type: String as PropType<string>,
-    default: noTableDataImg,
-  },
-  icon: {
-    type: String as () => IconsListUnion,
-    default: null
-  },
-  title: {
-    type: String as PropType<string>,
-    default: ''
-  },
-  text: {
-    type: String as PropType<string>,
-    default: ''
-  },
-  href: {
-    type: String as PropType<string>,
-    default: ''
-  },
-  btnName: {
-    type: String as PropType<string>,
-    default: ''
-  },
-  noAction: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  loading: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   * Вариант блока
-   * small - стандартный, небольшие отступы
-   * large - большие отступы (напр. для табов в админке) + немного меняются дефолтные шрифты тайтла
-   * */
-  variation: {
-    type: String as PropType<'small' | 'large'>,
-    default: 'small'
-  }
-})
-
-const btnAttrs = computed((): { [key: string]: boolean | string } => {
-  return {
-    class: 'mt-200',
-    loading: props.loading,
-    ...(props.href ? { href: props.href } : {})
-  }
-})
-
-const btnListeners = computed((): { [key: string]: Function } => {
-  return !props.href
-    ? {
-        click: () => handleClick()
-      }
-    : {}
-})
-
-const titleExtraProps = computed((): { [key: string]: string } => {
-  return props.variation === 'large'
-    ? {
-        variation: TitleVariations.Subtitle,
-        weight: Weights.SemiBold
-      }
-    : {}
-})
-
-const classes = computed((): { [key: string]: boolean } => {
-  return {
-    'mc-no-data': true,
-    [`mc-no-data--variation-${props.variation}`]: !!props.variation
-  }
-})
-
-const handleClick = (): void => {
-  emit('click')
-}
-</script>
-
-<template>
-  <div class="mc-no-data__wrapper">
-    <section :class="classes">
-      <mc-svg-icon v-if="props.icon" :weight="0.5" :name="props.icon" size="1000" color="outline-gray" />
-      <img v-if="props.img" :src="props.img" alt="no_entity" />
-      <slot v-if="title || $slots.title" name="title">
-        <mc-title
-          v-if="props.title"
-          v-bind="titleExtraProps"
-          color="gray"
-          :text-align="HorizontalAlignment.Center"
-          :html-data="props.title"
-        />
-      </slot>
-      <div v-if="text || $slots.text" class="mc-no-data__text">
-        <slot name="text">
-          <mc-title
-            color="gray"
-            :variation="TitleVariations.Article"
-            :text-align="HorizontalAlignment.Center"
-            :html-data="text"
-          />
-        </slot>
-      </div>
-      <div v-if="(btnName && !noAction) || $slots.action" class="mc-no-data__actions">
-        <slot name="action">
-          <mc-button v-bind="btnAttrs" v-on="btnListeners">
-            {{ btnName }}
-          </mc-button>
-        </slot>
-      </div>
-    </section>
-  </div>
-</template>
-
-<style lang="scss">
-@use '../../../assets/styles/mixins' as *;
-@use '../../../assets/tokens/spacings' as *;
-@use '../../../assets/tokens/sizes' as *;
-@use '../../../assets/tokens/colors' as *;
-@use '../../../assets/tokens/media-queries' as *;
-.mc-no-data {
-  min-width: 100px;
-  max-width: 100%;
-  padding: 0 $space-200;
-  width: 98%;
-  text-align: center;
-  @include child-indent-bottom($space-100);
-
-  img {
-    max-width: $size-1000;
-    width: 100%;
-    min-width: 0;
-    margin-bottom: $space-150 !important;
-    user-select: none;
-  }
-
-  &__text {
-    a {
-      color: $color-purple;
-      text-decoration: none;
-    }
-  }
-
-  &__wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    flex-grow: 1;
-    padding: $space-200;
-    width: 100%;
-    height: 100%;
-    @include align(true, true, absolute);
-
-    @media #{$media-query-l} {
-      padding: $space-300 $space-300 $space-400;
-    }
-    .mc-no-data {
-      position: static;
-      transform: none;
-    }
-  }
-
-  &__actions {
-    margin-top: $space-200;
-  }
-
-  &--variation {
-    &-large {
-      padding: $space-400;
-      @include child-indent-bottom($space-150);
-    }
-  }
-}
-</style>

package/src/components/elements/McNotification/McNotification.stories.ts

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import { fn } from '@storybook/test'
-import McNotification from '@/components/elements/McNotification/McNotification.vue'
-import { Colors, type ColorTypes } from '@/types/styles/Colors'
-import iconsList from '@/mocks/icons.json'
-import type { IconsListUnion } from '@/types/styles/Icons'
-
-const meta = {
-    title: 'McNotification',
-    component: McNotification,
-    tags: ['autodocs'],
-    argTypes: {
-        variation: { control: 'select', options: Object.keys(Colors) },
-        iconName: { control: 'select', options: Object.keys(iconsList) },
-        iconVisible: { control: 'boolean' },
-        buttonVisible: { control: 'boolean' },
-        title: { control: 'text' },
-        content: { control: 'text' },
-    },
-    args: {
-        variation: 'purple' as ColorTypes,
-        title: 'Notification title',
-        content: 'Notification content',
-        buttonText: 'Action',
-        buttonVisible: true,
-        iconVisible: true,
-        iconName: 'info' as IconsListUnion,
-        onClick: fn(() => alert('click'))
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=450%3A2514',
-        },
-    },
-} satisfies Meta<typeof McNotification>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {},
-};

package/src/components/elements/McNotification/McNotification.vue

@@ -1,219 +0,0 @@
-<script setup lang="ts">
-import McTitle from '@/components/elements/McTitle/McTitle.vue'
-import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
-import McButton from '@/components/elements/McButton/McButton.vue'
-import McPreview from '@/components/patterns/McPreview/McPreview.vue'
-import { computed, type PropType } from 'vue'
-import { Colors, type ColorTypes } from '@/types/styles/Colors'
-import type { IconsListUnion } from '@/types/styles/Icons'
-import { Weights } from '@/enums/ui/Weights'
-
-
-const emit = defineEmits(['click'])
-const props = defineProps({
-  /**
-   * Дизайн:
-   * purple, red, orange и т.д.
-   */
-  variation: {
-    type: String as () => ColorTypes,
-    default: 'purple' as ColorTypes,
-  },
-  /**
-   * Заголовок блока
-   */
-  title: {
-    type: String as PropType<string>,
-  },
-  /**
-   * Содержимое блока
-   */
-  content: {
-    type: String as PropType<string>,
-    default: null,
-  },
-  /**
-   * Отобразить кнопку внтури блока
-   */
-  buttonVisible: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-  /**
-   * Текст кнопки
-   */
-  buttonText: {
-    type: String as PropType<string>,
-    default: '',
-  },
-  /**
-   * Название иконки
-   */
-  iconName: {
-    type: String as () => IconsListUnion,
-    default: 'info' as IconsListUnion,
-  },
-  /**
-   * Отображать иконку
-   */
-  iconVisible: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
-})
-
-const styles = computed((): { [key: string]: string } => {
-  return {
-    '--mc-notification-color': Colors[props.variation],
-  }
-})
-
-const handleClick = (e: Event):void => {
-  /**
-   * Событие клика по кнопке
-   */
-  emit('click', e)
-}
-</script>
-
-<template>
-  <div class="mc-notification" :style="styles">
-    <div class="mc-notification__inner">
-      <mc-preview>
-        <template v-if="props.iconVisible && ($slots.left || props.iconName)" #left>
-          <!-- @slot Слот для иконки -->
-          <slot name="left">
-            <mc-svg-icon :name="props.iconName" size="300" />
-          </slot>
-        </template>
-
-        <template v-if="$slots.header || props.title" #top>
-          <!-- @slot Слот заголовка -->
-          <slot name="header">
-            <mc-title
-              v-if="props.title"
-              :color="props.variation"
-              :weight="Weights.SemiBold"
-              class="mc-notification__title"
-            >
-              {{ props.title }}
-            </mc-title>
-          </slot>
-        </template>
-
-        <template v-if="props.content || $slots.default" #bottom>
-          <div class="mc-notification__text">
-            <!-- @slot Слот для контента -->
-            <slot>
-              <mc-title :color="props.variation">{{ props.content }}</mc-title>
-            </slot>
-          </div>
-        </template>
-
-        <template v-if="$slots.right || props.buttonVisible" #right>
-          <!-- @slot Слот для кнопок -->
-          <slot name="right">
-            <mc-button
-              v-if="props.buttonVisible"
-              :variation="props.variation"
-              class="mc-notification__button"
-              @click="handleClick"
-            >
-              {{ props.buttonText }}
-            </mc-button>
-          </slot>
-        </template>
-      </mc-preview>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@use '../../../assets/styles/mixins' as *;
-@use '../../../assets/tokens/colors' as *;
-@use '../../../assets/tokens/sizes' as *;
-@use '../../../assets/tokens/font-sizes' as *;
-@use '../../../assets/tokens/line-heights' as *;
-@use '../../../assets/tokens/spacings' as *;
-@use '../../../assets/tokens/media-queries' as *;
-@use '../../../assets/tokens/border-radius' as *;
-.mc-notification {
-  $block-name: &;
-  --mc-notification-color: #{$color-orange};
-  position: relative;
-  background-color: $color-white;
-  border-radius: $radius-150;
-  overflow: hidden;
-  &:before {
-    content: '';
-    @include position(absolute, 0 null null 0);
-    display: block;
-    height: 100%;
-    width: $size-50;
-    background-color: var(--mc-notification-color);
-  }
-
-  &__text {
-    font-size: $font-size-200;
-    line-height: $line-height-200;
-  }
-
-  #{$block-name}__text,
-  #{$block-name}__title {
-    filter: contrast(59%);
-  }
-
-  &__inner {
-    padding: $space-100 $space-150 $space-100 $space-200;
-    min-height: $size-700;
-    display: flex;
-    align-items: center;
-    position: relative;
-    color: var(--mc-notification-color);
-    &:before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      background-color: var(--mc-notification-color);
-      opacity: 0.1;
-    }
-
-    .mc-preview {
-      width: 100%;
-      z-index: 1;
-      &__top {
-        margin-bottom: $space-50;
-      }
-      &__left {
-        display: flex;
-        align-items: center;
-        margin-inline-end: $size-150;
-      }
-      &__right {
-        display: flex;
-        align-items: center;
-        margin-inline-start: auto;
-        padding-inline-start: $space-100;
-      }
-    }
-
-    @media #{$media-query-m-down} {
-      .mc-preview {
-        flex-wrap: wrap;
-
-        &__center {
-          flex: 1;
-        }
-        &__right {
-          width: 100%;
-          padding-top: $space-100;
-          padding-inline-start: $size-400 - 2;
-        }
-      }
-    }
-  }
-}
-</style>

package/src/components/elements/McProgress/McProgress.stories.ts

@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McProgress from '@/components/elements/McProgress/McProgress.vue'
-import { Colors, type ColorTypes } from '@/types/styles/Colors'
-
-const meta = {
-    title: 'McProgress',
-    component: McProgress,
-    tags: ['autodocs'],
-    argTypes: {
-        percent: { control: 'number' },
-        amount: { control: 'number' },
-        color: { control: 'select', options: Object.keys(Colors) },
-        helpTextColor: { control: 'select', options: Object.keys(Colors) },
-        helpText: { control: 'text' },
-        reverseHeaders: { control: 'boolean' },
-        monospaceNumbers: { control: 'boolean' },
-    },
-    args: {
-        percent: 30,
-        color: 'purple' as ColorTypes,
-        helpTextColor: 'pinkish' as ColorTypes,
-        helpText: 'Help text',
-        reverseHeaders: false,
-        monospaceNumbers: false,
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=88%3A0',
-        },
-    },
-} satisfies Meta<typeof McProgress>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {},
-};

package/src/components/elements/McProgress/McProgress.vue

@@ -1,194 +0,0 @@
-<script setup lang="ts">
-import { computed, type PropType } from 'vue'
-import { Colors, type ColorTypes } from '@/types/styles/Colors'
-import { useFieldErrors } from '@/composables/useFieldErrors'
-
-const props = defineProps({
-  /**
-   *  Процент
-   *
-   */
-  percent: {
-    type: Number as PropType<number>,
-    default: 0
-  },
-  /**
-   *  Число для отображения, если не укказано, используется процент
-   *
-   */
-  amount: {
-    type: [String, Number, Boolean] as PropType<string | number | boolean>,
-    default: null
-  },
-  /**
-   *  Цвет
-   *
-   */
-  color: {
-    type: String as () => ColorTypes,
-    default: 'dark-gray'
-  },
-  /**
-   *  Цвет текста
-   *
-   */
-  helpTextColor: {
-    type: String as () => ColorTypes,
-    default: 'gray'
-  },
-  /**
-   *  Вспомогательный текст
-   */
-  helpText: {
-    type: String as PropType<string>,
-    default: ''
-  },
-  /**
-   *  Ошибки
-   */
-  errors: {
-    type: Array as PropType<string[]>,
-    default: () => []
-  },
-  /**
-   *  Поменять местами подписи
-   */
-  reverseHeaders: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   *  Использовать моноширинный шрифт для percent и amount
-   */
-  monospaceNumbers: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  }
-})
-
-const fieldErrors = useFieldErrors(props.errors)
-const wrapperClasses = computed(() => ({
-  'mc-progress': true,
-  'mc-progress--error': fieldErrors.errorText.value
-}))
-const topClasses = computed(() => ({
-  'mc-progress__top': true,
-  'mc-progress__top--reverse-headers': props.reverseHeaders
-}))
-const percentClasses = computed(() => ({
-  'mc-progress__percent': true,
-  'mc-progress__percent--monospace': props.monospaceNumbers
-}))
-const lineClasses = computed(() => ({
-  'mc-progress__line': true
-}))
-const styles = computed((): { [key: string]: string } => {
-  return {
-    '--mc-progress-color': Colors[props.color]
-  }
-})
-const helpTextStyles = computed(() => {
-  return {
-    '--mc-progress-help-text-color': Colors[props.helpTextColor]
-  }
-})
-const lineStyles = computed(() => {
-  return {
-    width: `${fieldErrors.errorText.value ? 2 : Math.sign(props.percent) > 0 ? props.percent : 0}%`
-  }
-})
-const percentValue = computed(() => {
-  if (fieldErrors.errorText.value) return 0
-  return props.amount ?? `${props.percent}%`
-})
-</script>
-
-<template>
-  <div :class="wrapperClasses" :style="styles">
-    <div :class="topClasses">
-      <div :class="percentClasses">
-        {{ percentValue }}
-      </div>
-      <div v-if="props.helpText" class="mc-progress__help-text" :style="helpTextStyles">
-        {{ props.helpText }}
-      </div>
-    </div>
-    <div class="mc-progress__wrapper-line">
-      <div :class="lineClasses" :style="lineStyles"></div>
-    </div>
-    <div v-if="fieldErrors.errorText.value" class="mc-progress__errors-container">
-      {{ fieldErrors.errorText.value }}
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@use '../../../assets/tokens/border-radius' as *;
-@use '../../../assets/tokens/font-families' as *;
-@use '../../../assets/tokens/colors' as *;
-@use '../../../assets/tokens/line-heights' as *;
-@use '../../../assets/tokens/font-sizes' as *;
-@use '../../../assets/tokens/spacings' as *;
-@use '../../../assets/tokens/sizes' as *;
-.mc-progress {
-  $block-name: &;
-  --mc-progress-color: #{$color-dark-gray};
-  --mc-progress-help-text-color: #{$color-gray};
-  position: relative;
-  width: 100%;
-  font-family: $font-family-main;
-  line-height: $line-height-200;
-  font-size: $font-size-200;
-  &__percent {
-    flex-shrink: 0;
-    color: var(--mc-progress-color);
-    &--monospace {
-      font-feature-settings: 'tnum';
-      font-variant-numeric: tabular-nums;
-    }
-  }
-  &--error {
-    #{$block-name} {
-      &__percent {
-        color: $color-red;
-      }
-      &__line {
-        background-color: $color-red;
-      }
-    }
-  }
-
-  &__top {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: $space-100;
-    &--reverse-headers {
-      flex-direction: row-reverse;
-    }
-  }
-
-  &__help-text {
-    color: var(--mc-progress-help-text-color);
-  }
-
-  &__wrapper-line {
-    height: $size-100;
-    border-radius: $radius-100;
-    background-color: $color-hover-gray;
-    width: 100%;
-  }
-
-  &__line {
-    height: 100%;
-    border-radius: $radius-100;
-    max-width: 100%;
-    background-color: var(--mc-progress-color);
-  }
-
-  &__errors-container {
-    margin-top: $space-150;
-    color: $color-red;
-  }
-}
-</style>