mediacube-ui-v2 0.0.2 → 0.0.4

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

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import McFieldText from '@/components/elements/McFieldText/McFieldText.vue'
+import type { IFilterCondition, IFilterPlaceholders, IFilterRangeValue, IRangeFilter } from '@/types/IFilter.js'
+import { computed, type PropType, ref, watch } from 'vue'
+import { InputTypes } from '@/enums'
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: IFilterCondition): void
+}>()
+const props = defineProps({
+  /**
+   *  Значение
+   */
+  modelValue: {
+    type: Object as PropType<IFilterRangeValue>,
+    default: () => ({
+      more: null,
+      less: null
+    } as IFilterRangeValue)
+  },
+  /**
+   *  Объект выбранного
+   *  фильтра
+   */
+  filter: {
+    type: Object as PropType<IRangeFilter>,
+    default: () => ({})
+  },
+  /**
+   *  Переводы локализаций
+   */
+  placeholders: {
+    type: Object as PropType<IFilterPlaceholders>,
+    required: true
+  }
+})
+
+const currentMore = ref<string | number | null>(null)
+const currentLess = ref<string | number | null>(null)
+
+const more = computed<string | number | null>({
+  get() {
+    return props.modelValue?.more
+  },
+  set(val) {
+    currentMore.value = val || null
+    emitValue()
+  }
+})
+
+const less = computed<string | number | null>({
+  get() {
+    return props.modelValue?.less
+  },
+  set(val) {
+    currentLess.value = val || null
+    emitValue()
+  }
+})
+
+watch(
+  () => props.modelValue,
+  (val: IFilterRangeValue): void => {
+    if (val) {
+      currentMore.value = props.modelValue.more || null
+      currentLess.value = props.modelValue.less || null
+    }
+  },
+  { deep: true }
+)
+
+const hasValue = (val: string | number | null) => {
+  return val || Number.isInteger(val)
+}
+
+const emitValue = () => {
+  const hasMore = hasValue(currentMore.value)
+  const hasLess = hasValue(currentLess.value)
+  const hasMin = props.filter.min && hasValue(props.filter.min)
+  const hasMax = props.filter.max && hasValue(props.filter.max)
+
+  let more = hasMore ? Number(currentMore.value) : null
+  let less = hasLess ? Number(currentLess.value) : null
+
+  if (props.filter.min && more && more < props.filter.min && hasMin) {
+    more = props.filter.min
+  }
+  if (props.filter.max && less && less > props.filter.max && hasMax) {
+    less = props.filter.max
+  }
+  if (props.filter.max && more && more > props.filter.max && hasMax) {
+    more = props.filter.max
+  }
+  if (props.filter.min && less && less < props.filter.min && hasMin) {
+    less = props.filter.min
+  }
+  const result: IFilterRangeValue = {
+    more: more || null,
+    less: less || null
+  }
+  currentLess.value = less
+  currentMore.value = more
+
+  /**
+   * Событие по изменению интервала
+   */
+  emit('update:modelValue', { value: result })
+}
+</script>
+
+<template>
+  <div class="mc-filter-type-range">
+    <mc-field-text
+      v-model="more"
+      :placeholder="placeholders.from.toLowerCase()"
+      :type="InputTypes.AmountFormat"
+      name="range_more"
+    />
+    <mc-field-text
+      v-model="less"
+      :placeholder="placeholders.to.toLowerCase()"
+      :type="InputTypes.AmountFormat"
+      name="range_less"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+@use '../../../../assets/styles/mixins' as *;
+@use '../../../../assets/tokens/spacings' as *;
+.mc-filter-type-range {
+  $block-name: &;
+  display: flex;
+  @include child-indent-right($space-100);
+  .mc-field-text {
+    width: 146px;
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import McButton from '@/components/elements/McButton/McButton.vue'
+import McTitle from '@/components/elements/McTitle/McTitle.vue'
+import McFieldSelect from '@/components/elements/McFieldSelect/McFieldSelect.vue'
+import McFieldText from '@/components/elements/McFieldText/McFieldText.vue'
+import { computed, type PropType, ref, watch, nextTick } from 'vue'
+import type {
+  IFilterPlaceholders,
+  FilterRelationValue,
+  IRelationFilter,
+  FilterOption,
+  IFilterParsedValueFilter,
+  FilterConditionValue,
+  FilterRelationName,
+  IFilterCondition
+} from '@/types'
+import { FilterRelations } from '@/enums'
+import { useHelper } from '@/composables/useHelper'
+import { useDebounceFn } from '@vueuse/core'
+
+const helper = useHelper()
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: IFilterCondition): void
+}>()
+const props = defineProps({
+  /**
+   *  Значение
+   */
+  modelValue: {
+    type: Object as PropType<FilterRelationValue>,
+    default: () => ({})
+  },
+  /**
+   *  Объект выбранного
+   *  фильтра
+   */
+  filter: {
+    type: Object as PropType<IRelationFilter>,
+    default: () => ({})
+  },
+  /**
+   *  Переводы локализаций
+   */
+  placeholders: {
+    type: Object as PropType<IFilterPlaceholders>,
+    required: true
+  },
+  /**
+   *  Текущее значение
+   *  добавленных фильтров
+   */
+  currentValues: {
+    type: Object as PropType<IFilterParsedValueFilter>,
+    default: () => ({})
+  }
+})
+const debounce = useDebounceFn((method) => {
+  method()
+}, 100)
+const relations = ref<FilterRelations[]>(Object.values(FilterRelations))
+const relationType = ref<FilterRelations>(FilterRelations.Is)
+const ajaxOptions = ref<FilterOption[]>([])
+const loading = ref<boolean>(false)
+
+const component = computed(() => {
+  return props.filter.is_text ? McFieldText : McFieldSelect
+})
+
+const computedPlaceholder = computed(() => {
+  return props.filter.placeholder || props.filter.is_text ? props.placeholders.enter : props.placeholders.choose
+})
+
+const isAjax = computed((): boolean => {
+  return props.filter.getAjaxOptions?.constructor === Function
+})
+
+const computedOptions = computed(() => {
+  let options: FilterOption[] = isAjax.value ? ajaxOptions.value : props.filter.options || []
+
+  if (props.currentValues[props.filter.value]) {
+    const category: FilterConditionValue = props.currentValues[props.filter.value] || ({} as FilterRelationValue)
+
+    let selected: FilterConditionValue[] = []
+    for (let [key, val] of Object.entries(category)) {
+      if (key === FilterRelations.Exists) {
+        return []
+      }
+      selected = [...selected, ...(Array.isArray(val) ? val : [[val]])]
+    }
+
+    options = options.filter((o) => !selected.includes(String(o.value)))
+  }
+
+  return options
+})
+
+const selectedOptionValue = computed<FilterRelationValue>({
+  get() {
+    let val: FilterConditionValue = props.modelValue
+    if (val) {
+      for (let [relationKey, relationVal] of Object.entries(props.modelValue)) {
+        let _relationKey = relationKey as string
+        let _relationVal = relationVal as string
+
+        if (_relationKey === FilterRelations.Exists) {
+          val = ''
+        } else {
+          val = _relationVal?.[0] || ''
+        }
+      }
+      if (isAjax.value && val) {
+        addAjaxOption(val as FilterRelationValue)
+      }
+    }
+    return val as FilterRelationValue
+  },
+  set(val: FilterRelationValue) {
+    if (relationType.value === FilterRelations.Exists) return
+    setValue(val)
+  }
+})
+
+const changeRelationType = (relation: FilterRelations): void => {
+  if (relationType.value === relation) return
+  relationType.value = relation
+  setValue(selectedOptionValue.value)
+}
+const setAjaxOptions = async (value: string): Promise<void> => {
+  loading.value = true
+  ajaxOptions.value = props.filter.getAjaxOptions && (await props.filter.getAjaxOptions(value))
+  loading.value = false
+}
+
+const addAjaxOption = async (value: FilterRelationValue): Promise<void> => {
+  const option = props.filter.getAjaxOne && (await props.filter.getAjaxOne(value))
+  ajaxOptions.value = helper.uniqWith([...ajaxOptions.value, option], helper.isEqual)
+}
+
+const handleSearchChange = (value: string): void => {
+  if (!isAjax.value || !value) return
+  debounce(() => setAjaxOptions(value))
+}
+
+const setValue = (value: FilterRelationValue): void => {
+  let currentValue: FilterRelationValue | null = null
+  let currentValueName: FilterRelationName | null = null
+  const hasVal = value || Number.isInteger(value)
+  if (relationType.value !== FilterRelations.Exists && hasVal) {
+    const name = props.filter.is_text
+      ? value
+      : computedOptions.value.find((o) => String(o.value) === String(value))?.name
+    currentValue = { [relationType.value]: [String(value)] }
+    currentValueName = { [relationType.value]: { [String(value)]: name } }
+  }
+
+  if (relationType.value === FilterRelations.Exists && !props.currentValues[props.filter.value]) {
+    currentValue = { [FilterRelations.Exists]: 0 }
+    currentValueName = { [FilterRelations.Exists]: null }
+  }
+  /**
+   * Событие по изменению значения
+   */
+
+  const payload: IFilterCondition = {
+    value: currentValue as FilterRelationValue,
+    valueName: currentValueName as FilterRelationName
+  }
+  emit('update:modelValue', payload)
+}
+
+watch(
+  () => props.modelValue,
+  (val): void => {
+    if (val) {
+      for (let relationKey of Object.keys(val)) {
+        relationType.value = relationKey as FilterRelations
+      }
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.filter,
+  (): void => {
+    relationType.value = FilterRelations.Is
+    nextTick(() => (ajaxOptions.value = []))
+  }
+)
+</script>
+
+<template>
+  <component
+    :is="component"
+    v-model="selectedOptionValue as string"
+    :options="computedOptions"
+    :internal-search="!isAjax"
+    :placeholder="computedPlaceholder"
+    :loading="loading"
+    :disabled="relationType === FilterRelations.Exists"
+    hide-selected
+    class="mc-filter-type-relation"
+    :name="`relation_${props.filter.type}`"
+    @search-change="(payload) => handleSearchChange(payload as string)"
+  >
+    <template #header>
+      <div class="mc-filter-type-relation__header">
+        <mc-title>{{ placeholders.condition }}</mc-title>
+        <div class="mc-filter-type-relation__buttons">
+          <mc-button
+            v-for="relation in relations"
+            :key="relation"
+            :variation="relationType === relation ? 'purple' : 'dark-gray-outline'"
+            @click="() => changeRelationType(relation)"
+          >
+            {{ placeholders.actions[`${relation === FilterRelations.Exists ? 'empty' : relation}`] }}
+          </mc-button>
+        </div>
+      </div>
+    </template>
+  </component>
+</template>
+
+<style lang="scss">
+@use '../../../../assets/styles/mixins' as *;
+@use '../../../../assets/tokens/spacings' as *;
+@use '../../../../assets/tokens/sizes' as *;
+.mc-filter-type-relation {
+  $block-name: &;
+  width: 300px;
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: -$space-50;
+    margin-top: -$space-50;
+  }
+  &__buttons {
+    display: flex;
+    @include child-indent-right($space-50);
+    .mc-button {
+      height: $size-300;
+      padding: $space-50 $space-150;
+    }
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import McFieldText from '@/components/elements/McFieldText/McFieldText.vue'
+import { computed, type PropType } from 'vue'
+import type { FilterTextValue, IBaseFilter, IFilterCondition, IFilterPlaceholders } from '@/types'
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: IFilterCondition): void
+}>()
+const props = defineProps({
+  /**
+   *  Значение
+   */
+  modelValue: {
+    type: [String, Number] as PropType<FilterTextValue>,
+    default: null
+  },
+  /**
+   *  Объект выбранного
+   *  фильтра
+   */
+  filter: {
+    type: Object as PropType<IBaseFilter>,
+    default: () => ({})
+  },
+  /**
+   *  Переводы локализаций
+   */
+  placeholders: {
+    type: Object as PropType<IFilterPlaceholders>,
+    required: true
+  }
+})
+
+const text = computed({
+  get(): FilterTextValue {
+    return props.modelValue
+  },
+  set(val: FilterTextValue) {
+    /**
+     * Событие по изменению значения
+     */
+    emit('update:modelValue', { value: val })
+  }
+})
+</script>
+
+<template>
+  <mc-field-text
+    v-model="text"
+    :placeholder="filter.placeholder || placeholders.enter"
+    class="mc-filter-type-text"
+    name="mc_filter_type_text"
+  />
+</template>
+
+<style lang="scss">
+.mc-filter-type-text {
+  $block-name: &;
+  width: 300px;
+}
+</style>

package/src/components/patterns/McGridCol/McGridCol.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import McGridCol from './McGridCol.vue'
+import McGridRow from '@/components/patterns/McGridRow/McGridRow.vue'
+
+const meta = {
+    title: 'McGridCol',
+    component: McGridCol,
+    tags: ['autodocs'],
+    argTypes: {},
+    args: { },
+    parameters: {
+        componentSubtitle: 'Status: Ready (More in McGridRow)',
+        design: {
+            type: 'figma',
+            url: '',
+        },
+    },
+} satisfies Meta<typeof McGridCol>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render() {
+        return {
+            components: { McGridCol, McGridRow },
+            template: `
+                <mc-grid-row>
+                    <mc-grid-col span="4" span-m="8"><div style="background: #e74c3c">1</div></mc-grid-col>
+                    <mc-grid-col span="4" span-m="8"><div style="background: #1abc9c">2</div></mc-grid-col>
+                </mc-grid-row>
+            `,
+        }
+    }
+};

