feat(DynamicValueHandler): truncate middle of key instead of the end

frontend/components.d.ts

@@ -97,6 +97,7 @@ declare module 'vue' {
     MainMenu: typeof import('./src/components/MainMenu.vue')['default']
     MarginHandler: typeof import('./src/components/MarginHandler.vue')['default']
     Meta: typeof import('./src/components/Icons/Meta.vue')['default']
+    MiddleEllipsis: typeof import('./src/components/MiddleEllipsis.vue')['default']
     NewBlockTemplate: typeof import('./src/components/Modals/NewBlockTemplate.vue')['default']
     NewBuilderVariable: typeof import('./src/components/Modals/NewBuilderVariable.vue')['default']
     NewComponent: typeof import('./src/components/Modals/NewComponent.vue')['default']

frontend/src/components/Controls/DynamicValueHandler.vue

@@ -19,21 +19,21 @@
 						<div
 							class="w-full cursor-pointer truncate rounded bg-surface-gray-3 p-2 text-left font-mono text-p-sm text-ink-gray-9"
 							@click.stop="selectAndSetItem(selectedItem)">
-							{{ selectedItem.key }}
+							<MiddleEllipsis :text="selectedItem.key" />
 							<p class="truncate text-xs text-ink-gray-5" :class="{ italic: getValue(selectedItem) == null }">
 								{{ getValue(selectedItem) == null ? "No Value Set" : getValue(selectedItem) }}
 							</p>
 						</div>
 					</li>
-					<li v-for="(item, index) in filteredItems" :key="index">
+					<li v-for="item in filteredItems" :key="item.key">
 						<div
 							class="w-full cursor-pointer truncate rounded p-2 text-left font-mono text-p-sm text-ink-gray-7 hover:bg-surface-gray-2"
 							:class="{
 								'bg-surface-gray-3 text-ink-gray-9':
 									selectedItem?.key === item.key && selectedItem?.comesFrom === item.comesFrom,
 							}"
 							@click.stop="selectAndSetItem(item)">
-							{{ item.key }}
+							<MiddleEllipsis :text="item.key" />
 							<p class="truncate text-xs text-ink-gray-5" :class="{ italic: getValue(item) == null }">
 								{{ getValue(item) == null ? "No Value Set" : getValue(item) }}
 							</p>
@@ -80,6 +80,7 @@ import usePageStore from "@/stores/pageStore";
 import blockController from "@/utils/blockController";
 import { getDataArray, getDefaultPropsList, getParentProps, getPropValue } from "@/utils/helpers";
 import { computed, ref } from "vue";
+import MiddleEllipsis from "../MiddleEllipsis.vue";
 
 const pageStore = usePageStore();
 const builderStore = useBuilderStore();

frontend/src/components/Controls/PropertyControlInput.vue

@@ -21,7 +21,7 @@
 			class="absolute bottom-0 left-0 right-0 top-0 flex cursor-pointer items-center gap-2 rounded bg-surface-violet-1 py-0.5 pl-2.5 pr-6 text-sm text-ink-violet-1"
 			@click.stop="$emit('openDynamicModal')">
 			<FeatherIcon name="zap" class="size-3"></FeatherIcon>
-			<span class="truncate">{{ dynamicValueKey }}</span>
+			<span class="truncate" :title="dynamicValueKey">{{ dynamicValueKey }}</span>
 		</div>
 
 		<!-- Clear button -->

frontend/src/components/MiddleEllipsis.vue

@@ -0,0 +1,40 @@
+<template>
+	<div class="flex w-full overflow-hidden whitespace-nowrap" :title="text">
+		<span ref="start" class="min-w-0 overflow-hidden">{{ start }}</span>
+		<span v-if="hasEllipsis">...</span>
+		<span class="shrink-0">{{ end }}</span>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, useTemplateRef } from "vue";
+
+const props = withDefaults(
+	defineProps<{
+		text: string;
+		lettersAfterSplit?: number;
+	}>(),
+	{
+		lettersAfterSplit: 16,
+	},
+);
+
+const startSplitRef = useTemplateRef("start");
+
+const splitIndex = computed(() => {
+	return Math.floor(props.text.length - props.lettersAfterSplit);
+});
+
+const start = computed(() => {
+	return props.text.slice(0, splitIndex.value);
+});
+
+const end = computed(() => {
+	return props.text.slice(splitIndex.value);
+});
+
+const hasEllipsis = computed(() => {
+	if (startSplitRef.value) return startSplitRef.value.scrollWidth > startSplitRef.value.clientWidth;
+	return false;
+});
+</script>