adminforth 1.3.56-next.12 → 1.3.56-next.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<span class="flex items-center"
|
|
3
|
+
:data-tooltip-target="visualValue ? `tooltip-${id}` : undefined"
|
|
4
|
+
data-tooltip-placement="top"
|
|
5
|
+
>
|
|
6
|
+
{{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
|
|
7
|
+
|
|
8
|
+
<div :id="`tooltip-${id}`" role="tooltip" v-if="visualValue"
|
|
9
|
+
class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
|
|
10
|
+
{{ props.record[props.column.name] }}
|
|
11
|
+
<div class="tooltip-arrow" data-popper-arrow></div>
|
|
12
|
+
</div>
|
|
13
|
+
</span>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script setup>
|
|
17
|
+
import { computed, ref, onMounted } from 'vue';
|
|
18
|
+
import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
|
|
19
|
+
import { initFlowbite } from 'flowbite';
|
|
20
|
+
|
|
21
|
+
const visualValue = computed(() => {
|
|
22
|
+
// if lenght is more then 8, show only first 4 and last 4 characters, ... in the middle
|
|
23
|
+
const val = props.record[props.column.name];
|
|
24
|
+
if (val && val.length > 8) {
|
|
25
|
+
return `${val.substr(0, 4)}...${val.substr(val.length - 4)}`;
|
|
26
|
+
}
|
|
27
|
+
return val;
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
const props = defineProps(['column', 'record', 'meta']);
|
|
31
|
+
|
|
32
|
+
const id = ref();
|
|
33
|
+
|
|
34
|
+
function copyToCB() {
|
|
35
|
+
navigator.clipboard.writeText(props.record[props.column.name]);
|
|
36
|
+
window.adminforth.alert({
|
|
37
|
+
message: 'ID copied to clipboard',
|
|
38
|
+
variant: 'success',
|
|
39
|
+
})
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
onMounted(async () => {
|
|
43
|
+
id.value = Math.random().toString(36).substring(7);
|
|
44
|
+
await new Promise(resolve => setTimeout(resolve, 0));
|
|
45
|
+
initFlowbite();
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
</script>
|