mediacube-ui-v2 0.0.5 → 0.0.7

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

@@ -1,91 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McFieldRadio from './McFieldRadio.vue'
-import { RadioVariation } from '@/enums/Radio'
-import { Colors } from '@/types/styles/Colors'
-import { Sizes } from '@/types/styles/Sizes'
-import { Directions } from '@/enums/ui/Directions'
-
-const meta = {
-    title: 'McFieldRadio',
-    component: McFieldRadio,
-    tags: ['autodocs'],
-    argTypes: {
-        helpText: { control: 'text' },
-        modelValue: { control: 'none' },
-        value: { control: 'text' },
-        name: { control: 'text' },
-        errors: { control: 'none' },
-        disabled: { control: 'boolean' },
-        tabindex: { control: 'number' },
-        variation: { control: 'select', options: RadioVariation },
-        color: { control: 'select', options: Object.keys(Colors) },
-        iconSize: { control: 'select', options: Object.keys(Sizes) },
-        dir: { control: 'select', options: Directions, }
-    },
-    args: {
-        name: 'default',
-        variation: RadioVariation.Circle,
-        disabled: false,
-        tabindex: 0,
-        color: 'purple',
-        value: '1',
-        modelValue: '1',
-        dir: Directions.Ltr,
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=1%3A2',
-        },
-    },
-} satisfies Meta<typeof McFieldRadio>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {
-        label: 'McFieldRadio',
-        helpText: 'Help text',
-        name: 'default'
-    }
-}
-
-export const Group: Story = {
-    render() {
-        return {
-            components: { McFieldRadio },
-            data() {
-                return {
-                    v: '1',
-                }
-            },
-            template: `
-                <mc-field-radio v-model="v" name="radio" :errors="['Error text']" value="1">McFieldRadio</mc-field-radio>
-                <br />
-                <mc-field-radio v-model="v" name="radio" value="2">McFieldRadio 2</mc-field-radio>
-                <br />
-                Output: {{ v }}
-            `
-        }
-    },
-};
-export const CheckMark: Story = {
-    render() {
-        return {
-            components: { McFieldRadio },
-            data() {
-                return {
-                    v: 'value1',
-                }
-            },
-            template: `
-                <mc-field-radio v-model="v" name="radio2" variation="checkmark" value="value1">McFieldRadio</mc-field-radio>
-                <br />
-                <McFieldRadio v-model="v" name="radio2" variation="checkmark" value="value2">McFieldRadio 2</McFieldRadio>
-                <br />
-                Output: {{ v }}
-            `
-        }
-    },
-};

package/src/components/elements/McFieldRadio/McFieldRadio.vue

