@meistrari/tela-build 1.46.0 → 1.47.0

package/components/tela/preview/preview-content.vue

@@ -85,6 +85,28 @@ const isPageInputFocused = ref(false)
 const isProgrammaticScroll = ref(false)
 
 const scale = ref(props.initialScale ?? (props.variant === 'minimal' ? 1 : 0.75))
+
+const IMAGE_BASE_WIDTH_DEFAULT = 480
+const IMAGE_BASE_WIDTH_MINIMAL = 256
+const isImage = computed(() => !!props.file.fileType?.startsWith('image/'))
+const imageBaseWidth = computed(() => (props.variant === 'minimal' ? IMAGE_BASE_WIDTH_MINIMAL : IMAGE_BASE_WIDTH_DEFAULT))
+const imageDisplayWidth = computed(() => Math.round(imageBaseWidth.value * scale.value))
+
+const imageWrapperStyle = computed(() => {
+    if (!isImage.value) {
+        return { width: props.variant === 'minimal' ? '256px' : '446px', maxWidth: '100%' }
+    }
+
+    if (props.variant === 'minimal') {
+        return { width: `${Math.round(scale.value * 100)}%`, maxWidth: 'none' }
+    }
+
+    return {
+        width: `${imageDisplayWidth.value}px`,
+        maxWidth: scale.value > 1 ? 'none' : '100%',
+    }
+})
+
 const scrollContainerRef = ref<HTMLElement | null>(null)
 const isDragging = ref(false)
 const dragEnabled = ref(false)
@@ -545,7 +567,6 @@ function setupPdfObserver() {
         pdfObserver.value.observe(el)
     }
 
-    // Render first pages immediately — don't wait for async observer callback
     visiblePages.value.add(1)
     void renderVisiblePages()
 }
