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

inputFilled added to global

pull/5206/head
tugcekucukoglu 2024-02-02 09:31:43 +03:00
parent dfdc86d1d6
commit 695ff05f8b
2 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
layouts/AppConfigurator.vue
View File

@ -11,14 +11,19 @@
</div> </div>
</section> </section>
<section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
<span :class="['text-xl font-semibold']">Dark Mode</span>
<InputSwitch :modelValue="darkMode" @update:modelValue="onDarkModeChange" />
</section>
<section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border"> <section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
<span class="text-xl font-semibold">Ripple Effect</span> <span class="text-xl font-semibold">Ripple Effect</span>
<InputSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" /> <InputSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
</section> </section>
<section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border"> <section class="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
<span :class="['text-xl font-semibold']">Dark Mode</span> <span class="text-xl font-semibold">Input Style</span>
<InputSwitch :modelValue="darkMode" @update:modelValue="onDarkModeChange" /> <SelectButton :modelValue="inputStyle" @update:modelValue="onInputStyleChange" :options="inputStyles" optionLabel="label" optionValue="value" :allowEmpty="false" />
</section> </section>
<section class="py-4 border-bottom-1 surface-border"> <section class="py-4 border-bottom-1 surface-border">
@ -354,6 +359,10 @@ export default {
visible: false, visible: false,
scale: 14, scale: 14,
scales: [12, 13, 14, 15, 16], scales: [12, 13, 14, 15, 16],
inputStyles: [
{ label: 'Outlined', value: 'outlined' },
{ label: 'Filled', value: 'filled' }
],
primaryFocusRing: true, primaryFocusRing: true,
compactMaterial: false compactMaterial: false
}; };
@ -414,6 +423,9 @@ export default {
onRippleChange(value) { onRippleChange(value) {
this.$appState.ripple = value; this.$appState.ripple = value;
}, },
onInputStyleChange(value) {
this.$primevue.config.inputStyle = value;
},
onDarkModeChange() { onDarkModeChange() {
this.$emit('darkswitch-click'); this.$emit('darkswitch-click');
}, },
@ -458,6 +470,9 @@ export default {
rippleActive() { rippleActive() {
return this.$appState.ripple; return this.$appState.ripple;
}, },
inputStyle() {
return this.$primevue.config.inputStyle;
},
containerClass() { containerClass() {
return [ return [
'layout-config w-full sm:w-26rem', 'layout-config w-full sm:w-26rem',

1
layouts/default.vue
View File

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