Zeen Component Library

# ZeenSpeakerCard

Компонент ZeenSpeakerCard. Карточка спикера в секции спикеров и в расписании.

# Примеры:

  • Стандартный пример, который включает в себя обязательные параметры элементов

    :speaker="speaker"
    :picture-attrs="{src: require('/src/images/examples/picture-example.png')}"

    или

    theme='fill'
    :speaker="speaker"
    :picture-attrs="{src: require('/src/images/examples/picture-example.png')}"
    Компания

    Константин Константинопольский

    Главный дизайнер Специальная специализация, которую специально написали и растянули на три строки
    Компания

    Константин Константинопольский

    Главный дизайнер Специальная специализация, которую специально написали и растянули на три строки

# Slots

Название Описание
icon Икона в углу карточки для открытия бэйджа
company Слот с полем company спикера
name Слот с полем name спикера
position Слот с полем position спикера
about Слот с полем about спикера
footer Пустой по дефолту слот внизу карточки для доп функционала

# Props

Название Тип Обязательный По умолчанию Описание
speaker Object + - Принимает в себя объект с данными спикера. Соответствует значениям сервера
theme String - 'main' Тема: main, fill
pictureAttrs Object + - Объект с параметрами для аттрибутов изображения

# Source Code - код входящих данных props speaker

export default {
  id: '3bb4a22f-d533-404a-8d2f-7ad4e1d89f52',
  login: 'spe4',
  phone: '555-35-35',
  picture: 'https://enel.com.tr/wp-content/uploads/2019/10/mt-2.jpg',
  gender: '',
  birthdate: null,
  country: '',
  city: '',
  company_name: 'Компания',
  facebook_link: '1',
  vk_link: '2',
  twitter_link: '3',
  instagram_link: '4',
  company_field_list: [],
  interest_list: [],
  name: 'Константин Константинопольский',
  about: 'Специальная специализация, которую специально написали и растянули на три строки',
  position: 'Главный дизайнер',
  verified: false,
  onboarding_passed: false,
  registered_conference_id: null,
  reg_conf_id: null,
  message_privacy: 'all_users',
  mailing_policies: {},
  locale: 'ru',
  email: 'spe4@spe4',
  avatar_url: 'https://enel.com.tr/wp-content/uploads/2019/10/mt-2.jpg',
  speech_ids: ['3d2a60af-71ad-4097-a9b6-9c3c94a5bafc', 'ad41dc63-d924-4b47-a88a-1cab1c49e886'],
  priority: 0,
  created_at: 1619469432,
}

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

<template>
  <div class="speaker-card" :class="classSpeakerCard" @click="onCardClick(speaker)">
    <div class="speaker-card__header">
      <!-- Скрываем кнопку пока нет модалки -->
      <!-- <div class="speaker-card__icon" v-if="hasAddParams" @click.prevent="openBadge(speaker)">
        <slot name="icon" :speaker="speaker">
          <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
            <rect width="32" height="32" rx="16" fill-opacity="0.5" />
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M24 16C24 20.4183 20.4183 24 16 24C11.5817 24 8 20.4183 8 16C8 11.5817 11.5817 8 16 8C20.4183 8 24 11.5817 24 16ZM17.1422 12.5686C17.1422 13.1998 16.6305 13.7115 15.9993 13.7115C15.3681 13.7115 14.8564 13.1998 14.8564 12.5686C14.8564 11.9375 15.3681 11.4258 15.9993 11.4258C16.6305 11.4258 17.1422 11.9375 17.1422 12.5686ZM15.9993 14.8516C15.3681 14.8516 14.8564 15.3632 14.8564 15.9944V19.423C14.8564 20.0542 15.3681 20.5658 15.9993 20.5658C16.6305 20.5658 17.1422 20.0542 17.1422 19.423V15.9944C17.1422 15.3632 16.6305 14.8516 15.9993 14.8516Z"
            />
          </svg>
        </slot>
      </div> -->
      <slot name="edit" :speaker="speaker" />
      <ZeenPicture class="speaker-card__image" v-bind="pictureAttrs" isSquare />
    </div>
    <div class="speaker-card__content-wrapper">
      <div class="speaker-card__overlay" v-if="isThemeFill"></div>
      <div class="speaker-card__body">
        <slot name="company" :speaker="speaker">
          <ZeenText
            class="speaker-card__company"
            v-if="speaker && speaker.company_name"
            v-html="speaker.company_name"
          ></ZeenText>
        </slot>
        <slot name="name" :speaker="speaker">
          <ZeenHeadline class="speaker-card__name" v-if="speaker && speaker.name" v-html="speaker.name"></ZeenHeadline>
        </slot>
        <slot name="position" :speaker="speaker">
          <ZeenText
            class="speaker-card__position"
            v-if="speaker && speaker.position"
            v-html="speaker.position"
          ></ZeenText>
        </slot>
        <slot name="about" :speaker="speaker">
          <ZeenText class="speaker-card__about" v-if="speaker && speaker.about" v-html="speaker.about"></ZeenText>
        </slot>
        <div class="speaker-card__footer">
          <slot name="footer" :speaker="speaker"></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ZeenPicture from '../ZeenPicture/ZeenPicture'
