mirror of
https://github.com/sysadminsmedia/homebox.git
synced 2025-12-21 21:33:02 +01:00
cbaf483788
* feat: migrate tools page and label generator to shadcn * chore: lint issues * feat: also do profile page * feat: shadcn 404 page * feat: login page shadcn * fix: daisyui ironically breaks the z height for the login page * feat: componentise the language selector and add it to the login page * feat: use nuxtlink * feat: card and table made more shadcn * feat: shadcn statscard * chore: lint * feat: shadcn labelchip and locationcard * feat: shadcn locations page * refactor: remove unused new item page * chore: lint * feat: shadcn item card * fix: wrapping of location and lint * feat: ctrl enter in text area in form submits form * feat: begin shadcn locations page and remove pageqrcode comp in favour of integrating it into labelmaker * chore: lint + remove unused code * fix: remove uneeded margin * feat: shadcn labels page and fix some issues with location * feat: shadcn scanner * chore: lint * feat: begin shadcning item pages * feat: shadcn maintenance page * feat: begin shadcn search page * fix: quick switch blurry text and crashing page when switching + incorrect z height for create menu * feat: finish shadcn search page * chore: lint * feat: shadcn edit item page * fix: quickmenumodal bug * feat: shadcn item details page * feat: remove all non-color related daisyui classes * fix: type error * fix: quick menu modal again :(
86 lines
2.5 KiB
Vue
86 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";
|
|
|
|
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>
|