mediacube-ui-v2 0.0.3 → 0.0.5

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

@@ -0,0 +1,252 @@
+<script setup lang="ts">
+//@ts-ignore
+import defaultImage from '../../../assets/img/no_user.png'
+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 props = defineProps({
+  /**
+   *  Путь до изображения
+   *
+   */
+  src: {
+    type: String,
+    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

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

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

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

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