@inkbar/vue 0.4.0 → 0.5.0

package/dist/components/InkSignatureMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkSignatureMenu.js","names":["_sfc_main","InkSignatureMenu_vue_vue_type_script_setup_true_lang_default","InkSignatureMenu_default"],"sources":["../../src/components/InkSignatureMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A split button for the signature tool. The main part activates the tool with the chosen\n * signature, or opens the menu when none is chosen; the chevron opens the saved signatures as\n * previews, each with a remove button, and \"Create signature\", which opens\n * `InkSignatureDialog`. Choosing a signature switches to the tool with it.\n */\nimport {\n  focusInitialMenuItem,\n  handleMenuKeys,\n  menuItems,\n  SIGNATURE_LABELS,\n  signatureMenuModel,\n  signaturePreview,\n} from '@inkbar/core/dom'\nimport { ChevronDown, Plus, Signature, Trash2 } from '@inkbar/icons'\nimport {\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, nextTick, ref, useTemplateRef, watch } from 'vue'\n\nimport { useTool } from '../composables/useTool'\nimport { useToolOptions } from '../composables/useToolOptions'\nimport { useInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport InkIcon from './InkIcon.vue'\nimport InkSignatureDialog from './InkSignatureDialog.vue'\n\nimport type { SignatureOptions, SignatureTemplate } from '@inkbar/core'\n\nconst props = defineProps<{\n  /** The fonts the dialog's Type tab offers. Default: InkRoot's `signatureFonts`. */\n  fonts?: readonly string[] | undefined\n}>()\n\nconst NO_TEMPLATES: readonly SignatureTemplate[] = []\n\nconst { tool, setTool } = useTool()\nconst { options, setOptions } = useToolOptions<SignatureOptions>('signature')\nconst ctx = useInkContext('InkSignatureMenu')\nconst templates = useReadable(() => ctx.signatures.value.templates, NO_TEMPLATES)\nconst removeError = useReadable(() => ctx.signatures.value.removeError, undefined)\nconst model = computed(() => signatureMenuModel(templates.value, options.value))\nconst active = computed(() => tool.value === 'signature')\nconst open = ref(false)\nconst creating = ref(false)\n// An old removal error is not news when the menu opens again.\nwatch(open, (isOpen) => {\n  if (isOpen) ctx.signatures.value.clearRemoveError()\n})\nconst main = useTemplateRef<{ $el: HTMLElement }>('main')\n\n/** A saved signature drawn small: ink as filled outlines. */\nconst previews = computed(() =>\n  model.value.items.map((item) =>\n    item.template.kind === 'ink' ? signaturePreview(item.template) : null\n  )\n)\n\n/** ArrowDown opens on the first item; a click opens on the checked one. */\nlet focusFirst = false\n/** Set while the menu closes for the dialog, which takes focus instead of the trigger. */\nlet toDialog = false\n\nfunction onTriggerKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'ArrowDown' || e.defaultPrevented || open.value) return\n  e.preventDefault()\n  focusFirst = true\n  open.value = true\n}\n\nconst panel = (): HTMLElement | null =>\n  document.querySelector<HTMLElement>('[data-ink-menu=\"signature\"] [role=\"menu\"]')\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  const menu = panel()\n  if (menu) {\n    if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })\n    else focusInitialMenuItem(menu)\n  }\n  focusFirst = false\n}\n\nfunction onCloseAutoFocus(e: Event): void {\n  if (toDialog) e.preventDefault()\n  toDialog = false\n}\n\nfunction onMain(): void {\n  if (model.value.selected) setTool('signature')\n  else open.value = true\n}\n\nfunction choose(id: string): void {\n  setOptions({ templateId: id })\n  setTool('signature')\n  open.value = false\n}\n\n/** Removes a template; focus moves to the signature now in its row, else \"Create signature\". */\nfunction remove(id: string, row: number): void {\n  ctx.signatures.value.remove(id).then(\n    async () => {\n      await nextTick()\n      const menu = panel()\n      if (!menu) return\n      const rows = menu.querySelectorAll<HTMLElement>('.ink-signature-item')\n      const next =\n        rows[Math.min(row, rows.length - 1)] ??\n        menu.querySelector<HTMLElement>('[data-ink-signature-create]')\n      next?.focus({ preventScroll: true })\n    },\n    () => {\n      // The host's store refused: the signature stays.\n    }\n  )\n}\n\nfunction create(): void {\n  toDialog = true\n  open.value = false\n  creating.value = true\n}\n\nfunction onDialogCloseAutoFocus(e: Event): void {\n  e.preventDefault()\n  main.value?.$el.focus({ preventScroll: true })\n}\n\n// Reka's typed props stop at its own; ARIA and listeners go through bound objects.\nconst mainAttrs = computed(() => ({\n  'aria-pressed': String(active.value),\n  'aria-label': SIGNATURE_LABELS.sign,\n  title: SIGNATURE_LABELS.sign,\n  onClick: onMain,\n}))\nconst triggerAttrs = {\n  'aria-label': SIGNATURE_LABELS.trigger,\n  title: SIGNATURE_LABELS.trigger,\n  'aria-haspopup': 'menu' as const,\n  onKeydown: onTriggerKeydown,\n}\nconst menuAttrs = { 'aria-label': SIGNATURE_LABELS.menu }\nconst innerAttrs = {\n  role: 'menu',\n  'aria-label': SIGNATURE_LABELS.menu,\n  onKeydown: (e: KeyboardEvent) => handleMenuKeys(e, e.currentTarget as HTMLElement),\n}\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    :aria-label=\"SIGNATURE_LABELS.sign\"\n    class=\"ink-split-button ink-signature-menu\"\n    data-ink-signature-menu\n  >\n    <ToolbarButton\n      ref=\"main\"\n      class=\"ink-tool-button ink-signature-button\"\n      data-ink-tool-button\n      data-ink-signature-button\n      data-tool=\"signature\"\n      :data-state=\"active ? 'on' : 'off'\"\n      v-bind=\"mainAttrs\"\n    >\n      <slot :active=\"active\"><InkIcon :icon=\"Signature\" /></slot>\n    </ToolbarButton>\n    <PopoverRoot v-model:open=\"open\">\n      <ToolbarButton as-child>\n        <PopoverTrigger as-child>\n          <button\n            type=\"button\"\n            class=\"ink-menu-trigger ink-signature-menu-trigger\"\n            data-ink-signature-menu-trigger\n            :data-state=\"open ? 'open' : 'closed'\"\n            v-bind=\"triggerAttrs\"\n          >\n            <InkIcon :icon=\"ChevronDown\" />\n          </button>\n        </PopoverTrigger>\n      </ToolbarButton>\n      <PopoverPortal>\n        <PopoverContent\n          class=\"ink-select-content ink-menu-content\"\n          data-ink-select-content\n          data-ink-menu=\"signature\"\n          side=\"bottom\"\n          align=\"start\"\n          :side-offset=\"4\"\n          :collision-padding=\"8\"\n          v-bind=\"menuAttrs\"\n          @open-auto-focus=\"onOpenAutoFocus\"\n          @close-auto-focus=\"onCloseAutoFocus\"\n        >\n          <div v-bind=\"innerAttrs\">\n            <template v-if=\"model.items.length > 0\">\n              <div\n                role=\"group\"\n                :aria-label=\"SIGNATURE_LABELS.saved\"\n                class=\"ink-signature-list\"\n                data-ink-menu-columns=\"2\"\n              >\n                <template v-for=\"(item, row) in model.items\" :key=\"item.id\">\n                  <button\n                    type=\"button\"\n                    role=\"menuitemradio\"\n                    :aria-checked=\"item.checked\"\n                    :aria-label=\"item.label\"\n                    tabindex=\"-1\"\n                    class=\"ink-select-item ink-menu-item ink-signature-item\"\n                    data-ink-select-item\n                    :data-key=\"item.id\"\n                    :data-state=\"item.checked ? 'checked' : 'unchecked'\"\n                    @click=\"choose(item.id)\"\n                  >\n                    <span class=\"ink-signature-preview\" :data-kind=\"item.template.kind\">\n                      <img\n                        v-if=\"item.template.kind === 'image'\"\n                        :src=\"item.template.imagedata\"\n                        alt=\"\"\n                        draggable=\"false\"\n                      />\n                      <svg v-else :viewBox=\"previews[row]?.viewBox\" aria-hidden=\"true\">\n                        <path\n                          v-for=\"(d, i) in previews[row]?.paths ?? []\"\n                          :key=\"i\"\n                          :d=\"d\"\n                          fill=\"currentColor\"\n                        />\n                      </svg>\n                    </span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    role=\"menuitem\"\n                    :aria-label=\"item.removeLabel\"\n                    :title=\"item.removeLabel\"\n                    tabindex=\"-1\"\n                    class=\"ink-menu-item ink-signature-remove\"\n                    data-ink-signature-remove\n                    :data-key=\"item.id\"\n                    @click=\"remove(item.id, row)\"\n                  >\n                    <InkIcon :icon=\"Trash2\" :size=\"16\" />\n                  </button>\n                </template>\n              </div>\n              <div role=\"separator\" class=\"ink-select-separator\" />\n            </template>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              tabindex=\"-1\"\n              class=\"ink-select-item ink-menu-item ink-signature-create\"\n              data-ink-select-item\n              data-ink-signature-create\n              @click=\"create\"\n            >\n              <InkIcon :icon=\"Plus\" :size=\"16\" />\n              {{ SIGNATURE_LABELS.create }}\n            </button>\n            <p\n              v-if=\"removeError\"\n              class=\"ink-field-error ink-signature-remove-error\"\n              role=\"alert\"\n              data-ink-signature-remove-error\n            >\n              {{ removeError }}\n            </p>\n          </div>\n        </PopoverContent>\n      </PopoverPortal>\n    </PopoverRoot>\n    <InkSignatureDialog\n      v-model:open=\"creating\"\n      :fonts=\"props.fonts\"\n      @close-auto-focus=\"onDialogCloseAutoFocus\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InkSignatureMenu.js","names":["_sfc_main","InkSignatureMenu_vue_vue_type_script_setup_true_lang_default","InkSignatureMenu_default"],"sources":["../../src/components/InkSignatureMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A split button for the signature tool. The main part activates the tool with the chosen\n * signature, or opens the menu when none is chosen; the chevron opens the saved signatures as\n * previews, each with a remove button, and \"Create signature\", which opens\n * `InkSignatureDialog`. Choosing a signature switches to the tool with it.\n */\nimport {\n  focusInitialMenuItem,\n  handleMenuKeys,\n  menuItems,\n  SIGNATURE_LABELS,\n  signatureMenuModel,\n  signaturePreview,\n} from '@inkbar/core/dom'\nimport { ChevronDown, Plus, Signature, Trash2 } from '@inkbar/icons'\nimport {\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, nextTick, ref, useTemplateRef, watch } from 'vue'\n\nimport { useTool } from '../composables/useTool'\nimport { useToolOptions } from '../composables/useToolOptions'\nimport { useInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport InkIcon from './InkIcon.vue'\nimport InkSignatureDialog from './InkSignatureDialog.vue'\n\nimport type { SignatureOptions, SignatureTemplate } from '@inkbar/core'\n\ndefineOptions({ inheritAttrs: false })\nconst props = defineProps<{\n  /** The fonts the dialog's Type tab offers. Default: InkRoot's `signatureFonts`. */\n  fonts?: readonly string[] | undefined\n}>()\n\nconst NO_TEMPLATES: readonly SignatureTemplate[] = []\n\nconst { tool, setTool } = useTool()\nconst { options, setOptions } = useToolOptions<SignatureOptions>('signature')\nconst ctx = useInkContext('InkSignatureMenu')\nconst templates = useReadable(() => ctx.signatures.value.templates, NO_TEMPLATES)\nconst removeError = useReadable(() => ctx.signatures.value.removeError, undefined)\nconst model = computed(() => signatureMenuModel(templates.value, options.value))\nconst active = computed(() => tool.value === 'signature')\nconst open = ref(false)\nconst creating = ref(false)\n// An old removal error is not news when the menu opens again.\nwatch(open, (isOpen) => {\n  if (isOpen) ctx.signatures.value.clearRemoveError()\n})\nconst main = useTemplateRef<{ $el: HTMLElement }>('main')\n\n/** A saved signature drawn small: ink as filled outlines. */\nconst previews = computed(() =>\n  model.value.items.map((item) =>\n    item.template.kind === 'ink' ? signaturePreview(item.template) : null\n  )\n)\n\n/** ArrowDown opens on the first item; a click opens on the checked one. */\nlet focusFirst = false\n/** Set while the menu closes for the dialog, which takes focus instead of the trigger. */\nlet toDialog = false\n\nfunction onTriggerKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'ArrowDown' || e.defaultPrevented || open.value) return\n  e.preventDefault()\n  focusFirst = true\n  open.value = true\n}\n\nconst panel = (): HTMLElement | null =>\n  document.querySelector<HTMLElement>('[data-ink-menu=\"signature\"] [role=\"menu\"]')\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  const menu = panel()\n  if (menu) {\n    if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })\n    else focusInitialMenuItem(menu)\n  }\n  focusFirst = false\n}\n\nfunction onCloseAutoFocus(e: Event): void {\n  if (toDialog) e.preventDefault()\n  toDialog = false\n}\n\nfunction onMain(): void {\n  if (model.value.selected) setTool('signature')\n  else open.value = true\n}\n\nfunction choose(id: string): void {\n  setOptions({ templateId: id })\n  setTool('signature')\n  open.value = false\n}\n\n/** Removes a template; focus moves to the signature now in its row, else \"Create signature\". */\nfunction remove(id: string, row: number): void {\n  ctx.signatures.value.remove(id).then(\n    async () => {\n      await nextTick()\n      const menu = panel()\n      if (!menu) return\n      const rows = menu.querySelectorAll<HTMLElement>('.ink-signature-item')\n      const next =\n        rows[Math.min(row, rows.length - 1)] ??\n        menu.querySelector<HTMLElement>('[data-ink-signature-create]')\n      next?.focus({ preventScroll: true })\n    },\n    () => {\n      // The host's store refused: the signature stays.\n    }\n  )\n}\n\nfunction create(): void {\n  toDialog = true\n  open.value = false\n  creating.value = true\n}\n\nfunction onDialogCloseAutoFocus(e: Event): void {\n  e.preventDefault()\n  main.value?.$el.focus({ preventScroll: true })\n}\n\n// Reka's typed props stop at its own; ARIA and listeners go through bound objects.\nconst mainAttrs = computed(() => ({\n  'aria-pressed': String(active.value),\n  'aria-label': SIGNATURE_LABELS.sign,\n  title: SIGNATURE_LABELS.sign,\n  onClick: onMain,\n}))\nconst triggerAttrs = {\n  'aria-label': SIGNATURE_LABELS.trigger,\n  title: SIGNATURE_LABELS.trigger,\n  'aria-haspopup': 'menu' as const,\n  onKeydown: onTriggerKeydown,\n}\nconst menuAttrs = { 'aria-label': SIGNATURE_LABELS.menu }\nconst innerAttrs = {\n  role: 'menu',\n  'aria-label': SIGNATURE_LABELS.menu,\n  onKeydown: (e: KeyboardEvent) => handleMenuKeys(e, e.currentTarget as HTMLElement),\n}\n</script>\n\n<template>\n  <PopoverRoot v-model:open=\"open\">\n    <PopoverAnchor as-child>\n      <div\n        role=\"group\"\n        :aria-label=\"SIGNATURE_LABELS.sign\"\n        class=\"ink-split-button ink-signature-menu\"\n        data-ink-signature-menu\n        v-bind=\"$attrs\"\n      >\n        <ToolbarButton\n          ref=\"main\"\n          class=\"ink-tool-button ink-signature-button\"\n          data-ink-tool-button\n          data-ink-signature-button\n          data-tool=\"signature\"\n          :data-state=\"active ? 'on' : 'off'\"\n          v-bind=\"mainAttrs\"\n        >\n          <slot :active=\"active\"><InkIcon :icon=\"Signature\" /></slot>\n        </ToolbarButton>\n        <ToolbarButton as-child>\n          <PopoverTrigger as-child>\n            <button\n              type=\"button\"\n              class=\"ink-menu-trigger ink-signature-menu-trigger\"\n              data-ink-signature-menu-trigger\n              :data-state=\"open ? 'open' : 'closed'\"\n              v-bind=\"triggerAttrs\"\n            >\n              <InkIcon :icon=\"ChevronDown\" />\n            </button>\n          </PopoverTrigger>\n        </ToolbarButton>\n        <PopoverPortal>\n          <PopoverContent\n            class=\"ink-select-content ink-menu-content\"\n            data-ink-select-content\n            data-ink-menu=\"signature\"\n            side=\"bottom\"\n            align=\"start\"\n            :side-offset=\"4\"\n            :collision-padding=\"8\"\n            v-bind=\"menuAttrs\"\n            @open-auto-focus=\"onOpenAutoFocus\"\n            @close-auto-focus=\"onCloseAutoFocus\"\n          >\n            <div v-bind=\"innerAttrs\">\n              <template v-if=\"model.items.length > 0\">\n                <div\n                  role=\"group\"\n                  :aria-label=\"SIGNATURE_LABELS.saved\"\n                  class=\"ink-signature-list\"\n                  data-ink-menu-columns=\"2\"\n                >\n                  <template v-for=\"(item, row) in model.items\" :key=\"item.id\">\n                    <button\n                      type=\"button\"\n                      role=\"menuitemradio\"\n                      :aria-checked=\"item.checked\"\n                      :aria-label=\"item.label\"\n                      tabindex=\"-1\"\n                      class=\"ink-select-item ink-menu-item ink-signature-item\"\n                      data-ink-select-item\n                      :data-key=\"item.id\"\n                      :data-state=\"item.checked ? 'checked' : 'unchecked'\"\n                      @click=\"choose(item.id)\"\n                    >\n                      <span class=\"ink-signature-preview\" :data-kind=\"item.template.kind\">\n                        <img\n                          v-if=\"item.template.kind === 'image'\"\n                          :src=\"item.template.imagedata\"\n                          alt=\"\"\n                          draggable=\"false\"\n                        />\n                        <svg v-else :viewBox=\"previews[row]?.viewBox\" aria-hidden=\"true\">\n                          <path\n                            v-for=\"(d, i) in previews[row]?.paths ?? []\"\n                            :key=\"i\"\n                            :d=\"d\"\n                            fill=\"currentColor\"\n                          />\n                        </svg>\n                      </span>\n                    </button>\n                    <button\n                      type=\"button\"\n                      role=\"menuitem\"\n                      :aria-label=\"item.removeLabel\"\n                      :title=\"item.removeLabel\"\n                      tabindex=\"-1\"\n                      class=\"ink-menu-item ink-signature-remove\"\n                      data-ink-signature-remove\n                      :data-key=\"item.id\"\n                      @click=\"remove(item.id, row)\"\n                    >\n                      <InkIcon :icon=\"Trash2\" :size=\"16\" />\n                    </button>\n                  </template>\n                </div>\n                <div role=\"separator\" class=\"ink-select-separator\" />\n              </template>\n              <button\n                type=\"button\"\n                role=\"menuitem\"\n                tabindex=\"-1\"\n                class=\"ink-select-item ink-menu-item ink-signature-create\"\n                data-ink-select-item\n                data-ink-signature-create\n                @click=\"create\"\n              >\n                <InkIcon :icon=\"Plus\" :size=\"16\" />\n                {{ SIGNATURE_LABELS.create }}\n              </button>\n              <p\n                v-if=\"removeError\"\n                class=\"ink-field-error ink-signature-remove-error\"\n                role=\"alert\"\n                data-ink-signature-remove-error\n              >\n                {{ removeError }}\n              </p>\n            </div>\n          </PopoverContent>\n        </PopoverPortal>\n        <InkSignatureDialog\n          v-model:open=\"creating\"\n          :fonts=\"props.fonts\"\n          @close-auto-focus=\"onDialogCloseAutoFocus\"\n        />\n      </div>\n    </PopoverAnchor>\n  </PopoverRoot>\n</template>\n"],"mappings":""}

