@inkbar/vue 0.9.0 → 0.10.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkSidebar.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_Fragment","_renderList","_createVNode","SidebarTrigger","_createCommentVNode","_createElementVNode","_normalizeClass","_renderSlot","SidebarTrigger_default","InkSidebar_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","props","__props","open","useModel","entries","shallowRef","panels","computed","controller","createSidebarController","value","useId","layout","side","visible","list","state","useReadable","register","entry","e","arrange","sorted","x","a","y","b","i","view","s","panel","root","useTemplateRef","onMounted","onBeforeUnmount","openBlock","createElementBlock","mergeProps","unref","createCommentVNode","Fragment","renderList","t","createVNode","createElementVNode","normalizeClass","renderSlot","_ctx"],"sources":["../../src/components/InkSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A sidebar of `InkPanel`s: `createSidebar`'s markup on core's sidebar controller, which holds\n * the open state, the ARIA, the keys and the clicks. Rail and tabs render their triggers here;\n * in a stack each panel renders its own header. Panels register as they are set up and take\n * their place in DOM order once mounted, so a panel added later with `v-if` slots in where it\n * stands. A closed panel stays mounted and hidden, and the panels' content stays in place\n * across layouts, so its state survives switching.\n *\n * `v-model:open` is the open panel's id (or null) for rail and tabs, and the expanded ids for\n * stack. Left unbound, the first panel starts open. It needs no document, so it works outside\n * `InkRoot`. The server renders the root, the panels (the open one shown) and the stack\n * headers; rail and tab buttons follow once mounted, as the panels register after the root\n * has rendered.\n */\nimport {\n  createSidebarController,\n  type SidebarLayout,\n  type SidebarOpen,\n  type SidebarSide,\n} from '@inkbar/core/dom'\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  shallowRef,\n  useId,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { useReadable } from '../use-readable'\n\nimport { provideSidebarContext, type SidebarPanelEntry } from './sidebar-context'\nimport SidebarTrigger from './SidebarTrigger.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    side?: SidebarSide | undefined\n    layout?: SidebarLayout | undefined\n    /** Default true. False hides the whole sidebar and keeps its open panel, content and scroll for when it shows again. */\n    visible?: boolean | undefined\n  }>(),\n  { side: 'left', layout: 'rail', visible: true }\n)\n/** Undefined while unbound and untouched: the controller then opens the first panel. */\nconst open = defineModel<SidebarOpen | undefined>('open')\n\nconst entries = shallowRef<readonly SidebarPanelEntry[]>([])\nconst panels = computed(() => entries.value.map((e) => e.info()))\n\n// Pending until mounted: the panels register one by one while they are set up, and an open id\n// not registered yet is not a removed panel.\nconst controller = createSidebarController({\n  layout: props.layout,\n  side: props.side,\n  visible: props.visible,\n  panels: [],\n  ...(open.value !== undefined && { open: open.value }),\n  pending: true,\n  onOpenChange: (value) => {\n    open.value = value\n  },\n  // The same ids on the server and the client.\n  idPrefix: useId(),\n})\n// Sync, so a panel set up next reads the attributes its registration gives (on the server too).\nwatch(\n  () => [props.layout, props.side, props.visible, panels.value, open.value] as const,\n  ([layout, side, visible, list, value]) =>\n    controller.update({\n      layout,\n      side,\n      visible,\n      panels: list,\n      ...(value !== undefined && { open: value }),\n    }),\n  { flush: 'sync' }\n)\nconst state = useReadable(controller.state, controller.state.get())\n\nfunction register(entry: SidebarPanelEntry): () => void {\n  entries.value = [...entries.value, entry]\n  return () => {\n    entries.value = entries.value.filter((e) => e !== entry)\n  }\n}\n\nfunction arrange(): void {\n  const list = entries.value\n  const sorted = [...list].sort((a, b) => {\n    const x = a.element()\n    const y = b.element()\n    if (!x || !y || x === y) return 0\n    return x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1\n  })\n  if (sorted.some((e, i) => e !== list[i])) entries.value = sorted\n}\n\nprovideSidebarContext({ controller, state, register, arrange })\n\nconst view = computed(() => {\n  const s = state.value\n  return {\n    root: controller.rootAttrs(),\n    tablist: controller.tablistAttrs(),\n    triggers: s.panels.map((panel) => ({\n      panel,\n      attrs: controller.triggerAttrs(panel.id),\n    })),\n  }\n})\n\nconst root = useTemplateRef<HTMLElement>('root')\n// The controller handles the triggers' clicks and keys, stack headers included.\nonMounted(() => {\n  controller.bindTriggers(root.value!)\n  controller.update({ pending: false })\n})\nonBeforeUnmount(() => controller.destroy())\n</script>\n\n<template>\n  <div ref=\"root\" class=\"ink-sidebar\" v-bind=\"view.root\">\n    <div\n      v-if=\"state.layout !== 'stack'\"\n      :class=\"state.layout === 'rail' ? 'ink-sidebar-rail' : 'ink-sidebar-tabs'\"\n      v-bind=\"view.tablist\"\n    >\n      <button v-for=\"t in view.triggers\" :key=\"t.panel.id\" v-bind=\"t.attrs\">\n        <SidebarTrigger :panel=\"t.panel\" :rail=\"state.layout === 'rail'\" />\n      </button>\n    </div>\n    <!-- One element in every layout, so the panels are never remounted. -->\n    <div :class=\"{ 'ink-sidebar-panels': state.layout !== 'stack' }\"><slot /></div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/InkThumbnail.js

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

