chore: migrate example app

Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>

Author: vitormattos

examples/basic/App.vue

@@ -56,16 +56,16 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   </div>
 </template>
 
-<script>
-import Vue from 'vue'
+<script lang="ts">
+import { defineComponent } from 'vue'
 import PDFElements from '../../src'
 import AppToolbar from './components/AppToolbar.vue'
 import DocumentsList from './components/DocumentsList.vue'
 import SignatureBox from './components/SignatureBox.vue'
 import DeleteButton from './components/DeleteButton.vue'
 import ElementsViewer from './components/ElementsViewer.vue'
 
-export default {
+export default defineComponent({
   name: 'App',
   components: {
     PDFElements,
@@ -110,15 +110,18 @@ export default {
     },
 
     onFilesChange(event) {
-      const files = Array.from(event.target.files || [])
+      const input = event?.target as HTMLInputElement | null
+      const files = Array.from(input?.files || [])
       if (files.length === 0) return
 
       this.loading = true
       this.pdfReady = false
       this.initFiles = [...this.initFiles, ...files]
-      this.fileNames = [...this.fileNames, ...files.map(f => f.name)]
+      this.fileNames = [...this.fileNames, ...files.map((file: File) => file.name)]
       this.forceRenderDocuments()
-      event.target.value = ''
+      if (input) {
+        input.value = ''
+      }
     },
 
     removeDocument(index) {
@@ -192,9 +195,7 @@ export default {
       this.showElementsViewer = true
     },
   },
-}
-
-Vue.config.productionTip = false
+})
 </script>
 
 <style scoped>

examples/basic/README.md

@@ -1,29 +1,29 @@
 # Basic Example - @libresign/pdf-elements
 
-Basic integration example of the `PDFElements` component with dragging, resizing, and positioning elements in PDFs.
+This example shows how to integrate `PDFElements` with custom slots and basic actions.
 
 ## Structure
 
 ```
 examples/basic/
-├── App.vue                    # Main component: PDFElements integration
+├── App.vue
 ├── components/
-│   ├── AppToolbar.vue        # Toolbar component
-│   ├── DocumentsList.vue     # List of loaded documents
-│   ├── SignatureBox.vue      # Custom visual element
-│   └── DeleteButton.vue      # Delete button
+│   ├── AppToolbar.vue
+│   ├── DocumentsList.vue
+│   ├── SignatureBox.vue
+│   └── DeleteButton.vue
 └── README.md
 ```
 
-## How to Use PDFElements
+## Quick start
 
-### 1. Import the component
+Import the component:
 
 ```vue
 import PDFElements from '@libresign/pdf-elements'
 ```
 
-### 2. Basic template
+Basic template:
 
 ```vue
 <PDFElements
@@ -33,8 +33,8 @@ import PDFElements from '@libresign/pdf-elements'
   :initial-scale="1.1"
   @pdf-elements:end-init="onReady"
 >
-  <template #custom="{ object, isSelected }">
-    <!-- Your component here -->
+  <template #custom="{ object }">
+    <SignatureBox :object="object" />
   </template>
 
   <template #actions="{ onDelete }">
@@ -43,136 +43,40 @@ import PDFElements from '@libresign/pdf-elements'
 </PDFElements>
 ```
 
-### 3. Main props
-
-- **`init-files`**: Array of PDF URLs or File objects
-- **`init-file-names`**: Array with document names
-- **`initial-scale`**: Initial rendering scale (default: 1)
-
-### 4. Events
+## Props and event
 
-- **`pdf-elements:end-init`**: Triggered when PDFs finish loading
+- `init-files`: PDF URLs or files.
+- `init-file-names`: names shown in the footer.
+- `initial-scale`: initial zoom.
+- `pdf-elements:end-init`: emitted when the PDF finishes loading.
 
-### 5. Ref methods
+## Methods via `ref`
 
-```javascript
+```js
 const pdf = this.$refs.pdf
 
-// Iniciar modo de adicionar elemento (com preview que segue o mouse)
 pdf.startAddingElement({
   width: 160,
   height: 48,
   label: 'Signature',
   icon: 'signature',
 })
 
-// Obter todos os objetos do documento
 const objects = pdf.getAllObjects()
 ```
 
-### 6. Slots
+## Slots
+
+For specific types, use `element-{type}`. Example for signature:
 
-#### Type-specific slots (recommended for multiple element types)
 ```vue
-<!-- Slot for signature elements -->
 <template #element-signature="{ object }">
   <SignatureBox :object="object" />
 </template>
-
-<!-- Slot for text elements -->
-<template #element-text="{ object }">
-  <TextBox :object="object" />
-</template>
-
-<!-- Slot for date elements -->
-<template #element-date="{ object }">
-  <DateBox :object="object" />
-</template>
-```
-
-When an object has `type: 'signature'`, PDFElements looks for `#element-signature`. If not found, uses the `#custom` fallback.
-
-#### `#custom` - Generic rendering (fallback)
-Used when:
-- The object doesn't have a `type` property
-- No specific slot exists for the type
-
-Receives:
-- `object`: Element data (x, y, width, height, type, custom props)
-- `isSelected`: Boolean indicating if selected
-
-#### `#actions` - Action toolbar
-Receives:
-- `object`: Element data
-- `onDelete`: Function to delete the element
-
-### Multiple types example
-
-```vue
-<PDFElements ref="pdf" :init-files="files">
-  <!-- Signature elements -->
-  <template #element-signature="{ object }">
-    <div class="signature-box">
-      <SignIcon />
-      {{ object.label }}
-    </div>
-  </template>
-
-  <!-- Text input elements -->
-  <template #element-text="{ object }">
-    <div class="text-box">
-      <input :value="object.value" />
-    </div>
-  </template>
-
-  <!-- Date picker elements -->
-  <template #element-date="{ object }">
-    <div class="date-box">
-      <CalendarIcon />
-      {{ object.date || 'Select date' }}
-    </div>
-  </template>
-
-  <!-- Checkbox elements -->
-  <template #element-checkbox="{ object }">
-    <div class="checkbox-box">
-      <input type="checkbox" :checked="object.checked" />
-    </div>
-  </template>
-
-  <!-- Fallback for unknown types -->
-  <template #custom="{ object }">
-    <div class="generic-box">
-      {{ object.type || 'Element' }}
-    </div>
-  </template>
-
-  <!-- Common actions for all types -->
-  <template #actions="{ onDelete }">
-    <button @click="onDelete">Delete</button>
-  </template>
-</PDFElements>
 ```
 
-**Performance**: Slots dinâmicos são eficientes - Vue compila apenas os slots usados. Muito melhor que condicionais enormes.
-
-## Funcionalidades Implementadas
-
-✅ **Carregar múltiplos PDFs** (URL ou arquivo local)
-✅ **Adicionar elementos com preview** (clique no botão → move o mouse → clique para posicionar)
-✅ **Arrastar elementos** dentro da mesma página ou entre páginas diferentes
-✅ **Redimensionar elementos** (4 cantos, mantém aspect-ratio)
-✅ **Validação de bounds** (elementos não podem sair das páginas)
-✅ **Elementos responsivos** (texto ajusta tamanho conforme dimensões)
-✅ **Toolbar flutuante** com ações (aparece ao selecionar elemento)
-✅ **Rolagem durante drag** (atualiza posições automaticamente)
-
-## Componentes Auxiliares
+If there is no specific slot, `#custom` is used as a fallback.
 
-Os componentes em `components/` são **apenas para o exemplo**. Você pode:
-- Usar seus próprios componentes
-- Estilizar da forma que preferir
-- Adicionar mais ações no toolbar
-- Customizar totalmente o visual dos elementos
+## Notes
 
-O importante é entender como usar o `PDFElements` no `App.vue`.
+Components under `components/` are just for the example and can be replaced freely.

examples/basic/components/AppToolbar.vue

@@ -31,8 +31,10 @@
   </header>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'AppToolbar',
   props: {
     loading: {
@@ -48,7 +50,7 @@ export default {
       default: false,
     },
   },
-}
+})
 </script>
 
 <style scoped>

