@inkbar/vue 0.7.0 → 0.9.0

package/dist/components/InkSignatureDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkSignatureDialog.js","names":["_sfc_main","InkSignatureDialog_vue_vue_type_script_setup_true_lang_default","InkSignatureDialog_default"],"sources":["../../src/components/InkSignatureDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * \"Create signature\": a modal with Draw, Type and Image tabs. Draw is a pad with the draw\n * tool's renderer; Type sets a name in one of the host's handwriting fonts; Image takes a PNG\n * or JPEG scan. Save stores the template through InkRoot's signature store and selects it for\n * the `signature` tool. Escape, Cancel or a press outside closes it.\n */\nimport { SIGNATURE_LABELS } from '@inkbar/core/dom'\nimport {\n  DialogContent,\n  DialogOverlay,\n  DialogPortal,\n  DialogRoot,\n  DialogTitle,\n} from 'reka-ui'\n\nimport SignatureForm from './SignatureForm.vue'\n\nimport type { SignatureTemplate } from '@inkbar/core'\n\nconst props = defineProps<{\n  /** The fonts the Type tab offers. Default: InkRoot's `signatureFonts`. */\n  fonts?: readonly string[] | undefined\n}>()\nconst open = defineModel<boolean>('open', { default: false })\nconst emit = defineEmits<{\n  /** The new template, once saved and selected. */\n  save: [template: SignatureTemplate]\n  /** Reka's close auto-focus; prevent it to place focus yourself. */\n  closeAutoFocus: [event: Event]\n}>()\n\n// Reka's typed props stop at its own; ARIA goes through a bound object. No description: the\n// title says it all.\nconst contentAttrs = { 'aria-modal': 'true', 'aria-describedby': undefined }\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  ;(e.target as HTMLElement | null)\n    ?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]')\n    ?.focus({ preventScroll: true })\n}\n</script>\n\n<template>\n  <DialogRoot v-model:open=\"open\">\n    <DialogPortal>\n      <DialogOverlay class=\"ink-dialog-overlay\" data-ink-dialog-overlay />\n      <DialogContent\n        class=\"ink-dialog ink-signature-dialog\"\n        data-ink-signature-dialog\n        v-bind=\"contentAttrs\"\n        @open-auto-focus=\"onOpenAutoFocus\"\n        @close-auto-focus=\"emit('closeAutoFocus', $event)\"\n      >\n        <DialogTitle class=\"ink-dialog-title\">{{ SIGNATURE_LABELS.dialog }}</DialogTitle>\n        <SignatureForm\n          :fonts=\"props.fonts\"\n          @saved=\"emit('save', $event)\"\n          @close=\"open = false\"\n        />\n      </DialogContent>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InkSignatureDialog.js","names":["_sfc_main","InkSignatureDialog_vue_vue_type_script_setup_true_lang_default","InkSignatureDialog_default"],"sources":["../../src/components/InkSignatureDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * \"Create signature\": a modal with Draw, Type and Image tabs. Draw is a pad with the draw\n * tool's renderer; Type sets a name in one of the host's handwriting fonts; Image takes a PNG\n * or JPEG scan. Save stores the template through InkRoot's signature store and, unless `select`\n * is false or no `signature` tool is registered, selects it for that tool. Escape, Cancel or a\n * press outside closes it.\n */\nimport { SIGNATURE_LABELS } from '@inkbar/core/dom'\nimport {\n  DialogContent,\n  DialogOverlay,\n  DialogPortal,\n  DialogRoot,\n  DialogTitle,\n} from 'reka-ui'\n\nimport SignatureForm from './SignatureForm.vue'\n\nimport type { SignatureTemplate } from '@inkbar/core'\n\nconst props = withDefaults(\n  defineProps<{\n    /** The fonts the Type tab offers. Default: InkRoot's `signatureFonts`. */\n    fonts?: readonly string[] | undefined\n    /**\n     * Whether saving selects the new signature for the `signature` tool, when one is\n     * registered. False leaves the tool alone, for a dialog that signs a field with it through\n     * `save`.\n     */\n    select?: boolean\n  }>(),\n  { fonts: undefined, select: true }\n)\nconst open = defineModel<boolean>('open', { default: false })\nconst emit = defineEmits<{\n  /** The new template, once saved (and selected, with `select`). */\n  save: [template: SignatureTemplate]\n  /** Reka's close auto-focus; prevent it to place focus yourself. */\n  closeAutoFocus: [event: Event]\n}>()\n\n// Reka's typed props stop at its own; ARIA goes through a bound object. No description: the\n// title says it all.\nconst contentAttrs = { 'aria-modal': 'true', 'aria-describedby': undefined }\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  ;(e.target as HTMLElement | null)\n    ?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]')\n    ?.focus({ preventScroll: true })\n}\n</script>\n\n<template>\n  <DialogRoot v-model:open=\"open\">\n    <DialogPortal>\n      <DialogOverlay class=\"ink-dialog-overlay\" data-ink-dialog-overlay />\n      <DialogContent\n        class=\"ink-dialog ink-signature-dialog\"\n        data-ink-signature-dialog\n        v-bind=\"contentAttrs\"\n        @open-auto-focus=\"onOpenAutoFocus\"\n        @close-auto-focus=\"emit('closeAutoFocus', $event)\"\n      >\n        <DialogTitle class=\"ink-dialog-title\">{{ SIGNATURE_LABELS.dialog }}</DialogTitle>\n        <SignatureForm\n          :fonts=\"props.fonts\"\n          :select=\"props.select\"\n          @saved=\"emit('save', $event)\"\n          @close=\"open = false\"\n        />\n      </DialogContent>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":""}

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