package/dist/components/InkThumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkThumbnail.js","names":["_sfc_main","InkThumbnail_vue_vue_type_script_setup_true_lang_default","InkThumbnail_default"],"sources":["../../src/components/InkThumbnail.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * One page as a static image, with its live annotations and plugin marks: core's thumbnail\n * painter on this element, which sizes it, names it (\"Page N\" unless `label` says otherwise)\n * and draws it once it nears the visible area. `page` is 0-based. `width` (default 120) or\n * `height` sets the size; the other follows the page. It is not focusable and does nothing on\n * click: wrap it in the control you need. Inside `InkRoot`; it renders empty on the server.\n */\nimport {\n  createThumbnailPainter,\n  type ThumbnailOptions,\n  type ThumbnailPainter,\n} from '@inkbar/core/dom'\nimport { onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'\n\nimport { injectInkContext } from '../context'\nimport { toReadable } from '../to-readable'\n\nconst props = withDefaults(\n  defineProps<{\n    page: number\n    width?: number | undefined\n    height?: number | undefined\n    annotations?: boolean\n    marks?: boolean\n    label?: string | undefined\n  }>(),\n  {\n    width: undefined,\n    height: undefined,\n    annotations: true,\n    marks: true,\n    label: undefined,\n  }\n)\n\nconst ctx = injectInkContext()\nconst deps = {\n  document: toReadable(() => ctx.document.value),\n  pluginHost: toReadable(() => ctx.pluginHost.value),\n}\nconst options = (): ThumbnailOptions => ({\n  page: props.page,\n  width: props.width,\n  height: props.height,\n  annotations: props.annotations,\n  marks: props.marks,\n  label: props.label,\n})\n\nconst el = useTemplateRef<HTMLElement>('el')\nlet painter: ThumbnailPainter | null = null\nonMounted(() => {\n  const p = createThumbnailPainter(el.value!, deps, options())\n  painter = p\n  watch(options, (next) => p.update(next))\n})\nonBeforeUnmount(() => {\n  painter?.destroy()\n  painter = null\n})\n</script>\n\n<template>\n  <!-- The class is the painter's too: kept here, a re-render never drops it. -->\n  <div ref=\"el\" class=\"ink-thumbnail\" />\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    page: number;
+    width?: number | undefined;
+    height?: number | undefined;
+    annotations?: boolean;
+    marks?: boolean;
+    label?: string | undefined;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    width: number | undefined;
+    annotations: boolean;
+    label: string | undefined;
+    height: number | undefined;
+    marks: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=InkThumbnail.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkThumbnail.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkThumbnail.vue"],"names":[],"mappings":"AAuFA,KAAK,WAAW,GAAG;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC3B,CAAC;AA+DJ,QAAA,MAAM,YAAY;;;;;;6EAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/InkThumbnail.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,49 @@
+import { injectInkContext as e } from "../context.js";
+import { toReadable as t } from "../to-readable.js";
+import { createElementBlock as n, defineComponent as r, onBeforeUnmount as i, onMounted as a, openBlock as o, useTemplateRef as s, watch as c } from "vue";
+import { createThumbnailPainter as l } from "@inkbar/core/dom";
+//#region src/components/InkThumbnail.vue?vue&type=script&setup=true&lang.ts
+var u = /*@__PURE__*/ r({
+	__name: "InkThumbnail",
+	props: {
+		page: {},
+		width: { default: void 0 },
+		height: { default: void 0 },
+		annotations: {
+			type: Boolean,
+			default: !0
+		},
+		marks: {
+			type: Boolean,
+			default: !0
+		},
+		label: { default: void 0 }
+	},
+	setup(r) {
+		let u = r, d = e(), f = {
+			document: t(() => d.document.value),
+			pluginHost: t(() => d.pluginHost.value)
+		}, p = () => ({
+			page: u.page,
+			width: u.width,
+			height: u.height,
+			annotations: u.annotations,
+			marks: u.marks,
+			label: u.label
+		}), m = s("el"), h = null;
+		return a(() => {
+			let e = l(m.value, f, p());
+			h = e, c(p, (t) => e.update(t));
+		}), i(() => {
+			h?.destroy(), h = null;
+		}), (e, t) => (o(), n("div", {
+			ref_key: "el",
+			ref: m,
+			class: "ink-thumbnail"
+		}, null, 512));
+	}
+});
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=InkThumbnail.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkThumbnail.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","InkThumbnail_vue_vue_type_script_setup_true_lang_default","props","__props","ctx","injectInkContext","deps","toReadable","options","el","useTemplateRef","painter","onMounted","p","createThumbnailPainter","watch","next","onBeforeUnmount","openBlock","createElementBlock"],"sources":["../../src/components/InkThumbnail.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * One page as a static image, with its live annotations and plugin marks: core's thumbnail\n * painter on this element, which sizes it, names it (\"Page N\" unless `label` says otherwise)\n * and draws it once it nears the visible area. `page` is 0-based. `width` (default 120) or\n * `height` sets the size; the other follows the page. It is not focusable and does nothing on\n * click: wrap it in the control you need. Inside `InkRoot`; it renders empty on the server.\n */\nimport {\n  createThumbnailPainter,\n  type ThumbnailOptions,\n  type ThumbnailPainter,\n} from '@inkbar/core/dom'\nimport { onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'\n\nimport { injectInkContext } from '../context'\nimport { toReadable } from '../to-readable'\n\nconst props = withDefaults(\n  defineProps<{\n    page: number\n    width?: number | undefined\n    height?: number | undefined\n    annotations?: boolean\n    marks?: boolean\n    label?: string | undefined\n  }>(),\n  {\n    width: undefined,\n    height: undefined,\n    annotations: true,\n    marks: true,\n    label: undefined,\n  }\n)\n\nconst ctx = injectInkContext()\nconst deps = {\n  document: toReadable(() => ctx.document.value),\n  pluginHost: toReadable(() => ctx.pluginHost.value),\n}\nconst options = (): ThumbnailOptions => ({\n  page: props.page,\n  width: props.width,\n  height: props.height,\n  annotations: props.annotations,\n  marks: props.marks,\n  label: props.label,\n})\n\nconst el = useTemplateRef<HTMLElement>('el')\nlet painter: ThumbnailPainter | null = null\nonMounted(() => {\n  const p = createThumbnailPainter(el.value!, deps, options())\n  painter = p\n  watch(options, (next) => p.update(next))\n})\nonBeforeUnmount(() => {\n  painter?.destroy()\n  painter = null\n})\n</script>\n\n<template>\n  <!-- The class is the painter's too: kept here, a re-render never drops it. -->\n  <div ref=\"el\" class=\"ink-thumbnail\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAkBA,IAAMG,IAAQC,GAkBRC,IAAMC,EAAiB,GACvBC,IAAO;GACX,UAAUC,QAAiBH,EAAI,SAAS,KAAK;GAC7C,YAAYG,QAAiBH,EAAI,WAAW,KAAK;EACnD,GACMI,WAAmC;GACvC,MAAMN,EAAM;GACZ,OAAOA,EAAM;GACb,QAAQA,EAAM;GACd,aAAaA,EAAM;GACnB,OAAOA,EAAM;GACb,OAAOA,EAAM;EACf,IAEMO,IAAKC,EAA4B,IAAI,GACvCC,IAAmC;SACvCC,QAAgB;GACd,IAAMC,IAAIC,EAAuBL,EAAG,OAAQH,GAAME,EAAQ,CAAC;GAE3D,AADA,IAAUK,GACVE,EAAMP,IAAU,MAASK,EAAE,OAAOG,CAAI,CAAC;EACzC,CAAC,GACDC,QAAsB;GAEpB,AADAN,GAAS,QAAQ,GACjB,IAAU;EACZ,CAAC,cAKCZ,EAAA,GAAAC,EAAsC,OAAA;GAA7B,SAAA;GAAJ,KAAIS;GAAK,OAAM"}

