mediacube-ui-v2 0.0.4 → 0.0.6

package/src/components/elements/McAvatar/McAvatar.vue

@@ -1,253 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { AvatarSizes, type AvatarSizeTypes } from '@/types/styles/AvatarSizes'
-import { Colors, type ColorTypes } from '@/types/styles/Colors'
-import { Sizes } from '@/types/styles/Sizes'
-import { Radiuses } from '@/types'
-
-const defaultImage = '/no_user.png'
-
-const props = defineProps({
-  /**
-   *  Путь до изображения
-   *
-   */
-  src: {
-    type: String,
-    // eslint-disable-next-line vue/valid-define-props
-    default: defaultImage
-  },
-  /**
-   *  Отложенная подгрузка
-   *
-   */
-  lazy: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   *  Атрибут alt
-   */
-  alt: {
-    type: String,
-    default: ''
-  },
-  /**
-   *  Размеры
-   */
-  size: {
-    type: String as () => AvatarSizeTypes,
-    default: '300'
-  },
-  /**
-   *  Круглый
-   *
-   */
-  rounded: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   *  Цвет рамки
-   *
-   */
-  borderColor: {
-    type: String as () => ColorTypes,
-    default: ''
-  },
-  /**
-   *  Цвет точки
-   *
-   */
-  dotColor: {
-    type: String as () => ColorTypes,
-    default: ''
-  },
-  /**
-   *  Цвет точки
-   *
-   */
-  shadow: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   *  Перетаскивание изображения
-   *
-   */
-  draggable: {
-    type: Boolean,
-    default: true
-  }
-})
-
-const style = ref<{ [key: string]: string }>({})
-const wrapperStyle = ref<{ [key: string]: string }>({})
-const hasStatus = computed((): boolean => !!props.borderColor || !!props.dotColor)
-
-const classes = computed((): { [key: string]: boolean } => ({
-  'mc-avatar': true,
-  'mc-avatar--rounded': props.rounded,
-  'mc-avatar--bordered': !!props.borderColor,
-  'mc-avatar--shadow': props.shadow && !hasStatus.value,
-  [`mc-avatar--size-${props.size}`]: !!props.size
-}))
-
-const wrapperClasses = computed((): { [key: string]: boolean } => {
-  return {
-    'mc-avatar__wrapper': true,
-    'mc-avatar__wrapper-status--shadow': !!props.shadow,
-    [`mc-avatar__wrapper-status--size-${props.size}`]: !!props.size,
-    'mc-avatar__wrapper--has-dot': !!props.dotColor
-  }
-})
-
-watch(
-  () => props.dotColor,
-  () => {
-    if (hasStatus.value) {
-      if (props.dotColor) wrapperStyle.value['--mc-avatar-dot-color'] = Colors[props.dotColor]
-    }
-  },
-  { immediate: true }
-)
-
-watch(
-  () => props.borderColor,
-  () => {
-    if (hasStatus.value) {
-      if (props.borderColor) style.value['--mc-avatar-border-color'] = Colors[props.borderColor]
-    }
-  },
-  { immediate: true }
-)
-
-watch(
-  () => props.size,
-  () => {
-    if (props.size) {
-      style.value['--mc-avatar-avatar-size'] = AvatarSizes[props.size]
-      if (+props.size < 500) {
-        wrapperStyle.value['--mc-avatar-dot-size'] = Sizes['100']
-        style.value['--mc-avatar-avatar-radius'] = Radiuses['50']
-      }
-      switch (+props.size) {
-        case 500:
-        case 600: {
-          wrapperStyle.value['--mc-avatar-dot-size'] = Sizes['150']
-          break
-        }
-        case 700:
-        case 800:
-        case 900:
-        case 1000: {
-          wrapperStyle.value['--mc-avatar-dot-size'] = Sizes['200']
-          wrapperStyle.value['--mc-avatar-dot-border-width'] = '2px'
-          break
-        }
-      }
-    }
-  },
-  { immediate: true }
-)
-const handleOnError = (e: Event): void => {
-  if (!e.target) return
-  //@ts-ignore
-  e.target.src = defaultImage
-}
-</script>
-
-<template>
-  <div :class="wrapperClasses" :style="wrapperStyle">
-    <div :class="classes" :style="style">
-      <img
-        :src="props.src || defaultImage"
-        :alt="props.alt"
-        :draggable="props.draggable"
-        :lazy="props.lazy"
-        class="mc-avatar__img"
-        @onerror="handleOnError"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@use '../../../assets/styles/mixins' as *;
-@use '../../../assets/tokens/durations' as *;
-@use '../../../assets/tokens/colors' as *;
-@use '../../../assets/tokens/spacings' as *;
-@use '../../../assets/tokens/sizes' as *;
-@use '../../../assets/tokens/border-radius' as *;
-$color-borders: $token-colors;
-$dot-colors: $token-colors;
-
-.mc-avatar {
-  $avatar-name: &;
-  --mc-avatar-avatar-size: #{$size-300};
-  --mc-avatar-border-color: initial;
-  @include reset();
-  position: relative;
-  display: inline-block;
-  width: var(--mc-avatar-avatar-size);
-  height: var(--mc-avatar-avatar-size);
-  min-width: var(--mc-avatar-avatar-size);
-  border-radius: $radius-100;
-  border: var(--mc-avatar-dot-border-width) solid $color-white;
-  overflow: hidden;
-  background-color: $color-hover-gray;
-  transition: box-shadow $duration-s;
-  &--bordered {
-    border: 2px solid var(--mc-avatar-border-color);
-  }
-  &__img {
-    width: 100%;
-    height: 100%;
-  }
-  &--rounded {
-    border-radius: $radius-circle;
-  }
-
-  &--shadow {
-    &:hover,
-    &:focus {
-      box-shadow: 0 0 0 $space-100 $color-hover-gray;
-    }
-  }
-
-  &:hover,
-  &:focus {
-    .mc-avatar {
-      box-shadow: none;
-    }
-  }
-
-  &--shadow {
-    &:hover,
-    &:focus {
-      background-color: $color-hover-gray;
-      box-shadow: 0 0 0 $space-50 $color-hover-gray;
-    }
-  }
-  &__wrapper {
-    --mc-avatar-dot-border-width: 1px;
-    --mc-avatar-dot-size: #{$space-100};
-    position: relative;
-    width: max-content;
-    height: max-content;
-    border: none !important;
-    &--has-dot {
-      &::after {
-        width: var(--mc-avatar-dot-size);
-        height: var(--mc-avatar-dot-size);
-        @include pseudo();
-        left: 0;
-        bottom: 0;
-        background-color: var(--mc-avatar-dot-color);
-        z-index: 2;
-        border-radius: 50%;
-      }
-    }
-  }
-}
-</style>

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

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import McBadge from './McBadge.vue'
-import { Colors } from '@/types/styles/Colors'
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const meta = {
-    title: 'McBadge',
-    component: McBadge,
-    // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
-    tags: ['autodocs'],
-    argTypes: {
-        variation: { control: 'select', options: Object.keys(Colors) },
-        verticalLine: { control: 'boolean' },
-        modern: { control: 'boolean' },
-    },
-    args: {
-        verticalLine: false,
-        modern: false,
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=1%3A2',
-        },
-    },
-} satisfies Meta<typeof McBadge>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Default: Story = {
-    args: {
-        default: 'Badge content',
-    },
-};