@@ -1,258 +0,0 @@
-<script setup lang="ts">
-import McTitle from '../McTitle/McTitle.vue'
-import McSvgIcon from '../McSvgIcon/McSvgIcon.vue'
-import { computed, type PropType, useSlots, watch } from 'vue'
-import { type ColorTypes } from '@/types/styles/Colors'
-import type { SizeTypes } from '@/types/styles/Sizes'
-import { useFieldErrors } from '@/composables/useFieldErrors'
-import type { RadioVariationUnion } from '@/types/IRadio'
-import { Directions } from '@/enums/ui/Directions'
-import { type DirectionsUnion } from '@/types/IDirections'
-import type { IconsListUnion } from '@/types/styles/Icons'
-import { TitleVariations } from '@/enums'
-
-const slots = useSlots()
-const emit = defineEmits(['update:modelValue'])
-const props = defineProps({
-  /**
-   *  Значение
-   */
-  modelValue: {
-    default: null
-  },
-  value: {
-    default: null
-  },
-  /**
-   *  Name
-   */
-  name: {
-    type: String,
-    required: true
-  },
-  /**
-   *  Подпись радио:
-   *
-   */
-  label: {
-    type: [String, Number],
-    default: null
-  },
-  /**
-   *  Вспомогательный текст под инпутом:
-   *
-   */
-  helpText: {
-    type: String,
-    default: null
-  },
-
-  /**
-   *  Ошибки
-   *
-   */
-  errors: {
-    type: Array as PropType<string[]>,
-    default: null
-  },
-  /**
-   *  Отключенное состояние
-   *
-   */
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-
-  /**
-   * Атрибут tabindex для главного элемента
-   *
-   */
-  tabindex: {
-    type: [String, Number]
-  },
-  /**
-   * Вариант активного состояния
-   * circle - внутри круг
-   * checkmark - внутри галочка
-   * */
-  variation: {
-    type: String as () => RadioVariationUnion,
-    default: 'circle'
-  },
-  /**
-   * цвет
-   */
-  color: {
-    type: String as () => ColorTypes,
-    default: 'purple'
-  },
-  iconSize: {
-    type: String as () => SizeTypes,
-    default: '250'
-  },
-  dir: {
-    type: String as () => DirectionsUnion,
-    default: Directions.Ltr
-  }
-})
-const fieldErrors = useFieldErrors(props.errors)
-
-const classes = computed((): { [key: string]: boolean } => {
-  return {
-    'mc-field-radio-button--disabled': props.disabled,
-    'mc-field-radio-button--empty': !props.label && !slots.default,
-    'mc-field-radio-button--rtl': rtl.value
-  }
-})
-const rtl = computed((): boolean => {
-  return props.dir === Directions.Rtl
-})
-
-const activeIcon = computed((): IconsListUnion => {
-  switch (props.variation) {
-    case 'checkmark': {
-      return 'check_circle_solid'
-    }
-    default: {
-      return 'radio--checked'
-    }
-  }
-})
-
-const iconColor = computed((): ColorTypes => {
-  switch (true) {
-    case props.disabled:
-      return 'outline-gray'
-    case inputProps.value.checked:
-      return props.color as ColorTypes
-    default:
-      return 'gray'
-  }
-})
-
-const inputProps = computed((): { [key: string]: any } => {
-  return {
-    disabled: props.disabled,
-    value: props.modelValue,
-    name: props.name,
-    checked: props.value && props.value === props.modelValue,
-    tabindex: props.tabindex,
-    class: 'mc-field-radio-button__input',
-    type: 'radio'
-  }
-})
-
-watch(
-  () => props.modelValue,
-  () => {
-    fieldErrors.toggleErrorVisible()
-  }
-)
-
-const handleChange = () => {
-  emit('update:modelValue', props.value)
-}
-</script>
-
-<template>
-  <label :dir="props.dir" class="mc-field-radio-button" :class="classes">
-    <input checked v-bind="inputProps" @change="handleChange" />
-    <span class="mc-field-radio-button__icon_wrapper">
-      <mc-svg-icon
-        :name="inputProps.checked ? activeIcon : 'circle'"
-        :color="iconColor"
-        :size="props.iconSize"
-        class="mc-field-radio-button__icon"
-      />
-    </span>
-    <span v-if="label || $slots.default" class="mc-field-radio-button__text">
-      <!-- @slot Слот для пользовательской подписи радио -->
-      <slot>
-        <mc-title>{{ label }}</mc-title>
-      </slot>
-      <mc-title
-        v-if="fieldErrors.errorText.value"
-        tag-name="div"
-        color="red"
-        :variation="TitleVariations.Overline"
-        max-width="100%"
-      >
-        {{ fieldErrors.errorText.value }}
-      </mc-title>
-      <br v-if="fieldErrors.errorText.value" />
-      <!-- @slot -->
-      <slot name="footer">
-        <mc-title
-          v-if="props.helpText"
-          tag-name="div"
-          :variation="TitleVariations.Overline"
-          color="gray"
-          max-width="100%"
-        >
-          {{ props.helpText }}
-        </mc-title>
-      </slot>
-    </span>
-  </label>
-</template>
-
-<style lang="scss">
-@use '../../../assets/styles/mixins' as *;
-@use '../../../assets/tokens/sizes' as *;
-@use '../../../assets/tokens/spacings' as *;
-@use '../../../assets/tokens/line-heights' as *;
-@use '../../../assets/tokens/font-sizes' as *;
-@use '../../../assets/tokens/font-families' as *;
-@use '../../../assets/tokens/colors' as *;
-@use '../../../assets/tokens/border-radius' as *;
-.mc-field-radio-button {
-  $block-name: &;
-  font-family: $font-family-main;
-  min-width: $size-250;
-  min-height: $size-250;
-  @include reset();
-  position: relative;
-  line-height: $line-height-200;
-  font-size: $font-size-200;
-  cursor: pointer;
-  display: inline-flex;
-
-  &__icon {
-    &_wrapper {
-      z-index: 1;
-      margin-inline-end: $space-50;
-    }
-  }
-
-  &__text {
-    display: inline-block;
-    margin: 2px 0;
-  }
-
-  &__input {
-    display: none;
-  }
-
-  &--disabled {
-    cursor: auto;
-
-    #{$block-name}__input {
-      & ~ #{$block-name}__icon_wrapper {
-        .mc-svg-icon {
-          border-radius: $radius-circle;
-          background-color: $color-hover-gray;
-        }
-      }
-    }
-  }
-
-  &--empty {
-    padding: 0;
-    margin: 0;
-  }
-  &--rtl {
-    direction: rtl;
-  }
-}
-</style>

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

