mediacube-ui-v2 0.0.5 → 0.0.7

package/src/components/patterns/McFilter/McFilterChip/McFilterChip.stories.ts

@@ -1,37 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McFilterChip from './McFilterChip.vue'
-
-const meta = {
-  title: 'McFilterChip',
-  component: McFilterChip,
-  tags: ['autodocs'],
-  argTypes: {
-    tag: { control: 'object' },
-    closable: { control: 'boolean' },
-    isActive: { control: 'boolean' }
-  },
-  args: {
-    tag: {
-      id: 172958897132595070,
-      categoryName: 'Поиск',
-      title: 'McPay',
-      value: 'McPay',
-      category: 'email'
-    },
-    closable: true,
-    isActive: true
-  },
-  parameters: {
-    componentSubtitle: 'Status: Ready',
-    design: {
-      type: 'figma',
-      url: ''
-    }
-  }
-} satisfies Meta<typeof McFilterChip>
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {}
-}

package/src/components/patterns/McFilter/McFilterChip/McFilterChip.vue

@@ -1,98 +0,0 @@
-<script setup lang="ts">
-import McTitle from '@/components/elements/McTitle/McTitle.vue'
-import McChip from '@/components/elements/McChip/McChip.vue'
-import { computed, type PropType } from 'vue'
-import type { ChipVariationUnion } from '@/types'
-import { ChipSize, Weights } from '@/enums'
-import { type IFilterTag } from '@/types/IFilter'
-
-const emit = defineEmits<{
-  (e: 'close'): void
-}>()
-
-const props = defineProps({
-  /**
-   *  Объект тэга
-   */
-  tag: {
-    type: Object as PropType<IFilterTag>,
-    required: true
-  },
-  /**
-   *  Закрывающийся
-   */
-  closable: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   *  Активный
-   */
-  isActive: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  }
-})
-
-const computedCategory = computed((): string => {
-  const append = props.tag.title ? ':' : ''
-  return `${props.tag.categoryName}${append}`
-})
-
-const computedVariation = computed((): ChipVariationUnion => {
-  return props.closable ? 'purple-invert' : 'hover-gray'
-})
-
-const classes = computed((): { [key: string]: boolean } => {
-  return {
-    'mc-filter-chip': true,
-    'mc-filter-chip--closable': props.closable,
-    'mc-filter-chip--is-active': props.isActive
-  }
-})
-
-const handleChipClick = (e: Event): void => {
-  e.stopPropagation()
-  /**
-   * Событие по закрытию тэга
-   */
-  emit('close')
-}
-</script>
-
-<template>
-  <mc-chip
-    :closable="closable"
-    :variation="computedVariation"
-    :class="classes"
-    :size="ChipSize.S"
-    @close="handleChipClick"
-  >
-    <mc-title v-if="tag.categoryName" :weight="Weights.SemiBold">{{ computedCategory }}</mc-title
-    >&nbsp;
-    <mc-title v-if="tag.title">{{ tag.title }}</mc-title>
-  </mc-chip>
-</template>
-
-<style lang="scss">
-@use 'sass:color' as sasscolor;
-@use '../../../../assets/tokens/spacings' as *;
-@use '../../../../assets/tokens/colors' as *;
-.mc-filter-chip {
-  $block-name: &;
-  border-radius: $space-50;
-  &--closable {
-    border-radius: $space-150;
-    &:hover {
-      cursor: pointer;
-      background-color: sasscolor.scale($color-purple, $lightness: 60%);
-    }
-  }
-  &--is-active {
-    background-color: sasscolor.scale($color-purple, $lightness: 60%);
-  }
-  .mc-title {
-    width: auto;
-  }
-}
-</style>

