feat: move the conditions block buttons

src/components/block/BlockBase.vue

@@ -10,16 +10,26 @@
       class="absolute bottom-1 transition-transform duration-300 pt-4 ml-1 menu"
     >
       <div
-        class="bg-accent dark:bg-gray-100 dark:text-black px-3 py-2 text-white rounded-lg flex items-center"
+        class="bg-accent dark:bg-gray-100 dark:text-black text-white rounded-lg flex items-center"
       >
-        <button v-if="!hideEdit" @click="$emit('edit')">
+        <button
+          v-if="!hideEdit"
+          class="px-3 focus:ring-0 py-2"
+          title="Edit block"
+          @click="$emit('edit')"
+        >
           <v-remixicon size="20" name="riPencilLine" />
         </button>
         <hr
           v-if="!hideDelete && !hideEdit"
-          class="border-r border-gray-600 h-5 mx-3"
+          class="border-r border-gray-600 h-5"
         />
-        <button v-if="!hideDelete" @click.stop="$emit('delete')">
+        <button
+          v-if="!hideDelete"
+          class="px-3 focus:ring-0 py-2"
+          title="Delete block"
+          @click.stop="$emit('delete')"
+        >
           <v-remixicon size="20" name="riDeleteBin7Line" />
         </button>
         <slot name="action" />

src/components/block/BlockConditions.vue

@@ -1,8 +1,10 @@
 <template>
-  <ui-card
+  <block-base
     :id="componentId"
-    class="w-64 relative"
-    @dblclick.stop="$emit('edit')"
+    :data-position="JSON.stringify(position)"
+    class="w-64"
+    @edit="$emit('edit')"
+    @delete="$emit('delete', id)"
   >
     <Handle :id="`${id}-input-1`" type="target" :position="Position.Left" />
     <div class="flex items-center">
@@ -13,17 +15,6 @@
         <v-remixicon name="riAB" size="20" class="inline-block mr-1" />
         <span>{{ t('workflow.blocks.conditions.name') }}</span>
       </div>
-      <div class="flex-grow"></div>
-      <v-remixicon
-        name="riDeleteBin7Line"
-        class="cursor-pointer mr-2"
-        @click.stop="$emit('delete', id)"
-      />
-      <v-remixicon
-        name="riPencilLine"
-        class="inline-block cursor-pointer"
-        @click="$emit('edit')"
-      />
     </div>
     <p
       v-show="data.description"
@@ -80,13 +71,14 @@
       type="source"
       style="top: auto; bottom: 10px"
     />
-  </ui-card>
+  </block-base>
 </template>
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { Handle, Position } from '@braks/vue-flow';
 import { useComponentId } from '@/composable/componentId';
 import { useEditorBlock } from '@/composable/editorBlock';
+import BlockBase from './BlockBase.vue';
 
 const props = defineProps({
   id: {