@inkbar/vue 0.8.0 → 0.9.0

package/dist/components/InkShapeMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,86 +1,88 @@
-import { useTool as e } from "../composables/useTool.js";
-import { useToolOptions as t } from "../composables/useToolOptions.js";
-import n from "./InkIcon.js";
-import { Fragment as r, computed as i, createBlock as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, guardReactiveProps as d, mergeProps as f, normalizeProps as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, withCtx as b } from "vue";
-import { SHAPE_COLUMNS as x, SHAPE_ICONS as S, SHAPE_KINDS as C, focusInitialMenuItem as w, handleMenuKeys as T, menuItems as E, shapeMenuModel as D } from "@inkbar/core/dom";
-import { PopoverAnchor as O, PopoverContent as k, PopoverPortal as A, PopoverRoot as j, PopoverTrigger as M, ToolbarButton as N } from "reka-ui";
-import { ChevronDown as P } from "@inkbar/icons";
+import { useRegisteredTool as e } from "../composables/useRegisteredTool.js";
+import { useTool as t } from "../composables/useTool.js";
+import { useToolOptionsWhile as n } from "../composables/useToolOptions.js";
+import r from "./InkIcon.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, guardReactiveProps as p, mergeProps as m, normalizeProps as h, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, withCtx as S } from "vue";
+import { SHAPE_COLUMNS as C, SHAPE_ICONS as w, SHAPE_KINDS as T, focusInitialMenuItem as E, handleMenuKeys as D, menuItems as O, shapeMenuModel as k } from "@inkbar/core/dom";
+import { PopoverAnchor as A, PopoverContent as j, PopoverPortal as M, PopoverRoot as N, PopoverTrigger as P, ToolbarButton as F } from "reka-ui";
+import { ChevronDown as I } from "@inkbar/icons";
 //#region src/components/InkShapeMenu.vue?vue&type=script&setup=true&lang.ts
