diff --git a/.gitignore b/.gitignore index f8476820b..df7c37d18 100644 --- a/.gitignore +++ b/.gitignore @@ -25,4 +25,4 @@ playground/ *.mp4 .turbo styles.css -.aider* +.aider* \ No newline at end of file diff --git a/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue b/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue index dc58e3f09..3626ae0e4 100644 --- a/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue +++ b/src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue @@ -17,7 +17,15 @@ :disable-collapse="COMPONENT_TYPES_ROOT.has(component.type)" :no-nested-space="COMPONENT_TYPES_ROOT.has(component.type)" :collapsed="isOutsideActivePage" + :right-click-options="rightClickDropdownOptions" + :dropdown-options=" + component?.type === 'blueprints_blueprint' && + isDeleteAllowed(props.componentId) + ? rightClickDropdownOptions + : undefined + " @select="select" + @dropdown-select="handleDropdownSelect($event)" @dragover="handleDragOver" @dragstart="handleDragStart" @dragend="handleDragEnd" @@ -83,6 +91,7 @@ import { COMPONENT_TYPES_TOP_LEVEL, } from "@/constants/component"; import WdsIcon from "@/wds/WdsIcon.vue"; +import type { WdsDropdownMenuOption } from "@/wds/WdsDropdownMenu.vue"; const props = defineProps({ componentId: { type: String, required: true }, @@ -91,6 +100,9 @@ const props = defineProps({ const treeBranch = ref>(); +const rightClickDropdownOptions: WdsDropdownMenuOption[] = [ + { label: "Delete", value: "delete", icon: "trash-2" }, +]; const wf = inject(injectionKeys.core); const wfbm = inject(injectionKeys.builderManager); const selected = computed(() => wfbm.isComponentIdSelected(props.componentId)); @@ -101,11 +113,12 @@ const { moveComponent, goToComponentParentPage, isDraggingAllowed, + isDeleteAllowed, } = useComponentActions(wf, wfbm, tracking); const { getComponentInfoFromDrag, removeInsertionCandidacy, isParentSuitable } = useDragDropComponent(wf); const { isComponentVisible } = useEvaluator(wf); -const emit = defineEmits(["expandBranch"]); +const emits = defineEmits(["expandBranch", "delete"]); const q = computed(() => props.query?.toLocaleLowerCase() ?? ""); @@ -145,7 +158,7 @@ async function select(ev: MouseEvent | KeyboardEvent) { function expand() { if (!treeBranch.value) return; treeBranch.value.expand(); - emit("expandBranch"); + emits("expandBranch"); } function scrollToShow() { @@ -201,6 +214,10 @@ function handleDrop(ev: DragEvent) { removeInsertionCandidacy(ev); } +function handleDropdownSelect(action: string) { + if (action === "delete") emits("delete"); +} + const isOutsideActivePage = computed(() => { if (!wf.activePageId.value) return false;