nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-19 00:22:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

added prettier

Browse Source
This commit is contained in:
Čarodej
2022-02-01 12:21:38 +01:00
parent 5ae875233b
commit b38b532cbe
284 changed files with 25410 additions and 25338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

320
resources/js/components/Others/Forms/ImageInput.vue
View File

@@ -4,21 +4,11 @@
<x-icon size="14" class="close-icon text-theme" />
</div>
<input
ref="file"
type="file"
@change="showImagePreview($event)"
class="dummy"
/>
<img
ref="image"
:src="imagePreview"
class="image-preview"
v-if="imagePreview"
/>
<input ref="file" type="file" @change="showImagePreview($event)" class="dummy" />
<img ref="image" :src="imagePreview" class="image-preview" v-if="imagePreview" />
<div class="dropzone-message" v-show="! isData">
<image-icon size="28" class="icon-upload text-theme mx-auto mb-1"/>
<div class="dropzone-message" v-show="!isData">
<image-icon size="28" class="icon-upload text-theme mx-auto mb-1" />
<span class="dropzone-title">
{{ $t('input_image.title') }}
</span>
@@ -30,179 +20,179 @@
</template>
<script>
import { XIcon, ImageIcon } from 'vue-feather-icons'
import { XIcon, ImageIcon } from 'vue-feather-icons'
export default {
name: 'ImageInput',
props: [
'image', 'error'
],
components: {
ImageIcon,
XIcon,
},
data() {
return {
imagePreview: undefined
}
},
computed: {
isData() {
return typeof this.imagePreview === 'undefined' || this.imagePreview === '' ? false : true
},
},
methods: {
resetImage() {
this.imagePreview = undefined
this.$emit('input', undefined)
},
showImagePreview(event) {
const imgPath = event.target.files[0].name,
extn = imgPath
.substring(imgPath.lastIndexOf('.') + 1)
.toLowerCase()
if (['png', 'jpg', 'jpeg', 'svg'].includes(extn)) {
const file = event.target.files[0],
reader = new FileReader()
reader.onload = () => (this.imagePreview = reader.result)
reader.readAsDataURL(file)
// Update user avatar
this.$emit('input', event.target.files[0])
} else {
alert( this.$t('validation_errors.wrong_image') )
}
}
},
created() {
// If has default image then load
if (this.image) this.imagePreview = this.image
export default {
name: 'ImageInput',
props: ['image', 'error'],
components: {
ImageIcon,
XIcon,
},
data() {
return {
imagePreview: undefined,
}
}
},
computed: {
isData() {
return typeof this.imagePreview === 'undefined' || this.imagePreview === '' ? false : true
},
},
methods: {
resetImage() {
this.imagePreview = undefined
this.$emit('input', undefined)
},
showImagePreview(event) {
const imgPath = event.target.files[0].name,
extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase()
if (['png', 'jpg', 'jpeg', 'svg'].includes(extn)) {
const file = event.target.files[0],
reader = new FileReader()
reader.onload = () => (this.imagePreview = reader.result)
reader.readAsDataURL(file)
// Update user avatar
this.$emit('input', event.target.files[0])
} else {
alert(this.$t('validation_errors.wrong_image'))
}
},
},
created() {
// If has default image then load
if (this.image) this.imagePreview = this.image
},
}
</script>
<style lang="scss" scoped>
@import '../../../../sass/vuefilemanager/variables';
@import '../../../../sass/vuefilemanager/mixins';
@import '../../../../sass/vuefilemanager/variables';
@import '../../../../sass/vuefilemanager/mixins';
.dropzone {
border: 1px dashed #a1abc2;
border-radius: 8px;
position: relative;
text-align: center;
display: flex;
align-items: center;
min-height: 175px;
.dropzone {
border: 1px dashed #a1abc2;
border-radius: 8px;
position: relative;
text-align: center;
display: flex;
align-items: center;
min-height: 175px;
&.is-error {
border: 2px dashed rgba(253, 57, 122, 0.3);
&.is-error {
border: 2px dashed rgba(253, 57, 122, 0.3);
.dropzone-title {
color: $danger;
.dropzone-title {
color: $danger;
}
.icon-upload {
rect,
circle,
polyline {
stroke: $danger;
}
}
}
.icon-upload {
rect, circle, polyline {
stroke: $danger
input[type='file'] {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
width: 100%;
cursor: pointer;
}
.image-preview {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
left: 0;
padding: 25px;
display: block;
&.fit-image {
object-fit: cover;
border-radius: 12px;
overflow: hidden;
}
}
.dropzone-message {
padding: 50px 0;
width: 100%;
.icon-upload {
rect,
circle,
polyline {
color: inherit;
}
}
.dropzone-title {
@include font-size(16);
font-weight: 700;
display: block;
}
.dropzone-description {
color: $text_muted;
@include font-size(12);
}
}
.reset-image {
z-index: 2;
background: white;
border-radius: 50px;
display: block;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
@include transform(translateY(-50%) translateX(50%));
padding: 0px 4px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
.close-icon {
vertical-align: middle;
line {
path {
fill: $text;
}
}
}
}
}
input[type='file'] {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
width: 100%;
cursor: pointer;
}
.image-preview {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
left: 0;
padding: 25px;
display: block;
&.fit-image {
object-fit: cover;
border-radius: 12px;
overflow: hidden;
}
}
.dark {
.dropzone {
border-color: rgba(white, 0.2);
.dropzone-message {
padding: 50px 0;
width: 100%;
.icon-upload {
rect, circle, polyline {
color: inherit
path,
polyline,
line {
color: inherit;
}
}
.dropzone-title {
@include font-size(16);
font-weight: 700;
display: block;
}
.dropzone-description {
color: $text_muted;
@include font-size(12);
}
}
.reset-image {
z-index: 2;
background: white;
border-radius: 50px;
display: block;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
@include transform(translateY(-50%) translateX(50%));
padding: 0px 4px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
.close-icon {
vertical-align: middle;
line {
path {
fill: $text;
}
}
}
}
}
.dark {
.dropzone {
border-color: rgba(white, 0.2);
.dropzone-message {
.icon-upload {
path, polyline, line {
color: inherit;
}
}
.dropzone-description {
color: $dark_mode_text_secondary;
}
color: $dark_mode_text_secondary;
}
}
}
}
</style>