@finema/finework-layer 2.0.63 → 2.0.65

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [2.0.65](https://gitlab.finema.co/finema/internal/finework/compare/2.0.64...2.0.65) (2026-09-15)
+
+### Features
+
+* add resizable panel to manual viewer with improved PDF navigation ([dc37e28](https://gitlab.finema.co/finema/internal/finework/commit/dc37e28790a2e16168ed1e1264d621efb17cfe56))
+
+## [2.0.64](https://gitlab.finema.co/finema/internal/finework/compare/2.0.63...2.0.64) (2026-09-15)
+
+### Bug Fixes
+
+* fetch PDF as blob to bypass X-Frame-Options restrictions and add loading states ([4584b67](https://gitlab.finema.co/finema/internal/finework/commit/4584b67b555b19a3d2f10a25f1d89f9340dec134))
+
 ## [2.0.63](https://gitlab.finema.co/finema/internal/finework/compare/2.0.62...2.0.63) (2026-09-15)
 
 ## [2.0.62](https://gitlab.finema.co/finema/internal/finework/compare/2.0.61...2.0.62) (2026-09-15)

package/app/components/HelpHub/ManualViewer.vue

@@ -4,12 +4,22 @@
     :portal="true"
     :modal="false"
     :dismissible="false"
-    :ui="{ content: 'w-full max-w-[560px]' }"
+    :ui="{ content: 'w-full' }"
+    :content="{
+      style: {
+        width: `${panelWidth}px`,
+        maxWidth: '100vw',
+      },
+    }"
     side="right"
     @update:open="(val) => emit('update', val)"
   >
     <template #content>
-      <div class="flex h-full flex-col">
+      <div class="relative flex h-full flex-col">
+        <div
+          class="hover:bg-primary-300/60 active:bg-primary-400/70 absolute inset-y-0 left-0 z-10 w-1.5 -translate-x-1/2 cursor-col-resize touch-none"
+          @mousedown="startResize"
+        />
         <!-- Header -->
         <div class="flex items-center justify-between border-b border-gray-200 px-5 py-4">
           <div class="flex min-w-0 items-center gap-3">
@@ -246,9 +256,9 @@
           class="relative flex-1 overflow-hidden bg-gray-600"
         >
           <iframe
-            v-if="current?.file"
-            :key="current.file.url"
-            :src="`${current.file.url}#view=FitH`"
+            v-if="viewerBlobUrl"
+            :key="viewerBlobUrl"
+            :src="`${viewerBlobUrl}#view=FitH&navpanes=0`"
             title="User manual"
             class="size-full border-0"
           />
@@ -256,7 +266,7 @@
             v-else
             class="flex h-full items-center justify-center bg-white text-sm text-gray-500"
           >
-            ไม่พบไฟล์คู่มือ
+            {{ viewerError ? 'ไม่สามารถโหลดไฟล์ได้' : (current?.file ? 'กำลังโหลด...' : 'ไม่พบไฟล์คู่มือ') }}
           </div>
         </div>
       </div>
@@ -333,6 +343,76 @@ const current = computed<IManual | null>(
   () => props.manuals.find((m) => m.id === selectedId.value) ?? null,
 )
 
+// The API sets X-Frame-Options/CSP frame-ancestors that block embedding the
+// PDF URL directly in an <iframe> across subdomains. Fetching the bytes and
+// rendering via a blob: URL sidesteps that, since it isn't a framed request.
+const viewerBlobUrl = ref<string | null>(null)
+const viewerError = ref(false)
+
+const revokeViewerBlobUrl = () => {
+  if (viewerBlobUrl.value) {
+    URL.revokeObjectURL(viewerBlobUrl.value)
+    viewerBlobUrl.value = null
+  }
+}
+
+watch(() => current.value?.file?.url, async (url) => {
+  revokeViewerBlobUrl()
+  viewerError.value = false
+
+  if (!url) return
+
+  try {
+    const res = await fetch(url)
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+
+    const blob = await res.blob()
+
+    viewerBlobUrl.value = URL.createObjectURL(blob)
+  } catch {
+    viewerError.value = true
+  }
+}, {
+  immediate: true,
+})
+
+onBeforeUnmount(revokeViewerBlobUrl)
+
+const DEFAULT_WIDTH = 560
+const MIN_WIDTH = 400
+const MAX_WIDTH = 1100
+
+const panelWidth = ref(DEFAULT_WIDTH)
+
+const startResize = (e: MouseEvent) => {
+  e.preventDefault()
+
+  const startX = e.clientX
+  const startWidth = panelWidth.value
+  const prevCursor = document.body.style.cursor
+  const prevUserSelect = document.body.style.userSelect
+
+  document.body.style.cursor = 'col-resize'
+  document.body.style.userSelect = 'none'
+
+  const onMove = (moveEvent: MouseEvent) => {
+    const delta = startX - moveEvent.clientX
+    const maxWidth = Math.min(MAX_WIDTH, window.innerWidth)
+
+    panelWidth.value = Math.min(Math.max(startWidth + delta, MIN_WIDTH), maxWidth)
+  }
+
+  const onUp = () => {
+    document.body.style.cursor = prevCursor
+    document.body.style.userSelect = prevUserSelect
+    window.removeEventListener('mousemove', onMove)
+    window.removeEventListener('mouseup', onUp)
+  }
+
+  window.addEventListener('mousemove', onMove)
+  window.addEventListener('mouseup', onUp)
+}
+
 const canManage = (app: string) =>
   auth.isSuperAdmin.value || auth.hasPermission(app as UserModule, Permission.SUPER)
 

package/app/components/HelpHub/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="fixed right-7 bottom-7 z-40 md:bottom-8.5 print:hidden">
+  <div class="fixed right-6 bottom-5.5 z-40 md:bottom-7 print:hidden">
     <!-- click-away scrim -->
     <div
       v-if="isDialOpen"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@finema/finework-layer",
   "type": "module",
-  "version": "2.0.63",
+  "version": "2.0.65",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground -o",