AmImagePlaceholder.vue
54 lines
| 1 | <template> |
| 2 | <span :class="props.itemClass" :style="{ ...cardImage(props.itemData) }"> |
| 3 | {{ cardSign(props.itemData) }} |
| 4 | </span> |
| 5 | </template> |
| 6 | |
| 7 | <script setup> |
| 8 | import { amCardColors } from '../../../assets/js/common/colorManipulation' |
| 9 | |
| 10 | let props = defineProps({ |
| 11 | itemClass: { |
| 12 | type: String, |
| 13 | default: '', |
| 14 | }, |
| 15 | itemData: { |
| 16 | type: Object, |
| 17 | default: () => {}, |
| 18 | }, |
| 19 | trimString: { |
| 20 | type: Number, |
| 21 | default: 2, |
| 22 | }, |
| 23 | }) |
| 24 | |
| 25 | function cardImage(itemData) { |
| 26 | if (itemData.pictureFullPath) return { backgroundImage: `url(${itemData.pictureFullPath})` } |
| 27 | |
| 28 | return { |
| 29 | backgroundColor: `${amCardColors.value[Math.floor(Math.random() * amCardColors.value.length)]}`, |
| 30 | } |
| 31 | } |
| 32 | |
| 33 | function cardSign(itemData) { |
| 34 | if (!itemData.pictureFullPath) { |
| 35 | let name = |
| 36 | 'firstName' in itemData ? `${itemData.firstName} ${itemData.lastName}` : itemData.name |
| 37 | return name |
| 38 | .split(' ') |
| 39 | .map((s) => s.charAt(0)) |
| 40 | .join('') |
| 41 | .toUpperCase() |
| 42 | .substring(0, props.trimString) |
| 43 | .replace(/[^\w\s]/g, '') |
| 44 | } |
| 45 | return '' |
| 46 | } |
| 47 | </script> |
| 48 | |
| 49 | <script> |
| 50 | export default { |
| 51 | name: 'AmImagePlaceholder', |
| 52 | } |
| 53 | </script> |
| 54 |