Refactor on input filled and global usage
parent
5ace2298f2
commit
021f7f23d5
|
@ -178,7 +178,7 @@ export default {
|
||||||
},
|
},
|
||||||
variant: {
|
variant: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'outlined'
|
default: null
|
||||||
},
|
},
|
||||||
invalid: {
|
invalid: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -17,7 +17,7 @@ export default {
|
||||||
},
|
},
|
||||||
variant: {
|
variant: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'outlined'
|
default: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
style: InputTextStyle,
|
style: InputTextStyle,
|
||||||
|
|
|
@ -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'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue