From 2bde6fc16518f6f753549738347ca6530283e12b Mon Sep 17 00:00:00 2001
From: Eli Morris-Heft <eli.morris.heft@gmail.com>
Date: Thu, 11 Apr 2024 17:52:30 -0400
Subject: [PATCH] Fixed #1027 - Knob: Allow a label function for greater
 flexibility

---
 api-generator/components/knob.js |  6 +++---
 components/lib/knob/BaseKnob.vue |  4 ++--
 components/lib/knob/Knob.d.ts    |  4 ++--
 components/lib/knob/Knob.spec.js | 12 ++++++++++++
 components/lib/knob/Knob.vue     |  6 +++++-
 doc/common/apidoc/index.json     |  5 ++---
 doc/knob/TemplateDoc.vue         | 12 ++++++++----
 7 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/api-generator/components/knob.js b/api-generator/components/knob.js
index fdc6a90f6..5d4a1895d 100644
--- a/api-generator/components/knob.js
+++ b/api-generator/components/knob.js
@@ -73,9 +73,9 @@ const KnobProps = [
     },
     {
         name: 'valueTemplate',
-        type: 'string',
-        default: '{value}',
-        description: 'Template string of the value.'
+        type: 'function | string',
+        default: 'val => val',
+        description: 'Controls how the knob is labeled.'
     },
     {
         name: 'tabindex',
diff --git a/components/lib/knob/BaseKnob.vue b/components/lib/knob/BaseKnob.vue
index 8abe5490f..a349b2f2e 100644
--- a/components/lib/knob/BaseKnob.vue
+++ b/components/lib/knob/BaseKnob.vue
@@ -55,8 +55,8 @@ export default {
             default: true
         },
         valueTemplate: {
-            type: String,
-            default: '{value}'
+            type: [String, Function],
+            default: () => (val) => val
         },
         tabindex: {
             type: Number,
diff --git a/components/lib/knob/Knob.d.ts b/components/lib/knob/Knob.d.ts
index e99f5b6f0..7ed2c87f4 100644
--- a/components/lib/knob/Knob.d.ts
+++ b/components/lib/knob/Knob.d.ts
@@ -176,9 +176,9 @@ export interface KnobProps {
     showValue?: boolean | undefined;
     /**
      * Template string of the value.
-     * @defaultValue '{value}'
+     * @defaultValue 'val => val'
      */
-    valueTemplate?: string | undefined;
+    valueTemplate?: (val: number) => string | string | undefined;
     /**
      * Index of the element in tabbing order.
      * @defaultValue 0
diff --git a/components/lib/knob/Knob.spec.js b/components/lib/knob/Knob.spec.js
index 2fabc2e31..20ae2e992 100644
--- a/components/lib/knob/Knob.spec.js
+++ b/components/lib/knob/Knob.spec.js
@@ -44,4 +44,16 @@ describe('Knob.vue', () => {
 
         expect(wrapper.emitted()['update:modelValue'][0]).toEqual([30]);
     });
+
+    it('should work with string valueTemplate', async () => {
+        await wrapper.setProps({ valueTemplate: '{value}%' });
+
+        expect(wrapper.find('.p-knob-text').text()).toBe('20%');
+    });
+
+    it('should work with function valueTemplate', async () => {
+        await wrapper.setProps({ valueTemplate: (val) => val * 10 });
+
+        expect(wrapper.find('.p-knob-text').text()).toBe('200');
+    });
 });
diff --git a/components/lib/knob/Knob.vue b/components/lib/knob/Knob.vue
index b0cfe0430..21cbdea99 100644
--- a/components/lib/knob/Knob.vue
+++ b/components/lib/knob/Knob.vue
@@ -215,7 +215,11 @@ export default {
             return this.valueRadians > this.zeroRadians ? 0 : 1;
         },
         valueToDisplay() {
-            return this.valueTemplate.replace(/{value}/g, this.modelValue);
+            if (typeof this.valueTemplate === 'string') {
+                return this.valueTemplate.replace(/{value}/g, this.modelValue);
+            } else {
+                return this.valueTemplate(this.modelValue);
+            }
         }
     }
 };
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 555bf8fe8..70cfec2fb 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -33423,9 +33423,8 @@
                             "name": "valueTemplate",
                             "optional": true,
                             "readonly": false,
-                            "type": "string",
-                            "default": "'{value}'",
-                            "description": "Template string of the value."
+                            "type": "Function",
+                            "default": ""
                         },
                         {
                             "name": "tabindex",
diff --git a/doc/knob/TemplateDoc.vue b/doc/knob/TemplateDoc.vue
index 2feb4e258..27e628549 100644
--- a/doc/knob/TemplateDoc.vue
+++ b/doc/knob/TemplateDoc.vue
@@ -1,9 +1,10 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Label is a string template that can be customized with the <i>valueTemplate</i> property having <i>60</i> as the placeholder .</p>
+        <p>The label can be customized with the <i>valueTemplate</i> property using either a template string or a function.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-content-center gap-4">
         <Knob v-model="value" valueTemplate="{value}%" />
+        <Knob v-model="value" :valueTemplate="(val) => val / 100" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,11 +17,13 @@ export default {
             code: {
                 basic: `
 <Knob v-model="value" valueTemplate="{value}%" />
+<Knob v-model="value" :valueTemplate="val => val / 100" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-content-center gap-4">
         <Knob v-model="value" valueTemplate="{value}%" />
+        <Knob v-model="value" :valueTemplate="val => val / 100" />
     </div>
 </template>
 
@@ -36,8 +39,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card flex justify-content-center gap-4">
         <Knob v-model="value" valueTemplate="{value}%" />
+        <Knob v-model="value" :valueTemplate="val => val / 100" />
     </div>
 </template>