mediacube-ui-v2 0.0.5 → 0.0.7

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

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

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

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

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

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

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

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