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

Refactor #5176

pull/5206/head
tugcekucukoglu 2024-02-02 14:46:26 +03:00
parent 3141f09df0
commit 45a23e9211
30 changed files with 110 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/autocomplete/BaseAutoComplete.vue
View File

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

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

@ -111,7 +111,6 @@ const classes = {
{
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant === 'filled',
'p-focus': instance.focused,
'p-autocomplete-dd': props.dropdown,
'p-autocomplete-multiple': props.multiple,
@ -120,8 +119,19 @@ const classes = {
'p-overlay-open': instance.overlayVisible
}
],
input: ({ props }) => ['p-autocomplete-input p-inputtext p-component', { 'p-autocomplete-dd-input': props.dropdown }],
container: 'p-autocomplete-multiple-container p-component p-inputtext',
input: ({ props, instance }) => [
'p-autocomplete-input p-inputtext p-component',
{
'p-autocomplete-dd-input': props.dropdown,
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
}
],
container: ({ props, instance }) => [
'p-autocomplete-multiple-container p-component p-inputtext',
{
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
}
],
token: ({ instance, i }) => ['p-autocomplete-token', { 'p-focus': instance.focusedMultipleOptionIndex === i }],
tokenLabel: 'p-autocomplete-token-label',
removeTokenIcon: 'p-autocomplete-token-icon',
@ -131,7 +141,6 @@ const classes = {
panel: ({ props, instance }) => [
'p-autocomplete-panel p-component',
{
'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],

7
components/lib/calendar/style/CalendarStyle.js
View File

@ -172,7 +172,12 @@ const classes = {
'p-focus': state.focused || state.overlayVisible
}
],
input: ({ props, instance }) => ['p-inputtext p-component', { 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' }],
input: ({ props, instance }) => [
'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 }) => [

2
components/lib/cascadeselect/BaseCascadeSelect.vue
View File

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

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

@ -104,7 +104,7 @@ const classes = {
{
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant === 'filled',
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled',
'p-focus': instance.focused,
'p-inputwrapper-filled': props.modelValue,
'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
@ -124,7 +124,6 @@ const classes = {
panel: ({ props, instance }) => [
'p-cascadeselect-panel p-component',
{
'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],

2
components/lib/checkbox/BaseCheckbox.vue
View File

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

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

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

2
components/lib/chips/BaseChips.vue
View File

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

8
components/lib/chips/style/ChipsStyle.js
View File

@ -56,13 +56,17 @@ const classes = {
{
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant === 'filled',
'p-focus': instance.focused,
'p-inputwrapper-filled': (props.modelValue && props.modelValue.length) || (instance.inputValue && instance.inputValue.length),
'p-inputwrapper-focus': instance.focused
}
],
container: 'p-inputtext p-chips-multiple-container',
container: ({ props, instance }) => [
'p-inputtext p-chips-multiple-container',
{
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
}
],
token: ({ state, index }) => ['p-chips-token', { 'p-focus': state.focusedIndex === index }],
label: 'p-chips-token-label',
removeTokenIcon: 'p-chips-token-icon',

2
components/lib/dropdown/BaseDropdown.vue
View File

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

10
components/lib/dropdown/style/DropdownStyle.js
View File

@ -105,7 +105,7 @@ const classes = {
{
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant === 'filled',
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled',
'p-dropdown-clearable': props.showClear,
'p-focus': state.focused,
'p-inputwrapper-filled': instance.hasSelectedOption,
@ -127,13 +127,17 @@ const classes = {
panel: ({ props, instance }) => [
'p-dropdown-panel p-component',
{
'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
header: 'p-dropdown-header',
filterContainer: 'p-dropdown-filter-container',
filterInput: 'p-dropdown-filter p-inputtext p-component',
filterInput: ({ props, instance }) => [
'p-dropdown-filter p-inputtext p-component',
{
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
}
],
filterIcon: 'p-dropdown-filter-icon',
wrapper: 'p-dropdown-items-wrapper',
list: 'p-dropdown-items',

80
components/lib/floatlabel/style/FloatLabelStyle.js
View File

@ -1,50 +1,52 @@
import BaseStyle from 'primevue/base/style';
const css = `
.p-float-label {
display: block;
position: relative;
}
@layer primevue {
.p-float-label {
display: block;
position: relative;
}
.p-float-label label {
position: absolute;
pointer-events: none;
top: 50%;
margin-top: -.5rem;
transition-property: all;
transition-timing-function: ease;
line-height: 1;
}
.p-float-label label {
position: absolute;
pointer-events: none;
top: 50%;
margin-top: -.5rem;
transition-property: all;
transition-timing-function: ease;
line-height: 1;
}
.p-float-label:has(textarea) label {
top: 1rem;
}
.p-float-label:has(textarea) label {
top: 1rem;
}
.p-float-label:has(input:focus) label,
.p-float-label:has(input.p-filled) label,
.p-float-label:has(input:-webkit-autofill) label,
.p-float-label:has(textarea:focus) label,
.p-float-label:has(textarea.p-filled) label,
.p-float-label:has(.p-inputwrapper-focus) label,
.p-float-label:has(.p-inputwrapper-filled) label {
top: -.75rem;
font-size: 12px;
}
.p-float-label:has(input:focus) label,
.p-float-label:has(input.p-filled) label,
.p-float-label:has(input:-webkit-autofill) label,
.p-float-label:has(textarea:focus) label,
.p-float-label:has(textarea.p-filled) label,
.p-float-label:has(.p-inputwrapper-focus) label,
.p-float-label:has(.p-inputwrapper-filled) label {
top: -.75rem;
font-size: 12px;
}
.p-float-label .p-placeholder,
.p-float-label input::placeholder,
.p-float-label .p-inputtext::placeholder {
opacity: 0;
transition-property: all;
transition-timing-function: ease;
}
.p-float-label .p-placeholder,
.p-float-label input::placeholder,
.p-float-label .p-inputtext::placeholder {
opacity: 0;
transition-property: all;
transition-timing-function: ease;
}
.p-float-label .p-focus .p-placeholder,
.p-float-label input:focus::placeholder,
.p-float-label .p-inputtext:focus::placeholder {
opacity: 1;
transition-property: all;
transition-timing-function: ease;
.p-float-label .p-focus .p-placeholder,
.p-float-label input:focus::placeholder,
.p-float-label .p-inputtext:focus::placeholder {
opacity: 1;
transition-property: all;
transition-timing-function: ease;
}
}
`;

2
components/lib/inputmask/BaseInputMask.vue
View File

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

2
components/lib/inputmask/style/InputMaskStyle.js
View File

@ -6,7 +6,7 @@ const classes = {
{
'p-filled': instance.filled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant === 'filled'
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
}
]
};

2
components/lib/inputnumber/BaseInputNumber.vue
View File

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

10
components/lib/inputnumber/style/InputNumberStyle.js
View File

@ -114,11 +114,15 @@ const classes = {
'p-inputnumber-buttons-stacked': props.showButtons && props.buttonLayout === 'stacked',
'p-inputnumber-buttons-horizontal': props.showButtons && props.buttonLayout === 'horizontal',
'p-inputnumber-buttons-vertical': props.showButtons && props.buttonLayout === 'vertical',
'p-invalid': props.invalid,
'p-variant-filled': props.variant === 'filled'
'p-invalid': props.invalid
}
],
input: ({ props, instance }) => [
'p-inputnumber-input',
{
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
}
],
input: 'p-inputnumber-input',
buttonGroup: 'p-inputnumber-button-group',
incrementButton: ({ instance, props }) => [
'p-inputnumber-button p-inputnumber-button-up',

2
components/lib/multiselect/BaseMultiSelect.vue
View File

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

3
components/lib/multiselect/MultiSelect.vue
View File

@ -73,6 +73,7 @@
:modelValue="allSelected"
:binary="true"
:disabled="disabled"
:variant="variant"
:aria-label="toggleAllAriaLabel"
@change="onToggleAll"
:unstyled="unstyled"
@ -140,7 +141,7 @@
:data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)"
>
<Checkbox :modelValue="isSelected(option)" :binary="true" :tabindex="-1" :unstyled="unstyled" :pt="getCheckboxPTOptions(option, getItemOptions, i, 'itemCheckbox')">
<Checkbox :modelValue="isSelected(option)" :binary="true" :tabindex="-1" :variant="variant" :unstyled="unstyled" :pt="getCheckboxPTOptions(option, getItemOptions, i, 'itemCheckbox')">
<template #icon="slotProps">
<component v-if="$slots.itemcheckboxicon" :is="$slots.itemcheckboxicon" :checked="slotProps.checked" :class="slotProps.class" />
<component

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

@ -121,7 +121,7 @@ const classes = {
'p-multiselect-chip': props.display === 'chip',
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant === 'filled',
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled',
'p-focus': instance.focused,
'p-inputwrapper-filled': props.modelValue && props.modelValue.length,
'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
@ -145,13 +145,17 @@ const classes = {
panel: ({ props, instance }) => [
'p-multiselect-panel p-component',
{
'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
header: 'p-multiselect-header',
filterContainer: 'p-multiselect-filter-container',
filterInput: 'p-multiselect-filter p-inputtext p-component',
filterInput: ({ props, instance }) => [
'p-multiselect-filter p-inputtext p-component',
{
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
}
],
filterIcon: 'p-multiselect-filter-icon',
closeButton: 'p-multiselect-close p-link',
closeIcon: 'p-multiselect-close-icon',

2
components/lib/password/BasePassword.vue
View File

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

2
components/lib/password/Password.vue
View File

@ -15,6 +15,8 @@
:placeholder="placeholder"
:required="required"
:disabled="disabled"
:variant="variant"
:invalid="invalid"
@input="onInput"
@focus="onFocus"
@blur="onBlur"

5
components/lib/password/style/PasswordStyle.js
View File

@ -41,9 +41,7 @@ const classes = {
{
'p-inputwrapper-filled': instance.filled,
'p-inputwrapper-focus': instance.focused,
'p-input-icon-right': props.toggleMask,
'p-invalid': props.invalid,
'p-variant-filled': props.variant === 'filled'
'p-input-icon-right': props.toggleMask
}
],
input: ({ props }) => [
@ -55,7 +53,6 @@ const classes = {
panel: ({ props, instance }) => [
'p-password-panel p-component',
{
'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],

2
components/lib/radiobutton/BaseRadioButton.vue
View File

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

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

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

2
components/lib/textarea/BaseTextarea.vue
View File

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

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

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

4
components/lib/treeselect/BaseTreeSelect.vue
View File

@ -16,10 +16,6 @@ export default {
type: String,
default: null
},
variant: {
type: String,
default: 'outlined'
},
invalid: {
type: Boolean,
default: false

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

@ -66,7 +66,6 @@ const classes = {
'p-treeselect-chip': props.display === 'chip',
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant === 'filled',
'p-focus': instance.focused,
'p-inputwrapper-filled': !instance.emptyValue,
'p-inputwrapper-focus': instance.focused || instance.overlayVisible

2
components/lib/tristatecheckbox/BaseTriStateCheckbox.vue
View File

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

2
components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js
View File

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