mediacube-ui-v2 0.0.5 → 0.0.7

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

@@ -1,35 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McSeparator from '@/components/elements/McSeparator/McSeparator.vue'
-import { Colors, type ColorTypes } from '@/types/styles/Colors'
-import { Spaces } from '@/types/styles/Spaces'
-
-const meta = {
-    title: 'McSeparator',
-    component: McSeparator,
-    tags: ['autodocs'],
-    argTypes: {
-        color: { control: 'select', options: Object.keys(Colors) },
-        indentX: { control: 'select', options: Object.keys(Spaces) },
-        indentY: { control: 'select', options: Object.keys(Spaces) },
-        indentTop: { control: 'select', options: Object.keys(Spaces) },
-        indentBottom: { control: 'select', options: Object.keys(Spaces) },
-        indentLeft: { control: 'select', options: Object.keys(Spaces) },
-        indentRight: { control: 'select', options: Object.keys(Spaces) },
-    },
-    args: {
-        color: 'purple' as ColorTypes,
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=81%3A788',
-        },
-    },
-} satisfies Meta<typeof McSeparator>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {},
-};

package/src/components/elements/McSeparator/McSeparator.vue

@@ -1,131 +0,0 @@
-<script setup lang="ts">
-import { computed, type PropType } from 'vue'
-import { Colors, type ColorTypes } from '@/types/styles/Colors'
-import { Spaces, type SpaceTypes } from '@/types/styles/Spaces'
-import type { ColorsUnion } from '@/types/styles/Colors'
-import type { SpacesUnion } from '@/types/styles/Spaces'
-
-const props = defineProps({
-  /**
-   * Толщина `s, m`
-   */
-  weight: {
-    type: String as PropType<'s' | 'm'>,
-    default: 's',
-  },
-  /**
-   * Цвет (токены)
-   */
-  color: {
-    type: String as () => ColorTypes,
-    default: 'outline-gray',
-  },
-  /**
-   * Отступ слева и справа: 50, 200... ...1000
-   */
-  indentX: {
-    type: String as () => SpaceTypes,
-    default: '',
-  },
-  /**
-   * Отступ сверху и снизу: 50, 200... ...1000
-   */
-  indentY: {
-    type: String as () => SpaceTypes,
-    default: '',
-  },
-  /**
-   * Отступ сверху: 50, 200... ...1000
-   */
-  indentTop: {
-    type: String as () => SpaceTypes,
-    default: '',
-  },
-  /**
-   * Отступ снизу: 50, 200... ...1000
-   */
-  indentBottom: {
-    type: String as () => SpaceTypes,
-    default: '',
-  },
-  /**
-   * Отступ слева: 50, 200... ...1000
-   */
-  indentLeft: {
-    type: String as () => SpaceTypes,
-    default: '',
-  },
-  /**
-   * Отступ справа: 50, 200... ...1000
-   */
-  indentRight: {
-    type: String as () => SpaceTypes,
-    default: '',
-  },
-})
-
-const indents = computed((): { [key: string]: SpaceTypes } => ({
-  top: props.indentTop || props.indentY,
-  bottom: props.indentBottom || props.indentY,
-  left: props.indentLeft || props.indentX,
-  right: props.indentRight || props.indentX,
-}))
-
-const classes = computed((): { [key: string]: boolean } => ({
-  'mc-separator': true,
-}))
-
-const styles = computed((): { [key: string]: ColorsUnion | SpacesUnion | string } => {
-  let style = {} as { [key: string]: ColorsUnion | SpacesUnion | string }
-  if (props.color) style['--mc-separator-color'] = Colors[props.color]
-  if (indents.value.top) style['--mc-separator-indent-top'] = Spaces[indents.value.top]
-  if (indents.value.bottom) style['--mc-separator-indent-bottom'] = Spaces[indents.value.bottom]
-  if (indents.value.left) style['--mc-separator-indent-left'] = Spaces[indents.value.left]
-  if (indents.value.right) style['--mc-separator-indent-right'] = Spaces[indents.value.right]
-
-  let weight: string | undefined
-  switch (props.weight) {
-    case 's': {
-      weight = '1px'
-      break
-    }
-    case 'm': {
-      weight = '2px'
-    }
-  }
-  if (weight) style['--mc-separator-weight'] = weight
-
-  return style
-})
-</script>
-
-<template>
-  <div :class="classes" :style="styles">
-    <div class="mc-separator__wrapper">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@use '../../../assets/styles/mixins' as *;
-.mc-separator {
-  $block-name: &;
-  --mc-separator-color: initial;
-  --mc-separator-indent-top: initial;
-  --mc-separator-indent-bottom: initial;
-  --mc-separator-indent-left: initial;
-  --mc-separator-indent-right: initial;
-  --mc-separator-weight: initial;
-  width: 100%;
-  margin-top: var(--mc-separator-indent-top);
-  margin-bottom: var(--mc-separator-indent-bottom);
-  margin-inline-start: var(--mc-separator-indent-left);
-  margin-inline-end: var(--mc-separator-indent-right);
-  height: var(--mc-separator-weight);
-  &__wrapper {
-    @include size(100%);
-    background-color: var(--mc-separator-color);
-  }
-}
-</style>

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

