import { defineComponent, reactive, ref, Ref, watch, PropType, } from 'vue'; import { model, blockProps, SbToolbar, SbButton, SbBlock } from '@schlechtenburg/core'; import { getDefaultData, ImageData, ImageProps, } from './util'; import './style.scss'; export default defineComponent({ name: 'sb-image-edit', model, props: { ...blockProps, eventUpdate: { type: Function, default: () => {} }, data: { type: (null as unknown) as PropType, default: getDefaultData, }, }, setup(props: ImageProps) { const localData = reactive({ src: props.data.src, alt: props.data.alt, description: props.data.description, }); const fileInput: Ref = ref(null); watch(() => props.data, () => { localData.src = props.data.src; localData.alt = props.data.alt; localData.description = props.data.description; }); const selectImage = () => { if (fileInput.value) { fileInput.value.click(); } }; const onImageSelect = () => { if (fileInput.value && fileInput.value.files && fileInput.value.files.length) { const reader = new FileReader(); reader.addEventListener('load', () => { props.eventUpdate({ src: reader.result, alt: props.data.alt, description: props.data.description, }); }); reader.readAsDataURL(fileInput.value.files[0]); } }; const onDescriptionUpdate = (description) => { props.eventUpdate({ ...props.data, description, }); }; return () => (
{localData.src ? Change Image : null} {localData.src ? <> {localData.alt} onDescriptionUpdate(updated)} /> : Select Image}
); }, });