Skip to content

Commit

Permalink
Merge pull request #5569 from dispatchrabbi/issue-1027
Browse files Browse the repository at this point in the history
Fixed #1027 - Knob: Allow a label function for greater flexibility
  • Loading branch information
tugcekucukoglu authored Apr 19, 2024
2 parents a41c874 + 2bde6fc commit e747e01
Show file tree
Hide file tree
Showing 7 changed files with 34 additions and 15 deletions.
6 changes: 3 additions & 3 deletions api-generator/components/knob.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions components/lib/knob/BaseKnob.vue
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ export default {
default: true
},
valueTemplate: {
type: String,
default: '{value}'
type: [String, Function],
default: () => (val) => val
},
tabindex: {
type: Number,
Expand Down
4 changes: 2 additions & 2 deletions components/lib/knob/Knob.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
12 changes: 12 additions & 0 deletions components/lib/knob/Knob.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
6 changes: 5 additions & 1 deletion components/lib/knob/Knob.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
};
Expand Down
5 changes: 2 additions & 3 deletions doc/common/apidoc/index.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
12 changes: 8 additions & 4 deletions doc/knob/TemplateDoc.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit e747e01

Please sign in to comment.