feat(new tool): pdf signature checker (#745)

src/ui/c-modal-value/c-modal-value.demo.vue

@@ -0,0 +1,21 @@
+<template>
+  <div flex gap-2>
+    <c-modal-value value="lorem ipsum" label="test" />
+    <c-modal-value>
+      <template #label="{ toggleModal }">
+        <c-button class="text-left" size="small" @click="toggleModal">
+          Bonjour
+        </c-button>
+      </template>
+
+      <template #value>
+        <pre>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+          Molestias, quisquam vitae saepe dolores quas debitis ab r
+          ecusandae suscipit ex dignissimos minus quam repellat sunt.
+          Molestiae culpa blanditiis totam sapiente dignissimos.
+        </pre>
+      </template>
+    </c-modal-value>
+  </div>
+</template>

src/ui/c-modal-value/c-modal-value.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { useCopy } from '@/composable/copy';
+
+const props = withDefaults(defineProps<{ value: string; label?: string; copyable?: boolean }>(), { label: undefined, copyable: true });
+const { value, label } = toRefs(props);
+
+const { copy, isJustCopied } = useCopy({ source: value });
+
+const isModalOpen = ref(false);
+const toggleModal = useToggle(isModalOpen);
+</script>
+
+<template>
+  <slot name="label" :value="value" :toggle-modal="toggleModal" :is-modal-open="isModalOpen">
+    <c-button class="text-left" @click="isModalOpen = true">
+      {{ label }}
+    </c-button>
+  </slot>
+
+  <c-modal v-model:open="isModalOpen">
+    <slot name="value" :value="value" :toggle-modal="toggleModal" :is-modal-open="isModalOpen">
+      {{ value }}
+    </slot>
+
+    <div mt-4 flex justify-center>
+      <c-button class="w-full" @click="copy">
+        {{ isJustCopied ? 'Copied!' : 'Copy' }}
+      </c-button>
+    </div>
+  </c-modal>
+</template>