✨ Add action toolbar component for gamemaster functionality
This commit is contained in:
@@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="fileContent" class="action-bar">
|
||||||
|
<button
|
||||||
|
@click="copySelected"
|
||||||
|
:disabled="selectionCount === 0"
|
||||||
|
class="btn-action"
|
||||||
|
>
|
||||||
|
📋 Copy Selected ({{ selectionCount }} lines)
|
||||||
|
</button>
|
||||||
|
<button @click="copyAll" class="btn-action">📋 Copy All</button>
|
||||||
|
<button
|
||||||
|
@click="exportSelected"
|
||||||
|
:disabled="selectionCount === 0"
|
||||||
|
class="btn-action"
|
||||||
|
>
|
||||||
|
💾 Export Selected
|
||||||
|
</button>
|
||||||
|
<button @click="exportAll" class="btn-action">💾 Export All</button>
|
||||||
|
<button @click="shareUrl" class="btn-action">🔗 Share Link</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { toRef } from 'vue';
|
||||||
|
import { useLineSelection } from '../../composables/useLineSelection.js';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
displayLines: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
fileContent: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
selectedFile: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const displayLines = toRef(props, 'displayLines');
|
||||||
|
const fileContent = toRef(props, 'fileContent');
|
||||||
|
const selectedFile = toRef(props, 'selectedFile');
|
||||||
|
|
||||||
|
const {
|
||||||
|
selectionCount,
|
||||||
|
copySelected,
|
||||||
|
copyAll,
|
||||||
|
exportSelected,
|
||||||
|
exportAll,
|
||||||
|
shareUrl
|
||||||
|
} = useLineSelection(displayLines, fileContent, selectedFile);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.action-bar {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-action {
|
||||||
|
background: #f5f5f5;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-action:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user