@@ -1,54 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McButton from '@/components/elements/McButton/McButton.vue'
-import McTitle from '@/components/elements/McTitle/McTitle.vue'
-import McSlideUpDown from '@/components/elements/McSlideUpDown/McSlideUpDown.vue'
-
-const meta = {
-    title: 'McSlideUpDown',
-    component: McSlideUpDown,
-    tags: ['autodocs'],
-    argTypes: {},
-    args: {},
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: '',
-        },
-    },
-} satisfies Meta<typeof McSlideUpDown>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    render() {
-        return {
-            data() {
-                return {
-                    isActive: false,
-                    content: `
-                    Which is more profitable: with or without a subscription?
-                    It all depends on how often you use Expresses.
-                    Without a subscription, the fee is higher, but it only applies to the amount that you decide to use early.
-                    Expresses without a subscription are suitable for those who are used to withdrawing money once a month and only sometimes withdraw some amounts in advance.
-                    With a subscription, the fee is lower, but it applies to the entire amount received, regardless of whether you used the money ahead of schedule or not.
-                    Subscription is suitable for those who prefer to use the money right away. For example, for daily expenses.
-                    `
-                }
-            },
-            components: {
-                McButton,
-                McTitle,
-                McSlideUpDown,
-            },
-            template: `
-            <div>
-                <mc-button @click="isActive = !isActive">MC Pay Expresses</mc-button>
-                <mc-slide-up-down :active="isActive">
-                    <mc-title style="padding: 16px 0" pre-line>{{content}}</mc-title>
-                </mc-slide-up-down>
-            </div>
-            `
-        }
-    }
-};

package/src/components/elements/McSlideUpDown/McSlideUpDown.vue

