mediacube-ui-v2 0.0.2 → 0.0.4

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

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

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

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

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