feat: block settings in the conditions block

src/components/newtab/workflow/edit/EditBlockSettings.vue

@@ -1,14 +1,20 @@
 <template>
   <div class="block-settings">
-    <ui-button
-      :class="{ 'text-primary': state.onError.enable }"
-      @click="state.showModal = true"
+    <slot
+      name="button"
+      :active="state.onError.enable"
+      :show="() => (state.showModal = true)"
     >
-      <v-remixicon name="riShieldLine" class="-ml-1 mr-2" />
-      <span>
-        {{ t('workflow.blocks.base.settings.title') }}
-      </span>
-    </ui-button>
+      <ui-button
+        :class="{ 'text-primary': state.onError.enable }"
+        @click="state.showModal = true"
+      >
+        <v-remixicon name="riShieldLine" class="-ml-1 mr-2" />
+        <span>
+          {{ t('workflow.blocks.base.settings.title') }}
+        </span>
+      </ui-button>
+    </slot>
     <ui-modal
       v-model="state.showModal"
       :title="t('workflow.blocks.base.settings.title')"
@@ -31,10 +37,12 @@
           />
         </ui-tab-panel>
         <ui-tab-panel value="on-error">
-          <block-setting-on-error
-            :data="state.onError"
-            @change="onDataChange('onError', $event)"
-          />
+          <slot name="on-error">
+            <block-setting-on-error
+              :data="state.onError"
+              @change="onDataChange('onError', $event)"
+            />
+          </slot>
         </ui-tab-panel>
         <ui-tab-panel value="lines">
           <block-setting-lines :block-id="data.blockId" />
@@ -56,9 +64,9 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
-  editor: {
-    type: Object,
-    default: () => ({}),
+  onErrorLabel: {
+    type: String,
+    default: '',
   },
 });
 const emit = defineEmits(['change']);
@@ -68,7 +76,10 @@ const { t } = useI18n();
 const browserType = BROWSER_TYPE;
 const supportedBlocks = ['forms', 'event-click', 'trigger-event', 'press-key'];
 const tabs = [
-  { id: 'on-error', name: t('workflow.blocks.base.onError.button') },
+  {
+    id: 'on-error',
+    name: props.onErrorLabel || t('workflow.blocks.base.onError.button'),
+  },
   { id: 'lines', name: t('workflow.blocks.base.settings.line.title') },
 ];
 const isSupported =

src/components/newtab/workflow/edit/EditConditions.vue

@@ -20,49 +20,52 @@
         {{ t('workflow.blocks.conditions.add') }}
       </ui-button>
       <div class="flex-grow"></div>
-      <ui-button
-        v-tooltip:bottom="t('common.settings')"
-        icon
-        @click="state.showSettings = !state.showSettings"
+      <edit-block-settings
+        :data="{ data, blockId }"
+        on-error-label="Cn conditions not met"
+        @change="updateData($event)"
       >
-        <v-remixicon
-          :name="state.showSettings ? 'riCloseLine' : 'riSettings3Line'"
-        />
-      </ui-button>
+        <template #button="{ show }">
+          <ui-button v-tooltip:bottom="t('common.settings')" icon @click="show">
+            <v-remixicon
+              :name="state.showSettings ? 'riCloseLine' : 'riSettings3Line'"
+            />
+          </ui-button>
+        </template>
+        <template #on-error>
+          <label class="flex items-center mt-6">
+            <ui-switch
+              :model-value="data.retryConditions"
+              @change="updateData({ retryConditions: $event })"
+            />
+            <span class="ml-2 leading-tight">
+              {{ t('workflow.blocks.conditions.retryConditions') }}
+            </span>
+          </label>
+          <div v-if="data.retryConditions" class="mt-2">
+            <ui-input
+              :model-value="data.retryCount"
+              :title="t('workflow.blocks.element-exists.tryFor.title')"
+              :label="t('workflow.blocks.element-exists.tryFor.label')"
+              class="w-full mb-1"
+              type="number"
+              min="1"
+              @change="updateData({ retryCount: +$event })"
+            />
+            <ui-input
+              :model-value="data.retryTimeout"
+              :label="t('workflow.blocks.element-exists.timeout.label')"
+              :title="t('workflow.blocks.element-exists.timeout.title')"
+              class="w-full"
+              type="number"
+              min="200"
+              @change="updateData({ retryTimeout: +$event })"
+            />
+          </div>
+        </template>
+      </edit-block-settings>
     </div>
-    <template v-if="state.showSettings">
-      <label class="flex items-center mt-6">
-        <ui-switch
-          :model-value="data.retryConditions"
-          @change="updateData({ retryConditions: $event })"
-        />
-        <span class="ml-2 leading-tight">
-          {{ t('workflow.blocks.conditions.retryConditions') }}
-        </span>
-      </label>
-      <div v-if="data.retryConditions" class="mt-2">
-        <ui-input
-          :model-value="data.retryCount"
-          :title="t('workflow.blocks.element-exists.tryFor.title')"
-          :label="t('workflow.blocks.element-exists.tryFor.label')"
-          class="w-full mb-1"
-          type="number"
-          min="1"
-          @change="updateData({ retryCount: +$event })"
-        />
-        <ui-input
-          :model-value="data.retryTimeout"
-          :label="t('workflow.blocks.element-exists.timeout.label')"
-          :title="t('workflow.blocks.element-exists.timeout.title')"
-          class="w-full"
-          type="number"
-          min="200"
-          @change="updateData({ retryTimeout: +$event })"
-        />
-      </div>
-    </template>
     <draggable
-      v-else
       v-model="conditions"
       item-key="id"
       tag="ui-list"
@@ -126,6 +129,7 @@ import { nanoid } from 'nanoid';
 import Draggable from 'vuedraggable';
 import { sleep } from '@/utils/helper';
 import SharedConditionBuilder from '@/components/newtab/shared/SharedConditionBuilder/index.vue';
+import EditBlockSettings from './EditBlockSettings.vue';
 
 const props = defineProps({
   data: {
@@ -202,7 +206,6 @@ watch(
 
 onMounted(() => {
   const condition = props.data.conditions[0];
-
   if (condition && condition.conditions) return;
 
   const generateConditionItem = (type, data) => {