@inkbar/vue 0.0.0-stage → 0.1.1

package/dist/components/InkPageCount.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,18 @@
+import { usePage as e } from "../composables/usePage.js";
+import { computed as t, createElementBlock as n, defineComponent as r, openBlock as i, toDisplayString as a } from "vue";
+//#region src/components/InkPageCount.vue?vue&type=script&setup=true&lang.ts
+var o = {
+	class: "ink-page-count",
+	"data-ink-page-count": "",
+	"aria-live": "polite"
+}, s = /*@__PURE__*/ r({
+	__name: "InkPageCount",
+	setup(r) {
+		let { count: s } = e(), c = t(() => `of ${s.value}`);
+		return (e, t) => (i(), n("span", o, a(c.value), 1));
+	}
+});
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=InkPageCount.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkPageCount.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_toDisplayString","_hoisted_1","InkPageCount_vue_vue_type_script_setup_true_lang_default","usePage","text","computed","count","openBlock","createElementBlock","toDisplayString"],"sources":["../../src/components/InkPageCount.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { usePage } from '../composables/usePage'\n\nconst { count } = usePage()\nconst text = computed(() => `of ${count.value}`)\n</script>\n\n<template>\n  <span class=\"ink-page-count\" data-ink-page-count aria-live=\"polite\">{{ text }}</span>\n</template>\n"],"mappings":";;;;;;;;;;EAKA,IAAM,EAAE,aAAUK,EAAQ,GACpBC,IAAOC,QAAe,MAAMC,EAAM,OAAO;oBAI7CR,EAAA,GAAAC,EAAqF,QAArFE,GAAqFD,EAAdI,EAAA,KAAI,GAAA,CAAA"}

package/dist/components/InkPageInput.js

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

package/dist/components/InkPageInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkPageInput.js","names":["_sfc_main","InkPageInput_vue_vue_type_script_setup_true_lang_default","InkPageInput_default"],"sources":["../../src/components/InkPageInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\n\nimport { usePage } from '../composables/usePage'\n\nconst { current, count, goTo } = usePage()\n// `v-model` on a number input hands back a number once the user types.\nconst draft = ref<string | number>(String(current.value + 1))\nwatch(current, (c) => (draft.value = String(c + 1)))\n\n/** 1-based in the input, 0-based in the viewport. Out of range resets to the current page. */\nfunction commit(): void {\n  const n = Number(draft.value)\n  if (Number.isInteger(n) && n >= 1 && n <= count.value) goTo(n - 1)\n  else draft.value = String(current.value + 1)\n}\n</script>\n\n<template>\n  <input\n    v-model=\"draft\"\n    class=\"ink-page-input\"\n    data-ink-page-input\n    type=\"number\"\n    inputmode=\"numeric\"\n    aria-label=\"Page\"\n    :min=\"1\"\n    :max=\"count\"\n    @change=\"commit\"\n    @keydown.enter.prevent=\"commit\"\n  />\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,4 @@
+declare const __VLS_export: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=InkPageInput.vue.d.ts.map

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

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

