mediacube-ui-v2 0.0.2 → 0.0.4

package/src/components/elements/McButton/McButton.vue

@@ -0,0 +1,844 @@
+<script setup lang="ts">
+import { computed, type PropType, ref } from 'vue'
+import { Colors, type ColorTypes } from '@/types/styles/Colors'
+import { FontWeights } from '@/types/styles/FontWeights'
+import { useTooltip } from '@/composables/useTooltip'
+import type { ITooltip, TooltipPositionsUnion } from '@/types/ITooltip'
+import type { ButtonVariationUnion, IButtonStyleOptions } from '@/types/IButton'
+import { TooltipPositions, TooltipSizes } from '@/enums/Tooltip'
+import McSvgIcon from '../McSvgIcon/McSvgIcon.vue'
+import type { ButtonSizeUnion, ButtonTypeUnion } from '@/types/IButton'
+import type { HorizontalAlignmentUnion } from '@/types/styles/Alignment'
+import type { WeightsUnion } from '@/types/styles/Weights'
+import type { ColorsUnion } from '@/types/styles/Colors'
+import type { FontWeightsUnion } from '@/types/styles/FontWeights'
+import { ButtonModifiers } from '@/enums'
+
+interface ElButtonTagBind {
+  to?: string | null
+  href?: string | null
+  disabled: boolean
+  rel: string
+  type: ButtonTypeUnion
+  tabindex: number | string | undefined | null
+}
+
+const vTooltip = useTooltip()
+
+const buttonTooltip = computed((): ITooltip => {
+  let payload = {} as ITooltip
+  if (props.tooltip) {
+    payload = {
+      content: props.tooltip,
+      size: TooltipSizes.M,
+      placement: props.tooltipPlacement || TooltipPositions.Top,
+    }
+  }
+  return payload
+})
+
+const props = defineProps({
+  /**
+   *  Если нужна ссылка внутри приложения:
+   */
+  to: {
+    type: String as PropType<string>,
+  },
+  /**
+   *  Если нужна обычная ссылка:
+   * `https://mediacube.agency/`
+   */
+  href: {
+    type: String as PropType<string>,
+  },
+  /**
+   *  По умолчанию ожидается использование в `Nuxt`
+   *
+   */
+  nuxt: {
+    type: Boolean as PropType<boolean>,
+    default: true
+  },
+  /**
+   *  Отключенное состояние
+   *
+   */
+  disabled: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  /**
+   *  Дизэйблить не меняя внешнего вида
+   *
+   */
+  inactive: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  /**
+   *  Индикация загрузки
+   *
+   */
+  loading: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  /**
+   *  Индикация загрузки
+   *  вращением иконки
+   */
+  iconLoading: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  /**
+   *  Типы:
+   *  `button, submit, reset`
+   */
+  type: {
+    type: String as () => ButtonTypeUnion,
+    default: null
+  },
+  /**
+   *  Дизайн:
+   *  `purple, red, purple-outline, purple-invert, purple-flat и т.д.`
+   */
+  variation: {
+    type: String as () => ButtonVariationUnion,
+    default: 'purple'
+  },
+  /**
+   *  Размеры:
+   *  `xs, xs-compact, s, s-compact, m, m-compact, l, l-compact`
+   */
+  size: {
+    type: String as () => ButtonSizeUnion,
+    default: 'm'
+  },
+  /**
+   *  Тень
+   *
+   */
+  shadow: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  /**
+   *  Круглая (применимо для *-compact size)
+   *
+   */
+  rounded: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  /**
+   *  Закругленная
+   *
+   */
+  semiRounded: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  /**
+   *  Позиция текста внутри кнопки:
+   *  `left, center, right`
+   */
+  textAlign: {
+    type: String as () => HorizontalAlignmentUnion,
+    default: 'center'
+  },
+  /**
+   *  На всю ширину
+   *
+   */
+  fullWidth: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  /**
+   *  Если нужно активное состояние
+   *
+   */
+  isActive: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  /**
+   *  exact
+   *
+   */
+  exact: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  /**
+   * Заглавные буквы
+   */
+    uppercase: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  /**
+   * Тег по умолчанию
+   */
+  defaultTag: {
+    type: String as PropType<string>,
+    default: 'button'
+  },
+  /**
+   * Если нужен другой цвет при взаимодействии
+   */
+  secondaryColor: {
+    type: String as () => ColorTypes,
+    default: null
+  },
+  /**
+   * Если нужна подчёркнутая ссылка
+   */
+  underlineLink: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  /**
+   * Если нужен постоянный
+   * фон у типа 'flat'
+   */
+  bgFlat: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  /**
+   * Жирность шрифта:
+   * `normal, medium, semi-bold`
+   */
+  weight: {
+    type: String as () => WeightsUnion,
+    default: 'semi-bold'
+  },
+  /**
+   * Тултип при наличии
+   */
+  tooltip: {
+    type: String as PropType<string>,
+    default: null
+  },
+  tooltipPlacement: {
+    type: String as () => TooltipPositionsUnion,
+    default: null,
+  },
+
+  /**
+   * Атрибут tabindex для главного элемента
+   *
+   */
+  tabindex: {
+    type: [String, Number]
+  }
+})
+
+const mcButton = ref(null)
+const emit = defineEmits(['blur', 'click'])
+
+const classes = computed((): { [key: string]: boolean } => {
+  return {
+    [`mc-button--variation-${props.variation}`]: !!props.variation,
+    [`mc-button--size-${props.size}`]: !!props.size,
+    [`mc-button--text-align-${props.textAlign}`]: !!props.textAlign,
+    'mc-button--loading': !!props.loading,
+    'mc-button--icon-loading': !!props.iconLoading,
+    'mc-button--is-active': !!props.isActive,
+    'mc-button--disabled': !!props.disabled,
+    'mc-button--rounded': props.rounded && /-compact$/.test(props.size),
+    'mc-button--semi-rounded': !!props.semiRounded,
+    'mc-button--full-width': !!props.fullWidth,
+    'mc-button--uppercase': !!props.uppercase,
+    'mc-button--shadow': !!props.shadow,
+    'mc-button--secondary-color': !!props.secondaryColor,
+    'mc-button--underline-link': !!props.underlineLink,
+    'mc-button--bg-flat': !!props.bgFlat,
+    [`mc-button--type-${buttonVariation.value.type}`]: !!buttonVariation.value.type,
+    'mc-button--inactive': !!props.inactive
+  }
+})
+
+const buttonVariation = computed((): IButtonStyleOptions => {
+  const variation = props.variation
+  const texts = variation.split('-')
+  const currentStyle = texts[texts.length - 1]
+  let color = variation.replace(`-${currentStyle}`, '')
+  switch (currentStyle) {
+    case ButtonModifiers.Link:
+    case ButtonModifiers.Flat:
+    case ButtonModifiers.Outline:
+    case ButtonModifiers.Invert: {
+      break
+    }
+    default: {
+      color = variation
+      break
+    }
+  }
+  return {
+    color: color as ColorTypes,
+    type: currentStyle
+  }
+})
+
+const styles = computed((): { [key: string]: ColorsUnion | FontWeightsUnion | string | undefined } => {
+  let hoverBrightness: string | undefined
+  let textColor: ColorTypes | undefined
+  switch (buttonVariation.value.type) {
+    case ButtonModifiers.Link:
+    case ButtonModifiers.Flat:
+    case ButtonModifiers.Outline:
+    case ButtonModifiers.Invert: {
+      break
+    }
+    default: {
+      switch (buttonVariation.value.color) {
+        case 'yellow':
+        case 'white': {
+          hoverBrightness = '0.9'
+          break
+        }
+        case 'toxic': {
+          break
+        }
+        default: {
+          textColor = 'white' as ColorTypes
+        }
+      }
+      break
+    }
+  }
+
+  return {
+    '--mc-button-secondary-color': props.secondaryColor && Colors[props.secondaryColor],
+    '--mc-button-background-color':
+      props.variation && Colors[buttonVariation.value.color as ColorTypes],
+    '--mc-button-font-weight': props.weight && FontWeights[props.weight],
+    '--mc-button-hover-brightness': hoverBrightness,
+    '--mc-button-text-color': textColor && Colors[textColor]
+  }
+})
+
+const tag = computed((): string => {
+  if (props.to) {
+    return props.nuxt ? 'nuxt-link' : 'router-link'
+  } else if (props.href) {
+    return 'a'
+  }
+  return props.defaultTag
+})
+
+const isVariationLink = computed((): boolean => {
+  return buttonVariation.value.type === ButtonModifiers.Link
+})
+
+const tagBind = computed((): ElButtonTagBind => {
+  let result:ElButtonTagBind = {
+    to: props.to,
+    href: props.href,
+    disabled: false,
+    rel: '',
+    type: props.type,
+    tabindex: props.tabindex
+  }
+
+  if (props.to) {
+    delete result.href
+  } else if (props.href) {
+    delete result.to
+  } else if (props.disabled || props.loading) {
+    result.disabled = true
+  }
+
+  if (isVariationLink.value) result.rel = 'noreferrer'
+
+  return result
+})
+
+const handleBlur = (e: Event): void => {
+  emit('blur', e)
+}
+const handleClick = (e: Event): void => {
+  emit('click', e)
+}
+</script>
+
+<template>
+  <component
+    v-tooltip="buttonTooltip"
+    :is="tag"
+    :ref="mcButton"
+    v-bind="{ ...tagBind }"
+    class="mc-button"
+    :class="classes"
+    :exact="exact"
+    :style="styles"
+    @blur="handleBlur"
+    @click="handleClick"
+  >
+    <span v-if="$slots['icon-prepend']" class="mc-button__prepend">
+      <!-- @slot Слот для вставки в начало -->
+      <slot name="icon-prepend" />
+    </span>
+    <span v-if="loading" class="mc-button__loader">
+      <mc-svg-icon class="mc-button__loader-icon" type="div" name="loader" />
+    </span>
+    <span v-if="$slots.default" class="mc-button__text">
+      <!-- @slot Слот по умолчанию -->
+      <slot />
+    </span>
+    <span v-if="$slots['icon-append']" class="mc-button__append">
+      <!-- @slot Слот для вставки в конец -->
+      <slot name="icon-append" />
+    </span>
+    <div v-if="!isVariationLink" class="mc-button__background" />
+  </component>
+</template>
+
+<style lang="scss">
+@use '../../../assets/styles/mixins' as *;
+@use '../../../assets/styles/tooltip' as *;
+@use '../../../assets/tokens/durations' as *;
+@use '../../../assets/tokens/opacities' as *;
+@use '../../../assets/tokens/font-families' as *;
+@use '../../../assets/tokens/letter-spacings' as *;
+@use '../../../assets/tokens/animations' as *;
+@use '../../../assets/tokens/colors' as *;
+@use '../../../assets/tokens/font-sizes' as *;
+@use '../../../assets/tokens/font-weights' as *;
+@use '../../../assets/tokens/line-heights' as *;
+@use '../../../assets/tokens/sizes' as *;
+@use '../../../assets/tokens/spacings' as *;
+@use '../../../assets/tokens/media-queries' as *;
+@use '../../../assets/tokens/border-radius' as *;
+
+.mc-button {
+  $block-name: &;
+  @include reset();
+  --mc-button-background-color: #{$color-transparent};
+  --mc-button-font-weight: #{$font-weight-normal};
+  --mc-button-text-color: #{$color-black};
+  --mc-button-hover-brightness: 0.9;
+  --mc-button-secondary-color: initial;
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  flex-wrap: nowrap;
+  max-width: 100%;
+  font-family: $font-family-main;
+  border-radius: $radius-100;
+  white-space: nowrap;
+  user-select: none;
+  text-decoration: none;
+  text-transform: none;
+  background: none;
+  cursor: pointer;
+  outline: 0;
+  transition: all $duration-s;
+  font-weight: var(--mc-button-font-weight);
+  color: var(--mc-button-text-color);
+  -webkit-appearance: none;
+  -webkit-text-fill-color: currentColor;
+  z-index: 0;
+
+  &__loader {
+    display: none;
+    line-height: 0;
+    @include align(true, true, absolute);
+    top: unset;
+    left: unset;
+    transform: unset;
+    z-index: 1;
+    &-icon {
+      animation: $animation-spinner;
+    }
+  }
+  &__prepend,
+  &__append {
+    display: inline-flex;
+    align-items: center;
+    z-index: 1;
+  }
+
+  &__text {
+    @include ellipsis($display: inline-block);
+    @include layout-flex-fix();
+    z-index: 1;
+    &:empty {
+      display: none;
+    }
+  }
+  @mixin hoverMixin {
+    @media #{$media-desktop} {
+      &:hover {
+        #{$block-name}__background {
+          @content;
+        }
+      }
+    }
+
+    &:active {
+      #{$block-name}__background {
+        @content;
+      }
+    }
+  }
+  @include hoverMixin {
+    filter: brightness(var(--mc-button-hover-brightness));
+  }
+
+  &--size {
+    &-xxs {
+      height: $size-300;
+      padding: 0 $space-100;
+      letter-spacing: normal;
+      font-size: $font-size-200;
+      line-height: $line-height-200;
+
+      &-compact {
+        @include size($size-300);
+        padding: $space-50;
+        .mc-svg-icon {
+          @include size($size-200);
+        }
+      }
+      .mc-svg-icon {
+        @include size($size-200);
+      }
+
+      #{$block-name} {
+        &__prepend {
+          margin-inline-end: $space-50;
+        }
+        &__append {
+          margin-inline-start: $space-50;
+        }
+      }
+    }
+    &-xs {
+      height: $size-400;
+      padding: 0 $space-150;
+      letter-spacing: normal;
+      font-size: $font-size-200;
+      line-height: $line-height-200;
+
+      &-compact {
+        @include size($size-400);
+        padding: 6px;
+        .mc-svg-icon {
+          @include size($size-250);
+        }
+      }
+      .mc-svg-icon {
+        @include size($size-250);
+      }
+
+      #{$block-name} {
+        &__prepend {
+          margin-inline-end: $space-50;
+        }
+        &__append {
+          margin-inline-start: $space-50;
+        }
+      }
+    }
+    &-s {
+      height: $size-500;
+      padding: 0 $space-200;
+      letter-spacing: normal;
+      font-size: $font-size-200;
+      line-height: $line-height-200;
+
+      &-compact {
+        @include size($size-500);
+        padding: $space-150;
+        .mc-svg-icon {
+          @include size($size-250);
+        }
+      }
+      .mc-svg-icon {
+        @include size($size-250);
+      }
+
+      #{$block-name} {
+        &__prepend {
+          margin-inline-end: $space-50;
+        }
+        &__append {
+          margin-inline-start: $space-50;
+        }
+      }
+    }
+    &-m {
+      height: $size-500;
+      padding: 0 $space-200;
+      font-size: $font-size-200;
+      line-height: $line-height-200;
+
+      &-compact {
+        @include size($size-500);
+        padding: $space-100;
+        .mc-svg-icon {
+          @include size($size-300);
+        }
+      }
+      .mc-svg-icon {
+        @include size($size-300);
+      }
+
+      #{$block-name} {
+        &__prepend {
+          margin-inline-end: $space-50;
+        }
+        &__append {
+          margin-inline-start: $space-50;
+        }
+      }
+    }
+    &-l {
+      height: $size-600;
+      padding: $space-150 $space-300;
+      font-size: $font-size-200;
+      line-height: $line-height-200;
+
+      &-compact {
+        @include size($size-600);
+        padding: $space-150;
+        .mc-svg-icon {
+          @include size($size-300);
+        }
+      }
+      .mc-svg-icon {
+        @include size($size-300);
+      }
+
+      #{$block-name} {
+        &__prepend {
+          margin-inline-end: $space-100;
+        }
+        &__append {
+          margin-inline-start: $space-100;
+        }
+      }
+    }
+
+    &-s,
+    &-m,
+    &-l {
+      &-compact {
+        #{$block-name} {
+          &__prepend,
+          &__append {
+            margin: 0 !important;
+          }
+        }
+      }
+    }
+  }
+
+  &__background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    @include size(100%);
+    max-height: -webkit-fill-available;
+    max-width: -webkit-fill-available;
+    opacity: 1 !important;
+    border: 1px solid $color-transparent;
+    border-radius: inherit;
+    background-color: var(--mc-button-background-color);
+    transition: all $duration-s;
+  }
+  &--type {
+    &-outline {
+      color: var(--mc-button-background-color);
+      #{$block-name}__background {
+        opacity: 0.6 !important;
+        background-color: $color-transparent;
+        border-color: var(--mc-button-background-color);
+      }
+      @media #{$media-desktop} {
+        &:hover {
+          #{$block-name}__background {
+            background-color: var(--mc-button-background-color);
+            opacity: 0.2 !important;
+          }
+        }
+        &:active {
+          #{$block-name}__background {
+            background-color: var(--mc-button-background-color);
+            border: none;
+          }
+        }
+      }
+    }
+    &-invert {
+      color: var(--mc-button-background-color);
+      #{$block-name} {
+        &__background {
+          opacity: 0.1 !important;
+        }
+      }
+      @include hoverMixin {
+        opacity: 0.2 !important;
+      }
+    }
+    &-flat {
+      color: var(--mc-button-background-color);
+      #{$block-name}__background {
+        opacity: 0 !important;
+      }
+      @include hoverMixin {
+        opacity: 0.1 !important;
+      }
+    }
+    &-link {
+      color: var(--mc-button-background-color);
+      padding: 0;
+      @include size(auto);
+      border: none;
+      user-select: text;
+      &#{$block-name}--size-l {
+        line-height: $line-height-250;
+      }
+      &#{$block-name} {
+        &--disabled {
+          opacity: $opacity-disabled;
+          background-color: transparent !important;
+          color: var(--mc-button-background-color) !important;
+          border-color: transparent !important;
+        }
+      }
+      @media #{$media-desktop} {
+        &:hover {
+          filter: brightness(0.85);
+        }
+      }
+
+      &:active {
+        filter: brightness(0.85);
+      }
+      #{$block-name} {
+        &__background {
+          display: none;
+        }
+      }
+    }
+  }
+  &--bg-flat {
+    #{$block-name} {
+      &__background {
+        opacity: 0.1 !important;
+      }
+    }
+  }
+  &--shadow {
+    box-shadow: 0 3px 10px var(--mc-button-background-color);
+  }
+  &--underline-link {
+    #{$block-name}__text {
+      text-decoration: underline !important;
+    }
+  }
+
+  &--secondary-color {
+    @media #{$media-desktop} {
+      &:hover {
+        color: var(--mc-button-secondary-color);
+      }
+    }
+    &:active {
+      color: var(--mc-button-secondary-color);
+    }
+  }
+
+  &--uppercase {
+    text-transform: uppercase;
+    letter-spacing: $letter-spacing-m;
+  }
+
+  &--is-active,
+  &.nuxt-link-active {
+    color: $color-purple;
+    background-color: transparent;
+    border-color: transparent;
+    pointer-events: none;
+  }
+
+  &--rounded {
+    border-radius: $radius-circle;
+  }
+
+  &--semi-rounded {
+    border-radius: 50px;
+  }
+
+  &--full-width {
+    width: 100%;
+  }
+
+  &--text-align {
+    &-left {
+      justify-content: flex-start;
+    }
+    &-center {
+      justify-content: center;
+    }
+    &-right {
+      justify-content: flex-end;
+    }
+  }
+
+  &--loading,
+  &--icon-loading,
+  &--disabled {
+    pointer-events: none;
+  }
+
+  &--loading {
+    #{$block-name} {
+      &__loader {
+        display: inline-block;
+      }
+    }
+
+    > *:not(#{$block-name}__loader) {
+      opacity: 0;
+    }
+  }
+  &--icon-loading {
+    #{$block-name} {
+      &__append,
+      &__prepend {
+        .mc-svg-icon {
+          animation: $animation-spinner;
+        }
+      }
+    }
+    #{$block-name}__loader {
+      transform-origin: center center;
+      animation: $animation-spinner;
+    }
+  }
+
+  &--disabled {
+    color: $color-outline-gray;
+    cursor: not-allowed;
+    #{$block-name} {
+      &__background {
+        background-color: $color-hover-gray;
+        border-color: $color-hover-gray;
+      }
+    }
+  }
+
+  &--inactive {
+    pointer-events: none;
+  }
+}
+</style>