kviewer 0.0.1 → 0.0.2

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "kviewer",
   "configKey": "kviewer",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/annotation/engine/painter.d.ts

@@ -31,10 +31,12 @@ export declare class Painter {
     private tempDataTransfer;
     private callbacks;
     private getStylusModeEnabled?;
-    constructor({ userName, callbacks, getStylusModeEnabled, }: {
+    private getReadonly?;
+    constructor({ userName, callbacks, getStylusModeEnabled, getReadonly, }: {
         userName: string;
         callbacks: PainterCallbacks;
         getStylusModeEnabled?: () => boolean;
+        getReadonly?: () => boolean;
     });
     private editFreeText;
     private bindGlobalEvents;

package/dist/runtime/annotation/engine/painter.js

@@ -33,14 +33,17 @@ export class Painter {
   tempDataTransfer = null;
   callbacks;
   getStylusModeEnabled;
+  getReadonly;
   constructor({
     userName,
     callbacks,
-    getStylusModeEnabled
+    getStylusModeEnabled,
+    getReadonly
   }) {
     this.userName = userName;
     this.callbacks = callbacks;
     this.getStylusModeEnabled = getStylusModeEnabled;
+    this.getReadonly = getReadonly;
     this.store = new Store();
     this.selector = new Selector({
       konvaCanvasStore: this.konvaCanvasStore,
@@ -110,6 +113,7 @@ export class Painter {
     window.addEventListener("keyup", this.globalKeyUpHandler);
   }
   globalKeyUpHandler = (e) => {
+    if (this.getReadonly?.()) return;
     if (e.code === "Escape" && this.currentAnnotation && (this.currentAnnotation.type === AnnotationType.SIGNATURE || this.currentAnnotation.type === AnnotationType.STAMP)) {
       hideCursorPreview();
       this.callbacks.forceReset();

package/dist/runtime/components/AnnotationToolbar.vue

@@ -65,7 +65,7 @@ const state = useViewerState();
 const colors = defaultOptions.colors;
 const isMultiSelect = computed(() => state.selectedAnnotations.value.length > 1);
 const hasSelection = computed(
-  () => state.selectedAnnotation.value !== null || state.selectedAnnotations.value.length > 0
+  () => !state.readonly.value && (state.selectedAnnotation.value !== null || state.selectedAnnotations.value.length > 0)
 );
 const selectedDef = computed(() => {
   const ann = state.selectedAnnotation.value;

package/dist/runtime/components/PdfPage.vue

@@ -82,12 +82,18 @@ const isAnnotating = computed(() => {
   return tool === "hand" || tool === "marquee" || tool === "eraser" || typeof tool === "number" && tool !== AnnotationType.NONE;
 });
 const isSearchTextInteractive = computed(() => search.isOpen.value && state.activeTool.value === "hand");
-const annotationPointerEvents = computed(() => isSearchTextInteractive.value ? "none" : isAnnotating.value ? "auto" : "none");
+const annotationPointerEvents = computed(() => {
+  if (state.readonly.value) return "none";
+  return isSearchTextInteractive.value ? "none" : isAnnotating.value ? "auto" : "none";
+});
 const isUsingAnnotationTool = computed(() => {
   const tool = state.activeTool.value;
   return tool === "marquee" || tool === "eraser" || typeof tool === "number" && tool !== AnnotationType.NONE;
 });
-const formFieldPointerEvents = computed(() => isUsingAnnotationTool.value ? "none" : "auto");
+const formFieldPointerEvents = computed(() => {
+  if (state.readonly.value) return "none";
+  return isUsingAnnotationTool.value ? "none" : "auto";
+});
 const formFieldZIndex = computed(() => isUsingAnnotationTool.value ? 2 : 4);
 onMounted(async () => {
   pageProxy.value = await proxyCache.getPage(props.pageNumber);

package/dist/runtime/components/Viewer.d.vue.ts

@@ -9,6 +9,8 @@ type __VLS_Props = {
     signatureHandlers?: SignatureHandlers;
     viewMode?: ViewMode;
     zoom?: number;
+    /** When true, the viewer is in view-only mode: annotations, drawing tools, and form editing are disabled. */
+    readonly?: boolean;
     /** When false, global keyboard shortcuts (e.g. Cmd+F) are suppressed. Used by ViewerTabs to prevent hidden viewers from capturing input. */
     active?: boolean;
 };

package/dist/runtime/components/Viewer.vue

@@ -96,11 +96,11 @@
     <!-- Footer slot: empty by default -->
     <slot name="footer" />
 
-    <ClientOnly>
+    <ClientOnly v-if="!viewerState.readonly.value">
       <AnnotationToolbar />
     </ClientOnly>
 
-    <ClientOnly>
+    <ClientOnly v-if="!viewerState.readonly.value">
       <FreeTextModal
         v-model:open="freeTextModalOpen"
         :default-color="freeTextDefaults.color"
@@ -119,6 +119,7 @@ import {
   shallowRef,
   computed,
   watch,
+  watchEffect,
   nextTick,
   triggerRef,
   onMounted,
@@ -150,11 +151,15 @@ const props = defineProps({
   signatureHandlers: { type: Object, required: false, default: void 0 },
   viewMode: { type: String, required: false, default: "fit-width" },
   zoom: { type: Number, required: false, default: 1 },
+  readonly: { type: Boolean, required: false, default: false },
   active: { type: Boolean, required: false, default: true }
 });
 const viewerRoot = ref(null);
 const scrollContainer = ref(null);
 const { state: viewerState, setScrollToPageFn } = provideViewerState();
+watchEffect(() => {
+  viewerState.readonly.value = props.readonly ?? false;
+});
 const viewerSearch = provideViewerSearch();
 const formFieldsState = provideFormFields();
 const pageSettings = providePageSettings(viewerRoot);

package/dist/runtime/components/Viewer.vue.d.ts

@@ -9,6 +9,8 @@ type __VLS_Props = {
     signatureHandlers?: SignatureHandlers;
     viewMode?: ViewMode;
     zoom?: number;
+    /** When true, the viewer is in view-only mode: annotations, drawing tools, and form editing are disabled. */
+    readonly?: boolean;
     /** When false, global keyboard shortcuts (e.g. Cmd+F) are suppressed. Used by ViewerTabs to prevent hidden viewers from capturing input. */
     active?: boolean;
 };

package/dist/runtime/components/ViewerBar.vue

@@ -24,10 +24,12 @@
 
       <ZoomControls />
 
-      <USeparator orientation="vertical" class="h-5" color="neutral" />
+      <template v-if="!state.readonly.value">
+        <USeparator orientation="vertical" class="h-5" color="neutral" />
 
-      <HandTool />
-      <MarqueeTool />
+        <HandTool />
+        <MarqueeTool />
+      </template>
 
       <div class="ml-auto flex items-center gap-2">
         <PageInfo />
@@ -36,7 +38,7 @@
     </div>
 
     <!-- Tool bar -->
-    <div class="grid grid-cols-3 items-center h-11 px-3 gap-2 bg-elevated">
+    <div v-if="!state.readonly.value" class="grid grid-cols-3 items-center h-11 px-3 gap-2 bg-elevated">
       <div class="justify-self-start">
         <ToolProperties @style-updated="bumpStyleVersion" />
       </div>

package/dist/runtime/components/ViewerTabs.d.vue.ts

@@ -36,6 +36,8 @@ type __VLS_Props = {
     signatureHandlers?: SignatureHandlers;
     /** Enable text layer on all Viewer instances. */
     textLayer?: boolean;
+    /** When true, all viewers are in view-only mode. */
+    readonly?: boolean;
     /** Default view mode for tabs without a per-tab override. */
     viewMode?: ViewMode;
     /** Default zoom for tabs without a per-tab override. */

package/dist/runtime/components/ViewerTabs.vue

@@ -56,6 +56,7 @@
           :signature-handlers="signatureHandlers"
           :view-mode="tab.viewMode ?? viewMode"
           :zoom="tab.zoom ?? zoom"
+          :readonly="readonly"
         >
           <template v-if="$slots.header" #header>
             <slot name="header" :tab="tab" />
@@ -84,6 +85,7 @@ const props = defineProps({
   userName: { type: String, required: false, default: void 0 },
   signatureHandlers: { type: Object, required: false, default: void 0 },
   textLayer: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
   viewMode: { type: String, required: false, default: "fit-width" },
   zoom: { type: Number, required: false, default: 1 },
   minTabs: { type: Number, required: false, default: 0 }

package/dist/runtime/components/ViewerTabs.vue.d.ts

@@ -36,6 +36,8 @@ type __VLS_Props = {
     signatureHandlers?: SignatureHandlers;
     /** Enable text layer on all Viewer instances. */
     textLayer?: boolean;
+    /** When true, all viewers are in view-only mode. */
+    readonly?: boolean;
     /** Default view mode for tabs without a per-tab override. */
     viewMode?: ViewMode;
     /** Default zoom for tabs without a per-tab override. */

package/dist/runtime/components/form-fields/FormButton.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    :disabled="props.field.readOnly"
+    :disabled="isReadOnly"
     :style="buttonStyle"
     class="kviewer-form-button"
     @click="onClick"
@@ -13,10 +13,13 @@
 <script setup>
 import { computed } from "vue";
 import { useFormFields } from "../../composables/useFormFields";
+import { useViewerState } from "../../composables/useViewerState";
 const props = defineProps({
   field: { type: Object, required: true }
 });
 const formFields = useFormFields();
+const state = useViewerState();
+const isReadOnly = computed(() => state.readonly.value || props.field.readOnly);
 const buttonStyle = computed(() => {
   const style = {};
   if (props.field.fontSize && props.field.fontSize > 0) {

package/dist/runtime/components/form-fields/FormCheckbox.vue

@@ -3,7 +3,7 @@
     <input
       type="checkbox"
       :checked="isChecked"
-      :disabled="props.field.readOnly"
+      :disabled="isReadOnly"
       :required="props.field.required"
       @change="onChange"
     >
@@ -13,10 +13,13 @@
 <script setup>
 import { computed } from "vue";
 import { useFormFields } from "../../composables/useFormFields";
+import { useViewerState } from "../../composables/useViewerState";
 const props = defineProps({
   field: { type: Object, required: true }
 });
 const formFields = useFormFields();
+const state = useViewerState();
+const isReadOnly = computed(() => state.readonly.value || props.field.readOnly);
 const isChecked = computed(() => {
   const fv = formFields.getFieldValue(props.field.id);
   return fv?.value === true;

package/dist/runtime/components/form-fields/FormDropdown.vue

@@ -4,7 +4,7 @@
     <input
       :value="currentValue"
       :list="datalistId"
-      :disabled="props.field.readOnly"
+      :disabled="isReadOnly"
       :required="props.field.required"
       :style="fieldStyle"
       class="kviewer-form-input"
@@ -25,7 +25,7 @@
   <select
     v-else-if="!props.field.combo"
     :value="currentValue"
-    :disabled="props.field.readOnly"
+    :disabled="isReadOnly"
     :required="props.field.required"
     :multiple="props.field.multiSelect"
     :size="listBoxSize"
@@ -46,7 +46,7 @@
   <select
     v-else
     :value="currentValue"
-    :disabled="props.field.readOnly"
+    :disabled="isReadOnly"
     :required="props.field.required"
     :style="fieldStyle"
     class="kviewer-form-input kviewer-form-select"
@@ -68,10 +68,13 @@
 <script setup>
 import { computed } from "vue";
 import { useFormFields } from "../../composables/useFormFields";
+import { useViewerState } from "../../composables/useViewerState";
 const props = defineProps({
   field: { type: Object, required: true }
 });
 const formFields = useFormFields();
+const state = useViewerState();
+const isReadOnly = computed(() => state.readonly.value || props.field.readOnly);
 const datalistId = computed(() => `kviewer-datalist-${props.field.id}`);
 const listBoxSize = computed(() => {
   const optCount = props.field.options?.length ?? 0;

package/dist/runtime/components/form-fields/FormRadioButton.vue

@@ -5,7 +5,7 @@
       :name="props.field.fieldName"
       :value="props.field.buttonValue"
       :checked="isSelected"
-      :disabled="props.field.readOnly"
+      :disabled="isReadOnly"
       :required="props.field.required"
       @change="onChange"
     >
@@ -15,10 +15,13 @@
 <script setup>
 import { computed } from "vue";
 import { useFormFields } from "../../composables/useFormFields";
+import { useViewerState } from "../../composables/useViewerState";
 const props = defineProps({
   field: { type: Object, required: true }
 });
 const formFields = useFormFields();
+const state = useViewerState();
+const isReadOnly = computed(() => state.readonly.value || props.field.readOnly);
 const isSelected = computed(() => {
   const fv = formFields.getFieldValue(props.field.id);
   if (!fv) return false;

package/dist/runtime/components/form-fields/FormSignatureField.vue

@@ -32,7 +32,7 @@ const signatureUrl = computed(() => {
 });
 const hasSigned = computed(() => !!signatureUrl.value);
 async function onClickSign() {
-  if (props.field.readOnly) return;
+  if (props.field.readOnly || state.readonly.value) return;
   if (state.signatures.value.length > 0) {
     const sig = state.signatures.value[0];
     if (sig) {

package/dist/runtime/components/form-fields/FormTextField.vue

@@ -3,7 +3,7 @@
     v-if="props.field.multiLine"
     :value="currentValue"
     :maxlength="props.field.maxLen || void 0"
-    :readonly="props.field.readOnly"
+    :readonly="isReadOnly"
     :required="props.field.required"
     :style="fieldStyle"
     class="kviewer-form-input"
@@ -14,7 +14,7 @@
     :type="props.field.password ? 'password' : 'text'"
     :value="currentValue"
     :maxlength="props.field.maxLen || void 0"
-    :readonly="props.field.readOnly"
+    :readonly="isReadOnly"
     :required="props.field.required"
     :style="fieldStyle"
     class="kviewer-form-input"
@@ -25,10 +25,13 @@
 <script setup>
 import { computed } from "vue";
 import { useFormFields } from "../../composables/useFormFields";
+import { useViewerState } from "../../composables/useViewerState";
 const props = defineProps({
   field: { type: Object, required: true }
 });
 const formFields = useFormFields();
+const state = useViewerState();
+const isReadOnly = computed(() => state.readonly.value || props.field.readOnly);
 const currentValue = computed(() => {
   const fv = formFields.getFieldValue(props.field.id);
   return typeof fv?.value === "string" ? fv.value : "";

package/dist/runtime/composables/useAnnotationEngine.js

@@ -63,7 +63,8 @@ export function createAnnotationEngine(viewerState, options) {
   const painter = new Painter({
     userName: options.userName ?? "User",
     callbacks,
-    getStylusModeEnabled: () => viewerState.stylusMode.value
+    getStylusModeEnabled: () => viewerState.stylusMode.value,
+    getReadonly: () => viewerState.readonly.value
   });
   viewerState.painter.value = painter;
   return painter;

package/dist/runtime/composables/useViewerState.d.ts

@@ -53,6 +53,7 @@ export interface ViewerState {
     setStylusMode: (enabled: boolean) => void;
     scrollToPage: (pageNumber: number) => void;
     history: AnnotationHistory;
+    readonly: Ref<boolean>;
 }
 export interface ViewerStateProvider {
     state: ViewerState;

package/dist/runtime/composables/useViewerState.js

@@ -62,6 +62,7 @@ export function provideViewerState() {
       if (prev !== void 0) setScale(prev);
     }
   }
+  const readonly = ref(false);
   const stylusMode = ref(false);
   function setStylusMode(enabled) {
     stylusMode.value = enabled;
@@ -91,6 +92,7 @@ export function provideViewerState() {
     if (activeSignature.value?.id === id) activeSignature.value = null;
   }
   function selectTool(tool, dataTransfer) {
+    if (readonly.value && tool !== "hand") return;
     activeTool.value = tool;
     selectedAnnotation.value = null;
     selectedAnnotations.value = [];
@@ -113,6 +115,7 @@ export function provideViewerState() {
     }
   }
   function deleteAnnotation(id) {
+    if (readonly.value) return;
     if (painter.value) {
       painter.value.delete(id, true);
       annotations.value.delete(id);
@@ -168,7 +171,8 @@ export function provideViewerState() {
     stylusMode,
     setStylusMode,
     scrollToPage,
-    history
+    history,
+    readonly
   };
   provide(VIEWER_STATE_KEY, state);
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kviewer",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Kabema PDF Editor",
   "repository": "kabema/kviewer",
   "license": "MIT",