@@ -669,12 +690,19 @@ watch(() => props.file, async (newFile, oldFile) => {
     pdfDocHandle.value = null
     pdfLoadError.value = null
 
+    dragEnabled.value = false
+    isDragging.value = false
+
     if (!newFile) {
         fileUrl.value = undefined
         isLoading.value = false
         return
     }
 
+    scale.value = newFile.fileType?.startsWith('image/')
+        ? (props.initialScale ?? 1)
+        : (props.initialScale ?? (props.variant === 'minimal' ? 1 : 0.75))
+
     isLoading.value = true
     error.value = null
 
@@ -897,8 +925,6 @@ watch([() => props.highlightText, () => props.highlightPage, () => props.highlig
     if (pdfDocHandle.value) {
         await reRenderAllPdfPages()
     }
-    // When doc isn't loaded yet, keep pendingScrollPage — it will be
-    // consumed by reRenderAllPdfPages().finally once the PDF renders.
 })
 </script>
 
@@ -906,10 +932,10 @@ watch([() => props.highlightText, () => props.highlightPage, () => props.highlig
     <div
         relative
         :data-pdf-preview="props.file.fileType === 'application/pdf'"
-        :data-has-tabs="props.segmentTab && props.file.fileType !== 'application/pdf'"
+        :data-has-tabs="props.segmentTab === 'processed' && props.file.fileType !== 'application/pdf'"
         :class="cn('group', {
-            'data-[has-tabs=true]:pt-88px data-[pdf-preview=false]:pt-56px': variant === 'default',
-            'data-[has-tabs=true]:pt-42px data-[pdf-preview=false]:pt-32px': variant === 'minimal',
+            'data-[has-tabs=true]:pt-88px data-[pdf-preview=false]:pt-0px': variant === 'default',
+            'data-[has-tabs=true]:pt-42px data-[pdf-preview=false]:pt-0px': variant === 'minimal',
         })"
         overflow-y-auto no-scrollbar
         @mouseenter="handleContainerMouseEnter"
@@ -1119,7 +1145,7 @@ watch([() => props.highlightText, () => props.highlightPage, () => props.highlig
             <!-- PDF Content -->
             <template v-else-if="props.file.fileType === 'application/pdf'">
                 <Motion
-                    relative
+                    relative mb--48px
                     class="group"
                     :initial="{ opacity: 0, filter: 'blur(4px)', pointerEvents: 'none' }"
                     :animate="{ opacity: 1, filter: 'blur(0px)', pointerEvents: 'auto' }"
@@ -1205,21 +1231,29 @@ watch([() => props.highlightText, () => props.highlightPage, () => props.highlig
                         || props.file.fileType?.startsWith('video/')
                         || props.file.fileType?.startsWith('audio/')"
             >
-                <div
-                    mx-auto
-                    flex items-center justify-center
-                    :class="cn('h-[calc(100%-56px)]', {
-                        'w-446px': variant === 'default',
-                        'w-256px': variant === 'minimal',
-                    })"
-                >
+                <div relative h-full w-full mb--48px>
                     <div
-                        mx-46px border-0.5px rounded-12px overflow-hidden
-                        class="border-[#000]/8 box-shadow-[0_3px_24px_0_rgba(214,218,224,0.24),0_12px_52px_0_rgba(214,218,224,0.16)]"
+                        ref="scrollContainerRef"
+                        absolute inset-0 select-none overflow-auto no-scrollbar flex
+                        class="[justify-content:safe_center] [align-items:safe_center]"
+                        :class="cn(
+                            variant === 'minimal' ? 'px-16px py-16px' : 'px-46px py-24px',
+                            isImage && dragEnabled ? (isDragging ? 'cursor-grabbing' : 'cursor-grab') : 'cursor-default',
+                        )"
+                        @mousedown="handleMouseDown"
+                        @mousemove="handleMouseMove"
+                        @mouseup="handleMouseUp"
+                        @mouseleave="handleMouseLeave"
                     >
-                        <img v-if="props.file.fileType?.startsWith('image/')" :src="fileUrl!" width="100%" :alt="props.file.fileName">
-                        <video v-else-if="props.file.fileType?.startsWith('video/')" :src="fileUrl!" width="100%" controls />
-                        <audio v-else-if="props.file.fileType?.startsWith('audio/')" :src="fileUrl!" controls style="width: 100%;" />
+                        <div
+                            flex-shrink-0 border-0.5px rounded-12px overflow-hidden
+                            class="border-[#000]/8 box-shadow-[0_3px_24px_0_rgba(214,218,224,0.24),0_12px_52px_0_rgba(214,218,224,0.16)]"
+                            :style="imageWrapperStyle"
+                        >
+                            <img v-if="props.file.fileType?.startsWith('image/')" :src="fileUrl!" width="100%" :alt="props.file.fileName" :draggable="false">
+                            <video v-else-if="props.file.fileType?.startsWith('video/')" :src="fileUrl!" width="100%" controls />
+                            <audio v-else-if="props.file.fileType?.startsWith('audio/')" :src="fileUrl!" controls style="width: 100%;" />
+                        </div>
                     </div>
                 </div>
             </template>

package/components/tela/preview/preview-floating-bar.vue

@@ -57,11 +57,13 @@ onMounted(() => {
 })
 
 const isPdf = computed(() => props.file.fileType === 'application/pdf')
+const isImage = computed(() => !!props.file.fileType?.startsWith('image/'))
+const canZoom = computed(() => (isPdf.value ? props.totalPages > 0 : isImage.value))
 
 const actions = computed(() => ({
-    zoomIn: props.variant === 'default' && props.totalPages > 0 && isPdf.value && props.segmentTab !== 'processed',
-    zoomOut: props.variant === 'default' && props.totalPages > 0 && isPdf.value && props.segmentTab !== 'processed',
-    handMode: props.variant === 'default' && isPdf.value && props.segmentTab !== 'processed',
+    zoomIn: props.variant === 'default' && canZoom.value && props.segmentTab !== 'processed',
+    zoomOut: props.variant === 'default' && canZoom.value && props.segmentTab !== 'processed',
+    handMode: props.variant === 'default' && (isPdf.value || isImage.value) && props.segmentTab !== 'processed',
     fullscreen: showFullscreenButton.value,
 }))
 
@@ -130,7 +132,7 @@ const computedWidthContent = computed(() => {
                 <div flex items-center justify-center gap-4px>
                     <TelaTooltipGroup>
                         <div flex items-center justify-center gap-2px>
-                            <template v-if="variant === 'minimal' || !isPdf">
+                            <template v-if="variant === 'minimal'">
                                 <TelaTooltipGroupTrigger variant="multiline">
                                     <button
                                         w-40px h-40px
@@ -303,7 +305,7 @@ const computedWidthContent = computed(() => {
                             </div>
                         </template>
 
-                        <template v-if="variant === 'default' && isPdf">
+                        <template v-if="variant === 'default'">
                             <div aria-hidden h-24px w-0.5px class="bg-white/16" />
 
                             <div pl-12px pr-14px>

package/components/tela/preview/preview-select-variable.vue

@@ -91,9 +91,9 @@ const firstColumnWidth = computed(() => {
         return '82px'
     }
 
-    const minWidth = 82
+    const minWidth = 56
     const maxLength = Math.max(...allTexts.map(text => text.length))
-    const charWidth = 7.5
+    const charWidth = 7
 
     const width = Math.max(minWidth, maxLength * charWidth)
 

package/components/tela/segment-toggle/segment-toggle.vue

@@ -28,7 +28,7 @@ function selectTab(value: string) {
 
 <template>
     <div
-        rounded-full flex items-center gap-2px select-none p-2px min-w-68px bg-gray-200
+        rounded-full flex items-center gap-2px select-none p-2px min-w-68px bg-lowered
         :class="[
             props.size === 'small' ? 'min-h-24px' : 'min-h-28px',
             props.disabled && 'opacity-50 pointer-events-none cursor-not-allowed',
@@ -47,11 +47,11 @@ function selectTab(value: string) {
             :disabled="props.disabled"
             @click="selectTab(option.value)"
         >
-            <span relative z-10 :class="modelValue === option.value ? 'text-gray-900' : 'text-gray-700'">{{ option.label }}</span>
+            <span relative z-10 :class="modelValue === option.value ? 'text-primary' : 'text-secondary'">{{ option.label }}</span>
             <Motion
                 v-if="modelValue === option.value"
                 :layout-id="`${uniqueId}-tab-indicator`"
-                absolute z-0 inset-0 bg-white shadow-tab rounded-inherit size-full
+                absolute z-0 inset-0 bg shadow-tab rounded-inherit size-full
                 :transition="{ duration: 0.3, type: 'spring', bounce: 0 }"
             />
         </button>

package/package.json

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