fix: hover and selected logic

frappe/public/js/form_builder/components/Field.vue

@@ -1,16 +1,20 @@
 <script setup>
 import { watch, ref, nextTick } from "vue";
+import { useStore } from "../store";
 
 let props = defineProps(["field"]);
+let store = useStore();
 
 let label_input = ref(null);
 let editing = ref(false);
+let hovered = ref(false);
 
 watch(
 	editing,
 	value => {
 		if (value) {
 			nextTick(() => label_input.value.focus());
+			store.selected_field = props.field.df;
 		}
 	},
 	{ deep: true }
@@ -19,10 +23,16 @@ watch(
 
 <template>
 	<div
-		class="field"
-		v-show="!field.remove"
+		:class="[
+			'field',
+			hovered ? 'hovered' : '',
+			store.selected(field.df.name) ? 'selected' : ''
+		]"
+		v-show="!field.df.remove"
 		:title="field.df.fieldname"
 		@click.stop="editing = true"
+		@mouseover.stop="hovered = true"
+		@mouseout.stop="hovered = false"
 	>
 		<div class="field-controls">
 			<div>
@@ -49,7 +59,7 @@ watch(
 						<use href="#icon-edit"></use>
 					</svg>
 				</button>
-				<button class="btn btn-xs btn-icon" @click="field.remove = true">
+				<button class="btn btn-xs btn-icon" @click="$set(field, 'remove', true)">
 					<svg class="icon icon-sm">
 						<use href="#icon-close"></use>
 					</svg>
@@ -94,7 +104,9 @@ watch(
 		border-color: var(--gray-600);
 	}
 
-	&:hover {
+	&.hovered,
+	&.selected {
+		border-color: var(--primary);
 		.btn.btn-icon {
 			opacity: 1 !important;
 		}

frappe/public/js/form_builder/components/Section.vue

@@ -1,14 +1,27 @@
 <script setup>
 import draggable from "vuedraggable";
 import Field from "./Field.vue";
+import { ref } from "vue";
+import { useStore } from "../store";
 
 let props = defineProps(["section"]);
+let store = useStore();
 
+let hovered = ref(false);
 </script>
 
 <template>
 	<div class="form-section-container" v-if="!section.remove">
-		<div class="form-section">
+		<div
+			:class="[
+				'form-section',
+				hovered ? 'hovered' : '',
+				store.selected(section.df.name) ? 'selected' : ''
+			]"
+			@click="store.selected_field = section.df"
+			@mouseover.stop="hovered = true"
+			@mouseout.stop="hovered = false"
+		>
 			<div :class="['section-header', section.df.label ? '' : 'hidden']">
 				<input
 					class="input-section-label"
@@ -44,6 +57,7 @@ let props = defineProps(["section"]);
 					class="column col"
 					v-for="(column, i) in section.columns"
 					:key="i"
+					@mouseover.stop="hovered = false"
 				>
 					<draggable
 						class="drag-container"
@@ -84,6 +98,15 @@ let props = defineProps(["section"]);
 			border-bottom-right-radius: var(--border-radius);
 		}
 
+		&.hovered,
+		&.selected {
+			border-color: var(--primary);
+		}
+
+		&.selected .section-header {
+			display: flex !important;
+		}
+
 		&:not(:first-child) {
 			margin-top: 1rem;
 		}
@@ -94,6 +117,10 @@ let props = defineProps(["section"]);
 			align-items: center;
 			padding-bottom: 0.75rem;
 
+			&.hidden {
+				display: none;
+			}
+
 			.input-section-label {
 				border: 1px solid transparent;
 				border-radius: var(--border-radius);

frappe/public/js/form_builder/components/Tabs.vue

@@ -11,6 +11,7 @@ let active_tab = ref(layout.tabs[0].df.name);
 
 function activate_tab(tab) {
 	active_tab.value = tab.df.name;
+	store.selected_field = tab.df;
 }
 </script>
 

frappe/public/js/form_builder/store.js

@@ -8,8 +8,15 @@ export const useStore = defineStore("store", {
 		fields: [],
 		docfields: [],
 		layout: {},
+		selected_field: null,
+		hovered: false,
 		dirty: false,
 	}),
+	getters: {
+		selected: (state) => {
+			return (name) => state.selected_field?.name == name;
+		},
+	},
 	actions: {
 		fetch() {
 			return new Promise((resolve) => {