From 34a7e622eb1ad44887e23569cee2a84ef55ec54e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 24 May 2023 15:19:17 +0300
Subject: [PATCH] Update #3965 - For Knob

---
 components/lib/knob/BaseKnob.vue | 116 +++++++++++++++++++++++++++++++
 components/lib/knob/Knob.d.ts    |   5 ++
 components/lib/knob/Knob.vue     | 107 ++--------------------------
 3 files changed, 127 insertions(+), 101 deletions(-)
 create mode 100644 components/lib/knob/BaseKnob.vue

diff --git a/components/lib/knob/BaseKnob.vue b/components/lib/knob/BaseKnob.vue
new file mode 100644
index 000000000..7c0ab9b33
--- /dev/null
+++ b/components/lib/knob/BaseKnob.vue
@@ -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>
diff --git a/components/lib/knob/Knob.d.ts b/components/lib/knob/Knob.d.ts
index b12751a51..72257fb2c 100644
--- a/components/lib/knob/Knob.d.ts
+++ b/components/lib/knob/Knob.d.ts
@@ -168,6 +168,11 @@ export interface KnobProps {
      * @type {KnobPassThroughOptions}
      */
     pt?: KnobPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**
diff --git a/components/lib/knob/Knob.vue b/components/lib/knob/Knob.vue
index 10c05f0c2..f4688a6ed 100644
--- a/components/lib/knob/Knob.vue
+++ b/components/lib/knob/Knob.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="containerClass" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <svg
             viewBox="0 0 100 100"
             role="slider"
@@ -19,86 +19,20 @@
             @touchend="onTouchEnd"
             v-bind="ptm('svg')"
         >
-            <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" 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>
+            <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="cx('value')" v-bind="ptm('value')"></path>
+            <text v-if="showValue" :x="50" :y="57" text-anchor="middle" :fill="textColor" :class="cx('label')" v-bind="ptm('label')">{{ valueToDisplay }}</text>
         </svg>
     </div>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseKnob from './BaseKnob.vue';
 
 export default {
     name: 'Knob',
-    extends: BaseComponent,
+    extends: BaseKnob,
     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() {
         return {
             radius: 40,
@@ -233,14 +167,6 @@ export default {
         }
     },
     computed: {
-        containerClass() {
-            return [
-                'p-knob p-component',
-                {
-                    'p-disabled': this.disabled
-                }
-            ];
-        },
         rangePath() {
             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
 </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>