package/dist/components/InkSignatureMenu.vue.d.ts

@@ -2,11 +2,11 @@ type __VLS_Props = {
     /** The fonts the dialog's Type tab offers. Default: InkRoot's `signatureFonts`. */
     fonts?: readonly string[] | undefined;
 };
-declare var __VLS_7: {
+declare var __VLS_21: {
     active: boolean;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
+    default?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/InkSignatureMenu.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InkSignatureMenu.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkSignatureMenu.vue"],"names":[],"mappings":"AAoUA,KAAK,WAAW,GAAG;IACjB,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;CACtC,CAAC;AA2cF,QAAA,IAAI,OAAO;;CAAW,CAAC;AACvB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAG/C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"InkSignatureMenu.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkSignatureMenu.vue"],"names":[],"mappings":"AA2UA,KAAK,WAAW,GAAG;IACjB,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;CACtC,CAAC;AA2dF,QAAA,IAAI,QAAQ;;CAAY,CAAC;AACzB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAGhD,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/InkSignatureMenu.vue_vue_type_script_setup_true_lang.js

@@ -4,210 +4,215 @@ import { useTool as n } from "../composables/useTool.js";
 import { useToolOptions as r } from "../composables/useToolOptions.js";
 import i from "./InkIcon.js";
 import ee from "./InkSignatureDialog.js";
-import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as te, createVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, nextTick as ne, normalizeProps as re, openBlock as m, ref as h, renderList as g, renderSlot as ie, toDisplayString as _, unref as v, useTemplateRef as ae, watch as oe, withCtx as y } from "vue";
-import { SIGNATURE_LABELS as b, focusInitialMenuItem as se, handleMenuKeys as ce, menuItems as le, signatureMenuModel as ue, signaturePreview as de } from "@inkbar/core/dom";
-import { PopoverContent as fe, PopoverPortal as pe, PopoverRoot as x, PopoverTrigger as S, ToolbarButton as C } from "reka-ui";
-import { ChevronDown as w, Plus as T, Signature as E, Trash2 as D } from "@inkbar/icons";
+import { Fragment as a, computed as o, createBlock as te, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, guardReactiveProps as ne, mergeProps as p, nextTick as re, normalizeProps as ie, openBlock as m, ref as h, renderList as g, renderSlot as ae, toDisplayString as _, unref as v, useTemplateRef as oe, watch as se, withCtx as y } from "vue";
+import { SIGNATURE_LABELS as b, focusInitialMenuItem as ce, handleMenuKeys as le, menuItems as ue, signatureMenuModel as de, signaturePreview as fe } from "@inkbar/core/dom";
+import { PopoverAnchor as pe, PopoverContent as x, PopoverPortal as S, PopoverRoot as C, PopoverTrigger as w, ToolbarButton as T } from "reka-ui";
+import { ChevronDown as E, Plus as D, Signature as O, Trash2 as k } from "@inkbar/icons";
 //#region src/components/InkSignatureMenu.vue?vue&type=script&setup=true&lang.ts
