ZeenText

Компонент ZeenText для текста

Примеры:

• Передача type

  1. type='light-notbigget' Это текст внутри компонента
  2. type='light-largest' Это текст внутри компонента
  3. type='light-larger' Это текст внутри компонента
  4. type='dark-large' Это текст внутри компонента
  5. type='dark-bigger' Это текст внутри компонента
  6. type='dark-main' Это текст внутри компонента
  7. type='main-small' Это текст внутри компонента
  8. type='main-smallest' Это текст внутри компонента

props

Название	Тип	Обязательный	По умолчанию	Описание
theme	string	-	dark	тема, доступно 3 варианта dark/light/main - по умолчанию используется dark
type	string	-	-	Предустановленные цвета и размеры. Где первое слово это название темы, а второе цифра размера шрифта (полную таблицу см. ниже)
color	string	-	-	уникальный цвет текста
size	number	-	16	Кастомный размер шрифта

Значения свойства type

Название	Тема	Размер шрифта
light-10	light	10
light-12	light	12
light-14	light	14
light-16	light	16
light-24	light	24
dark-10	dark	10
dark-12	dark	12
dark-14	dark	14
dark-16	dark	16
dark-24	dark	24
main-10	main	10
main-12	main	12
main-14	main	14
main-16	main	16
main-24	main	24

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

<template lang="pug">
  component(
    :is="tag"
    class="zeen-text"
    ref="main"
    :data-theme="realTheme"
    :class="classList"
  )
    slot
</template>

<script>
export default {
  name: 'ZeenText',
  props: {
    tag: {
      type: String,
      default: 'span',
    },
    theme: {
      type: String,
      default: 'dark',
      required: false,
      validator: (theme) => ['dark', 'light', 'main'].includes(theme),
    },
    // todo должно изменять модификаторы которые приминяются к размеру а не задавать жесткий размер
    type: {
      type: String,
      required: false,
      validator: (type) => {
        const themes = ['light', 'dark', 'main']
        const sizes = ['notbigget', 'largest', 'larger', 'large', 'bigger', 'main', 'small', 'smallest']

        return type
          .replace('-', ' ')
          .split(' ')
          .every((value) => [...themes, ...sizes].includes(value))
      },
    },
    color: {
      type: String,
    },
    size: {
      type: String,
      default: 'main',
    },
  },
  computed: {
    classList() {
      return {
        [`zeen-text_theme-${this.realTheme}`]: this.realTheme,
        [`zeen-text_size-${this.setSize}`]: this.setSize,
      }
    },
    splitType() {
      return this.type ? this.type.split('-') : null
    },
    realTheme() {
      return this.splitType !== null ? this.splitType[0] : this.theme
    },
    setSize() {
      return this.splitType?.[1] ?? this.size
    },
  },
}
</script>

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

  /* Цвета */
  --text-base-color: var(--main-text-color);
}
</style>

<style lang="scss" scoped>
.zeen-text {
  --text-size: var(--text-base-size);

  &_theme-light {
    --text-color: var(--main-light);
  }

  &_theme-dark {
    --text-color: var(--text-base-color);
  }

  &_theme-main {
    --text-color: var(--main-color);
  }

  &_size-notbigget {
    --text-size: var(--main-notbigget-size);
  }

  &_size-largest {
    --text-size: var(--main-largest-size);
  }

  &_size-larger {
    --text-size: var(--main-larger-size);
  }

  &_size-large {
    --text-size: var(--main-large-size);
  }

  &_size-bigger {
    --text-size: var(--main-bigger-size);
  }

  &_size-main {
    --text-size: var(--text-base-size);
  }

  &_size-small {
    --text-size: var(--main-small-text);
  }

  &_size-smallest {
    --text-size: var(--main-smallest-text);
  }

  color: var(--text-color);
  font-size: var(--text-size);
  line-height: 1.44;
}
</style>