antares/src/renderer/components/BaseUploadInput.vue

108 lines
2.0 KiB
Vue
Raw Normal View History

2021-02-05 19:37:35 +01:00
<template>
<label :for="`id_${id}`" class="file-uploader">
<span class="file-uploader-message">
<i class="mdi mdi-folder-open mr-1" />{{ message }}
2021-02-05 19:37:35 +01:00
</span>
<span class="text-ellipsis file-uploader-value">
{{ value | lastPart }}
</span>
<i
v-if="value.length"
class="file-uploader-reset mdi mdi-close"
@click.prevent="clear"
/>
<form :ref="`form_${id}`">
<input
:id="`id_${id}`"
class="file-uploader-input"
type="file"
@change="$emit('change', $event)"
>
</form>
</label>
</template>
<script>
export default {
name: 'BaseUploadInput',
filters: {
lastPart (string) {
if (!string) return '';
string = string.split(/[/\\]+/).pop();
if (string.length >= 19)
string = `...${string.slice(-19)}`;
return string;
}
},
props: {
message: {
default: 'Browse',
2021-02-05 19:37:35 +01:00
type: String
},
value: {
default: '',
type: String
}
},
data () {
return {
id: null
};
},
mounted () {
this.id = this._uid;
},
methods: {
clear () {
this.$emit('clear');
}
}
};
</script>
<style lang="scss" scoped>
.file-uploader {
border-radius: $border-radius;
2021-02-05 19:37:35 +01:00
height: 1.8rem;
line-height: 1.2rem;
display: flex;
cursor: pointer;
transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
position: relative;
2021-02-17 14:47:15 +01:00
flex: 1 1 auto;
2021-02-05 19:37:35 +01:00
> span {
padding: 0.25rem 0.4rem;
}
.file-uploader-message {
display: flex;
}
.file-uploader-input {
display: none;
}
.file-uploader-value {
display: block;
width: 100%;
padding-right: 1rem;
}
.file-uploader-reset {
z-index: 1;
position: absolute;
right: 5px;
top: calc(50% - 8px);
2021-02-05 19:37:35 +01:00
}
}
:disabled {
.file-uploader {
cursor: not-allowed;
opacity: 0.5;
}
}
</style>