@inkbar/vue 0.8.0 → 0.10.0

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

@@ -1 +1 @@
-{"version":3,"file":"InkZoomSelect.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkZoomSelect.vue"],"names":[],"mappings":"AA8bA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"InkZoomSelect.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkZoomSelect.vue"],"names":[],"mappings":"AA+bA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/InkZoomSelect.vue_vue_type_script_setup_true_lang.js

@@ -40,7 +40,7 @@ var k = "custom:", A = /*@__PURE__*/ c({
 			"onUpdate:modelValue": I
 		}, {
 			default: m(() => [s(p(w), l({
-				class: "ink-zoom-select ink-select-trigger",
+				class: "ink-select ink-select-trigger ink-zoom-select",
 				"data-ink-zoom-select": ""
 			}, R), {
 				default: m(() => [s(p(T), { class: "ink-select-value" }), s(p(_), { class: "ink-select-icon" }, {

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

@@ -1 +1 @@
-{"version":3,"file":"InkZoomSelect.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_withCtx","_createVNode","_mergeProps","InkIcon","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","InkIcon_default","CUSTOM","InkZoomSelect_vue_vue_type_script_setup_true_lang_default","useZoom","level","ZOOM_LEVELS","l","z","custom","computed","zoom","value","onChange","v","next","FITS","triggerAttrs","percent","levels","list","c","scale","a","b","openBlock","createBlock","unref","SelectRoot","withCtx","createVNode","SelectTrigger","mergeProps","SelectValue","SelectIcon","ChevronDown","SelectPortal","SelectContent","SelectViewport","createElementBlock","Fragment","renderList","SelectItem","o","SelectItemText","createTextVNode","toDisplayString","SelectItemIndicator","Check","SelectSeparator"],"sources":["../../src/components/InkZoomSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ZOOM_LEVELS } from '@inkbar/core/dom'\nimport { Check, ChevronDown } from '@inkbar/icons'\nimport {\n  SelectContent,\n  SelectIcon,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectPortal,\n  SelectRoot,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  SelectViewport,\n} from 'reka-ui'\nimport { computed } from 'vue'\n\nimport { useZoom } from '../composables/useZoom'\n\nimport InkIcon from './InkIcon.vue'\n\nimport type { ZoomValue } from '@inkbar/core/dom'\n\nconst CUSTOM = 'custom:'\n\nconst { zoom, scale, setZoom } = useZoom()\n\nconst level = (z: number) => ZOOM_LEVELS.find((l) => Math.abs(l - z) < 0.001)\n/** A numeric zoom that is not one of the levels (zoom in and out multiply). */\nconst custom = computed(() =>\n  typeof zoom.value === 'number' && level(zoom.value) === undefined ? zoom.value : null\n)\nconst value = computed(() => {\n  const z = zoom.value\n  if (typeof z !== 'number') return z\n  return custom.value === null ? String(level(z)) : `${CUSTOM}${z}`\n})\n\nfunction onChange(v: unknown): void {\n  if (typeof v !== 'string' || v === value.value) return\n  const next: ZoomValue =\n    v === 'fit-width' || v === 'fit-page' ? v : Number(v.replace(CUSTOM, ''))\n  setZoom(next)\n}\n\nconst FITS = [\n  { value: 'fit-width', label: 'Fit width' },\n  { value: 'fit-page', label: 'Fit page' },\n]\n// Reka's typed props stop at its own; ARIA goes through a bound object.\nconst triggerAttrs = { 'aria-label': 'Zoom' }\nconst percent = (z: number) => `${Math.round(z * 100)}%`\n/** The levels, with a custom zoom in its place among them. */\nconst levels = computed(() => {\n  const list = ZOOM_LEVELS.map((l) => ({ z: l, value: String(l), label: percent(l) }))\n  const c = custom.value\n  if (c !== null) list.push({ z: c, value: `${CUSTOM}${c}`, label: percent(scale.value) })\n  return list.sort((a, b) => a.z - b.z)\n})\n</script>\n\n<template>\n  <SelectRoot :model-value=\"value\" @update:model-value=\"onChange\">\n    <SelectTrigger\n      class=\"ink-zoom-select ink-select-trigger\"\n      data-ink-zoom-select\n      v-bind=\"triggerAttrs\"\n    >\n      <SelectValue class=\"ink-select-value\" />\n      <SelectIcon class=\"ink-select-icon\">\n        <InkIcon :icon=\"ChevronDown\" :size=\"16\" />\n      </SelectIcon>\n    </SelectTrigger>\n    <SelectPortal>\n      <SelectContent\n        class=\"ink-select-content\"\n        data-ink-select-content\n        position=\"popper\"\n        side=\"top\"\n        :side-offset=\"4\"\n      >\n        <SelectViewport>\n          <SelectItem\n            v-for=\"o in FITS\"\n            :key=\"o.value\"\n            :value=\"o.value\"\n            class=\"ink-select-item\"\n            data-ink-select-item\n          >\n            <SelectItemText>{{ o.label }}</SelectItemText>\n            <SelectItemIndicator class=\"ink-select-indicator\">\n              <InkIcon :icon=\"Check\" :size=\"16\" />\n            </SelectItemIndicator>\n          </SelectItem>\n          <SelectSeparator class=\"ink-select-separator\" />\n          <SelectItem\n            v-for=\"o in levels\"\n            :key=\"o.value\"\n            :value=\"o.value\"\n            class=\"ink-select-item\"\n            data-ink-select-item\n          >\n            <SelectItemText>{{ o.label }}</SelectItemText>\n            <SelectItemIndicator class=\"ink-select-indicator\">\n              <InkIcon :icon=\"Check\" :size=\"16\" />\n            </SelectItemIndicator>\n          </SelectItem>\n        </SelectViewport>\n      </SelectContent>\n    </SelectPortal>\n  </SelectRoot>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"InkZoomSelect.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_withCtx","_createVNode","_mergeProps","InkIcon","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","InkIcon_default","CUSTOM","InkZoomSelect_vue_vue_type_script_setup_true_lang_default","useZoom","level","ZOOM_LEVELS","l","z","custom","computed","zoom","value","onChange","v","next","FITS","triggerAttrs","percent","levels","list","c","scale","a","b","openBlock","createBlock","unref","SelectRoot","withCtx","createVNode","SelectTrigger","mergeProps","SelectValue","SelectIcon","ChevronDown","SelectPortal","SelectContent","SelectViewport","createElementBlock","Fragment","renderList","SelectItem","o","SelectItemText","createTextVNode","toDisplayString","SelectItemIndicator","Check","SelectSeparator"],"sources":["../../src/components/InkZoomSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ZOOM_LEVELS } from '@inkbar/core/dom'\nimport { Check, ChevronDown } from '@inkbar/icons'\nimport {\n  SelectContent,\n  SelectIcon,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectPortal,\n  SelectRoot,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  SelectViewport,\n} from 'reka-ui'\nimport { computed } from 'vue'\n\nimport { useZoom } from '../composables/useZoom'\n\nimport InkIcon from './InkIcon.vue'\n\nimport type { ZoomValue } from '@inkbar/core/dom'\n\nconst CUSTOM = 'custom:'\n\nconst { zoom, scale, setZoom } = useZoom()\n\nconst level = (z: number) => ZOOM_LEVELS.find((l) => Math.abs(l - z) < 0.001)\n/** A numeric zoom that is not one of the levels (zoom in and out multiply). */\nconst custom = computed(() =>\n  typeof zoom.value === 'number' && level(zoom.value) === undefined ? zoom.value : null\n)\nconst value = computed(() => {\n  const z = zoom.value\n  if (typeof z !== 'number') return z\n  return custom.value === null ? String(level(z)) : `${CUSTOM}${z}`\n})\n\nfunction onChange(v: unknown): void {\n  if (typeof v !== 'string' || v === value.value) return\n  const next: ZoomValue =\n    v === 'fit-width' || v === 'fit-page' ? v : Number(v.replace(CUSTOM, ''))\n  setZoom(next)\n}\n\nconst FITS = [\n  { value: 'fit-width', label: 'Fit width' },\n  { value: 'fit-page', label: 'Fit page' },\n]\n// Reka's typed props stop at its own; ARIA goes through a bound object.\nconst triggerAttrs = { 'aria-label': 'Zoom' }\nconst percent = (z: number) => `${Math.round(z * 100)}%`\n/** The levels, with a custom zoom in its place among them. */\nconst levels = computed(() => {\n  const list = ZOOM_LEVELS.map((l) => ({ z: l, value: String(l), label: percent(l) }))\n  const c = custom.value\n  if (c !== null) list.push({ z: c, value: `${CUSTOM}${c}`, label: percent(scale.value) })\n  return list.sort((a, b) => a.z - b.z)\n})\n</script>\n\n<template>\n  <SelectRoot :model-value=\"value\" @update:model-value=\"onChange\">\n    <SelectTrigger\n      class=\"ink-select ink-select-trigger ink-zoom-select\"\n      data-ink-zoom-select\n      v-bind=\"triggerAttrs\"\n    >\n      <SelectValue class=\"ink-select-value\" />\n      <SelectIcon class=\"ink-select-icon\">\n        <InkIcon :icon=\"ChevronDown\" :size=\"16\" />\n      </SelectIcon>\n    </SelectTrigger>\n    <SelectPortal>\n      <SelectContent\n        class=\"ink-select-content\"\n        data-ink-select-content\n        position=\"popper\"\n        side=\"top\"\n        :side-offset=\"4\"\n      >\n        <SelectViewport>\n          <SelectItem\n            v-for=\"o in FITS\"\n            :key=\"o.value\"\n            :value=\"o.value\"\n            class=\"ink-select-item\"\n            data-ink-select-item\n          >\n            <SelectItemText>{{ o.label }}</SelectItemText>\n            <SelectItemIndicator class=\"ink-select-indicator\">\n              <InkIcon :icon=\"Check\" :size=\"16\" />\n            </SelectItemIndicator>\n          </SelectItem>\n          <SelectSeparator class=\"ink-select-separator\" />\n          <SelectItem\n            v-for=\"o in levels\"\n            :key=\"o.value\"\n            :value=\"o.value\"\n            class=\"ink-select-item\"\n            data-ink-select-item\n          >\n            <SelectItemText>{{ o.label }}</SelectItemText>\n            <SelectItemIndicator class=\"ink-select-indicator\">\n              <InkIcon :icon=\"Check\" :size=\"16\" />\n            </SelectItemIndicator>\n          </SelectItem>\n        </SelectViewport>\n      </SelectContent>\n    </SelectPortal>\n  </SelectRoot>\n</template>\n"],"mappings":"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"}

package/dist/components/RecordCards.js

@@ -0,0 +1,7 @@
+import e from "./RecordCards.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/RecordCards.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=RecordCards.js.map

package/dist/components/RecordCards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecordCards.js","names":["_sfc_main","RecordCards_vue_vue_type_script_setup_true_lang_default","RecordCards_default"],"sources":["../../src/components/RecordCards.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A record list's markup on core's record list controller, shared by `InkRecordList` and\n * `InkSearchResults`: `createRecordList`'s `div.ink-records` holding `ul.ink-record-list` with\n * one `li.ink-record` card per row, the empty text and a polite live region. The controller\n * holds the rows, the count and the announcement, and handles the clicks, keys, Tab stop,\n * focus and scrolling. Empty, with no empty text, until there is a source.\n */\nimport {\n  createRecordListController,\n  type RecordListController,\n  type RecordListRow,\n  type RecordListSource,\n} from '@inkbar/core/dom'\nimport { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    source: RecordListSource | null\n    /** Whether the empty text shows when there are no rows. */\n    emptyShown?: boolean\n  }>(),\n  { emptyShown: true }\n)\n\nconst emit = defineEmits<{ 'update:count': [count: number] }>()\n\ndefineSlots<{ empty?(): unknown }>()\n\nconst root = useTemplateRef<HTMLElement>('root')\nconst controller = shallowRef<RecordListController | null>(null)\nconst rows = shallowRef<readonly RecordListRow[]>([])\nconst announcement = shallowRef('')\nconst empty = computed(\n  () => controller.value !== null && rows.value.length === 0 && props.emptyShown\n)\n\nlet reported: number | null = null\nfunction report(count: number): void {\n  if (count === reported) return\n  reported = count\n  emit('update:count', count)\n}\n\n/**\n * When the rows change under a focused action whose button goes (its card lost that action),\n * focus the same place in the card once it re-renders, else the row. A row that goes is the\n * controller's to re-home.\n */\nfunction keepActionFocus(): void {\n  const el = root.value\n  const active = el?.ownerDocument.activeElement\n  if (!el || !(active instanceof HTMLButtonElement) || !el.contains(active)) return\n  const row = active.closest<HTMLElement>('[data-ink-record]')\n  if (!row) return\n  const id = row.dataset.inkRecord\n  const buttons = (r: HTMLElement) => [\n    ...r.querySelectorAll<HTMLElement>('.ink-card-actions > button'),\n  ]\n  const index = buttons(row).indexOf(active)\n  void nextTick(() => {\n    if (active.isConnected) return\n    const now = [...el.querySelectorAll<HTMLElement>('[data-ink-record]')].find(\n      (r) => r.dataset.inkRecord === id\n    )\n    if (now) (buttons(now)[index] ?? now).focus({ preventScroll: true })\n  })\n}\n\nwatch(\n  [() => props.source, root],\n  ([source, el], _, onCleanup) => {\n    if (!source || !el) {\n      controller.value = null\n      rows.value = []\n      announcement.value = ''\n      return\n    }\n    const c = createRecordListController(source)\n    controller.value = c\n    rows.value = c.rows.get()\n    announcement.value = c.announcement.get()\n    report(c.count.get())\n    const stops = [\n      c.rows.subscribe((next) => {\n        keepActionFocus()\n        rows.value = next\n      }),\n      c.count.subscribe(report),\n      c.announcement.subscribe((text) => {\n        announcement.value = text\n      }),\n    ]\n    const detach = c.attach(el)\n    onCleanup(() => {\n      for (const stop of stops) stop()\n      detach()\n      c.destroy()\n    })\n  },\n  { flush: 'post', immediate: true }\n)\n</script>\n\n<template>\n  <div ref=\"root\" class=\"ink-records\" data-ink-records tabindex=\"-1\">\n    <ul class=\"ink-record-list\" role=\"list\" :hidden=\"rows.length === 0\">\n      <!-- The controller sets each row's tabindex. -->\n      <li\n        v-for=\"{ item, card, selected } in rows\"\n        :key=\"item.id\"\n        class=\"ink-record\"\n        :data-ink-record=\"item.id\"\n        :aria-current=\"selected ? 'true' : undefined\"\n        :data-selected=\"selected ? '' : undefined\"\n      >\n        <div :class=\"['ink-card', card?.className]\">\n          <template v-if=\"card\">\n            <p class=\"ink-card-title\">{{ card.title }}</p>\n            <!-- prettier-ignore -->\n            <p v-if=\"card.meta !== undefined\" class=\"ink-card-meta\"><span v-if=\"card.swatch !== undefined\" class=\"ink-card-swatch\" :style=\"{ background: card.swatch }\" />{{ card.meta }}</p>\n            <p v-if=\"card.body !== undefined\" class=\"ink-card-body\">{{ card.body }}</p>\n            <!-- prettier-ignore -->\n            <p v-if=\"card.excerpt !== undefined\" class=\"ink-card-excerpt\">{{ card.excerpt.before }}<mark>{{ card.excerpt.match }}</mark>{{ card.excerpt.after }}</p>\n            <div class=\"ink-card-actions\">\n              <button\n                v-for=\"label in Object.keys(card.actions)\"\n                :key=\"label\"\n                type=\"button\"\n                @click=\"controller?.act(item.id, label)\"\n                v-text=\"label\"\n              />\n            </div>\n          </template>\n        </div>\n      </li>\n    </ul>\n    <p class=\"ink-record-list-empty\" :hidden=\"!empty\">\n      <slot name=\"empty\">Nothing here yet.</slot>\n    </p>\n    <div\n      class=\"ink-visually-hidden\"\n      aria-live=\"polite\"\n      data-ink-record-status\n      v-text=\"announcement\"\n    />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,25 @@
+import { RecordListSource } from '@inkbar/core/dom';
+type __VLS_Props = {
+    source: RecordListSource | null;
+    /** Whether the empty text shows when there are no rows. */
+    emptyShown?: boolean;
+};
+type __VLS_Slots = {
+    empty?(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:count": (count: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:count"?: (count: number) => any;
+}>, {
+    emptyShown: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=RecordCards.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RecordCards.vue.d.ts","sourceRoot":"","sources":["../../src/components/RecordCards.vue"],"names":[],"mappings":"AA6JA,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,kBAAkB,CAAA;AAIzB,KAAK,WAAW,GAAG;IACf,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAC;AASJ,KAAK,WAAW,GAAG;IAAE,KAAK,CAAC,IAAI,OAAO,CAAA;CAAE,CAAC;AAgNzC,QAAA,MAAM,UAAU;;;;;;6EAId,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"}

package/dist/components/RecordCards.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,120 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, nextTick as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, renderSlot as f, shallowRef as p, toDisplayString as m, useTemplateRef as h, watch as g } from "vue";
+import { createRecordListController as _ } from "@inkbar/core/dom";
+//#region src/components/RecordCards.vue?vue&type=script&setup=true&lang.ts
+var v = ["hidden"], y = [
+	"data-ink-record",
+	"aria-current",
+	"data-selected"
+], b = { class: "ink-card-title" }, x = {
+	key: 0,
+	class: "ink-card-meta"
+}, S = {
+	key: 1,
+	class: "ink-card-body"
+}, C = {
+	key: 2,
+	class: "ink-card-excerpt"
+}, w = { class: "ink-card-actions" }, T = ["onClick", "textContent"], E = ["hidden"], D = ["textContent"], O = /*@__PURE__*/ o({
+	__name: "RecordCards",
+	props: {
+		source: {},
+		emptyShown: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["update:count"],
+	setup(o, { emit: O }) {
+		let k = o, A = O, j = h("root"), M = p(null), N = p([]), P = p(""), F = t(() => M.value !== null && N.value.length === 0 && k.emptyShown), I = null;
+		function L(e) {
+			e !== I && (I = e, A("update:count", e));
+		}
+		function R() {
+			let e = j.value, t = e?.ownerDocument.activeElement;
+			if (!e || !(t instanceof HTMLButtonElement) || !e.contains(t)) return;
+			let n = t.closest("[data-ink-record]");
+			if (!n) return;
+			let r = n.dataset.inkRecord, i = (e) => [...e.querySelectorAll(".ink-card-actions > button")], a = i(n).indexOf(t);
+			s(() => {
+				if (t.isConnected) return;
+				let n = [...e.querySelectorAll("[data-ink-record]")].find((e) => e.dataset.inkRecord === r);
+				n && (i(n)[a] ?? n).focus({ preventScroll: !0 });
+			});
+		}
+		return g([() => k.source, j], ([e, t], n, r) => {
+			if (!e || !t) {
+				M.value = null, N.value = [], P.value = "";
+				return;
+			}
+			let i = _(e);
+			M.value = i, N.value = i.rows.get(), P.value = i.announcement.get(), L(i.count.get());
+			let a = [
+				i.rows.subscribe((e) => {
+					R(), N.value = e;
+				}),
+				i.count.subscribe(L),
+				i.announcement.subscribe((e) => {
+					P.value = e;
+				})
+			], o = i.attach(t);
+			r(() => {
+				for (let e of a) e();
+				o(), i.destroy();
+			});
+		}, {
+			flush: "post",
+			immediate: !0
+		}), (t, o) => (u(), r("div", {
+			ref_key: "root",
+			ref: j,
+			class: "ink-records",
+			"data-ink-records": "",
+			tabindex: "-1"
+		}, [
+			i("ul", {
+				class: "ink-record-list",
+				role: "list",
+				hidden: N.value.length === 0
+			}, [(u(!0), r(e, null, d(N.value, ({ item: t, card: o, selected: s }) => (u(), r("li", {
+				key: t.id,
+				class: "ink-record",
+				"data-ink-record": t.id,
+				"aria-current": s ? "true" : void 0,
+				"data-selected": s ? "" : void 0
+			}, [i("div", { class: c(["ink-card", o?.className]) }, [o ? (u(), r(e, { key: 0 }, [
+				i("p", b, m(o.title), 1),
+				o.meta === void 0 ? n("", !0) : (u(), r("p", x, [o.swatch === void 0 ? n("", !0) : (u(), r("span", {
+					key: 0,
+					class: "ink-card-swatch",
+					style: l({ background: o.swatch })
+				}, null, 4)), a(m(o.meta), 1)])),
+				o.body === void 0 ? n("", !0) : (u(), r("p", S, m(o.body), 1)),
+				o.excerpt === void 0 ? n("", !0) : (u(), r("p", C, [
+					a(m(o.excerpt.before), 1),
+					i("mark", null, m(o.excerpt.match), 1),
+					a(m(o.excerpt.after), 1)
+				])),
+				i("div", w, [(u(!0), r(e, null, d(Object.keys(o.actions), (e) => (u(), r("button", {
+					key: e,
+					type: "button",
+					onClick: (n) => M.value?.act(t.id, e),
+					textContent: m(e)
+				}, null, 8, T))), 128))])
+			], 64)) : n("", !0)], 2)], 8, y))), 128))], 8, v),
+			i("p", {
+				class: "ink-record-list-empty",
+				hidden: !F.value
+			}, [f(t.$slots, "empty", {}, () => [o[0] ||= a("Nothing here yet.", -1)])], 8, E),
+			i("div", {
+				class: "ink-visually-hidden",
+				"aria-live": "polite",
+				"data-ink-record-status": "",
+				textContent: m(P.value)
+			}, null, 8, D)
+		], 512));
+	}
+});
+//#endregion
+export { O as default };
+
+//# sourceMappingURL=RecordCards.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RecordCards.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_normalizeClass","_toDisplayString","_normalizeStyle","_createCommentVNode","_createTextVNode","_renderSlot","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","RecordCards_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","root","useTemplateRef","controller","shallowRef","rows","announcement","empty","computed","reported","report","count","keepActionFocus","el","active","row","id","buttons","r","index","now","watch","source","c","createRecordListController","stops","next","text","detach","stop","openBlock","createElementBlock","createElementVNode","Fragment","renderList","item","selected","normalizeClass","card","toDisplayString","createCommentVNode","normalizeStyle","createTextVNode","label","renderSlot","_ctx","_cache"],"sources":["../../src/components/RecordCards.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A record list's markup on core's record list controller, shared by `InkRecordList` and\n * `InkSearchResults`: `createRecordList`'s `div.ink-records` holding `ul.ink-record-list` with\n * one `li.ink-record` card per row, the empty text and a polite live region. The controller\n * holds the rows, the count and the announcement, and handles the clicks, keys, Tab stop,\n * focus and scrolling. Empty, with no empty text, until there is a source.\n */\nimport {\n  createRecordListController,\n  type RecordListController,\n  type RecordListRow,\n  type RecordListSource,\n} from '@inkbar/core/dom'\nimport { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    source: RecordListSource | null\n    /** Whether the empty text shows when there are no rows. */\n    emptyShown?: boolean\n  }>(),\n  { emptyShown: true }\n)\n\nconst emit = defineEmits<{ 'update:count': [count: number] }>()\n\ndefineSlots<{ empty?(): unknown }>()\n\nconst root = useTemplateRef<HTMLElement>('root')\nconst controller = shallowRef<RecordListController | null>(null)\nconst rows = shallowRef<readonly RecordListRow[]>([])\nconst announcement = shallowRef('')\nconst empty = computed(\n  () => controller.value !== null && rows.value.length === 0 && props.emptyShown\n)\n\nlet reported: number | null = null\nfunction report(count: number): void {\n  if (count === reported) return\n  reported = count\n  emit('update:count', count)\n}\n\n/**\n * When the rows change under a focused action whose button goes (its card lost that action),\n * focus the same place in the card once it re-renders, else the row. A row that goes is the\n * controller's to re-home.\n */\nfunction keepActionFocus(): void {\n  const el = root.value\n  const active = el?.ownerDocument.activeElement\n  if (!el || !(active instanceof HTMLButtonElement) || !el.contains(active)) return\n  const row = active.closest<HTMLElement>('[data-ink-record]')\n  if (!row) return\n  const id = row.dataset.inkRecord\n  const buttons = (r: HTMLElement) => [\n    ...r.querySelectorAll<HTMLElement>('.ink-card-actions > button'),\n  ]\n  const index = buttons(row).indexOf(active)\n  void nextTick(() => {\n    if (active.isConnected) return\n    const now = [...el.querySelectorAll<HTMLElement>('[data-ink-record]')].find(\n      (r) => r.dataset.inkRecord === id\n    )\n    if (now) (buttons(now)[index] ?? now).focus({ preventScroll: true })\n  })\n}\n\nwatch(\n  [() => props.source, root],\n  ([source, el], _, onCleanup) => {\n    if (!source || !el) {\n      controller.value = null\n      rows.value = []\n      announcement.value = ''\n      return\n    }\n    const c = createRecordListController(source)\n    controller.value = c\n    rows.value = c.rows.get()\n    announcement.value = c.announcement.get()\n    report(c.count.get())\n    const stops = [\n      c.rows.subscribe((next) => {\n        keepActionFocus()\n        rows.value = next\n      }),\n      c.count.subscribe(report),\n      c.announcement.subscribe((text) => {\n        announcement.value = text\n      }),\n    ]\n    const detach = c.attach(el)\n    onCleanup(() => {\n      for (const stop of stops) stop()\n      detach()\n      c.destroy()\n    })\n  },\n  { flush: 'post', immediate: true }\n)\n</script>\n\n<template>\n  <div ref=\"root\" class=\"ink-records\" data-ink-records tabindex=\"-1\">\n    <ul class=\"ink-record-list\" role=\"list\" :hidden=\"rows.length === 0\">\n      <!-- The controller sets each row's tabindex. -->\n      <li\n        v-for=\"{ item, card, selected } in rows\"\n        :key=\"item.id\"\n        class=\"ink-record\"\n        :data-ink-record=\"item.id\"\n        :aria-current=\"selected ? 'true' : undefined\"\n        :data-selected=\"selected ? '' : undefined\"\n      >\n        <div :class=\"['ink-card', card?.className]\">\n          <template v-if=\"card\">\n            <p class=\"ink-card-title\">{{ card.title }}</p>\n            <!-- prettier-ignore -->\n            <p v-if=\"card.meta !== undefined\" class=\"ink-card-meta\"><span v-if=\"card.swatch !== undefined\" class=\"ink-card-swatch\" :style=\"{ background: card.swatch }\" />{{ card.meta }}</p>\n            <p v-if=\"card.body !== undefined\" class=\"ink-card-body\">{{ card.body }}</p>\n            <!-- prettier-ignore -->\n            <p v-if=\"card.excerpt !== undefined\" class=\"ink-card-excerpt\">{{ card.excerpt.before }}<mark>{{ card.excerpt.match }}</mark>{{ card.excerpt.after }}</p>\n            <div class=\"ink-card-actions\">\n              <button\n                v-for=\"label in Object.keys(card.actions)\"\n                :key=\"label\"\n                type=\"button\"\n                @click=\"controller?.act(item.id, label)\"\n                v-text=\"label\"\n              />\n            </div>\n          </template>\n        </div>\n      </li>\n    </ul>\n    <p class=\"ink-record-list-empty\" :hidden=\"!empty\">\n      <slot name=\"empty\">Nothing here yet.</slot>\n    </p>\n    <div\n      class=\"ink-visually-hidden\"\n      aria-live=\"polite\"\n      data-ink-record-status\n      v-text=\"announcement\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/SidebarTrigger.js

@@ -0,0 +1,7 @@
+import e from "./SidebarTrigger.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/SidebarTrigger.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=SidebarTrigger.js.map

package/dist/components/SidebarTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarTrigger.js","names":["_sfc_main","SidebarTrigger_vue_vue_type_script_setup_true_lang_default","SidebarTrigger_default"],"sources":["../../src/components/SidebarTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A sidebar trigger's content: `createSidebar`'s markup, so the theme styles both alike. The\n * rail shows the icon alone (the trigger's `title` carries the label); tabs and stack headers\n * show the label too. The badge is hidden from assistive technology: the trigger's name has it.\n */\nimport { sidebarBadge, type SidebarPanelInfo } from '@inkbar/core/dom'\nimport { computed } from 'vue'\n\nimport InkIcon from './InkIcon.vue'\n\nconst props = defineProps<{ panel: SidebarPanelInfo; rail: boolean }>()\nconst badge = computed(() => sidebarBadge(props.panel.badge))\n</script>\n\n<template>\n  <InkIcon v-if=\"panel.icon\" :icon=\"panel.icon\" />\n  <span v-if=\"!panel.icon || !rail\" class=\"ink-sidebar-label\">{{ panel.label }}</span>\n  <span class=\"ink-sidebar-badge\" aria-hidden=\"true\" :hidden=\"badge === null\">{{\n    badge\n  }}</span>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,9 @@
+import { SidebarPanelInfo } from '@inkbar/core/dom';
+type __VLS_Props = {
+    panel: SidebarPanelInfo;
+    rail: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=SidebarTrigger.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarTrigger.vue.d.ts","sourceRoot":"","sources":["../../src/components/SidebarTrigger.vue"],"names":[],"mappings":"AA6BA,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAMtE,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,gBAAgB,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAgD9D,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/SidebarTrigger.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,33 @@
+import e from "./InkIcon.js";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, openBlock as c, toDisplayString as l } from "vue";
+import { sidebarBadge as u } from "@inkbar/core/dom";
+//#region src/components/SidebarTrigger.vue?vue&type=script&setup=true&lang.ts
+var d = {
+	key: 1,
+	class: "ink-sidebar-label"
+}, f = ["hidden"], p = /*@__PURE__*/ s({
+	__name: "SidebarTrigger",
+	props: {
+		panel: {},
+		rail: { type: Boolean }
+	},
+	setup(s) {
+		let p = s, m = n(() => u(p.panel.badge));
+		return (n, u) => (c(), a(t, null, [
+			s.panel.icon ? (c(), r(e, {
+				key: 0,
+				icon: s.panel.icon
+			}, null, 8, ["icon"])) : i("", !0),
+			!s.panel.icon || !s.rail ? (c(), a("span", d, l(s.panel.label), 1)) : i("", !0),
+			o("span", {
+				class: "ink-sidebar-badge",
+				"aria-hidden": "true",
+				hidden: m.value === null
+			}, l(m.value), 9, f)
+		], 64));
+	}
+});
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=SidebarTrigger.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarTrigger.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createBlock","InkIcon","_createCommentVNode","_toDisplayString","_createElementVNode","InkIcon_default","_hoisted_1","_hoisted_2","SidebarTrigger_vue_vue_type_script_setup_true_lang_default","props","__props","badge","computed","sidebarBadge","openBlock","createElementBlock","Fragment","createBlock","createCommentVNode","toDisplayString","createElementVNode"],"sources":["../../src/components/SidebarTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A sidebar trigger's content: `createSidebar`'s markup, so the theme styles both alike. The\n * rail shows the icon alone (the trigger's `title` carries the label); tabs and stack headers\n * show the label too. The badge is hidden from assistive technology: the trigger's name has it.\n */\nimport { sidebarBadge, type SidebarPanelInfo } from '@inkbar/core/dom'\nimport { computed } from 'vue'\n\nimport InkIcon from './InkIcon.vue'\n\nconst props = defineProps<{ panel: SidebarPanelInfo; rail: boolean }>()\nconst badge = computed(() => sidebarBadge(props.panel.badge))\n</script>\n\n<template>\n  <InkIcon v-if=\"panel.icon\" :icon=\"panel.icon\" />\n  <span v-if=\"!panel.icon || !rail\" class=\"ink-sidebar-label\">{{ panel.label }}</span>\n  <span class=\"ink-sidebar-badge\" aria-hidden=\"true\" :hidden=\"badge === null\">{{\n    badge\n  }}</span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAWA,IAAMY,IAAQC,GACRC,IAAQC,QAAeC,EAAaJ,EAAM,MAAM,KAAK,CAAC;;GAI3CC,EAAA,MAAM,QAArBb,EAAA,GAAAG,EAAgDC,GAAA;;IAApB,MAAMS,EAAA,MAAM;;GAC3B,CAAAA,EAAA,MAAM,QAAI,CAAKA,EAAA,QAA5Bb,EAAA,GAAAC,EAAoF,QAApFQ,GAAoFH,EAArBO,EAAA,MAAM,KAAK,GAAA,CAAA,KAAAQ,EAAA,IAAA,EAAA;GAC1Ed,EAES,QAAA;IAFH,OAAM;IAAoB,eAAY;IAAQ,QAAQO,EAAA,UAAK;GAC/D,GAAAR,EAAAQ,EAAA,KAAK,GAAA,GAAAJ,CAAA"}

package/dist/components/SignatureForm.js.map

@@ -1 +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 = withDefaults(\n  defineProps<{ fonts?: readonly string[] | undefined; select?: boolean }>(),\n  { fonts: undefined, select: true }\n)\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      if (props.select) {\n        setOptions({ templateId: t.id })\n        setTool('signature')\n      }\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":""}
+{"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 { useHasTool } from '../composables/useRegisteredTool'\nimport { useTool } from '../composables/useTool'\nimport { useToolOptionsWhile } from '../composables/useToolOptions'\nimport { useInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport type { SignatureOptions, SignatureTemplate } from '@inkbar/core'\n\nconst props = withDefaults(\n  defineProps<{ fonts?: readonly string[] | undefined; select?: boolean }>(),\n  { fonts: undefined, select: true }\n)\nconst emit = defineEmits<{ saved: [template: SignatureTemplate]; close: [] }>()\n\nconst ctx = useInkContext('InkSignatureDialog')\nconst { setTool } = useTool()\n// Without the signature tool, Save only stores the template, as signing a form field needs.\nconst hasSignatureTool = useHasTool(ctx, 'signature')\nconst { setOptions } = useToolOptionsWhile<SignatureOptions>(\n  'signature',\n  hasSignatureTool\n)\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      if (props.select && hasSignatureTool.value) {\n        setOptions({ templateId: t.id })\n        setTool('signature')\n      }\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.map

@@ -1 +1 @@
-{"version":3,"file":"SignatureForm.vue.d.ts","sourceRoot":"","sources":["../../src/components/SignatureForm.vue"],"names":[],"mappings":"AA8PA,OAAO,KAAK,EAAoB,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAGvE,KAAK,WAAW,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AA6R/E,QAAA,MAAM,YAAY;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"SignatureForm.vue.d.ts","sourceRoot":"","sources":["../../src/components/SignatureForm.vue"],"names":[],"mappings":"AAqQA,OAAO,KAAK,EAAoB,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAGvE,KAAK,WAAW,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAkS/E,QAAA,MAAM,YAAY;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/SignatureForm.vue_vue_type_script_setup_true_lang.js

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