From e7ec2ad79a5d16a3387898dbd7c6ff1ac7b4e23b Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 19 Apr 2024 12:16:26 +0300
Subject: [PATCH] Fixed  #5616

---
 api-generator/components/knob.js |  4 ++--
 components/lib/knob/BaseKnob.vue |  2 +-
 components/lib/knob/Knob.d.ts    |  2 +-
 doc/knob/TemplateDoc.vue         | 10 +++-------
 4 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/api-generator/components/knob.js b/api-generator/components/knob.js
index 5d4a1895d..7c3302292 100644
--- a/api-generator/components/knob.js
+++ b/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',
diff --git a/components/lib/knob/BaseKnob.vue b/components/lib/knob/BaseKnob.vue
index a349b2f2e..ac9ed865d 100644
--- a/components/lib/knob/BaseKnob.vue
+++ b/components/lib/knob/BaseKnob.vue
@@ -56,7 +56,7 @@ export default {
         },
         valueTemplate: {
             type: [String, Function],
-            default: () => (val) => val
+            default: '{value}'
         },
         tabindex: {
             type: Number,
diff --git a/components/lib/knob/Knob.d.ts b/components/lib/knob/Knob.d.ts
index 7ed2c87f4..b69301d30 100644
--- a/components/lib/knob/Knob.d.ts
+++ b/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;
     /**
diff --git a/doc/knob/TemplateDoc.vue b/doc/knob/TemplateDoc.vue
index 27e628549..08cc2278c 100644
--- a/doc/knob/TemplateDoc.vue
+++ b/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>