-var F = ["data-state"], I = ["data-ink-menu-columns"], L = [
+var ee = ["data-state"], L = ["data-ink-menu-columns"], R = [
 	"data-key",
 	"aria-checked",
 	"data-state",
 	"onClick"
-], R = /*@__PURE__*/ u({
+], z = /*@__PURE__*/ f({
 	inheritAttrs: !1,
 	__name: "InkShapeMenu",
-	setup(u) {
-		let { tool: R, setTool: z } = e(), { options: B, setOptions: V } = t("shape"), H = h(!1), U = i(() => D(B.value, C)), W = i(() => R.value === "shape"), G = i(() => S[U.value.kind]), K = !1;
-		function q(e) {
-			e.key !== "ArrowDown" || e.defaultPrevented || H.value || (e.preventDefault(), K = !0, H.value = !0);
+	setup(f) {
+		let { tool: z, setTool: B } = t(), V = e("shape"), { options: H, setOptions: U } = n("shape", V), W = _(!1), G = a(() => k(H.value, T)), K = a(() => z.value === "shape"), q = a(() => w[G.value.kind]), J = !1;
+		function Y(e) {
+			e.key !== "ArrowDown" || e.defaultPrevented || W.value || (e.preventDefault(), J = !0, W.value = !0);
 		}
-		function J(e) {
+		function X(e) {
 			e.preventDefault();
 			let t = document.querySelector("[data-ink-menu=\"shape\"] [role=\"menu\"]");
-			t && (K ? E(t)[0]?.focus({ preventScroll: !0 }) : w(t)), K = !1;
+			t && (J ? O(t)[0]?.focus({ preventScroll: !0 }) : E(t)), J = !1;
 		}
-		function Y(e) {
-			V({ kind: e }), z("shape"), H.value = !1;
+		function Z(e) {
+			U({ kind: e }), B("shape"), W.value = !1;
 		}
-		let X = i(() => ({
-			"aria-pressed": String(W.value),
-			"aria-label": U.value.label,
-			title: U.value.label,
-			onClick: () => z("shape")
-		})), Z = {
+		let Q = a(() => ({
+			"aria-pressed": String(K.value),
+			"aria-label": G.value.label,
+			title: G.value.label,
+			onClick: () => B("shape")
+		})), $ = {
 			"aria-label": "Choose shape",
 			title: "Choose shape",
 			"aria-haspopup": "menu",
-			onKeydown: q
-		}, Q = { "aria-label": "Shapes" }, $ = {
+			onKeydown: Y
+		}, te = { "aria-label": "Shapes" }, ne = {
 			role: "menu",
 			"aria-label": "Shapes",
-			onKeydown: (e) => T(e, e.currentTarget)
+			onKeydown: (e) => D(e, e.currentTarget)
 		};
-		return (e, t) => (m(), a(y(j), {
-			open: H.value,
-			"onUpdate:open": t[0] ||= (e) => H.value = e
+		return (e, t) => x(V) ? (g(), o(x(N), {
+			key: 0,
+			open: W.value,
+			"onUpdate:open": t[0] ||= (e) => W.value = e
 		}, {
-			default: b(() => [l(y(O), { "as-child": "" }, {
-				default: b(() => [s("div", f({
+			default: S(() => [d(x(A), { "as-child": "" }, {
+				default: S(() => [l("div", m({
 					role: "group",
 					"aria-label": "Shape",
 					class: "ink-split-button ink-shape-menu",
 					"data-ink-shape-menu": ""
 				}, e.$attrs), [
-					l(y(N), f({
+					d(x(F), m({
 						class: "ink-tool-button ink-shape-button",
 						"data-ink-tool-button": "",
 						"data-ink-shape-button": "",
 						"data-tool": "shape",
-						"data-kind": U.value.kind,
-						"data-state": W.value ? "on" : "off"
-					}, X.value), {
-						default: b(() => [_(e.$slots, "default", {
-							active: W.value,
-							kind: U.value.kind
-						}, () => [l(n, { icon: G.value }, null, 8, ["icon"])])]),
+						"data-kind": G.value.kind,
+						"data-state": K.value ? "on" : "off"
+					}, Q.value), {
+						default: S(() => [y(e.$slots, "default", {
+							active: K.value,
+							kind: G.value.kind
+						}, () => [d(r, { icon: q.value }, null, 8, ["icon"])])]),
 						_: 3
 					}, 16, ["data-kind", "data-state"]),
-					l(y(N), { "as-child": "" }, {
-						default: b(() => [l(y(M), { "as-child": "" }, {
-							default: b(() => [s("button", f({
+					d(x(F), { "as-child": "" }, {
+						default: S(() => [d(x(P), { "as-child": "" }, {
+							default: S(() => [l("button", m({
 								type: "button",
 								class: "ink-menu-trigger ink-shape-menu-trigger",
 								"data-ink-shape-menu-trigger": "",
-								"data-state": H.value ? "open" : "closed"
-							}, Z), [l(n, { icon: y(P) }, null, 8, ["icon"])], 16, F)]),
+								"data-state": W.value ? "open" : "closed"
+							}, $), [d(r, { icon: x(I) }, null, 8, ["icon"])], 16, ee)]),
 							_: 1
 						})]),
 						_: 1
 					}),
-					l(y(A), null, {
-						default: b(() => [l(y(k), f({
+					d(x(M), null, {
+						default: S(() => [d(x(j), m({
 							class: "ink-select-content ink-menu-content",
 							"data-ink-select-content": "",
 							"data-ink-menu": "shape",
@@ -88,13 +90,13 @@ var F = ["data-state"], I = ["data-ink-menu-columns"], L = [
 							align: "start",
 							"side-offset": 4,
 							"collision-padding": 8
-						}, Q, { onOpenAutoFocus: J }), {
-							default: b(() => [s("div", p(d($)), [s("div", {
+						}, te, { onOpenAutoFocus: X }), {
+							default: S(() => [l("div", h(p(ne)), [l("div", {
 								role: "group",
 								"aria-label": "Shapes",
 								class: "ink-shape-grid",
-								"data-ink-menu-columns": y(x)
-							}, [(m(!0), o(r, null, g(U.value.items, (e) => (m(), o("button", {
+								"data-ink-menu-columns": x(C)
+							}, [(g(!0), c(i, null, v(G.value.items, (e) => (g(), c("button", {
 								key: e.kind,
 								type: "button",
 								role: "menuitemradio",
@@ -104,11 +106,11 @@ var F = ["data-state"], I = ["data-ink-menu-columns"], L = [
 								"data-key": e.kind,
 								"aria-checked": e.checked,
 								"data-state": e.checked ? "checked" : "unchecked",
-								onClick: (t) => Y(e.kind)
-							}, [l(n, {
-								icon: y(S)[e.kind],
+								onClick: (t) => Z(e.kind)
+							}, [d(r, {
+								icon: x(w)[e.kind],
 								size: 16
-							}, null, 8, ["icon"]), c(" " + v(e.label), 1)], 8, L))), 128))], 8, I)], 16)]),
+							}, null, 8, ["icon"]), u(" " + b(e.label), 1)], 8, R))), 128))], 8, L)], 16)]),
 							_: 1
 						}, 16)]),
 						_: 1
@@ -117,10 +119,10 @@ var F = ["data-state"], I = ["data-ink-menu-columns"], L = [
 				_: 3
 			})]),
 			_: 3
-		}, 8, ["open"]));
+		}, 8, ["open"])) : s("", !0);
 	}
 });
 //#endregion
-export { R as default };
+export { z as default };
 
 //# sourceMappingURL=InkShapeMenu.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InkShapeMenu.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_createElementVNode","_mergeProps","_renderSlot","InkIcon","_normalizeProps","_guardReactiveProps","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","InkIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","InkShapeMenu_vue_vue_type_script_setup_true_lang_default","useTool","useToolOptions","open","ref","model","computed","shapeMenuModel","options","SHAPE_KINDS","active","tool","icon","SHAPE_ICONS","focusFirst","onTriggerKeydown","onOpenAutoFocus","menu","menuItems","focusInitialMenuItem","choose","setOptions","setTool","mainAttrs","triggerAttrs","menuAttrs","innerAttrs","handleMenuKeys","openBlock","createBlock","unref","PopoverRoot","_cache","$event","withCtx","createVNode","PopoverAnchor","createElementVNode","mergeProps","_ctx","ToolbarButton","renderSlot","PopoverTrigger","ChevronDown","PopoverPortal","PopoverContent","normalizeProps","guardReactiveProps","SHAPE_COLUMNS","createElementBlock","Fragment","renderList","item","createTextVNode","toDisplayString"],"sources":["../../src/components/InkShapeMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A split button for the shape tool. The main part activates the tool with the current\n * kind and draws that kind's icon; the chevron opens a two-column grid of kinds. Choosing a\n * kind switches to the tool with it.\n */\nimport {\n  focusInitialMenuItem,\n  handleMenuKeys,\n  menuItems,\n  SHAPE_COLUMNS,\n  SHAPE_ICONS,\n  SHAPE_KINDS,\n  shapeMenuModel,\n  type ShapeKind,\n  type ShapeOptions,\n} from '@inkbar/core/dom'\nimport { ChevronDown } from '@inkbar/icons'\nimport {\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, ref } from 'vue'\n\nimport { useTool } from '../composables/useTool'\nimport { useToolOptions } from '../composables/useToolOptions'\n\nimport InkIcon from './InkIcon.vue'\n\ndefineOptions({ inheritAttrs: false })\nconst { tool, setTool } = useTool()\nconst { options, setOptions } = useToolOptions<ShapeOptions>('shape')\nconst open = ref(false)\n\nconst model = computed(() => shapeMenuModel(options.value, SHAPE_KINDS))\nconst active = computed(() => tool.value === 'shape')\nconst icon = computed(() => SHAPE_ICONS[model.value.kind])\n\n/** ArrowDown opens on the first item; a click opens on the checked one. */\nlet focusFirst = false\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\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  // One menu is open at a time.\n  const menu = document.querySelector('[data-ink-menu=\"shape\"] [role=\"menu\"]')\n  if (menu) {\n    if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })\n    else focusInitialMenuItem(menu)\n  }\n  focusFirst = false\n}\n\nfunction choose(kind: ShapeKind): void {\n  setOptions({ kind })\n  setTool('shape')\n  open.value = false\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': model.value.label,\n  title: model.value.label,\n  onClick: () => setTool('shape'),\n}))\nconst triggerAttrs = {\n  'aria-label': 'Choose shape',\n  title: 'Choose shape',\n  'aria-haspopup': 'menu' as const,\n  onKeydown: onTriggerKeydown,\n}\nconst menuAttrs = { 'aria-label': 'Shapes' }\nconst innerAttrs = {\n  role: 'menu',\n  'aria-label': 'Shapes',\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=\"Shape\"\n        class=\"ink-split-button ink-shape-menu\"\n        data-ink-shape-menu\n        v-bind=\"$attrs\"\n      >\n        <ToolbarButton\n          class=\"ink-tool-button ink-shape-button\"\n          data-ink-tool-button\n          data-ink-shape-button\n          data-tool=\"shape\"\n          :data-kind=\"model.kind\"\n          :data-state=\"active ? 'on' : 'off'\"\n          v-bind=\"mainAttrs\"\n        >\n          <slot :active=\"active\" :kind=\"model.kind\"><InkIcon :icon=\"icon\" /></slot>\n        </ToolbarButton>\n        <ToolbarButton as-child>\n          <PopoverTrigger as-child>\n            <button\n              type=\"button\"\n              class=\"ink-menu-trigger ink-shape-menu-trigger\"\n              data-ink-shape-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=\"shape\"\n            side=\"bottom\"\n            align=\"start\"\n            :side-offset=\"4\"\n            :collision-padding=\"8\"\n            v-bind=\"menuAttrs\"\n            @open-auto-focus=\"onOpenAutoFocus\"\n          >\n            <div v-bind=\"innerAttrs\">\n              <div\n                role=\"group\"\n                aria-label=\"Shapes\"\n                class=\"ink-shape-grid\"\n                :data-ink-menu-columns=\"SHAPE_COLUMNS\"\n              >\n                <button\n                  v-for=\"item in model.items\"\n                  :key=\"item.kind\"\n                  type=\"button\"\n                  role=\"menuitemradio\"\n                  class=\"ink-select-item ink-menu-item ink-shape-item\"\n                  data-ink-select-item\n                  tabindex=\"-1\"\n                  :data-key=\"item.kind\"\n                  :aria-checked=\"item.checked\"\n                  :data-state=\"item.checked ? 'checked' : 'unchecked'\"\n                  @click=\"choose(item.kind)\"\n                >\n                  <InkIcon :icon=\"SHAPE_ICONS[item.kind]\" :size=\"16\" />\n                  {{ item.label }}\n                </button>\n              </div>\n            </div>\n          </PopoverContent>\n        </PopoverPortal>\n      </div>\n    </PopoverAnchor>\n  </PopoverRoot>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"InkShapeMenu.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_unref","_openBlock","_createBlock","_withCtx","_createVNode","_createElementVNode","_mergeProps","_renderSlot","InkIcon","_normalizeProps","_guardReactiveProps","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","_createCommentVNode","InkIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","InkShapeMenu_vue_vue_type_script_setup_true_lang_default","useTool","registered","useRegisteredTool","useToolOptionsWhile","open","ref","model","computed","shapeMenuModel","options","SHAPE_KINDS","active","tool","icon","SHAPE_ICONS","focusFirst","onTriggerKeydown","onOpenAutoFocus","menu","menuItems","focusInitialMenuItem","choose","setOptions","setTool","mainAttrs","triggerAttrs","menuAttrs","innerAttrs","handleMenuKeys","unref","openBlock","createBlock","PopoverRoot","_cache","$event","withCtx","createVNode","PopoverAnchor","createElementVNode","mergeProps","_ctx","ToolbarButton","renderSlot","PopoverTrigger","ChevronDown","PopoverPortal","PopoverContent","normalizeProps","guardReactiveProps","SHAPE_COLUMNS","createElementBlock","Fragment","renderList","item","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../src/components/InkShapeMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A split button for the shape tool. The main part activates the tool with the current\n * kind and draws that kind's icon; the chevron opens a two-column grid of kinds. Choosing a\n * kind switches to the tool with it.\n */\nimport {\n  focusInitialMenuItem,\n  handleMenuKeys,\n  menuItems,\n  SHAPE_COLUMNS,\n  SHAPE_ICONS,\n  SHAPE_KINDS,\n  shapeMenuModel,\n  type ShapeKind,\n  type ShapeOptions,\n} from '@inkbar/core/dom'\nimport { ChevronDown } from '@inkbar/icons'\nimport {\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, ref } from 'vue'\n\nimport { useRegisteredTool } from '../composables/useRegisteredTool'\nimport { useTool } from '../composables/useTool'\nimport { useToolOptionsWhile } from '../composables/useToolOptions'\n\nimport InkIcon from './InkIcon.vue'\n\ndefineOptions({ inheritAttrs: false })\nconst { tool, setTool } = useTool()\n// Nothing renders while no `shape` tool is registered.\nconst registered = useRegisteredTool('shape')\nconst { options, setOptions } = useToolOptionsWhile<ShapeOptions>('shape', registered)\nconst open = ref(false)\n\nconst model = computed(() => shapeMenuModel(options.value, SHAPE_KINDS))\nconst active = computed(() => tool.value === 'shape')\nconst icon = computed(() => SHAPE_ICONS[model.value.kind])\n\n/** ArrowDown opens on the first item; a click opens on the checked one. */\nlet focusFirst = false\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\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  // One menu is open at a time.\n  const menu = document.querySelector('[data-ink-menu=\"shape\"] [role=\"menu\"]')\n  if (menu) {\n    if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })\n    else focusInitialMenuItem(menu)\n  }\n  focusFirst = false\n}\n\nfunction choose(kind: ShapeKind): void {\n  setOptions({ kind })\n  setTool('shape')\n  open.value = false\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': model.value.label,\n  title: model.value.label,\n  onClick: () => setTool('shape'),\n}))\nconst triggerAttrs = {\n  'aria-label': 'Choose shape',\n  title: 'Choose shape',\n  'aria-haspopup': 'menu' as const,\n  onKeydown: onTriggerKeydown,\n}\nconst menuAttrs = { 'aria-label': 'Shapes' }\nconst innerAttrs = {\n  role: 'menu',\n  'aria-label': 'Shapes',\n  onKeydown: (e: KeyboardEvent) => handleMenuKeys(e, e.currentTarget as HTMLElement),\n}\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=\"Shape\"\n        class=\"ink-split-button ink-shape-menu\"\n        data-ink-shape-menu\n        v-bind=\"$attrs\"\n      >\n        <ToolbarButton\n          class=\"ink-tool-button ink-shape-button\"\n          data-ink-tool-button\n          data-ink-shape-button\n          data-tool=\"shape\"\n          :data-kind=\"model.kind\"\n          :data-state=\"active ? 'on' : 'off'\"\n          v-bind=\"mainAttrs\"\n        >\n          <slot :active=\"active\" :kind=\"model.kind\"><InkIcon :icon=\"icon\" /></slot>\n        </ToolbarButton>\n        <ToolbarButton as-child>\n          <PopoverTrigger as-child>\n            <button\n              type=\"button\"\n              class=\"ink-menu-trigger ink-shape-menu-trigger\"\n              data-ink-shape-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=\"shape\"\n            side=\"bottom\"\n            align=\"start\"\n            :side-offset=\"4\"\n            :collision-padding=\"8\"\n            v-bind=\"menuAttrs\"\n            @open-auto-focus=\"onOpenAutoFocus\"\n          >\n            <div v-bind=\"innerAttrs\">\n              <div\n                role=\"group\"\n                aria-label=\"Shapes\"\n                class=\"ink-shape-grid\"\n                :data-ink-menu-columns=\"SHAPE_COLUMNS\"\n              >\n                <button\n                  v-for=\"item in model.items\"\n                  :key=\"item.kind\"\n                  type=\"button\"\n                  role=\"menuitemradio\"\n                  class=\"ink-select-item ink-menu-item ink-shape-item\"\n                  data-ink-select-item\n                  tabindex=\"-1\"\n                  :data-key=\"item.kind\"\n                  :aria-checked=\"item.checked\"\n                  :data-state=\"item.checked ? 'checked' : 'unchecked'\"\n                  @click=\"choose(item.kind)\"\n                >\n                  <InkIcon :icon=\"SHAPE_ICONS[item.kind]\" :size=\"16\" />\n                  {{ item.label }}\n                </button>\n              </div>\n            </div>\n          </PopoverContent>\n        </PopoverPortal>\n      </div>\n    </PopoverAnchor>\n  </PopoverRoot>\n</template>\n"],"mappings":"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"}

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, unless `select`\n * is false, selects it for 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 = 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. False leaves the tool\n     * alone, for a dialog that signs a field with it through `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":""}
+{"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

@@ -3,8 +3,9 @@ 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. False leaves the tool
-     * alone, for a dialog that signs a field with it through `save`.
+     * 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;
 };

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":"AA6FA,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;;;OAGG;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"}
+{"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.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, unless `select`\n * is false, selects it for 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 = 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. False leaves the tool\n     * alone, for a dialog that signs a field with it through `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":";;;;;;;;;;;;;;;;;;;;;;EAoBA,IAAMe,IAAQC,GAYRC,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"}
+{"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  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 { 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'\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()\nconst { options, setOptions } = useToolOptions<SignatureOptions>('signature')\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-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":""}
+{"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":"AAqOA,KAAK,WAAW,GAAG;IACjB,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;CACtC,CAAC;AAsVF,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,97 +1,99 @@
 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 "./InkSignatureDialog.js";
-import a from "./InkIcon.js";
-import o from "./SignatureMenuPanel.js";
-import { computed as s, createBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeProps as f, openBlock as p, ref as m, renderSlot as ee, unref as h, useTemplateRef as g, watch as _, withCtx as v } from "vue";
-import { SIGNATURE_LABELS as y, focusInitialMenuItem as b, menuItems as x, signatureMenuModel as S } from "@inkbar/core/dom";
-import { PopoverAnchor as C, PopoverContent as w, PopoverPortal as T, PopoverRoot as E, PopoverTrigger as D, ToolbarButton as O } from "reka-ui";
-import { ChevronDown as k, Signature as A } 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 j = ["aria-label"], M = ["data-state"], N = /*@__PURE__*/ d({
+var P = ["aria-label"], F = ["data-state"], I = /*@__PURE__*/ p({
 	inheritAttrs: !1,
 	__name: "InkSignatureMenu",
 	props: { fonts: {} },
-	setup(d) {
-		let N = d, P = [], { tool: F, setTool: I } = n(), { options: L, setOptions: R } = r("signature"), z = e("InkSignatureMenu"), B = t(() => z.signatures.value.templates, P), V = s(() => S(B.value, L.value)), H = s(() => F.value === "signature"), U = m(!1), W = m(!1);
-		_(U, (e) => {
-			e && z.signatures.value.clearRemoveError();
+	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 G = g("main"), K = !1, q = !1;
-		function J(e) {
-			e.key !== "ArrowDown" || e.defaultPrevented || U.value || (e.preventDefault(), K = !0, U.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 Y = () => document.querySelector("[data-ink-menu=\"signature\"]:not([data-ink-sign-field-menu]) [role=\"menu\"]");
-		function X(e) {
+		let Q = () => document.querySelector("[data-ink-menu=\"signature\"]:not([data-ink-sign-field-menu]) [role=\"menu\"]");
+		function $(e) {
 			e.preventDefault();
-			let t = Y();
-			t && (K ? x(t)[0]?.focus({ preventScroll: !0 }) : b(t)), K = !1;
+			let t = Q();
+			t && (Y ? w(t)[0]?.focus({ preventScroll: !0 }) : C(t)), Y = !1;
 		}
-		function Z(e) {
-			q && e.preventDefault(), q = !1;
+		function te(e) {
+			X && e.preventDefault(), X = !1;
 		}
-		function Q() {
-			V.value.selected ? I("signature") : U.value = !0;
+		function ne() {
+			W.value.selected ? z("signature") : K.value = !0;
 		}
-		function $(e) {
-			R({ templateId: e }), I("signature"), U.value = !1;
+		function re(e) {
+			V({ templateId: e }), z("signature"), K.value = !1;
 		}
-		function te() {
-			q = !0, U.value = !1, W.value = !0;
+		function ie() {
+			X = !0, K.value = !1, q.value = !0;
 		}
-		function ne(e) {
-			e.preventDefault(), G.value?.$el.focus({ preventScroll: !0 });
+		function ae(e) {
+			e.preventDefault(), J.value?.$el.focus({ preventScroll: !0 });
 		}
-		let re = s(() => ({
-			"aria-pressed": String(H.value),
-			"aria-label": y.sign,
-			title: y.sign,
-			onClick: Q
-		})), ie = {
-			"aria-label": y.trigger,
-			title: y.trigger,
+		let oe = c(() => ({
+			"aria-pressed": String(G.value),
+			"aria-label": S.sign,
+			title: S.sign,
+			onClick: ne
+		})), se = {
+			"aria-label": S.trigger,
+			title: S.trigger,
 			"aria-haspopup": "menu",
-			onKeydown: J
-		}, ae = { "aria-label": y.menu };
-		return (e, t) => (p(), c(h(E), {
-			open: U.value,
-			"onUpdate:open": t[2] ||= (e) => U.value = e
+			onKeydown: Z
+		}, ce = { "aria-label": S.menu };
+		return (e, t) => v(B) ? (h(), l(v(k), {
+			key: 0,
+			open: K.value,
+			"onUpdate:open": t[2] ||= (e) => K.value = e
 		}, {
-			default: v(() => [u(h(C), { "as-child": "" }, {
-				default: v(() => [l("div", f({
+			default: x(() => [f(v(E), { "as-child": "" }, {
+				default: x(() => [d("div", m({
 					role: "group",
-					"aria-label": h(y).sign,
+					"aria-label": v(S).sign,
 					class: "ink-split-button ink-signature-menu",
 					"data-ink-signature-menu": ""
 				}, e.$attrs), [
-					u(h(O), f({
+					f(v(j), m({
 						ref_key: "main",
-						ref: G,
+						ref: J,
 						class: "ink-tool-button ink-signature-button",
 						"data-ink-tool-button": "",
 						"data-ink-signature-button": "",
 						"data-tool": "signature",
-						"data-state": H.value ? "on" : "off"
-					}, re.value), {
-						default: v(() => [ee(e.$slots, "default", { active: H.value }, () => [u(a, { icon: h(A) }, null, 8, ["icon"])])]),
+						"data-state": G.value ? "on" : "off"
+					}, oe.value), {
+						default: x(() => [_(e.$slots, "default", { active: G.value }, () => [f(o, { icon: v(N) }, null, 8, ["icon"])])]),
 						_: 3
 					}, 16, ["data-state"]),
-					u(h(O), { "as-child": "" }, {
-						default: v(() => [u(h(D), { "as-child": "" }, {
-							default: v(() => [l("button", f({
+					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": U.value ? "open" : "closed"
-							}, ie), [u(a, { icon: h(k) }, null, 8, ["icon"])], 16, M)]),
+								"data-state": K.value ? "open" : "closed"
+							}, se), [f(o, { icon: v(M) }, null, 8, ["icon"])], 16, F)]),
 							_: 1
 						})]),
 						_: 1
 					}),
-					u(h(T), null, {
-						default: v(() => [u(h(w), f({
+					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",
@@ -99,33 +101,33 @@ var j = ["aria-label"], M = ["data-state"], N = /*@__PURE__*/ d({
 							align: "start",
 							"side-offset": 4,
 							"collision-padding": 8
-						}, ae, {
-							onOpenAutoFocus: X,
-							onCloseAutoFocus: Z
+						}, ce, {
+							onOpenAutoFocus: $,
+							onCloseAutoFocus: te
 						}), {
-							default: v(() => [u(o, {
-								items: V.value.items,
-								onChoose: t[0] ||= (e) => $(e.id),
-								onCreate: te
+							default: x(() => [f(s, {
+								items: W.value.items,
+								onChoose: t[0] ||= (e) => re(e.id),
+								onCreate: ie
 							}, null, 8, ["items"])]),
 							_: 1
 						}, 16)]),
 						_: 1
 					}),
-					u(i, {
-						open: W.value,
-						"onUpdate:open": t[1] ||= (e) => W.value = e,
-						fonts: N.fonts,
-						onCloseAutoFocus: ne
+					f(a, {
+						open: q.value,
+						"onUpdate:open": t[1] ||= (e) => q.value = e,
+						fonts: I.fonts,
+						onCloseAutoFocus: ae
 					}, null, 8, ["open", "fonts"])
-				], 16, j)]),
+				], 16, P)]),
 				_: 3
 			})]),
 			_: 3
-		}, 8, ["open"]));
+		}, 8, ["open"])) : u("", !0);
 	}
 });
 //#endregion
-export { N as default };
+export { I as default };
 
 //# sourceMappingURL=InkSignatureMenu.vue_vue_type_script_setup_true_lang.js.map