Refactor #3922 - For Knob

api-generator/components/knob.js

@@ -94,6 +94,12 @@ const KnobProps = [
         type: 'string',
         default: 'null',
         description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/config/PrimeVue.d.ts

@@ -34,6 +34,7 @@ import { InputMaskPassThroughOptions } from '../inputmask';
 import { InputNumberPassThroughOptions } from '../inputnumber';
 import { InputSwitchPassThroughOptions } from '../inputswitch';
 import { InputTextPassThroughOptions } from '../inputtext';
+import { KnobPassThroughOptions } from '../knob';
 import { MegaMenuPassThroughOptions } from '../megamenu';
 import { MenuPassThroughOptions } from '../menu';
 import { MenubarPassThroughOptions } from '../menubar';
@@ -113,6 +114,7 @@ interface PrimeVuePTOptions {
     inputnumber?: InputNumberPassThroughOptions;
     inputswitch?: InputSwitchPassThroughOptions;
     inputtext?: InputTextPassThroughOptions;
+    knob?: KnobPassThroughOptions;
     megamenu?: MegaMenuPassThroughOptions;
     menu?: MenuPassThroughOptions;
     menubar?: MenubarPassThroughOptions;

components/lib/knob/Knob.d.ts

@@ -9,6 +9,79 @@
  */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type KnobPassThroughOptionType = KnobPassThroughAttributes | ((options: KnobPassThroughMethodOptions) => KnobPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface KnobPassThroughMethodOptions {
+    props: KnobProps;
+    state: KnobState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link KnobProps.pt}
+ */
+export interface KnobPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: KnobPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the svg's DOM element.
+     */
+    svg?: KnobPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the range's DOM element.
+     */
+    range?: KnobPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the value' DOM element.
+     */
+    value?: KnobPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: KnobPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface KnobPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Knob component.
+ */
+export interface KnobState {
+    /**
+     * Current radius state as a number.
+     * @defaultValue 40
+     */
+    radius: number;
+    /**
+     * Current middle x axis state as a number.
+     * @defaultValue 50
+     */
+    midX: number;
+    /**
+     * Current middle y axis state as a number.
+     * @defaultValue 50
+     */
+    midY: number;
+    /**
+     * Current minimum radian state as a number.
+     */
+    minRadians: number;
+    /**
+     * Current maximum radian state as a number.
+     */
+    maxRadians: number;
+}
+
 /**
  * Defines valid properties in Knob component.
  */
@@ -90,6 +163,11 @@ export interface KnobProps {
      * Used to define a string that labels the element.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {KnobPassThroughOptions}
+     */
+    pt?: KnobPassThroughOptions;
 }
 
 /**

components/lib/knob/Knob.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="containerClass">
+    <div :class="containerClass" v-bind="ptm('root')">
         <svg
             viewBox="0 0 100 100"
             role="slider"
@@ -17,17 +17,21 @@
             @mouseup="onMouseUp"
             @touchstart="onTouchStart"
             @touchend="onTouchEnd"
+            v-bind="ptm('svg')"
         >
-            <path :d="rangePath" :stroke-width="strokeWidth" :stroke="rangeColor" class="p-knob-range"></path>
+            <path :d="rangePath" :stroke-width="strokeWidth" :stroke="rangeColor" class="p-knob-range" v-bind="ptm('range')"></path>
-            <path :d="valuePath" :stroke-width="strokeWidth" :stroke="valueColor" class="p-knob-value"></path>
+            <path :d="valuePath" :stroke-width="strokeWidth" :stroke="valueColor" class="p-knob-value" v-bind="ptm('value')"></path>
-            <text v-if="showValue" :x="50" :y="57" text-anchor="middle" :fill="textColor" class="p-knob-text">{{ valueToDisplay }}</text>
+            <text v-if="showValue" :x="50" :y="57" text-anchor="middle" :fill="textColor" class="p-knob-text" v-bind="ptm('label')">{{ valueToDisplay }}</text>
         </svg>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'Knob',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'change'],
     props: {
         modelValue: {