mediacube-ui-v2 0.0.5 → 0.0.7

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

@@ -1,63 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McFieldToggle from '@/components/elements/McFieldToggle/McFieldToggle.vue'
-import { HorizontalAlignment } from '@/enums/ui/Alignment'
-import { Colors, type ColorTypes } from '@/types/styles/Colors'
-
-const meta = {
-    title: 'McFieldToggle',
-    component: McFieldToggle,
-    tags: ['autodocs'],
-    argTypes: {
-        modelValue: { control: 'none' },
-        checkedValue: { control: 'text' },
-        uncheckedValue: { control: 'text' },
-        coloredText: { control: 'boolean' },
-        disabled: { control: 'boolean' },
-        textPosition: { control: 'select', options: HorizontalAlignment },
-        color: { control: 'select', options: Object.keys(Colors) },
-        tabindex: { control: 'number' },
-    },
-    args: {
-        checkedValue: 'true',
-        uncheckedValue: 'false',
-        coloredText: false,
-        disabled: false,
-        errors: ['Error text'],
-        color: 'purple' as ColorTypes,
-        tabindex: 0,
-        default: 'Hello'
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=1%3A2',
-        },
-    },
-} satisfies Meta<typeof McFieldToggle>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {
-        name: 'Default'
-    },
-};
-export const WithError: Story = {
-    render() {
-        return {
-            components: { McFieldToggle },
-            data() {
-                return {
-                    v: null,
-                }
-            },
-            template: `
-                <mc-field-toggle v-model="v" text-position="right">Get all McPay benefits</mc-field-toggle>
-                <a v-if="v" href="https://mcpay.io/auth/sign-up" target="_blank">https://mcpay.io/auth/sign-up</a>
-                <br />
-                Output: {{ v }}
-            `
-        }
-    },
-};

package/src/components/elements/McFieldToggle/McFieldToggle.vue

