feat(editor): add delay block

src/components/block/BlockDelay.vue

@@ -0,0 +1,58 @@
+<template>
+  <div :id="componentId" class="p-4">
+    <div class="flex items-center mb-4">
+      <div
+        :class="block.category.color"
+        class="inline-block text-sm mr-4 p-2 rounded-lg"
+      >
+        <v-remixicon
+          :path="icons.riTimerLine"
+          size="20"
+          class="inline-block mr-1"
+        />
+        <span>Delay</span>
+      </div>
+      <div class="flex-grow"></div>
+      <v-remixicon
+        :path="icons.riDeleteBin7Line"
+        class="cursor-pointer"
+        @click="editor.removeNodeId(`node-${block.id}`)"
+      />
+    </div>
+    <input
+      :value="block.data.time"
+      min="0"
+      class="px-4 py-2 rounded-lg w-36 bg-input"
+      placeholder="(millisecond)"
+      type="number"
+      required
+      @input="handleInput"
+    />
+  </div>
+</template>
+<script setup>
+import { VRemixIcon as VRemixicon } from 'v-remixicon';
+import { icons } from '@/lib/v-remixicon';
+import { useComponentId } from '@/composable/componentId';
+import { useEditorBlock } from '@/composable/editorBlock';
+
+const props = defineProps({
+  editor: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const componentId = useComponentId('block-delay');
+const block = useEditorBlock(`#${componentId}`, props.editor);
+
+function handleInput({ target }) {
+  target.reportValidity();
+
+  const time = +target.value || 0;
+
+  if (time < 0) return;
+
+  props.editor.updateNodeDataFromId(block.id, { time });
+}
+</script>

src/utils/shared.js

@@ -33,7 +33,7 @@ export const tasks = {
   delay: {
     name: 'Delay',
     icon: 'riTimerLine',
-    component: 'BlockBase',
+    component: 'BlockDelay',
     editComponent: 'EditTrigger',
     category: 'general',
     inputs: 1,
@@ -41,7 +41,6 @@ export const tasks = {
     allowedInputs: [],
     maxConnection: 1,
     data: {
-      description: '',
       time: 500,
     },
   },