Fixed #5616

api-generator/components/knob.js

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

components/lib/knob/BaseKnob.vue

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

components/lib/knob/Knob.d.ts

@@ -176,7 +176,7 @@ export interface KnobProps {
     showValue?: boolean | undefined;
     /**
      * Template string of the value.
-     * @defaultValue 'val => val'
+     * @defaultValue '{value}'
      */
     valueTemplate?: (val: number) => string | string | undefined;
     /**

doc/knob/TemplateDoc.vue

@@ -2,9 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <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 gap-4">
+    <div class="card flex justify-content-center">
         <Knob v-model="value" valueTemplate="{value}%" />
-        <Knob v-model="value" :valueTemplate="(val) => val / 100" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,13 +16,11 @@ 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 gap-4">
+    <div class="card flex justify-content-center">
         <Knob v-model="value" valueTemplate="{value}%" />
-        <Knob v-model="value" :valueTemplate="val => val / 100" />
     </div>
 </template>
 
@@ -39,9 +36,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center gap-4">
+    <div class="card flex justify-content-center">
         <Knob v-model="value" valueTemplate="{value}%" />
-        <Knob v-model="value" :valueTemplate="val => val / 100" />
     </div>
 </template>