Merge pull request #266 from raaymax/link-component

feat: added link component

ui/src/builder/BuilderApp.vue

@@ -258,6 +258,7 @@ function handleRendererClick(ev: PointerEvent): void {
 	const targetId = targetEl.dataset.streamsyncId;
 	const targetInstancePath = targetEl.dataset.streamsyncInstancePath;
 	if (targetId !== ssbm.getSelectedId()) {
+		ev.preventDefault();
 		ev.stopPropagation();
 		ssbm.setSelection(targetId, targetInstancePath);
 	}

ui/src/builder/BuilderFieldsText.vue

@@ -26,7 +26,7 @@
 				:id="`list-${componentId}-${fieldKey}`"
 			>
 				<option
-					v-for="(option, optionKey) in templateField.options"
+					v-for="(option, optionKey) in options"
 					:key="optionKey"
 					:value="optionKey"
 				>
@@ -76,6 +76,16 @@ const templateField = computed(() => {
 	return definition.fields[fieldKey.value];
 });
 
+const options = computed(() => {
+	const field = templateField.value;
+	if (field.options) {
+		return typeof field.options === "function"
+			? field.options(ss, componentId.value)
+			: field.options;
+	}
+	return [];
+});
+
 const handleInput = (ev: Event) => {
 	setContentValue(
 		component.value.id,

ui/src/core/templateMap.ts

@@ -10,6 +10,7 @@ import CorePlotlyGraph from "../core_components/content/CorePlotlyGraph.vue";
 import CoreText from "../core_components/content/CoreText.vue";
 import CoreVegaLiteChart from "../core_components/content/CoreVegaLiteChart.vue";
 import CoreVideoPlayer from "../core_components/content/CoreVideoPlayer.vue";
+import CoreLink from "../core_components/content/CoreLink.vue";
 import CoreChat from "../core_components/content/CoreChat.vue";
 // input
 import CoreCheckboxInput from "../core_components/input/CoreCheckboxInput.vue";
@@ -73,6 +74,7 @@ const templateMap = {
 	columns: CoreColumns,
 	tab: CoreTab,
 	tabs: CoreTabs,
+	link: CoreLink,
 	horizontalstack: CoreHorizontalStack,
 	separator: CoreSeparator,
 	image: CoreImage,

ui/src/core_components/content/CoreLink.vue

@@ -0,0 +1,81 @@
+<template>
+	<div class="CoreLink">
+		<a
+			:href="fields.url.value"
+			:target="fields.target.value"
+			:rel="fields.rel.value"
+		>
+			{{ displayText }}
+		</a>
+	</div>
+</template>
+
+<script lang="ts">
+import { FieldType, Core } from "../../streamsyncTypes";
+import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
+import injectionKeys from "../../injectionKeys";
+export default {
+	streamsync: {
+		name: "Link",
+		description: "A component to create a hyperlink.",
+		category: "Content",
+		fields: {
+			url: {
+				name: "URL",
+				type: FieldType.Text,
+				default: "https://streamsync.cloud",
+				desc: "Specify a URL or choose a page. Keep in mind that you can only link to pages for which a key has been specified.",
+				options: (ss: Core) => {
+					return Object.fromEntries(
+						ss
+							.getComponents("root", true)
+							.map((page) => page.content.key)
+							.filter((key) => Boolean(key))
+							.map((key) => [`#${key}`, `Page with key: ${key}`]),
+					);
+				},
+			},
+			target: {
+				name: "Target",
+				type: FieldType.Text,
+				options: {
+					_self: "Self",
+					_blank: "Blank",
+					_parent: "Parent",
+					_top: "Top",
+				},
+				desc: "Specifies where to open the linked document.",
+				default: "_self",
+			},
+			rel: {
+				name: "Rel",
+				type: FieldType.Text,
+				desc: "Specifies the relationship between the current document and the linked document.",
+			},
+			text: {
+				name: "Text",
+				default: "",
+				type: FieldType.Text,
+				desc: "The text to display in the link.",
+			},
+			primaryTextColor,
+			cssClasses,
+		},
+	},
+};
+</script>
+
+<script setup lang="ts">
+import { inject, computed } from "vue";
+const fields = inject(injectionKeys.evaluatedFields);
+
+const displayText = computed(() => {
+	return fields.text.value || fields.url.value;
+});
+</script>
+
+<style scoped>
+.CoreLink a {
+	color: var(--primaryTextColor);
+}
+</style>

ui/src/streamsyncTypes.ts

@@ -1,13 +1,17 @@
 import { generateCore } from "./core";
 import { generateBuilderManager } from "./builder/builderManager";
 
+export type Core = ReturnType<typeof generateCore>;
+
+type ComponentId = string;
+
 /**
  * Basic building block of applications.
  * Multiple instances of a single component can exists. For example, via Repeater.
  */
 
 export type Component = {
-	id: string;
+	id: ComponentId;
 	parentId: string;
 	type: string;
 	position: number;
@@ -55,7 +59,12 @@ export type StreamsyncComponentDefinition = {
 			desc?: string; // Description
 			default?: string; // Value used if the field is empty, e.g. "(No text)"
 			control?: FieldControl; // Which control (text, textarea, etc) to use if not the default for the type
-			options?: Record<string, string>; // List of values to be provided as autocomplete options
+			options?:
+				| Record<string, string>
+				| ((
+						ss?: Core,
+						componentId?: ComponentId,
+				  ) => Record<string, string>); // List of values to be provided as autocomplete options
 			type: FieldType; // Data type for the field
 			category?: FieldCategory; // Category (Layout, Content, etc)
 			applyStyleVariable?: boolean; // Use the value of this field as a CSS variable
@@ -73,7 +82,6 @@ export type StreamsyncComponentDefinition = {
 	positionless?: boolean; // Whether this type of component is positionless (like Sidebar)
 };
 
-export type Core = ReturnType<typeof generateCore>;
 export type BuilderManager = ReturnType<typeof generateBuilderManager>;
 
 export const enum ClipboardOperation {