npm - @ghentcdh/annotation-vue - Versions diffs - 0.0.1-alpha.3 - Mend

@ghentcdh/annotation-vue 0.0.1-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md +263 -0
package/index.d.ts +6 -0
package/index.js +423 -0
package/index.umd.cjs +1 -0
package/lib/composables/useAnnotationDefinitions.d.ts +39 -0
package/lib/loader/annotation-definition.loader.d.ts +10 -0
package/lib/router/annotation-namespace.plugin.d.ts +23 -0
package/lib/router/annotation-namespace.routes.d.ts +17 -0
package/lib/service/annotation-definition.service.d.ts +12 -0
package/lib/types/annotation-vue.types.d.ts +30 -0
package/package.json +24 -0

package/README.md ADDED Viewed

@@ -0,0 +1,263 @@
+# @ghentcdh/annotation-vue
+Vue 3 package for working with annotation definitions client-side — no NestJS backend required. Loads JSON annotation
+configs, builds definitions via `@ghentcdh/annotation-core`, and exposes them as reactive Vue composables using
+provide/inject.
+## Install
+Peer dependencies:
+```
+vue >= 3.5
+@ghentcdh/annotation-core
+@ghentcdh/w3c-utils
+vue-router >= 4  (optional — only needed for router plugin)
+```
+## Usage
+### Provide/inject pattern
+Call `provideAnnotationDefinitions` once at the root component. All descendants use `useAnnotationDefinitions()` to
+inject.
+**Root component (provide):**
+```vue
+<template>
+  <slot />
+</template>
+<script setup lang="ts">
+  import { provideAnnotationDefinitions } from '@ghentcdh/annotation-vue';
+  // import.meta.glob must be a string literal — call it here, pass result in
+  const resourceFolder = import.meta.glob('./configs/*.json', { eager: true });
+  const { definitions } = provideAnnotationDefinitions({
+    config: {
+      baseUrl: 'http://localhost:3000/',
+      app: 'myapp',
+      prefix: 'myapp',
+      isDev: true,
+      cacheTTLms: 0,
+    },
+    resourceFolder, // auto-loads definitions on creation
+  });
+</script>
+```
+**Child component (inject):**
+```vue
+<template>
+  <div v-for="def in definitions" :key="def.id">
+    {{ def.label }}
+  </div>
+</template>
+<script setup lang="ts">
+  import { useAnnotationDefinitions } from '@ghentcdh/annotation-vue';
+  // No options needed — state is injected from ancestor
+  const { definitions, getDefinitionById } = useAnnotationDefinitions();
+</script>
+```
+### provideAnnotationDefinitions options
+| Option                 | Type                       | Required | Description                                        |
+|------------------------|----------------------------|----------|----------------------------------------------------|
+| `config`               | `AnnotationDefConfig`      | yes      | Base URL, app name, prefix, cache settings         |
+| `resourceFolder`       | `GlobModules`              | no       | `import.meta.glob` result — auto-loads on creation |
+| `createHighlightStyle` | `(def) => AnnotationStyle` | no       | Custom style builder                               |
+| `factory`              | `ContextBuilderFactory`    | no       | Custom context builder factory                     |
+### Returned state (both provide and inject)
+| Property              | Type                                                   | Description                             |
+|-----------------------|--------------------------------------------------------|-----------------------------------------|
+| `definitions`         | `ComputedRef<VueAnnotationDefinition[]>`               | All definitions, reactively transformed |
+| `definitionsMap`      | `ComputedRef<Record<string, VueAnnotationDefinition>>` | Definitions keyed by ID                 |
+| `getDefinitionById`   | `(id: string) => VueAnnotationDefinition \| undefined` | Lookup by ID                            |
+| `loadFromGlob`        | `(modules: GlobModules) => void`                       | Load from `import.meta.glob` result     |
+| `loadFromConfigs`     | `(configs: AnnotationJsonConfig[]) => void`            | Load from config array                  |
+| `loadFromDefinitions` | `(defs: CoreAnnotationDefinition[]) => void`           | Load pre-built definitions              |
+| `service`             | `AnnotationDefinitionService`                          | Underlying synchronous service          |
+### Loading definitions manually
+If you don't pass `resourceFolder`, load later:
+```ts
+const state = provideAnnotationDefinitions({ config });
+// From glob
+const modules = import.meta.glob('./configs/*.json', { eager: true });
+state.loadFromGlob(modules);
+// From config array
+state.loadFromConfigs([
+  { id: 'comment', name: 'Comment', color: '#ff0000' },
+  { id: 'entity', name: 'Entity', color: '#00ff00', allowedChildren: ['comment'] },
+]);
+// From pre-built core definitions
+state.loadFromDefinitions(coreDefinitions);
+```
+### VueAnnotationDefinition
+Enriched version of core `AnnotationDefinition`, with:
+- `label` — mapped from core `name`
+- `style: AnnotationStyle` — built from `id`, `name`, `color`, `target`
+- `schema: FormValidationDef` — wraps `ui_schema`, `json_schema`, `metadata_schema`
+- `allowedChildren: KeyLabel[]` — string IDs resolved to `{ key, label, icon? }` objects
+- `allowedLinks: KeyLabel[]` — same resolution
+- `_core` — raw reference to the core `AnnotationDefinition`
+### Custom highlight styles
+```ts
+provideAnnotationDefinitions({
+  config,
+  resourceFolder,
+  createHighlightStyle: (def) => ({
+    id: def.id,
+    name: def.name,
+    color: def.color,
+    target: def.target ?? 'highlight',
+  }),
+});
+```
+### AnnotationDefinitionService
+Synchronous, plain TS class (no NestJS dependency). Mirrors API service interface:
+```ts
+import { AnnotationDefinitionService } from '@ghentcdh/annotation-vue';
+const service = new AnnotationDefinitionService(definitions);
+service.findAll();              // AnnotationDefinition[]
+service.findById('comment');    // AnnotationDefinition | undefined
+service.findAllGrouped();       // Record<string, AnnotationDefinition>
+service.getAllContextBuilders(); // unknown[]
+service.getContextBuilder(id);  // unknown | undefined
+service.setDefinitions(defs);   // replace all definitions
+```
+### Router plugin (optional, requires `vue-router`)
+Registers Vue Router routes that mirror the NestJS `AnnotationNamespaceController` endpoints. Useful for serving
+annotation definitions client-side without a backend.
+```ts
+import { createRouter, createWebHistory } from 'vue-router';
+import {
+  AnnotationNamespacePlugin,
+  AnnotationDefinitionService,
+} from '@ghentcdh/annotation-vue';
+const service = new AnnotationDefinitionService(definitions);
+const router = createRouter({ history: createWebHistory(), routes: [] });
+// Option A: Vue plugin
+app.use(AnnotationNamespacePlugin, {
+  router,
+  service,
+  basePath: '/ns',   // default: '/ns'
+  config,            // optional AnnotationDefConfig for AnnotationStyle context
+});
+// Option B: Direct install
+import { installAnnotationNamespaceRoutes } from '@ghentcdh/annotation-vue';
+installAnnotationNamespaceRoutes(router, service, { basePath: '/ns' });
+```
+Registered routes:
+| Path                    | Name                        | Description                   |
+|-------------------------|-----------------------------|-------------------------------|
+| `/ns`                   | `annotation-ns-all`         | All definitions               |
+| `/ns/anno.jsonld`       | `annotation-ns-all-jsonld`  | All JSON-LD contexts          |
+| `/ns/:id.jsonld`        | `annotation-ns-jsonld`      | Single JSON-LD context        |
+| `/ns/:type/anno.jsonld` | `annotation-ns-type-jsonld` | JSON-LD + forms for type      |
+| `/ns/:id/schemas`       | `annotation-ns-schemas`     | Schemas subset for definition |
+| `/ns/:id`               | `annotation-ns-by-id`       | Single definition             |
+### Path helpers
+Generate URL paths without installing routes:
+```ts
+import { createAnnotationNamespacePaths } from '@ghentcdh/annotation-vue';
+const paths = createAnnotationNamespacePaths('/ns');
+paths.all;              // '/ns'
+paths.allJsonLd;        // '/ns/anno.jsonld'
+paths.byId('comment');  // '/ns/comment'
+paths.jsonLdById('comment'); // '/ns/comment.jsonld'
+paths.schemasById('comment'); // '/ns/comment/schemas'
+```
+## Resolve defintions from third party server
+```ts
+                                                                                                                              │
+│ // Simple — single app.use()                                                                                                        │
+│ app.use(AnnotationPlugin, {                                                                                                         │
+│   config: annotationDefConfig,                                                                                                      │
+│   router,                                                                                                                           │
+│   definitionsUrl: '/api/ns',                                                                                                        │
+│
+})
+;                                                                                                                                 │
+│                                                                                                                                     │
+│ // Custom fetch (auth headers, axios, etc.)                                                                                         │
+│ app.use(AnnotationPlugin, {                                                                                                         │
+│   config: annotationDefConfig,                                                                                                      │
+│   router,                                                                                                                           │
+│   definitionsUrl: '/api/ns',                                                                                                        │
+│   fetchFn: async (url) => {                                                                                                         │
+│     const { data } = await axios.get(url, { headers: { Authorization: `Bearer ${token}` } });                                       │
+│     return data;                                                                                                                    │
+│
+},                                                                                                                                │
+│
+})
+;
+```
+## Package structure
+```
+src/
+  index.ts                              # Barrel export
+  lib/
+    types/
+      annotation-vue.types.ts           # KeyLabel, FormValidationDef, VueAnnotationDefinition
+    service/
+      annotation-definition.service.ts  # Synchronous definition service
+    loader/
+      annotation-definition.loader.ts   # import.meta.glob + config array loaders
+    composables/
+      useAnnotationDefinitions.ts       # Provide/inject composable
+    router/
+      annotation-namespace.routes.ts    # Route records + path helpers
+      annotation-namespace.plugin.ts    # Vue Router plugin
+```
+## Build & test
+```sh
+pnpm nx build annotation-vue
+pnpm nx test annotation-vue
+pnpm nx lint annotation-vue
+```