import ZeenHeadline from '../ZeenHeadline/ZeenHeadline'
import ZeenText from '../ZeenText/ZeenText'

export default {
  name: 'ZeenSpeakerCard',
  components: {ZeenText, ZeenHeadline, ZeenPicture},
  props: {
    speaker: {
      type: Object,
      require: true,
    },
    theme: {
      type: String,
      default: 'main',
      validator: (theme) => ['main', 'fill'].includes(theme),
    },
    pictureAttrs: {
      type: Object,
      require: true,
    },
  },
  methods: {
    openBadge(speaker) {
      this.$emit('open', speaker)
    },
    onCardClick(speaker) {
      this.$emit('onCardClick', speaker)
    },
  },
  computed: {
    classSpeakerCard() {
      return {
        [`speaker-card_${this.theme}`]: this.theme,
      }
    },
    isThemeFill() {
      return this.theme === 'fill'
    },
    hasAddParams() {
      const checkedParams = ['facebook_link', 'vk_link', 'twitter_link', 'instagram_link']

      return checkedParams.some((item) => {
        return Boolean(this.speaker[item])
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.speaker-card {
  width: 100%;
  border-radius: var(--speaker-card-border-radius);
  overflow: hidden;
  background-color: var(--zeen-speaker-card-background-color);
  box-shadow: 0px 2px 16px var(--zeen-speaker-card-shadow-color);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  position: relative;

  &_fill {
    .speaker-card__body {
      padding: var(--zeen-speaker-card-fill-body-padding-top) var(--zeen-speaker-card-body-padding)
        var(--zeen-speaker-card-body-padding) var(--zeen-speaker-card-body-padding);
    }

    .speaker-card__header {
      padding: var(--zeen-speaker-card-fill-header-padding);
    }

    .speaker-card__icon {
      top: var(--zeen-speaker-card-fill-icon-top);
      right: var(--zeen-speaker-card-fill-icon-right);
    }

    .speaker-card__image {
      ::v-deep.zeen-picture__img {
        border-radius: var(--speaker-card-border-radius) var(--speaker-card-border-radius) 0 0;
      }
    }
  }

  &__header {
    position: relative;
    padding: var(--zeen-speaker-card-header-padding) var(--zeen-speaker-card-header-padding) 0
      var(--zeen-speaker-card-header-padding);
  }

  &__icon {
    width: var(--zeen-speaker-card-icon-size);
    height: var(--zeen-speaker-card-icon-size);
    position: absolute;
    top: var(--zeen-speaker-card-icon-top);
    right: var(--zeen-speaker-card-icon-right);
    z-index: 1;
    cursor: pointer;

    rect {
      fill: var(--zeen-speaker-card-icon-color-main);
    }

    path {
      fill: var(--zeen-speaker-card-icon-color-second);
    }
  }

  &__image {
    ::v-deep.zeen-picture__img {
      border-radius: var(--speaker-card-border-radius);
    }
  }

  &__overlay {
    background-color: var(--zeen-speaker-card-background-color);
    border-radius: var(--speaker-card-border-radius) var(--speaker-card-border-radius) 0 0;
    width: 100%;
    height: var(--zeen-speaker-card-overlay-height);
    position: absolute;
    top: var(--zeen-speaker-card-overlay-top);
  }

  &__content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    border: solid var(--zeen-speaker-card-border-size) var(--zeen-speaker-card-border-color);
    position: relative;
  }

  &__body {
    padding: var(--zeen-speaker-card-body-padding-top) var(--zeen-speaker-card-body-padding)
      var(--zeen-speaker-card-body-padding) var(--zeen-speaker-card-body-padding);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  &__company {
    width: fit-content;
    background: var(--zeen-speaker-card-company-background-color);
    border-radius: var(--zeen-speaker-card-company-border-radius);
    color: var(--zeen-speaker-card-company-color);
    padding: var(--zeen-speaker-card-company-padding-vartical) var(--zeen-speaker-card-company-padding-horizontal);
    font-weight: var(--zeen-speaker-card-company-font-weight);
    font-size: var(--zeen-speaker-card-company-size);
    line-height: var(--zeen-speaker-card-company-line-height);
    margin-bottom: var(--zeen-speaker-card-company-margin-bottom);
  }

  &__name {
    font-weight: var(--zeen-speaker-card-name-font-weight);
    font-size: var(--zeen-speaker-card-name-size);
    line-height: var(--zeen-speaker-card-name-line-height);
    color: var(--zeen-speaker-card-name-color);
  }

  &__position {
    font-weight: var(--zeen-speaker-card-position-font-weight);
    font-size: var(--zeen-speaker-card-position-size);
    line-height: var(--zeen-speaker-card-position-line-height);
    color: var(--zeen-speaker-card-position-color);
    margin-top: var(--zeen-speaker-card-position-margin-top);
  }

  &__about {
    font-weight: var(--zeen-speaker-card-about-font-weight);
    font-size: var(--zeen-speaker-card-about-size);
    line-height: var(--zeen-speaker-card-about-line-height);
    color: var(--zeen-speaker-card-about-color);
    margin-top: var(--zeen-speaker-card-about-margin-top);
  }
}
</style>

← ZeenSpeakerItem →