vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update #3965 - For Knob

pull/3997/head
Tuğçe Küçükoğlu 2023-05-24 15:19:17 +03:00
parent dfeaf7fe7c
commit 34a7e622eb
3 changed files with 127 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
components/lib/knob/BaseKnob.vue Normal file
View File

@ -0,0 +1,116 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@keyframes dash-frame {
100% {
stroke-dashoffset: 0;
}
}
.p-knob-range {
fill: none;
transition: stroke 0.1s ease-in;
}
.p-knob-value {
animation-name: dash-frame;
animation-fill-mode: forwards;
fill: none;
}
.p-knob-text {
font-size: 1.3rem;
text-align: center;
}
`;
const classes = {
root: ({ props }) => ['p-knob p-component', { 'p-disabled': props.disabled }],
range: 'p-knob-range',
value: 'p-knob-value',
label: 'p-knob-text'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_knob_style', manual: true });
export default {
name: 'BaseKnob',
extends: BaseComponent,
props: {
modelValue: {
type: Number,
default: null
},
size: {
type: Number,
default: 100
},
disabled: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
},
step: {
type: Number,
default: 1
},
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
valueColor: {
type: String,
default: 'var(--primary-color, Black)'
},
rangeColor: {
type: String,
default: 'var(--surface-border, LightGray)'
},
textColor: {
type: String,
default: 'var(--text-color-secondary, Black)'
},
strokeWidth: {
type: Number,
default: 14
},
showValue: {
type: Boolean,
default: true
},
valueTemplate: {
type: String,
default: '{value}'
},
tabindex: {
type: Number,
default: 0
},
'aria-labelledby': {
type: String,
default: null
},
'aria-label': {
type: String,
default: null
}
},
css: {
classes
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
}
};
</script>

5
components/lib/knob/Knob.d.ts vendored
View File

@ -168,6 +168,11 @@ export interface KnobProps {
* @type {KnobPassThroughOptions} * @type {KnobPassThroughOptions}
*/ */
pt?: KnobPassThroughOptions; pt?: KnobPassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
} }
/** /**

107
components/lib/knob/Knob.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="containerClass" v-bind="ptm('root')"> <div :class="cx('root')" v-bind="ptm('root')">
<svg <svg
viewBox="0 0 100 100" viewBox="0 0 100 100"
role="slider" role="slider"
@ -19,86 +19,20 @@
@touchend="onTouchEnd" @touchend="onTouchEnd"
v-bind="ptm('svg')" v-bind="ptm('svg')"
> >
<path :d="rangePath" :stroke-width="strokeWidth" :stroke="rangeColor" class="p-knob-range" v-bind="ptm('range')"></path> <path :d="rangePath" :stroke-width="strokeWidth" :stroke="rangeColor" :class="cx('range')" v-bind="ptm('range')"></path>
<path :d="valuePath" :stroke-width="strokeWidth" :stroke="valueColor" class="p-knob-value" v-bind="ptm('value')"></path> <path :d="valuePath" :stroke-width="strokeWidth" :stroke="valueColor" :class="cx('value')" v-bind="ptm('value')"></path>
<text v-if="showValue" :x="50" :y="57" text-anchor="middle" :fill="textColor" class="p-knob-text" v-bind="ptm('label')">{{ valueToDisplay }}</text> <text v-if="showValue" :x="50" :y="57" text-anchor="middle" :fill="textColor" :class="cx('label')" v-bind="ptm('label')">{{ valueToDisplay }}</text>
</svg> </svg>
</div> </div>
</template> </template>
<script> <script>
import BaseComponent from 'primevue/basecomponent'; import BaseKnob from './BaseKnob.vue';
export default { export default {
name: 'Knob', name: 'Knob',
extends: BaseComponent, extends: BaseKnob,
emits: ['update:modelValue', 'change'], emits: ['update:modelValue', 'change'],
props: {
modelValue: {
type: Number,
default: null
},
size: {
type: Number,
default: 100
},
disabled: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
},
step: {
type: Number,
default: 1
},
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
valueColor: {
type: String,
default: 'var(--primary-color, Black)'
},
rangeColor: {
type: String,
default: 'var(--surface-border, LightGray)'
},
textColor: {
type: String,
default: 'var(--text-color-secondary, Black)'
},
strokeWidth: {
type: Number,
default: 14
},
showValue: {
type: Boolean,
default: true
},
valueTemplate: {
type: String,
default: '{value}'
},
tabindex: {
type: Number,
default: 0
},
'aria-labelledby': {
type: String,
default: null
},
'aria-label': {
type: String,
default: null
}
},
data() { data() {
return { return {
radius: 40, radius: 40,
@ -233,14 +167,6 @@ export default {
} }
}, },
computed: { computed: {
containerClass() {
return [
'p-knob p-component',
{
'p-disabled': this.disabled
}
];
},
rangePath() { rangePath() {
return `M ${this.minX} ${this.minY} A ${this.radius} ${this.radius} 0 1 1 ${this.maxX} ${this.maxY}`; return `M ${this.minX} ${this.minY} A ${this.radius} ${this.radius} 0 1 1 ${this.maxX} ${this.maxY}`;
}, },
@ -291,24 +217,3 @@ export default {
}; };
//Derived and forked from https://github.com/kramer99/vue-knob-control //Derived and forked from https://github.com/kramer99/vue-knob-control
</script> </script>
<style>
@keyframes dash-frame {
100% {
stroke-dashoffset: 0;
}
}
.p-knob-range {
fill: none;
transition: stroke 0.1s ease-in;
}
.p-knob-value {
animation-name: dash-frame;
animation-fill-mode: forwards;
fill: none;
}
.p-knob-text {
font-size: 1.3rem;
text-align: center;
}
</style>