package/index.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export * from './lib/types/annotation-vue.types';
+export { AnnotationDefinitionService } from './lib/service/annotation-definition.service';
+export { type DefinitionsFetchFn, type GlobModules, loadAnnotationDefinitionsFromGlob, loadAnnotationDefinitionsFromConfigs, loadAnnotationDefinitionsFromUrl, } from './lib/loader/annotation-definition.loader';
+export { type AnnotationDefinitionsState, type ProvideAnnotationDefinitionsOptions, provideAnnotationDefinitions, useAnnotationDefinitions, createAnnotationDefinitionsState, } from './lib/composables/useAnnotationDefinitions';
+export { type AnnotationNamespaceRoutePaths, createAnnotationNamespacePaths, createAnnotationNamespaceRoutes, NAMESPACE_ROUTE_META, } from './lib/router/annotation-namespace.routes';
+export { type AnnotationNamespacePluginOptions, type AnnotationPluginOptions, installAnnotationNamespaceRoutes, AnnotationNamespacePlugin, AnnotationPlugin, } from './lib/router/annotation-namespace.plugin';

package/index.js ADDED Viewed

@@ -0,0 +1,423 @@
+import { z as e } from "zod";
+import { contextBuilder as t } from "@ghentcdh/w3c-utils";
+import { createHighlightStyle as n } from "@ghentcdh/annotated-text";
+import { computed as r, defineComponent as i, h as a, inject as o, markRaw as s, provide as c, reactive as l, ref as u } from "vue";
+//#region packages/annotation-vue/src/lib/service/annotation-definition.service.ts
+var d = class {
+	definitions = [];
+	groupedDefinitions = {};
+	constructor(e = []) {
+		e.length && this.setDefinitions(e);
+	}
+	setDefinitions(e) {
+		this.definitions = e, this.groupedDefinitions = e.reduce((e, t) => (e[t.id] = t, e), {});
+	}
+	findAll() {
+		return this.definitions;
+	}
+	findById(e) {
+		return this.groupedDefinitions[e];
+	}
+	findAllGrouped() {
+		return this.groupedDefinitions;
+	}
+	getAllContextBuilders() {
+		return this.definitions.map((e) => e.context);
+	}
+	getContextBuilder(e) {
+		return this.findById(e)?.context;
+	}
+}, f = "AnnotationMetadata", p = e.object({});
+e.object({
+	id: e.string(),
+	name: e.string(),
+	columns: e.array(p),
+	json_schema: e.any().optional(),
+	json_ld: e.any().optional(),
+	ui_schema: e.any().optional(),
+	metadata_schema: e.any().optional(),
+	color: e.string(),
+	type: e.string().optional(),
+	icon: e.string().optional(),
+	isRoot: e.boolean().default(!0),
+	allowedChildren: e.array(e.string()).optional(),
+	allowedLinks: e.array(e.string()).optional(),
+	context: e.custom(),
+	target: e.enum([
+		"gutter",
+		"underline",
+		"highlight"
+	]).optional()
+});
+//#endregion
+//#region packages/annotation-core/src/lib/utils/annotation.context-builder.ts
+var m = {
+	baseUrl: "http://localhost:3000/",
+	app: "ghentcdh",
+	prefix: "ghentcdh",
+	isDev: !1,
+	cacheTTLms: 1200 * 1e3
+}, h = (e = {}) => {
+	let t = e.baseUrl ?? m.baseUrl, n = t.endsWith("/") ? t : `${t}/`, r = e.isDev ?? !1, i = r ? 0 : 1200 * 1e3;
+	return {
+		baseUrl: n,
+		contextUrl: `${n}ns/`,
+		app: e.app ?? m.app,
+		prefix: e.prefix ?? m.prefix,
+		isDev: r,
+		cacheTTLms: i
+	};
+}, g = (e, n) => {
+	let { prefix: r, baseUrl: i, contextUrl: a } = h(n), o = f;
+	return t(r, i).setType(r, o).addPrefix(e, `${r}:${e}`).setContextUri(`${a}${e}.jsonld`);
+}, _ = e.object({
+	id: e.string(),
+	name: e.string(),
+	target: e.enum([
+		"gutter",
+		"underline",
+		"highlight"
+	]).optional().default("underline"),
+	color: e.string().optional()
+}), v = "AnnotationStyle", y = (e) => {
+	let { prefix: n, baseUrl: r, contextUrl: i } = h(e);
+	return t(n, r).setType(n, v).setContextUri(`${i}${v}.jsonld`).parseZodSchema(_);
+}, b = (e) => {
+	let t = {};
+	if (e.fieldInput) {
+		let { type: n, options: r } = e.fieldInput;
+		t.format = n, n === "autocomplete" && (t.dataField = "data", r.uri && (t.uri = r.uri), r.resource && (t.resource = r.resource), r.valueKey && (t.valueKey = r.valueKey), r.labelKey && (t.labelKey = r.labelKey), r.enableCreate !== void 0 && (t.enableCreate = r.enableCreate));
+	}
+	return {
+		type: "Control",
+		scope: `#/properties/${e.id}`,
+		options: t
+	};
+}, x = (e) => ({
+	type: "TextCell",
+	scope: `#/properties/${e.id}`,
+	options: {
+		format: "keyValue",
+		key: e.fieldInput?.options?.labelKey ?? e.displayKey ?? "label"
+	}
+}), S = (e) => ({
+	type: "GridLayout",
+	elements: e.filter((e) => !e.hiddenInForm).map(b),
+	options: {}
+}), C = (e) => ({
+	type: "GridLayout",
+	elements: e.filter((e) => !e.hiddenInMetadata).map(x),
+	options: {}
+}), w = (t) => {
+	if (t.type === "object" && t.properties) {
+		let n = {};
+		for (let [e, r] of Object.entries(t.properties)) n[e] = w(r);
+		return e.object(n);
+	}
+	return e.string();
+}, T = (t, n, r) => {
+	let i = g(t, r), a = n.columns ?? [];
+	if (!a.length) return i;
+	let o = {};
+	for (let e of a) e.type && (o[e.id] = w(e.type));
+	return Object.keys(o).length ? i.parseZodSchema(e.object(o)) : i;
+}, E = (e, t, n = T) => {
+	let r = n(e.id, e, t), i = e.columns ?? [], a = i.length > 0, o = e.ui_schema ?? (a ? S(i) : void 0), s = e.metadata_schema ?? (a ? C(i) : void 0), c = {
+		id: e.id,
+		name: e.name,
+		color: e.color,
+		isRoot: e.isRoot ?? !0,
+		columns: i,
+		context: r,
+		json_ld: r.toJsonLdContext(),
+		json_schema: o ? r.toJsonSchema() : null
+	};
+	return o && (c.ui_schema = o), s && (c.metadata_schema = s), e.type && (c.type = e.type), e.icon && (c.icon = e.icon), e.target && (c.target = e.target), e.allowedChildren && (c.allowedChildren = e.allowedChildren), e.allowedLinks && (c.allowedLinks = e.allowedLinks), c;
+}, D = (e, t, n) => e.map((e) => E(e, t, n)), O = (e) => "default" in e ? e.default : e, k = (e, t, n) => A(Object.values(e).map(O), t, n), A = (e, t, n) => D(e, t, n), j = async (e) => {
+	let t = await fetch(e);
+	if (!t.ok) throw Error(`Failed to fetch annotation definitions: ${t.status} ${t.statusText}`);
+	return t.json();
+}, M = async (e, t, n, r = j) => A(await r(e), t, n), N = Symbol("annotation-definitions"), P = (e, t) => e ? e.reduce((e, n) => {
+	let r = t[n];
+	if (r) {
+		let t = {
+			key: r.id,
+			label: r.name
+		};
+		r.icon && (t.icon = r.icon), e.push(t);
+	}
+	return e;
+}, []) : [], F = (e, t, n, r) => {
+	let i = {
+		uiSchema: e.ui_schema ?? null,
+		jsonSchema: e.json_schema ?? null,
+		metaDataSchema: e.metadata_schema ?? null,
+		validation: (e) => e
+	};
+	return {
+		id: e.id,
+		name: e.name,
+		label: e.name,
+		color: e.color,
+		style: {
+			default: n(e.color),
+			active: r(e.color)
+		},
+		schema: i,
+		allowedChildren: P(e.allowedChildren, t),
+		allowedLinks: P(e.allowedLinks, t),
+		isRoot: e.isRoot ?? !0,
+		icon: e.icon,
+		type: e.type,
+		target: e.target,
+		context: e.context,
+		_core: e
+	};
+}, I = (e) => {
+	let { config: t, factory: i } = e, a = e.createHighlightStyle ?? n, o = e.activeHighlightStyle ?? a, c = s(new d()), f = u([]), p = r(() => {
+		let e = c.findAllGrouped();
+		return f.value.map((t) => F(t, e, a, o));
+	}), m = r(() => p.value.reduce((e, t) => (e[t.id] = t, e), {})), h = (e) => m.value[e], g = (e) => {
+		c.setDefinitions(e), f.value = e;
+	}, _ = (e) => {
+		g(k(e, t, i));
+	}, v = (e) => {
+		g(A(e, t, i));
+	}, y = u(!1), b = u(null);
+	return l({
+		configuration: t,
+		definitions: p,
+		definitionsMap: m,
+		getDefinitionById: h,
+		loadFromGlob: _,
+		loadFromConfigs: v,
+		loadFromDefinitions: g,
+		loadFromUrl: async (e, n) => {
+			y.value = !0, b.value = null;
+			try {
+				g(await M(e, t, i, n));
+			} catch (e) {
+				b.value = e instanceof Error ? e : Error(String(e));
+			} finally {
+				y.value = !1;
+			}
+		},
+		loading: y,
+		error: b,
+		service: c
+	});
+}, L = (e) => {
+	let t = I(e);
+	return e.resourceFolder && t.loadFromGlob(e.resourceFolder), e.definitionsUrl && t.loadFromUrl(e.definitionsUrl, e.fetchFn), c(N, t), t;
+}, R = () => {
+	let e = o(N);
+	if (!e) throw Error("useAnnotationDefinitions() must be called inside a component that called provideAnnotationDefinitions()");
+	return e;
+}, z = (e = "/ns") => {
+	let t = e.endsWith("/") ? e.slice(0, -1) : e;
+	return {
+		all: t,
+		allJsonLd: `${t}/anno.jsonld`,
+		byId: (e) => `${t}/${e}`,
+		jsonLdById: (e) => `${t}/${e}.jsonld`,
+		schemasById: (e) => `${t}/${e}/schemas`,
+		typeJsonLd: (e) => `${t}/${e}/anno.jsonld`
+	};
+}, B = i({
+	name: "JsonView",
+	props: {
+		data: {
+			type: [
+				Object,
+				Array,
+				String,
+				Number
+			],
+			default: null
+		},
+		title: {
+			type: String,
+			required: !1,
+			default: ""
+		}
+	},
+	setup(e) {
+		let t = r(() => JSON.stringify(e.data, null, 2)), n = r(() => !1), i = () => {
+			navigator.clipboard.writeText(t.value);
+		}, o = () => {
+			let n = new Blob([t.value], { type: "application/json" }), r = URL.createObjectURL(n), i = document.createElement("a");
+			i.href = r, i.download = `${e.title || "data"}.json`, i.click(), URL.revokeObjectURL(r);
+		};
+		return () => a("div", { style: {
+			fontFamily: "monospace",
+			fontSize: "13px",
+			padding: "16px",
+			maxWidth: "100%",
+			boxSizing: "border-box"
+		} }, [a("div", { style: {
+			display: "flex",
+			alignItems: "center",
+			gap: "8px",
+			marginBottom: "12px",
+			flexWrap: "wrap"
+		} }, [
+			e.title ? a("span", { style: {
+				fontWeight: "bold",
+				fontSize: "14px",
+				marginRight: "auto"
+			} }, e.title) : null,
+			a("button", {
+				onClick: i,
+				style: {
+					cursor: "pointer",
+					padding: "4px 10px",
+					fontSize: "12px",
+					border: "1px solid #ccc",
+					borderRadius: "4px",
+					background: "#f5f5f5"
+				}
+			}, n.value ? "Copied" : "Copy"),
+			a("button", {
+				onClick: o,
+				style: {
+					cursor: "pointer",
+					padding: "4px 10px",
+					fontSize: "12px",
+					border: "1px solid #ccc",
+					borderRadius: "4px",
+					background: "#f5f5f5"
+				}
+			}, "Download")
+		]), a("pre", { style: {
+			margin: 0,
+			whiteSpace: "pre-wrap",
+			wordBreak: "break-word",
+			background: "#fafafa",
+			border: "1px solid #e0e0e0",
+			borderRadius: "4px",
+			padding: "12px",
+			overflow: "auto"
+		} }, t.value)]);
+	}
+}), V = {
+	namespace: !0,
+	layout: "blank"
+}, H = (e, t, n) => {
+	let r = e.endsWith("/") ? e.slice(0, -1) : e, i = { ...V };
+	return [
+		{
+			path: `${r}/anno.jsonld`,
+			name: "annotation-ns-all-jsonld",
+			component: B,
+			meta: i,
+			props: () => ({
+				title: "All JSON-LD contexts",
+				data: t.getAllContextBuilders().map((e) => e.toJsonLdContext())
+			})
+		},
+		{
+			path: `${r}/:id.jsonld`,
+			name: "annotation-ns-jsonld",
+			component: B,
+			meta: i,
+			props: (e) => {
+				let r = e.params.id;
+				if (r === "AnnotationStyle" && n) return {
+					title: `${r}.jsonld`,
+					data: y(n).toJsonLdContext()
+				};
+				let i = t.findById(r);
+				return {
+					title: `${r}.jsonld`,
+					data: i?.json_ld ?? null
+				};
+			}
+		},
+		{
+			path: `${r}/:type/anno.jsonld`,
+			name: "annotation-ns-type-jsonld",
+			component: B,
+			meta: i,
+			props: (e) => {
+				let n = e.params.type, r = t.getContextBuilder(n);
+				return r ? {
+					title: `${n}/anno.jsonld`,
+					data: {
+						jsonLd: r.toJsonLdContext(),
+						forms: r.toJsonSchema()
+					}
+				} : {
+					title: n,
+					data: null
+				};
+			}
+		},
+		{
+			path: `${r}/:id/schemas`,
+			name: "annotation-ns-schemas",
+			component: B,
+			meta: i,
+			props: (e) => {
+				let n = e.params.id, r = t.findById(n);
+				return r ? {
+					title: `${n}/schemas`,
+					data: {
+						id: r.id,
+						name: r.name,
+						json_schema: r.json_schema,
+						ui_schema: r.ui_schema,
+						metadata_schema: r.metadata_schema,
+						columns: r.columns,
+						isRoot: r.isRoot,
+						allowedChildren: r.allowedChildren,
+						allowedLinks: r.allowedLinks,
+						type: r.type,
+						icon: r.icon,
+						target: r.target
+					}
+				} : {
+					title: n,
+					data: null
+				};
+			}
+		},
+		{
+			path: `${r}/:id`,
+			name: "annotation-ns-by-id",
+			component: B,
+			meta: i,
+			props: (e) => {
+				let n = e.params.id;
+				return {
+					title: n,
+					data: t.findById(n) ?? null
+				};
+			}
+		},
+		{
+			path: r,
+			name: "annotation-ns-all",
+			component: B,
+			meta: i,
+			props: () => ({
+				title: "All definitions",
+				data: t.findAll()
+			})
+		}
+	];
+}, U = (e, t, n) => {
+	H(n?.basePath ?? "/ns", t, n?.config).forEach((t) => e.addRoute(t));
+}, W = { install(e, t) {
+	U(t.router, t.service, {
+		basePath: t.basePath,
+		config: t.config
+	});
+} }, G = { install(e, t) {
+	let n = I(t);
+	return t.resourceFolder && n.loadFromGlob(t.resourceFolder), t.definitionsUrl && n.loadFromUrl(t.definitionsUrl, t.fetchFn), e.provide(N, n), U(t.router, n.service, {
+		basePath: t.basePath,
+		config: t.config
+	}), n;
+} };
+//#endregion
+export { d as AnnotationDefinitionService, W as AnnotationNamespacePlugin, G as AnnotationPlugin, V as NAMESPACE_ROUTE_META, I as createAnnotationDefinitionsState, z as createAnnotationNamespacePaths, H as createAnnotationNamespaceRoutes, U as installAnnotationNamespaceRoutes, A as loadAnnotationDefinitionsFromConfigs, k as loadAnnotationDefinitionsFromGlob, M as loadAnnotationDefinitionsFromUrl, L as provideAnnotationDefinitions, R as useAnnotationDefinitions };

