@meistrari/tela-build 1.74.1 → 1.74.2

package/components/tela/dropdown-menu/DropdownMenu.vue

@@ -41,7 +41,7 @@ const props = withDefaults(defineProps<{
     iconSide: 'left',
 })
 
-defineEmits(['click'])
+const emit = defineEmits(['click', 'update:open'])
 
 const search = ref('')
 const searchInputEl = ref<HTMLInputElement>()
@@ -58,6 +58,7 @@ const groups = computed(() => filteredItems.value.reduce((acc, item) => {
 }, {} as Record<string, typeof props.items[number][]>))
 
 function onToggle(open: boolean) {
+    emit('update:open', open)
     if (!open)
         return
 

package/components/tela/dropdown-menu/dropdown-menu.mdx

@@ -24,6 +24,16 @@ Use `TelaDropdownMenu` when clicking triggers a side effect. Use `TelaSelectMenu
 
 **The test:** If clicking triggers a side effect → `TelaDropdownMenu`. If it updates a bound value → `TelaSelectMenu`.
 
+## Loading menu data on open
+
+`update:open` emits a boolean whenever the menu opens or closes, including keyboard activation. Use it to fetch menu data only when needed:
+
+```vue
+<TelaDropdownMenu :items="items" @update:open="open => open && loadItems()">
+  <TelaButton>Open menu</TelaButton>
+</TelaDropdownMenu>
+```
+
 ## Examples
 
 ### Basic Usage

package/composables/use-pdf.ts

@@ -1,10 +1,12 @@
-import * as pdfjsLib from 'pdfjs-dist'
 import type { PDFDocumentProxy, PDFPageProxy, RenderTask } from 'pdfjs-dist'
 import type { Ref } from 'vue'
 import { markRaw, onUnmounted, reactive, watch } from 'vue'
 
-if (!pdfjsLib.GlobalWorkerOptions.workerSrc) {
-    pdfjsLib.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.mjs`
+async function loadPdfLibrary() {
+    const pdfjsLib = await import('pdfjs-dist')
+    if (!pdfjsLib.GlobalWorkerOptions.workerSrc)
+        pdfjsLib.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.mjs`
+    return pdfjsLib
 }
 
 function normalizeForMatch(text: string): string {
@@ -70,7 +72,11 @@ export function usePdf(url: Ref<string>) {
         state.loadError = null
 
         try {
-            const loadingTask = pdfjsLib.getDocument(url.value)
+            const requestedUrl = url.value
+            const pdfjsLib = await loadPdfLibrary()
+            if (isUnmounted)
+                return null
+            const loadingTask = pdfjsLib.getDocument(requestedUrl)
             const doc = await loadingTask.promise
 
             if (isUnmounted) {
@@ -304,6 +310,7 @@ export function usePdf(url: Ref<string>) {
             }
         }
 
+        const pdfjsLib = await loadPdfLibrary()
         for (let itemIndex = 0; itemIndex < textItems.length; itemIndex++) {
             if (isUnmounted)
                 return

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meistrari/tela-build",
-    "version": "1.74.1",
+    "version": "1.74.2",
     "type": "module",
     "files": [
         "app.config.ts",