mediacube-ui-v2 0.0.5 → 0.0.7

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

@@ -1,102 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McChip from '@/components/elements/McChip/McChip.vue'
-import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
-import McButton from '@/components/elements/McButton/McButton.vue'
-import { Colors } from '@/types/styles/Colors'
-import { ChipSize } from '@/enums/Chip'
-import { fn } from '@storybook/test'
-
-const meta = {
-    title: 'McChip',
-    component: McChip,
-    tags: ['autodocs'],
-    argTypes: {
-        variation: { control: 'select', options: Object.keys(Colors) },
-        title: { control: 'text' },
-        closable: { control: 'boolean' },
-        counter: { control: 'number' },
-        size: { control: 'select', options: Object.values(ChipSize) },
-    },
-    args: {
-        variation: 'purple',
-        title: 'McChip',
-        closable: false,
-        onClose: fn(() => { alert('close click') }),
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=1%3A2',
-        },
-    },
-} satisfies Meta<typeof McChip>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {
-        default: 'McChip',
-    },
-};
-export const WithCounter: Story = {
-    args: {
-        default: 'McChip',
-        counter: 22,
-    },
-};
-export const Closable: Story = {
-    args: {
-        default: 'McChip',
-        closable: true,
-    },
-};
-export const WithIcon: Story = {
-    render() {
-        return {
-            components: { McSvgIcon, McChip },
-            template: `
-                <mc-chip variation="purple"> 
-                    <template #icon>
-                        <mc-svg-icon name="fly_dollar" />
-                    </template>
-                    McChip
-                </mc-chip>
-            `
-        }
-    }
-};
-export const CustomCloseButton: Story = {
-    render() {
-        return {
-            components: { McSvgIcon, McChip, McButton },
-            template: `
-                <mc-chip variation="purple" :counter="21" closable>
-                    McChip
-                    <template #button>
-                        <mc-button size="xs" variation="black-compact">
-                            <template #icon-append>
-                                <mc-svg-icon name="edit" />
-                            </template>
-                        </mc-button>
-                    </template>
-                </mc-chip>
-            `
-        }
-    }
-};
-
-export const TextColor: Story = {
-    args: {
-        default: 'McChip',
-        textColor: 'red',
-    },
-};
-
-export const Size: Story = {
-    args: {
-        default: 'McChip',
-        size: ChipSize.Xs,
-        counter: 22,
-    },
-};

package/src/components/elements/McChip/McChip.vue