package/index.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/lib/composables/useAnnotationDefinitions.d.ts ADDED Viewed

@@ -0,0 +1,39 @@
+import { InjectionKey } from 'vue';
+import { AnnotationDefConfig, AnnotationDefinition as CoreAnnotationDefinition, AnnotationJsonConfig, ContextBuilderFactory } from '@ghentcdh/annotation-core';
+import { createHighlightStyle } from '@ghentcdh/annotated-text';
+import { VueAnnotationDefinition } from '../types/annotation-vue.types';
+import { AnnotationDefinitionService } from '../service/annotation-definition.service';
+import { DefinitionsFetchFn, GlobModules } from '../loader/annotation-definition.loader';
+export type AnnotationDefinitionsState = {
+    configuration: AnnotationDefConfig;
+    definitions: VueAnnotationDefinition[];
+    definitionsMap: Record<string, VueAnnotationDefinition>;
+    getDefinitionById: (id: string) => VueAnnotationDefinition | undefined;
+    loadFromGlob: (modules: GlobModules) => void;
+    loadFromConfigs: (configs: AnnotationJsonConfig[]) => void;
+    loadFromDefinitions: (defs: CoreAnnotationDefinition[]) => void;
+    loadFromUrl: (url: string, fetchFn?: DefinitionsFetchFn) => Promise<void>;
+    loading: boolean;
+    error: Error | null;
+    service: AnnotationDefinitionService;
+};
+export type ProvideAnnotationDefinitionsOptions = {
+    config: AnnotationDefConfig;
+    resourceFolder?: GlobModules;
+    createHighlightStyle?: typeof createHighlightStyle;
+    activeHighlightStyle?: typeof createHighlightStyle;
+    factory?: ContextBuilderFactory;
+    definitionsUrl?: string;
+    fetchFn?: DefinitionsFetchFn;
+};
+export declare const ANNOTATION_DEFINITIONS_KEY: InjectionKey<AnnotationDefinitionsState>;
+export declare const createAnnotationDefinitionsState: (options: ProvideAnnotationDefinitionsOptions) => AnnotationDefinitionsState;
+/**
+ * Called once at root — creates state, provides to descendants.
+ * If `resourceFolder` given, loads definitions immediately.
+ */
+export declare const provideAnnotationDefinitions: (options: ProvideAnnotationDefinitionsOptions) => AnnotationDefinitionsState;
+/**
+ * Called in child components — injects state from ancestor.
+ */
+export declare const useAnnotationDefinitions: () => AnnotationDefinitionsState;

