mediacube-ui-v2 0.0.2 → 0.0.4

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

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

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

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

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

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

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

@@ -0,0 +1,26 @@
+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: {}
+};