mirror of
https://github.com/sysadminsmedia/homebox.git
synced 2025-12-27 15:41:42 +01:00
d4e28e6f3b
* feat: begin upgrading deps, still very buggy * feat: progress * feat: sort all type issues * fix: sort type issues * fix: import sonner styles * fix: nuxt is the enemy * fix: try sorting issue with workflows * fix: update vitest config for dynamic import of path and defineConfig * fix: add missing import * fix: add time out to try and fix issues * fix: add ui:ci:preview task for frontend build in CI mode * fix: i was silly * feat: add go:ci:with-frontend task for CI mode and remove ui:ci:preview from e2e workflow * fix: update baseURL in Playwright config for local testing to use port 7745 * fix: update E2E_BASE_URL and remove wait for timeout in login test for smoother execution
87 lines
2.5 KiB
Vue
87 lines
2.5 KiB
Vue
<template>
|
|
<Button size="icon" variant="outline" class="relative" @click="copyText">
|
|
<div
|
|
:data-copied="copied"
|
|
class="group absolute inset-0 flex items-center justify-center transition-transform duration-300 data-[copied=true]:rotate-[360deg]"
|
|
>
|
|
<MdiContentCopy
|
|
class="group-data-[copied=true]:hidden"
|
|
:style="{
|
|
height: `${iconSize}px`,
|
|
width: `${iconSize}px`,
|
|
}"
|
|
/>
|
|
<MdiClipboard
|
|
class="hidden group-data-[copied=true]:block"
|
|
:style="{
|
|
height: `${iconSize}px`,
|
|
width: `${iconSize}px`,
|
|
}"
|
|
/>
|
|
</div>
|
|
</Button>
|
|
|
|
<AlertDialog v-model:open="copyError">
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle class="space-y-2">
|
|
{{ $t("components.global.copy_text.failed_to_copy") }}
|
|
{{ isNotHttps ? $t("components.global.copy_text.https_required") : "" }}
|
|
</AlertDialogTitle>
|
|
<AlertDialogDescription class="text-sm">
|
|
{{ $t("components.global.copy_text.learn_more") }}
|
|
<a
|
|
href="https://homebox.software/en/user-guide/tips-tricks.html#copy-to-clipboard"
|
|
class="text-primary hover:underline"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
{{ $t("components.global.copy_text.documentation") }}
|
|
</a>
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogAction>Continue</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import MdiContentCopy from "~icons/mdi/content-copy";
|
|
import MdiClipboard from "~icons/mdi/clipboard";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@/components/ui/alert-dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
const props = defineProps({
|
|
text: {
|
|
type: String as () => string,
|
|
default: "",
|
|
},
|
|
iconSize: {
|
|
type: Number as () => number,
|
|
default: 20,
|
|
},
|
|
});
|
|
|
|
const { copy, copied } = useClipboard({ source: props.text, copiedDuring: 1000 });
|
|
const copyError = ref(false);
|
|
const isNotHttps = window.location.protocol !== "https:";
|
|
|
|
async function copyText() {
|
|
await copy(props.text);
|
|
if (!copied.value) {
|
|
console.error(`Failed to copy to clipboard${isNotHttps ? " likely because protocol is not https" : ""}`);
|
|
copyError.value = true;
|
|
}
|
|
}
|
|
</script>
|