package/lib/loader/annotation-definition.loader.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { AnnotationJsonConfig, AnnotationDefConfig, AnnotationDefinition, ContextBuilderFactory } from '@ghentcdh/annotation-core';
+type GlobModule = {
+    default: AnnotationJsonConfig;
+} | AnnotationJsonConfig;
+export type GlobModules = Record<string, GlobModule>;
+export declare const loadAnnotationDefinitionsFromGlob: (modules: GlobModules, config: AnnotationDefConfig, factory?: ContextBuilderFactory) => AnnotationDefinition[];
+export declare const loadAnnotationDefinitionsFromConfigs: (configs: AnnotationJsonConfig[], config: AnnotationDefConfig, factory?: ContextBuilderFactory) => AnnotationDefinition[];
+export type DefinitionsFetchFn = (url: string) => Promise<AnnotationJsonConfig[]>;
+export declare const loadAnnotationDefinitionsFromUrl: (url: string, config: AnnotationDefConfig, factory?: ContextBuilderFactory, fetchFn?: DefinitionsFetchFn) => Promise<AnnotationDefinition[]>;
+export {};

package/lib/router/annotation-namespace.plugin.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import { Plugin } from 'vue';
+import { Router } from 'vue-router';
+import { AnnotationDefConfig } from '@ghentcdh/annotation-core';
+import { AnnotationDefinitionService } from '../service/annotation-definition.service';
+import { ProvideAnnotationDefinitionsOptions } from '../composables/useAnnotationDefinitions';
+export type AnnotationNamespacePluginOptions = {
+    router: Router;
+    service: AnnotationDefinitionService;
+    basePath?: string;
+    config?: AnnotationDefConfig;
+};
+export type AnnotationPluginOptions = ProvideAnnotationDefinitionsOptions & {
+    router: Router;
+    basePath?: string;
+};
+export declare const installAnnotationNamespaceRoutes: (router: Router, service: AnnotationDefinitionService, options?: {
+    basePath?: string;
+    config?: AnnotationDefConfig;
+}) => void;
+export declare const AnnotationNamespacePlugin: Plugin<[
+    AnnotationNamespacePluginOptions
+]>;
+export declare const AnnotationPlugin: Plugin<[AnnotationPluginOptions]>;