package/src/components/patterns/McGridCol/McGridCol.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+//@ts-ignore
+import _upperFirst from 'lodash/upperFirst'
+import { adaptiveAdditionalProps, adaptivePropsParams, adaptivePropsSizes } from '@/utils/mcGridColAdaptiveProps'
+import { computed, inject } from 'vue'
+import type { IGridGutters } from '@/types/IGrid'
+import type { ColumnSpanUnion } from '@/types/styles/Grid'
+
+const provideData = inject('provideData', { gutterX: 0, gutterY: 0 } as IGridGutters)
+
+const props = defineProps({
+  ...adaptiveAdditionalProps,
+  /**
+   *  Кол-во колонок (всего 12)
+   */
+  span: { type: [String as () => ColumnSpanUnion] },
+
+  /**
+   *  Очерёдность
+   */
+  order: { type: Number },
+
+  /**
+   *  Отступ (margin-left)
+   */
+  offset: { type: Number },
+
+  /**
+   *  Отступ (left)
+   */
+  push: { type: Number },
+
+  /**
+   *  Отступ (right)
+   */
+  pull: { type: Number },
+  /**
+   *  Автоматически тянущаяся колонка
+   *  на всё свободное пространство
+   */
+  stretchSelf: {
+    type: Boolean,
+    default: false
+  },
+
+  /**
+   *  Основа флекса, которая является начальным размером элемента
+   *  (указывать с единицами измерения: px, %...)
+   */
+  basis: {
+    type: String,
+    default: 'auto'
+  }
+})
+
+const classes = computed((): { [key: string]: boolean } => {
+  const list = {} as { [key: string]: boolean }
+  adaptivePropsParams.forEach((value) => {
+    //@ts-ignore
+    list[`mc-grid-col--${value}-${props[value]}`] = !!props[value]
+    adaptivePropsSizes.forEach((size) => {
+      //@ts-ignore
+      const sizeValue = props[`${value}${_upperFirst(size)}`]
+      list[`mc-grid-col--${value}-${size}-${sizeValue}`] = !!sizeValue
+    })
+  })
+  return list
+})
+
+const styles = computed((): { [key: string]: string | number } => {
+  let colStyle = {} as { [key: string]: string | number }
+
+  if (provideData.gutterX !== 0) {
+    colStyle['padding-left'] = `${provideData.gutterX / 2}px`
+    colStyle['padding-right'] = `${provideData.gutterX / 2}px`
+  }
+
+  if (provideData.gutterY !== 0) {
+    colStyle['padding-top'] = `${provideData.gutterY / 2}px`
+    colStyle['padding-bottom'] = `${provideData.gutterY / 2}px`
+  }
+
+  if (props.stretchSelf) {
+    colStyle['flex'] = `1 0 ${props.basis}`
+  } else if (props.basis !== 'auto') {
+    colStyle['flex'] = `0 0 ${props.basis}`
+  }
+
+  return props.order ? { ...colStyle, order: props.order } : colStyle
+})
+</script>
+
+<template>
+  <div :class="classes" :style="styles" class="mc-grid-col">
+    <!-- @slot Слот контента -->
+    <slot />
+  </div>
+</template>
+
+<style lang="scss">
+@use '@/assets/styles/mixins' as *;
+@use '@/assets/tokens/media-queries' as *;
+.mc-grid-col {
+  $block-name: &;
+  box-sizing: border-box;
+  $cols: 12;
+
+  display: block;
+  position: relative;
+  max-width: 100%;
+
+  @mixin generate-col($viewport: '') {
+    @for $i from 1 through $cols {
+      &--span#{$viewport}-#{$i} {
+        flex: 0 0 calc((#{$i} / #{$cols}) * 100%);
+        max-width: calc((#{$i} / #{$cols}) * 100%);
+      }
+
+      &--push#{$viewport}-#{$i} {
+        inset-inline-start: calc((#{$i} / #{$cols}) * 100%);
+      }
+
+      &--pull#{$viewport}-#{$i} {
+        inset-inline-end: calc((#{$i} / #{$cols}) * 100%);
+      }
+
+      &--offset#{$viewport}-#{$i} {
+        margin-inline-start: calc((#{$i} / #{$cols}) * 100%);
+      }
+
+      &--order#{$viewport}-#{$i} {
+        order: #{$i};
+      }
+    }
+  }
+
+  @include generate-col('');
+
+  @media #{$media-query-xs} {
+    @include generate-col('-xs');
+  }
+
+  @media #{$media-query-s} {
+    @include generate-col('-s');
+  }
+
+  @media #{$media-query-m} {
+    @include generate-col('-m');
+  }
+
+  @media #{$media-query-l} {
+    @include generate-col('-l');
+  }
+
+  @media #{$media-query-xl} {
+    @include generate-col('-xl');
+  }
+}
+</style>