Migrated Knob

components/lib/theme/aura/index.js

@@ -22,6 +22,7 @@ import image from 'primevue/theme/aura/image';
 import inlinemessage from 'primevue/theme/aura/inlinemessage';
 import inplace from 'primevue/theme/aura/inplace';
 import inputswitch from 'primevue/theme/aura/inputswitch';
+import knob from 'primevue/theme/aura/knob';
 import megamenu from 'primevue/theme/aura/megamenu';
 import menu from 'primevue/theme/aura/menu';
 import menubar from 'primevue/theme/aura/menubar';
@@ -194,6 +195,7 @@ export default {
         dock,
         fieldset,
         galleria,
+        knob,
         megamenu,
         menu,
         menubar,

components/lib/theme/aura/inputswitch/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/theme/aura/knob/index.js

@@ -0,0 +1,41 @@
+export default {
+    variables: {
+        colorScheme: {
+            light: {},
+            dark: {}
+        }
+    },
+    css: `
+.p-knob-range {
+    fill: none;
+    transition: stroke 0.1s ease-in;
+}
+
+.p-knob-value {
+    animation-name: p-knob-dash-frame;
+    animation-fill-mode: forwards;
+    fill: none;
+}
+
+.p-knob-text {
+    font-size: 1.3rem;
+    text-align: center;
+}
+
+.p-knob svg {
+    border-radius: var(--p-rounded-base);
+    outline-color: transparent;
+    transition: outline-color var(--p-transition-duration);
+}
+.p-knob svg:focus-visible {
+    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
+    outline-offset: var(--p-focus-ring-offset);
+}
+
+@keyframes p-knob-dash-frame {
+    100% {
+        stroke-dashoffset: 0;
+    }
+}
+`
+};

components/lib/theme/aura/knob/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

nuxt-vite.config.js

@@ -200,6 +200,7 @@ const THEME_ALIAS = {
     'primevue/theme/aura/inputnumber': path.resolve(__dirname, './components/lib/theme/aura/inputnumber/index.js'),
     'primevue/theme/aura/inputswitch': path.resolve(__dirname, './components/lib/theme/aura/inputswitch/index.js'),
     'primevue/theme/aura/inputtext': path.resolve(__dirname, './components/lib/theme/aura/inputtext/index.js'),
+    'primevue/theme/aura/knob': path.resolve(__dirname, './components/lib/theme/aura/knob/index.js'),
     'primevue/theme/aura/listbox': path.resolve(__dirname, './components/lib/theme/aura/listbox/index.js'),
     'primevue/theme/aura/megamenu': path.resolve(__dirname, './components/lib/theme/aura/megamenu/index.js'),
     'primevue/theme/aura/menu': path.resolve(__dirname, './components/lib/theme/aura/menu/index.js'),