package/lib/router/annotation-namespace.routes.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { RouteRecordRaw } from 'vue-router';
+import { AnnotationDefConfig } from '@ghentcdh/annotation-core';
+import { AnnotationDefinitionService } from '../service/annotation-definition.service';
+export type AnnotationNamespaceRoutePaths = {
+    all: string;
+    allJsonLd: string;
+    byId: (id: string) => string;
+    jsonLdById: (id: string) => string;
+    schemasById: (id: string) => string;
+    typeJsonLd: (type: string) => string;
+};
+export declare const createAnnotationNamespacePaths: (basePath?: string) => AnnotationNamespaceRoutePaths;
+export declare const NAMESPACE_ROUTE_META: {
+    readonly namespace: true;
+    readonly layout: "blank";
+};
+export declare const createAnnotationNamespaceRoutes: (basePath: string, service: AnnotationDefinitionService, config?: AnnotationDefConfig) => RouteRecordRaw[];

package/lib/service/annotation-definition.service.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { AnnotationDefinition } from '@ghentcdh/annotation-core';
+export declare class AnnotationDefinitionService {
+    private definitions;
+    private groupedDefinitions;
+    constructor(definitions?: AnnotationDefinition[]);
+    setDefinitions(definitions: AnnotationDefinition[]): void;
+    findAll(): AnnotationDefinition[];
+    findById(id: string): AnnotationDefinition | undefined;
+    findAllGrouped(): Record<string, AnnotationDefinition>;
+    getAllContextBuilders(): unknown[];
+    getContextBuilder(type: string): unknown | undefined;
+}

