vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #5786 - Deprecate inputStyle and add inputVariant

pull/5806/head
tugcekucukoglu 2024-05-27 13:28:07 +03:00
parent e14ce7fdf9
commit be72908415
15 changed files with 32 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/autocomplete/style/AutoCompleteStyle.js
View File

@ -257,7 +257,7 @@ const classes = {
inputMultiple: ({ props, instance }) => [
'p-autocomplete-input-multiple',
{
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled'
}
],
chipItem: ({ instance, i }) => [

2
components/lib/cascadeselect/style/CascadeSelectStyle.js
View File

@ -196,7 +196,7 @@ const classes = {
{
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled',
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
'p-focus': instance.focused,
'p-inputwrapper-filled': props.modelValue,
'p-inputwrapper-focus': instance.focused || instance.overlayVisible,

2
components/lib/checkbox/style/CheckboxStyle.js
View File

@ -120,7 +120,7 @@ const classes = {
'p-checkbox-checked': instance.checked,
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled'
}
],
box: 'p-checkbox-box',

4
components/lib/config/PrimeVue.d.ts vendored
View File

@ -110,7 +110,11 @@ import { VirtualScrollerPassThroughOptions } from '../virtualscroller';
export interface PrimeVueConfiguration {
ripple?: boolean;
/**
* @deprecated since v4.0. Use 'inputVariant' instead.
*/
inputStyle?: 'filled' | 'outlined' | undefined;
inputVariant?: 'filled' | 'outlined' | undefined;
locale?: PrimeVueLocaleOptions;
filterMatchModeOptions?: any;
zIndex?: PrimeVueZIndexOptions;

1
components/lib/config/PrimeVue.js
View File

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

2
components/lib/inputchips/style/InputChipsStyle.js
View File

@ -118,7 +118,7 @@ const classes = {
input: ({ props, instance }) => [
'p-inputchips-input',
{
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled'
}
],
chipItem: ({ state, index }) => ['p-inputchips-chip-item', { 'p-focus': state.focusedIndex === index }],

2
components/lib/inputtext/style/InputTextStyle.js
View File

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

2
components/lib/multiselect/style/MultiSelectStyle.js
View File

@ -207,7 +207,7 @@ const classes = {
'p-multiselect-display-chip': props.display === 'chip',
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled',
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
'p-focus': instance.focused,
'p-inputwrapper-filled': props.modelValue && props.modelValue.length,
'p-inputwrapper-focus': instance.focused || instance.overlayVisible,

2
components/lib/radiobutton/style/RadioButtonStyle.js
View File

@ -125,7 +125,7 @@ const classes = {
'p-radiobutton-checked': instance.checked,
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled'
}
],
box: 'p-radiobutton-box',

2
components/lib/select/style/SelectStyle.js
View File

@ -203,7 +203,7 @@ const classes = {
{
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled',
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
'p-focus': state.focused,
'p-inputwrapper-filled': instance.hasSelectedOption,
'p-inputwrapper-focus': state.focused || state.overlayVisible,

2
components/lib/textarea/style/TextareaStyle.js
View File

@ -68,7 +68,7 @@ const classes = {
'p-filled': instance.filled,
'p-textarea-resizable ': props.autoResize,
'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled'
}
]
};

2
components/lib/treeselect/style/TreeSelectStyle.js
View File

@ -138,7 +138,7 @@ const classes = {
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-focus': instance.focused,
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled',
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
'p-inputwrapper-filled': !instance.emptyValue,
'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
'p-treeselect-open': instance.overlayVisible

9
doc/common/apidoc/index.json
View File

@ -18272,6 +18272,15 @@
"optional": true,
"readonly": false,
"type": "\"filled\" | \"outlined\"",
"default": "",
"description": "",
"deprecated": "since v4.0. Use 'inputVariant' instead."
},
{
"name": "inputVariant",
"optional": true,
"readonly": false,
"type": "\"filled\" | \"outlined\"",
"default": ""
},
{

10
doc/configuration/InputStyleDoc.vue
View File

@ -1,10 +1,10 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled
style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application element, components
that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set inputStyle to <i>filled</i> at
PrimeVue configuration as well.
Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. Applying <i>p-variant-filled</i> to an ancestor of an input enables the
filled style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application element,
components that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set inputVariant to
<i>filled</i> at PrimeVue configuration as well.
</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
@ -20,7 +20,7 @@ import {createApp} from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, { inputStyle: "filled" });
app.use(PrimeVue, { inputVariant: "filled" });
`
}
};

2
doc/nuxt/configuration/OptionsDoc.vue
View File

@ -15,7 +15,7 @@ primevue: {
options: {
unstyled: true,
ripple: true,
inputStyle: 'filled'
inputVariant: 'filled'
}
}
`