Refactor on input filled and global usage

pull/5206/head
Cagatay Civici 2024-02-01 16:11:24 +03:00
parent 5ace2298f2
commit 021f7f23d5
7 changed files with 6 additions and 9 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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