@@ -1,142 +0,0 @@
-<script setup lang="ts">
-import { onMounted, type PropType, ref, watch } from 'vue'
-
-interface animationPayload {
-  contentHeight: string | number
-}
-
-const emit = defineEmits<{
-  (e: 'slide-open-start', value: boolean): void
-  (e: 'slide-close-start', value: boolean): void
-  (e: 'slide-open-end', value: boolean): void
-  (e: 'slide-close-end', value: boolean): void
-}>()
-
-const props = defineProps({
-  /*
-   * Состояние
-   */
-  active: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /*
-   * Продолжительность тоггла
-   */
-  duration: {
-    type: Number as PropType<number>,
-    default: 300
-  },
-  type: {
-    type: String as PropType<string>,
-    default: 'ease-out'
-  },
-  /*
-   * Если нужен другой тег
-   */
-  tag: {
-    type: String as PropType<string>,
-    default: 'div'
-  },
-  /*
-   * Применять ли атрибут hidden
-   * к элементы при закрытии
-   */
-  useHidden: {
-    type: Boolean as PropType<boolean>,
-    default: true
-  }
-})
-
-const open = ref<boolean>(props.active)
-const animation_in_progress = ref<boolean>(false)
-const animation = ref<Animation | null>(null)
-const container = ref<HTMLDivElement>()
-
-onMounted((): void => {
-  init()
-})
-
-const init = (): void => {
-  if (container.value && !open.value) {
-    container.value.style.height = '0'
-  }
-}
-
-const animate = (): void => {
-  if (!container.value || animation_in_progress.value) return
-  animation_in_progress.value = true
-  // Получаем фактическую высоту содержимого
-  const contentHeight = container.value.scrollHeight
-
-  const payload = {
-    contentHeight
-  } as animationPayload
-
-  // Отменяем предыдущую анимацию, если она была
-  if (animation.value) {
-    animation.value.cancel()
-  }
-  open.value ? handleClose(payload) : handleOpen(payload)
-}
-
-const toggleOpenValue = (): void => {
-  open.value = !open.value
-}
-
-const handleClose = ({ contentHeight }: animationPayload) => {
-  emit('slide-close-start', open.value)
-
-  if (container.value) {
-    animation.value = container.value.animate([{ height: `${contentHeight}px` }, { height: '0' }], {
-      duration: props.duration,
-      easing: props.type,
-      fill: 'forwards'
-    })
-    animation.value.onfinish = () => {
-      emit('slide-close-end', open.value)
-      animation_in_progress.value = false
-      toggleOpenValue()
-    }
-  }
-}
-
-const handleOpen = ({ contentHeight }: animationPayload) => {
-  emit('slide-open-start', open.value)
-
-  if (container.value) {
-    animation.value = container.value.animate([{ height: '0' }, { height: `${contentHeight}px` }], {
-      duration: props.duration,
-      easing: props.type,
-      fill: 'forwards'
-    })
-
-    animation.value.onfinish = () => {
-      emit('slide-open-end', open.value)
-      animation_in_progress.value = false
-      toggleOpenValue()
-    }
-  }
-}
-
-watch(
-  () => props.active,
-  (): void => {
-    animate()
-  }
-)
-</script>
-
-<template>
-  <component ref="container" :is="props.tag" class="mc-slide-up-down">
-    <slot />
-  </component>
-</template>
-
-<style lang="scss">
-@use '../../../assets/tokens/font-families' as *;
-.mc-slide-up-down {
-  overflow: hidden;
-  font-family: $font-family-main;
-}
-</style>

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

@@ -1,108 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McStack from '@/components/elements/McStack/McStack.vue'
-import McChip from '@/components/elements/McChip/McChip.vue'
-import categories from '@/mocks/categories.js'
-
-const meta = {
-  title: 'McStack',
-  component: McStack,
-  tags: ['autodocs'],
-  argTypes: {
-    visibleCount: { control: 'number' },
-    collapsed: { control: 'boolean' },
-  },
-  args: {
-    visibleCount: Infinity,
-    collapsed: false
-  },
-  parameters: {
-    componentSubtitle: 'Status: Ready',
-    design: {
-      type: 'figma',
-      url: ''
-    }
-  }
-} satisfies Meta<typeof McStack>
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render() {
-    return {
-      components: {
-        McStack,
-        McChip
-      },
-      computed: {
-        computedCategories() {
-          return categories
-        }
-      },
-      template: `
-        <mc-stack>
-            <mc-chip v-for="category in computedCategories" :key="category.id" variation="purple" :title="category.title" />
-        </mc-stack>
-    `
-    }
-  }
-}
-export const Collapsed: Story = {
-  render() {
-    return {
-      components: {
-        McStack,
-        McChip
-      },
-      computed: {
-        computedCategories() {
-          return categories
-        }
-      },
-      template: `
-        <mc-stack collapsed>
-            <mc-chip v-for="category in computedCategories" :key="category.id" variation="purple" :title="category.title" />
-        </mc-stack>
-    `
-    }
-  }
-}
-export const LimitMax4: Story = {
-  render() {
-    return {
-      components: {
-        McStack,
-        McChip
-      },
-      computed: {
-        computedCategories() {
-          return categories
-        }
-      },
-      template: `
-        <mc-stack :visible-count="4">
-            <mc-chip v-for="category in computedCategories" :key="category.id" variation="purple" :title="category.title" />
-        </mc-stack>
-    `
-    }
-  }
-}
-export const LimitMax4PlusCollapsed: Story = {
-  render() {
-    return {
-      components: {
-        McStack,
-        McChip
-      },
-      computed: {
-        computedCategories() {
-          return categories
-        }
-      },
-      template: `
-        <mc-stack :visible-count="4" collapsed>
-            <mc-chip v-for="category in computedCategories" :key="category.id" variation="purple" :title="category.title" />
-        </mc-stack>
-    `
-    }
-  }
-}

package/src/components/elements/McStack/McStack.vue

