@glossarist/concept-browser 0.4.6 → 0.4.8
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@glossarist/concept-browser",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.8",
|
|
4
4
|
"description": "Vue SPA for browsing Glossarist terminology datasets with cross-reference resolution, graph visualization, and multi-language support",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -5,8 +5,8 @@ import { useSiteConfig } from '../config/use-site-config';
|
|
|
5
5
|
const { config } = useSiteConfig();
|
|
6
6
|
|
|
7
7
|
const poweredBy = computed(() => {
|
|
8
|
-
const pb = config.value?.features?.poweredBy as {
|
|
9
|
-
return {
|
|
8
|
+
const pb = config.value?.features?.poweredBy as { message?: string; url?: string } | undefined;
|
|
9
|
+
return { message: pb?.message || 'Built with the Glossarist Concept Browser', url: pb?.url || 'https://github.com/glossarist/concept-browser' };
|
|
10
10
|
});
|
|
11
11
|
|
|
12
12
|
const socialLinks = computed(() => {
|
|
@@ -55,7 +55,7 @@ const ownerUrl = computed(() => config.value?.branding?.ownerUrl || '/');
|
|
|
55
55
|
>{{ link.label }}</a>
|
|
56
56
|
<span class="text-ink-200">|</span>
|
|
57
57
|
<span class="text-xs">
|
|
58
|
-
|
|
58
|
+
<a :href="poweredBy.url" target="_blank" rel="noopener" class="concept-link">{{ poweredBy.message }}</a>
|
|
59
59
|
</span>
|
|
60
60
|
</div>
|
|
61
61
|
</div>
|
|
@@ -235,13 +235,12 @@ function scrollMainToTop() {
|
|
|
235
235
|
<!-- Powered by -->
|
|
236
236
|
<div class="mt-6 pt-4 border-t border-ink-100/60">
|
|
237
237
|
<div class="text-[11px] text-ink-300">
|
|
238
|
-
Built with the
|
|
239
238
|
<a
|
|
240
239
|
:href="(siteConfig?.features?.poweredBy as any)?.url || 'https://github.com/glossarist/concept-browser'"
|
|
241
240
|
target="_blank"
|
|
242
241
|
rel="noopener"
|
|
243
242
|
class="concept-link"
|
|
244
|
-
>{{ (siteConfig?.features?.poweredBy as any)?.
|
|
243
|
+
>{{ (siteConfig?.features?.poweredBy as any)?.message || 'Built with the Glossarist Concept Browser' }}</a>
|
|
245
244
|
</div>
|
|
246
245
|
</div>
|
|
247
246
|
</div>
|
package/src/config/types.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import { computed, watch } from 'vue';
|
|
2
|
+
import { computed, watch, nextTick } from 'vue';
|
|
3
3
|
import { getClass, getAllPropertiesForClass, getAllClasses, getStats } from '../adapters/ontology-schema';
|
|
4
4
|
import { ontology, type TaxonomyConcept } from '../adapters/ontology-registry';
|
|
5
5
|
import { useOntologyNav } from '../composables/use-ontology-nav';
|
|
@@ -28,10 +28,11 @@ function activeTaxonomyData() {
|
|
|
28
28
|
return { scheme: ontology.getScheme(key), concepts: all, top };
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
// Scroll to top when selection changes
|
|
32
31
|
watch([activeClassId, activeTaxonomy], () => {
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
nextTick(() => {
|
|
33
|
+
const main = document.querySelector('main');
|
|
34
|
+
if (main) main.scrollTo({ top: 0 });
|
|
35
|
+
});
|
|
35
36
|
});
|
|
36
37
|
|
|
37
38
|
const allClasses = getAllClasses();
|
|
@@ -39,170 +40,175 @@ const allClasses = getAllClasses();
|
|
|
39
40
|
|
|
40
41
|
<template>
|
|
41
42
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
42
|
-
<!--
|
|
43
|
-
<
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
43
|
+
<!-- Overview: header + class grid -->
|
|
44
|
+
<template v-if="isOverview">
|
|
45
|
+
<div class="mb-8">
|
|
46
|
+
<h1 class="text-2xl sm:text-3xl font-semibold text-ink-800">Glossarist Ontology</h1>
|
|
47
|
+
<p class="text-sm text-ink-400 mt-1">
|
|
48
|
+
OWL ontology for terminology management (ISO 10241-1, 30042, 12620, 25964/SKOS)
|
|
49
|
+
</p>
|
|
50
|
+
<div class="max-w-2xl mt-3 text-sm text-ink-500 leading-relaxed space-y-2">
|
|
51
|
+
<p>The Glossarist ontology defines the RDF/OWL vocabulary for describing structured terminology data. It models <strong>concepts</strong> with multilingual <strong>localizations</strong> (definitions, notes, examples) and typed <strong>designations</strong> (expressions, abbreviations, symbols) using the SKOS-XL pattern for reified lexical labels.</p>
|
|
52
|
+
<p>It aligns with <strong>SKOS</strong> (concepts and relationships), <strong>SKOS-XL</strong> (designations as labels), <strong>ISO 25964</strong> (hierarchical relationship subtypes — generic, partitive, instantial), <strong>PROV-O</strong> (source provenance), and <strong>Dublin Core Terms</strong> (language, citation). Enumeration values use SKOS ConceptSchemes (10 taxonomies).</p>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="flex flex-wrap gap-2 mt-4">
|
|
55
|
+
<span class="badge badge-blue text-[10px]">{{ stats.classCount }} classes</span>
|
|
56
|
+
<span class="badge text-[10px] bg-emerald-50 text-emerald-700">{{ stats.objectPropertyCount }} object properties</span>
|
|
57
|
+
<span class="badge text-[10px] bg-amber-50 text-amber-700">{{ stats.datatypePropertyCount }} datatype properties</span>
|
|
58
|
+
<span class="badge text-[10px] bg-purple-50 text-purple-700">10 SKOS taxonomies</span>
|
|
59
|
+
</div>
|
|
60
|
+
<code class="block text-xs text-ink-400 mt-2">https://www.glossarist.org/ontologies/glossarist</code>
|
|
57
61
|
</div>
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
:
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
</
|
|
78
|
-
<button @click="activeTaxonomy = activeTaxonomy ? null : 'conceptStatus'"
|
|
79
|
-
class="flex-shrink-0 px-3 py-2.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors min-h-[44px] flex items-center gap-1.5"
|
|
80
|
-
:class="activeTaxonomy
|
|
81
|
-
? 'bg-ink-800 text-white'
|
|
82
|
-
: 'bg-surface-raised border border-ink-100 text-ink-600 hover:bg-ink-50'"
|
|
83
|
-
>Taxonomies</button>
|
|
62
|
+
|
|
63
|
+
<!-- Sticky mobile chips (for small screens where sidebar is hidden) -->
|
|
64
|
+
<div class="lg:hidden sticky top-14 z-10 bg-surface -mx-4 px-4 py-2 border-b border-ink-100/60 mb-4">
|
|
65
|
+
<div class="flex gap-2 overflow-x-auto scrollbar-none">
|
|
66
|
+
<button v-for="item in allNavItems" :key="item.id"
|
|
67
|
+
@click="activeClassId = item.id; activeTaxonomy = null"
|
|
68
|
+
class="flex-shrink-0 px-3 py-2.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors min-h-[44px] flex items-center gap-1.5"
|
|
69
|
+
:class="activeClassId === item.id && !activeTaxonomy
|
|
70
|
+
? 'bg-ink-800 text-white'
|
|
71
|
+
: 'bg-surface-raised border border-ink-100 text-ink-600 hover:bg-ink-50'"
|
|
72
|
+
>
|
|
73
|
+
{{ item.label }}
|
|
74
|
+
</button>
|
|
75
|
+
<button @click="activeTaxonomy = activeTaxonomy ? null : 'conceptStatus'"
|
|
76
|
+
class="flex-shrink-0 px-3 py-2.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors min-h-[44px] flex items-center gap-1.5"
|
|
77
|
+
:class="activeTaxonomy
|
|
78
|
+
? 'bg-ink-800 text-white'
|
|
79
|
+
: 'bg-surface-raised border border-ink-100 text-ink-600 hover:bg-ink-50'"
|
|
80
|
+
>Taxonomies</button>
|
|
81
|
+
</div>
|
|
84
82
|
</div>
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
@click="activeClassId = cls.compact"
|
|
95
|
-
class="border border-ink-100/60 rounded-lg p-3 cursor-pointer hover:border-ink-200 hover:bg-ink-50/50 transition-colors">
|
|
96
|
-
<div class="flex items-center gap-2">
|
|
97
|
-
<span class="text-sm font-medium text-ink-700">{{ cls.label }}</span>
|
|
98
|
-
<code class="text-[10px] text-ink-400 bg-ink-50 px-1.5 py-0.5 rounded">{{ cls.compact }}</code>
|
|
99
|
-
</div>
|
|
100
|
-
<p v-if="cls.comment" class="text-xs text-ink-400 mt-1 line-clamp-2">{{ cls.comment }}</p>
|
|
101
|
-
<div v-if="cls.subClassOf" class="text-[10px] text-ink-300 mt-1">
|
|
102
|
-
subClassOf <code class="text-ink-400">{{ cls.subClassOf }}</code>
|
|
103
|
-
</div>
|
|
83
|
+
|
|
84
|
+
<h2 class="text-lg font-semibold text-ink-800 mb-4">Class Overview</h2>
|
|
85
|
+
<div class="grid gap-3 sm:grid-cols-2">
|
|
86
|
+
<div v-for="cls in allClasses" :key="cls.compact"
|
|
87
|
+
@click="activeClassId = cls.compact"
|
|
88
|
+
class="border border-ink-100/60 rounded-lg p-3 cursor-pointer hover:border-ink-200 hover:bg-ink-50/50 transition-colors">
|
|
89
|
+
<div class="flex items-center gap-2">
|
|
90
|
+
<span class="text-sm font-medium text-ink-700">{{ cls.label }}</span>
|
|
91
|
+
<code class="text-[10px] text-ink-400 bg-ink-50 px-1.5 py-0.5 rounded">{{ cls.compact }}</code>
|
|
104
92
|
</div>
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
<!-- Class detail -->
|
|
109
|
-
<template v-if="!activeTaxonomy && activeClass">
|
|
110
|
-
<div class="pb-4 border-b border-ink-100/60 mb-4">
|
|
111
|
-
<h2 class="text-lg font-semibold text-ink-800">{{ activeClass.label }}</h2>
|
|
112
|
-
<code class="block text-xs text-ink-400 mt-1">{{ activeClass.iri }}</code>
|
|
113
|
-
<div v-if="activeClass.subClassOf" class="flex items-center gap-2 mt-2 text-sm">
|
|
114
|
-
<span class="text-ink-400 text-xs">subClassOf</span>
|
|
115
|
-
<code class="text-xs text-ink-600 bg-ink-50 px-2 py-0.5 rounded">{{ activeClass.subClassOf }}</code>
|
|
116
|
-
<template v-if="activeClass.ancestors.length > 1">
|
|
117
|
-
<span class="text-ink-300 text-xs">→</span>
|
|
118
|
-
<code class="text-xs text-ink-500">{{ activeClass.ancestors.slice(1).join(' → ') }}</code>
|
|
119
|
-
</template>
|
|
93
|
+
<p v-if="cls.comment" class="text-xs text-ink-400 mt-1 line-clamp-2">{{ cls.comment }}</p>
|
|
94
|
+
<div v-if="cls.subClassOf" class="text-[10px] text-ink-300 mt-1">
|
|
95
|
+
subClassOf <code class="text-ink-400">{{ cls.subClassOf }}</code>
|
|
120
96
|
</div>
|
|
121
|
-
<p v-if="activeClass.comment" class="text-sm text-ink-500 mt-3 leading-relaxed">{{ activeClass.comment }}</p>
|
|
122
97
|
</div>
|
|
98
|
+
</div>
|
|
99
|
+
</template>
|
|
123
100
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
<th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Property</th>
|
|
133
|
-
<th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Range</th>
|
|
134
|
-
<th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Description</th>
|
|
135
|
-
</tr>
|
|
136
|
-
</thead>
|
|
137
|
-
<tbody>
|
|
138
|
-
<tr v-for="p in activeProperties.object" :key="p.compact" class="border-b border-ink-100/30">
|
|
139
|
-
<td class="py-2 px-3 align-top">
|
|
140
|
-
<code class="text-xs text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded">{{ p.compact }}</code>
|
|
141
|
-
<div v-if="p.inverseOf" class="text-[10px] text-ink-300 mt-0.5">↔ {{ p.inverseOf }}</div>
|
|
142
|
-
</td>
|
|
143
|
-
<td class="py-2 px-3 align-top">
|
|
144
|
-
<code class="text-xs text-ink-500">{{ p.range || p.rangeUnion?.join(' | ') || '—' }}</code>
|
|
145
|
-
</td>
|
|
146
|
-
<td class="py-2 px-3 text-xs text-ink-400 align-top">{{ p.comment || '' }}</td>
|
|
147
|
-
</tr>
|
|
148
|
-
</tbody>
|
|
149
|
-
</table>
|
|
150
|
-
</div>
|
|
101
|
+
<!-- Class detail (no overview header) -->
|
|
102
|
+
<template v-if="!activeTaxonomy && activeClass">
|
|
103
|
+
<!-- Breadcrumb -->
|
|
104
|
+
<nav class="flex items-center gap-1.5 text-sm text-ink-400 mb-4">
|
|
105
|
+
<button @click="activeClassId = null" class="hover:text-ink-700 transition-colors">Overview</button>
|
|
106
|
+
<span class="text-ink-200">/</span>
|
|
107
|
+
<span class="text-ink-700">{{ activeClass.label }}</span>
|
|
108
|
+
</nav>
|
|
151
109
|
|
|
152
|
-
|
|
153
|
-
<
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
</
|
|
157
|
-
<
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
<th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Description</th>
|
|
163
|
-
</tr>
|
|
164
|
-
</thead>
|
|
165
|
-
<tbody>
|
|
166
|
-
<tr v-for="p in activeProperties.datatype" :key="p.compact" class="border-b border-ink-100/30">
|
|
167
|
-
<td class="py-2 px-3 align-top">
|
|
168
|
-
<code class="text-xs text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded">{{ p.compact }}</code>
|
|
169
|
-
</td>
|
|
170
|
-
<td class="py-2 px-3 align-top">
|
|
171
|
-
<code class="text-xs text-ink-500">{{ p.range || '—' }}</code>
|
|
172
|
-
</td>
|
|
173
|
-
<td class="py-2 px-3 text-xs text-ink-400 align-top">{{ p.comment || '' }}</td>
|
|
174
|
-
</tr>
|
|
175
|
-
</tbody>
|
|
176
|
-
</table>
|
|
110
|
+
<div class="pb-4 border-b border-ink-100/60 mb-4">
|
|
111
|
+
<h1 class="text-xl font-semibold text-ink-800">{{ activeClass.label }}</h1>
|
|
112
|
+
<code class="block text-xs text-ink-400 mt-1">{{ activeClass.iri }}</code>
|
|
113
|
+
<div v-if="activeClass.subClassOf" class="flex items-center gap-2 mt-2 text-sm">
|
|
114
|
+
<span class="text-ink-400 text-xs">subClassOf</span>
|
|
115
|
+
<code class="text-xs text-ink-600 bg-ink-50 px-2 py-0.5 rounded">{{ activeClass.subClassOf }}</code>
|
|
116
|
+
<template v-if="activeClass.ancestors.length > 1">
|
|
117
|
+
<span class="text-ink-300 text-xs">→</span>
|
|
118
|
+
<code class="text-xs text-ink-500">{{ activeClass.ancestors.slice(1).join(' → ') }}</code>
|
|
119
|
+
</template>
|
|
177
120
|
</div>
|
|
121
|
+
<p v-if="activeClass.comment" class="text-sm text-ink-500 mt-3 leading-relaxed">{{ activeClass.comment }}</p>
|
|
122
|
+
</div>
|
|
178
123
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
124
|
+
<!-- Object Properties -->
|
|
125
|
+
<div v-if="activeProperties.object.length" class="mb-6">
|
|
126
|
+
<h3 class="text-xs uppercase tracking-wide text-ink-300 font-medium mb-2">
|
|
127
|
+
Object Properties ({{ activeProperties.object.length }})
|
|
128
|
+
</h3>
|
|
129
|
+
<table class="w-full text-sm border-collapse">
|
|
130
|
+
<thead>
|
|
131
|
+
<tr class="border-b border-ink-100/60">
|
|
132
|
+
<th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Property</th>
|
|
133
|
+
<th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Range</th>
|
|
134
|
+
<th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Description</th>
|
|
135
|
+
</tr>
|
|
136
|
+
</thead>
|
|
137
|
+
<tbody>
|
|
138
|
+
<tr v-for="p in activeProperties.object" :key="p.compact" class="border-b border-ink-100/30">
|
|
139
|
+
<td class="py-2 px-3 align-top">
|
|
140
|
+
<code class="text-xs text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded">{{ p.compact }}</code>
|
|
141
|
+
<div v-if="p.inverseOf" class="text-[10px] text-ink-300 mt-0.5">↔ {{ p.inverseOf }}</div>
|
|
142
|
+
</td>
|
|
143
|
+
<td class="py-2 px-3 align-top">
|
|
144
|
+
<code class="text-xs text-ink-500">{{ p.range || p.rangeUnion?.join(' | ') || '—' }}</code>
|
|
145
|
+
</td>
|
|
146
|
+
<td class="py-2 px-3 text-xs text-ink-400 align-top">{{ p.comment || '' }}</td>
|
|
147
|
+
</tr>
|
|
148
|
+
</tbody>
|
|
149
|
+
</table>
|
|
150
|
+
</div>
|
|
183
151
|
|
|
184
|
-
<!--
|
|
185
|
-
<
|
|
186
|
-
<
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
152
|
+
<!-- Datatype Properties -->
|
|
153
|
+
<div v-if="activeProperties.datatype.length">
|
|
154
|
+
<h3 class="text-xs uppercase tracking-wide text-ink-300 font-medium mb-2">
|
|
155
|
+
Datatype Properties ({{ activeProperties.datatype.length }})
|
|
156
|
+
</h3>
|
|
157
|
+
<table class="w-full text-sm border-collapse">
|
|
158
|
+
<thead>
|
|
159
|
+
<tr class="border-b border-ink-100/60">
|
|
160
|
+
<th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Property</th>
|
|
161
|
+
<th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Datatype</th>
|
|
162
|
+
<th class="text-left text-[11px] font-medium text-ink-400 uppercase tracking-wide py-2 px-3">Description</th>
|
|
163
|
+
</tr>
|
|
164
|
+
</thead>
|
|
165
|
+
<tbody>
|
|
166
|
+
<tr v-for="p in activeProperties.datatype" :key="p.compact" class="border-b border-ink-100/30">
|
|
167
|
+
<td class="py-2 px-3 align-top">
|
|
168
|
+
<code class="text-xs text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded">{{ p.compact }}</code>
|
|
169
|
+
</td>
|
|
170
|
+
<td class="py-2 px-3 align-top">
|
|
171
|
+
<code class="text-xs text-ink-500">{{ p.range || '—' }}</code>
|
|
172
|
+
</td>
|
|
173
|
+
<td class="py-2 px-3 text-xs text-ink-400 align-top">{{ p.comment || '' }}</td>
|
|
174
|
+
</tr>
|
|
175
|
+
</tbody>
|
|
176
|
+
</table>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<div v-if="!activeProperties.object.length && !activeProperties.datatype.length" class="text-sm text-ink-300 italic">
|
|
180
|
+
No properties defined directly on this class.
|
|
181
|
+
</div>
|
|
182
|
+
</template>
|
|
190
183
|
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
184
|
+
<!-- Taxonomy detail (no overview header) -->
|
|
185
|
+
<template v-if="activeTaxonomy && activeTaxonomyData()">
|
|
186
|
+
<!-- Breadcrumb -->
|
|
187
|
+
<nav class="flex items-center gap-1.5 text-sm text-ink-400 mb-4">
|
|
188
|
+
<button @click="activeTaxonomy = null; activeClassId = null" class="hover:text-ink-700 transition-colors">Overview</button>
|
|
189
|
+
<span class="text-ink-200">/</span>
|
|
190
|
+
<span class="text-ink-700">{{ taxonomyLabels[activeTaxonomy] }}</span>
|
|
191
|
+
</nav>
|
|
192
|
+
|
|
193
|
+
<div class="pb-4 border-b border-ink-100/60 mb-4">
|
|
194
|
+
<h1 class="text-xl font-semibold text-ink-800">{{ taxonomyLabels[activeTaxonomy] }}</h1>
|
|
195
|
+
<code class="block text-xs text-ink-400 mt-1">{{ activeTaxonomyData()!.scheme }}</code>
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
<div class="space-y-2">
|
|
199
|
+
<div v-for="concept in activeTaxonomyData()!.concepts" :key="concept.id"
|
|
200
|
+
class="border border-ink-100/60 rounded-lg p-3">
|
|
201
|
+
<div class="flex items-center gap-2">
|
|
202
|
+
<code class="text-xs font-semibold text-ink-700">{{ concept.id }}</code>
|
|
203
|
+
<span class="text-sm text-ink-600">{{ concept.prefLabel }}</span>
|
|
204
|
+
<span v-if="concept.altLabel" class="text-xs text-ink-400">({{ concept.altLabel }})</span>
|
|
205
|
+
</div>
|
|
206
|
+
<p v-if="concept.definition" class="text-xs text-ink-400 mt-1 leading-relaxed">{{ concept.definition }}</p>
|
|
207
|
+
<div v-if="concept.broader" class="text-[10px] text-ink-300 mt-1">
|
|
208
|
+
broader: <code class="text-ink-400">{{ concept.broader }}</code>
|
|
203
209
|
</div>
|
|
204
210
|
</div>
|
|
205
|
-
</
|
|
206
|
-
</
|
|
211
|
+
</div>
|
|
212
|
+
</template>
|
|
207
213
|
</div>
|
|
208
214
|
</template>
|