# ZeenListTableItem
Компонент ZeenListTableItem
# Примеры:
Комната 1 Тестовый заголовок
100 / 100 зрителей
Ivan- Ivan Mitrofanov
- Ivan Mitrofanov
- Ivan Mitrofanov
- Ivan Mitrofanov
- Ivan Mitrofanov
- Ivan Mitrofanov
- Ivan Mitrofanov
- Ivan Mitrofanov
- Ivan Mitrofanov
- Ivan Mitrofanov
# props
| Название | Тип | Обязательный | По умолчанию | Описание |
|---|
# Source Code - исходный код компонента
<template>
<section class="list-table-item">
<div class="list-table-item__header-wrapper">
<div class="list-table-item__header">
<ZeenHeadline v-bind="attrsHeadline" class="list-table-item__title">
<span class="list-table-item__index">
<slot name="index" :index="index"> {{ indexText }} {{ index + 1 }} </slot>
</span>
<span>
<slot name="title">
{{ title }}
</slot>
</span>
</ZeenHeadline>
</div>
<div class="list-table-item__viewers">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
d="M18.1654 8.16667C16.4987 6.66667 13.7487 5 9.9987 5C6.2487 5 3.4987 6.66667 1.83203 8.16667C1.16536 8.66667 0.832031 9.5 0.832031 10.3333C0.832031 11.1667 1.16536 12 1.83203 12.5C3.4987 13.9167 6.2487 15.6667 9.9987 15.6667C13.7487 15.6667 16.4987 14 18.1654 12.5C18.832 12 19.1654 11.1667 19.1654 10.3333C19.1654 9.5 18.832 8.66667 18.1654 8.16667ZM17.082 11.25C15.6654 12.5 13.2487 14 9.9987 14C6.7487 14 4.33203 12.5 2.91536 11.25C2.66536 11 2.4987 10.6667 2.4987 10.3333C2.4987 10 2.66536 9.66667 2.91536 9.41667C4.33203 8.16667 6.7487 6.66667 9.9987 6.66667C13.2487 6.66667 15.6654 8.16667 17.082 9.41667C17.332 9.58333 17.4987 9.91667 17.4987 10.3333C17.4987 10.6667 17.332 11 17.082 11.25Z"
/>
<path
d="M9.9987 12.2513C11.0572 12.2513 11.9154 11.3932 11.9154 10.3346C11.9154 9.27609 11.0572 8.41797 9.9987 8.41797C8.94015 8.41797 8.08203 9.27609 8.08203 10.3346C8.08203 11.3932 8.94015 12.2513 9.9987 12.2513Z"
/>
</svg>
<ZeenText>
<span v-if="table.viewers_count > 0" class="list-table-item__viewers-count">{{ table.viewers_count }}</span>
<span v-else class="list-table-item__viewers-count list-table-item__viewers-count_empty">{{
table.viewers_count
}}</span>
/ {{ maxViewers }} {{ viewersText }}
</ZeenText>
</div>
</div>
<div class="list-table-item__footer">
<ul class="list-table-item__list-speakers">
<li class="list-table-item__speaker" v-for="speaker in table.speakers" :key="speaker.user_id">
<img v-if="isPictures" class="list-table-item__speaker-avatar" :src="speaker.avatar_path" />
<ZeenText class="list-table-item__speaker-name">{{ speaker.full_name }}</ZeenText>
</li>
</ul>
<ZeenButton
class="list-table-item__button"
@click.prevent="joinTable"
:is-loading="button.isLoading"
:disabled="isTableFull"
v-bind="attrsButton"
>
<slot name="button">
{{ buttonText }}
</slot>
</ZeenButton>
</div>
</section>
</template>
<script>
import ZeenHeadline from '../ZeenHeadline/ZeenHeadline'
import ZeenButton from '../ZeenButton/ZeenButton'
import ZeenText from '../ZeenText/ZeenText'
export default {
name: 'ZeenListTableItem',
components: {ZeenText, ZeenButton, ZeenHeadline},
props: {
index: {
type: Number,
required: true,
default: 0,
},
title: {
type: String,
required: true,
},
button: {
type: Object,
required: true,
},
viewersText: {
type: String,
default: 'зрителей',
},
maxViewers: {
type: Number,
default: 100,
},
indexText: {
type: String,
default: 'Комната',
},
sectionName: {
type: String,
default: 'Спикеры',
},
attrsHeadline: {
type: Object,
default: () => ({tag: 'h3'}),
},
attrsButton: Object,
table: {
type: Object,
required: true,
},
isPictures: {
type: Boolean,
default: true,
},
},
methods: {
joinTable() {
this.$emit('join', this.table.table_id)
},
},
computed: {
buttonText() {
return this.isTableFull ? this.button?.fullTable : this.button?.table
},
isTableFull() {
return this.table.viewers_count >= this.maxViewers
},
},
}
</script>
<style scoped lang="scss">
@import 'src/styles/mixins';
.list-table-item {
border-radius: var(--zeen-list-table-item-border-radius);
background-color: var(--zeen-list-table-item-background);
padding: var(--zeen-list-table-item-padding);
box-shadow: 0px 2px 16px var(--zeen-list-table-item-shadow-color);
&__header-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--zeen-list-table-item-header-margin-bottom);
@include phones {
flex-direction: column;
}
}
&__title {
display: flex;
flex-direction: column;
font-style: normal;
font-weight: var(--zeen-list-table-item-header-title-weight);
font-size: var(--zeen-list-table-item-header-title-size);
line-height: var(--zeen-list-table-item-header-title-line-height);
color: var(--zeen-list-table-item-title-color);
}
&__index {
font-style: normal;
font-weight: var(--zeen-list-table-item-header-index-weight);
font-size: var(--zeen-list-table-item-header-index-size);
color: var(--zeen-list-table-item-index-color);
display: flex;
align-items: center;
}
&__viewers {
display: flex;
align-items: center;
font-weight: var(--zeen-list-table-item-viewers-weight);
font-size: var(--zeen-list-table-item-viewers-size);
line-height: var(--zeen-list-table-item-viewers-line-height);
color: var(--zeen-list-table-item-viewers-color);
@include phones {
margin-top: var(--zeen-list-table-item-viewers-margin-top);
}
&-count {
margin-left: var(--zeen-list-table-item-viewers-count-margin-left);
color: var(--zeen-list-table-item-viewers-count-color);
&_empty {
color: var(--zeen-list-table-item-viewers-color);
}
}
svg {
path {
fill: var(--zeen-list-table-item-viewers-icon-color);
}
}
::v-deep {
.zeen-text {
color: var(--zeen-list-table-item-viewers-color);
}
}
}
&__footer {
display: flex;
justify-content: space-between;
align-items: flex-end;
@include phones {
align-items: flex-start;
flex-direction: column;
}
}
&__list-speakers {
width: 100%;
list-style: none;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
gap: var(--zeen-list-table-item-speakers-gap-vertical) var(--zeen-list-table-item-speakers-gap-horizontal);
}
&__button {
@include phones {
width: var(--zeen-list-table-item-button-phone-width);
margin-top: var(--zeen-list-table-item-button-margin-top);
}
}
&__speaker {
display: flex;
align-items: flex-start;
width: var(--zeen-list-table-item-speaker-width);
}
&__speaker-avatar {
margin-right: var(--zeen-list-table-item-speaker-avatar-margin-right);
border: var(--zeen-list-table-item-speaker-avatar-border-width) solid
var(--zeen-list-table-item-speaker-border-color);
border-radius: var(--zeen-list-table-item-speaker-avatar-border-radius);
width: var(--zeen-list-table-item-speaker-avatar-size);
height: var(--zeen-list-table-item-speaker-avatar-size);
}
&__speaker-name {
max-width: var(--zeen-list-table-item-speaker-name-max-width);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-style: normal;
font-weight: var(--zeen-list-table-item-speaker-name-weight);
font-size: var(--zeen-list-table-item-speaker-name-size);
line-height: var(--zeen-list-table-item-speaker-name-line-height);
color: var(--zeen-list-table-item-speaker-name-color);
}
}
</style>