@@ -1,280 +0,0 @@
-<script setup lang="ts">
-import McTitle from '@/components/elements/McTitle/McTitle.vue'
-import { useFieldErrors } from '@/composables/useFieldErrors'
-import { Colors, type ColorTypes } from '@/types/styles/Colors'
-import { computed, type PropType } from 'vue'
-import type { HorizontalAlignmentUnion } from '@/types/styles/Alignment'
-import type { HorizontalAlignment } from '@/enums/ui/Alignment'
-import { TitleVariations } from '@/enums'
-
-const emit = defineEmits(['update:modelValue'])
-const props = defineProps({
-  /**
-   *  Значение
-   *
-   */
-  modelValue: {
-    type: [Boolean, String, Number] as PropType<boolean | string | number>,
-    default: null
-  },
-  /**
-   *  Выбранное значение
-   */
-  checkedValue: {
-    type: [Boolean, String, Number] as PropType<boolean | string | number>,
-    default: true
-  },
-  /**
-   *  Невыбранное значение
-   */
-  uncheckedValue: {
-    type: [Boolean, String, Number] as PropType<boolean | string | number>,
-    default: false
-  },
-  /**
-   *  Изменение цвета текста
-   *  при переключении
-   */
-  coloredText: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   *  Отключенное состояние
-   */
-  disabled: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   *  Позиция текста
-   *  относительно переключателя
-   */
-  textPosition: {
-    type: String as () => HorizontalAlignmentUnion,
-    default: 'left'
-  },
-  /**
-   * Активный цвет
-   */
-  color: {
-    type: String as () => ColorTypes,
-    default: 'purple' as ColorTypes
-  },
-  /**
-   *  Ошибки
-   *
-   */
-  errors: {
-    type: Array as PropType<string[]>,
-    default: () => []
-  },
-  /**
-   * Атрибут tabindex для главного элемента
-   */
-  tabindex: {
-    type: [String, Number] as PropType<string | number>
-  }
-})
-
-const fieldErrors = useFieldErrors(props.errors)
-
-const _value = computed((): boolean => {
-  return props.modelValue === props.checkedValue
-})
-const classes = computed((): { [key: string]: boolean } => {
-  return {
-    'mc-field-toggle': true,
-    'mc-field-toggle--checked': _value.value,
-    'mc-field-toggle--disabled': props.disabled,
-    'mc-field-toggle--colored-text': props.coloredText,
-    [`mc-field-toggle--text-position-${props.textPosition as HorizontalAlignment}`]: !!props.textPosition
-  }
-})
-
-const styles = computed((): { [key: string]: string | undefined } => {
-  let disabledColor: ColorTypes
-  let saturateValue: string = 'initial'
-  switch (props.color) {
-    case 'purple' as ColorTypes: {
-      disabledColor = 'light-purple' as ColorTypes
-      break
-    }
-    default: {
-      disabledColor = props.color
-      saturateValue = '50%'
-    }
-  }
-  return {
-    '--mc-field-toggle-color': props.color && Colors[props.color],
-    '--mc-field-toggle-disabled-color': disabledColor && Colors[disabledColor],
-    '--mc-field-toggle-saturate-value': saturateValue
-  }
-})
-const inputProps = computed<object>(() => {
-  return {
-    checked: _value.value,
-    disabled: props.disabled,
-    tabindex: props.tabindex,
-    class: 'mc-field-toggle__field',
-    type: 'checkbox'
-  }
-})
-
-const change = (e: Event): void => {
-  const target = e.target as HTMLInputElement
-  const checked: boolean = target.checked
-  fieldErrors.toggleErrorVisible()
-  /**
-   * Событие тоггла
-   */
-  emit('update:modelValue', checked ? props.checkedValue : props.uncheckedValue)
-}
-</script>
-
-<template>
-  <div class="mc-field-toggle__content">
-    <label :class="classes" :style="styles">
-      <span class="mc-field-toggle__text">
-        <!-- @slot Слот для тайтла тогглера -->
-        <slot />
-      </span>
-      <span class="mc-field-toggle__wrapper">
-        <input v-bind="inputProps" @input="change" />
-        <span class="mc-field-toggle__slider"></span>
-      </span>
-    </label>
-    <mc-title
-      v-if="fieldErrors.errorText.value"
-      tag-name="div"
-      color="red"
-      :variation="TitleVariations.Overline"
-      max-width="100%"
-    >
-      {{ fieldErrors.errorText.value }}
-    </mc-title>
-  </div>
-</template>
-
-<style lang="scss">
-@use '../../../assets/styles/mixins' as *;
-@use '../../../assets/tokens/durations' as *;
-@use '../../../assets/tokens/spacings' as *;
-@use '../../../assets/tokens/line-heights' as *;
-@use '../../../assets/tokens/font-sizes' as *;
-@use '../../../assets/tokens/colors' as *;
-@use '../../../assets/tokens/sizes' as *;
-@use '../../../assets/tokens/font-families' as *;
-@use '../../../assets/tokens/border-radius' as *;
-.mc-field-toggle {
-  $block-name: &;
-  $toggle-indent: calc(#{$space-50} / 2);
-  font-family: $font-family-main;
-  --mc-field-toggle-color: initial;
-  --mc-field-disabled-color: initial;
-  --mc-field-toggle-saturate-value: initial;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-
-  &__text {
-    color: $color-black;
-    transition: color $duration-m;
-    line-height: $line-height-200;
-    font-size: $font-size-200;
-    margin-inline-end: $space-100;
-    text-align: right;
-
-    &:empty {
-      margin-inline-end: 0;
-    }
-  }
-
-  &--colored-text {
-    #{$block-name}__text {
-      color: $color-gray;
-    }
-
-    @at-root #{$block-name}--checked#{$block-name}--colored-text {
-      #{$block-name}__text {
-        color: $color-purple;
-      }
-    }
-    @at-root #{$block-name}--disabled#{$block-name}--colored-text {
-      #{$block-name}__text {
-        color: $color-outline-gray;
-      }
-    }
-    @at-root #{$block-name}--checked#{$block-name}--disabled#{$block-name}--colored-text {
-      #{$block-name}__text {
-        color: $color-light-purple;
-      }
-    }
-  }
-
-  &--text-position-right {
-    #{$block-name}__text {
-      order: 2;
-      margin-inline: $space-100 0;
-      text-align: left;
-    }
-  }
-  &__content {
-    @include child-indent-bottom($space-50);
-  }
-
-  &__wrapper {
-    position: relative;
-    display: inline-block;
-    @include size($size-550, $size-250);
-    flex-shrink: 0;
-    & > #{$block-name}__field {
-      opacity: 0;
-      @include size(0);
-
-      &:checked + #{$block-name}__slider {
-        background-color: $color-purple;
-
-        &:before {
-          inset-inline-start: calc(#{$space-300} + #{$toggle-indent});
-        }
-      }
-    }
-
-    #{$block-name}__slider {
-      @include position(absolute, 0 0 0 0);
-      background-color: $color-gray;
-      transition: $duration-m;
-      border-radius: 100px;
-
-      &::before {
-        @include pseudo();
-        @include size($size-200);
-        @include position(null, null null $toggle-indent $toggle-indent);
-        background-color: $color-white;
-        transition: $duration-m;
-        border-radius: $radius-circle;
-      }
-    }
-  }
-
-  &--disabled {
-    cursor: auto;
-    #{$block-name}__slider {
-      background-color: $color-outline-gray !important;
-      &::before {
-        background-color: $color-hover-gray;
-      }
-    }
-  }
-  #{$block-name}__wrapper > #{$block-name}__field:checked + #{$block-name}__slider {
-    background-color: var(--mc-field-toggle-color);
-  }
-  &#{$block-name}--disabled {
-    &#{$block-name}--checked #{$block-name}__slider {
-      background-color: var(--mc-field-toggle-disabled-color) !important;
-      filter: saturate(var(--mc-field-toggle-saturate-value));
-    }
-  }
-}
-</style>

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

