71 lines
1.4 KiB
Vue
71 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<XModalWindow ref="dialog"
|
||
|
|
:width="800"
|
||
|
|
:height="500"
|
||
|
|
:with-ok-button="true"
|
||
|
|
:ok-button-disabled="(type === 'file') && (selected.length === 0)"
|
||
|
|
@click="cancel()"
|
||
|
|
@close="cancel()"
|
||
|
|
@ok="ok()"
|
||
|
|
@closed="$emit('closed')"
|
||
|
|
>
|
||
|
|
<template #header>
|
||
|
|
{{ multiple ? ((type === 'file') ? $t('selectFiles') : $t('selectFolders')) : ((type === 'file') ? $t('selectFile') : $t('selectFolder')) }}
|
||
|
|
<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
|
||
|
|
</template>
|
||
|
|
<XDrive :multiple="multiple" @changeSelection="onChangeSelection" @selected="ok()" :select="type"/>
|
||
|
|
</XModalWindow>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent } from 'vue';
|
||
|
|
import XDrive from './drive.vue';
|
||
|
|
import XModalWindow from '@/components/ui/modal-window.vue';
|
||
|
|
import number from '@/filters/number';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
components: {
|
||
|
|
XDrive,
|
||
|
|
XModalWindow,
|
||
|
|
},
|
||
|
|
|
||
|
|
props: {
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
required: false,
|
||
|
|
default: 'file'
|
||
|
|
},
|
||
|
|
multiple: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
emits: ['done', 'closed'],
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
selected: []
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
ok() {
|
||
|
|
this.$emit('done', this.selected);
|
||
|
|
this.$refs.dialog.close();
|
||
|
|
},
|
||
|
|
|
||
|
|
cancel() {
|
||
|
|
this.$emit('done');
|
||
|
|
this.$refs.dialog.close();
|
||
|
|
},
|
||
|
|
|
||
|
|
onChangeSelection(xs) {
|
||
|
|
this.selected = xs;
|
||
|
|
},
|
||
|
|
|
||
|
|
number
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|