Skip to content

Commit

Permalink
Variants for #6653
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed Oct 26, 2024
1 parent 9550763 commit 8563a32
Show file tree
Hide file tree
Showing 10 changed files with 554 additions and 86 deletions.
56 changes: 31 additions & 25 deletions apps/showcase/doc/message/FormsDoc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,16 @@
<DocSectionText v-bind="$attrs">
<p>Validation errors in a form are displayed with the <i>error</i> severity.</p>
</DocSectionText>
<div class="card">
<div class="flex flex-wrap mb-4 gap-2">
<InputText placeholder="Username" aria-label="username" invalid />
<Message severity="error">Username is required</Message>
</div>
<div class="flex flex-wrap gap-2">
<InputText placeholder="Email" aria-label="email" invalid />
<Message severity="error" icon="pi pi-times-circle" />
<div class="card flex justify-center">
<div class="flex flex-col gap-4">
<div class="flex flex-wrap gap-2">
<InputText placeholder="Username" aria-label="username" invalid />
<Message severity="error">Username is required</Message>
</div>
<div class="flex flex-wrap gap-2">
<InputText placeholder="Email" aria-label="email" invalid />
<Message severity="error" icon="pi pi-times-circle" />
</div>
</div>
</div>
<DocSectionCode :code="code" />
Expand All @@ -21,7 +23,7 @@ export default {
return {
code: {
basic: `
<div class="flex flex-wrap mb-4 gap-2">
<div class="flex flex-wrap gap-2">
<InputText placeholder="Username" aria-label="username" invalid />
<Message severity="error">Username is required</Message>
</div>
Expand All @@ -32,14 +34,16 @@ export default {
`,
options: `
<template>
<div class="card">
<div class="flex flex-wrap mb-4 gap-2">
<InputText placeholder="Username" aria-label="username" invalid />
<Message severity="error">Username is required</Message>
</div>
<div class="flex flex-wrap gap-2">
<InputText placeholder="Email" aria-label="email" invalid />
<Message severity="error" icon="pi pi-times-circle" />
<div class="card flex justify-center">
<div class="flex flex-col gap-4">
<div class="flex flex-wrap gap-2">
<InputText placeholder="Username" aria-label="username" invalid />
<Message severity="error">Username is required</Message>
</div>
<div class="flex flex-wrap gap-2">
<InputText placeholder="Email" aria-label="email" invalid />
<Message severity="error" icon="pi pi-times-circle" />
</div>
</div>
</div>
</template>
Expand All @@ -49,14 +53,16 @@ export default {
`,
composition: `
<template>
<div class="card">
<div class="flex flex-wrap mb-4 gap-2">
<InputText placeholder="Username" aria-label="username" invalid />
<Message severity="error">Username is required</Message>
</div>
<div class="flex flex-wrap gap-2">
<InputText placeholder="Email" aria-label="email" invalid />
<Message severity="error" icon="pi pi-times-circle" />
<div class="card flex justify-center">
<div class="flex flex-col gap-4">
<div class="flex flex-wrap gap-2">
<InputText placeholder="Username" aria-label="username" invalid />
<Message severity="error">Username is required</Message>
</div>
<div class="flex flex-wrap gap-2">
<InputText placeholder="Email" aria-label="email" invalid />
<Message severity="error" icon="pi pi-times-circle" />
</div>
</div>
</div>
</template>
Expand Down
38 changes: 28 additions & 10 deletions apps/showcase/doc/message/OutlinedDoc.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Message provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
<p>Configure the <i>variant</i> value as <i>outlined</i> for messages with borders and no background.</p>
</DocSectionText>
<div class="card flex flex-col items-center gap-4">
<Message size="small">Small Message</Message>
<Message>Normal Message</Message>
<Message size="large">Large Message</Message>
<div class="card flex flex-wrap gap-4 justify-center">
<Message severity="success" variant="outlined">Success Message</Message>
<Message severity="info" variant="outlined">Info Message</Message>
<Message severity="warn" variant="outlined">Warn Message</Message>
<Message severity="error" variant="outlined">Error Message</Message>
<Message severity="secondary" variant="outlined">Secondary Message</Message>
<Message severity="contrast" variant="outlined">Contrast Message</Message>
</div>
<DocSectionCode :code="code" />
</template>
Expand All @@ -16,12 +19,22 @@ export default {
return {
code: {
basic: `
<Message>Message Content</Message>
<Message severity="success" variant="outlined">Success Message</Message>
<Message severity="info" variant="outlined">Info Message</Message>
<Message severity="warn" variant="outlined">Warn Message</Message>
<Message severity="error" variant="outlined">Error Message</Message>
<Message severity="secondary" variant="outlined">Secondary Message</Message>
<Message severity="contrast" variant="outlined">Contrast Message</Message>
`,
options: `
<template>
<div class="card">
<Message>Message Content</Message>
<div class="card flex flex-wrap gap-4 justify-center">
<Message severity="success" variant="outlined">Success Message</Message>
<Message severity="info" variant="outlined">Info Message</Message>
<Message severity="warn" variant="outlined">Warn Message</Message>
<Message severity="error" variant="outlined">Error Message</Message>
<Message severity="secondary" variant="outlined">Secondary Message</Message>
<Message severity="contrast" variant="outlined">Contrast Message</Message>
</div>
</template>
Expand All @@ -30,8 +43,13 @@ export default {
`,
composition: `
<template>
<div class="card">
<Message>Message Content</Message>
<div class="card flex flex-wrap gap-4 justify-center">
<Message severity="success" variant="outlined">Success Message</Message>
<Message severity="info" variant="outlined">Info Message</Message>
<Message severity="warn" variant="outlined">Warn Message</Message>
<Message severity="error" variant="outlined">Error Message</Message>
<Message severity="secondary" variant="outlined">Secondary Message</Message>
<Message severity="contrast" variant="outlined">Contrast Message</Message>
</div>
</template>
Expand Down
63 changes: 63 additions & 0 deletions apps/showcase/doc/message/PlainDoc.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Configure the <i>variant</i> value as <i>plain</i> for messages without borders and backgrounds.</p>
</DocSectionText>
<div class="card flex flex-wrap gap-4 justify-center">
<Message severity="success" variant="plain">Success Message</Message>
<Message severity="info" variant="plain">Info Message</Message>
<Message severity="warn" variant="plain">Warn Message</Message>
<Message severity="error" variant="plain">Error Message</Message>
<Message severity="secondary" variant="plain">Secondary Message</Message>
<Message severity="contrast" variant="plain">Contrast Message</Message>
</div>
<DocSectionCode :code="code" />
</template>

<script>
export default {
data() {
return {
code: {
basic: `
<Message severity="success" variant="plain">Success Message</Message>
<Message severity="info" variant="plain">Info Message</Message>
<Message severity="warn" variant="plain">Warn Message</Message>
<Message severity="error" variant="plain">Error Message</Message>
<Message severity="secondary" variant="plain">Secondary Message</Message>
<Message severity="contrast" variant="plain">Contrast Message</Message>
`,
options: `
<template>
<div class="card flex flex-wrap gap-4 justify-center">
<Message severity="success" variant="plain">Success Message</Message>
<Message severity="info" variant="plain">Info Message</Message>
<Message severity="warn" variant="plain">Warn Message</Message>
<Message severity="error" variant="plain">Error Message</Message>
<Message severity="secondary" variant="plain">Secondary Message</Message>
<Message severity="contrast" variant="plain">Contrast Message</Message>
</div>
</template>
<script>
<\/script>
`,
composition: `
<template>
<div class="card flex flex-wrap gap-4 justify-center">
<Message severity="success" variant="plain">Success Message</Message>
<Message severity="info" variant="plain">Info Message</Message>
<Message severity="warn" variant="plain">Warn Message</Message>
<Message severity="error" variant="plain">Error Message</Message>
<Message severity="secondary" variant="plain">Secondary Message</Message>
<Message severity="contrast" variant="plain">Contrast Message</Message>
</div>
</template>
<script setup>
<\/script>
`
}
};
}
};
</script>
45 changes: 0 additions & 45 deletions apps/showcase/doc/message/TextDoc.vue
View file

This file was deleted.

10 changes: 5 additions & 5 deletions apps/showcase/pages/message/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ import IconDoc from '@/doc/message/IconDoc.vue';
import ImportDoc from '@/doc/message/ImportDoc.vue';
import LifeDoc from '@/doc/message/LifeDoc.vue';
import OutlinedDoc from '@/doc/message/OutlinedDoc.vue';
import PlainDoc from '@/doc/message/PlainDoc.vue';
import PTComponent from '@/doc/message/pt/index.vue';
import SeverityDoc from '@/doc/message/SeverityDoc.vue';
import SizesDoc from '@/doc/message/SizesDoc.vue';
import TextDoc from '@/doc/message/TextDoc.vue';
import PTComponent from '@/doc/message/pt/index.vue';
import ThemingDoc from '@/doc/message/theming/index.vue';
export default {
Expand Down Expand Up @@ -48,9 +48,9 @@ export default {
component: OutlinedDoc
},
{
id: 'text',
label: 'Text',
component: TextDoc
id: 'plain',
label: 'Plain',
component: PlainDoc
},
{
id: 'sizes',
Expand Down
Loading

0 comments on commit 8563a32

Please sign in to comment.