@@ -1,309 +0,0 @@
-<script setup lang="ts">
-import McSvgIcon from '../McSvgIcon/McSvgIcon.vue'
-import { computed, type PropType } from 'vue'
-import { Colors, type ColorTypes } from '@/types/styles/Colors'
-import type { ChipVariationUnion, IChipStyleOptions } from '@/types/IChip'
-import { type ChipSizeUnion } from '@/types/IChip'
-import type { ColorsUnion } from '@/types/styles/Colors'
-import { ChipModifiers } from '@/enums'
-
-const emit = defineEmits(['close', 'click'])
-const props = defineProps({
-  /**
-   *  Text content
-   *
-   */
-  title: {
-    type: [String, Number] as PropType<string | number>,
-    default: '',
-  },
-  /**
-   *  Кнопка закрытия
-   *
-   */
-  closable: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-  /**
-   *  Дизайн:
-   *  `purple, purple-invert т.д.`
-   */
-  variation: {
-    type: String as () => ChipVariationUnion,
-    default: 'transparent',
-  },
-  /**
-   *  Счетчик
-   *
-   */
-  counter: {
-    type: [String, Number] as PropType<string | number>,
-    default: null,
-  },
-  /**
-   *  Размер
-   */
-  size: {
-    type: String as () => ChipSizeUnion,
-    default: 'm',
-  },
-  /**
-   *  Если нужен
-   *  иной цвет текста
-   */
-  textColor: {
-    type: String as () => ColorTypes,
-    default: '',
-  },
-})
-
-const classes = computed((): { [key: string]: boolean } => ({
-  [`mc-chip--variation-${chipOptions.value.variation}`]: !!props.variation,
-  [`mc-chip--size-${props.size}`]: !!props.size,
-}))
-
-const chipOptions = computed((): IChipStyleOptions => {
-  const variationProps = props.variation?.split('-')
-  const currentVariation = variationProps[variationProps.length - 1]
-  let color
-  let variation
-  switch (currentVariation) {
-    case ChipModifiers.Outline:
-    case ChipModifiers.Invert: {
-      variation = currentVariation
-      color = props.variation.replace(`-${currentVariation}`, '')
-      break
-    }
-    default: {
-      variation = 'default'
-      color = props.variation
-      break
-    }
-  }
-  return {
-    color: color as ColorTypes,
-    variation,
-  }
-})
-
-const styles = computed((): { [key: string]: ColorsUnion } => {
-  const textColor = props.textColor || 'white'
-  return {
-    '--mc-chip-color': Colors[chipOptions.value.color as ColorTypes],
-    '--mc-chip-text-color': Colors[textColor],
-  }
-})
-
-const handleCloseClick = (e: Event): void => {
-  emit('close', e)
-}
-const handleClick = (e: Event): void => {
-  emit('click', e)
-}
-</script>
-
-<template>
-  <section class="mc-chip" tabindex="0" :class="classes" :style="styles" @click="handleClick">
-    <div v-if="$slots.icon" class="mc-chip__icon">
-      <!-- @slot Слот для иконки -->
-      <slot name="icon" />
-    </div>
-    <div v-if="title || $slots.default" class="mc-chip__title">
-      <!-- @slot Слот для контента -->
-      <slot>
-        {{ title }}
-      </slot>
-    </div>
-    <div v-if="counter || counter === 0" class="mc-chip__counter">
-      {{ counter }}
-    </div>
-    <button v-if="closable" class="mc-chip__button" type="button" @click.stop="handleCloseClick">
-      <!-- @slot Слот для пользовательской кнопки -->
-      <slot name="button">
-        <mc-svg-icon size="200" name="cancel" />
-      </slot>
-    </button>
-  </section>
-</template>
-
-<style lang="scss">
-@use 'sass:color' as sasscolor;
-@use '../../../assets/styles/mixins' as *;
-@use '../../../assets/tokens/durations' as *;
-@use '../../../assets/tokens/font-families' 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/sizes' as *;
-
-.mc-chip {
-  $block-name: &;
-  --mc-chip-text-color: #{$color-black};
-  --mc-chip-color: #{$color-white};
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-  color: var(--mc-chip-color);
-  font-family: $font-family-main;
-  font-size: $font-size-200;
-  line-height: $line-height-200;
-  max-width: 100%;
-  border-radius: 100px;
-  vertical-align: middle;
-  outline: none;
-  z-index: 0;
-  flex-shrink: 0;
-  overflow: visible;
-  &:before {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    z-index: 0;
-    @include size(100%);
-    border-radius: inherit;
-    background-color: var(--mc-chip-color);
-  }
-  > * {
-    margin-right: $space-50;
-    z-index: 1;
-  }
-  > *:first-child {
-    margin-left: $space-50;
-  }
-
-  &--size {
-    @mixin padding-x($space, $space-compact) {
-      padding-right: $space;
-      padding-left: $space;
-      &-compact {
-        padding-right: $space-compact;
-        padding-left: $space-compact;
-      }
-    }
-    &-m {
-      @include padding-x($space-100, $space-50);
-      &,
-      &-compact {
-        height: $size-400;
-      }
-    }
-    &-s {
-      @include padding-x($space-100, $space-50);
-      &,
-      &-compact {
-        height: $size-300;
-      }
-    }
-    &-xs {
-      @include padding-x($space-50, 0);
-      &,
-      &-compact {
-        height: $space-200;
-        font-size: $font-size-100;
-        line-height: $line-height-150;
-      }
-    }
-  }
-  &__icon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-left: 0;
-  }
-  &__title {
-    @include ellipsis();
-    @include layout-flex-fix();
-    color: var(--mc-chip-text-color);
-    &:empty {
-      display: none;
-    }
-  }
-  &__counter {
-    flex: 0 0 auto;
-    font-family: $font-family-main;
-    font-size: $font-size-200;
-    line-height: $line-height-200;
-    color: $color-dark-gray;
-
-    &:empty {
-      display: none;
-    }
-  }
-  &__button {
-    @include size($size-200);
-    position: relative;
-    display: flex;
-    flex: 0 0 auto;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    margin-right: 0;
-    border-radius: 0;
-    user-select: none;
-    text-decoration: none;
-    text-transform: none;
-    background-color: transparent;
-    background-image: none;
-    cursor: pointer;
-    outline: 0;
-    border: none;
-    transition: all $duration-s;
-    flex-wrap: nowrap;
-    -webkit-appearance: none;
-    -webkit-text-fill-color: currentColor;
-    color: $color-dark-gray;
-    opacity: 0.2;
-
-    &:hover {
-      opacity: 1;
-      color: $color-red;
-    }
-
-    &:active {
-      color: sasscolor.adjust($color-red, $lightness: 15%);
-    }
-  }
-
-  &--variation {
-    &-default {
-      #{$block-name} {
-        &__button {
-          color: var(--mc-chip-color);
-          &:hover {
-            opacity: 1;
-            color: $color-white;
-          }
-          &:active {
-            color: sasscolor.adjust($color-white, $lightness: 15%);
-          }
-        }
-        &__title {
-          color: var(--mc-chip-text-color);
-        }
-        &__counter {
-          color: var(--mc-chip-text-color);
-          opacity: 0.5;
-        }
-      }
-    }
-    &-outline {
-      color: var(--mc-chip-color);
-      border: 1px solid var(--mc-chip-color);
-      &:before {
-        display: none;
-      }
-    }
-    &-invert {
-      color: $color-black;
-      &:before {
-        background-color: var(--mc-chip-color);
-        opacity: 0.15;
-      }
-    }
-  }
-}
-</style>

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