@@ -1,49 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McInfinityLoadingTrigger from '@/components/elements/McInfinityLoadingTrigger/McInfinityLoadingTrigger.vue'
-import McTitle from '@/components/elements/McTitle/McTitle.vue'
-
-const meta = {
-    title: 'McInfinityLoadingTrigger',
-    component: McInfinityLoadingTrigger,
-    tags: ['autodocs'],
-    argTypes: { },
-    args: {},
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: '',
-        },
-    },
-} satisfies Meta<typeof McInfinityLoadingTrigger>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    render() {
-        return {
-            components: { McInfinityLoadingTrigger, McTitle },
-            data() {
-                return {
-                    v: 1,
-                    limit: 10,
-                }
-            },
-            template: `
-                <div class="placement">
-                    <mc-title text-align="center" variation="info">Demonstration of the infinite loading indicator. According to the condition, it will load 
-                        {{ limit }} blocks per page. If you remove the conditions, it will load from infinitely
-                    </mc-title>
-                    <div v-for="n in v" :key="n" style="height: 300px; background-color: #8756ff; border-radius: 12px; margin-bottom: 16px; padding: 16px">
-                        <mc-title variation="h4" weight="normal" color="white">Block {{ n }}/{{ v }}</mc-title>
-                    </div>
-                    <mc-infinity-loading-trigger
-                      :active="v < limit"
-                      @loading="() => { v++ }"
-                      @hide="() => (console.log('Block hide'))"
-                    />
-                </div>
-            `
-        }
-    },
-};

package/src/components/elements/McInfinityLoadingTrigger/McInfinityLoadingTrigger.vue

@@ -1,95 +0,0 @@
-<script setup lang="ts">
-import { onMounted, watch, ref, onBeforeUnmount } from 'vue'
-
-const emit = defineEmits(['loading', 'hide'])
-const props = defineProps({
-  /**
-   * За какое расстояние(px) инициировать loading event
-   * **/
-  overlap: {
-    type: Number,
-    default: 100,
-  },
-  /**
-   * Активен ли триггер
-   * */
-  active: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * Компонент в котором происходит скролл, указывается для большей точности
-   * Дефолтно используется область видимости браузера для отслеживания появления компопнента
-   * **/
-  root: {
-    type: String,
-    default: null,
-  },
-})
-const observer =  ref<IntersectionObserver | null>()
-const el =  ref<HTMLElement | null>()
-const id =  ref<string>(`indicator_${Date.now()}`)
-
-onMounted(() => {
-  setObserver()
-})
-
-onBeforeUnmount(() => {
-  clearAllListeners()
-})
-
-const setObserver = (): void => {
-  el.value = document.getElementById(id.value)
-  // создаем IntersectionObserver - смотрит за тем когда элемент попадает во viewport
-  observer.value = new IntersectionObserver(
-    ([entry]) => {
-      // если попадает во viewport делаем $emit
-      if ((entry.intersectionRatio === 1 || entry.isIntersecting) && props.active) {
-        return emit('loading')
-      } else {
-        return emit('hide')
-      }
-    },
-    {
-      ...(props.root ? { root: el.value?.closest(props.root) } : {}),
-      rootMargin: `${props.overlap}px`,
-      threshold: 0.1,
-    },
-  )
-  // назначаем слушателя на observer
-  el.value && observer.value.observe(el.value)
-}
-
-const clearAllListeners = (): void => {
-  observer.value && observer.value.disconnect()
-  observer.value = null
-}
-
-watch(() => props.active, (value): void => {
-  clearAllListeners()
-  if (value) {
-    setObserver()
-  }
-})
-</script>
-
-<template>
-  <section class="el-infinity-loading__wrapper">
-    <div :id="id" class="el-infinity-loading"></div>
-  </section>
-</template>
-
-<style lang="scss">
-.el-infinity-loading {
-  $block-name: &;
-  height: 1px;
-  width: 100%;
-  z-index: 999999;
-  user-select: none;
-  pointer-events: none;
-  background-color: transparent;
-  &__wrapper {
-    position: relative;
-  }
-}
-</style>

package/src/components/elements/McNodata/McNoData.stories.ts

@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McNoData from '@/components/elements/McNodata/McNoData.vue'
-
-const meta = {
-  title: 'McNoData',
-  component: McNoData,
-  tags: ['autodocs'],
-  argTypes: {},
-  args: {},
-  parameters: {
-    componentSubtitle: 'Status: Ready',
-    design: {
-      type: 'figma',
-      url: ''
-    }
-  }
-} satisfies Meta<typeof McNoData>
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    render() {
-      return {
-        components: {
-          McNoData
-        },
-        template: `
-        <div style="height: 500px">
-          <mc-no-data title="No data" />
-        </div>
-         `
-      }
-    }
-};