examples/basic/components/DeleteButton.vue

@@ -6,10 +6,12 @@
   </button>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'DeleteButton',
-}
+})
 </script>
 
 <style scoped>

examples/basic/components/DocumentsList.vue

@@ -10,16 +10,18 @@
   </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'DocumentsList',
   props: {
     documents: {
       type: Array,
       default: () => [],
     },
   },
-}
+})
 </script>
 
 <style scoped>

examples/basic/components/ElementsViewer.vue

@@ -51,8 +51,10 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'ElementsViewer',
   props: {
     isOpen: {
@@ -100,7 +102,7 @@ export default {
       this.$emit('close')
     },
   },
-}
+})
 </script>
 
 <style scoped>

examples/basic/components/SignatureBox.vue

@@ -14,8 +14,10 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'SignatureBox',
   props: {
     object: {
@@ -27,7 +29,7 @@ export default {
       default: '14px',
     },
   },
-}
+})
 </script>
 
 <style scoped>

examples/index.html

@@ -13,5 +13,6 @@
   <body>
     <noscript>This demo requires JavaScript.</noscript>
     <div id="app"></div>
+    <script type="module" src="/main.ts"></script>
   </body>
 </html>

examples/main.js examples/main.tsexamples/main.js renamed to examples/main.ts

@@ -1,11 +1,7 @@
 // SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './basic/App.vue'
 
-Vue.config.productionTip = false
-
-new Vue({
-  render: h => h(App),
-}).$mount('#app')
+createApp(App).mount('#app')