package/dist/components/InkThumbnails.js

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

package/dist/components/InkThumbnails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkThumbnails.js","names":["_sfc_main","InkThumbnails_vue_vue_type_script_setup_true_lang_default","InkThumbnails_default"],"sources":["../../src/components/InkThumbnails.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * The pages as a list of thumbnails: `createThumbnails`' markup on core's thumbnails\n * controller, which holds the current page, the keys, the clicks, the Tab stop and the window.\n * Only the items near the visible part are mounted, each placed at its offset over a spacer of\n * the full height, and each holds an `InkThumbnail`. An item is a button that scrolls the\n * viewport to its page; the current page's has `aria-current=\"page\"`.\n *\n * `pages` lists 0-based pages in order (default: all). The `item` slot, given `{ page, current }`,\n * renders inside each item after its number. The item's height is fixed from the page's, so\n * keep what you add out of the flow (position it absolutely) or small. Inside `InkRoot`; it\n * renders empty on the server.\n */\nimport {\n  createThumbnailsController,\n  THUMBNAIL_WIDTH,\n  type ThumbnailsController,\n  type ThumbnailsOptions,\n  type ThumbnailsState,\n} from '@inkbar/core/dom'\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { injectInkContext } from '../context'\nimport { toReadable } from '../to-readable'\n\nimport InkThumbnail from './InkThumbnail.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    pages?: readonly number[] | undefined\n    width?: number | undefined\n    annotations?: boolean\n    marks?: boolean\n  }>(),\n  { pages: undefined, width: undefined, annotations: true, marks: true }\n)\n\ndefineSlots<{\n  item?(props: { page: number; current: boolean }): unknown\n}>()\n\nconst ctx = injectInkContext()\nconst deps = {\n  document: toReadable(() => ctx.document.value),\n  pluginHost: toReadable(() => ctx.pluginHost.value),\n  viewport: toReadable(() => ctx.viewport.value),\n}\nconst options = (): ThumbnailsOptions => ({\n  pages: props.pages,\n  width: props.width,\n  annotations: props.annotations,\n  marks: props.marks,\n})\n\nconst state = shallowRef<ThumbnailsState>({\n  pages: [],\n  current: -1,\n  window: { start: 0, end: 0 },\n  offsets: [0],\n  width: THUMBNAIL_WIDTH,\n})\nlet controller: ThumbnailsController | null = null\nconst items = computed(() => {\n  const { pages, current, window, offsets } = state.value\n  return pages.slice(window.start, window.end).map((page, k) => {\n    const top = offsets[window.start + k]!\n    const bottom = offsets[window.start + k + 1]!\n    // Only a mounted controller has a window, so `controller` is set here.\n    const attrs = controller?.itemAttrs(window.start + k) ?? {}\n    return { page, current: page === current, top, height: bottom - top, attrs }\n  })\n})\n\nconst scroller = useTemplateRef<HTMLElement>('scroller')\nlet stopState: (() => void) | null = null\nonMounted(() => {\n  const c = createThumbnailsController(deps, options())\n  controller = c\n  state.value = c.state.get()\n  stopState = c.state.subscribe((s) => {\n    state.value = s\n  })\n  watch(options, (next) => c.update(next))\n  c.attach(scroller.value!)\n})\nonBeforeUnmount(() => {\n  stopState?.()\n  stopState = null\n  controller?.destroy()\n  controller = null\n})\n</script>\n\n<template>\n  <div ref=\"scroller\" class=\"ink-thumbnails\" data-ink-thumbnails role=\"list\">\n    <div\n      class=\"ink-thumbnails-spacer\"\n      aria-hidden=\"true\"\n      :style=\"{ height: `${state.offsets.at(-1) ?? 0}px` }\"\n    />\n    <div\n      v-for=\"item in items\"\n      :key=\"item.page\"\n      class=\"ink-thumbnails-entry\"\n      v-bind=\"item.attrs\"\n      :style=\"{ top: `${item.top}px`, height: `${item.height}px` }\"\n    >\n      <!-- The controller sets the tabindex. The thumbnail names the button \"Page N\"; the\n           visible number repeats it. -->\n      <button\n        type=\"button\"\n        class=\"ink-thumbnails-item\"\n        :data-ink-thumbnail-item=\"item.page\"\n        :aria-current=\"item.current ? 'page' : undefined\"\n      >\n        <InkThumbnail\n          :page=\"item.page\"\n          :width=\"state.width\"\n          :annotations=\"annotations\"\n          :marks=\"marks\"\n        />\n        <span class=\"ink-thumbnails-label\" aria-hidden=\"true\">{{ item.page + 1 }}</span>\n        <slot name=\"item\" :page=\"item.page\" :current=\"item.current\" />\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    pages?: readonly number[] | undefined;
+    width?: number | undefined;
+    annotations?: boolean;
+    marks?: boolean;
+};
+type __VLS_Slots = {
+    item?(props: {
+        page: number;
+        current: boolean;
+    }): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    width: number | undefined;
+    annotations: boolean;
+    marks: boolean;
+    pages: readonly number[] | undefined;
+}, {}, {}, {}, 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=InkThumbnails.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkThumbnails.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkThumbnails.vue"],"names":[],"mappings":"AA0KA,KAAK,WAAW,GAAG;IACf,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAC;AAMJ,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;CAC1D,CAAC;AAgIF,QAAA,MAAM,UAAU;;;;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/InkThumbnails.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,107 @@
+import { injectInkContext as e } from "../context.js";
+import { toReadable as t } from "../to-readable.js";
+import n from "./InkThumbnail.js";
+import { Fragment as r, computed as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeProps as l, normalizeStyle as u, onBeforeUnmount as d, onMounted as f, openBlock as p, renderList as m, renderSlot as h, shallowRef as g, toDisplayString as _, useTemplateRef as v, watch as y } from "vue";
+import { THUMBNAIL_WIDTH as b, createThumbnailsController as x } from "@inkbar/core/dom";
+//#region src/components/InkThumbnails.vue?vue&type=script&setup=true&lang.ts
+var S = ["data-ink-thumbnail-item", "aria-current"], C = {
+	class: "ink-thumbnails-label",
+	"aria-hidden": "true"
+}, w = /*@__PURE__*/ c({
+	__name: "InkThumbnails",
+	props: {
+		pages: { default: void 0 },
+		width: { default: void 0 },
+		annotations: {
+			type: Boolean,
+			default: !0
+		},
+		marks: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(c) {
+		let w = c, T = e(), E = {
+			document: t(() => T.document.value),
+			pluginHost: t(() => T.pluginHost.value),
+			viewport: t(() => T.viewport.value)
+		}, D = () => ({
+			pages: w.pages,
+			width: w.width,
+			annotations: w.annotations,
+			marks: w.marks
+		}), O = g({
+			pages: [],
+			current: -1,
+			window: {
+				start: 0,
+				end: 0
+			},
+			offsets: [0],
+			width: b
+		}), k = null, A = i(() => {
+			let { pages: e, current: t, window: n, offsets: r } = O.value;
+			return e.slice(n.start, n.end).map((e, i) => {
+				let a = r[n.start + i], o = r[n.start + i + 1], s = k?.itemAttrs(n.start + i) ?? {};
+				return {
+					page: e,
+					current: e === t,
+					top: a,
+					height: o - a,
+					attrs: s
+				};
+			});
+		}), j = v("scroller"), M = null;
+		return f(() => {
+			let e = x(E, D());
+			k = e, O.value = e.state.get(), M = e.state.subscribe((e) => {
+				O.value = e;
+			}), y(D, (t) => e.update(t)), e.attach(j.value);
+		}), d(() => {
+			M?.(), M = null, k?.destroy(), k = null;
+		}), (e, t) => (p(), a("div", {
+			ref_key: "scroller",
+			ref: j,
+			class: "ink-thumbnails",
+			"data-ink-thumbnails": "",
+			role: "list"
+		}, [o("div", {
+			class: "ink-thumbnails-spacer",
+			"aria-hidden": "true",
+			style: u({ height: `${O.value.offsets.at(-1) ?? 0}px` })
+		}, null, 4), (p(!0), a(r, null, m(A.value, (t) => (p(), a("div", l({
+			key: t.page,
+			class: "ink-thumbnails-entry"
+		}, { ref_for: !0 }, t.attrs, { style: {
+			top: `${t.top}px`,
+			height: `${t.height}px`
+		} }), [o("button", {
+			type: "button",
+			class: "ink-thumbnails-item",
+			"data-ink-thumbnail-item": t.page,
+			"aria-current": t.current ? "page" : void 0
+		}, [
+			s(n, {
+				page: t.page,
+				width: O.value.width,
+				annotations: c.annotations,
+				marks: c.marks
+			}, null, 8, [
+				"page",
+				"width",
+				"annotations",
+				"marks"
+			]),
+			o("span", C, _(t.page + 1), 1),
+			h(e.$slots, "item", {
+				page: t.page,
+				current: t.current
+			})
+		], 8, S)], 16))), 128))], 512));
+	}
+});
+//#endregion
+export { w as default };
+
+//# sourceMappingURL=InkThumbnails.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkThumbnails.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_normalizeStyle","_Fragment","_renderList","_mergeProps","_createVNode","InkThumbnail","_toDisplayString","_renderSlot","InkThumbnail_default","_hoisted_1","_hoisted_2","InkThumbnails_vue_vue_type_script_setup_true_lang_default","props","__props","ctx","injectInkContext","deps","toReadable","options","state","shallowRef","THUMBNAIL_WIDTH","controller","items","computed","pages","window","top","offsets","k","bottom","attrs","page","current","scroller","useTemplateRef","stopState","onMounted","c","createThumbnailsController","s","watch","next","onBeforeUnmount","openBlock","createElementBlock","createElementVNode","normalizeStyle","Fragment","renderList","mergeProps","item","createVNode","toDisplayString","renderSlot","_ctx"],"sources":["../../src/components/InkThumbnails.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * The pages as a list of thumbnails: `createThumbnails`' markup on core's thumbnails\n * controller, which holds the current page, the keys, the clicks, the Tab stop and the window.\n * Only the items near the visible part are mounted, each placed at its offset over a spacer of\n * the full height, and each holds an `InkThumbnail`. An item is a button that scrolls the\n * viewport to its page; the current page's has `aria-current=\"page\"`.\n *\n * `pages` lists 0-based pages in order (default: all). The `item` slot, given `{ page, current }`,\n * renders inside each item after its number. The item's height is fixed from the page's, so\n * keep what you add out of the flow (position it absolutely) or small. Inside `InkRoot`; it\n * renders empty on the server.\n */\nimport {\n  createThumbnailsController,\n  THUMBNAIL_WIDTH,\n  type ThumbnailsController,\n  type ThumbnailsOptions,\n  type ThumbnailsState,\n} from '@inkbar/core/dom'\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { injectInkContext } from '../context'\nimport { toReadable } from '../to-readable'\n\nimport InkThumbnail from './InkThumbnail.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    pages?: readonly number[] | undefined\n    width?: number | undefined\n    annotations?: boolean\n    marks?: boolean\n  }>(),\n  { pages: undefined, width: undefined, annotations: true, marks: true }\n)\n\ndefineSlots<{\n  item?(props: { page: number; current: boolean }): unknown\n}>()\n\nconst ctx = injectInkContext()\nconst deps = {\n  document: toReadable(() => ctx.document.value),\n  pluginHost: toReadable(() => ctx.pluginHost.value),\n  viewport: toReadable(() => ctx.viewport.value),\n}\nconst options = (): ThumbnailsOptions => ({\n  pages: props.pages,\n  width: props.width,\n  annotations: props.annotations,\n  marks: props.marks,\n})\n\nconst state = shallowRef<ThumbnailsState>({\n  pages: [],\n  current: -1,\n  window: { start: 0, end: 0 },\n  offsets: [0],\n  width: THUMBNAIL_WIDTH,\n})\nlet controller: ThumbnailsController | null = null\nconst items = computed(() => {\n  const { pages, current, window, offsets } = state.value\n  return pages.slice(window.start, window.end).map((page, k) => {\n    const top = offsets[window.start + k]!\n    const bottom = offsets[window.start + k + 1]!\n    // Only a mounted controller has a window, so `controller` is set here.\n    const attrs = controller?.itemAttrs(window.start + k) ?? {}\n    return { page, current: page === current, top, height: bottom - top, attrs }\n  })\n})\n\nconst scroller = useTemplateRef<HTMLElement>('scroller')\nlet stopState: (() => void) | null = null\nonMounted(() => {\n  const c = createThumbnailsController(deps, options())\n  controller = c\n  state.value = c.state.get()\n  stopState = c.state.subscribe((s) => {\n    state.value = s\n  })\n  watch(options, (next) => c.update(next))\n  c.attach(scroller.value!)\n})\nonBeforeUnmount(() => {\n  stopState?.()\n  stopState = null\n  controller?.destroy()\n  controller = null\n})\n</script>\n\n<template>\n  <div ref=\"scroller\" class=\"ink-thumbnails\" data-ink-thumbnails role=\"list\">\n    <div\n      class=\"ink-thumbnails-spacer\"\n      aria-hidden=\"true\"\n      :style=\"{ height: `${state.offsets.at(-1) ?? 0}px` }\"\n    />\n    <div\n      v-for=\"item in items\"\n      :key=\"item.page\"\n      class=\"ink-thumbnails-entry\"\n      v-bind=\"item.attrs\"\n      :style=\"{ top: `${item.top}px`, height: `${item.height}px` }\"\n    >\n      <!-- The controller sets the tabindex. The thumbnail names the button \"Page N\"; the\n           visible number repeats it. -->\n      <button\n        type=\"button\"\n        class=\"ink-thumbnails-item\"\n        :data-ink-thumbnail-item=\"item.page\"\n        :aria-current=\"item.current ? 'page' : undefined\"\n      >\n        <InkThumbnail\n          :page=\"item.page\"\n          :width=\"state.width\"\n          :annotations=\"annotations\"\n          :marks=\"marks\"\n        />\n        <span class=\"ink-thumbnails-label\" aria-hidden=\"true\">{{ item.page + 1 }}</span>\n        <slot name=\"item\" :page=\"item.page\" :current=\"item.current\" />\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAkCA,IAAMe,IAAQC,GAcRC,IAAMC,EAAiB,GACvBC,IAAO;GACX,UAAUC,QAAiBH,EAAI,SAAS,KAAK;GAC7C,YAAYG,QAAiBH,EAAI,WAAW,KAAK;GACjD,UAAUG,QAAiBH,EAAI,SAAS,KAAK;EAC/C,GACMI,WAAoC;GACxC,OAAON,EAAM;GACb,OAAOA,EAAM;GACb,aAAaA,EAAM;GACnB,OAAOA,EAAM;EACf,IAEMO,IAAQC,EAA4B;GACxC,OAAO,CAAC;GACR,SAAS;GACT,QAAQ;IAAE,OAAO;IAAG,KAAK;GAAE;GAC3B,SAAS,CAAC,CAAC;GACX,OAAOC;EACT,CAAC,GACGC,IAA0C,MACxCC,IAAQC,QAAe;GAC3B,IAAM,EAAE,UAAO,YAAS,WAAQ,eAAYL,EAAM;GAClD,OAAOM,EAAM,MAAMC,EAAO,OAAOA,EAAO,GAAG,CAAC,CAAC,KAAK,GAAM,MAAM;IAC5D,IAAMC,IAAMC,EAAQF,EAAO,QAAQG,IAC7BC,IAASF,EAAQF,EAAO,QAAQG,IAAI,IAEpCE,IAAQT,GAAY,UAAUI,EAAO,QAAQG,CAAC,KAAK,CAAC;IAC1D,OAAO;KAAE;KAAM,SAASG,MAASC;KAAS;KAAK,QAAQH,IAASH;KAAK;IAAM;GAC7E,CAAC;EACH,CAAC,GAEKO,IAAWC,EAA4B,UAAU,GACnDC,IAAiC;SACrCC,QAAgB;GACd,IAAMC,IAAIC,EAA2BvB,GAAME,EAAQ,CAAC;GAOpD,AANA,IAAaoB,GACb,EAAM,QAAQA,EAAE,MAAM,IAAI,GAC1B,IAAYA,EAAE,MAAM,WAAW,MAAM;IACnC,EAAM,QAAQE;GAChB,CAAC,GACDC,EAAMvB,IAAU,MAASoB,EAAE,OAAOI,CAAI,CAAC,GACvCJ,EAAE,OAAOJ,EAAS,KAAM;EAC1B,CAAC,GACDS,QAAsB;GAIpB,AAHAP,IAAY,GACZ,IAAY,MACZd,GAAY,QAAQ,GACpB,IAAa;EACf,CAAC,cAICzB,EAAA,GAAAC,EA+BM,OAAA;GA/BG,SAAA;GAAJ,KAAIoC;GAAW,OAAM;GAAiB,uBAAA;GAAoB,MAAK;EAClEnC,GAAAA,CAAAA,EAIE,OAAA;GAHA,OAAM;GACN,eAAY;GACX,OAAKC,EAAA,EAAA,QAAA,GAAemB,EAAA,MAAM,QAAQ,GAAE,EAAA,KAAA,EAAA,IAAA,CAAA;EAEvCtB,GAAAA,MAAAA,CAAAA,IAAAA,EAAA,EAAA,GAAAC,EAwBMG,GAAA,MAAAC,EAvBWqB,EAAA,QAAR,OADT1B,EAAA,GAAAC,EAwBM,OAxBNK,EAwBM;GAtBH,KAAKgD,EAAK;GACX,OAAM;EACE,GAAA,EAAA,SAAA,GAAA,GAAAA,EAAK,OAAK,EACjB,OAAK;GAAA,KAAA,GAAYA,EAAK,IAAG;GAAA,QAAA,GAAiBA,EAAK,OAAM;EAAA,EAAA,CAAA,GAAA,CAItDpD,EAcS,UAAA;GAbP,MAAK;GACL,OAAM;GACL,2BAAyBoD,EAAK;GAC9B,gBAAcA,EAAK,UAAO,SAAY,KAAA;;GAEvC/C,EAKEC,GAAA;IAJC,MAAM8C,EAAK;IACX,OAAOhC,EAAA,MAAM;IACb,aAAaN,EAAA;IACb,OAAOA,EAAA;;;;;;;GAEVd,EAAgF,QAAhFW,GAAgFJ,EAAvB6C,EAAK,OAAI,CAAA,GAAA,CAAA;GAClE5C,EAA8DgD,EAAA,QAAA,QAAA;IAA3C,MAAMJ,EAAK;IAAO,SAASA,EAAK"}

package/dist/components/InkZoomSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkZoomSelect.js","names":["_sfc_main","InkZoomSelect_vue_vue_type_script_setup_true_lang_default","InkZoomSelect_default"],"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":""}
+{"version":3,"file":"InkZoomSelect.js","names":["_sfc_main","InkZoomSelect_vue_vue_type_script_setup_true_lang_default","InkZoomSelect_default"],"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":""}

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":";;;;;;;AAwBA,IAAMa,IAAS;;;EAEf,IAAM,EAAE,SAAM,UAAO,eAAYE,EAAQ,GAEnCC,KAAS,MAAcC,EAAY,MAAM,MAAM,KAAK,IAAIC,IAAIC,CAAC,IAAI,IAAK,GAEtEC,IAASC,QACb,OAAOC,EAAK,SAAU,YAAYN,EAAMM,EAAK,KAAK,MAAM,KAAA,IAAYA,EAAK,QAAQ,IACnF,GACMC,IAAQF,QAAe;GAC3B,IAAMF,IAAIG,EAAK;GAEf,OADI,OAAOH,KAAM,WACVC,EAAO,UAAU,OAAO,OAAOJ,EAAMG,CAAC,CAAC,IAAI,GAAGN,IAASM,MAD5BA;EAEpC,CAAC;EAED,SAASK,EAAS,GAAkB;GAClC,IAAI,OAAOC,KAAM,YAAYA,MAAMF,EAAM,OAAO;GAChD,IAAMG,IACJD,MAAM,eAAeA,MAAM,aAAaA,IAAI,OAAOA,EAAE,QAAQZ,GAAQ,EAAE,CAAC;GAC1E,EAAQa,CAAI;EACd;EAEA,IAAMC,IAAO,CACX;GAAE,OAAO;GAAa,OAAO;EAAY,GACzC;GAAE,OAAO;GAAY,OAAO;EAAW,CACzC,GAEMC,IAAe,EAAE,cAAc,OAAO,GACtCC,KAAW,MAAc,GAAG,KAAK,MAAMV,IAAI,GAAG,EAAE,IAEhDW,IAAST,QAAe;GAC5B,IAAMU,IAAOd,EAAY,KAAK,OAAO;IAAE,GAAGC;IAAG,OAAO,OAAOA,CAAC;IAAG,OAAOW,EAAQX,CAAC;GAAE,EAAE,GAC7Ec,IAAIZ,EAAO;GAEjB,OADIY,MAAM,QAAMD,EAAK,KAAK;IAAE,GAAGC;IAAG,OAAO,GAAGnB,IAASmB;IAAK,OAAOH,EAAQI,EAAM,KAAK;GAAE,CAAC,GAChFF,EAAK,MAAM,GAAG,MAAMG,EAAE,IAAIC,EAAE,CAAC;EACtC,CAAC;oBAICnC,EAAA,GAAAC,EAgDaC,EAAAqC,CAAA,GAAA;GAhDA,eAAahB,EAAA;GAAQ,uBAAoBC;;GACpD,SAAArB,QASgB,CAThBC,EASgBF,EAAAwC,CAAA,GAThBrC,EASgB;IARd,OAAM;IACN,wBAAA;GACQ,GAAAuB,CAAY,GAAA;IAEpB,SAAAzB,QAAwC,CAAxCC,EAAwCF,EAAA0C,CAAA,GAAA,EAA3B,OAAM,mBAAkB,CAAA,GACrCxC,EAEaF,EAAA2C,CAAA,GAAA,EAFD,OAAM,kBAAiB,GAAA;KACjC,SAAA1C,QAA0C,CAA1CC,EAA0CE,GAAA;MAAhC,MAAMJ,EAAA4C,CAAA;MAAc,MAAM;;;;;GAGxC1C,GAAAA,EAAAA,GAAAA,EAoCeF,EAAA6C,CAAA,GAAA,MAAA;IAnCb,SAAA5C,QAkCgB,CAlChBC,EAkCgBF,EAAA8C,CAAA,GAAA;KAjCd,OAAM;KACN,2BAAA;KACA,UAAS;KACT,MAAK;KACJ,eAAa;;KAEd,SAAA7C,QA0BiB,CA1BjBC,EA0BiBF,EAAA+C,CAAA,GAAA,MAAA;MAxBb,SAAA9C,QAAiB;QADnBH,EAAA,GAAAO,EAWaC,GAAA,MAAAC,EAVCkB,IAAL,MADTvB,EAWaF,EAAAmD,CAAA,GAAA;QATV,KAAKC,EAAE;QACP,OAAOA,EAAE;QACV,OAAM;QACN,wBAAA;;QAEA,SAAAnD,QAA8C,CAA9CC,EAA8CF,EAAAqD,CAAA,GAAA,MAAA;SAA9B,SAAApD,QAAa,CAAVO,EAAAC,EAAA2C,EAAE,KAAK,GAAA,CAAA,CAAA,CAAA;;QAC1BlD,GAAAA,IAAAA,GAAAA,EAEsBF,EAAAwD,CAAA,GAAA,EAFD,OAAM,uBAAsB,GAAA;SAC/C,SAAAvD,QAAoC,CAApCC,EAAoCE,GAAA;UAA1B,MAAMJ,EAAAyD,CAAA;UAAQ,MAAM;;;;;;OAGlCvD,EAAgDF,EAAA0D,CAAA,GAAA,EAA/B,OAAM,uBAAsB,CAAA;QAC7C5D,EAAA,EAAA,GAAAO,EAWaC,GAAA,MAAAC,EAVCqB,EAAA,QAAL,OADT9B,EAAA,GAAAC,EAWaC,EAAAmD,CAAA,GAAA;QATV,KAAKC,EAAE;QACP,OAAOA,EAAE;QACV,OAAM;QACN,wBAAA;;QAEA,SAAAnD,QAA8C,CAA9CC,EAA8CF,EAAAqD,CAAA,GAAA,MAAA;SAA9B,SAAApD,QAAa,CAAVO,EAAAC,EAAA2C,EAAE,KAAK,GAAA,CAAA,CAAA,CAAA;;QAC1BlD,GAAAA,IAAAA,GAAAA,EAEsBF,EAAAwD,CAAA,GAAA,EAFD,OAAM,uBAAsB,GAAA;SAC/C,SAAAvD,QAAoC,CAApCC,EAAoCE,GAAA;UAA1B,MAAMJ,EAAAyD,CAAA;UAAQ,MAAM"}
+{"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"}