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

Add base button and demos

pull/7365/head^2
Cagatay Civici 2025-03-04 14:17:02 +03:00
parent 0862792cf5
commit fbdf551bac
22 changed files with 559 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/volt/assets/styles/tailwind.css
View File

@ -33,4 +33,9 @@
@custom-variant p-removable (&[data-p~="removable"]); @custom-variant p-removable (&[data-p~="removable"]);
@custom-variant p-circle (&[data-p~="circle"]); @custom-variant p-circle (&[data-p~="circle"]);
@custom-variant p-determinate (&[data-p~="determinate"]); @custom-variant p-determinate (&[data-p~="determinate"]);
@custom-variant p-indeterminate (&[data-p~="indeterminate"]); @custom-variant p-indeterminate (&[data-p~="indeterminate"]);
@custom-variant p-icon-only (&[data-p~="icon-only"]);
@custom-variant p-rounded (&[data-p~="rounded"]);
@custom-variant p-raised (&[data-p~="raised"]);
@custom-variant p-outlined (&[data-p~="outlined"]);
@custom-variant p-text (&[data-p~="text"]);

12
apps/volt/doc/button/BadgeDoc.vue
View File

@ -1,9 +1,10 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Text to display on a button is defined with the <i>label</i> property.</p> <p>Buttons have built-in badge support with <i>badge</i> and <i>badgeSeverity</i> properties.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Submit" /> <Button type="button" label="Emails" badge="2" />
<Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -14,8 +15,9 @@ import { ref } from 'vue';
const code = ref(` const code = ref(`
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Submit" /> <Button type="button" label="Emails" badge="2" />
<Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined" />
</div> </div>
</template> </template>

16
apps/volt/doc/button/ButtonGroupDoc.vue
View File

@ -1,26 +1,36 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Text to display on a button is defined with the <i>label</i> property.</p> <p>Multiple buttons are grouped when wrapped inside an element with <i>ButtonGroup</i> component.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Button label="Submit" /> <ButtonGroup>
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</ButtonGroup>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
<script setup> <script setup>
import Button from '@/volt/button'; import Button from '@/volt/button';
import ButtonGroup from '@/volt/buttongroup';
import { ref } from 'vue'; import { ref } from 'vue';
const code = ref(` const code = ref(`
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Button label="Submit" /> <ButtonGroup>
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</ButtonGroup>
</div> </div>
</template> </template>
<script setup> <script setup>
import Button from '@/volt/button'; import Button from '@/volt/button';
import ButtonGroup from '@/volt/buttongroup';
<\/script> <\/script>
`); `);
</script> </script>

6
apps/volt/doc/button/DisabledDoc.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Text to display on a button is defined with the <i>label</i> property.</p> <p>When <i>disabled</i> is present, the element cannot be used.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Button label="Submit" /> <Button label="Submit" disabled />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,7 +15,7 @@ import { ref } from 'vue';
const code = ref(` const code = ref(`
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Button label="Submit" /> <Button label="Submit" disabled />
</div> </div>
</template> </template>

20
apps/volt/doc/button/HeadlessDoc.vue
View File

@ -1,9 +1,16 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Text to display on a button is defined with the <i>label</i> property.</p> <p>Headless mode is enabled by adding the <i>asChild</i> property and defining your own UI element with the available bindings.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Button label="Submit" /> <Button v-slot="slotProps" asChild>
<button
v-bind="slotProps.a11yAttrs"
class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
>
SIGN UP
</button>
</Button>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,7 +22,14 @@ import { ref } from 'vue';
const code = ref(` const code = ref(`
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Button label="Submit" /> <Button v-slot="slotProps" asChild>
<button
v-bind="slotProps.a11yAttrs"
class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
>
SIGN UP
</button>
</Button>
</div> </div>
</template> </template>

139
apps/volt/doc/button/IconOnlyDoc.vue
View File

@ -1,26 +1,155 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Text to display on a button is defined with the <i>label</i> property.</p> <p>Buttons can have icons without labels.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card">
<Button label="Submit" /> <div class="flex justify-center mb-8">
<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" optionValue="value" dataKey="label" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" rounded aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" rounded aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" :size="size" /> <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4">
<Button icon="pi pi-check" variant="text" rounded aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" :size="size" />
</div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
<script setup> <script setup>
import Button from '@/volt/button'; import Button from '@/volt/button';
import SelectButton from '@/volt/selectbutton';
import { ref } from 'vue'; import { ref } from 'vue';
const size = ref('normal');
const sizeOptions = ref([
{ label: 'Small', value: 'small' },
{ label: 'Normal', value: 'normal' },
{ label: 'Large', value: 'large' }
]);
const code = ref(` const code = ref(`
<template> <template>
<div class="card flex justify-center"> <div class="card">
<Button label="Submit" /> <div class="flex justify-center mb-8">
<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" optionValue="value" dataKey="label" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" rounded aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" rounded aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" :size="size" /> <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4">
<Button icon="pi pi-check" variant="text" rounded aria-label="Filter" :size="size" />
<Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" :size="size" />
<Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" :size="size" />
<Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" :size="size" />
<Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" :size="size" />
<Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" :size="size" />
<Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" :size="size" />
<Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" :size="size" />
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import Button from '@/volt/button'; import Button from '@/volt/button';
import SelectButton from '@/volt/selectbutton';
import { ref } from 'vue';
const size = ref('normal');
const sizeOptions = ref([
{ label: 'Small', value: 'small' },
{ label: 'Normal', value: 'normal' },
{ label: 'Large', value: 'large' }
]);
<\/script> <\/script>
`); `);
</script> </script>

26
apps/volt/doc/button/IconsDoc.vue
View File

@ -1,9 +1,17 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Text to display on a button is defined with the <i>label</i> property.</p> <p>Icon of a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex flex-col items-center gap-4">
<Button label="Submit" /> <div class="flex flex-wrap gap-4 justify-center">
<Button icon="pi pi-home" aria-label="Save" />
<Button label="Profile" icon="pi pi-user" />
<Button label="Save" icon="pi pi-check" iconPos="right" />
</div>
<div class="flex flex-wrap gap-4 justify-center">
<Button label="Search" icon="pi pi-search" iconPos="top" />
<Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
</div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -14,8 +22,16 @@ import { ref } from 'vue';
const code = ref(` const code = ref(`
<template> <template>
<div class="card flex justify-center"> <div class="card flex flex-col items-center gap-4">
<Button label="Submit" /> <div class="flex flex-wrap gap-4 justify-center">
<Button icon="pi pi-home" aria-label="Save" />
<Button label="Profile" icon="pi pi-user" />
<Button label="Save" icon="pi pi-check" iconPos="right" />
</div>
<div class="flex flex-wrap gap-4 justify-center">
<Button label="Search" icon="pi pi-search" iconPos="top" />
<Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
</div>
</div> </div>
</template> </template>

33
apps/volt/doc/button/ImportDoc.vue
View File

@ -1,26 +1,15 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs" />
<p>Text to display on a button is defined with the <i>label</i> property.</p> <DocSectionCode :code="code" lang="script" />
</DocSectionText>
<div class="card flex justify-center">
<Button label="Submit" />
</div>
<DocSectionCode :code="code" />
</template> </template>
<script setup> <script>
import Button from '@/volt/button'; export default {
import { ref } from 'vue'; data() {
return {
const code = ref(` code: `import Button from '@/volt/button';
<template> `
<div class="card flex justify-center"> };
<Button label="Submit" /> }
</div> };
</template>
<script setup>
import Button from '@/volt/button';
<\/script>
`);
</script> </script>

20
apps/volt/doc/button/LinkDoc.vue
View File

@ -1,9 +1,14 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Text to display on a button is defined with the <i>label</i> property.</p> <p>The button element can be displayed as a link element, and similarly a regular link can be styled as a button.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center gap-4">
<Button label="Submit" /> <Button label="Link" variant="link" />
<RouterLink
to="/"
class="bg-primary hover:bg-primary-emphasis active:bg-primary-emphasis-alt text-primary-contrast px-3 py-2 gap-2 rounded-md font-medium focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary"
>Router</RouterLink
>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -14,8 +19,13 @@ import { ref } from 'vue';
const code = ref(` const code = ref(`
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center gap-4">
<Button label="Submit" /> <Button label="Link" variant="link" />
<RouterLink
to="/"
class="bg-primary hover:bg-primary-emphasis active:bg-primary-emphasis-alt text-primary-contrast px-3 py-2 gap-2 rounded-md font-medium focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary"
>Router</RouterLink
>
</div> </div>
</template> </template>

25
apps/volt/doc/button/LoadingDoc.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Text to display on a button is defined with the <i>label</i> property.</p> <p>Busy state is controlled with the <i>loading</i> property.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Button label="Submit" /> <Button type="button" label="Search" icon="pi pi-check" :loading="loading" @click="load" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -12,15 +12,34 @@
import Button from '@/volt/button'; import Button from '@/volt/button';
import { ref } from 'vue'; import { ref } from 'vue';
const loading = ref(false);
const load = () => {
loading.value = true;
setTimeout(() => {
loading.value = false;
}, 2000);
};
const code = ref(` const code = ref(`
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Button label="Submit" /> <Button type="button" label="Search" icon="pi pi-check" :loading="loading" @click="load" />
</div> </div>
</template> </template>
<script setup> <script setup>
import Button from '@/volt/button'; import Button from '@/volt/button';
import { ref } from 'vue';
const loading = ref(false);
const load = () => {
loading.value = true;
setTimeout(() => {
loading.value = false;
}, 2000);
};
<\/script> <\/script>
`); `);
</script> </script>

24
apps/volt/doc/button/OutlinedDoc.vue
View File

@ -1,9 +1,16 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Text to display on a button is defined with the <i>label</i> property.</p> <p>Outlined buttons display a border without a transparent background.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Submit" /> <Button label="Primary" variant="outlined" />
<Button label="Secondary" severity="secondary" variant="outlined" />
<Button label="Success" severity="success" variant="outlined" />
<Button label="Info" severity="info" variant="outlined" />
<Button label="Warn" severity="warn" variant="outlined" />
<Button label="Help" severity="help" variant="outlined" />
<Button label="Danger" severity="danger" variant="outlined" />
<Button label="Contrast" severity="contrast" variant="outlined" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -14,8 +21,15 @@ import { ref } from 'vue';
const code = ref(` const code = ref(`
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Submit" /> <Button label="Primary" variant="outlined" />
<Button label="Secondary" severity="secondary" variant="outlined" />
<Button label="Success" severity="success" variant="outlined" />
<Button label="Info" severity="info" variant="outlined" />
<Button label="Warn" severity="warn" variant="outlined" />
<Button label="Help" severity="help" variant="outlined" />
<Button label="Danger" severity="danger" variant="outlined" />
<Button label="Contrast" severity="contrast" variant="outlined" />
</div> </div>
</template> </template>

24
apps/volt/doc/button/RaisedDoc.vue
View File

@ -1,9 +1,16 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Text to display on a button is defined with the <i>label</i> property.</p> <p>Raised buttons display a shadow to indicate elevation.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Submit" /> <Button label="Primary" raised />
<Button label="Secondary" severity="secondary" raised />
<Button label="Success" severity="success" raised />
<Button label="Info" severity="info" raised />
<Button label="Warn" severity="warn" raised />
<Button label="Help" severity="help" raised />
<Button label="Danger" severity="danger" raised />
<Button label="Contrast" severity="contrast" raised />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -14,8 +21,15 @@ import { ref } from 'vue';
const code = ref(` const code = ref(`
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Submit" /> <Button label="Primary" raised />
<Button label="Secondary" severity="secondary" raised />
<Button label="Success" severity="success" raised />
<Button label="Info" severity="info" raised />
<Button label="Warn" severity="warn" raised />
<Button label="Help" severity="help" raised />
<Button label="Danger" severity="danger" raised />
<Button label="Contrast" severity="contrast" raised />
</div> </div>
</template> </template>

24
apps/volt/doc/button/RaisedTextDoc.vue
View File

@ -1,9 +1,16 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Text to display on a button is defined with the <i>label</i> property.</p> <p>Text buttons can be displayed elevated with the <i>raised</i> option.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Submit" /> <Button label="Primary" variant="text" raised />
<Button label="Secondary" severity="secondary" variant="text" raised />
<Button label="Success" severity="success" variant="text" raised />
<Button label="Info" severity="info" variant="text" raised />
<Button label="Warn" severity="warn" variant="text" raised />
<Button label="Help" severity="help" variant="text" raised />
<Button label="Danger" severity="danger" variant="text" raised />
<Button label="Contrast" severity="contrast" variant="text" raised />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -14,8 +21,15 @@ import { ref } from 'vue';
const code = ref(` const code = ref(`
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Submit" /> <Button label="Primary" variant="text" raised />
<Button label="Secondary" severity="secondary" variant="text" raised />
<Button label="Success" severity="success" variant="text" raised />
<Button label="Info" severity="info" variant="text" raised />
<Button label="Warn" severity="warn" variant="text" raised />
<Button label="Help" severity="help" variant="text" raised />
<Button label="Danger" severity="danger" variant="text" raised />
<Button label="Contrast" severity="contrast" variant="text" raised />
</div> </div>
</template> </template>

24
apps/volt/doc/button/RoundedDoc.vue
View File

@ -1,9 +1,16 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Text to display on a button is defined with the <i>label</i> property.</p> <p>Rounded buttons have a circular border radius.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Submit" /> <Button label="Primary" rounded />
<Button label="Secondary" severity="secondary" rounded />
<Button label="Success" severity="success" rounded />
<Button label="Info" severity="info" rounded />
<Button label="Warn" severity="warn" rounded />
<Button label="Help" severity="help" rounded />
<Button label="Danger" severity="danger" rounded />
<Button label="Contrast" severity="contrast" rounded />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -14,8 +21,15 @@ import { ref } from 'vue';
const code = ref(` const code = ref(`
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Submit" /> <Button label="Primary" rounded />
<Button label="Secondary" severity="secondary" rounded />
<Button label="Success" severity="success" rounded />
<Button label="Info" severity="info" rounded />
<Button label="Warn" severity="warn" rounded />
<Button label="Help" severity="help" rounded />
<Button label="Danger" severity="danger" rounded />
<Button label="Contrast" severity="contrast" rounded />
</div> </div>
</template> </template>

24
apps/volt/doc/button/SeverityDoc.vue
View File

@ -1,9 +1,16 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Text to display on a button is defined with the <i>label</i> property.</p> <p>The <i>severity</i> property defines the variant of a button.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Submit" /> <Button label="Primary" />
<Button label="Secondary" severity="secondary" />
<Button label="Success" severity="success" />
<Button label="Info" severity="info" />
<Button label="Warn" severity="warn" />
<Button label="Help" severity="help" />
<Button label="Danger" severity="danger" />
<Button label="Contrast" severity="contrast" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -14,8 +21,15 @@ import { ref } from 'vue';
const code = ref(` const code = ref(`
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Submit" /> <Button label="Primary" />
<Button label="Secondary" severity="secondary" />
<Button label="Success" severity="success" />
<Button label="Info" severity="info" />
<Button label="Warn" severity="warn" />
<Button label="Help" severity="help" />
<Button label="Danger" severity="danger" />
<Button label="Contrast" severity="contrast" />
</div> </div>
</template> </template>

14
apps/volt/doc/button/SizesDoc.vue
View File

@ -1,9 +1,11 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Text to display on a button is defined with the <i>label</i> property.</p> <p>Button provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex flex-wrap items-center justify-center gap-4">
<Button label="Submit" /> <Button label="Small" icon="pi pi-check" size="small" />
<Button label="Normal" icon="pi pi-check" />
<Button label="Large" icon="pi pi-check" size="large" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -14,8 +16,10 @@ import { ref } from 'vue';
const code = ref(` const code = ref(`
<template> <template>
<div class="card flex justify-center"> <div class="card flex flex-wrap items-center justify-center gap-4">
<Button label="Submit" /> <Button label="Small" icon="pi pi-check" size="small" />
<Button label="Normal" icon="pi pi-check" />
<Button label="Large" icon="pi pi-check" size="large" />
</div> </div>
</template> </template>

28
apps/volt/doc/button/TemplateDoc.vue
View File

@ -1,9 +1,20 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Text to display on a button is defined with the <i>label</i> property.</p> <p>Custom content inside a button is defined as children.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Button label="Submit" /> <Button variant="outlined" class="!border-2">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
fill="var(--p-primary-color)"
/>
<path
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
fill="var(--p-text-color)"
/>
</svg>
</Button>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -15,7 +26,18 @@ import { ref } from 'vue';
const code = ref(` const code = ref(`
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<Button label="Submit" /> <Button variant="outlined" class="!border-2">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
fill="var(--p-primary-color)"
/>
<path
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
fill="var(--p-text-color)"
/>
</svg>
</Button>
</div> </div>
</template> </template>

24
apps/volt/doc/button/TextDoc.vue
View File

@ -1,9 +1,16 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Text to display on a button is defined with the <i>label</i> property.</p> <p>Text buttons are displayed as textual elements.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Submit" /> <Button label="Primary" variant="text" />
<Button label="Secondary" severity="secondary" variant="text" />
<Button label="Success" severity="success" variant="text" />
<Button label="Info" severity="info" variant="text" />
<Button label="Warn" severity="warn" variant="text" />
<Button label="Help" severity="help" variant="text" />
<Button label="Danger" severity="danger" variant="text" />
<Button label="Contrast" severity="contrast" variant="text" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -14,8 +21,15 @@ import { ref } from 'vue';
const code = ref(` const code = ref(`
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center flex-wrap gap-4">
<Button label="Submit" /> <Button label="Primary" variant="text" />
<Button label="Secondary" severity="secondary" variant="text" />
<Button label="Success" severity="success" variant="text" />
<Button label="Info" severity="info" variant="text" />
<Button label="Warn" severity="warn" variant="text" />
<Button label="Help" severity="help" variant="text" />
<Button label="Danger" severity="danger" variant="text" />
<Button label="Contrast" severity="contrast" variant="text" />
</div> </div>
</template> </template>

182
apps/volt/pages/button/index.vue
View File

@ -25,97 +25,95 @@ import TextDoc from '@/doc/button/TextDoc.vue';
import { ref } from 'vue'; import { ref } from 'vue';
const docs = ref([ const docs = ref([
[ {
{ id: 'import',
id: 'import', label: 'Import',
label: 'Import', component: ImportDoc
component: ImportDoc },
}, {
{ id: 'basic',
id: 'basic', label: 'Basic',
label: 'Basic', component: BasicDoc
component: BasicDoc },
}, {
{ id: 'icons',
id: 'icons', label: 'Icons',
label: 'Icons', component: IconsDoc
component: IconsDoc },
}, {
{ id: 'loading',
id: 'loading', label: 'Loading',
label: 'Loading', component: LoadingDoc
component: LoadingDoc },
}, {
{ id: 'link',
id: 'link', label: 'Link',
label: 'Link', component: LinkDoc
component: LinkDoc },
}, {
{ id: 'severity',
id: 'severity', label: 'Severity',
label: 'Severity', component: SeverityDoc
component: SeverityDoc },
}, {
{ id: 'disabled',
id: 'disabled', label: 'Disabled',
label: 'Disabled', component: DisabledDoc
component: DisabledDoc },
}, {
{ id: 'raised',
id: 'raised', label: 'Raised',
label: 'Raised', component: RaisedDoc
component: RaisedDoc },
}, {
{ id: 'rounded',
id: 'rounded', label: 'Rounded',
label: 'Rounded', component: RoundedDoc
component: RoundedDoc },
}, {
{ id: 'text',
id: 'text', label: 'Text',
label: 'Text', component: TextDoc
component: TextDoc },
}, {
{ id: 'raisedtext',
id: 'raisedtext', label: 'Raised Text',
label: 'Raised Text', component: RaisedTextDoc
component: RaisedTextDoc },
}, {
{ id: 'outlined',
id: 'outlined', label: 'Outlined',
label: 'Outlined', component: OutlinedDoc
component: OutlinedDoc },
}, {
{ id: 'icononly',
id: 'icononly', label: 'Icon Only',
label: 'Icon Only', component: IconOnlyDoc
component: IconOnlyDoc },
}, {
{ id: 'badge',
id: 'badge', label: 'Badge',
label: 'Badge', component: BadgeDoc
component: BadgeDoc },
}, {
{ id: 'buttongroup',
id: 'buttongroup', label: 'Button Group',
label: 'Button Group', component: ButtonGroupDoc
component: ButtonGroupDoc },
}, {
{ id: 'sizes',
id: 'sizes', label: 'Sizes',
label: 'Sizes', component: SizesDoc
component: SizesDoc },
}, {
{ id: 'template',
id: 'template', label: 'Template',
label: 'Template', component: TemplateDoc
component: TemplateDoc },
}, {
{ id: 'headless',
id: 'headless', label: 'Headless',
label: 'Headless', component: HeadlessDoc
component: HeadlessDoc }
}
]
]); ]);
</script> </script>

20
apps/volt/volt/button/index.vue
View File

@ -18,6 +18,24 @@ import { ref } from 'vue';
import { ptViewMerge } from '../utils'; import { ptViewMerge } from '../utils';
const theme = ref({ const theme = ref({
root: `` root: `inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative
px-3 py-2 gap-2 rounded-md disabled:pointer-events-none transition-colors duration-200
bg-primary enabled:hover:bg-primary-emphasis enabled:active:bg-primary-emphasis-alt text-primary-contrast
border border-primary enabled:hover:border-primary-emphasis enabled:active:border-primary-emphasis-alt
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
p-vertical:flex-col p-fluid:w-full p-fluid:p-icon-only:w-10
p-icon-only:w-10 p-icon-only:px-0 p-icon-only:gap-0
p-icon-only:p-rounded:rounded-full p-icon-only:p-rounded:h-10
p-small:text-sm p-small:px-[0.625rem] p-small:py-[0.375rem]
p-large:text-[1.125rem] p-large:px-[0.875rem] p-large:py-[0.625rem]
p-raised:shadow-sm p-rounded:rounded-[2rem]
`,
loadingIcon: ``,
icon: `p-right:order-1 p-bottom:order-2`,
label: `font-medium p-icon-only:invisible p-icon-only:w-0
p-small:text-sm p-large:text-[1.125rem]`,
pcBadge: {
root: `min-w-4 h-4 leading-4`
}
}); });
</script> </script>

23
apps/volt/volt/buttongroup/index.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<ButtonGroup
unstyled
:pt="theme"
:ptOptions="{
mergeProps: ptViewMerge
}"
>
<template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
<slot :name="slotName" v-bind="slotProps ?? {}" />
</template>
</ButtonGroup>
</template>
<script setup>
import ButtonGroup from 'primevue/buttongroup';
import { ref } from 'vue';
import { ptViewMerge } from '../utils';
const theme = ref({
root: ``
});
</script>

33
packages/primevue/src/button/Button.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<component v-if="!asChild" :is="as" v-ripple :class="cx('root')" v-bind="attrs"> <component v-if="!asChild" :is="as" v-ripple :class="cx('root')" :data-p="dataP" v-bind="attrs">
<slot> <slot>
<slot v-if="loading" name="loadingicon" :class="[cx('loadingIcon'), cx('icon')]" v-bind="ptm('loadingIcon')"> <slot v-if="loading" name="loadingicon" :class="[cx('loadingIcon'), cx('icon')]" v-bind="ptm('loadingIcon')">
<span v-if="loadingIcon" :class="[cx('loadingIcon'), cx('icon'), loadingIcon]" v-bind="ptm('loadingIcon')" /> <span v-if="loadingIcon" :class="[cx('loadingIcon'), cx('icon'), loadingIcon]" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else :class="[cx('loadingIcon'), cx('icon')]" spin v-bind="ptm('loadingIcon')" /> <SpinnerIcon v-else :class="[cx('loadingIcon'), cx('icon')]" spin v-bind="ptm('loadingIcon')" />
</slot> </slot>
<slot v-else name="icon" :class="[cx('icon')]" v-bind="ptm('icon')"> <slot v-else name="icon" :class="[cx('icon')]" v-bind="ptm('icon')">
<span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span> <span v-if="icon" :class="[cx('icon'), icon, iconClass]" :data-p="dataIconP" v-bind="ptm('icon')"></span>
</slot> </slot>
<span :class="cx('label')" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span> <span :class="cx('label')" v-bind="ptm('label')" :data-p="dataLabelP">{{ label || '&nbsp;' }}</span>
<Badge v-if="badge" :value="badge" :class="badgeClass" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('pcBadge')"></Badge> <Badge v-if="badge" :value="badge" :class="badgeClass" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('pcBadge')"></Badge>
</slot> </slot>
</component> </component>
@ -16,6 +16,7 @@
</template> </template>
<script> <script>
import { cn } from '@primeuix/utils';
import { isEmpty } from '@primeuix/utils/object'; import { isEmpty } from '@primeuix/utils/object';
import SpinnerIcon from '@primevue/icons/spinner'; import SpinnerIcon from '@primevue/icons/spinner';
import Badge from 'primevue/badge'; import Badge from 'primevue/badge';
@ -67,6 +68,32 @@ export default {
}, },
hasFluid() { hasFluid() {
return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid; return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
},
dataP() {
return cn({
[this.size]: this.size,
'icon-only': this.hasIcon && !this.label && !this.badge,
loading: this.loading,
fluid: this.hasFluid,
rounded: this.rounded,
raised: this.raised,
outlined: this.variant === 'outlined',
text: this.variant === 'text',
link: this.link || this.variant === 'link',
vertical: (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label
});
},
dataIconP() {
return cn({
[this.iconPos]: this.iconPos,
[this.size]: this.size
});
},
dataLabelP() {
return cn({
[this.size]: this.size,
'icon-only': this.hasIcon && !this.label && !this.badge
});
} }
}, },
components: { components: {