homebox/frontend/components/global/CopyText.vue
Hayden 91d0c588d9
refactor: refactor item page UI (#235)
* fix generated types

* fix tailwind auto-complete

* force lowercase buttons

* add title and change style for items page

* add copy button support for item details

* empty state for log

* fix duplicate padding

* add option for create without closing the current dialog.

* hide purchase price is not set

* invert toggle for edit mode

* update styles on item cards

* add edit support for maintenance logs
2023-01-21 21:15:23 -09:00

55 lines
994 B
Vue

<template>
<button class="" @click="copyText">
<label
class="swap swap-rotate"
:class="{
'swap-active': copied,
}"
>
<Icon
class="swap-off"
name="mdi-content-copy"
:style="{
height: `${iconSize}px`,
width: `${iconSize}px`,
}"
/>
<Icon
class="swap-on"
name="mdi-clipboard"
:style="{
height: `${iconSize}px`,
width: `${iconSize}px`,
}"
/>
</label>
</button>
</template>
<script setup lang="ts">
const props = defineProps({
text: {
type: String as () => string,
default: "",
},
iconSize: {
type: Number as () => number,
default: 20,
},
});
const copied = ref(false);
const { copy } = useClipboard();
function copyText() {
copy(props.text);
copied.value = true;
setTimeout(() => {
copied.value = false;
}, 1000);
}
</script>
<style scoped></style>