inputFilled added to global

layouts/AppConfigurator.vue

@@ -11,14 +11,19 @@
                 </div>
             </section>
 
+            <section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
+                <span :class="['text-xl font-semibold']">Dark Mode</span>
+                <InputSwitch :modelValue="darkMode" @update:modelValue="onDarkModeChange" />
+            </section>
+
             <section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
                 <span class="text-xl font-semibold">Ripple Effect</span>
                 <InputSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
             </section>
 
             <section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
-                <span :class="['text-xl font-semibold']">Dark Mode</span>
-                <InputSwitch :modelValue="darkMode" @update:modelValue="onDarkModeChange" />
+                <span class="text-xl font-semibold">Input Style</span>
+                <SelectButton :modelValue="inputStyle" @update:modelValue="onInputStyleChange" :options="inputStyles" optionLabel="label" optionValue="value" :allowEmpty="false" />
             </section>
 
             <section class="py-4 border-bottom-1 surface-border">
@@ -354,6 +359,10 @@ export default {
             visible: false,
             scale: 14,
             scales: [12, 13, 14, 15, 16],
+            inputStyles: [
+                { label: 'Outlined', value: 'outlined' },
+                { label: 'Filled', value: 'filled' }
+            ],
             primaryFocusRing: true,
             compactMaterial: false
         };
@@ -414,6 +423,9 @@ export default {
         onRippleChange(value) {
             this.$appState.ripple = value;
         },
+        onInputStyleChange(value) {
+            this.$primevue.config.inputStyle = value;
+        },
         onDarkModeChange() {
             this.$emit('darkswitch-click');
         },
@@ -458,6 +470,9 @@ export default {
         rippleActive() {
             return this.$appState.ripple;
         },
+        inputStyle() {
+            return this.$primevue.config.inputStyle;
+        },
         containerClass() {
             return [
                 'layout-config w-full sm:w-26rem',

layouts/default.vue

@@ -121,6 +121,7 @@ export default {
                 {
                     'layout-news-active': this.$appState.newsActive,
                     'p-ripple-disabled': this.$appState.ripple === false,
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
                     'layout-dark': this.$appState.darkTheme,
                     'layout-light': !this.$appState.darkTheme
                 }