package/src/components/elements/McBadge/McBadge.vue

@@ -1,150 +0,0 @@
-<script setup lang="ts">
-import { Colors, type ColorTypes } from '@/types/styles/Colors'
-import { computed } from 'vue'
-
-interface ISetProperty {
-  property?: string | undefined
-  value?: string | undefined
-  newColor?: ColorTypes
-}
-
-const props = defineProps({
-  /**
-   *  Дизайн:
-   *  `purple, purple-outline т.д.`
-   */
-  variation: {
-    type: String as () => ColorTypes,
-    default: 'purple'
-  },
-  /**
-   *  Вертикальная черта (в таблице, к примеру)
-   */
-  verticalLine: {
-    type: Boolean,
-    default: false
-  },
-  modern: {
-    type: Boolean,
-    default: false
-  }
-})
-
-const classes = computed((): { [key: string]: boolean } => ({
-  'mc-badge': true,
-  'mc-badge--vertical-line': props.verticalLine,
-  'mc-badge--modern': props.modern
-}))
-
-const rootStyles = computed((): { [key: string]: string } => {
-  const variation = `${props.variation}${props.modern ? '-modern' : ''}` as ColorTypes
-
-  let style = {} as { [key: string]: string }
-  const texts = variation.split('-')
-  const currentStyle: string = texts[texts.length - 1]
-  const color = (props.variation ? variation.replace(`-${currentStyle}`, '') : variation) as ColorTypes
-  const setProperty = ({ property = '--mc-badge-color', value, newColor = color }: ISetProperty = {}) => {
-    style[property] = value || newColor && Colors[newColor]
-  }
-
-  switch (currentStyle) {
-    case 'outline': {
-      setProperty()
-      setProperty({ property: '--mc-badge-border-color' })
-      setProperty({ property: '--mc-badge-background-color', newColor: 'white' as ColorTypes })
-      setProperty({ property: '--mc-badge-background-opacity', value: '0.4' })
-      break
-    }
-    case 'invert':
-    case 'modern': {
-      setProperty()
-      setProperty({ property: '--mc-badge-background-color' })
-      setProperty({ property: '--mc-badge-background-opacity', value: '0.1' })
-      break
-    }
-    default: {
-      const lightColors = [
-        'hover-gray',
-        'white',
-        'lighter-blue',
-        'lighter-purple',
-        'toxic',
-        'transparent'
-      ] as ColorTypes[]
-      lightColors.includes(variation) && setProperty({ newColor: 'black' })
-      setProperty({ property: '--mc-badge-background-color', newColor: variation as ColorTypes })
-      break
-    }
-  }
-  return style
-})
-</script>
-
-<template>
-  <div :class="classes" :style="rootStyles" v-bind="$attrs">
-    <div class="mc-badge__text">
-      <slot />
-    </div>
-    <div class="mc-badge__background"></div>
-  </div>
-</template>
-
-<style lang="scss">
-@use '../../../assets/styles/mixins' as *;
-@use '../../../assets/tokens/font-families' as *;
-@use '../../../assets/tokens/letter-spacings' as *;
-@use '../../../assets/tokens/colors' as *;
-@use '../../../assets/tokens/font-sizes' as *;
-@use '../../../assets/tokens/font-weights' as *;
-@use '../../../assets/tokens/line-heights' as *;
-@use '../../../assets/tokens/spacings' as *;
-@use '../../../assets/tokens/border-radius' as *;
-.mc-badge {
-  $block-name: &;
-  --mc-badge-color: #{$color-white};
-  --mc-badge-background-color: inherit;
-  --mc-badge-background-opacity: initial;
-  --mc-badge-border-color: #{$color-transparent};
-  @include ellipsis(100%, inline-flex);
-  align-items: center;
-  color: var(--mc-badge-color);
-  position: relative;
-  font-family: $font-family-main;
-  font-size: $font-size-100;
-  line-height: $line-height-150;
-  height: $line-height-200;
-  font-weight: $font-weight-medium;
-  text-transform: uppercase;
-  letter-spacing: $letter-spacing-m;
-  vertical-align: middle;
-  padding: 2px $space-100;
-  border-radius: $radius-50;
-  &:before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    @include size(100%);
-    background-color: var(--mc-badge-background-color);
-    opacity: var(--mc-badge-background-opacity);
-    border: 1px solid var(--mc-badge-border-color);
-    border-radius: inherit;
-  }
-  &__text {
-    z-index: 1;
-  }
-  &--modern {
-    border-radius: $radius-50;
-  }
-  &--vertical-line {
-    padding: 0;
-    border-radius: 0;
-    width: 5px;
-    #{$block-name} {
-      &__text {
-        display: none;
-      }
-    }
-  }
-}
-</style>

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

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McBottomLoader from './McBottomLoader.vue'
-
-const meta = {
-  title: 'McBottomLoader',
-  component: McBottomLoader,
-  tags: ['autodocs'],
-  argTypes: {},
-  args: {},
-  parameters: {
-    componentSubtitle: 'Status: Ready',
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=1%3A2'
-    }
-  }
-} satisfies Meta<typeof McBottomLoader>
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render() {
-    return {
-      components: {
-        McBottomLoader
-      },
-      template: `
-            <div>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dignissimos fugit incidunt nostrum quia ratione suscipit unde? A animi asperiores, assumenda fuga impedit ipsam minus molestiae nemo quis veniam, voluptatem!
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dignissimos fugit incidunt nostrum quia ratione suscipit unde? A animi asperiores, assumenda fuga impedit ipsam minus molestiae nemo quis veniam, voluptatem!
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dignissimos fugit incidunt nostrum quia ratione suscipit unde? A animi asperiores, assumenda fuga impedit ipsam minus molestiae nemo quis veniam, voluptatem!
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dignissimos fugit incidunt nostrum quia ratione suscipit unde? A animi asperiores, assumenda fuga impedit ipsam minus molestiae nemo quis veniam, voluptatem!
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dignissimos fugit incidunt nostrum quia ratione suscipit unde? A animi asperiores, assumenda fuga impedit ipsam minus molestiae nemo quis veniam, voluptatem!
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dignissimos fugit incidunt nostrum quia ratione suscipit unde? A animi asperiores, assumenda fuga impedit ipsam minus molestiae nemo quis veniam, voluptatem!
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dignissimos fugit incidunt nostrum quia ratione suscipit unde? A animi asperiores, assumenda fuga impedit ipsam minus molestiae nemo quis veniam, voluptatem!
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dignissimos fugit incidunt nostrum quia ratione suscipit unde? A animi asperiores, assumenda fuga impedit ipsam minus molestiae nemo quis veniam, voluptatem!
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dignissimos fugit incidunt nostrum quia ratione suscipit unde? A animi asperiores, assumenda fuga impedit ipsam minus molestiae nemo quis veniam, voluptatem!
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dignissimos fugit incidunt nostrum quia ratione suscipit unde? A animi asperiores, assumenda fuga impedit ipsam minus molestiae nemo quis veniam, voluptatem!
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dignissimos fugit incidunt nostrum quia ratione suscipit unde? A animi asperiores, assumenda fuga impedit ipsam minus molestiae nemo quis veniam, voluptatem!
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dignissimos fugit incidunt nostrum quia ratione suscipit unde? A animi asperiores, assumenda fuga impedit ipsam minus molestiae nemo quis veniam, voluptatem!
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dignissimos fugit incidunt nostrum quia ratione suscipit unde? A animi asperiores, assumenda fuga impedit ipsam minus molestiae nemo quis veniam, voluptatem!
-                <mc-bottom-loader />
-            </div>
-            `
-    }
-  }
-}

