mediacube-ui-v2 0.0.3 → 0.0.4

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

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

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

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

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

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

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