diff --git a/apps/labs/doc/inputtext/FilledDoc.vue b/apps/labs/doc/inputtext/FilledDoc.vue new file mode 100644 index 000000000..d87e09429 --- /dev/null +++ b/apps/labs/doc/inputtext/FilledDoc.vue @@ -0,0 +1,31 @@ + + + Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style. + + + + + + + + diff --git a/apps/labs/pages/inputtext/index.vue b/apps/labs/pages/inputtext/index.vue index c2019f7c2..865f49824 100644 --- a/apps/labs/pages/inputtext/index.vue +++ b/apps/labs/pages/inputtext/index.vue @@ -6,6 +6,7 @@ import BasicDoc from '@/doc/inputtext/BasicDoc.vue'; import DisabledDoc from '@/doc/inputtext/DisabledDoc.vue'; /*import HelpTextDoc from '@/doc/inputtext/HelpTextDoc.vue';*/ +import FilledDoc from '@/doc/inputtext/FilledDoc.vue'; import ImportDoc from '@/doc/inputtext/ImportDoc.vue'; import InvalidDoc from '@/doc/inputtext/InvalidDoc.vue'; import SizesDoc from '@/doc/inputtext/SizesDoc.vue'; @@ -22,11 +23,16 @@ const docs = ref([ label: 'Basic', component: BasicDoc }, + { + id: 'filled', + label: 'Filled', + component: FilledDoc + }, { id: 'sizes', label: 'Sizes', component: SizesDoc - }/*, + } /*, { id: 'helptext', label: 'Help Text', diff --git a/apps/labs/plex/inputtext/index.vue b/apps/labs/plex/inputtext/index.vue index 3e3fd4968..b6d7181ca 100644 --- a/apps/labs/plex/inputtext/index.vue +++ b/apps/labs/plex/inputtext/index.vue @@ -9,6 +9,7 @@ import { ref } from 'vue'; const theme = ref({ root: `appearance-none rounded-md outline-none bg-surface-0 dark:bg-surface-950 + p-filled:bg-surface-50 dark:p-filled:bg-surface-800 text-surface-700 dark:text-surface-0 placeholder:text-surface-500 dark:placeholder:text-surface-400 border border-surface-300 dark:border-surface-700 diff --git a/apps/labs/tailwind.config.js b/apps/labs/tailwind.config.js index 89ffa81fb..8197f1998 100644 --- a/apps/labs/tailwind.config.js +++ b/apps/labs/tailwind.config.js @@ -11,6 +11,7 @@ export default { addVariant('p-small', '&[data-p~="small"]') addVariant('p-large', '&[data-p~="large"]') addVariant('p-fluid', '&[data-p~="fluid"]') + addVariant('p-filled', '&[data-p~="filled"]') }) ], theme: { diff --git a/packages/primevue/src/inputtext/InputText.vue b/packages/primevue/src/inputtext/InputText.vue index 8b9cc14f6..94947853f 100755 --- a/packages/primevue/src/inputtext/InputText.vue +++ b/packages/primevue/src/inputtext/InputText.vue @@ -30,13 +30,16 @@ export default { dataP() { const p = []; if (this.$invalid) { - p.push('invalid') + p.push('invalid'); } if (this.size) { - p.push(this.size) + p.push(this.size); } if (this.$fluid) { - p.push('fluid') + p.push('fluid'); + } + if (this.$variant === 'filled') { + p.push('filled'); } return p.join(' ');
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.