@inkbar/vue 0.3.0 → 0.4.0

package/dist/components/SignatureForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignatureForm.js","names":["_sfc_main","SignatureForm_vue_vue_type_script_setup_true_lang_default","SignatureForm_default"],"sources":["../../src/components/SignatureForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * The body of `InkSignatureDialog`, mounted while it is open: one draft per opening. Draw,\n * Type and Image tabs, then Cancel and Save.\n */\nimport {\n  createSignatureDraft,\n  fontFamilyValue,\n  handleRadioKeys,\n  handleTabKeys,\n  SIGNATURE_LABELS,\n  SIGNATURE_TABS,\n  type SignatureDraftState,\n  type SignatureTab,\n} from '@inkbar/core/dom'\nimport { DialogClose } from 'reka-ui'\nimport { computed, onBeforeUnmount, onMounted, useId, useTemplateRef } from 'vue'\n\nimport { useTool } from '../composables/useTool'\nimport { useToolOptions } from '../composables/useToolOptions'\nimport { useInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport type { SignatureOptions, SignatureTemplate } from '@inkbar/core'\n\nconst props = defineProps<{ fonts?: readonly string[] | undefined }>()\nconst emit = defineEmits<{ saved: [template: SignatureTemplate]; close: [] }>()\n\nconst ctx = useInkContext('InkSignatureDialog')\nconst { setTool } = useTool()\nconst { setOptions } = useToolOptions<SignatureOptions>('signature')\nconst draft = createSignatureDraft({ fonts: props.fonts ?? ctx.signatureFonts.value })\nconst IDLE: SignatureDraftState = draft.state.get()\nconst s = useReadable(draft.state, IDLE)\nconst uid = useId()\nconst padHost = useTemplateRef<HTMLDivElement>('pad')\n\nlet detach: (() => void) | undefined\nonMounted(() => {\n  if (padHost.value) detach = draft.attachPad(padHost.value)\n})\nonBeforeUnmount(() => {\n  detach?.()\n  draft.destroy()\n})\n\nfunction save(): void {\n  draft.save(ctx.signatures.value).then(\n    (t) => {\n      if (!t) return\n      setOptions({ templateId: t.id })\n      setTool('signature')\n      emit('saved', t)\n      emit('close')\n    },\n    () => {\n      // The host's store refused it: the dialog stays open to try again.\n    }\n  )\n}\n\nconst tabId = (tab: SignatureTab) => `${uid}-tab-${tab}`\nconst panelId = (tab: SignatureTab) => `${uid}-panel-${tab}`\nconst shown = computed(() => s.value.name.trim() || SIGNATURE_LABELS.namePlaceholder)\nconst onTabKeydown = (e: KeyboardEvent) =>\n  handleTabKeys(e, e.currentTarget as HTMLElement)\nconst onRadioKeydown = (e: KeyboardEvent) =>\n  handleRadioKeys(e, e.currentTarget as HTMLElement)\nconst onName = (e: Event) => draft.setName((e.target as HTMLInputElement).value)\nconst onFile = (e: Event) =>\n  void draft.chooseFile((e.target as HTMLInputElement).files?.[0])\n</script>\n\n<template>\n  <div\n    role=\"tablist\"\n    :aria-label=\"SIGNATURE_LABELS.tabs\"\n    class=\"ink-tabs\"\n    @keydown=\"onTabKeydown\"\n  >\n    <button\n      v-for=\"tab in SIGNATURE_TABS\"\n      :id=\"tabId(tab)\"\n      :key=\"tab\"\n      type=\"button\"\n      role=\"tab\"\n      :aria-controls=\"panelId(tab)\"\n      :aria-selected=\"s.tab === tab\"\n      :tabindex=\"s.tab === tab ? 0 : -1\"\n      class=\"ink-tab\"\n      :data-key=\"tab\"\n      :data-state=\"s.tab === tab ? 'active' : 'inactive'\"\n      @click=\"draft.setTab(tab)\"\n    >\n      {{ SIGNATURE_LABELS[tab] }}\n    </button>\n  </div>\n  <div\n    :id=\"panelId('draw')\"\n    role=\"tabpanel\"\n    :aria-labelledby=\"tabId('draw')\"\n    class=\"ink-tab-panel\"\n    data-key=\"draw\"\n    :hidden=\"s.tab !== 'draw'\"\n  >\n    <div\n      ref=\"pad\"\n      class=\"ink-signature-pad-host\"\n      data-ink-signature-pad-host\n      role=\"img\"\n      :aria-label=\"SIGNATURE_LABELS.pad\"\n    />\n    <div class=\"ink-dialog-row\">\n      <button\n        type=\"button\"\n        class=\"ink-button\"\n        data-ink-signature-clear\n        :disabled=\"s.padEmpty\"\n        @click=\"draft.clearPad()\"\n      >\n        {{ SIGNATURE_LABELS.clear }}\n      </button>\n    </div>\n  </div>\n  <div\n    :id=\"panelId('type')\"\n    role=\"tabpanel\"\n    :aria-labelledby=\"tabId('type')\"\n    class=\"ink-tab-panel\"\n    data-key=\"type\"\n    :hidden=\"s.tab !== 'type'\"\n  >\n    <label class=\"ink-field\">\n      <span>{{ SIGNATURE_LABELS.name }}</span>\n      <input\n        type=\"text\"\n        class=\"ink-input\"\n        data-ink-signature-name\n        autocomplete=\"name\"\n        :placeholder=\"SIGNATURE_LABELS.namePlaceholder\"\n        :value=\"s.name\"\n        @input=\"onName\"\n      />\n    </label>\n    <div\n      role=\"radiogroup\"\n      :aria-label=\"SIGNATURE_LABELS.fonts\"\n      class=\"ink-signature-fonts\"\n      @keydown=\"onRadioKeydown\"\n    >\n      <button\n        v-for=\"font in draft.fonts\"\n        :key=\"font\"\n        type=\"button\"\n        role=\"radio\"\n        :aria-checked=\"s.font === font\"\n        :aria-label=\"font\"\n        :tabindex=\"s.font === font ? 0 : -1\"\n        class=\"ink-signature-font\"\n        :data-key=\"font\"\n        :data-state=\"s.font === font ? 'checked' : 'unchecked'\"\n        @click=\"draft.setFont(font)\"\n      >\n        <!-- The font is the option itself, so it is set here, not left to the theme. -->\n        <span\n          class=\"ink-signature-font-sample\"\n          :style=\"{ fontFamily: fontFamilyValue(font) }\"\n        >\n          {{ shown }}\n        </span>\n      </button>\n    </div>\n  </div>\n  <div\n    :id=\"panelId('image')\"\n    role=\"tabpanel\"\n    :aria-labelledby=\"tabId('image')\"\n    class=\"ink-tab-panel\"\n    data-key=\"image\"\n    :hidden=\"s.tab !== 'image'\"\n  >\n    <label class=\"ink-field\">\n      <span>{{ SIGNATURE_LABELS.file }}</span>\n      <input\n        type=\"file\"\n        accept=\"image/png,image/jpeg\"\n        class=\"ink-input\"\n        data-ink-signature-file\n        @change=\"onFile\"\n      />\n    </label>\n    <img\n      v-if=\"s.image?.kind === 'image'\"\n      class=\"ink-signature-image\"\n      :src=\"s.image.imagedata\"\n      alt=\"\"\n    />\n    <p v-if=\"s.imageError\" class=\"ink-field-error\" role=\"alert\">{{ s.imageError }}</p>\n  </div>\n  <p\n    v-if=\"s.saveError\"\n    class=\"ink-field-error\"\n    role=\"alert\"\n    data-ink-signature-save-error\n  >\n    {{ s.saveError }}\n  </p>\n  <div class=\"ink-dialog-actions\">\n    <DialogClose as-child>\n      <button type=\"button\" class=\"ink-button\" data-ink-signature-cancel>\n        {{ SIGNATURE_LABELS.cancel }}\n      </button>\n    </DialogClose>\n    <button\n      type=\"button\"\n      class=\"ink-button\"\n      data-variant=\"primary\"\n      data-ink-signature-save\n      :disabled=\"!s.canSave\"\n      @click=\"save\"\n    >\n      {{ SIGNATURE_LABELS.save }}\n    </button>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,14 @@
+import { SignatureTemplate } from '@inkbar/core';
+type __VLS_Props = {
+    fonts?: readonly string[] | undefined;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    saved: (template: SignatureTemplate) => any;
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSaved?: (template: SignatureTemplate) => any;
+    onClose?: () => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=SignatureForm.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SignatureForm.vue.d.ts","sourceRoot":"","sources":["../../src/components/SignatureForm.vue"],"names":[],"mappings":"AAyPA,OAAO,KAAK,EAAoB,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAGvE,KAAK,WAAW,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;CAAE,CAAC;AAsR7D,QAAA,MAAM,YAAY;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/SignatureForm.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,181 @@
+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 ee } from "../composables/useToolOptions.js";
+import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as te, defineComponent as c, normalizeStyle as ne, onBeforeUnmount as l, onMounted as re, openBlock as u, renderList as d, toDisplayString as f, unref as p, useId as m, useTemplateRef as h, withCtx as ie } from "vue";
+import { SIGNATURE_LABELS as g, SIGNATURE_TABS as ae, createSignatureDraft as _, fontFamilyValue as v, handleRadioKeys as y, handleTabKeys as b } from "@inkbar/core/dom";
+import { DialogClose as x } from "reka-ui";
+//#region src/components/SignatureForm.vue?vue&type=script&setup=true&lang.ts
+var S = ["aria-label"], C = [
+	"id",
+	"aria-controls",
+	"aria-selected",
+	"tabindex",
+	"data-key",
+	"data-state",
+	"onClick"
+], w = [
+	"id",
+	"aria-labelledby",
+	"hidden"
+], T = ["aria-label"], E = { class: "ink-dialog-row" }, D = ["disabled"], O = [
+	"id",
+	"aria-labelledby",
+	"hidden"
+], k = { class: "ink-field" }, A = ["placeholder", "value"], j = ["aria-label"], M = [
+	"aria-checked",
+	"aria-label",
+	"tabindex",
+	"data-key",
+	"data-state",
+	"onClick"
+], N = [
+	"id",
+	"aria-labelledby",
+	"hidden"
+], P = { class: "ink-field" }, F = ["src"], I = {
+	key: 1,
+	class: "ink-field-error",
+	role: "alert"
+}, oe = {
+	key: 0,
+	class: "ink-field-error",
+	role: "alert",
+	"data-ink-signature-save-error": ""
+}, L = { class: "ink-dialog-actions" }, R = {
+	type: "button",
+	class: "ink-button",
+	"data-ink-signature-cancel": ""
+}, z = ["disabled"], B = /*@__PURE__*/ c({
+	__name: "SignatureForm",
+	props: { fonts: {} },
+	emits: ["saved", "close"],
+	setup(c, { emit: B }) {
+		let V = c, H = B, U = e("InkSignatureDialog"), { setTool: W } = n(), { setOptions: G } = ee("signature"), K = _({ fonts: V.fonts ?? U.signatureFonts.value }), q = K.state.get(), J = t(K.state, q), Y = m(), X = h("pad"), Z;
+		re(() => {
+			X.value && (Z = K.attachPad(X.value));
+		}), l(() => {
+			Z?.(), K.destroy();
+		});
+		function se() {
+			K.save(U.signatures.value).then((e) => {
+				e && (G({ templateId: e.id }), W("signature"), H("saved", e), H("close"));
+			}, () => {});
+		}
+		let Q = (e) => `${Y}-tab-${e}`, $ = (e) => `${Y}-panel-${e}`, ce = i(() => J.value.name.trim() || g.namePlaceholder), le = (e) => b(e, e.currentTarget), ue = (e) => y(e, e.currentTarget), de = (e) => K.setName(e.target.value), fe = (e) => void K.chooseFile(e.target.files?.[0]);
+		return (e, t) => (u(), o(r, null, [
+			s("div", {
+				role: "tablist",
+				"aria-label": p(g).tabs,
+				class: "ink-tabs",
+				onKeydown: le
+			}, [(u(!0), o(r, null, d(p(ae), (e) => (u(), o("button", {
+				id: Q(e),
+				key: e,
+				type: "button",
+				role: "tab",
+				"aria-controls": $(e),
+				"aria-selected": p(J).tab === e,
+				tabindex: p(J).tab === e ? 0 : -1,
+				class: "ink-tab",
+				"data-key": e,
+				"data-state": p(J).tab === e ? "active" : "inactive",
+				onClick: (t) => p(K).setTab(e)
+			}, f(p(g)[e]), 9, C))), 128))], 40, S),
+			s("div", {
+				id: $("draw"),
+				role: "tabpanel",
+				"aria-labelledby": Q("draw"),
+				class: "ink-tab-panel",
+				"data-key": "draw",
+				hidden: p(J).tab !== "draw"
+			}, [s("div", {
+				ref: "pad",
+				class: "ink-signature-pad-host",
+				"data-ink-signature-pad-host": "",
+				role: "img",
+				"aria-label": p(g).pad
+			}, null, 8, T), s("div", E, [s("button", {
+				type: "button",
+				class: "ink-button",
+				"data-ink-signature-clear": "",
+				disabled: p(J).padEmpty,
+				onClick: t[0] ||= (e) => p(K).clearPad()
+			}, f(p(g).clear), 9, D)])], 8, w),
+			s("div", {
+				id: $("type"),
+				role: "tabpanel",
+				"aria-labelledby": Q("type"),
+				class: "ink-tab-panel",
+				"data-key": "type",
+				hidden: p(J).tab !== "type"
+			}, [s("label", k, [s("span", null, f(p(g).name), 1), s("input", {
+				type: "text",
+				class: "ink-input",
+				"data-ink-signature-name": "",
+				autocomplete: "name",
+				placeholder: p(g).namePlaceholder,
+				value: p(J).name,
+				onInput: de
+			}, null, 40, A)]), s("div", {
+				role: "radiogroup",
+				"aria-label": p(g).fonts,
+				class: "ink-signature-fonts",
+				onKeydown: ue
+			}, [(u(!0), o(r, null, d(p(K).fonts, (e) => (u(), o("button", {
+				key: e,
+				type: "button",
+				role: "radio",
+				"aria-checked": p(J).font === e,
+				"aria-label": e,
+				tabindex: p(J).font === e ? 0 : -1,
+				class: "ink-signature-font",
+				"data-key": e,
+				"data-state": p(J).font === e ? "checked" : "unchecked",
+				onClick: (t) => p(K).setFont(e)
+			}, [s("span", {
+				class: "ink-signature-font-sample",
+				style: ne({ fontFamily: p(v)(e) })
+			}, f(ce.value), 5)], 8, M))), 128))], 40, j)], 8, O),
+			s("div", {
+				id: $("image"),
+				role: "tabpanel",
+				"aria-labelledby": Q("image"),
+				class: "ink-tab-panel",
+				"data-key": "image",
+				hidden: p(J).tab !== "image"
+			}, [
+				s("label", P, [s("span", null, f(p(g).file), 1), s("input", {
+					type: "file",
+					accept: "image/png,image/jpeg",
+					class: "ink-input",
+					"data-ink-signature-file": "",
+					onChange: fe
+				}, null, 32)]),
+				p(J).image?.kind === "image" ? (u(), o("img", {
+					key: 0,
+					class: "ink-signature-image",
+					src: p(J).image.imagedata,
+					alt: ""
+				}, null, 8, F)) : a("", !0),
+				p(J).imageError ? (u(), o("p", I, f(p(J).imageError), 1)) : a("", !0)
+			], 8, N),
+			p(J).saveError ? (u(), o("p", oe, f(p(J).saveError), 1)) : a("", !0),
+			s("div", L, [te(p(x), { "as-child": "" }, {
+				default: ie(() => [s("button", R, f(p(g).cancel), 1)]),
+				_: 1
+			}), s("button", {
+				type: "button",
+				class: "ink-button",
+				"data-variant": "primary",
+				"data-ink-signature-save": "",
+				disabled: !p(J).canSave,
+				onClick: se
+			}, f(p(g).save), 9, z)])
+		], 64));
+	}
+});
+//#endregion
+export { B as default };
+
+//# sourceMappingURL=SignatureForm.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SignatureForm.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createElementVNode","_unref","_renderList","_toDisplayString","_normalizeStyle","_createCommentVNode","_createVNode","_withCtx","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","_hoisted_17","_hoisted_18","_hoisted_19","SignatureForm_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","ctx","useInkContext","useTool","useToolOptions","draft","createSignatureDraft","IDLE","s","useReadable","uid","useId","padHost","useTemplateRef","detach","onMounted","onBeforeUnmount","save","t","setOptions","setTool","tabId","tab","panelId","shown","computed","SIGNATURE_LABELS","onTabKeydown","handleTabKeys","onRadioKeydown","handleRadioKeys","onName","onFile","openBlock","createElementBlock","Fragment","createElementVNode","unref","renderList","SIGNATURE_TABS","toDisplayString","_cache","font","normalizeStyle","fontFamilyValue","createCommentVNode","createVNode","DialogClose","withCtx"],"sources":["../../src/components/SignatureForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * The body of `InkSignatureDialog`, mounted while it is open: one draft per opening. Draw,\n * Type and Image tabs, then Cancel and Save.\n */\nimport {\n  createSignatureDraft,\n  fontFamilyValue,\n  handleRadioKeys,\n  handleTabKeys,\n  SIGNATURE_LABELS,\n  SIGNATURE_TABS,\n  type SignatureDraftState,\n  type SignatureTab,\n} from '@inkbar/core/dom'\nimport { DialogClose } from 'reka-ui'\nimport { computed, onBeforeUnmount, onMounted, useId, useTemplateRef } from 'vue'\n\nimport { useTool } from '../composables/useTool'\nimport { useToolOptions } from '../composables/useToolOptions'\nimport { useInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport type { SignatureOptions, SignatureTemplate } from '@inkbar/core'\n\nconst props = defineProps<{ fonts?: readonly string[] | undefined }>()\nconst emit = defineEmits<{ saved: [template: SignatureTemplate]; close: [] }>()\n\nconst ctx = useInkContext('InkSignatureDialog')\nconst { setTool } = useTool()\nconst { setOptions } = useToolOptions<SignatureOptions>('signature')\nconst draft = createSignatureDraft({ fonts: props.fonts ?? ctx.signatureFonts.value })\nconst IDLE: SignatureDraftState = draft.state.get()\nconst s = useReadable(draft.state, IDLE)\nconst uid = useId()\nconst padHost = useTemplateRef<HTMLDivElement>('pad')\n\nlet detach: (() => void) | undefined\nonMounted(() => {\n  if (padHost.value) detach = draft.attachPad(padHost.value)\n})\nonBeforeUnmount(() => {\n  detach?.()\n  draft.destroy()\n})\n\nfunction save(): void {\n  draft.save(ctx.signatures.value).then(\n    (t) => {\n      if (!t) return\n      setOptions({ templateId: t.id })\n      setTool('signature')\n      emit('saved', t)\n      emit('close')\n    },\n    () => {\n      // The host's store refused it: the dialog stays open to try again.\n    }\n  )\n}\n\nconst tabId = (tab: SignatureTab) => `${uid}-tab-${tab}`\nconst panelId = (tab: SignatureTab) => `${uid}-panel-${tab}`\nconst shown = computed(() => s.value.name.trim() || SIGNATURE_LABELS.namePlaceholder)\nconst onTabKeydown = (e: KeyboardEvent) =>\n  handleTabKeys(e, e.currentTarget as HTMLElement)\nconst onRadioKeydown = (e: KeyboardEvent) =>\n  handleRadioKeys(e, e.currentTarget as HTMLElement)\nconst onName = (e: Event) => draft.setName((e.target as HTMLInputElement).value)\nconst onFile = (e: Event) =>\n  void draft.chooseFile((e.target as HTMLInputElement).files?.[0])\n</script>\n\n<template>\n  <div\n    role=\"tablist\"\n    :aria-label=\"SIGNATURE_LABELS.tabs\"\n    class=\"ink-tabs\"\n    @keydown=\"onTabKeydown\"\n  >\n    <button\n      v-for=\"tab in SIGNATURE_TABS\"\n      :id=\"tabId(tab)\"\n      :key=\"tab\"\n      type=\"button\"\n      role=\"tab\"\n      :aria-controls=\"panelId(tab)\"\n      :aria-selected=\"s.tab === tab\"\n      :tabindex=\"s.tab === tab ? 0 : -1\"\n      class=\"ink-tab\"\n      :data-key=\"tab\"\n      :data-state=\"s.tab === tab ? 'active' : 'inactive'\"\n      @click=\"draft.setTab(tab)\"\n    >\n      {{ SIGNATURE_LABELS[tab] }}\n    </button>\n  </div>\n  <div\n    :id=\"panelId('draw')\"\n    role=\"tabpanel\"\n    :aria-labelledby=\"tabId('draw')\"\n    class=\"ink-tab-panel\"\n    data-key=\"draw\"\n    :hidden=\"s.tab !== 'draw'\"\n  >\n    <div\n      ref=\"pad\"\n      class=\"ink-signature-pad-host\"\n      data-ink-signature-pad-host\n      role=\"img\"\n      :aria-label=\"SIGNATURE_LABELS.pad\"\n    />\n    <div class=\"ink-dialog-row\">\n      <button\n        type=\"button\"\n        class=\"ink-button\"\n        data-ink-signature-clear\n        :disabled=\"s.padEmpty\"\n        @click=\"draft.clearPad()\"\n      >\n        {{ SIGNATURE_LABELS.clear }}\n      </button>\n    </div>\n  </div>\n  <div\n    :id=\"panelId('type')\"\n    role=\"tabpanel\"\n    :aria-labelledby=\"tabId('type')\"\n    class=\"ink-tab-panel\"\n    data-key=\"type\"\n    :hidden=\"s.tab !== 'type'\"\n  >\n    <label class=\"ink-field\">\n      <span>{{ SIGNATURE_LABELS.name }}</span>\n      <input\n        type=\"text\"\n        class=\"ink-input\"\n        data-ink-signature-name\n        autocomplete=\"name\"\n        :placeholder=\"SIGNATURE_LABELS.namePlaceholder\"\n        :value=\"s.name\"\n        @input=\"onName\"\n      />\n    </label>\n    <div\n      role=\"radiogroup\"\n      :aria-label=\"SIGNATURE_LABELS.fonts\"\n      class=\"ink-signature-fonts\"\n      @keydown=\"onRadioKeydown\"\n    >\n      <button\n        v-for=\"font in draft.fonts\"\n        :key=\"font\"\n        type=\"button\"\n        role=\"radio\"\n        :aria-checked=\"s.font === font\"\n        :aria-label=\"font\"\n        :tabindex=\"s.font === font ? 0 : -1\"\n        class=\"ink-signature-font\"\n        :data-key=\"font\"\n        :data-state=\"s.font === font ? 'checked' : 'unchecked'\"\n        @click=\"draft.setFont(font)\"\n      >\n        <!-- The font is the option itself, so it is set here, not left to the theme. -->\n        <span\n          class=\"ink-signature-font-sample\"\n          :style=\"{ fontFamily: fontFamilyValue(font) }\"\n        >\n          {{ shown }}\n        </span>\n      </button>\n    </div>\n  </div>\n  <div\n    :id=\"panelId('image')\"\n    role=\"tabpanel\"\n    :aria-labelledby=\"tabId('image')\"\n    class=\"ink-tab-panel\"\n    data-key=\"image\"\n    :hidden=\"s.tab !== 'image'\"\n  >\n    <label class=\"ink-field\">\n      <span>{{ SIGNATURE_LABELS.file }}</span>\n      <input\n        type=\"file\"\n        accept=\"image/png,image/jpeg\"\n        class=\"ink-input\"\n        data-ink-signature-file\n        @change=\"onFile\"\n      />\n    </label>\n    <img\n      v-if=\"s.image?.kind === 'image'\"\n      class=\"ink-signature-image\"\n      :src=\"s.image.imagedata\"\n      alt=\"\"\n    />\n    <p v-if=\"s.imageError\" class=\"ink-field-error\" role=\"alert\">{{ s.imageError }}</p>\n  </div>\n  <p\n    v-if=\"s.saveError\"\n    class=\"ink-field-error\"\n    role=\"alert\"\n    data-ink-signature-save-error\n  >\n    {{ s.saveError }}\n  </p>\n  <div class=\"ink-dialog-actions\">\n    <DialogClose as-child>\n      <button type=\"button\" class=\"ink-button\" data-ink-signature-cancel>\n        {{ SIGNATURE_LABELS.cancel }}\n      </button>\n    </DialogClose>\n    <button\n      type=\"button\"\n      class=\"ink-button\"\n      data-variant=\"primary\"\n      data-ink-signature-save\n      :disabled=\"!s.canSave\"\n      @click=\"save\"\n    >\n      {{ SIGNATURE_LABELS.save }}\n    </button>\n  </div>\n</template>\n"],"mappings":"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"}