Added way to customize board action confirmation label

src/features/boards/BoardNode.vue

@@ -117,7 +117,7 @@
         <transition name="fade" appear>
             <g v-if="label">
                 <text
-                    :fill="label.color || titleColor"
+                    :fill="label.color ?? titleColor"
                     class="node-title"
                     :class="{ pulsing: label.pulsing }"
                     :y="-size - 20"
@@ -129,10 +129,11 @@
         <transition name="fade" appear>
             <text
                 v-if="isSelected && selectedAction"
-                :fill="titleColor"
+                :fill="confirmationLabel.color ?? titleColor"
                 class="node-title"
+                :class="{ pulsing: confirmationLabel.pulsing }"
                 :y="size + 75"
-                >Tap again to confirm</text
+                >{{ confirmationLabel.text }}</text
             >
         </transition>
     </g>
@@ -216,6 +217,14 @@ const label = computed(
               getNodeProperty(unref(props.selectedAction)!.tooltip, unref(props.node))
             : null) ?? getNodeProperty(props.nodeType.value.label, unref(props.node))
 );
+const confirmationLabel = computed(() =>
+    getNodeProperty(
+        unref(props.selectedAction)?.confirmationLabel ?? {
+            text: "Tap again to confirm"
+        },
+        unref(props.node)
+    )
+);
 const size = computed(() => getNodeProperty(props.nodeType.value.size, unref(props.node)));
 const progress = computed(
     () => getNodeProperty(props.nodeType.value.progress, unref(props.node)) ?? 0

src/features/boards/BoardNodeAction.vue

@@ -1,7 +1,6 @@
 <template>
     <transition name="actions" appear>
         <g v-if="isSelected && actions">
-            <!-- TODO move to separate file -->
             <g
                 v-for="(action, index) in actions"
                 :key="action.id"

src/features/boards/board.ts

@@ -185,6 +185,8 @@ export interface BoardNodeActionOptions {
     fillColor?: NodeComputable<string>;
     /** The tooltip text to display for the action. */
     tooltip: NodeComputable<NodeLabel>;
+    /** The confirmation label that appears under the action. */
+    confirmationLabel?: NodeComputable<NodeLabel>;
     /** An array of board node links associated with the action. They appear when the action is focused. */
     links?: NodeComputable<BoardNodeLink[]>;
     /** A function that is called when the action is clicked. */
@@ -206,6 +208,7 @@ export type BoardNodeAction<T extends BoardNodeActionOptions> = Replace<
         icon: GetComputableType<T["icon"]>;
         fillColor: GetComputableType<T["fillColor"]>;
         tooltip: GetComputableType<T["tooltip"]>;
+        confirmationLabel: GetComputableTypeWithDefault<T["confirmationLabel"], NodeLabel>;
         links: GetComputableType<T["links"]>;
     }
 >;
@@ -215,6 +218,7 @@ export type GenericBoardNodeAction = Replace<
     BoardNodeAction<BoardNodeActionOptions>,
     {
         visibility: NodeComputable<Visibility | boolean>;
+        confirmationLabel: NodeComputable<NodeLabel>;
     }
 >;
 
@@ -416,6 +420,8 @@ export function createBoard<T extends BoardOptions>(
                     processComputable(action, "icon");
                     processComputable(action, "fillColor");
                     processComputable(action, "tooltip");
+                    processComputable(action, "confirmationLabel");
+                    setDefault(action, "confirmationLabel", { text: "Tap again to confirm" });
                     processComputable(action, "links");
                 }
             }