package/dist/components/InkPageInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,30 @@
+import { usePage as e } from "../composables/usePage.js";
+import { createElementBlock as t, defineComponent as n, openBlock as r, ref as i, unref as a, vModelText as o, watch as s, withDirectives as c, withKeys as l, withModifiers as u } from "vue";
+//#region src/components/InkPageInput.vue?vue&type=script&setup=true&lang.ts
+var d = ["max", "onKeydown"], f = /*@__PURE__*/ n({
+	__name: "InkPageInput",
+	setup(n) {
+		let { current: f, count: p, goTo: m } = e(), h = i(String(f.value + 1));
+		s(f, (e) => h.value = String(e + 1));
+		function g() {
+			let e = Number(h.value);
+			Number.isInteger(e) && e >= 1 && e <= p.value ? m(e - 1) : h.value = String(f.value + 1);
+		}
+		return (e, n) => c((r(), t("input", {
+			"onUpdate:modelValue": n[0] ||= (e) => h.value = e,
+			class: "ink-page-input",
+			"data-ink-page-input": "",
+			type: "number",
+			inputmode: "numeric",
+			"aria-label": "Page",
+			min: 1,
+			max: a(p),
+			onChange: g,
+			onKeydown: l(u(g, ["prevent"]), ["enter"])
+		}, null, 40, d)), [[o, h.value]]);
+	}
+});
+//#endregion
+export { f as default };
+
+//# sourceMappingURL=InkPageInput.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkPageInput.vue_vue_type_script_setup_true_lang.js","names":["_withDirectives","_openBlock","_createElementBlock","_unref","_withKeys","_withModifiers","_vModelText","_hoisted_1","InkPageInput_vue_vue_type_script_setup_true_lang_default","usePage","draft","ref","current","c","commit","n","count","goTo","withDirectives","openBlock","createElementBlock","_cache","$event","unref","withKeys","withModifiers","vModelText"],"sources":["../../src/components/InkPageInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\n\nimport { usePage } from '../composables/usePage'\n\nconst { current, count, goTo } = usePage()\n// `v-model` on a number input hands back a number once the user types.\nconst draft = ref<string | number>(String(current.value + 1))\nwatch(current, (c) => (draft.value = String(c + 1)))\n\n/** 1-based in the input, 0-based in the viewport. Out of range resets to the current page. */\nfunction commit(): void {\n  const n = Number(draft.value)\n  if (Number.isInteger(n) && n >= 1 && n <= count.value) goTo(n - 1)\n  else draft.value = String(current.value + 1)\n}\n</script>\n\n<template>\n  <input\n    v-model=\"draft\"\n    class=\"ink-page-input\"\n    data-ink-page-input\n    type=\"number\"\n    inputmode=\"numeric\"\n    aria-label=\"Page\"\n    :min=\"1\"\n    :max=\"count\"\n    @change=\"commit\"\n    @keydown.enter.prevent=\"commit\"\n  />\n</template>\n"],"mappings":";;;;;;EAKA,IAAM,EAAE,YAAS,UAAO,YAASS,EAAQ,GAEnCC,IAAQC,EAAqB,OAAOC,EAAQ,QAAQ,CAAC,CAAC;EAC5D,EAAMA,IAAU,MAAO,EAAM,QAAQ,OAAOC,IAAI,CAAC,CAAE;EAGnD,SAASC,IAAe;GACtB,IAAMC,IAAI,OAAOL,EAAM,KAAK;GAC5B,AAAI,OAAO,UAAUK,CAAC,KAAKA,KAAK,KAAKA,KAAKC,EAAM,QAAOC,EAAKF,IAAI,CAAC,IAC5D,EAAM,QAAQ,OAAOH,EAAQ,QAAQ,CAAC;EAC7C;mBAIEZ,GAAAC,EAAA,GAAAC,EAWE,SAAA;GAVS,uBAAA,AAAAmB,EAAA,QAAA,MAAA,EAAK,QAAAC;GACd,OAAM;GACN,uBAAA;GACA,MAAK;GACL,WAAU;GACV,cAAW;GACV,KAAK;GACL,KAAKnB,EAAAa,CAAA;GACL,UAAQF;GACR,WAAOV,EAAAC,EAAgBS,GAAM,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;EATrB,GAAA,MAAA,IAAAP,CAAA,IAAA,CAAA,CAAAD,GAAAI,EAAA,KAAK,CAAA,CAAA"}

package/dist/components/InkRoot.js

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

