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']
+    MiddleTruncate: typeof import('./src/components/MiddleTruncate.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/Autocomplete.vue

@@ -83,7 +83,7 @@
 								:disabled="option.disabled"
 								class="group flex cursor-default select-none items-center gap-2 rounded px-2 py-1.5 text-sm text-ink-gray-9 transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-surface-gray-1 data-[disabled]:opacity-50">
 								<component v-if="option.prefix" :is="option.prefix" class="h-4 w-4 flex-shrink-0" />
-								<span class="w-full flex-1 truncate">{{ option.label }}</span>
+								<MiddleTruncate :text="option.label" />
 								<component
 									v-if="option.suffix"
 									:is="option.suffix"
@@ -125,6 +125,7 @@ import {
 } from "reka-ui";
 import type { Component, ComponentPublicInstance } from "vue";
 import { computed, nextTick, ref, useAttrs, watch } from "vue";
+import MiddleTruncate from "../MiddleTruncate.vue";
 
 interface Option {
 	label: string;

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 }}
+							<MiddleTruncate :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 }}
+							<MiddleTruncate :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 MiddleTruncate from "../MiddleTruncate.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>
+			<MiddleTruncate :text="dynamicValueKey" />
 		</div>
 
 		<!-- Clear button -->
@@ -39,6 +39,7 @@
 import CrossIcon from "@/components/Icons/Cross.vue";
 import { FeatherIcon } from "frappe-ui";
 import type { Component } from "vue";
+import MiddleTruncate from "../MiddleTruncate.vue";
 
 defineProps<{
 	component: Component;

frontend/src/components/MiddleTruncate.vue

@@ -0,0 +1,59 @@
+<template>
+	<component
+		:is="as"
+		ref="wrapper"
+		class="flex w-full overflow-hidden whitespace-nowrap"
+		:title="text"
+		:style="applyGradient">
+		<span class="min-w-8 truncate">{{ truncatedSplit }}</span>
+		<span v-if="textParts.length > 1">{{ endSplit }}</span>
+	</component>
+</template>
+
+<script setup lang="ts">
+import { computed, useTemplateRef, ref, watchEffect } from "vue";
+
+const wrapperRef: any = useTemplateRef("wrapper");
+const hasOverflow = ref(false);
+
+const props = withDefaults(
+	defineProps<{
+		text: string;
+		as?: string;
+	}>(),
+	{
+		as: "div",
+	},
+);
+
+watchEffect(() => {
+	if (!wrapperRef.value) return;
+
+	const checkOverflow = () => {
+		hasOverflow.value = wrapperRef.value!.scrollWidth > wrapperRef.value!.clientWidth;
+	};
+
+	checkOverflow();
+
+	const resizeObserver = new ResizeObserver(checkOverflow);
+	resizeObserver.observe(wrapperRef.value);
+
+	return () => resizeObserver.disconnect();
+});
+
+const textParts = computed(() => {
+	return props.text.split(".");
+});
+
+const truncatedSplit = computed(() => {
+	return textParts.value.slice(0, textParts.value.length - 1).join(".");
+});
+
+const endSplit = computed(() => {
+	return `.${textParts.value[textParts.value.length - 1]}`;
+});
+
+const applyGradient = computed(() => {
+	return hasOverflow.value ? "mask-image: linear-gradient(to right, black 90%, transparent)" : "";
+});
+</script>