tilderadio
/
AzuraCast
mirror of https://github.com/AzuraCast/AzuraCast.git
4
0
Fork 0
Code Issues Releases Wiki Activity

Fix copy-to-clipboard for Vue 3.

This commit is contained in:
Buster Neece 2022-12-12 12:39:00 -06:00
parent 2fdc52691e
commit 79df3bb8b4
No known key found for this signature in database
GPG Key ID: F1D2E64A0005E80E
7 changed files with 62 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/npm-shrinkwrap.json generated
View File

@ -64,9 +64,9 @@
"sweetalert2": "11.4.8",
"vue": "^3.2",
"vue-axios": "^3.5",
"vue-clipboard2": "^0.3.3",
"vue-loader": "^17",
"vue-style-loader": "^4.1.3",
"vue3-clipboard": "^1.0.0",
"vue3-daterange-picker": "^1",
"vue3-gettext": "^2.3.4",
"vuedraggable": "^2.24.1",
@ -10031,14 +10031,6 @@
"vue": "^3.0.0 || ^2.0.0"
}
},
"node_modules/vue-clipboard2": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
"integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
"dependencies": {
"clipboard": "^2.0.0"
}
},
"node_modules/vue-functional-data-merge": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
@ -10167,6 +10159,17 @@
"node": ">=4.0.0"
}
},
"node_modules/vue3-clipboard": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/vue3-clipboard/-/vue3-clipboard-1.0.0.tgz",
"integrity": "sha512-GUqKh1oO79xDpq0z+cCv/NDVTpcJGNDzeNgT3PmTdTp/WJh3gcTrDqIYKycKhzMFOtIFJ7hO/+usgyWtT+fNhA==",
"dependencies": {
"clipboard": "^2.0.6"
},
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/vue3-daterange-picker": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/vue3-daterange-picker/-/vue3-daterange-picker-1.0.1.tgz",
@ -18152,14 +18155,6 @@
"integrity": "sha512-GP+dct7UlAWkl1qoP3ppw0z6jcSua5/IrMpjB5O8bh089iIiJ+hdxPYH2NPEpajlYgkW5EVMP95ttXWdas1O0g==",
"requires": {}
},
"vue-clipboard2": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
"integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
"requires": {
"clipboard": "^2.0.0"
}
},
"vue-functional-data-merge": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
@ -18254,6 +18249,14 @@
}
}
},
"vue3-clipboard": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/vue3-clipboard/-/vue3-clipboard-1.0.0.tgz",
"integrity": "sha512-GUqKh1oO79xDpq0z+cCv/NDVTpcJGNDzeNgT3PmTdTp/WJh3gcTrDqIYKycKhzMFOtIFJ7hO/+usgyWtT+fNhA==",
"requires": {
"clipboard": "^2.0.6"
}
},
"vue3-daterange-picker": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/vue3-daterange-picker/-/vue3-daterange-picker-1.0.1.tgz",

2
frontend/package.json
View File

@ -65,9 +65,9 @@
"sweetalert2": "11.4.8",
"vue": "^3.2",
"vue-axios": "^3.5",
"vue-clipboard2": "^0.3.3",
"vue-loader": "^17",
"vue-style-loader": "^4.1.3",
"vue3-clipboard": "^1.0.0",
"vue3-daterange-picker": "^1",
"vue3-gettext": "^2.3.4",
"vuedraggable": "^2.24.1",

4
frontend/vue/base.js
View File

@ -5,6 +5,7 @@ import gettext from './vendor/gettext';
import {createApp} from "vue";
import useBootstrapVue from "./vendor/bootstrapVue";
import useSweetAlert from "./vendor/sweetalert";
import useVueClipboard from "~/vendor/clipboard";
export default function (component, options) {
return function (el, props) {
@ -80,6 +81,9 @@ export default function (component, options) {
/* SweetAlert */
useSweetAlert(vueApp);
/* Clipboard */
useVueClipboard(vueApp);
vueApp.mount(el);
};
}

35
frontend/vue/components/Common/CopyToClipboardButton.vue
View File

@ -5,29 +5,22 @@
</button>
</template>
<script>
import '~/vendor/clipboard.js';
import Icon from './Icon';
<script setup>
import Icon from "~/components/Common/Icon.vue";
import {copyToClipboard} from "~/vendor/clipboard";
export default {
components: { Icon },
props: {
text: {
type: String,
required: true,
},
hideText: {
type: Boolean,
default: false
}
const props = defineProps({
text: {
type: String,
required: true,
},
methods: {
doCopy() {
this.$copyText(this.text).then(function (e) {
}, function (e) {
console.error(e);
})
}
hideText: {
type: Boolean,
default: false
}
});
const doCopy = () => {
copyToClipboard(props.text);
};
</script>

3
frontend/vue/components/Common/StreamingLogModal.vue
View File

@ -16,6 +16,7 @@
<script>
import '~/vendor/clipboard.js';
import StreamingLogView from "~/components/Common/StreamingLogView";
import {copyToClipboard} from "~/vendor/clipboard";
export default {
name: 'StreamingLogModal',
@ -36,7 +37,7 @@ export default {
this.$refs.modal.show();
},
doCopy() {
this.$copyText(this.$refs.logView.getContents());
copyToClipboard(this.$refs.logView.getContents());
},
close() {
this.$refs.modal.hide();

3
frontend/vue/components/Stations/Queue/LogsModal.vue
View File

@ -15,6 +15,7 @@
<script>
import '~/vendor/clipboard.js';
import {copyToClipboard} from "~/vendor/clipboard";
export default {
name: 'QueueLogsModal',
@ -39,7 +40,7 @@ export default {
this.$refs.modal.show();
},
doCopy() {
this.$copyText(this.logs);
copyToClipboard(this.logs);
},
close() {
this.$refs.modal.hide();

22
frontend/vue/vendor/clipboard.js vendored
View File

@ -1,7 +1,23 @@
import VueClipboard from 'vue-clipboard2';
import VueClipboard, {copyText} from 'vue3-clipboard';
VueClipboard.config.autoSetContainer = true;
export function copyToClipboard(text) {
copyText(
text,
undefined,
(error) => {
if (error) {
console.error(error)
}
}
);
}
export default function useVueClipboard(vueApp) {
vueApp.use(VueClipboard);
vueApp.use(
VueClipboard,
{
autoSetContainer: true,
appendToBody: true,
}
);
};