Merge pull request #5569 from dispatchrabbi/issue-1027

Fixed #1027 - Knob: Allow a label function for greater flexibility

api-generator/components/knob.js

@@ -73,9 +73,9 @@ const KnobProps = [
     },
     {
         name: 'valueTemplate',
-        type: 'string',
+        type: 'function | string',
-        default: '{value}',
+        default: 'val => val',
-        description: 'Template string of the value.'
+        description: 'Controls how the knob is labeled.'
     },
     {
         name: 'tabindex',

components/lib/knob/BaseKnob.vue

@@ -55,8 +55,8 @@ export default {
             default: true
         },
         valueTemplate: {
-            type: String,
+            type: [String, Function],
-            default: '{value}'
+            default: () => (val) => val
         },
         tabindex: {
             type: Number,

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

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');
+    });
 });

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);
+            }
         }
     }
 };

doc/common/apidoc/index.json

@@ -33423,9 +33423,8 @@
                             "name": "valueTemplate",
                             "optional": true,
                             "readonly": false,
-                            "type": "string",
+                            "type": "Function",
-                            "default": "'{value}'",
+                            "default": ""
-                            "description": "Template string of the value."
                         },
                         {
                             "name": "tabindex",

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>