package/src/components/patterns/McFilter/McFilterTags/McFilterTags.stories.ts

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McFilterTags from './McFilterTags.vue'
-import { defaultPlaceholders, filters } from '@/mocks/filterMocks'
-
-const meta = {
-  title: 'McFilterTags',
-  component: McFilterTags,
-  tags: ['autodocs'],
-  argTypes: {},
-  args: {
-    modelValue: {
-      email: 'McPay',
-      countries: { is: { '1': 'Беларусь', '3': 'Украина' } },
-      views_count: { more: 1, less: 10000 },
-      created_at: { more: '2024-10-01', less: '2024-11-30' },
-      tags: { is: { Piece: 'Piece' } }
-    },
-    activeTag: {
-      id: 172959013349119550,
-      categoryName: 'Поиск',
-      title: 'McPay',
-      value: 'McPay',
-      category: 'email'
-    },
-    filters: filters,
-    placeholders: defaultPlaceholders
-  },
-  parameters: {
-    componentSubtitle: 'Status: Ready',
-    design: {
-      type: 'figma',
-      url: ''
-    }
-  }
-} satisfies Meta<typeof McFilterTags>
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {}
-}

package/src/components/patterns/McFilter/McFilterTags/McFilterTags.vue

@@ -1,377 +0,0 @@
-<script setup lang="ts">
-//@ts-ignore
-import { dayjs } from '@/utils/dayjs'
-
-import McButton from '@/components/elements/McButton/McButton.vue'
-import McTooltip from '@/components/elements/McTooltip/McTooltip.vue'
-import McTitle from '@/components/elements/McTitle/McTitle.vue'
-import McGridRow from '@/components/patterns/McGridRow/McGridRow.vue'
-import McGridCol from '@/components/patterns/McGridCol/McGridCol.vue'
-import McFilterChip from '@/components/patterns/McFilter/McFilterChip/McFilterChip.vue'
-import { computed, type PropType, ref, watch } from 'vue'
-import { useRandomNumber } from '@/composables/useRandomNumber'
-import { TooltipPositions, TooltipSizes } from '@/enums'
-import { useHelper } from '@/composables/useHelper'
-import { FilterRelations, FilterTypes } from '@/enums/Filter'
-import type {
-  FilterConditionName,
-  IFilter,
-  IFilterTag,
-  IFilterPlaceholders,
-  IFilterParsedValueFilterName,
-  FilterMoreLessConditionName,
-  RangeFilterValue,
-  DateFilterValue
-} from '@/types/IFilter'
-
-const helper = useHelper()
-const randomNumber = useRandomNumber()
-
-const emit = defineEmits<{
-  (e: 'tag-click', value: IFilterTag): void
-  (e: 'tag-change', value: IFilterParsedValueFilterName): void
-  (e: 'clear'): void
-}>()
-const props = defineProps({
-  /**
-   *  Данные фильтра
-   */
-  modelValue: {
-    type: Object as PropType<IFilterParsedValueFilterName>,
-    default: () => ({})
-  },
-  /**
-   *  Типы фильтров
-   */
-  filters: {
-    type: Array as PropType<IFilter[]>,
-    required: true,
-    default: () => []
-  },
-  /**
-   *  Переводы локализаций
-   */
-  placeholders: {
-    type: Object as PropType<IFilterPlaceholders>,
-    required: true
-  },
-  /**
-   *  Активный тэг
-   */
-  activeTag: {
-    type: Object as PropType<IFilterTag | null>,
-    default: () => ({})
-  },
-  useTimezone: {
-    type: Boolean as PropType<boolean>,
-    default: true
-  }
-})
-
-const simpleValues = ref<IFilterParsedValueFilterName>({})
-const relationValues = ref<IFilterParsedValueFilterName>({})
-const prettyActiveTag = ref<IFilterTag | null>(null)
-
-const fastFilterTags = computed((): IFilterTag[] => {
-  return simpleTags.value.filter((st) => st && st.type === FilterTypes.Fast)
-})
-
-const tagsWithoutFast = computed(() => {
-  return simpleTags.value.filter((st) => st && st.type !== FilterTypes.Fast)
-})
-
-const simpleTags = computed((): IFilterTag[] => {
-  const tags: IFilterTag[] = []
-  !helper.isEmpty(simpleValues.value) &&
-    Object.entries(simpleValues.value).forEach(([key, value]) => {
-      const _key = key as string
-      let _value = value as FilterConditionName
-
-      const filter: IFilter = props.filters.find((f) => f.value === _key) || ({} as IFilter)
-      if (filter && filter.type === FilterTypes.Fast) {
-        tags.push({
-          id: randomNumber.timestamp(5),
-          categoryName: filter?.name,
-          category: _key,
-          type: FilterTypes.Fast
-        } as IFilterTag)
-      } else if (filter) {
-        _value = value as FilterMoreLessConditionName
-        const from = _value.more ? `${props.placeholders.from} ${getFormattedVal(_value.more, filter)}` : ''
-
-        const to = _value.less
-          ? `${props.placeholders.to} ${getFormattedVal(
-              filter.type === FilterTypes.Date
-                ? props.useTimezone
-                  ? dayjs(_value.less).subtract(1, 'days').format()
-                  : dayjs(_value.less).format()
-                : _value.less,
-              filter
-            )}`
-          : ''
-        const space = from && to ? ' ' : ''
-        const title = typeof value === 'object' ? `${from}${space}${to}`.toLowerCase() : value
-        tags.push({
-          id: randomNumber.timestamp(5),
-          categoryName: filter?.name,
-          title,
-          value,
-          category: _key
-        } as IFilterTag)
-      }
-    })
-  return tags
-})
-
-const relationRows = computed((): IFilterTag[][] => {
-  let tags: IFilterTag[][] = []
-
-  if (!helper.isEmpty(relationValues.value)) {
-    tags = Object.entries(relationValues.value).map(([relationKey, relationVal]) => {
-      const _relationKey = relationKey as string
-      const _relationVal = relationVal as IFilterParsedValueFilterName
-
-      if (relationKey === FilterRelations.Exists) {
-        const empties: IFilterTag[] = Object.keys(_relationVal).map((key) => {
-          const filter = props.filters.find((f) => f.value === key)
-          return {
-            id: randomNumber.timestamp(5),
-            categoryName: filter?.name,
-            value: key,
-            category: key,
-            relationKey,
-            closable: true
-          } as IFilterTag
-        })
-        const head = {
-          id: randomNumber.timestamp(5),
-          categoryName: props.placeholders.actions.empty,
-          relationKey: FilterRelations.Exists
-        } as IFilterTag
-
-        return [head, ...empties]
-      }
-      const values: IFilterTag[] = []
-      Object.entries(_relationVal).forEach(([categoryKey, categoryVal]) => {
-        const _categoryKey = categoryKey as string
-        const _categoryVal = categoryVal as FilterConditionName
-
-        const filter: IFilter = props.filters.find((f) => f.value === _categoryKey) || ({} as IFilter)
-        Object.entries(_categoryVal).forEach(([key, val]) => {
-          values.push({
-            id: randomNumber.timestamp(5),
-            categoryName: filter?.name,
-            title: val,
-            value: key,
-            category: _categoryKey,
-            relationKey,
-            closable: true
-          } as IFilterTag)
-        })
-      })
-      const head = {
-        id: randomNumber.timestamp(5),
-        //@ts-ignore
-        categoryName: props.placeholders.actions?.[_relationKey],
-        relationKey
-      } as IFilterTag
-
-      return [head, ...values]
-    })
-  }
-  return tags.filter((t) => t.length > 1)
-})
-
-const hasButtonClear = computed(() => {
-  return relationRows.value.length || simpleTags.value.length
-})
-
-const splitTags = (value: FilterConditionName) => {
-  simpleValues.value = {}
-  relationValues.value = {}
-  if (helper.isEmpty(value)) return
-  addInitTags(value)
-}
-
-const addInitTags = (parentVal: FilterConditionName, parentKey?: string) => {
-  const relationKeys = [FilterRelations.Is, FilterRelations.IsNot, FilterRelations.Exists]
-
-  for (let [key, val] of Object.entries(parentVal)) {
-    if (relationKeys.includes(key as FilterRelations)) {
-      relationValues.value[key] = {
-        ...((relationValues.value[key] || {}) as object),
-        ...(parentKey ? { [parentKey]: val } : {})
-      } as FilterConditionName
-      continue
-    }
-    if (val.constructor !== Object && parentKey) {
-      simpleValues.value[parentKey] = parentVal
-      continue
-    }
-    const filter = props.filters.find((f) => f.value === key)
-    if (filter && filter.type === FilterTypes.Fast) {
-      simpleValues.value[key] = { value: key } as FilterConditionName
-      continue
-    }
-    val && addInitTags(val, key)
-  }
-}
-
-const onTagClick = (tag: IFilterTag) => {
-  prettyActiveTag.value = helper.isEqual(prettyActiveTag.value, tag) ? null : tag
-  /**
-   * Событие по клику на тэг
-   */
-  emit('tag-click', tag)
-}
-const onTagClose = (tag: IFilterTag, relationKey?: FilterRelations) => {
-  const value = helper.cloneDeep(props.modelValue)
-  switch (relationKey) {
-    case FilterRelations.Exists:
-      delete value[tag.category][relationKey]
-      break
-    case FilterRelations.Is:
-    case FilterRelations.IsNot:
-      //@ts-ignore
-      delete value[tag.category][relationKey][tag.value]
-      if (helper.isEmpty(value[tag.category][relationKey])) {
-        delete value[tag.category][relationKey]
-      }
-      break
-    default:
-      delete value[tag.category]
-      break
-  }
-
-  if (helper.isEmpty(value[tag.category])) {
-    delete value[tag.category]
-  }
-  /**
-   * Событие по изменению набора тэгов
-   */
-  emit('tag-change', value as IFilterParsedValueFilterName)
-}
-
-const handleClear = () => {
-  /**
-   * Событие по очистке всех тэгов
-   */
-  emit('clear')
-}
-
-const getFormattedVal = (val: RangeFilterValue | DateFilterValue, filter: IFilter) => {
-  switch (filter.type) {
-    case FilterTypes.Date:
-      return dayjs(val).format('DD.MM.YYYY')
-    case FilterTypes.Range:
-      return getFormattedNum(val)
-    default:
-      return val
-  }
-}
-
-const getFormattedNum = (num: RangeFilterValue) => {
-  return num
-}
-
-const checkTagIsActive = (tag: IFilterTag) => {
-  return helper.isEqual(prettyActiveTag.value, tag)
-}
-
-watch(
-  () => props.modelValue,
-  (val) => {
-    splitTags(val)
-  },
-  { deep: true, immediate: true }
-)
-
-watch(
-  () => props.activeTag,
-  (val) => {
-    prettyActiveTag.value = val
-  },
-  { immediate: true }
-)
-</script>
-
-<template>
-  <div class="mc-filter-tags">
-    <mc-title>{{ props.placeholders.added_filters }}</mc-title>
-    <div class="mc-filter-tags__body">
-      <div class="mc-filter-tags__body-left">
-        <mc-grid-row v-if="tagsWithoutFast.length" :gutter-x="4" :gutter-y="8">
-          <mc-grid-col v-for="tag in tagsWithoutFast" :key="tag.id">
-            <mc-filter-chip
-              :tag="tag"
-              :is-active="checkTagIsActive(tag)"
-              closable
-              @click="() => onTagClick(tag)"
-              @close="() => onTagClose(tag)"
-            />
-          </mc-grid-col>
-        </mc-grid-row>
-        <template v-if="relationRows.length">
-          <mc-grid-row v-for="(row, index) in relationRows" :key="index" :gutter-x="4" :gutter-y="8">
-            <mc-grid-col v-for="tag in row" :key="tag.id">
-              <mc-filter-chip
-                :tag="tag"
-                :is-active="checkTagIsActive(tag)"
-                :closable="tag.closable"
-                @click="() => onTagClick(tag)"
-                @close="() => onTagClose(tag, row[0].relationKey)"
-              />
-            </mc-grid-col>
-          </mc-grid-row>
-        </template>
-        <mc-grid-row v-if="fastFilterTags.length" :gutter-x="4" :gutter-y="8">
-          <mc-grid-col v-for="tag in fastFilterTags" :key="tag.id">
-            <mc-tooltip :content="tag.description || ''" :placement="TooltipPositions.Top" :size="TooltipSizes.S">
-              <mc-filter-chip :tag="tag" closable @close="() => onTagClose(tag)" />
-            </mc-tooltip>
-          </mc-grid-col>
-        </mc-grid-row>
-      </div>
-      <div class="mc-filter-tags__body-right">
-        <mc-button v-if="hasButtonClear" variation="dark-gray-outline" @click="handleClear">
-          {{ placeholders.actions.clear }}
-        </mc-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@use '../../../../assets/styles/mixins' as *;
-@use '../../../../assets/tokens/spacings' as *;
-@use '../../../../assets/tokens/colors' as *;
-@use '../../../../assets/tokens/border-radius' as *;
-.mc-filter-tags {
-  $block-name: &;
-  @include child-indent-bottom($space-100);
-  &__body {
-    display: flex;
-    justify-content: space-between;
-    padding: $space-100;
-    border: 1px solid $color-outline-gray;
-    border-radius: $radius-100;
-    background-color: $color-white;
-    min-height: $space-500;
-    &-left {
-      flex-grow: 1;
-    }
-    &-right {
-      margin-inline-start: $space-100;
-      .mc-button {
-        padding: $space-50 $space-150;
-        height: $space-300;
-      }
-    }
-    .mc-grid-row {
-      &:not(:last-child) {
-        margin-bottom: $space-50 !important;
-      }
-    }
-  }
-}
-</style>