@@ -1,147 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, h, useSlots, createApp, type PropType } from 'vue'
-import { Spaces } from '@/types'
-
-const props = defineProps({
-  visibleCount: {
-    type: Number as PropType<number>,
-    default: Infinity
-  },
-  collapsed: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  }
-})
-
-const slots = useSlots()
-const container = ref<HTMLElement | null>(null)
-const children =
-  (slots.default && slots.default()[0].children?.length
-    ? slots.default()[0].children
-    : //@ts-ignore
-      slots.default()) || []
-
-//@ts-ignore
-const visibleChildren = ref<any[]>(children || [])
-const hiddenCount = ref<number>(0)
-
-const classes = computed((): { [key: string]: boolean } => {
-  return {
-    'mc-stack': true,
-    'mc-stack--collapsed': props.collapsed
-  }
-})
-
-const updateChildrenVisible = (): void => {
-  if (!container.value) return
-
-  let totalWidth = 0
-  const visibleItems = []
-  let itemCount = 0
-  hiddenCount.value = 0
-
-  const tempContainer = document.createElement('div')
-  tempContainer.style.position = 'absolute'
-  tempContainer.style.visibility = 'hidden'
-  tempContainer.style.whiteSpace = 'nowrap'
-  document.body.appendChild(tempContainer)
-
-  //@ts-ignore
-  for (const item of children) {
-    const vnode = h(item)
-    const itemNode = document.createElement('div')
-    tempContainer.appendChild(itemNode)
-
-    const app = createApp({ render: () => vnode })
-    app.mount(itemNode)
-
-    const itemWidth = props.collapsed
-      ? itemNode.getBoundingClientRect().width + 6
-      : itemNode.getBoundingClientRect().width
-    app.unmount()
-    itemNode.remove()
-
-    const moreContentWidth = +Spaces['300'].replace('px', '')
-    const itemIndent = props.collapsed ? -Spaces['200'].replace('px', '') : +Spaces['150'].replace('px', '')
-
-    if (
-      totalWidth + (itemWidth + itemIndent) <= container.value.clientWidth - moreContentWidth &&
-      itemCount < props.visibleCount
-    ) {
-      totalWidth += itemWidth + itemIndent
-      visibleItems.push(item)
-      itemCount++
-    } else {
-      //@ts-ignore
-      hiddenCount.value = children.length - visibleItems.length
-      break
-    }
-  }
-  document.body.removeChild(tempContainer)
-  visibleChildren.value = visibleItems
-}
-
-onMounted(() => {
-  const resizeObserver = new ResizeObserver(updateChildrenVisible)
-  if (container.value) resizeObserver.observe(container.value)
-
-  updateChildrenVisible()
-
-  onUnmounted(() => {
-    resizeObserver.disconnect()
-  })
-})
-</script>
-
-<template>
-  <div ref="container" :class="classes">
-    <div ref="content" class="mc-stack__content">
-      <template v-for="(child, i) in visibleChildren" :key="`mc-stack-item-${i}`">
-        <component :is="child" />
-      </template>
-      <span v-if="hiddenCount > 0" class="mc-stack__more-label">+{{ hiddenCount }}</span>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@use '../../../assets/tokens/spacings' as *;
-@use '../../../assets/tokens/font-sizes' as *;
-@use '../../../assets/tokens/font-weights' as *;
-@use '../../../assets/tokens/line-heights' as *;
-@use '../../../assets/tokens/colors' as *;
-@use '../../../assets/tokens/font-families' as *;
-@use '../../../assets/styles/mixins' as *;
-.mc-stack {
-  $block-name: &;
-  overflow: hidden;
-  white-space: nowrap;
-  &__content {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    @include child-indent-right($space-150);
-  }
-  &--collapsed {
-    #{$block-name}__content {
-      @include child-indent-right(-#{$space-200});
-      & > *:not(#{$block-name}__more-label) {
-        border: 2px solid $color-white;
-      }
-    }
-    #{$block-name}__more-label {
-      margin-inline-start: $space-250;
-    }
-  }
-  &__more-label {
-    margin-inline-start: $space-50;
-    white-space: nowrap;
-    font-size: $font-size-200;
-    line-height: $line-height-200;
-    color: $color-gray;
-    font-weight: $font-weight-semi-bold;
-    font-family: $font-family-main;
-    width: $space-300;
-  }
-}
-</style>