@@ -1,31 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import { fn } from '@storybook/test'
-import McCropper from '@/components/elements/McCropper/McCropper.vue'
-
-const meta = {
-    title: 'McCropper',
-    component: McCropper,
-    tags: ['autodocs'],
-    argTypes: {},
-    args: {
-        imgSrc: 'https://avatars.githubusercontent.com/u/63395408?s=400&u=5f3ae555700cfcacf278425bf37c1433c3ed43c1&v=4',
-        onReady: fn((e) => {
-            console.log(e)
-        }),
-        onCrop: fn((e) => {
-            console.log(e)
-        })
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-        },
-    },
-} satisfies Meta<typeof McCropper>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {},
-};

package/src/components/elements/McCropper/McCropper.vue

@@ -1,129 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-//@ts-ignore
-import VueCropper from 'vue3-cropperjs'
-import 'vue3-cropperjs/dist/v3cropper.css'
-
-const emit = defineEmits(['crop', 'ready'])
-const props = defineProps({
-  /**
-   *  Путь к изображению
-   *
-   */
-  imgSrc: {
-    type: String,
-    default: null,
-  },
-})
-const cropper = ref<InstanceType<VueCropper>>(null)
-const timeout = ref<number | null>(null)
-
-watch(() => props.imgSrc, (value) => {
-  setImage(value)
-})
-const setImage = (value: string): void => {
-  cropper.value.replace(props.imgSrc || value)
-}
-
-const debounce = (method: TimerHandler): void => {
-  clearDebounce()
-  timeout.value = setTimeout(method, 200)
-}
-
-const cropImage = (e: any): void => {
-  e.target?.cropper?.getCroppedCanvas({
-      maxWidth: 650,
-      maxHeight: 650,
-    })
-    .toBlob((blob: Blob) => {
-      /**
-       * Событие по обрезке
-       * @property {blob}
-       */
-      emit('crop', blob)
-    })
-  clearDebounce()
-}
-const clearDebounce = (): void => {
-  timeout.value && clearTimeout(timeout.value)
-}
-</script>
-
-<template>
-  <section class="mc-cropper">
-    <vue-cropper
-      ref="cropper"
-      background
-      alt="Avatar"
-      :aspect-ratio="1 / 1"
-      :initial-aspect-ratio="1 / 1"
-      :highlight="false"
-      :guides="false"
-      :zoomable="false"
-      :view-mode="2"
-      :src="imgSrc"
-      @ready="emit('ready', $event)"
-      @crop="(e: any) => debounce(() => cropImage(e))"
-    />
-  </section>
-</template>
-
-<style lang="scss">
-@use '../../../assets/tokens/border-radius' as *;
-@use '../../../assets/tokens/opacities' as *;
-@use '../../../assets/tokens/colors' as *;
-@use '../../../assets/tokens/media-queries' as *;
-.mc-cropper {
-  $block-name: &;
-
-  $color-main: $color-purple;
-
-  .cropper {
-    &-modal {
-      opacity: $opacity-active;
-      background-color: $color-white;
-    }
-
-    &-face,
-    &-line,
-    &-point {
-      opacity: 0;
-    }
-
-    &-view-box {
-      border-radius: $radius-circle;
-      outline: 1px dashed $color-main;
-    }
-
-    &-line {
-      background-color: $color-main;
-    }
-
-    &-point {
-      background: $color-main;
-
-      &.point-se {
-        @media #{$media-query-xl} {
-          opacity: 1;
-        }
-
-        &:before {
-          background-color: $color-main;
-        }
-      }
-    }
-
-    &-center {
-      display: none;
-    }
-
-    &-canvas {
-      height: 100% !important;
-    }
-
-    &-hide {
-      height: 100% !important;
-    }
-  }
-}
-</style>