package/lib/types/annotation-vue.types.d.ts ADDED Viewed

@@ -0,0 +1,30 @@
+import { AnnotationDefinition as CoreAnnotationDefinition } from '@ghentcdh/annotation-core';
+import { ContextBuilder } from '@ghentcdh/w3c-utils';
+import { CustomAnnotationStyle } from '@ghentcdh/annotated-text';
+export type KeyLabel<KEY = string> = {
+    key: KEY;
+    label: string;
+    icon?: string;
+};
+export type FormValidationDef = {
+    uiSchema: unknown;
+    jsonSchema: unknown;
+    metaDataSchema: unknown;
+    validation: (value: unknown) => unknown;
+};
+export type VueAnnotationDefinition = {
+    id: string;
+    name: string;
+    label: string;
+    color: string;
+    style: CustomAnnotationStyle;
+    schema: FormValidationDef;
+    allowedChildren: KeyLabel[];
+    allowedLinks: KeyLabel[];
+    isRoot: boolean;
+    icon?: string;
+    type?: string;
+    target?: 'gutter' | 'underline' | 'highlight';
+    context: ContextBuilder;
+    _core: CoreAnnotationDefinition;
+};

package/package.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "name": "@ghentcdh/annotation-vue",
+  "version": "0.0.1-alpha.3",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GhentCDH/annotation-editor"
+  },
+  "type": "module",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@ghentcdh/annotated-text": "^1.0.9"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "@ghentcdh/w3c-utils": "*",
+    "vue-router": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vue-router": {
+      "optional": true
+    }
+  }
+}