Show subscription badge where required and disable UI elements accordingly
This commit is contained in:
@@ -4,7 +4,7 @@ import { useTemplateRef, ref } from 'vue';
|
||||
|
||||
const fileInput = useTemplateRef('fileInput');
|
||||
|
||||
const props = defineProps(['src', 'fallbackSrc', 'size', 'maxSize', 'displayHeight', 'displayWidth']);
|
||||
const props = defineProps(['src', 'fallbackSrc', 'size', 'maxSize', 'displayHeight', 'displayWidth', 'disabled']);
|
||||
const emits = defineEmits(['changed']);
|
||||
defineExpose({
|
||||
clear(originalSrc = '') {
|
||||
@@ -113,10 +113,10 @@ function onError() {
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="image-picker">
|
||||
<div>
|
||||
<input @change="onChanged($event)" type="file" ref="fileInput" style="display: none" accept="image/*"/>
|
||||
|
||||
<div ref="image" class="image-picker" @click="onShowIconSelector()">
|
||||
<div ref="image" :disabled="disabled || null" class="image-picker" @click="!disabled && onShowIconSelector()">
|
||||
<img :src="internalSrc || src" @error="onError" :style="{ height: displayHeight || null, width: displayWidth || null }">
|
||||
<i class="image-picker-edit-indicator fa fa-pencil-alt"></i>
|
||||
</div>
|
||||
@@ -132,6 +132,10 @@ function onError() {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-picker[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.image-picker > img {
|
||||
display: block;
|
||||
/* height: 320px;*/
|
||||
|
||||
Reference in New Issue
Block a user