Refactor on input filled and global usage

components/lib/calendar/BaseCalendar.vue

@@ -178,7 +178,7 @@ export default {
         },
         variant: {
             type: String,
-            default: 'outlined'
+            default: null
         },
         invalid: {
             type: Boolean,

components/lib/calendar/style/CalendarStyle.js

@@ -167,13 +167,12 @@ const classes = {
             'p-calendar-timeonly': props.timeOnly,
             'p-calendar-disabled': props.disabled,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant === 'filled',
             'p-inputwrapper-filled': props.modelValue,
             'p-inputwrapper-focus': state.focused,
             'p-focus': state.focused || state.overlayVisible
         }
     ],
-    input: 'p-inputtext p-component',
+    input: ({ props }) => ['p-inputtext p-component', { 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' }],
     dropdownButton: 'p-datepicker-trigger',
     inputIcon: 'p-datepicker-trigger-icon',
     panel: ({ instance, props, state }) => [
@@ -187,7 +186,6 @@ const classes = {
             'p-datepicker-monthpicker': state.currentView === 'month',
             'p-datepicker-yearpicker': state.currentView === 'year',
             'p-datepicker-touch-ui': props.touchUI,
-            'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled',
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],

components/lib/config/PrimeVue.d.ts

@@ -99,7 +99,7 @@ import { VirtualScrollerPassThroughOptions } from '../virtualscroller';
 
 export interface PrimeVueConfiguration {
     ripple?: boolean;
-    inputStyle?: string;
+    inputStyle?: 'filled' | 'outlined' | undefined;
     locale?: PrimeVueLocaleOptions;
     filterMatchModeOptions?: any;
     zIndex?: PrimeVueZIndexOptions;

components/lib/config/PrimeVue.js

@@ -3,7 +3,7 @@ import { inject, reactive } from 'vue';
 
 export const defaultOptions = {
     ripple: false,
-    inputStyle: 'outlined',
+    inputStyle: null,
     locale: {
         startsWith: 'Starts with',
         contains: 'Contains',

components/lib/inputtext/BaseInputText.vue

@@ -17,7 +17,7 @@ export default {
         },
         variant: {
             type: String,
-            default: 'outlined'
+            default: null
         }
     },
     style: InputTextStyle,

components/lib/inputtext/style/InputTextStyle.js

@@ -8,7 +8,7 @@ const classes = {
             'p-inputtext-sm': props.size === 'small',
             'p-inputtext-lg': props.size === 'large',
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant === 'filled'
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
         }
     ]
 };

layouts/default.vue

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