Zeen Component Library

# ZeenLink

Компонент ссылки

# Примеры:

# props

Название Тип Обязательный По умолчанию Описание
href string - - ссылка
to string или object - - путь для router-link
theme string - light доступны темы light и dark
disabled boolean - - если true, то ссылке добавляется класс с модификатором disabled
color object - {} объект с кастомными цветами (подробнее см.ниже)

# Кастомные цвета в объекте color

Название Тип Обязательный По умолчанию
linkLightColor цвет ссылки и иконок в теме light - берет значение из темы ($link-light-color)
linkLightHoverColor цвет ссылки и иконок при ховере в теме light - берет значение из темы ($link-light-hover-color)
linkLightClickColor цвет ссылки и иконок при active в теме light - берет значение из темы ($link-light-click-color)
linkDarkColor цвет ссылки и иконок в теме dark - берет значение из темы ($link-dark-color)
linkDarkHoverColor цвет ссылки и иконок при ховере в теме dark - берет значение из темы ($link-dark-hover-color)
linkDarkClickColor цвет ссылки и иконок при active в теме dark - берет значение из темы ($link-dark-click-color)
linkDisabledColor цвет ссылки и иконок для состояния disabled - берет значение из темы ($link-disabled-color)

# Иконки

Компонент имеет 2 именованных слота для иконок - rightIcon и leftIcon.

# Source Code - исходный код компонента

<template>
  <component
    :is="getElement"
    :id="`zeen-link-${componentId}`"
    class="zeen-link"
    :class="{
      [`zeen-link_them-${theme}`]: theme,
      'zeen-link_disabled': disabled,
    }"
    :href="href"
    :to="to"
    v-on="$listeners"
    v-bind="$attrs"
  >
    <slot name="leftIcon"></slot>
    <slot></slot>
    <slot name="rightIcon"></slot>
  </component>
</template>

<script>
export default {
  name: 'ZeenLink',
  props: {
    href: {
      type: String,
      default: null,
    },
    to: {
      validator: (prop) => typeof prop === 'object' || typeof prop === 'string',
      default: null,
    },
    theme: {
      type: String,
      default: 'light',
      validator: (theme) => ['light', 'dark'].includes(theme),
    },
    disabled: {
      type: Boolean,
      required: false,
    },
    // необходимо для поддержки накста - в нем свой роутер линк
    element: String,
  },
  computed: {
    componentId() {
      return this._uid
    },
    getElement() {
      if (this.element) {
        return this.element
      }
      if (this.to) {
        return 'router-link'
      } else {
        return 'a'
      }
    },
    isDarkTheme() {
      return this.theme === 'dark'
    },
  },
}
</script>

<style lang="scss">
:root {
  /* Размеры */
  --link-size: var(--main-text-size, 16px);

  /* Цвета */
  --link-color: var(--main-color);
  --link-hover-color: var(--main-hover-color);
  --link-active-color: var(--main-active-color);
  --link-disabled-color: var(--gray-2);

  --link-dark-base-color: var(--main-light);
  --link-dark-base-hover-color: var(--gray-1);
  --link-dark-base-active-color: var(--gray-3);
  --link-dark-base-disabled-color: var(--gray-1);
}
</style>

<style lang="scss" scoped>
.zeen-link {
  --link-dark-color: var(--link-dark-base-color);
  --link-dark-hover-color: var(--link-dark-base-hover-color);
  --link-dark-active-color: var(--link-dark-base-active-color);
  --link-dark-disabled-color: var(--link-dark-base-disabled-color);

  &_them-dark {
    --link-color: var(--link-dark-color);
    --link-hover-color: var(--link-dark-hover-color);
    --link-active-color: var(--link-dark-active-color);
    --link-disabled-color: var(--link-dark-disabled-color);
  }

  position: relative;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: var(--link-size);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: color 0.25s ease;
  text-decoration: none;
  font-family: inherit;
  color: var(--link-color);

  &,
  &:focus,
  &:visited {
    text-decoration: none;
  }

  &:hover {
    --link-color: var(--link-hover-color);
    text-decoration: none;
  }

  &:active {
    --link-color: var(--link-active-color);
    text-decoration: none;
  }

  &_disabled {
    --link-color: var(--link-disabled-color);
    cursor: not-allowed;
    pointer-events: none;
  }

  svg {
    fill: currentColor;
  }
}
</style>

← ZeenModal →