@@ -2,6 +2,12 @@ import { SignatureTemplate } from '@inkbar/core';
 type __VLS_Props = {
     /** The fonts the Type tab offers. Default: InkRoot's `signatureFonts`. */
     fonts?: readonly string[] | undefined;
+    /**
+     * Whether saving selects the new signature for the `signature` tool, when one is
+     * registered. False leaves the tool alone, for a dialog that signs a field with it through
+     * `save`.
+     */
+    select?: boolean;
 };
 type __VLS_ModelProps = {
     'open'?: boolean;
@@ -15,7 +21,10 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {},
     "onUpdate:open"?: (value: boolean) => any;
     onCloseAutoFocus?: (event: Event) => any;
     onSave?: (template: SignatureTemplate) => any;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {
+    select: boolean;
+    fonts: readonly string[] | undefined;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
 //# sourceMappingURL=InkSignatureDialog.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InkSignatureDialog.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkSignatureDialog.vue"],"names":[],"mappings":"AAoFA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAGrD,KAAK,WAAW,GAAG;IACjB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;CACtC,CAAC;AAyBF,KAAK,gBAAgB,GAAG;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAmKxD,QAAA,MAAM,YAAY;;;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"InkSignatureDialog.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkSignatureDialog.vue"],"names":[],"mappings":"AAgGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAGrD,KAAK,WAAW,GAAG;IACf,0EAA0E;IAC1E,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;IACrC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AA4BJ,KAAK,gBAAgB,GAAG;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAOF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAoKxD,QAAA,MAAM,YAAY;;;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/InkSignatureDialog.vue_vue_type_script_setup_true_lang.js

@@ -5,7 +5,13 @@ import { DialogContent as p, DialogOverlay as m, DialogPortal as h, DialogRoot a
 //#region src/components/InkSignatureDialog.vue?vue&type=script&setup=true&lang.ts
 var v = /*@__PURE__*/ i({
 	__name: "InkSignatureDialog",
-	props: /*@__PURE__*/ a({ fonts: {} }, {
+	props: /*@__PURE__*/ a({
+		fonts: { default: void 0 },
+		select: {
+			type: Boolean,
+			default: !0
+		}
+	}, {
 		open: {
 			type: Boolean,
 			default: !1
@@ -41,9 +47,10 @@ var v = /*@__PURE__*/ i({
 						_: 1
 					}), r(e, {
 						fonts: v.fonts,
+						select: v.select,
 						onSaved: a[0] ||= (e) => b("save", e),
 						onClose: a[1] ||= (e) => y.value = !1
-					}, null, 8, ["fonts"])]),
+					}, null, 8, ["fonts", "select"])]),
 					_: 1
 				}, 16)]),
 				_: 1

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

