vuestic-ui/packages/ui/src/components/va-avatar-group/VaAvatarGroup.vue at 4e8f491378d2a6339516137df6b8e7ffbe837cbb · epicmaxco/vuestic-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<template>
  <div
    class="va-avatar-group"
    :class="classComputed"
    role="group"
  >
    <va-avatar
      v-for="(option, idx) in maxOptions"
      :key="idx"
      v-bind="{ ...avatarProps, ...option }"
      role="listitem"
      tabindex="0"
    />
    <slot name="rest" v-bind="avatarProps">
      <va-avatar
        v-bind="avatarProps"
        role="listitem"
      >
        +{{ restOptionsCount }}
      </va-avatar>
    </slot>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, PropType } from 'vue'

import { VaAvatar } from '../va-avatar'

import pick from 'lodash/pick.js'
import { useBem, useComponentPresetProp, useSize, useSizeProps } from '../../composables'
import { useAvatarProps } from '../va-avatar/hooks/useAvatarProps'

export default defineComponent({
  name: 'VaAvatarGroup',

  components: {
    VaAvatar,
  },

  props: {
    ...useSizeProps,
    ...useComponentPresetProp,
    ...useAvatarProps,

    max: {
      type: Number,
      default: undefined,
    },
    vertical: {
      type: Boolean,
      default: false,
    },
    options: {
      type: Array as PropType<Record<string, unknown>[]>,
      default: () => [],
    },
  },

  setup (props) {
    const classComputed = useBem('va-avatar-group', () => ({
      ...pick(props, ['vertical']),
    }))

    const maxOptions = computed(() => props.options.slice(0, props.max))
    const visibleItemsCount = computed(() => props.max ? props.max + 1 : 1)
    const restOptionsCount = computed(() => props.options.length - (props.max || 0))
    const { sizeComputed, fontSizeComputed } = useSize(props, 'VaAvatarGroup')

    const avatarProps = computed(() => ({
      ...props,
      fontSize: fontSizeComputed.value,
      size: sizeComputed.value,
    }))

    return {
      classComputed,
      maxOptions,
      visibleItemsCount,
      restOptionsCount,
      avatarProps,
    }
  },
})
</script>

<style lang="scss">
@import "variables";

.va-avatar-group {
  display: flex;
  flex-wrap: nowrap;

  .va-avatar + .va-avatar {
    margin-left: var(--va-avatar-group-gap);
  }

  &--vertical {
    flex-direction: column;

    .va-avatar + .va-avatar {
      margin-left: 0;
      margin-top: var(--va-avatar-group-gap);
    }
  }
}
</style>