package/dist/components/InkRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkRoot.js","names":["_sfc_main","InkRoot_vue_vue_type_script_setup_true_lang_default","InkRoot_default"],"sources":["../../src/components/InkRoot.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { InkError, openDocument } from '@inkbar/core'\nimport { cssVariableDefaults } from '@inkbar/core/dom'\nimport { Primitive } from 'reka-ui'\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  onUpdated,\n  ref,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { provideInkContext, type InkHistory, type InkStatus } from '../context'\nimport { createRefHistory } from '../ref-history'\nimport { useReadable } from '../use-readable'\n\nimport type {\n  Annotation,\n  AnnotationChange,\n  AnnotationDefaults,\n  DocumentSource,\n  InkDocument,\n  PdfAssets,\n} from '@inkbar/core'\nimport type { ToolController, ToolId, Viewport, ZoomValue } from '@inkbar/core/dom'\n\nconst props = withDefaults(\n  defineProps<{\n    src: DocumentSource | null\n    assets: PdfAssets\n    password?: string | undefined\n    /** Colour defaults. Without it, the theme's CSS variables on the root element apply. */\n    defaults?: AnnotationDefaults | undefined\n    /**\n     * Pass (with v-model) to put annotations under the host's control. The mode is fixed when a\n     * document opens: passing or dropping this prop later takes effect on the next open.\n     */\n    annotations?: Annotation[] | undefined\n    tool?: ToolId | undefined\n    page?: number | undefined\n    zoom?: ZoomValue | undefined\n    /** Undo history. Defaults to on for uncontrolled, off for controlled. */\n    history?: boolean | undefined\n    asChild?: boolean\n  }>(),\n  {\n    password: undefined,\n    defaults: undefined,\n    annotations: undefined,\n    tool: undefined,\n    page: undefined,\n    zoom: undefined,\n    history: undefined,\n    asChild: false,\n  }\n)\n\nconst emit = defineEmits<{\n  'update:annotations': [next: Annotation[]]\n  change: [change: AnnotationChange]\n  'update:tool': [tool: ToolId]\n  'update:page': [page: number]\n  'update:zoom': [zoom: ZoomValue]\n  ready: [doc: InkDocument]\n  error: [error: InkError]\n  activate: [id: string]\n}>()\n\ntype TestHookElement = HTMLElement & { __inkDocument?: InkDocument | undefined }\n\n// A template ref on Primitive is a component instance; the context needs its element.\nconst primitive = useTemplateRef<{ $el: unknown }>('primitive')\nconst rootEl = shallowRef<HTMLElement | null>(null)\nfunction syncRootEl(): void {\n  const el = primitive.value?.$el\n  rootEl.value = el instanceof HTMLElement ? el : null\n}\n\nconst document = shallowRef<InkDocument | null>(null)\n/** Overrides the document's status while opening, and when opening itself failed. */\nconst override = shallowRef<InkStatus | null>(null)\nconst idle: InkStatus = { state: 'idle' }\nconst documentStatus = useReadable<InkStatus>(() => document.value?.status ?? null, idle)\nconst status = computed<InkStatus>(() => override.value ?? documentStatus.value)\nconst annotationList = useReadable<readonly Annotation[]>(\n  () => document.value?.annotations.list ?? null,\n  []\n)\nconst selection = useReadable<readonly string[]>(\n  () => document.value?.annotations.selection ?? null,\n  []\n)\nconst viewport = shallowRef<Viewport | null>(null)\nconst tools = shallowRef<ToolController | null>(null)\nconst internalTool = ref<ToolId>(props.tool ?? 'view')\nconst activated = ref<string | null>(null)\n\nconst controlled = computed(() => props.annotations !== undefined)\n\n/** Signed URLs change; the key does not. Bytes and Blobs are their own identity. */\nfunction identity(src: DocumentSource | null): unknown {\n  if (src === null) return null\n  if (typeof src === 'string') return src\n  if ('key' in src) return src.key\n  return src\n}\n\nfunction setTestHook(doc: InkDocument | undefined): void {\n  if (import.meta.env.DEV && rootEl.value)\n    (rootEl.value as TestHookElement).__inkDocument = doc\n}\n\nlet generation = 0\nfunction release(): void {\n  document.value?.destroy()\n  document.value = null\n  setTestHook(undefined)\n}\n\nasync function open(): Promise<void> {\n  const gen = ++generation\n  const src = props.src\n  release()\n  refHistory.clear()\n  if (src === null) {\n    override.value = null\n    return\n  }\n  override.value = { state: 'loading' }\n  syncRootEl()\n  let doc: InkDocument\n  try {\n    doc = await openDocument(src, {\n      assets: props.assets,\n      password: props.password,\n      defaults:\n        props.defaults ?? (rootEl.value ? cssVariableDefaults(rootEl.value) : undefined),\n      // Controlled hosts get the ref history below; core's own stack stays off.\n      history: controlled.value ? false : (props.history ?? true),\n      annotations: controlled.value\n        ? {\n            mode: 'controlled',\n            initial: props.annotations ?? [],\n            onChange: (next, change) => {\n              emit('update:annotations', next)\n              emit('change', change)\n            },\n          }\n        : { mode: 'uncontrolled' },\n    })\n  } catch (cause) {\n    if (gen !== generation) return\n    const error =\n      cause instanceof InkError\n        ? cause\n        : new InkError(\n            'InvalidPdf',\n            cause instanceof Error ? cause.message : String(cause),\n            {},\n            cause\n          )\n    override.value = { state: 'error', error }\n    emit('error', error)\n    return\n  }\n  if (gen !== generation) {\n    doc.destroy()\n    return\n  }\n  // The prop may have changed while the file loaded, when there was no store to apply it to.\n  if (doc.annotations.mode === 'controlled' && props.annotations !== undefined)\n    doc.annotations.setControlledValue(props.annotations)\n  document.value = doc\n  override.value = null\n  setTestHook(doc)\n  const s = doc.status.get()\n  if (s.state === 'ready') emit('ready', doc)\n  else if (s.state === 'error') emit('error', s.error)\n}\n\nconst refHistory = createRefHistory({\n  source: () => props.annotations,\n  apply: (list) => document.value?.annotations.replaceAll(list, 'history'),\n  enabled: computed(() => controlled.value && props.history === true),\n})\nconst coreCanUndo = useReadable(() => document.value?.history.canUndo ?? null, false)\nconst coreCanRedo = useReadable(() => document.value?.history.canRedo ?? null, false)\nconst inkHistory: InkHistory = {\n  canUndo: computed(() =>\n    controlled.value ? refHistory.canUndo.value : coreCanUndo.value\n  ),\n  canRedo: computed(() =>\n    controlled.value ? refHistory.canRedo.value : coreCanRedo.value\n  ),\n  undo: () => (controlled.value ? refHistory.undo() : document.value?.history.undo()),\n  redo: () => (controlled.value ? refHistory.redo() : document.value?.history.redo()),\n  clear: () => (controlled.value ? refHistory.clear() : document.value?.history.clear()),\n  batch: (fn) => {\n    if (controlled.value) refHistory.batch(fn)\n    else if (document.value) document.value.history.batch(fn)\n    else fn()\n  },\n}\n\n// Open on the client only: on the server InkRoot renders its empty slot.\nonMounted(() => {\n  syncRootEl()\n  void open()\n})\nonUpdated(syncRootEl)\n\n// Separate sources, so a new `{ url, key }` object with the same key compares equal.\nwatch([() => identity(props.src), () => props.password], () => void open())\n\nwatch(\n  () => props.annotations,\n  (next) => {\n    if (next && document.value?.annotations.mode === 'controlled')\n      document.value.annotations.setControlledValue(next)\n  }\n)\n\nwatch(\n  () => props.tool,\n  (t) => {\n    if (t) internalTool.value = t\n  }\n)\n\nfunction setTool(id: ToolId): void {\n  internalTool.value = id\n  emit('update:tool', id)\n}\n\nonBeforeUnmount(() => {\n  generation++\n  release()\n})\n\nprovideInkContext({\n  assets: computed(() => props.assets),\n  document,\n  status,\n  annotations: annotationList,\n  selection,\n  viewport,\n  tools,\n  tool: internalTool,\n  setTool,\n  zoomModel: computed(() => props.zoom),\n  pageModel: computed(() => props.page),\n  reportZoom: (z) => emit('update:zoom', z),\n  reportPage: (p) => emit('update:page', p),\n  activated,\n  setActivated(id) {\n    activated.value = id\n    if (id) emit('activate', id)\n  },\n  history: inkHistory,\n  rootEl,\n})\n\n// `history` is what `useHistory()` returns inside the root, for hosts that hold a template ref:\n// a controlled host calls `history.clear()` after loading its saved list.\ndefineExpose({ document, status, rootEl, history: inkHistory })\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitive\"\n    :as-child=\"props.asChild\"\n    as=\"div\"\n    data-ink-root\n    :data-state=\"status.state\"\n  >\n    <slot :status=\"status\" :document=\"document\" />\n  </Primitive>\n</template>\n"],"mappings":""}