@@ -1,70 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McFieldRadioGroup from './McFieldRadioGroup.vue'
-import { RadioVariation } from '@/enums/Radio'
-import { RadioGroupDirection } from '@/enums/RadioGroup'
-import { Directions } from '@/enums/ui/Directions'
-
-const meta = {
-    title: 'McFieldRadioGroup',
-    component: McFieldRadioGroup,
-    tags: ['autodocs'],
-    argTypes: {
-        variation: { control: 'select', options: RadioVariation },
-        direction: { control: 'select', options: RadioGroupDirection },
-        dir: { control: 'select', options: Directions },
-        modelValue: { control: 'none' },
-        errors: { control: 'none' },
-        title: { control: 'text' },
-        helpText: { control: 'text' },
-        name: { control: 'text' },
-        disabled: { control: 'boolean' },
-        radioClassName: { control: 'text' },
-    },
-    args: {
-        variation: 'checkmark',
-        title: 'McFieldRadioGroup title',
-        helpText: 'Help text',
-        name: 'McFieldRadioGroup',
-        disabled: false,
-        radioClassName: '',
-        direction: RadioGroupDirection.Column,
-        dir: Directions.Ltr,
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=1%3A2',
-        },
-    },
-} satisfies Meta<typeof McFieldRadioGroup>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {
-        options: ['McPay Advance', 'McPay Expresses'],
-        modelValue: 'McPay Advance',
-    }
-}
-export const LiveGroup: Story = {
-    render() {
-        return {
-            components: { McFieldRadioGroup },
-            data() {
-                return {
-                    v: 1,
-                    options: [
-                      { label: 'McPay Advance', value: 1, helpText: 'Best way' },
-                        { label: 'McPay Expresses', value: 2, helpText: 'Best way' },
-                    ],
-                }
-            },
-            template: `
-                <mc-field-radio-group v-model="v" :errors="['Select your boost']" :options="options" help-text="Go" name="radio-group" value="value1" />
-                <br />
-                Output: {{ v }}
-            `
-        }
-    },
-};

package/src/components/elements/McFieldRadioGroup/McFieldRadioGroup.vue

