<template>
  <span class="RList">
    {{ list }}
  </span>
</template>

<script lang="ts">
import { isArray } from 'lodash';
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
  inheritAttrs: false,
})
export default class ListCell extends Vue {
  @Prop()
  value: string[];

  get list(): string {
    if (!isArray(this.value)) return this.value;
    return this.value.length ? this.value.join(', ') : '-';
  }
}
</script>

<style lang="scss" scoped>
.RList {
  color: rgba(2, 12, 18, 0.9);
  font-family: 'Golos UI', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
}
</style>
