feat: create basic framework for feature content component #81

components/feature-window-content.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+interface Props {
+	params: TextWindowItem["params"];
+}
+
+const props = defineProps<Props>();
+const { params } = toRefs(props);
+
+const { data, isPending, isPlaceholderData } = useProfileById(params);
+const openNewWindowFromAnchor = useAnchorClickHandler();
+
+const isLoading = computed(() => {
+	return isPending.value || isPlaceholderData.value;
+});
+</script>
+
+<template>
+	<div
+		class="relative isolate grid h-full w-full overflow-auto"
+		:class="{ 'opacity-50 grayscale': isLoading }"
+	>
+		<!-- eslint-disable-next-line vue/no-v-html, vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
+		<div v-if="data" class="prose max-w-3xl p-8" @click="openNewWindowFromAnchor" v-html="data" />
+
+		<Centered v-if="isLoading">
+			<LoadingIndicator />
+		</Centered>
+	</div>
+</template>
+
+<style>
+/* stylelint-disable-next-line selector-class-pattern */
+.tbHeader {
+	margin: 0;
+}
+</style>

components/window-content.vue

@@ -10,5 +10,6 @@ const props = defineProps<Props>();
 	<GeoMapWindowContent v-if="props.item.kind === 'geo-map'" :params="props.item.params" />
 	<TextWindowContent v-if="props.item.kind === 'text'" :params="props.item.params" />
 	<ProfileWindowContent v-if="props.item.kind === 'profile'" :params="props.item.params" />
+	<FeatureWindowContent v-if="props.item.kind === 'feature'" :params="props.item.params" />
 	<pre v-else>{{ props }}</pre>
 </template>

stores/use-windows-store.ts

@@ -71,6 +71,13 @@ export interface ProfileWindowItem extends WindowItemBase {
 	};
 }
 
+export interface FeatureWindowItem extends WindowItemBase {
+	kind: "feature";
+	params: {
+		id: string;
+	};
+}
+
 export type WindowItem =
 	| BibliographyQueryWindowItem
 	| CorpusQueryWindowItem
@@ -79,6 +86,7 @@ export type WindowItem =
 	| DataListWindowItem
 	| DictionaryEntryWindowItem
 	| DictionaryQueryWindowItem
+	| FeatureWindowItem
 	| GeoMapWindowItem
 	| ProfileWindowItem
 	| SampleTextWindowItem

utils/is-window-type.ts

@@ -13,6 +13,7 @@ export const windowTypeMap: Record<WindowType, WindowItemKind> = {
 	Text: "text",
 	WMap: "geo-map",
 	Profile: "profile",
+	Feature: "feature",
 };
 
 export function isWindowType(value: string | undefined): value is WindowType {