mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
58 lines
1.0 KiB
Vue
58 lines
1.0 KiB
Vue
<template>
|
|
<ds-space
|
|
class="hc-empty"
|
|
margin="x-large"
|
|
centered
|
|
>
|
|
<ds-text>
|
|
<img
|
|
:src="iconPath"
|
|
width="80"
|
|
class="hc-empty-icon"
|
|
style="margin-bottom: 5px"
|
|
alt="Empty"
|
|
><br>
|
|
<ds-text
|
|
class="hc-empty-message"
|
|
color="softer"
|
|
>
|
|
{{ message }}
|
|
</ds-text>
|
|
</ds-text>
|
|
</ds-space>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'HcEmpty',
|
|
props: {
|
|
/**
|
|
* Icon that should be shown
|
|
* @options messages|events|alert|tasks|docs|file
|
|
*/
|
|
icon: {
|
|
type: String,
|
|
required: true,
|
|
validator: value => {
|
|
return value.match(/(messages|events|alert|tasks|docs|file)/)
|
|
}
|
|
},
|
|
/**
|
|
* Message that appears under the icon
|
|
*/
|
|
message: { type: String, required: true }
|
|
},
|
|
computed: {
|
|
iconPath() {
|
|
return `/img/empty/${this.icon}.svg`
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.hc-empty-icon {
|
|
padding-bottom: $font-space-large;
|
|
}
|
|
</style>
|