kviewer 0.2.0 → 0.2.2

package/dist/runtime/components/modals/FreeTextModal.vue

@@ -1,7 +1,7 @@
 <template>
   <UModal
     v-model:open="isOpen"
-    :title="props.initialText !== void 0 ? 'Edit Text' : 'Free Text'"
+    :title="props.initialText !== void 0 ? t('editText') : t('freeText')"
     :ui="{ width: 'sm:max-w-md' }"
   >
     <template #body>
@@ -9,7 +9,7 @@
         <UTextarea
           ref="textareaRef"
           v-model="inputValue"
-          placeholder="Start typing..."
+          :placeholder="t('startTyping')"
           :rows="3"
         />
         <div class="flex items-center justify-between">
@@ -38,13 +38,13 @@
     <template #footer>
       <div class="flex justify-end gap-2 w-full">
         <UButton variant="ghost" color="neutral" @click="cancel">
-          Cancel
+          {{ t("cancel") }}
         </UButton>
         <UButton
           :disabled="!inputValue.trim()"
           @click="submit"
         >
-          OK
+          {{ t("ok") }}
         </UButton>
       </div>
     </template>
@@ -54,6 +54,8 @@
 <script setup>
 import { ref, watch, nextTick } from "vue";
 import { defaultOptions } from "../../annotation/engine/config";