package/src/components/patterns/McFilter/McFilterTypeDate/McFilterTypeDate.stories.ts

@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McFilterTypeDate from '@/components/patterns/McFilter/McFilterTypeDate/McFilterTypeDate.vue'
-import { defaultPlaceholders } from '@/mocks/filterMocks'
-
-const meta = {
-    title: 'McFilterTypeDate',
-    component: McFilterTypeDate,
-    tags: ['autodocs'],
-    argTypes: {
-        useTimezone: { control: 'boolean' },
-    },
-    args: {
-        placeholders: defaultPlaceholders,
-        useTimezone: false,
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: '',
-        },
-    },
-} satisfies Meta<typeof McFilterTypeDate>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {}
-};

package/src/components/patterns/McFilter/McFilterTypeDate/McFilterTypeDate.vue

@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import McDatepicker from '@/components/elements/McDatepicker/McDatepicker.vue'
-import { computed, type PropType } from 'vue'
-import type { IBaseFilter, IFilterCondition, IFilterDateValue } from '@/types/IFilter'
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: IFilterCondition): void
-}>()
-const props = defineProps({
-  /**
-   *  Значение
-   */
-  modelValue: {
-    type: Object as PropType<IFilterDateValue>,
-    default: () => ({}) as IFilterDateValue
-  },
-  /**
-   *  Объект выбранного
-   *  фильтра
-   */
-  filter: {
-    type: Object as PropType<IBaseFilter>,
-    default: () => ({})
-  },
-  /**
-   *  Переводы локализаций
-   */
-  placeholders: {
-    type: Object,
-    required: true
-  },
-  useTimezone: {
-    type: Boolean as PropType<boolean>,
-    default: true
-  }
-})
-
-const period = computed({
-  get() {
-    return props.modelValue ? [props.modelValue.more, props.modelValue.less] : []
-  },
-  set(val) {
-    const period: IFilterDateValue = { more: val?.[0], less: val?.[1] }
-    /**
-     * Событие по изменению периода
-     */
-    emit('update:modelValue', { value: period })
-  }
-})
-</script>
-
-<template>
-  <mc-datepicker
-    v-model="period"
-    :placeholders="placeholders.calendar"
-    :placeholder="filter.placeholder || placeholders.choose"
-    :use-timezone="props.useTimezone"
-    name="condition_dates"
-    class="mc-filter-type-date"
-    range
-  />
-</template>
-
-<style lang="scss">
-.mc-filter-type-date {
-  $block-name: &;
-  width: 300px;
-}
-</style>

package/src/components/patterns/McFilter/McFilterTypeRange/McFilterTypeRange.stories.ts

@@ -1,26 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McFilterTypeRange from './McFilterTypeRange.vue'
-import { defaultPlaceholders } from '@/mocks/filterMocks'
-
-const meta = {
-    title: 'McFilterTypeRange',
-    component: McFilterTypeRange,
-    tags: ['autodocs'],
-    argTypes: {},
-    args: {
-        placeholders: defaultPlaceholders,
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: '',
-        },
-    },
-} satisfies Meta<typeof McFilterTypeRange>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {}
-};