package/src/components/elements/McBottomLoader/McBottomLoader.vue

@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps({
-  center: {
-    type: Boolean,
-    default: false
-  }
-})
-
-const classes = computed(() => {
-  return {
-    'mc-bottom-loader': true,
-    'mc-bottom-loader--center': props.center
-  }
-})
-</script>
-
-<template>
-  <section :class="classes">
-    <section class="mc-bottom-loader__spinner"></section>
-  </section>
-</template>
-
-<style lang="scss">
-@use '../../../assets/styles/mixins' as *;
-@use '../../../assets/tokens/colors' as *;
-@use '../../../assets/tokens/spacings' as *;
-@use '../../../assets/tokens/z-indexes' as *;
-.mc-bottom-loader {
-  position: sticky;
-  bottom: 0;
-  width: 100%;
-  height: 1px;
-  background-color: transparent;
-  z-index: $z-index-overlay;
-  &::before {
-    @include pseudo();
-    position: absolute;
-    top: auto;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: $space-700;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: linear-gradient(to top, $color-bg-gray, rgba($color-bg-gray, 0));
-    z-index: 11;
-  }
-  &__spinner {
-    position: absolute;
-    top: auto;
-    bottom: calc(#{$space-350} - calc(#{$space-400} / 2));
-    left: calc(50% - #{$space-200});
-    transform: translateX(-50%);
-    display: block;
-    width: $space-300;
-    height: $space-300;
-    border: 2px solid $color-purple;
-    border-left-color: transparent;
-    border-radius: 50%;
-    animation: rotate 1.5s infinite linear;
-    z-index: $z-index-overlay;
-    @keyframes rotate {
-      from {
-        transform: rotate(0deg);
-      }
-      to {
-        transform: rotate(360deg);
-      }
-    }
-  }
-
-  &--center {
-    top: calc(50% - #{$space-200});
-  }
-}
-</style>