<template> <input v-if="name" type="image" :name="name" :src="url" :width="size" :height="size" v-bind="$attrs" v-on="$listeners" /> <img v-else :src="url" :width="size" :height="size" :class="css_class" v-bind="$attrs" v-on="$listeners" /> </template> <script lang="ts"> import Vue from 'vue'; export default Vue.extend({ name: 'studip-icon', props: { shape: String, role: { type: String, required: false, default: 'clickable', }, size: { type: Number, required: false, default: 16, }, name: { type: String, required: false, } }, computed: { url(): string { if (this.shape.indexOf('http') === 0) { return this.shape; } var path = this.shape.split('+').reverse().join('/'); return `${window.STUDIP.ASSETS_URL}images/icons/${this.color}/${path}.svg`; }, color(): string { switch (this.role) { case 'info': return 'black'; case 'inactive': return 'grey'; case 'accept': case 'status-green': return 'green'; case 'attention': case 'new': case 'status-red': return 'red'; case 'info_alt': return 'white'; case 'status-yellow': return 'yellow'; case 'sort': case 'clickable': case 'navigation': default: return 'blue'; } }, css_class(): string { return 'studipicon ' + this.$attrs.class; //TODO: is this correct? } }, }); </script>