@@ -1 +1 @@
-{"version":3,"file":"InkSignatureDialog.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_mergeProps","_createTextVNode","_toDisplayString","SignatureForm","SignatureForm_default","InkSignatureDialog_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","props","__props","open","useModel","emit","contentAttrs","onOpenAutoFocus","openBlock","createBlock","unref","DialogRoot","_cache","$event","withCtx","createVNode","DialogPortal","DialogOverlay","DialogContent","mergeProps","DialogTitle","createTextVNode","toDisplayString","SIGNATURE_LABELS"],"sources":["../../src/components/InkSignatureDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * \"Create signature\": a modal with Draw, Type and Image tabs. Draw is a pad with the draw\n * tool's renderer; Type sets a name in one of the host's handwriting fonts; Image takes a PNG\n * or JPEG scan. Save stores the template through InkRoot's signature store and selects it for\n * the `signature` tool. Escape, Cancel or a press outside closes it.\n */\nimport { SIGNATURE_LABELS } from '@inkbar/core/dom'\nimport {\n  DialogContent,\n  DialogOverlay,\n  DialogPortal,\n  DialogRoot,\n  DialogTitle,\n} from 'reka-ui'\n\nimport SignatureForm from './SignatureForm.vue'\n\nimport type { SignatureTemplate } from '@inkbar/core'\n\nconst props = defineProps<{\n  /** The fonts the Type tab offers. Default: InkRoot's `signatureFonts`. */\n  fonts?: readonly string[] | undefined\n}>()\nconst open = defineModel<boolean>('open', { default: false })\nconst emit = defineEmits<{\n  /** The new template, once saved and selected. */\n  save: [template: SignatureTemplate]\n  /** Reka's close auto-focus; prevent it to place focus yourself. */\n  closeAutoFocus: [event: Event]\n}>()\n\n// Reka's typed props stop at its own; ARIA goes through a bound object. No description: the\n// title says it all.\nconst contentAttrs = { 'aria-modal': 'true', 'aria-describedby': undefined }\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  ;(e.target as HTMLElement | null)\n    ?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]')\n    ?.focus({ preventScroll: true })\n}\n</script>\n\n<template>\n  <DialogRoot v-model:open=\"open\">\n    <DialogPortal>\n      <DialogOverlay class=\"ink-dialog-overlay\" data-ink-dialog-overlay />\n      <DialogContent\n        class=\"ink-dialog ink-signature-dialog\"\n        data-ink-signature-dialog\n        v-bind=\"contentAttrs\"\n        @open-auto-focus=\"onOpenAutoFocus\"\n        @close-auto-focus=\"emit('closeAutoFocus', $event)\"\n      >\n        <DialogTitle class=\"ink-dialog-title\">{{ SIGNATURE_LABELS.dialog }}</DialogTitle>\n        <SignatureForm\n          :fonts=\"props.fonts\"\n          @saved=\"emit('save', $event)\"\n          @close=\"open = false\"\n        />\n      </DialogContent>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAoBA,IAAMe,IAAQC,GAIRC,IAAOjB,EAAoBgB,GAAC,MAA0B,GACtDG,IAAOL,GASPM,IAAe;GAAE,cAAc;GAAQ,oBAAoB,KAAA;EAAU;EAE3E,SAASC,EAAgB,GAAgB;GAEtC,AADD,EAAE,eAAe,GAChB,EAAG,QACA,cAA2B,wCAAoC,CAAA,EAC/D,MAAM,EAAE,eAAe,GAAK,CAAC;EACnC;oBAIEpB,EAAA,GAAAC,EAkBaC,EAAAsB,CAAA,GAAA;GAlBO,MAAMR,EAAA;GAAA,iBAAA,AAAAS,EAAA,QAAA,MAAA,EAAI,QAAAC;;GAC5B,SAAAvB,QAgBe,CAhBfC,EAgBeF,EAAA2B,CAAA,GAAA,MAAA;IAfb,SAAA1B,QAAoE,CAApEC,EAAoEF,EAAA4B,CAAA,GAAA;KAArD,OAAM;KAAqB,2BAAA;IAC1C1B,CAAAA,GAAAA,EAagBF,EAAA6B,CAAA,GAbhB1B,EAagB;KAZd,OAAM;KACN,6BAAA;IACQ,GAAAc,GAAY;KACF;KACjB,kBAAgB,AAAAM,EAAA,QAAA,MAAEP,EAAI,kBAAmBQ,CAAM;;KAEhD,SAAAvB,QAAiF,CAAjFC,EAAiFF,EAAA+B,CAAA,GAAA,EAApE,OAAM,mBAAkB,GAAA;MAAC,SAAA9B,QAA6B,CAA1BG,EAAAC,EAAAL,EAAAkC,CAAA,CAAgB,CAAC,MAAM,GAAA,CAAA,CAAA,CAAA;;KAChEhC,CAAAA,GAAAA,EAIEI,GAAA;MAHC,OAAOM,EAAM;MACb,SAAK,AAAAW,EAAA,QAAA,MAAEP,EAAI,QAASQ,CAAM;MAC1B,SAAK,AAAAD,EAAA,QAAA,MAAE,EAAA,QAAI"}
+{"version":3,"file":"InkSignatureDialog.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_mergeProps","_createTextVNode","_toDisplayString","SignatureForm","SignatureForm_default","InkSignatureDialog_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","props","__props","open","useModel","emit","contentAttrs","onOpenAutoFocus","openBlock","createBlock","unref","DialogRoot","_cache","$event","withCtx","createVNode","DialogPortal","DialogOverlay","DialogContent","mergeProps","DialogTitle","createTextVNode","toDisplayString","SIGNATURE_LABELS"],"sources":["../../src/components/InkSignatureDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * \"Create signature\": a modal with Draw, Type and Image tabs. Draw is a pad with the draw\n * tool's renderer; Type sets a name in one of the host's handwriting fonts; Image takes a PNG\n * or JPEG scan. Save stores the template through InkRoot's signature store and, unless `select`\n * is false or no `signature` tool is registered, selects it for that tool. Escape, Cancel or a\n * press outside closes it.\n */\nimport { SIGNATURE_LABELS } from '@inkbar/core/dom'\nimport {\n  DialogContent,\n  DialogOverlay,\n  DialogPortal,\n  DialogRoot,\n  DialogTitle,\n} from 'reka-ui'\n\nimport SignatureForm from './SignatureForm.vue'\n\nimport type { SignatureTemplate } from '@inkbar/core'\n\nconst props = withDefaults(\n  defineProps<{\n    /** The fonts the Type tab offers. Default: InkRoot's `signatureFonts`. */\n    fonts?: readonly string[] | undefined\n    /**\n     * Whether saving selects the new signature for the `signature` tool, when one is\n     * registered. False leaves the tool alone, for a dialog that signs a field with it through\n     * `save`.\n     */\n    select?: boolean\n  }>(),\n  { fonts: undefined, select: true }\n)\nconst open = defineModel<boolean>('open', { default: false })\nconst emit = defineEmits<{\n  /** The new template, once saved (and selected, with `select`). */\n  save: [template: SignatureTemplate]\n  /** Reka's close auto-focus; prevent it to place focus yourself. */\n  closeAutoFocus: [event: Event]\n}>()\n\n// Reka's typed props stop at its own; ARIA goes through a bound object. No description: the\n// title says it all.\nconst contentAttrs = { 'aria-modal': 'true', 'aria-describedby': undefined }\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  ;(e.target as HTMLElement | null)\n    ?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]')\n    ?.focus({ preventScroll: true })\n}\n</script>\n\n<template>\n  <DialogRoot v-model:open=\"open\">\n    <DialogPortal>\n      <DialogOverlay class=\"ink-dialog-overlay\" data-ink-dialog-overlay />\n      <DialogContent\n        class=\"ink-dialog ink-signature-dialog\"\n        data-ink-signature-dialog\n        v-bind=\"contentAttrs\"\n        @open-auto-focus=\"onOpenAutoFocus\"\n        @close-auto-focus=\"emit('closeAutoFocus', $event)\"\n      >\n        <DialogTitle class=\"ink-dialog-title\">{{ SIGNATURE_LABELS.dialog }}</DialogTitle>\n        <SignatureForm\n          :fonts=\"props.fonts\"\n          :select=\"props.select\"\n          @saved=\"emit('save', $event)\"\n          @close=\"open = false\"\n        />\n      </DialogContent>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAqBA,IAAMe,IAAQC,GAaRC,IAAOjB,EAAoBgB,GAAC,MAA0B,GACtDG,IAAOL,GASPM,IAAe;GAAE,cAAc;GAAQ,oBAAoB,KAAA;EAAU;EAE3E,SAASC,EAAgB,GAAgB;GAEtC,AADD,EAAE,eAAe,GAChB,EAAG,QACA,cAA2B,wCAAoC,CAAA,EAC/D,MAAM,EAAE,eAAe,GAAK,CAAC;EACnC;oBAIEpB,EAAA,GAAAC,EAmBaC,EAAAsB,CAAA,GAAA;GAnBO,MAAMR,EAAA;GAAA,iBAAA,AAAAS,EAAA,QAAA,MAAA,EAAI,QAAAC;;GAC5B,SAAAvB,QAiBe,CAjBfC,EAiBeF,EAAA2B,CAAA,GAAA,MAAA;IAhBb,SAAA1B,QAAoE,CAApEC,EAAoEF,EAAA4B,CAAA,GAAA;KAArD,OAAM;KAAqB,2BAAA;IAC1C1B,CAAAA,GAAAA,EAcgBF,EAAA6B,CAAA,GAdhB1B,EAcgB;KAbd,OAAM;KACN,6BAAA;IACQ,GAAAc,GAAY;KACF;KACjB,kBAAgB,AAAAM,EAAA,QAAA,MAAEP,EAAI,kBAAmBQ,CAAM;;KAEhD,SAAAvB,QAAiF,CAAjFC,EAAiFF,EAAA+B,CAAA,GAAA,EAApE,OAAM,mBAAkB,GAAA;MAAC,SAAA9B,QAA6B,CAA1BG,EAAAC,EAAAL,EAAAkC,CAAA,CAAgB,CAAC,MAAM,GAAA,CAAA,CAAA,CAAA;;KAChEhC,CAAAA,GAAAA,EAKEI,GAAA;MAJC,OAAOM,EAAM;MACb,QAAQA,EAAM;MACd,SAAK,AAAAW,EAAA,QAAA,MAAEP,EAAI,QAASQ,CAAM;MAC1B,SAAK,AAAAD,EAAA,QAAA,MAAE,EAAA,QAAI"}

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  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":""}
+{"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  menuItems,\n  SIGNATURE_LABELS,\n  signatureMenuModel,\n} from '@inkbar/core/dom'\nimport { ChevronDown, Signature } from '@inkbar/icons'\nimport {\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, ref, useTemplateRef, watch } from 'vue'\n\nimport { useRegisteredTool } from '../composables/useRegisteredTool'\nimport { useTool } from '../composables/useTool'\nimport { useToolOptionsWhile } from '../composables/useToolOptions'\nimport { useInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport InkIcon from './InkIcon.vue'\nimport InkSignatureDialog from './InkSignatureDialog.vue'\nimport SignatureMenuPanel from './SignatureMenuPanel.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()\n// Nothing renders while no `signature` tool is registered.\nconst registered = useRegisteredTool('signature')\nconst { options, setOptions } = useToolOptionsWhile<SignatureOptions>(\n  'signature',\n  registered\n)\nconst ctx = useInkContext('InkSignatureMenu')\nconst templates = useReadable(() => ctx.signatures.value.templates, NO_TEMPLATES)\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/** 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\n// Not a signature field's menu, which shares the attribute.\nconst panel = (): HTMLElement | null =>\n  document.querySelector<HTMLElement>(\n    '[data-ink-menu=\"signature\"]:not([data-ink-sign-field-menu]) [role=\"menu\"]'\n  )\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\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 }\n</script>\n\n<template>\n  <PopoverRoot v-if=\"registered\" 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            <SignatureMenuPanel\n              :items=\"model.items\"\n              @choose=\"choose($event.id)\"\n              @create=\"create\"\n            />\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.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"InkSignatureMenu.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkSignatureMenu.vue"],"names":[],"mappings":"AA4OA,KAAK,WAAW,GAAG;IACjB,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;CACtC,CAAC;AAkWF,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

@@ -1,100 +1,74 @@
 import { useInkContext as e } from "../context.js";
-import { useReadable as t } from "../use-readable.js";
-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, 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";
+import { useRegisteredTool as t } from "../composables/useRegisteredTool.js";
+import { useReadable as n } from "../use-readable.js";
+import { useTool as r } from "../composables/useTool.js";
+import { useToolOptionsWhile as i } from "../composables/useToolOptions.js";
+import a from "./InkSignatureDialog.js";
+import o from "./InkIcon.js";
+import s from "./SignatureMenuPanel.js";
+import { computed as c, createBlock as l, createCommentVNode as u, createElementVNode as d, createVNode as f, defineComponent as p, mergeProps as m, openBlock as h, ref as g, renderSlot as _, unref as v, useTemplateRef as y, watch as b, withCtx as x } from "vue";
+import { SIGNATURE_LABELS as S, focusInitialMenuItem as C, menuItems as w, signatureMenuModel as T } from "@inkbar/core/dom";
+import { PopoverAnchor as E, PopoverContent as D, PopoverPortal as O, PopoverRoot as k, PopoverTrigger as A, ToolbarButton as j } from "reka-ui";
+import { ChevronDown as M, Signature as N } from "@inkbar/icons";
 //#region src/components/InkSignatureMenu.vue?vue&type=script&setup=true&lang.ts
-var A = ["aria-label"], j = ["data-state"], M = ["aria-label"], N = [
-	"aria-checked",
-	"aria-label",
-	"data-key",
-	"data-state",
-	"onClick"
-], P = ["data-kind"], F = ["src"], I = ["viewBox"], L = ["d"], R = [
-	"aria-label",
-	"title",
-	"data-key",
-	"onClick"
-], z = {
-	key: 1,
-	class: "ink-field-error ink-signature-remove-error",
-	role: "alert",
-	"data-ink-signature-remove-error": ""
-}, B = /*@__PURE__*/ f({
+var P = ["aria-label"], F = ["data-state"], I = /*@__PURE__*/ p({
 	inheritAttrs: !1,
 	__name: "InkSignatureMenu",
 	props: { fonts: {} },
-	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) => {
+	setup(p) {
+		let I = p, L = [], { tool: R, setTool: z } = r(), B = t("signature"), { options: ee, setOptions: V } = i("signature", B), H = e("InkSignatureMenu"), U = n(() => H.signatures.value.templates, L), W = c(() => T(U.value, ee.value)), G = c(() => R.value === "signature"), K = g(!1), q = g(!1);
+		b(K, (e) => {
 			e && H.signatures.value.clearRemoveError();
 		});
-		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 J = y("main"), Y = !1, X = !1;
+		function Z(e) {
+			e.key !== "ArrowDown" || e.defaultPrevented || K.value || (e.preventDefault(), Y = !0, K.value = !0);
 		}
-		let Q = () => document.querySelector("[data-ink-menu=\"signature\"] [role=\"menu\"]");
-		function be(e) {
+		let Q = () => document.querySelector("[data-ink-menu=\"signature\"]:not([data-ink-sign-field-menu]) [role=\"menu\"]");
+		function $(e) {
 			e.preventDefault();
 			let t = Q();
-			t && (X ? ue(t)[0]?.focus({ preventScroll: !0 }) : ce(t)), X = !1;
+			t && (Y ? w(t)[0]?.focus({ preventScroll: !0 }) : C(t)), Y = !1;
 		}
-		function xe(e) {
-			Z && e.preventDefault(), Z = !1;
+		function te(e) {
+			X && e.preventDefault(), X = !1;
 		}
-		function Se() {
-			W.value.selected ? V("signature") : K.value = !0;
+		function ne() {
+			W.value.selected ? z("signature") : K.value = !0;
 		}
-		function Ce(e) {
-			_e({ templateId: e }), V("signature"), K.value = !1;
+		function re(e) {
+			V({ templateId: e }), z("signature"), K.value = !1;
 		}
-		function $(e, t) {
-			H.signatures.value.remove(e).then(async () => {
-				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 ie() {
+			X = !0, K.value = !1, q.value = !0;
 		}
-		function we() {
-			Z = !0, K.value = !1, q.value = !0;
-		}
-		function Te(e) {
+		function ae(e) {
 			e.preventDefault(), J.value?.$el.focus({ preventScroll: !0 });
 		}
-		let Ee = o(() => ({
+		let oe = c(() => ({
 			"aria-pressed": String(G.value),
-			"aria-label": b.sign,
-			title: b.sign,
-			onClick: Se
-		})), De = {
-			"aria-label": b.trigger,
-			title: b.trigger,
+			"aria-label": S.sign,
+			title: S.sign,
+			onClick: ne
+		})), se = {
+			"aria-label": S.trigger,
+			title: S.trigger,
 			"aria-haspopup": "menu",
-			onKeydown: ye
-		}, Oe = { "aria-label": b.menu }, ke = {
-			role: "menu",
-			"aria-label": b.menu,
-			onKeydown: (e) => le(e, e.currentTarget)
-		};
-		return (e, t) => (m(), te(v(C), {
+			onKeydown: Z
+		}, ce = { "aria-label": S.menu };
+		return (e, t) => v(B) ? (h(), l(v(k), {
+			key: 0,
 			open: K.value,
-			"onUpdate:open": t[1] ||= (e) => K.value = e
+			"onUpdate:open": t[2] ||= (e) => K.value = e
 		}, {
-			default: y(() => [d(v(pe), { "as-child": "" }, {
-				default: y(() => [l("div", p({
+			default: x(() => [f(v(E), { "as-child": "" }, {
+				default: x(() => [d("div", m({
 					role: "group",
-					"aria-label": v(b).sign,
+					"aria-label": v(S).sign,
 					class: "ink-split-button ink-signature-menu",
 					"data-ink-signature-menu": ""
 				}, e.$attrs), [
-					d(v(T), p({
+					f(v(j), m({
 						ref_key: "main",
 						ref: J,
 						class: "ink-tool-button ink-signature-button",
@@ -102,24 +76,24 @@ var A = ["aria-label"], j = ["data-state"], M = ["aria-label"], N = [
 						"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"])])]),
+					}, oe.value), {
+						default: x(() => [_(e.$slots, "default", { active: G.value }, () => [f(o, { icon: v(N) }, null, 8, ["icon"])])]),
 						_: 3
 					}, 16, ["data-state"]),
-					d(v(T), { "as-child": "" }, {
-						default: y(() => [d(v(w), { "as-child": "" }, {
-							default: y(() => [l("button", p({
+					f(v(j), { "as-child": "" }, {
+						default: x(() => [f(v(A), { "as-child": "" }, {
+							default: x(() => [d("button", m({
 								type: "button",
 								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)]),
+							}, se), [f(o, { icon: v(M) }, null, 8, ["icon"])], 16, F)]),
 							_: 1
 						})]),
 						_: 1
 					}),
-					d(v(S), null, {
-						default: y(() => [d(v(x), p({
+					f(v(O), null, {
+						default: x(() => [f(v(D), m({
 							class: "ink-select-content ink-menu-content",
 							"data-ink-select-content": "",
 							"data-ink-menu": "signature",
@@ -127,92 +101,33 @@ var A = ["aria-label"], j = ["data-state"], M = ["aria-label"], N = [
 							align: "start",
 							"side-offset": 4,
 							"collision-padding": 8
-						}, Oe, {
-							onOpenAutoFocus: be,
-							onCloseAutoFocus: xe
+						}, ce, {
+							onOpenAutoFocus: $,
+							onCloseAutoFocus: te
 						}), {
-							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)]),
+							default: x(() => [f(s, {
+								items: W.value.items,
+								onChoose: t[0] ||= (e) => re(e.id),
+								onCreate: ie
+							}, null, 8, ["items"])]),
 							_: 1
 						}, 16)]),
 						_: 1
 					}),
-					d(ee, {
+					f(a, {
 						open: q.value,
-						"onUpdate:open": t[0] ||= (e) => q.value = e,
-						fonts: B.fonts,
-						onCloseAutoFocus: Te
+						"onUpdate:open": t[1] ||= (e) => q.value = e,
+						fonts: I.fonts,
+						onCloseAutoFocus: ae
 					}, null, 8, ["open", "fonts"])
-				], 16, A)]),
+				], 16, P)]),
 				_: 3
 			})]),
 			_: 3
-		}, 8, ["open"]));
+		}, 8, ["open"])) : u("", !0);
 	}
 });
 //#endregion
-export { B as default };
+export { I 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":["$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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"}
+{"version":3,"file":"InkSignatureMenu.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_unref","_openBlock","_createBlock","_withCtx","_createVNode","_createElementVNode","_mergeProps","_renderSlot","InkIcon","SignatureMenuPanel","InkSignatureDialog","_createCommentVNode","InkSignatureDialog_default","InkIcon_default","SignatureMenuPanel_default","_hoisted_1","_hoisted_2","InkSignatureMenu_vue_vue_type_script_setup_true_lang_default","props","__props","NO_TEMPLATES","useTool","registered","useRegisteredTool","useToolOptionsWhile","ctx","useInkContext","templates","useReadable","model","computed","signatureMenuModel","options","active","tool","open","ref","creating","isOpen","main","useTemplateRef","focusFirst","toDialog","onTriggerKeydown","panel","onOpenAutoFocus","menu","menuItems","focusInitialMenuItem","onCloseAutoFocus","onMain","setTool","choose","setOptions","id","create","onDialogCloseAutoFocus","mainAttrs","SIGNATURE_LABELS","triggerAttrs","menuAttrs","unref","openBlock","createBlock","PopoverRoot","_cache","$event","withCtx","createVNode","PopoverAnchor","createElementVNode","mergeProps","_ctx","ToolbarButton","renderSlot","Signature","PopoverTrigger","ChevronDown","PopoverPortal","PopoverContent","createCommentVNode"],"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  menuItems,\n  SIGNATURE_LABELS,\n  signatureMenuModel,\n} from '@inkbar/core/dom'\nimport { ChevronDown, Signature } from '@inkbar/icons'\nimport {\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, ref, useTemplateRef, watch } from 'vue'\n\nimport { useRegisteredTool } from '../composables/useRegisteredTool'\nimport { useTool } from '../composables/useTool'\nimport { useToolOptionsWhile } from '../composables/useToolOptions'\nimport { useInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport InkIcon from './InkIcon.vue'\nimport InkSignatureDialog from './InkSignatureDialog.vue'\nimport SignatureMenuPanel from './SignatureMenuPanel.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()\n// Nothing renders while no `signature` tool is registered.\nconst registered = useRegisteredTool('signature')\nconst { options, setOptions } = useToolOptionsWhile<SignatureOptions>(\n  'signature',\n  registered\n)\nconst ctx = useInkContext('InkSignatureMenu')\nconst templates = useReadable(() => ctx.signatures.value.templates, NO_TEMPLATES)\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/** 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\n// Not a signature field's menu, which shares the attribute.\nconst panel = (): HTMLElement | null =>\n  document.querySelector<HTMLElement>(\n    '[data-ink-menu=\"signature\"]:not([data-ink-sign-field-menu]) [role=\"menu\"]'\n  )\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\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 }\n</script>\n\n<template>\n  <PopoverRoot v-if=\"registered\" 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            <SignatureMenuPanel\n              :items=\"model.items\"\n              @choose=\"choose($event.id)\"\n              @create=\"create\"\n            />\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/InkToolButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkToolButton.js","names":["_sfc_main","InkToolButton_vue_vue_type_script_setup_true_lang_default","InkToolButton_default"],"sources":["../../src/components/InkToolButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TOOL_LABELS } from '@inkbar/core/dom'\nimport {\n  Highlighter,\n  MessageSquare,\n  PenLine,\n  PenTool,\n  Signature,\n  Square,\n  SquareDashedMousePointer,\n  TextCursor,\n  Type,\n} from '@inkbar/icons'\nimport { ToolbarButton } from 'reka-ui'\nimport { computed } from 'vue'\n\nimport { useTool } from '../composables/useTool'\nimport { useInkContext } from '../context'\n\nimport InkIcon from './InkIcon.vue'\n\nimport type { ToolId } from '@inkbar/core/dom'\nimport type { IconNode } from '@inkbar/icons'\n\nconst ICONS: Readonly<Partial<Record<ToolId, IconNode>>> = {\n  'select-text': TextCursor,\n  select: SquareDashedMousePointer,\n  highlight: Highlighter,\n  'redact-area': Square,\n  sketch: PenTool,\n  draw: PenLine,\n  note: MessageSquare,\n  freetext: Type,\n  signature: Signature,\n}\n\nconst props = withDefaults(\n  defineProps<{ tool: ToolId; label?: string | undefined; asChild?: boolean }>(),\n  { label: undefined, asChild: false }\n)\n\nconst ctx = useInkContext('InkToolButton')\nconst { tool: current, setTool } = useTool()\nconst active = computed(() => current.value === props.tool)\n/** A host or plugin tool by this id, for the name and icon core has none for. */\nconst own = computed(() =>\n  [...(ctx.hostTools.value ?? []), ...(ctx.pluginHost.value?.tools ?? [])].find(\n    (t) => t.id === props.tool\n  )\n)\n// `label` and the slot win; then core's name and icon; then the tool's own.\nconst name = computed(\n  () => props.label ?? TOOL_LABELS[props.tool] ?? own.value?.label ?? props.tool\n)\nconst icon = computed(() => ICONS[props.tool] ?? own.value?.icon)\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object.\nconst attrs = computed(() => ({\n  'aria-pressed': String(active.value),\n  'aria-label': name.value,\n  title: name.value,\n  onClick: () => setTool(props.tool),\n}))\n</script>\n\n<template>\n  <ToolbarButton\n    :as-child=\"asChild\"\n    class=\"ink-tool-button\"\n    data-ink-tool-button\n    :data-tool=\"tool\"\n    :data-state=\"active ? 'on' : 'off'\"\n    v-bind=\"attrs\"\n  >\n    <slot :active=\"active\" :label=\"name\"><InkIcon v-if=\"icon\" :icon=\"icon\" /></slot>\n  </ToolbarButton>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InkToolButton.js","names":["_sfc_main","InkToolButton_vue_vue_type_script_setup_true_lang_default","InkToolButton_default"],"sources":["../../src/components/InkToolButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TOOL_LABELS, withHostTools } from '@inkbar/core/dom'\nimport { SquareDashedMousePointer, TextCursor } from '@inkbar/icons'\nimport { ToolbarButton } from 'reka-ui'\nimport { computed, mergeProps, useAttrs } from 'vue'\n\nimport { useRegisteredTool } from '../composables/useRegisteredTool'\nimport { useTool } from '../composables/useTool'\nimport { useInkContext } from '../context'\n\nimport InkIcon from './InkIcon.vue'\n\nimport type { ToolId } from '@inkbar/core/dom'\nimport type { IconNode } from '@inkbar/icons'\n\nconst ICONS: Readonly<Partial<Record<ToolId, IconNode>>> = {\n  'select-text': TextCursor,\n  select: SquareDashedMousePointer,\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(\n  defineProps<{ tool: ToolId; label?: string | undefined; asChild?: boolean }>(),\n  { label: undefined, asChild: false }\n)\n\nconst ctx = useInkContext('InkToolButton')\nconst { tool: current, setTool } = useTool()\nconst active = computed(() => current.value === props.tool)\nconst registered = useRegisteredTool(() => props.tool)\n/** The registered tool by this id, for the name and icon core has none for. */\nconst own = computed(() =>\n  withHostTools([\n    ...(ctx.hostTools.value ?? []),\n    ...(ctx.pluginHost.value?.tools ?? []),\n  ]).find((t) => t.id === props.tool)\n)\n// `label` and the slot win; then core's name and icon; then the tool's own.\nconst name = computed(\n  () => props.label ?? TOOL_LABELS[props.tool] ?? own.value?.label ?? props.tool\n)\nconst icon = computed(() => ICONS[props.tool] ?? own.value?.icon)\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object. A tool\n// nobody registered leaves the button disabled, hidden from assistive tech and unnamed.\nconst hostAttrs = useAttrs()\n// A function, not a computed: `useAttrs()` is not reactive, so the render reads it afresh.\nconst bound = () =>\n  registered.value\n    ? mergeProps(\n        {\n          'aria-pressed': String(active.value),\n          'aria-label': name.value,\n          title: name.value,\n          onClick: () => setTool(props.tool),\n        },\n        hostAttrs\n      )\n    : {\n        ...hostAttrs,\n        'aria-hidden': 'true' as const,\n        disabled: true,\n        'aria-pressed': undefined,\n        'aria-label': undefined,\n        title: undefined,\n        onClick: undefined,\n      }\n</script>\n\n<template>\n  <ToolbarButton\n    :as-child=\"asChild\"\n    class=\"ink-tool-button\"\n    data-ink-tool-button\n    :data-tool=\"tool\"\n    :data-state=\"active ? 'on' : 'off'\"\n    v-bind=\"bound()\"\n  >\n    <template v-if=\"registered\">\n      <slot :active=\"active\" :label=\"name\"><InkIcon v-if=\"icon\" :icon=\"icon\" /></slot>\n    </template>\n  </ToolbarButton>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"InkToolButton.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkToolButton.vue"],"names":[],"mappings":"AAkGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAgB9C,KAAK,WAAW,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAkFnF,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;;;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":"InkToolButton.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkToolButton.vue"],"names":[],"mappings":"AAgGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAW9C,KAAK,WAAW,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAyGnF,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;;;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"}