+import { useKviewerI18n } from "../../composables/useKviewerI18n";
+const { t } = useKviewerI18n();
 const props = defineProps({
   open: { type: Boolean, required: true },
   defaultColor: { type: String, required: true },

package/dist/runtime/components/modals/SignatureDrawModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <UModal v-model:open="isOpen" title="Draw Signature" :ui="{ content: 'sm:max-w-2xl' }">
+  <UModal v-model:open="isOpen" :title="t('drawSignature')" :ui="{ content: 'sm:max-w-2xl' }">
     <template #body>
       <div class="flex flex-col gap-3">
         <div
@@ -30,7 +30,7 @@
             />
           </div>
           <UButton variant="ghost" color="neutral" size="xs" @click="clearCanvas">
-            Clear
+            {{ t("clear") }}
           </UButton>
         </div>
       </div>
@@ -38,10 +38,10 @@
     <template #footer>
       <div class="flex justify-end gap-2">
         <UButton variant="ghost" color="neutral" @click="cancel">
-          Cancel
+          {{ t("cancel") }}
         </UButton>
         <UButton :disabled="!hasDrawn" @click="submit">
-          Save
+          {{ t("save") }}
         </UButton>
       </div>
     </template>
@@ -51,6 +51,8 @@
 <script setup>
 import { ref, watch, nextTick, onBeforeUnmount } from "vue";
 import { defaultOptions } from "../../annotation/engine/config";
+import { useKviewerI18n } from "../../composables/useKviewerI18n";
+const { t } = useKviewerI18n();
 const props = defineProps({
   open: { type: Boolean, required: true }
 });

package/dist/runtime/components/panels/PlacedFieldSidebar.vue

@@ -20,7 +20,7 @@
     <div class="flex-1 min-h-0 overflow-y-auto">
       <div v-if="field" class="flex flex-col gap-4 p-4">
         <div class="flex flex-col gap-1">
-          <label class="text-xs font-medium text-muted">Field name</label>
+          <label class="text-xs font-medium text-muted">{{ t("fieldName") }}</label>
           <UInput
             v-model="nameDraft"
             size="sm"
@@ -29,19 +29,19 @@
             @keydown.enter.prevent="commitName"
           />
           <p class="text-xs text-muted">
-            Shared names group radio buttons and bind multiple widgets to the same value.
+            {{ t("fieldNameHint") }}
           </p>
         </div>
 
         <div class="flex flex-col gap-2">
           <UCheckbox
             :model-value="field.required"
-            label="Required"
+            :label="t('required')"
             @update:model-value="onRequired"
           />
           <UCheckbox
             :model-value="field.readOnly"
-            label="Read-only"
+            :label="t('readOnly')"
             @update:model-value="onReadOnly"
           />
         </div>
@@ -50,15 +50,15 @@
           <div class="flex flex-col gap-2">
             <UCheckbox
               :model-value="!!field.multiLine"
-              label="Multi-line"
+              :label="t('multiLine')"
               @update:model-value="onMultiLine"
             />
             <div class="flex flex-col gap-1">
-              <label class="text-xs font-medium text-muted">Max length</label>
+              <label class="text-xs font-medium text-muted">{{ t("maxLength") }}</label>
               <UInput
                 type="number"
                 :model-value="field.maxLen != null ? String(field.maxLen) : ''"
-                placeholder="No limit"
+                :placeholder="t('noLimit')"
                 size="sm"
                 min="0"
                 @update:model-value="onMaxLen"
@@ -69,7 +69,7 @@
 
         <template v-if="field.fieldType === 'checkbox'">
           <div class="flex flex-col gap-1">
-            <label class="text-xs font-medium text-muted">Style</label>
+            <label class="text-xs font-medium text-muted">{{ t("style") }}</label>
             <USelect
               :model-value="field.checkboxStyle ?? 'check'"
               :items="checkboxStyleItems"
@@ -77,14 +77,14 @@
               @update:model-value="onCheckboxStyle"
             />
             <p class="text-xs text-muted">
-              Glyph drawn when checked. Saved as <code>/MK /CA</code> on export.
+              {{ t("checkboxStyleHint") }}
             </p>
           </div>
         </template>
 
         <template v-if="field.fieldType === 'dropdown'">
           <div class="flex flex-col gap-1">
-            <label class="text-xs font-medium text-muted">Options</label>
+            <label class="text-xs font-medium text-muted">{{ t("options") }}</label>
             <div class="flex flex-col gap-1">
               <div
                 v-for="(opt, i) in field.options ?? []"
@@ -95,7 +95,7 @@
                   :model-value="opt.displayValue"
                   size="sm"
                   spellcheck="false"
-                  placeholder="Label"
+                  :placeholder="t('optionLabelPlaceholder')"
                   class="flex-1"
                   @update:model-value="(v) => updateOption(i, v)"
                 />
@@ -111,7 +111,7 @@
             </div>
             <UButton
               icon="i-lucide-plus"
-              label="Add option"
+              :label="t('addOption')"
               variant="soft"
               color="neutral"
               size="xs"
@@ -120,18 +120,18 @@
             />
             <UCheckbox
               :model-value="field.combo !== false"
-              label="Combo box (collapsible)"
+              :label="t('comboBox')"
               class="mt-2"
               @update:model-value="onCombo"
             />
             <UCheckbox
               :model-value="!!field.editable"
-              label="Allow custom text"
+              :label="t('allowCustomText')"
               @update:model-value="onEditable"
             />
             <UCheckbox
               :model-value="!!field.multiSelect"
-              label="Multi-select"
+              :label="t('multiSelect')"
               @update:model-value="onMultiSelect"
             />
           </div>
@@ -139,23 +139,23 @@
 
         <template v-if="field.fieldType === 'signature'">
           <div class="flex flex-col gap-1">
-            <label class="text-xs font-medium text-muted">Prompt text</label>
+            <label class="text-xs font-medium text-muted">{{ t("promptText") }}</label>
             <UInput
               v-model="promptDraft"
               size="sm"
               spellcheck="false"
-              placeholder="Click to sign"
+              :placeholder="t('clickToSign')"
               @blur="commitPrompt"
               @keydown.enter.prevent="commitPrompt"
             />
             <p class="text-xs text-muted">
-              Shown on the unsigned widget. Defaults to "Click to sign".
+              {{ t("promptTextHint", { default: t("clickToSign") }) }}
             </p>
           </div>
 
           <div class="flex flex-col gap-2">
             <div class="flex flex-col gap-1">
-              <label class="text-xs font-medium text-muted">Lock fields after signing</label>
+              <label class="text-xs font-medium text-muted">{{ t("lockFieldsAfterSigning") }}</label>
               <USelect
                 :model-value="field.lockAction ?? 'none'"
                 :items="lockActionItems"
@@ -163,8 +163,7 @@
                 @update:model-value="onLockAction"
               />
               <p class="text-xs text-muted">
-                Once this signature is filled, listed fields become read-only
-                inside the viewer. Not preserved on PDF export.
+                {{ t("lockFieldsHint") }}
               </p>
             </div>
 
@@ -173,13 +172,13 @@
               class="flex flex-col gap-1"
             >
               <label class="text-xs font-medium text-muted">
-                {{ field.lockAction === "include" ? "Lock these fields" : "Lock all fields except" }}
+                {{ field.lockAction === "include" ? t("lockTheseFields") : t("lockAllFieldsExcept") }}
               </label>
               <div
                 v-if="otherFieldNames.length === 0"
                 class="text-xs text-muted italic"
               >
-                No other named fields in the document.
+                {{ t("noOtherNamedFields") }}
               </div>
               <div v-else class="flex flex-col gap-1 max-h-48 overflow-y-auto">
                 <UCheckbox
@@ -196,7 +195,7 @@
 
         <template v-if="field.fieldType === 'radio'">
           <div class="flex flex-col gap-1">
-            <label class="text-xs font-medium text-muted">Group</label>
+            <label class="text-xs font-medium text-muted">{{ t("group") }}</label>
             <USelect
               :model-value="field.fieldName"
               :items="radioGroupItems"
@@ -204,12 +203,12 @@
               @update:model-value="onRadioGroup"
             />
             <p class="text-xs text-muted">
-              Radios sharing a group act as one — picking one clears the others.
+              {{ t("radioGroupHint") }}
             </p>
           </div>
 
           <div class="flex flex-col gap-1">
-            <label class="text-xs font-medium text-muted">Option value</label>
+            <label class="text-xs font-medium text-muted">{{ t("optionValue") }}</label>
             <UInput
               v-model="buttonValueDraft"
               size="sm"
@@ -218,14 +217,14 @@
               @keydown.enter.prevent="commitButtonValue"
             />
             <p class="text-xs text-muted">
-              Value stored when this option is selected. Must be unique inside the group.
+              {{ t("optionValueHint") }}
             </p>
           </div>
         </template>
 
         <div class="flex flex-col gap-1 text-xs text-muted">
-          <div>Type: <span class="font-medium">{{ field.fieldType }}</span></div>
-          <div>Page: <span class="font-medium">{{ field.pageNumber }}</span></div>
+          <div>{{ t("typeLabel") }}: <span class="font-medium">{{ field.fieldType }}</span></div>
+          <div>{{ t("pageLabel") }}: <span class="font-medium">{{ field.pageNumber }}</span></div>
         </div>
 
         <UButton
@@ -235,11 +234,11 @@
           block
           @click="onDelete"
         >
-          Delete field
+          {{ t("deleteField") }}
         </UButton>
       </div>
       <div v-else class="text-sm text-muted p-4">
-        Select a placed field to edit its properties.
+        {{ t("selectFieldHint") }}
       </div>
     </div>
   </aside>
@@ -250,7 +249,22 @@ import { computed, onBeforeUnmount, ref, watch } from "vue";
 import { CHECKBOX_STYLE_OPTIONS } from "../../annotation/checkbox-styles";
 import { useFormFields } from "../../composables/useFormFields";
 import { useViewerState } from "../../composables/useViewerState";
-const checkboxStyleItems = CHECKBOX_STYLE_OPTIONS;
+import { useKviewerI18n } from "../../composables/useKviewerI18n";
+const { t } = useKviewerI18n();
+const checkboxStyleLabelKeys = {
+  check: "styleCheck",
+  cross: "styleCross",
+  diamond: "styleDiamond",
+  circle: "styleCircle",
+  star: "styleStar",
+  square: "styleSquare"
+};
+const checkboxStyleItems = computed(
+  () => CHECKBOX_STYLE_OPTIONS.map(({ value }) => ({
+    label: t(checkboxStyleLabelKeys[value]),
+    value
+  }))
+);
 const formFields = useFormFields();
 const state = useViewerState();
 const field = computed(() => {
@@ -259,29 +273,32 @@ const field = computed(() => {
   return formFields.getFieldById(id) ?? null;
 });
 const title = computed(() => {
-  if (!field.value) return "Field properties";
+  if (!field.value) return t("fieldProperties");
   return field.value.fieldName;
 });
 const description = computed(() => {
   if (!field.value) return void 0;
-  return `${labelForType(field.value.fieldType)} on page ${field.value.pageNumber}`;
+  return t("fieldOnPage", {
+    type: labelForType(field.value.fieldType),
+    page: field.value.pageNumber
+  });
 });
-function labelForType(t) {
-  switch (t) {
+function labelForType(fieldType) {
+  switch (fieldType) {
     case "text":
-      return "Text field";
+      return t("fieldTypeText");
     case "checkbox":
-      return "Checkbox";
+      return t("fieldTypeCheckbox");
     case "radio":
-      return "Radio button";
+      return t("fieldTypeRadio");
     case "signature":
-      return "Signature field";
+      return t("fieldTypeSignature");
     case "dropdown":
-      return "Dropdown";
+      return t("fieldTypeDropdown");
     case "button":
-      return "Button";
+      return t("fieldTypeButton");
     default:
-      return "Field";
+      return t("fieldTypeGeneric");
   }
 }
 const nameDraft = ref("");
@@ -292,12 +309,12 @@ watch(field, (f) => {
   buttonValueDraft.value = f?.buttonValue ?? "";
   promptDraft.value = f?.promptText ?? "";
 }, { immediate: true });
-const lockActionItems = [
-  { label: "None", value: "none" },
-  { label: "All other fields", value: "all" },
-  { label: "Selected fields only", value: "include" },
-  { label: "All except selected", value: "exclude" }
-];
+const lockActionItems = computed(() => [
+  { label: t("lockNone"), value: "none" },
+  { label: t("lockAllOther"), value: "all" },
+  { label: t("lockSelectedOnly"), value: "include" },
+  { label: t("lockAllExceptSelected"), value: "exclude" }
+]);
 const NEW_GROUP_SENTINEL = "__new_radio_group__";
 const radioGroupItems = computed(() => {
   const names = /* @__PURE__ */ new Set();
@@ -309,7 +326,7 @@ const radioGroupItems = computed(() => {
   const sorted = Array.from(names).sort();
   return [
     ...sorted.map((n) => ({ label: n, value: n })),
-    { label: "+ New group", value: NEW_GROUP_SENTINEL }
+    { label: t("newGroup"), value: NEW_GROUP_SENTINEL }
   ];
 });
 const otherFieldNames = computed(() => {

package/dist/runtime/components/panels/SignaturePicker.vue

@@ -3,7 +3,7 @@
     <button
       class="relative flex items-center justify-center w-8 h-8 rounded-md transition-colors cursor-pointer"
       :class="isActive ? 'bg-default text-highlighted' : 'text-muted hover:bg-default/50 hover:text-highlighted'"
-      title="Signature"
+      :title="t('signature')"
     >
       <UIcon name="i-lucide-pen-tool" class="text-lg" />
     </button>
@@ -20,7 +20,7 @@
           >
             <img
               :src="sig.imageUrl"
-              :alt="sig.name || 'Signature'"
+              :alt="sig.name || t('signature')"
               class="h-8 max-w-36 object-contain bg-white rounded border border-default px-2"
             >
             <UButton
@@ -34,7 +34,7 @@
           </div>
         </div>
         <p v-else class="text-xs text-muted mb-2">
-          No saved signatures
+          {{ t("noSavedSignatures") }}
         </p>
 
         <UButton
@@ -45,7 +45,7 @@
           block
           @click="drawModalOpen = true"
         >
-          Add signature
+          {{ t("addSignature") }}
         </UButton>
       </div>
     </template>
@@ -63,9 +63,11 @@
 <script setup>
 import { ref, computed } from "vue";
 import { useViewerState } from "../../composables/useViewerState";
+import { useKviewerI18n } from "../../composables/useKviewerI18n";
 import { AnnotationType } from "../../annotation/engine/types";
 import SignatureDrawModal from "../modals/SignatureDrawModal.vue";
 const state = useViewerState();
+const { t } = useKviewerI18n();
 const drawModalOpen = ref(false);
 const isActive = computed(() => state.activeTool.value === AnnotationType.SIGNATURE);
 function selectSignature(sig) {

package/dist/runtime/components/panels/StampPicker.vue

@@ -3,7 +3,7 @@
     <button
       class="relative flex items-center justify-center w-8 h-8 rounded-md transition-colors cursor-pointer"
       :class="isActive ? 'bg-default text-highlighted' : 'text-muted hover:bg-default/50 hover:text-highlighted'"
-      title="Stamp"
+      :title="t('stamp')"
     >
       <UIcon name="i-lucide-stamp" class="text-lg" />
     </button>
@@ -33,8 +33,10 @@
 <script setup>
 import { ref, computed } from "vue";
 import { useViewerState } from "../../composables/useViewerState";
+import { useKviewerI18n } from "../../composables/useKviewerI18n";
 import { AnnotationType } from "../../annotation/engine/types";
 const state = useViewerState();
+const { t } = useKviewerI18n();
 const popoverOpen = ref(false);
 const isActive = computed(() => state.activeTool.value === AnnotationType.STAMP);
 function selectStamp(stamp) {

package/dist/runtime/components/tools/AnnotationToolButton.d.vue.ts

@@ -0,0 +1,10 @@
+import type { AnnotationType } from '../../annotation/engine/types.js';
+/** A single "select an annotation type" toolbar button. Parametrized by
+ *  the tool it activates, so every draw/form/eraser button is one instance
+ *  of this component instead of bespoke markup. */
+type __VLS_Props = {
+    type: AnnotationType | 'eraser';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/tools/AnnotationToolButton.vue

@@ -0,0 +1,33 @@
+<template>
+  <ToolButton
+    :tool="def"
+    :active="state.activeTool.value === props.type"
+    :indicator-color="indicatorColor"
+    @click="state.selectTool(props.type)"
+  />
+</template>
+
+<script setup>
+import { computed, inject, ref } from "vue";
+import { useViewerState } from "../../composables/useViewerState";
+import { annotationDefinitions } from "../../annotation/engine/config";
+import { STYLE_VERSION_KEY } from "../../toolbar-tools";
+import ToolButton from "../ToolButton.vue";
+const props = defineProps({
+  type: { type: [Number, String], required: true }
+});
+const state = useViewerState();
+const styleVersion = inject(STYLE_VERSION_KEY, ref(0));
+function getDef(type) {
+  return annotationDefinitions.find((d) => d.type === type);
+}
+const def = computed(() => {
+  if (props.type === "eraser") return { name: "Eraser", icon: "i-lucide-eraser" };
+  return getDef(props.type);
+});
+const indicatorColor = computed(() => {
+  void styleVersion.value;
+  if (props.type === "eraser") return void 0;
+  return getDef(props.type)?.style?.color;
+});
+</script>

package/dist/runtime/components/tools/AnnotationToolButton.vue.d.ts

@@ -0,0 +1,10 @@
+import type { AnnotationType } from '../../annotation/engine/types.js';
+/** A single "select an annotation type" toolbar button. Parametrized by
+ *  the tool it activates, so every draw/form/eraser button is one instance
+ *  of this component instead of bespoke markup. */
+type __VLS_Props = {
+    type: AnnotationType | 'eraser';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/tools/MarqueeTool.vue

@@ -4,12 +4,14 @@
     :variant="state.activeTool.value === 'marquee' ? 'soft' : 'ghost'"
     color="neutral"
     size="xs"
-    title="Marquee Select"
+    :title="t('marqueeSelect')"
     @click="state.selectTool('marquee')"
   />
 </template>
 
 <script setup>
 import { useViewerState } from "../../composables/useViewerState";
+import { useKviewerI18n } from "../../composables/useKviewerI18n";
 const state = useViewerState();
+const { t } = useKviewerI18n();
 </script>

package/dist/runtime/components/tools/PageSettings.vue

@@ -13,23 +13,25 @@
 import { computed } from "vue";
 import { usePageSettings } from "../../composables/usePageSettings";
 import { useViewerState } from "../../composables/useViewerState";
+import { useKviewerI18n } from "../../composables/useKviewerI18n";
 const settings = usePageSettings();
 const state = useViewerState();
+const { t } = useKviewerI18n();
 const menuItems = computed(() => [
   [
     {
-      label: "Seiten\xFCbergang",
+      label: t("pageTransition"),
       type: "label"
     },
     {
-      label: "Fortlaufend",
+      label: t("continuous"),
       icon: "i-lucide-rows-3",
       type: "checkbox",
       checked: settings.pageTransition.value === "continuous",
       onUpdateChecked: () => settings.setPageTransition("continuous")
     },
     {
-      label: "Seite f\xFCr Seite",
+      label: t("pageByPage"),
       icon: "i-lucide-file",
       type: "checkbox",
       checked: settings.pageTransition.value === "single-page",
@@ -38,34 +40,34 @@ const menuItems = computed(() => [
   ],
   [
     {
-      label: "Drehen",
+      label: t("rotate"),
       type: "label"
     },
     {
-      label: "Im Uhrzeigersinn",
+      label: t("rotateClockwise"),
       icon: "i-lucide-rotate-cw",
       onSelect: () => settings.rotateCW()
     },
     {
-      label: "Gegen den Uhrzeigersinn",
+      label: t("rotateCounterclockwise"),
       icon: "i-lucide-rotate-ccw",
       onSelect: () => settings.rotateCCW()
     }
   ],
   [
     {
-      label: "Layout",
+      label: t("layout"),
       type: "label"
     },
     {
-      label: "Einseitig",
+      label: t("singlePage"),
       icon: "i-lucide-square",
       type: "checkbox",
       checked: settings.layoutMode.value === "single",
       onUpdateChecked: () => settings.setLayoutMode("single")
     },
     {
-      label: "Zweiseitig",
+      label: t("twoPages"),
       icon: "i-lucide-columns-2",
       type: "checkbox",
       checked: settings.layoutMode.value === "double",
@@ -74,7 +76,7 @@ const menuItems = computed(() => [
   ],
   [
     {
-      label: "Stiftmodus",
+      label: t("stylusMode"),
       icon: "i-lucide-pen-tool",
       type: "checkbox",
       checked: state.stylusMode.value,
@@ -83,7 +85,7 @@ const menuItems = computed(() => [
   ],
   [
     {
-      label: "Vollbildansicht",
+      label: t("fullscreen"),
       icon: "i-lucide-maximize",
       onSelect: () => settings.toggleFullscreen()
     }