-var O = ["aria-label"], k = ["data-state"], A = ["aria-label"], j = [
+var A = ["aria-label"], j = ["data-state"], M = ["aria-label"], N = [
 	"aria-checked",
 	"aria-label",
 	"data-key",
 	"data-state",
 	"onClick"
-], M = ["data-kind"], N = ["src"], P = ["viewBox"], F = ["d"], I = [
+], P = ["data-kind"], F = ["src"], I = ["viewBox"], L = ["d"], R = [
 	"aria-label",
 	"title",
 	"data-key",
 	"onClick"
-], L = {
+], z = {
 	key: 1,
 	class: "ink-field-error ink-signature-remove-error",
 	role: "alert",
 	"data-ink-signature-remove-error": ""
-}, R = /*@__PURE__*/ d({
+}, B = /*@__PURE__*/ f({
+	inheritAttrs: !1,
 	__name: "InkSignatureMenu",
 	props: { fonts: {} },
-	setup(d) {
-		let R = d, z = [], { tool: B, setTool: V } = n(), { options: me, setOptions: he } = r("signature"), H = e("InkSignatureMenu"), ge = t(() => H.signatures.value.templates, z), U = t(() => H.signatures.value.removeError, void 0), W = o(() => ue(ge.value, me.value)), G = o(() => B.value === "signature"), K = h(!1), q = h(!1);
-		oe(K, (e) => {
+	setup(f) {
+		let B = f, me = [], { tool: he, setTool: V } = n(), { options: ge, setOptions: _e } = r("signature"), H = e("InkSignatureMenu"), ve = t(() => H.signatures.value.templates, me), U = t(() => H.signatures.value.removeError, void 0), W = o(() => de(ve.value, ge.value)), G = o(() => he.value === "signature"), K = h(!1), q = h(!1);
+		se(K, (e) => {
 			e && H.signatures.value.clearRemoveError();
 		});
-		let J = ae("main"), Y = o(() => W.value.items.map((e) => e.template.kind === "ink" ? de(e.template) : null)), X = !1, Z = !1;
-		function _e(e) {
+		let J = oe("main"), Y = o(() => W.value.items.map((e) => e.template.kind === "ink" ? fe(e.template) : null)), X = !1, Z = !1;
+		function ye(e) {
 			e.key !== "ArrowDown" || e.defaultPrevented || K.value || (e.preventDefault(), X = !0, K.value = !0);
 		}
 		let Q = () => document.querySelector("[data-ink-menu=\"signature\"] [role=\"menu\"]");
-		function ve(e) {
+		function be(e) {
 			e.preventDefault();
 			let t = Q();
-			t && (X ? le(t)[0]?.focus({ preventScroll: !0 }) : se(t)), X = !1;
+			t && (X ? ue(t)[0]?.focus({ preventScroll: !0 }) : ce(t)), X = !1;
 		}
-		function ye(e) {
+		function xe(e) {
 			Z && e.preventDefault(), Z = !1;
 		}
-		function be() {
+		function Se() {
 			W.value.selected ? V("signature") : K.value = !0;
 		}
-		function xe(e) {
-			he({ templateId: e }), V("signature"), K.value = !1;
+		function Ce(e) {
+			_e({ templateId: e }), V("signature"), K.value = !1;
 		}
-		function Se(e, t) {
+		function $(e, t) {
 			H.signatures.value.remove(e).then(async () => {
-				await ne();
+				await re();
 				let e = Q();
 				if (!e) return;
 				let n = e.querySelectorAll(".ink-signature-item");
 				(n[Math.min(t, n.length - 1)] ?? e.querySelector("[data-ink-signature-create]"))?.focus({ preventScroll: !0 });
 			}, () => {});
 		}
-		function Ce() {
+		function we() {
 			Z = !0, K.value = !1, q.value = !0;
 		}
-		function $(e) {
+		function Te(e) {
 			e.preventDefault(), J.value?.$el.focus({ preventScroll: !0 });
 		}
-		let we = o(() => ({
+		let Ee = o(() => ({
 			"aria-pressed": String(G.value),
 			"aria-label": b.sign,
 			title: b.sign,
-			onClick: be
-		})), Te = {
+			onClick: Se
+		})), De = {
 			"aria-label": b.trigger,
 			title: b.trigger,
 			"aria-haspopup": "menu",
-			onKeydown: _e
-		}, Ee = { "aria-label": b.menu }, De = {
+			onKeydown: ye
+		}, Oe = { "aria-label": b.menu }, ke = {
 			role: "menu",
 			"aria-label": b.menu,
-			onKeydown: (e) => ce(e, e.currentTarget)
+			onKeydown: (e) => le(e, e.currentTarget)
 		};
-		return (e, t) => (m(), c("div", {
-			role: "group",
-			"aria-label": v(b).sign,
-			class: "ink-split-button ink-signature-menu",
-			"data-ink-signature-menu": ""
-		}, [
-			u(v(C), p({
-				ref_key: "main",
-				ref: J,
-				class: "ink-tool-button ink-signature-button",
-				"data-ink-tool-button": "",
-				"data-ink-signature-button": "",
-				"data-tool": "signature",
-				"data-state": G.value ? "on" : "off"
-			}, we.value), {
-				default: y(() => [ie(e.$slots, "default", { active: G.value }, () => [u(i, { icon: v(E) }, null, 8, ["icon"])])]),
-				_: 3
-			}, 16, ["data-state"]),
-			u(v(x), {
-				open: K.value,
-				"onUpdate:open": t[0] ||= (e) => K.value = e
-			}, {
-				default: y(() => [u(v(C), { "as-child": "" }, {
-					default: y(() => [u(v(S), { "as-child": "" }, {
-						default: y(() => [l("button", p({
-							type: "button",
-							class: "ink-menu-trigger ink-signature-menu-trigger",
-							"data-ink-signature-menu-trigger": "",
-							"data-state": K.value ? "open" : "closed"
-						}, Te), [u(i, { icon: v(w) }, null, 8, ["icon"])], 16, k)]),
-						_: 1
-					})]),
-					_: 1
-				}), u(v(pe), null, {
-					default: y(() => [u(v(fe), p({
-						class: "ink-select-content ink-menu-content",
-						"data-ink-select-content": "",
-						"data-ink-menu": "signature",
-						side: "bottom",
-						align: "start",
-						"side-offset": 4,
-						"collision-padding": 8
-					}, Ee, {
-						onOpenAutoFocus: ve,
-						onCloseAutoFocus: ye
-					}), {
-						default: y(() => [l("div", re(f(De)), [
-							W.value.items.length > 0 ? (m(), c(a, { key: 0 }, [l("div", {
-								role: "group",
-								"aria-label": v(b).saved,
-								class: "ink-signature-list",
-								"data-ink-menu-columns": "2"
-							}, [(m(!0), c(a, null, g(W.value.items, (e, t) => (m(), c(a, { key: e.id }, [l("button", {
-								type: "button",
-								role: "menuitemradio",
-								"aria-checked": e.checked,
-								"aria-label": e.label,
-								tabindex: "-1",
-								class: "ink-select-item ink-menu-item ink-signature-item",
-								"data-ink-select-item": "",
-								"data-key": e.id,
-								"data-state": e.checked ? "checked" : "unchecked",
-								onClick: (t) => xe(e.id)
-							}, [l("span", {
-								class: "ink-signature-preview",
-								"data-kind": e.template.kind
-							}, [e.template.kind === "image" ? (m(), c("img", {
-								key: 0,
-								src: e.template.imagedata,
-								alt: "",
-								draggable: "false"
-							}, null, 8, N)) : (m(), c("svg", {
-								key: 1,
-								viewBox: Y.value[t]?.viewBox,
-								"aria-hidden": "true"
-							}, [(m(!0), c(a, null, g(Y.value[t]?.paths ?? [], (e, t) => (m(), c("path", {
-								key: t,
-								d: e,
-								fill: "currentColor"
-							}, null, 8, F))), 128))], 8, P))], 8, M)], 8, j), l("button", {
-								type: "button",
-								role: "menuitem",
-								"aria-label": e.removeLabel,
-								title: e.removeLabel,
-								tabindex: "-1",
-								class: "ink-menu-item ink-signature-remove",
-								"data-ink-signature-remove": "",
-								"data-key": e.id,
-								onClick: (n) => Se(e.id, t)
-							}, [u(i, {
-								icon: v(D),
-								size: 16
-							}, null, 8, ["icon"])], 8, I)], 64))), 128))], 8, A), t[2] ||= l("div", {
-								role: "separator",
-								class: "ink-select-separator"
-							}, null, -1)], 64)) : s("", !0),
-							l("button", {
+		return (e, t) => (m(), te(v(C), {
+			open: K.value,
+			"onUpdate:open": t[1] ||= (e) => K.value = e
+		}, {
+			default: y(() => [d(v(pe), { "as-child": "" }, {
+				default: y(() => [l("div", p({
+					role: "group",
+					"aria-label": v(b).sign,
+					class: "ink-split-button ink-signature-menu",
+					"data-ink-signature-menu": ""
+				}, e.$attrs), [
+					d(v(T), p({
+						ref_key: "main",
+						ref: J,
+						class: "ink-tool-button ink-signature-button",
+						"data-ink-tool-button": "",
+						"data-ink-signature-button": "",
+						"data-tool": "signature",
+						"data-state": G.value ? "on" : "off"
+					}, Ee.value), {
+						default: y(() => [ae(e.$slots, "default", { active: G.value }, () => [d(i, { icon: v(O) }, null, 8, ["icon"])])]),
+						_: 3
+					}, 16, ["data-state"]),
+					d(v(T), { "as-child": "" }, {
+						default: y(() => [d(v(w), { "as-child": "" }, {
+							default: y(() => [l("button", p({
 								type: "button",
-								role: "menuitem",
-								tabindex: "-1",
-								class: "ink-select-item ink-menu-item ink-signature-create",
-								"data-ink-select-item": "",
-								"data-ink-signature-create": "",
-								onClick: Ce
-							}, [u(i, {
-								icon: v(T),
-								size: 16
-							}, null, 8, ["icon"]), te(" " + _(v(b).create), 1)]),
-							v(U) ? (m(), c("p", L, _(v(U)), 1)) : s("", !0)
-						], 16)]),
+								class: "ink-menu-trigger ink-signature-menu-trigger",
+								"data-ink-signature-menu-trigger": "",
+								"data-state": K.value ? "open" : "closed"
+							}, De), [d(i, { icon: v(E) }, null, 8, ["icon"])], 16, j)]),
+							_: 1
+						})]),
 						_: 1
-					}, 16)]),
-					_: 1
-				})]),
-				_: 1
-			}, 8, ["open"]),
-			u(ee, {
-				open: q.value,
-				"onUpdate:open": t[1] ||= (e) => q.value = e,
-				fonts: R.fonts,
-				onCloseAutoFocus: $
-			}, null, 8, ["open", "fonts"])
-		], 8, O));
+					}),
+					d(v(S), null, {
+						default: y(() => [d(v(x), p({
+							class: "ink-select-content ink-menu-content",
+							"data-ink-select-content": "",
+							"data-ink-menu": "signature",
+							side: "bottom",
+							align: "start",
+							"side-offset": 4,
+							"collision-padding": 8
+						}, Oe, {
+							onOpenAutoFocus: be,
+							onCloseAutoFocus: xe
+						}), {
+							default: y(() => [l("div", ie(ne(ke)), [
+								W.value.items.length > 0 ? (m(), c(a, { key: 0 }, [l("div", {
+									role: "group",
+									"aria-label": v(b).saved,
+									class: "ink-signature-list",
+									"data-ink-menu-columns": "2"
+								}, [(m(!0), c(a, null, g(W.value.items, (e, t) => (m(), c(a, { key: e.id }, [l("button", {
+									type: "button",
+									role: "menuitemradio",
+									"aria-checked": e.checked,
+									"aria-label": e.label,
+									tabindex: "-1",
+									class: "ink-select-item ink-menu-item ink-signature-item",
+									"data-ink-select-item": "",
+									"data-key": e.id,
+									"data-state": e.checked ? "checked" : "unchecked",
+									onClick: (t) => Ce(e.id)
+								}, [l("span", {
+									class: "ink-signature-preview",
+									"data-kind": e.template.kind
+								}, [e.template.kind === "image" ? (m(), c("img", {
+									key: 0,
+									src: e.template.imagedata,
+									alt: "",
+									draggable: "false"
+								}, null, 8, F)) : (m(), c("svg", {
+									key: 1,
+									viewBox: Y.value[t]?.viewBox,
+									"aria-hidden": "true"
+								}, [(m(!0), c(a, null, g(Y.value[t]?.paths ?? [], (e, t) => (m(), c("path", {
+									key: t,
+									d: e,
+									fill: "currentColor"
+								}, null, 8, L))), 128))], 8, I))], 8, P)], 8, N), l("button", {
+									type: "button",
+									role: "menuitem",
+									"aria-label": e.removeLabel,
+									title: e.removeLabel,
+									tabindex: "-1",
+									class: "ink-menu-item ink-signature-remove",
+									"data-ink-signature-remove": "",
+									"data-key": e.id,
+									onClick: (n) => $(e.id, t)
+								}, [d(i, {
+									icon: v(k),
+									size: 16
+								}, null, 8, ["icon"])], 8, R)], 64))), 128))], 8, M), t[2] ||= l("div", {
+									role: "separator",
+									class: "ink-select-separator"
+								}, null, -1)], 64)) : s("", !0),
+								l("button", {
+									type: "button",
+									role: "menuitem",
+									tabindex: "-1",
+									class: "ink-select-item ink-menu-item ink-signature-create",
+									"data-ink-select-item": "",
+									"data-ink-signature-create": "",
+									onClick: we
+								}, [d(i, {
+									icon: v(D),
+									size: 16
+								}, null, 8, ["icon"]), u(" " + _(v(b).create), 1)]),
+								v(U) ? (m(), c("p", z, _(v(U)), 1)) : s("", !0)
+							], 16)]),
+							_: 1
+						}, 16)]),
+						_: 1
+					}),
+					d(ee, {
+						open: q.value,
+						"onUpdate:open": t[0] ||= (e) => q.value = e,
+						fonts: B.fonts,
+						onCloseAutoFocus: Te
+					}, null, 8, ["open", "fonts"])
+				], 16, A)]),
+				_: 3
+			})]),
+			_: 3
+		}, 8, ["open"]));
 	}
 });
 //#endregion
-export { R as default };
+export { B as default };
 
 //# sourceMappingURL=InkSignatureMenu.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/InkSignatureMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkSignatureMenu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_unref","_createVNode","_mergeProps","_withCtx","_renderSlot","InkIcon","_createElementVNode","_normalizeProps","_guardReactiveProps","_Fragment","_renderList","_createCommentVNode","_createTextVNode","_toDisplayString","InkSignatureDialog","InkIcon_default","InkSignatureDialog_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","InkSignatureMenu_vue_vue_type_script_setup_true_lang_default","props","__props","NO_TEMPLATES","useTool","useToolOptions","ctx","useInkContext","templates","useReadable","removeError","model","computed","signatureMenuModel","options","active","tool","open","ref","creating","isOpen","main","useTemplateRef","previews","item","signaturePreview","focusFirst","toDialog","onTriggerKeydown","panel","onOpenAutoFocus","menu","menuItems","focusInitialMenuItem","onCloseAutoFocus","onMain","setTool","choose","setOptions","id","remove","nextTick","rows","row","create","onDialogCloseAutoFocus","mainAttrs","SIGNATURE_LABELS","triggerAttrs","menuAttrs","innerAttrs","handleMenuKeys","openBlock","createElementBlock","unref","createVNode","ToolbarButton","mergeProps","withCtx","renderSlot","_ctx","Signature","PopoverRoot","_cache","$event","PopoverTrigger","createElementVNode","ChevronDown","PopoverPortal","PopoverContent","normalizeProps","guardReactiveProps","Fragment","renderList","i","Trash2","createCommentVNode","Plus","createTextVNode","toDisplayString"],"sources":["../../src/components/InkSignatureMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A split button for the signature tool. The main part activates the tool with the chosen\n * signature, or opens the menu when none is chosen; the chevron opens the saved signatures as\n * previews, each with a remove button, and \"Create signature\", which opens\n * `InkSignatureDialog`. Choosing a signature switches to the tool with it.\n */\nimport {\n  focusInitialMenuItem,\n  handleMenuKeys,\n  menuItems,\n  SIGNATURE_LABELS,\n  signatureMenuModel,\n  signaturePreview,\n} from '@inkbar/core/dom'\nimport { ChevronDown, Plus, Signature, Trash2 } from '@inkbar/icons'\nimport {\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, nextTick, ref, useTemplateRef, watch } from 'vue'\n\nimport { useTool } from '../composables/useTool'\nimport { useToolOptions } from '../composables/useToolOptions'\nimport { useInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport InkIcon from './InkIcon.vue'\nimport InkSignatureDialog from './InkSignatureDialog.vue'\n\nimport type { SignatureOptions, SignatureTemplate } from '@inkbar/core'\n\nconst props = defineProps<{\n  /** The fonts the dialog's Type tab offers. Default: InkRoot's `signatureFonts`. */\n  fonts?: readonly string[] | undefined\n}>()\n\nconst NO_TEMPLATES: readonly SignatureTemplate[] = []\n\nconst { tool, setTool } = useTool()\nconst { options, setOptions } = useToolOptions<SignatureOptions>('signature')\nconst ctx = useInkContext('InkSignatureMenu')\nconst templates = useReadable(() => ctx.signatures.value.templates, NO_TEMPLATES)\nconst removeError = useReadable(() => ctx.signatures.value.removeError, undefined)\nconst model = computed(() => signatureMenuModel(templates.value, options.value))\nconst active = computed(() => tool.value === 'signature')\nconst open = ref(false)\nconst creating = ref(false)\n// An old removal error is not news when the menu opens again.\nwatch(open, (isOpen) => {\n  if (isOpen) ctx.signatures.value.clearRemoveError()\n})\nconst main = useTemplateRef<{ $el: HTMLElement }>('main')\n\n/** A saved signature drawn small: ink as filled outlines. */\nconst previews = computed(() =>\n  model.value.items.map((item) =>\n    item.template.kind === 'ink' ? signaturePreview(item.template) : null\n  )\n)\n\n/** ArrowDown opens on the first item; a click opens on the checked one. */\nlet focusFirst = false\n/** Set while the menu closes for the dialog, which takes focus instead of the trigger. */\nlet toDialog = false\n\nfunction onTriggerKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'ArrowDown' || e.defaultPrevented || open.value) return\n  e.preventDefault()\n  focusFirst = true\n  open.value = true\n}\n\nconst panel = (): HTMLElement | null =>\n  document.querySelector<HTMLElement>('[data-ink-menu=\"signature\"] [role=\"menu\"]')\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  const menu = panel()\n  if (menu) {\n    if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })\n    else focusInitialMenuItem(menu)\n  }\n  focusFirst = false\n}\n\nfunction onCloseAutoFocus(e: Event): void {\n  if (toDialog) e.preventDefault()\n  toDialog = false\n}\n\nfunction onMain(): void {\n  if (model.value.selected) setTool('signature')\n  else open.value = true\n}\n\nfunction choose(id: string): void {\n  setOptions({ templateId: id })\n  setTool('signature')\n  open.value = false\n}\n\n/** Removes a template; focus moves to the signature now in its row, else \"Create signature\". */\nfunction remove(id: string, row: number): void {\n  ctx.signatures.value.remove(id).then(\n    async () => {\n      await nextTick()\n      const menu = panel()\n      if (!menu) return\n      const rows = menu.querySelectorAll<HTMLElement>('.ink-signature-item')\n      const next =\n        rows[Math.min(row, rows.length - 1)] ??\n        menu.querySelector<HTMLElement>('[data-ink-signature-create]')\n      next?.focus({ preventScroll: true })\n    },\n    () => {\n      // The host's store refused: the signature stays.\n    }\n  )\n}\n\nfunction create(): void {\n  toDialog = true\n  open.value = false\n  creating.value = true\n}\n\nfunction onDialogCloseAutoFocus(e: Event): void {\n  e.preventDefault()\n  main.value?.$el.focus({ preventScroll: true })\n}\n\n// Reka's typed props stop at its own; ARIA and listeners go through bound objects.\nconst mainAttrs = computed(() => ({\n  'aria-pressed': String(active.value),\n  'aria-label': SIGNATURE_LABELS.sign,\n  title: SIGNATURE_LABELS.sign,\n  onClick: onMain,\n}))\nconst triggerAttrs = {\n  'aria-label': SIGNATURE_LABELS.trigger,\n  title: SIGNATURE_LABELS.trigger,\n  'aria-haspopup': 'menu' as const,\n  onKeydown: onTriggerKeydown,\n}\nconst menuAttrs = { 'aria-label': SIGNATURE_LABELS.menu }\nconst innerAttrs = {\n  role: 'menu',\n  'aria-label': SIGNATURE_LABELS.menu,\n  onKeydown: (e: KeyboardEvent) => handleMenuKeys(e, e.currentTarget as HTMLElement),\n}\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    :aria-label=\"SIGNATURE_LABELS.sign\"\n    class=\"ink-split-button ink-signature-menu\"\n    data-ink-signature-menu\n  >\n    <ToolbarButton\n      ref=\"main\"\n      class=\"ink-tool-button ink-signature-button\"\n      data-ink-tool-button\n      data-ink-signature-button\n      data-tool=\"signature\"\n      :data-state=\"active ? 'on' : 'off'\"\n      v-bind=\"mainAttrs\"\n    >\n      <slot :active=\"active\"><InkIcon :icon=\"Signature\" /></slot>\n    </ToolbarButton>\n    <PopoverRoot v-model:open=\"open\">\n      <ToolbarButton as-child>\n        <PopoverTrigger as-child>\n          <button\n            type=\"button\"\n            class=\"ink-menu-trigger ink-signature-menu-trigger\"\n            data-ink-signature-menu-trigger\n            :data-state=\"open ? 'open' : 'closed'\"\n            v-bind=\"triggerAttrs\"\n          >\n            <InkIcon :icon=\"ChevronDown\" />\n          </button>\n        </PopoverTrigger>\n      </ToolbarButton>\n      <PopoverPortal>\n        <PopoverContent\n          class=\"ink-select-content ink-menu-content\"\n          data-ink-select-content\n          data-ink-menu=\"signature\"\n          side=\"bottom\"\n          align=\"start\"\n          :side-offset=\"4\"\n          :collision-padding=\"8\"\n          v-bind=\"menuAttrs\"\n          @open-auto-focus=\"onOpenAutoFocus\"\n          @close-auto-focus=\"onCloseAutoFocus\"\n        >\n          <div v-bind=\"innerAttrs\">\n            <template v-if=\"model.items.length > 0\">\n              <div\n                role=\"group\"\n                :aria-label=\"SIGNATURE_LABELS.saved\"\n                class=\"ink-signature-list\"\n                data-ink-menu-columns=\"2\"\n              >\n                <template v-for=\"(item, row) in model.items\" :key=\"item.id\">\n                  <button\n                    type=\"button\"\n                    role=\"menuitemradio\"\n                    :aria-checked=\"item.checked\"\n                    :aria-label=\"item.label\"\n                    tabindex=\"-1\"\n                    class=\"ink-select-item ink-menu-item ink-signature-item\"\n                    data-ink-select-item\n                    :data-key=\"item.id\"\n                    :data-state=\"item.checked ? 'checked' : 'unchecked'\"\n                    @click=\"choose(item.id)\"\n                  >\n                    <span class=\"ink-signature-preview\" :data-kind=\"item.template.kind\">\n                      <img\n                        v-if=\"item.template.kind === 'image'\"\n                        :src=\"item.template.imagedata\"\n                        alt=\"\"\n                        draggable=\"false\"\n                      />\n                      <svg v-else :viewBox=\"previews[row]?.viewBox\" aria-hidden=\"true\">\n                        <path\n                          v-for=\"(d, i) in previews[row]?.paths ?? []\"\n                          :key=\"i\"\n                          :d=\"d\"\n                          fill=\"currentColor\"\n                        />\n                      </svg>\n                    </span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    role=\"menuitem\"\n                    :aria-label=\"item.removeLabel\"\n                    :title=\"item.removeLabel\"\n                    tabindex=\"-1\"\n                    class=\"ink-menu-item ink-signature-remove\"\n                    data-ink-signature-remove\n                    :data-key=\"item.id\"\n                    @click=\"remove(item.id, row)\"\n                  >\n                    <InkIcon :icon=\"Trash2\" :size=\"16\" />\n                  </button>\n                </template>\n              </div>\n              <div role=\"separator\" class=\"ink-select-separator\" />\n            </template>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              tabindex=\"-1\"\n              class=\"ink-select-item ink-menu-item ink-signature-create\"\n              data-ink-select-item\n              data-ink-signature-create\n              @click=\"create\"\n            >\n              <InkIcon :icon=\"Plus\" :size=\"16\" />\n              {{ SIGNATURE_LABELS.create }}\n            </button>\n            <p\n              v-if=\"removeError\"\n              class=\"ink-field-error ink-signature-remove-error\"\n              role=\"alert\"\n              data-ink-signature-remove-error\n            >\n              {{ removeError }}\n            </p>\n          </div>\n        </PopoverContent>\n      </PopoverPortal>\n    </PopoverRoot>\n    <InkSignatureDialog\n      v-model:open=\"creating\"\n      :fonts=\"props.fonts\"\n      @close-auto-focus=\"onDialogCloseAutoFocus\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCA,IAAM8B,IAAQC,GAKRC,IAA6C,CAAC,GAE9C,EAAE,SAAM,eAAYC,EAAQ,GAC5B,EAAE,aAAS,mBAAeC,EAAiC,WAAW,GACtEC,IAAMC,EAAc,kBAAkB,GACtCC,KAAYC,QAAkBH,EAAI,WAAW,MAAM,WAAWH,CAAY,GAC1EO,IAAcD,QAAkBH,EAAI,WAAW,MAAM,aAAa,KAAA,CAAS,GAC3EK,IAAQC,QAAeC,GAAmBL,GAAU,OAAOM,GAAQ,KAAK,CAAC,GACzEC,IAASH,QAAeI,EAAK,UAAU,WAAW,GAClDC,IAAOC,EAAI,EAAK,GAChBC,IAAWD,EAAI,EAAK;EAE1B,GAAMD,IAAO,MAAW;GACtB,AAAIG,KAAQd,EAAI,WAAW,MAAM,iBAAiB;EACpD,CAAC;EACD,IAAMe,IAAOC,GAAqC,MAAM,GAGlDC,IAAWX,QACfD,EAAM,MAAM,MAAM,KAAK,MACrBa,EAAK,SAAS,SAAS,QAAQC,GAAiBD,EAAK,QAAQ,IAAI,IACnE,CACF,GAGIE,IAAa,IAEbC,IAAW;EAEf,SAASC,GAAiB,GAAwB;GAChD,AAAI,EAAE,QAAQ,eAAe,EAAE,oBAAoBX,EAAK,UACxD,EAAE,eAAe,GACjB,IAAa,IACb,EAAK,QAAQ;EACf;EAEA,IAAMY,UACJ,SAAS,cAA2B,+CAA2C;EAEjF,SAASC,GAAgB,GAAgB;GACvC,EAAE,eAAe;GACjB,IAAMC,IAAOF,EAAM;GAKnB,AAJIE,MACEL,IAAYM,GAAUD,CAAI,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,eAAe,GAAK,CAAC,IAC5DE,GAAqBF,CAAI,IAEhC,IAAa;EACf;EAEA,SAASG,GAAiB,GAAgB;GAExC,AADIP,KAAU,EAAE,eAAe,GAC/B,IAAW;EACb;EAEA,SAASQ,KAAe;GACtB,AAAIxB,EAAM,MAAM,WAAUyB,EAAQ,WAAW,IACxC,EAAK,QAAQ;EACpB;EAEA,SAASC,GAAO,GAAkB;GAGhC,AAFAC,GAAW,EAAE,YAAYC,EAAG,CAAC,GAC7BH,EAAQ,WAAW,GACnB,EAAK,QAAQ;EACf;EAGA,SAASI,GAAO,GAAY,GAAmB;GAC7C,EAAI,WAAW,MAAM,OAAOD,CAAE,CAAC,CAAC,KAC9B,YAAY;IACV,MAAME,GAAS;IACf,IAAMV,IAAOF,EAAM;IACnB,IAAI,CAACE,GAAM;IACX,IAAMW,IAAOX,EAAK,iBAA8B,qBAAqB;IAIrE,CAFEW,EAAK,KAAK,IAAIC,GAAKD,EAAK,SAAS,CAAC,MAClCX,EAAK,cAA2B,6BAA6B,EAAA,EACzD,MAAM,EAAE,eAAe,GAAK,CAAC;GACrC,SACM,CAEN,CACF;EACF;EAEA,SAASa,KAAe;GAGtB,AAFA,IAAW,IACX,EAAK,QAAQ,IACb,EAAS,QAAQ;EACnB;EAEA,SAASC,EAAuB,GAAgB;GAE9C,AADA,EAAE,eAAe,GACjBxB,EAAK,OAAO,IAAI,MAAM,EAAE,eAAe,GAAK,CAAC;EAC/C;EAGA,IAAMyB,KAAYlC,SAAgB;GAChC,gBAAgB,OAAOG,EAAO,KAAK;GACnC,cAAcgC,EAAiB;GAC/B,OAAOA,EAAiB;GACxB,SAASZ;EACX,EAAE,GACIa,KAAe;GACnB,cAAcD,EAAiB;GAC/B,OAAOA,EAAiB;GACxB,iBAAiB;GACjB,WAAWnB;EACb,GACMqB,KAAY,EAAE,cAAcF,EAAiB,KAAK,GAClDG,KAAa;GACjB,MAAM;GACN,cAAcH,EAAiB;GAC/B,YAAY,MAAqBI,GAAe,GAAG,EAAE,aAA4B;EACnF;oBAIEhF,EAAA,GAAAC,EAgIM,OAAA;GA/HJ,MAAK;GACJ,cAAYC,EAAA0E,CAAA,CAAgB,CAAC;GAC9B,OAAM;GACN,2BAAA;;GAEAzE,EAUgBD,EAAAmF,CAAA,GAVhBjF,EAUgB;IATV,SAAA;IAAJ,KAAI8C;IACJ,OAAM;IACN,wBAAA;IACA,6BAAA;IACA,aAAU;IACT,cAAYN,EAAA,QAAM,OAAA;GACX,GAAA+B,GAAA,KAAS,GAAA;IAEjB,SAAAtE,QAA2D,CAA3DC,GAA2DmF,EAAA,QAAA,WAAA,EAApD,QAAQ7C,EAAA,MAAM,SAAsC,CAApCzC,EAA6BI,GAAA,EAAnB,MAAML,EAAAwF,CAAA,EAAS,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;GAElDvF,EAyGcD,EAAAyF,CAAA,GAAA;IAzGO,MAAM7C,EAAA;IAAA,iBAAA,AAAA8C,EAAA,QAAA,MAAA,EAAI,QAAAC;;IAC7B,SAAAxF,QAYgB,CAZhBF,EAYgBD,EAAAmF,CAAA,GAAA,EAZD,YAAA,GAAQ,GAAA;KACrB,SAAAhF,QAUiB,CAVjBF,EAUiBD,EAAA4F,CAAA,GAAA,EAVD,YAAA,GAAQ,GAAA;MACtB,SAAAzF,QAQS,CARTG,EAQS,UARTJ,EAQS;OAPP,MAAK;OACL,OAAM;OACN,mCAAA;OACC,cAAY0C,EAAA,QAAI,SAAA;MACT,GAAA+B,EAAY,GAAA,CAEpB1E,EAA+BI,GAAA,EAArB,MAAML,EAAA8F,CAAA,EAAW,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,GAAA,IAAA5E,CAAA,CAAA,CAAA;;;;IAIjCjB,CAAAA,GAAAA,EA0FgBD,EAAA+F,EAAA,GAAA,MAAA;KAzFd,SAAA5F,QAwFiB,CAxFjBF,EAwFiBD,EAAAgG,EAAA,GAxFjB9F,EAwFiB;MAvFf,OAAM;MACN,2BAAA;MACA,iBAAc;MACd,MAAK;MACL,OAAM;MACL,eAAa;MACb,qBAAmB;KACZ,GAAA0E,IAAS;MACC;MACC;;MAEnB,SAAAzE,QA2EM,CA3ENG,EA2EM,OAAAC,GAAAC,EA3EOqE,EAAU,CAAA,GAAA;OACLvC,EAAA,MAAM,MAAM,SAAM,KAAlCxC,EAAA,GAAAC,EAqDWU,GAAA,EAAA,KAAA,EAAA,GAAA,CApDTH,EAkDM,OAAA;QAjDJ,MAAK;QACJ,cAAYN,EAAA0E,CAAA,CAAgB,CAAC;QAC9B,OAAM;QACN,yBAAsB;OAEtB5E,GAAAA,EAAAA,EAAA,EAAA,GAAAC,EA2CWU,GAAA,MAAAC,EA3CqB4B,EAAA,MAAM,QAApB,GAAM,OAA2ByC,EAAA,GAAAC,EAAAmB,GAAA,EAAA,KAAAhD,EAAK,GAAA,GAAA,CACtD7C,EA4BS,UAAA;QA3BP,MAAK;QACL,MAAK;QACJ,gBAAc6C,EAAK;QACnB,cAAYA,EAAK;QAClB,UAAS;QACT,OAAM;QACN,wBAAA;QACC,YAAUA,EAAK;QACf,cAAYA,EAAK,UAAO,YAAA;QACxB,UAAK,MAAEa,GAAOb,EAAK,EAAE;OAEtB7C,GAAAA,CAAAA,EAeO,QAAA;QAfD,OAAM;QAAyB,aAAW6C,EAAK,SAAS;OAEpD,GAAA,CAAAA,EAAK,SAAS,SAAI,WAD1BrD,EAAA,GAAAC,EAKE,OAAA;;QAHC,KAAKoD,EAAK,SAAS;QACpB,KAAI;QACJ,WAAU;OAEZrD,GAAAA,MAAAA,GAAAA,CAAAA,MAAAA,EAAA,GAAAC,EAOM,OAAA;;QAPO,SAASmD,EAAA,MAASoB,EAAG,EAAG;QAAS,eAAY;OACxDxE,GAAAA,EAAAA,EAAA,EAAA,GAAAC,EAKEU,GAAA,MAAAC,EAJiBwC,EAAA,MAASoB,EAAG,EAAG,SAAK,CAAA,IAA7B,GAAG,OADbxE,EAAA,GAAAC,EAKE,QAAA;QAHC,KAAKsG;QACF;QACJ,MAAK;sBAKb/F,GAAAA,GAAAA,EAAAA,GAAAA,GAAAA,CAAAA,EAAAA,GAAAA,GAAAA,CAAAA,CAAAA,GAAAA,GAAAA,CAAAA,GAAAA,EAYS,UAAA;QAXP,MAAK;QACL,MAAK;QACJ,cAAY6C,EAAK;QACjB,OAAOA,EAAK;QACb,UAAS;QACT,OAAM;QACN,6BAAA;QACC,YAAUA,EAAK;QACf,UAAK,MAAEgB,GAAOhB,EAAK,IAAImB,CAAG;OAE3BrE,GAAAA,CAAAA,EAAqCI,GAAA;QAA3B,MAAML,EAAAsG,CAAA;QAAS,MAAM;2CAIrC,GAAA,GAAA,EAAA,GAAA,GAAAnF,CAAA,GAAA,AAAAuE,EAAA,OAAApF,EAAqD,OAAA;QAAhD,MAAK;QAAY,OAAM;;OAE9BA,EAWS,UAAA;QAVP,MAAK;QACL,MAAK;QACL,UAAS;QACT,OAAM;QACN,wBAAA;QACA,6BAAA;QACC,SAAOiE;OAERtE,GAAAA,CAAAA,EAAmCI,GAAA;QAAzB,MAAML,EAAAwG,CAAA;QAAO,MAAM;OAAM5F,GAAAA,MAAAA,GAAAA,CAAAA,MAAAA,CAAAA,GAAAA,GAAA,MACnCC,EAAGb,EAAA0E,CAAA,CAAgB,CAAC,MAAM,GAAA,CAAA,CAAA,CAAA;OAGpB1E,EAAAqC,CAAA,KADRvC,EAAA,GAAAC,EAOI,KAPJ2B,GAOIb,EADCb,EAAAqC,CAAA,CAAW,GAAA,CAAA,KAAAkE,EAAA,IAAA,EAAA;;;;;;;;GAMxBtG,EAIEa,IAAA;IAHQ,MAAMgC,EAAA;IAAA,iBAAA,AAAA4C,EAAA,QAAA,MAAA,EAAQ,QAAAC;IACrB,OAAO/D,EAAM;IACb,kBAAkB4C"}
+{"version":3,"file":"InkSignatureMenu.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_createElementVNode","_mergeProps","_renderSlot","InkIcon","_normalizeProps","_guardReactiveProps","_createElementBlock","_Fragment","_renderList","_createCommentVNode","_createTextVNode","_toDisplayString","InkSignatureDialog","InkIcon_default","InkSignatureDialog_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","InkSignatureMenu_vue_vue_type_script_setup_true_lang_default","props","__props","NO_TEMPLATES","useTool","useToolOptions","ctx","useInkContext","templates","useReadable","removeError","model","computed","signatureMenuModel","options","active","tool","open","ref","creating","isOpen","main","useTemplateRef","previews","item","signaturePreview","focusFirst","toDialog","onTriggerKeydown","panel","onOpenAutoFocus","menu","menuItems","focusInitialMenuItem","onCloseAutoFocus","onMain","setTool","choose","setOptions","id","remove","nextTick","rows","row","create","onDialogCloseAutoFocus","mainAttrs","SIGNATURE_LABELS","triggerAttrs","menuAttrs","innerAttrs","handleMenuKeys","openBlock","createBlock","unref","PopoverRoot","_cache","$event","withCtx","createVNode","PopoverAnchor","createElementVNode","mergeProps","_ctx","ToolbarButton","renderSlot","Signature","PopoverTrigger","ChevronDown","PopoverPortal","PopoverContent","normalizeProps","guardReactiveProps","createElementBlock","Fragment","renderList","i","Trash2","createCommentVNode","Plus","createTextVNode","toDisplayString"],"sources":["../../src/components/InkSignatureMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A split button for the signature tool. The main part activates the tool with the chosen\n * signature, or opens the menu when none is chosen; the chevron opens the saved signatures as\n * previews, each with a remove button, and \"Create signature\", which opens\n * `InkSignatureDialog`. Choosing a signature switches to the tool with it.\n */\nimport {\n  focusInitialMenuItem,\n  handleMenuKeys,\n  menuItems,\n  SIGNATURE_LABELS,\n  signatureMenuModel,\n  signaturePreview,\n} from '@inkbar/core/dom'\nimport { ChevronDown, Plus, Signature, Trash2 } from '@inkbar/icons'\nimport {\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, nextTick, ref, useTemplateRef, watch } from 'vue'\n\nimport { useTool } from '../composables/useTool'\nimport { useToolOptions } from '../composables/useToolOptions'\nimport { useInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport InkIcon from './InkIcon.vue'\nimport InkSignatureDialog from './InkSignatureDialog.vue'\n\nimport type { SignatureOptions, SignatureTemplate } from '@inkbar/core'\n\ndefineOptions({ inheritAttrs: false })\nconst props = defineProps<{\n  /** The fonts the dialog's Type tab offers. Default: InkRoot's `signatureFonts`. */\n  fonts?: readonly string[] | undefined\n}>()\n\nconst NO_TEMPLATES: readonly SignatureTemplate[] = []\n\nconst { tool, setTool } = useTool()\nconst { options, setOptions } = useToolOptions<SignatureOptions>('signature')\nconst ctx = useInkContext('InkSignatureMenu')\nconst templates = useReadable(() => ctx.signatures.value.templates, NO_TEMPLATES)\nconst removeError = useReadable(() => ctx.signatures.value.removeError, undefined)\nconst model = computed(() => signatureMenuModel(templates.value, options.value))\nconst active = computed(() => tool.value === 'signature')\nconst open = ref(false)\nconst creating = ref(false)\n// An old removal error is not news when the menu opens again.\nwatch(open, (isOpen) => {\n  if (isOpen) ctx.signatures.value.clearRemoveError()\n})\nconst main = useTemplateRef<{ $el: HTMLElement }>('main')\n\n/** A saved signature drawn small: ink as filled outlines. */\nconst previews = computed(() =>\n  model.value.items.map((item) =>\n    item.template.kind === 'ink' ? signaturePreview(item.template) : null\n  )\n)\n\n/** ArrowDown opens on the first item; a click opens on the checked one. */\nlet focusFirst = false\n/** Set while the menu closes for the dialog, which takes focus instead of the trigger. */\nlet toDialog = false\n\nfunction onTriggerKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'ArrowDown' || e.defaultPrevented || open.value) return\n  e.preventDefault()\n  focusFirst = true\n  open.value = true\n}\n\nconst panel = (): HTMLElement | null =>\n  document.querySelector<HTMLElement>('[data-ink-menu=\"signature\"] [role=\"menu\"]')\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  const menu = panel()\n  if (menu) {\n    if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })\n    else focusInitialMenuItem(menu)\n  }\n  focusFirst = false\n}\n\nfunction onCloseAutoFocus(e: Event): void {\n  if (toDialog) e.preventDefault()\n  toDialog = false\n}\n\nfunction onMain(): void {\n  if (model.value.selected) setTool('signature')\n  else open.value = true\n}\n\nfunction choose(id: string): void {\n  setOptions({ templateId: id })\n  setTool('signature')\n  open.value = false\n}\n\n/** Removes a template; focus moves to the signature now in its row, else \"Create signature\". */\nfunction remove(id: string, row: number): void {\n  ctx.signatures.value.remove(id).then(\n    async () => {\n      await nextTick()\n      const menu = panel()\n      if (!menu) return\n      const rows = menu.querySelectorAll<HTMLElement>('.ink-signature-item')\n      const next =\n        rows[Math.min(row, rows.length - 1)] ??\n        menu.querySelector<HTMLElement>('[data-ink-signature-create]')\n      next?.focus({ preventScroll: true })\n    },\n    () => {\n      // The host's store refused: the signature stays.\n    }\n  )\n}\n\nfunction create(): void {\n  toDialog = true\n  open.value = false\n  creating.value = true\n}\n\nfunction onDialogCloseAutoFocus(e: Event): void {\n  e.preventDefault()\n  main.value?.$el.focus({ preventScroll: true })\n}\n\n// Reka's typed props stop at its own; ARIA and listeners go through bound objects.\nconst mainAttrs = computed(() => ({\n  'aria-pressed': String(active.value),\n  'aria-label': SIGNATURE_LABELS.sign,\n  title: SIGNATURE_LABELS.sign,\n  onClick: onMain,\n}))\nconst triggerAttrs = {\n  'aria-label': SIGNATURE_LABELS.trigger,\n  title: SIGNATURE_LABELS.trigger,\n  'aria-haspopup': 'menu' as const,\n  onKeydown: onTriggerKeydown,\n}\nconst menuAttrs = { 'aria-label': SIGNATURE_LABELS.menu }\nconst innerAttrs = {\n  role: 'menu',\n  'aria-label': SIGNATURE_LABELS.menu,\n  onKeydown: (e: KeyboardEvent) => handleMenuKeys(e, e.currentTarget as HTMLElement),\n}\n</script>\n\n<template>\n  <PopoverRoot v-model:open=\"open\">\n    <PopoverAnchor as-child>\n      <div\n        role=\"group\"\n        :aria-label=\"SIGNATURE_LABELS.sign\"\n        class=\"ink-split-button ink-signature-menu\"\n        data-ink-signature-menu\n        v-bind=\"$attrs\"\n      >\n        <ToolbarButton\n          ref=\"main\"\n          class=\"ink-tool-button ink-signature-button\"\n          data-ink-tool-button\n          data-ink-signature-button\n          data-tool=\"signature\"\n          :data-state=\"active ? 'on' : 'off'\"\n          v-bind=\"mainAttrs\"\n        >\n          <slot :active=\"active\"><InkIcon :icon=\"Signature\" /></slot>\n        </ToolbarButton>\n        <ToolbarButton as-child>\n          <PopoverTrigger as-child>\n            <button\n              type=\"button\"\n              class=\"ink-menu-trigger ink-signature-menu-trigger\"\n              data-ink-signature-menu-trigger\n              :data-state=\"open ? 'open' : 'closed'\"\n              v-bind=\"triggerAttrs\"\n            >\n              <InkIcon :icon=\"ChevronDown\" />\n            </button>\n          </PopoverTrigger>\n        </ToolbarButton>\n        <PopoverPortal>\n          <PopoverContent\n            class=\"ink-select-content ink-menu-content\"\n            data-ink-select-content\n            data-ink-menu=\"signature\"\n            side=\"bottom\"\n            align=\"start\"\n            :side-offset=\"4\"\n            :collision-padding=\"8\"\n            v-bind=\"menuAttrs\"\n            @open-auto-focus=\"onOpenAutoFocus\"\n            @close-auto-focus=\"onCloseAutoFocus\"\n          >\n            <div v-bind=\"innerAttrs\">\n              <template v-if=\"model.items.length > 0\">\n                <div\n                  role=\"group\"\n                  :aria-label=\"SIGNATURE_LABELS.saved\"\n                  class=\"ink-signature-list\"\n                  data-ink-menu-columns=\"2\"\n                >\n                  <template v-for=\"(item, row) in model.items\" :key=\"item.id\">\n                    <button\n                      type=\"button\"\n                      role=\"menuitemradio\"\n                      :aria-checked=\"item.checked\"\n                      :aria-label=\"item.label\"\n                      tabindex=\"-1\"\n                      class=\"ink-select-item ink-menu-item ink-signature-item\"\n                      data-ink-select-item\n                      :data-key=\"item.id\"\n                      :data-state=\"item.checked ? 'checked' : 'unchecked'\"\n                      @click=\"choose(item.id)\"\n                    >\n                      <span class=\"ink-signature-preview\" :data-kind=\"item.template.kind\">\n                        <img\n                          v-if=\"item.template.kind === 'image'\"\n                          :src=\"item.template.imagedata\"\n                          alt=\"\"\n                          draggable=\"false\"\n                        />\n                        <svg v-else :viewBox=\"previews[row]?.viewBox\" aria-hidden=\"true\">\n                          <path\n                            v-for=\"(d, i) in previews[row]?.paths ?? []\"\n                            :key=\"i\"\n                            :d=\"d\"\n                            fill=\"currentColor\"\n                          />\n                        </svg>\n                      </span>\n                    </button>\n                    <button\n                      type=\"button\"\n                      role=\"menuitem\"\n                      :aria-label=\"item.removeLabel\"\n                      :title=\"item.removeLabel\"\n                      tabindex=\"-1\"\n                      class=\"ink-menu-item ink-signature-remove\"\n                      data-ink-signature-remove\n                      :data-key=\"item.id\"\n                      @click=\"remove(item.id, row)\"\n                    >\n                      <InkIcon :icon=\"Trash2\" :size=\"16\" />\n                    </button>\n                  </template>\n                </div>\n                <div role=\"separator\" class=\"ink-select-separator\" />\n              </template>\n              <button\n                type=\"button\"\n                role=\"menuitem\"\n                tabindex=\"-1\"\n                class=\"ink-select-item ink-menu-item ink-signature-create\"\n                data-ink-select-item\n                data-ink-signature-create\n                @click=\"create\"\n              >\n                <InkIcon :icon=\"Plus\" :size=\"16\" />\n                {{ SIGNATURE_LABELS.create }}\n              </button>\n              <p\n                v-if=\"removeError\"\n                class=\"ink-field-error ink-signature-remove-error\"\n                role=\"alert\"\n                data-ink-signature-remove-error\n              >\n                {{ removeError }}\n              </p>\n            </div>\n          </PopoverContent>\n        </PopoverPortal>\n        <InkSignatureDialog\n          v-model:open=\"creating\"\n          :fonts=\"props.fonts\"\n          @close-auto-focus=\"onDialogCloseAutoFocus\"\n        />\n      </div>\n    </PopoverAnchor>\n  </PopoverRoot>\n</template>\n"],"mappings":"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"}

package/dist/components/InkViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkViewport.js","names":["_sfc_main","InkViewport_vue_vue_type_script_setup_true_lang_default","InkViewport_default"],"sources":["../../src/components/InkViewport.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * The scroll element is handed to core's `mountViewer`, which builds the viewport, the page\n * layers, the tool controller and the keyboard shortcuts in it; Vue never renders children\n * into it. The engine reports each page host it mounts, and InkPage components rendered here\n * (they render nothing in place) teleport the page-error and custom-annotation slots into them.\n *\n * Two-way zoom and page: the viewport's own changes are reported through the context, and\n * the host's v-model values are applied only when they differ from the viewport's state, so\n * the echo of a reported value does nothing.\n */\nimport { mountViewer } from '@inkbar/core/dom'\nimport {\n  computed,\n  onBeforeUnmount,\n  onBeforeUpdate,\n  onMounted,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { injectInkContext } from '../context'\n\nimport InkPage from './InkPage.vue'\n\nimport type { AnnotationSlotProps } from './annotation-slot'\nimport type { InkError } from '@inkbar/core'\nimport type {\n  LayoutMode,\n  PageMount,\n  ViewerEngine,\n  ViewRotation,\n  ZoomValue,\n} from '@inkbar/core/dom'\n\nconst props = withDefaults(\n  defineProps<{\n    mode?: LayoutMode\n    rotation?: ViewRotation\n    /** Gap between pages, CSS px. */\n    gap?: number\n    /** Pages kept mounted either side of the visible ones. */\n    buffer?: number\n  }>(),\n  { mode: 'continuous', rotation: 0, gap: 16, buffer: 2 }\n)\n\nconst slots = defineSlots<{\n  loading?(): unknown\n  error?(props: { error: InkError }): unknown\n  empty?(): unknown\n  annotation?(props: AnnotationSlotProps): unknown\n  /** Shown inside a page that failed to render. The rest of the document stays usable. */\n  'page-error'?(props: { error: InkError; page: number }): unknown\n}>()\n\nconst ctx = injectInkContext()\nconst scroll = useTemplateRef<HTMLElement>('scroll')\n\ninterface MountedPage {\n  /** The engine build the host belongs to; part of the InkPage key. */\n  build: number\n  page: number\n  host: HTMLElement\n  mount: PageMount\n  error: InkError | null\n  /** Whether the build that mounted the page renders the annotation slot. */\n  custom: boolean\n}\n/** Page hosts, mounts and errors the engine reported; InkPage renders Teleports for them. */\nconst pages = shallowRef<MountedPage[]>([])\n\nconst state = computed(() => ctx.status.value.state)\nconst error = computed<InkError | null>(() =>\n  ctx.status.value.state === 'error' ? ctx.status.value.error : null\n)\n\nconst engine = shallowRef<ViewerEngine | null>(null)\n/**\n * Numbered before each build starts, so the pages a build mounts carry its own number. A\n * rebuild gives each page a new host and mount, so pages from an earlier build must remount,\n * not be reused.\n */\nlet build = 0\n/** Whether the current build renders the annotation slot. */\nlet custom = false\nlet stops: (() => void)[] = []\n/** The zoom and page last reported to the host. */\nlet lastReportedZoom: ZoomValue | undefined\nlet lastReportedPage: number | undefined\n\nfunction teardown(): void {\n  for (const stop of stops) stop()\n  stops = []\n  // Unmounts every page, which empties `pages` through `onPageUnmount`.\n  engine.value?.destroy()\n  engine.value = null\n  if (ctx.viewport.value) ctx.viewport.value = null\n  if (ctx.tools.value) ctx.tools.value = null\n  pages.value = []\n}\n\nfunction rebuild(opts: Parameters<ViewerEngine['rebuild']>[0]): void {\n  const e = engine.value\n  if (!e) return\n  build += 1\n  if (opts.customAnnotations !== undefined) custom = opts.customAnnotations\n  e.rebuild(opts)\n}\n\n// Build for a new document or status; the previous engine is torn down first.\nfunction setup(): void {\n  teardown()\n  lastReportedZoom = undefined\n  lastReportedPage = undefined\n  const doc = ctx.document.value\n  const el = scroll.value\n  if (!doc || !el || ctx.status.value.state !== 'ready') return\n  let first = true\n  build += 1\n  custom = !!slots.annotation\n  engine.value = mountViewer({\n    container: el,\n    document: doc,\n    zoom: ctx.zoomModel.value ?? 'fit-width',\n    ...(ctx.pageModel.value === undefined ? {} : { page: ctx.pageModel.value }),\n    mode: props.mode,\n    rotation: props.rotation,\n    gap: props.gap,\n    buffer: props.buffer,\n    tool: ctx.tool.value,\n    ...(ctx.hostTools.value ? { tools: ctx.hostTools.value } : {}),\n    ...(ctx.toolStyle.value ? { toolStyle: ctx.toolStyle.value } : {}),\n    toolHistory: { batch: (fn) => ctx.history.batch(fn) },\n    toolOptions: ctx.toolOptions,\n    fonts: [...ctx.fonts.value],\n    // Read through, so a new `signatures` store reaches the tool as well as the menus.\n    signatureLibrary: () => ctx.signatures.value,\n    customAnnotations: custom,\n    onActivate: (id) => ctx.setActivated(id),\n    onBuild: (vp, tc) => {\n      ctx.viewport.value = vp\n      ctx.tools.value = tc\n      if (first) {\n        // A new document starts from where the viewport opens (its zoom, on the first page:\n        // `createViewport` always starts at page 0); only later changes are reported, the\n        // restored page among them, since the engine has already scrolled to it.\n        first = false\n        lastReportedZoom = vp.zoom.get()\n        lastReportedPage = 0\n      }\n      for (const stop of stops) stop()\n      const reportZoom = (z: ZoomValue): void => {\n        if (z === lastReportedZoom) return\n        lastReportedZoom = z\n        ctx.reportZoom(z)\n      }\n      const reportPage = (p: number): void => {\n        if (p === lastReportedPage) return\n        lastReportedPage = p\n        ctx.reportPage(p)\n      }\n      stops = [vp.zoom.subscribe(reportZoom), vp.currentPage.subscribe(reportPage)]\n      // Whatever the build restored is reported once; nothing is when it matched.\n      reportZoom(vp.zoom.get())\n      reportPage(vp.currentPage.get())\n    },\n    onPageMount: (page, mount, host) => {\n      pages.value = [...pages.value, { build, page, host, mount, error: null, custom }]\n    },\n    onPageUnmount: (page) => {\n      pages.value = pages.value.filter((p) => p.page !== page)\n    },\n    onPageError: (page, err) => {\n      pages.value = pages.value.map((p) => (p.page === page ? { ...p, error: err } : p))\n    },\n  })\n}\n\nonMounted(() => {\n  watch([() => ctx.document.value, () => ctx.status.value.state], setup, {\n    immediate: true,\n  })\n})\n\nwatch(\n  () => ctx.zoomModel.value,\n  (z: ZoomValue | undefined) => {\n    const vp = engine.value?.viewport\n    if (vp && z !== undefined && z !== vp.zoom.get()) vp.setZoom(z)\n  }\n)\nwatch(\n  () => ctx.pageModel.value,\n  (p) => {\n    const vp = engine.value?.viewport\n    if (!vp || p === undefined || p === lastReportedPage) return\n    if (p !== vp.currentPage.get()) vp.scrollToPage(p)\n  }\n)\nwatch(\n  () => ctx.tool.value,\n  (t) => {\n    const tc = engine.value?.tools\n    if (tc && tc.active.get() !== t) tc.set(t)\n  }\n)\nwatch(\n  () => props.mode,\n  (m) => engine.value?.viewport.setMode(m)\n)\nwatch(\n  () => props.rotation,\n  (r) => engine.value?.viewport.setRotation(r)\n)\n// Gap and buffer are construction options: rebuild for the same document, keeping zoom and page.\n// The slots are already updated when this runs, so it carries the annotation slot too: a slot\n// toggle in the same tick is then recorded here and `onBeforeUpdate` finds nothing left to do.\nwatch([() => props.gap, () => props.buffer], ([gap, buffer]) =>\n  rebuild({ gap, buffer, customAnnotations: !!slots.annotation })\n)\n\n// Slots are not reactive, so a change to whether the annotation slot is given is caught here.\n// `onBeforeUpdate` runs after the new slots are in place and before this render: the rebuild\n// swaps `pages` for the new build's pages synchronously, so the render that follows never pairs\n// the annotation slot with an overlay built without it (or the reverse). The rebuild keeps the\n// scroll position.\nonBeforeUpdate(() => {\n  const next = !!slots.annotation\n  if (engine.value && next !== custom) rebuild({ customAnnotations: next })\n})\n\nonBeforeUnmount(teardown)\n</script>\n\n<template>\n  <div class=\"ink-viewport-root\" data-ink-viewport-root :data-state=\"state\">\n    <div v-if=\"state === 'loading'\" class=\"ink-status\" role=\"status\" aria-live=\"polite\">\n      <slot name=\"loading\">Loading document…</slot>\n    </div>\n    <div v-else-if=\"error\" class=\"ink-status ink-error\" role=\"alert\">\n      <slot name=\"error\" :error=\"error\">\n        <p class=\"ink-error-title\">This document could not be opened.</p>\n        <!-- The message comes from the PDF engine and is not written for readers: it stays\n             off the page, on the code's tooltip. -->\n        <p>\n          <code class=\"ink-error-code\" :title=\"error.message\">{{ error.code }}</code>\n        </p>\n      </slot>\n    </div>\n    <div v-else-if=\"state === 'idle'\" class=\"ink-status ink-empty\">\n      <slot name=\"empty\" />\n    </div>\n    <div\n      ref=\"scroll\"\n      class=\"ink-scroll\"\n      data-ink-scroll\n      tabindex=\"0\"\n      role=\"document\"\n      aria-label=\"Document\"\n    />\n    <InkPage\n      v-for=\"p in pages\"\n      :key=\"`${p.build}:${p.page}`\"\n      :page=\"p.page\"\n      :host=\"p.host\"\n      :mount=\"p.mount\"\n      :error=\"p.error\"\n      :custom-annotations=\"p.custom\"\n    >\n      <template v-if=\"slots.annotation\" #annotation=\"slotProps\">\n        <slot name=\"annotation\" v-bind=\"slotProps\" />\n      </template>\n      <template v-if=\"slots['page-error']\" #page-error=\"slotProps\">\n        <slot name=\"page-error\" v-bind=\"slotProps\" />\n      </template>\n    </InkPage>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InkViewport.js","names":["_sfc_main","InkViewport_vue_vue_type_script_setup_true_lang_default","InkViewport_default"],"sources":["../../src/components/InkViewport.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * The scroll element is handed to core's `mountViewer`, which builds the viewport, the page\n * layers, the tool controller and the keyboard shortcuts in it; Vue never renders children\n * into it. The engine reports each page host it mounts, and InkPage components rendered here\n * (they render nothing in place) teleport the page-error and custom-annotation slots into them.\n *\n * Two-way zoom and page: the viewport's own changes are reported through the context, and\n * the host's v-model values are applied only when they differ from the viewport's state, so\n * the echo of a reported value does nothing.\n */\nimport { mountViewer } from '@inkbar/core/dom'\nimport {\n  computed,\n  onBeforeUnmount,\n  onBeforeUpdate,\n  onMounted,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { injectInkContext } from '../context'\n\nimport InkPage from './InkPage.vue'\n\nimport type { AnnotationSlotProps } from './annotation-slot'\nimport type { InkError } from '@inkbar/core'\nimport type {\n  LayoutMode,\n  PageMount,\n  ToolId,\n  ViewerEngine,\n  ViewRotation,\n  ZoomValue,\n} from '@inkbar/core/dom'\n\nconst props = withDefaults(\n  defineProps<{\n    mode?: LayoutMode\n    rotation?: ViewRotation\n    /** Gap between pages, CSS px. */\n    gap?: number\n    /** Pages kept mounted either side of the visible ones. */\n    buffer?: number\n  }>(),\n  { mode: 'continuous', rotation: 0, gap: 16, buffer: 2 }\n)\n\nconst slots = defineSlots<{\n  loading?(): unknown\n  error?(props: { error: InkError }): unknown\n  empty?(): unknown\n  annotation?(props: AnnotationSlotProps): unknown\n  /** Shown inside a page that failed to render. The rest of the document stays usable. */\n  'page-error'?(props: { error: InkError; page: number }): unknown\n}>()\n\nconst ctx = injectInkContext()\nconst scroll = useTemplateRef<HTMLElement>('scroll')\n\ninterface MountedPage {\n  /** The engine build the host belongs to; part of the InkPage key. */\n  build: number\n  page: number\n  host: HTMLElement\n  mount: PageMount\n  error: InkError | null\n  /** Whether the build that mounted the page renders the annotation slot. */\n  custom: boolean\n}\n/** Page hosts, mounts and errors the engine reported; InkPage renders Teleports for them. */\nconst pages = shallowRef<MountedPage[]>([])\n\nconst state = computed(() => ctx.status.value.state)\nconst error = computed<InkError | null>(() =>\n  ctx.status.value.state === 'error' ? ctx.status.value.error : null\n)\n\nconst engine = shallowRef<ViewerEngine | null>(null)\n/**\n * Numbered before each build starts, so the pages a build mounts carry its own number. A\n * rebuild gives each page a new host and mount, so pages from an earlier build must remount,\n * not be reused.\n */\nlet build = 0\n/** Whether the current build renders the annotation slot. */\nlet custom = false\nlet stops: (() => void)[] = []\n/** The zoom and page last reported to the host. */\nlet lastReportedZoom: ZoomValue | undefined\nlet lastReportedPage: number | undefined\n\nfunction teardown(): void {\n  for (const stop of stops) stop()\n  stops = []\n  // Unmounts every page, which empties `pages` through `onPageUnmount`.\n  engine.value?.destroy()\n  engine.value = null\n  if (ctx.viewport.value) ctx.viewport.value = null\n  if (ctx.tools.value) ctx.tools.value = null\n  pages.value = []\n}\n\nfunction rebuild(opts: Parameters<ViewerEngine['rebuild']>[0]): void {\n  const e = engine.value\n  if (!e) return\n  build += 1\n  if (opts.customAnnotations !== undefined) custom = opts.customAnnotations\n  e.rebuild(opts)\n}\n\n// Build for a new document or status; the previous engine is torn down first.\nfunction setup(): void {\n  teardown()\n  lastReportedZoom = undefined\n  lastReportedPage = undefined\n  const doc = ctx.document.value\n  const el = scroll.value\n  if (!doc || !el || ctx.status.value.state !== 'ready') return\n  let first = true\n  build += 1\n  custom = !!slots.annotation\n  engine.value = mountViewer({\n    container: el,\n    document: doc,\n    zoom: ctx.zoomModel.value ?? 'fit-width',\n    ...(ctx.pageModel.value === undefined ? {} : { page: ctx.pageModel.value }),\n    mode: props.mode,\n    rotation: props.rotation,\n    gap: props.gap,\n    buffer: props.buffer,\n    tool: ctx.tool.value,\n    ...(ctx.hostTools.value ? { tools: ctx.hostTools.value } : {}),\n    // Read through, so the watch below can re-apply a new function without a rebuild.\n    decorateAnnotation: (a) => ctx.decorateAnnotation.value?.(a),\n    ...(ctx.toolStyle.value ? { toolStyle: ctx.toolStyle.value } : {}),\n    toolHistory: { batch: (fn) => ctx.history.batch(fn) },\n    toolOptions: ctx.toolOptions,\n    fonts: [...ctx.fonts.value],\n    // Read through, so a new `signatures` store reaches the tool as well as the menus.\n    signatureLibrary: () => ctx.signatures.value,\n    customAnnotations: custom,\n    onActivate: (id) => ctx.setActivated(id),\n    onBuild: (vp, tc) => {\n      ctx.viewport.value = vp\n      ctx.tools.value = tc\n      if (first) {\n        // A new document starts from where the viewport opens (its zoom, on the first page:\n        // `createViewport` always starts at page 0); only later changes are reported, the\n        // restored page among them, since the engine has already scrolled to it.\n        first = false\n        lastReportedZoom = vp.zoom.get()\n        lastReportedPage = 0\n      }\n      for (const stop of stops) stop()\n      const reportZoom = (z: ZoomValue): void => {\n        if (z === lastReportedZoom) return\n        lastReportedZoom = z\n        ctx.reportZoom(z)\n      }\n      const reportPage = (p: number): void => {\n        if (p === lastReportedPage) return\n        lastReportedPage = p\n        ctx.reportPage(p)\n      }\n      // A tool that switches itself (a one-shot tool once used) is reported as a pick.\n      const followTool = (id: ToolId): void => {\n        if (id !== ctx.tool.value) ctx.setTool(id)\n      }\n      stops = [\n        vp.zoom.subscribe(reportZoom),\n        vp.currentPage.subscribe(reportPage),\n        tc.active.subscribe(followTool),\n      ]\n      // Whatever the build restored is reported once; nothing is when it matched.\n      reportZoom(vp.zoom.get())\n      reportPage(vp.currentPage.get())\n    },\n    onPageMount: (page, mount, host) => {\n      pages.value = [...pages.value, { build, page, host, mount, error: null, custom }]\n    },\n    onPageUnmount: (page) => {\n      pages.value = pages.value.filter((p) => p.page !== page)\n    },\n    onPageError: (page, err) => {\n      pages.value = pages.value.map((p) => (p.page === page ? { ...p, error: err } : p))\n    },\n  })\n}\n\nonMounted(() => {\n  watch([() => ctx.document.value, () => ctx.status.value.state], setup, {\n    immediate: true,\n  })\n})\n\n// A new decorateAnnotation re-applies to the mounted annotation elements at once.\nwatch(\n  () => ctx.decorateAnnotation.value,\n  () => engine.value?.redecorate()\n)\nwatch(\n  () => ctx.zoomModel.value,\n  (z: ZoomValue | undefined) => {\n    const vp = engine.value?.viewport\n    if (vp && z !== undefined && z !== vp.zoom.get()) vp.setZoom(z)\n  }\n)\nwatch(\n  () => ctx.pageModel.value,\n  (p) => {\n    const vp = engine.value?.viewport\n    if (!vp || p === undefined || p === lastReportedPage) return\n    if (p !== vp.currentPage.get()) vp.scrollToPage(p)\n  }\n)\nwatch(\n  () => ctx.tool.value,\n  (t) => {\n    const tc = engine.value?.tools\n    if (tc && tc.active.get() !== t) tc.set(t)\n  }\n)\nwatch(\n  () => props.mode,\n  (m) => engine.value?.viewport.setMode(m)\n)\nwatch(\n  () => props.rotation,\n  (r) => engine.value?.viewport.setRotation(r)\n)\n// Gap and buffer are construction options: rebuild for the same document, keeping zoom and page.\n// The slots are already updated when this runs, so it carries the annotation slot too: a slot\n// toggle in the same tick is then recorded here and `onBeforeUpdate` finds nothing left to do.\nwatch([() => props.gap, () => props.buffer], ([gap, buffer]) =>\n  rebuild({ gap, buffer, customAnnotations: !!slots.annotation })\n)\n\n// Slots are not reactive, so a change to whether the annotation slot is given is caught here.\n// `onBeforeUpdate` runs after the new slots are in place and before this render: the rebuild\n// swaps `pages` for the new build's pages synchronously, so the render that follows never pairs\n// the annotation slot with an overlay built without it (or the reverse). The rebuild keeps the\n// scroll position.\nonBeforeUpdate(() => {\n  const next = !!slots.annotation\n  if (engine.value && next !== custom) rebuild({ customAnnotations: next })\n})\n\nonBeforeUnmount(teardown)\n</script>\n\n<template>\n  <div class=\"ink-viewport-root\" data-ink-viewport-root :data-state=\"state\">\n    <div v-if=\"state === 'loading'\" class=\"ink-status\" role=\"status\" aria-live=\"polite\">\n      <slot name=\"loading\">Loading document…</slot>\n    </div>\n    <div v-else-if=\"error\" class=\"ink-status ink-error\" role=\"alert\">\n      <slot name=\"error\" :error=\"error\">\n        <p class=\"ink-error-title\">This document could not be opened.</p>\n        <!-- The message comes from the PDF engine and is not written for readers: it stays\n             off the page, on the code's tooltip. -->\n        <p>\n          <code class=\"ink-error-code\" :title=\"error.message\">{{ error.code }}</code>\n        </p>\n      </slot>\n    </div>\n    <div v-else-if=\"state === 'idle'\" class=\"ink-status ink-empty\">\n      <slot name=\"empty\" />\n    </div>\n    <div\n      ref=\"scroll\"\n      class=\"ink-scroll\"\n      data-ink-scroll\n      tabindex=\"0\"\n      role=\"document\"\n      aria-label=\"Document\"\n    />\n    <InkPage\n      v-for=\"p in pages\"\n      :key=\"`${p.build}:${p.page}`\"\n      :page=\"p.page\"\n      :host=\"p.host\"\n      :mount=\"p.mount\"\n      :error=\"p.error\"\n      :custom-annotations=\"p.custom\"\n    >\n      <template v-if=\"slots.annotation\" #annotation=\"slotProps\">\n        <slot name=\"annotation\" v-bind=\"slotProps\" />\n      </template>\n      <template v-if=\"slots['page-error']\" #page-error=\"slotProps\">\n        <slot name=\"page-error\" v-bind=\"slotProps\" />\n      </template>\n    </InkPage>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/InkViewport.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InkViewport.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkViewport.vue"],"names":[],"mappings":"AAmTA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,KAAK,EACV,UAAU,EAGV,YAAY,EAEb,MAAM,kBAAkB,CAAA;AAGzB,KAAK,WAAW,GAAG;IACf,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAC;AAMJ,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,IAAI,OAAO,CAAA;IACnB,KAAK,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAA;IAC3C,KAAK,CAAC,IAAI,OAAO,CAAA;IACjB,UAAU,CAAC,CAAC,KAAK,EAAE,mBAAmB,GAAG,OAAO,CAAA;IAChD,wFAAwF;IACxF,YAAY,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAA;CACjE,CAAC;AA8SF,QAAA,MAAM,UAAU;;;;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"InkViewport.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkViewport.vue"],"names":[],"mappings":"AAmUA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,KAAK,EACV,UAAU,EAIV,YAAY,EAEb,MAAM,kBAAkB,CAAA;AAGzB,KAAK,WAAW,GAAG;IACf,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAC;AAMJ,KAAK,WAAW,GAAG;IACjB,OAAO,CAAC,IAAI,OAAO,CAAA;IACnB,KAAK,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAA;IAC3C,KAAK,CAAC,IAAI,OAAO,CAAA;IACjB,UAAU,CAAC,CAAC,KAAK,EAAE,mBAAmB,GAAG,OAAO,CAAA;IAChD,wFAAwF;IACxF,YAAY,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAA;CACjE,CAAC;AA6TF,QAAA,MAAM,UAAU;;;;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}