@@ -1,215 +0,0 @@
-<script setup lang="ts">
-import McFieldRadioButton from '../McFieldRadio/McFieldRadio.vue'
-import McTitle from '../McTitle/McTitle.vue'
-import { computed, type PropType } from 'vue'
-import { useFieldErrors } from '@/composables/useFieldErrors'
-import type { IRadioGroupOptions, IRadioGroupOption } from '@/types/IRadioGroup'
-import { type DirectionsUnion } from '@/types/IDirections'
-import { Directions } from '@/enums/ui/Directions'
-import type { RadioGroupDirectionUnion } from '@/types/IRadioGroup'
-import { RadioGroupDirection } from '@/enums/RadioGroup'
-import type { RadioVariationUnion } from '@/types/IRadio'
-import { TitleVariations } from '@/enums'
-
-const emit = defineEmits(['update:modelValue', 'change'])
-//@ts-ignore
-const props = defineProps({
-  modelValue: [String, Number],
-  /**
-   *  Объект или массив данных
-   */
-  options: {
-    type: [Array as PropType<IRadioGroupOptions>],
-    default: () => []
-  },
-  /**
-   *  Заголовок:
-   *
-   */
-  title: {
-    type: String,
-    default: ''
-  },
-  /**
-   *  Вспомогательный текст под инпутом:
-   *
-   */
-  helpText: {
-    type: String,
-    default: ''
-  },
-  /**
-   *  Ошибки
-   *
-   */
-  errors: {
-    type: Array as PropType<string[]>,
-    default: () => []
-  },
-  /**
-   *  Name
-   */
-  name: {
-    type: String,
-    required: true
-  },
-  /**
-   *  Отключенное состояние
-   *  всего списка
-   */
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   *  Добавление пользовательского
-   *  класса к radio
-   */
-  radioClassName: {
-    type: String,
-    default: ''
-  },
-  /**
-   *  Направление списка
-   *  `column`, `row`
-   */
-  direction: {
-    type: String as () => RadioGroupDirectionUnion,
-    default: RadioGroupDirection.Column
-  },
-  dir: {
-    type: String as () => DirectionsUnion,
-    default: Directions.Ltr
-  },
-  /**
-   * Вариант активного состояния
-   * circle - внутри круг
-   * checkmark - внутри галочка
-   * */
-  variation: {
-    type: String as () => RadioVariationUnion,
-    default: 'circle'
-  }
-})
-
-const fieldErrors = useFieldErrors(props.errors)
-
-const computedOptions = computed((): object => {
-  if (!props.options.length) return []
-  return props.options.map((o: IRadioGroupOption, i: number) => {
-    const optionData = typeof o === 'object' ? o : ({ label: o, value: o } as IRadioGroupOption)
-    return {
-      id: Date.now() + i,
-      ...optionData,
-      disabled: props.disabled || optionData.disabled,
-      value: optionData.value,
-      modelValue: props.modelValue,
-      class: props.radioClassName,
-      dir: props.dir,
-      variation: props.variation
-    }
-  })
-})
-
-const classes = computed((): { [key: string]: boolean } => {
-  return {
-    [`mc-field-radio-group--direction-${props.direction}`]: !!props.direction
-  }
-})
-
-/**
- * Событие по смене выбора
- * @property {event}
- */
-const handleInput = (e: string | number): void => {
-  fieldErrors.toggleErrorVisible()
-  emit('update:modelValue', e)
-  emit('change', e)
-}
-</script>
-
-<template>
-  <div :dir="props.dir" class="mc-field-radio-group" :class="classes">
-    <div class="mc-field-radio-group__header">
-      <!-- @slot Слот заголовка -->
-      <slot name="header">
-        <mc-title v-if="props.title">{{ props.title }}</mc-title>
-      </slot>
-    </div>
-    <div class="mc-field-radio-group__buttons">
-      <mc-field-radio-button
-        v-for="radio in computedOptions"
-        :key="radio.id"
-        v-bind="radio"
-        :name="props.name"
-        @update:modelValue="handleInput"
-      />
-    </div>
-    <div v-if="fieldErrors.errorText.value || props.helpText || $slots.footer" class="mc-field-radio-group__footer">
-      <mc-title
-        v-if="fieldErrors.errorText.value"
-        tag-name="div"
-        color="red"
-        :variation="TitleVariations.Overline"
-        max-width="100%"
-      >
-        {{ fieldErrors.errorText.value }}
-      </mc-title>
-      <br v-if="fieldErrors.errorText.value" />
-      <!-- @slot Слот доп. текста под инпутом -->
-      <slot name="footer">
-        <mc-title
-          v-if="props.helpText"
-          tag-name="div"
-          :variation="TitleVariations.Overline"
-          color="gray"
-          max-width="100%"
-        >
-          {{ props.helpText }}
-        </mc-title>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@use '../../../assets/styles/mixins' as *;
-@use '../../../assets/tokens/spacings' as *;
-@use '../../../assets/tokens/line-heights' as *;
-.mc-field-radio-group {
-  $block-name: &;
-
-  &__header {
-    @include reset-text-indents();
-    display: block;
-    margin-bottom: $space-100;
-
-    &:empty {
-      display: none;
-    }
-  }
-
-  &__footer {
-    line-height: $line-height-150;
-
-    &:empty {
-      display: none;
-    }
-  }
-
-  &--direction {
-    &-column {
-      #{$block-name}__buttons {
-        display: flex;
-        flex-direction: column;
-        @include child-indent-bottom($space-100);
-      }
-    }
-    &-row {
-      #{$block-name}__buttons {
-        @include child-indent-right($space-100);
-      }
-    }
-  }
-}
-</style>