From 962e789e1d2378d4ddd5d777366b08d2122f5f21 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sat, 22 Apr 2023 23:13:26 -0500
Subject: [PATCH] Added way to customize board action confirmation label

---
 src/features/boards/BoardNode.vue       | 15 ++++++++++++---
 src/features/boards/BoardNodeAction.vue |  1 -
 src/features/boards/board.ts            |  6 ++++++
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/features/boards/BoardNode.vue b/src/features/boards/BoardNode.vue
index df5c135..e29b4eb 100644
--- a/src/features/boards/BoardNode.vue
+++ b/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
diff --git a/src/features/boards/BoardNodeAction.vue b/src/features/boards/BoardNodeAction.vue
index 95adeee..c65727a 100644
--- a/src/features/boards/BoardNodeAction.vue
+++ b/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"
diff --git a/src/features/boards/board.ts b/src/features/boards/board.ts
index c5f21b4..a972f9f 100644
--- a/src/features/boards/board.ts
+++ b/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");
                 }
             }