70 lines
1.9 KiB
JavaScript
70 lines
1.9 KiB
JavaScript
const { inject, computed } = Vue;
|
|
|
|
export default {
|
|
name: 'SelectionToolbar',
|
|
setup() {
|
|
const appState = inject('appState');
|
|
|
|
const visible = computed(() => appState.selectedCells.value.size > 0);
|
|
const count = computed(() => appState.selectedCells.value.size);
|
|
const hasClipboard = computed(() => !!appState.clipboard.value);
|
|
|
|
return {
|
|
...appState,
|
|
visible,
|
|
count,
|
|
hasClipboard
|
|
};
|
|
},
|
|
template: `
|
|
<transition
|
|
appear
|
|
enter-active-class="animated bounceInUp"
|
|
leave-active-class="animated bounceOutDown"
|
|
>
|
|
<div v-if="visible" class="selection-toolbar-root">
|
|
<div class="selection-toolbar-content shadow-4">
|
|
<div class="selection-toolbar-count text-weight-bold">
|
|
{{ count }} selected
|
|
</div>
|
|
<q-separator vertical inset class="q-mx-sm" style="opacity: 0.2" />
|
|
<div class="selection-toolbar-actions">
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
color="primary"
|
|
icon="content_copy"
|
|
@click="copySelectedCells"
|
|
>
|
|
<q-tooltip>Copy (Ctrl+C)</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
color="primary"
|
|
icon="content_paste"
|
|
:disabled="!hasClipboard"
|
|
@click="pasteToSelectedCells"
|
|
>
|
|
<q-tooltip>Paste (Ctrl+V)</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
color="primary"
|
|
icon="close"
|
|
@click="clearSelection"
|
|
class="q-ml-sm"
|
|
>
|
|
<q-tooltip>Clear Selection (Esc)</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
`
|
|
};
|