Merge branch 'master' of https://github.com/primefaces/primevue
tugcekucukoglu
commit
4866db7969
|
|
@ -9,56 +9,37 @@
|
|||
|
||||
<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" />
|
||||
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
|
||||
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
|
||||
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :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" />
|
||||
<Button icon="pi pi-check" aria-label="Filter" :size="size" rounded />
|
||||
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" rounded />
|
||||
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" rounded />
|
||||
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" rounded />
|
||||
</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" />
|
||||
<Button icon="pi pi-check" aria-label="Filter" :size="size" variant="outlined" rounded />
|
||||
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="outlined" rounded />
|
||||
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="outlined" rounded />
|
||||
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="outlined" rounded />
|
||||
</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" />
|
||||
<Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" rounded />
|
||||
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" rounded />
|
||||
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" rounded />
|
||||
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" rounded />
|
||||
</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 class="flex flex-wrap justify-center gap-4 mb-6">
|
||||
<Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" raised rounded />
|
||||
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" raised rounded />
|
||||
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" raised rounded />
|
||||
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" raised rounded />
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
|
|
@ -66,6 +47,9 @@
|
|||
|
||||
<script setup>
|
||||
import Button from '@/volt/button';
|
||||
import ContrastButton from '@/volt/button/contrast';
|
||||
import DangerButton from '@/volt/button/danger';
|
||||
import SecondaryButton from '@/volt/button/secondary';
|
||||
import SelectButton from '@/volt/selectbutton';
|
||||
import { ref } from 'vue';
|
||||
|
||||
|
|
@ -85,62 +69,46 @@ const code = ref(`
|
|||
|
||||
<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" />
|
||||
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
|
||||
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
|
||||
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :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" />
|
||||
<Button icon="pi pi-check" aria-label="Filter" :size="size" rounded />
|
||||
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" rounded />
|
||||
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" rounded />
|
||||
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" rounded />
|
||||
</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" />
|
||||
<Button icon="pi pi-check" aria-label="Filter" :size="size" variant="outlined" rounded />
|
||||
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="outlined" rounded />
|
||||
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="outlined" rounded />
|
||||
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="outlined" rounded />
|
||||
</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" />
|
||||
<Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" rounded />
|
||||
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" rounded />
|
||||
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" rounded />
|
||||
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" rounded />
|
||||
</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 class="flex flex-wrap justify-center gap-4 mb-6">
|
||||
<Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" raised rounded />
|
||||
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" raised rounded />
|
||||
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" raised rounded />
|
||||
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" raised rounded />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from '@/volt/button';
|
||||
import ContrastButton from '@/volt/button/contrast';
|
||||
import DangerButton from '@/volt/button/danger';
|
||||
import SecondaryButton from '@/volt/button/secondary';
|
||||
import SelectButton from '@/volt/selectbutton';
|
||||
import { ref } from 'vue';
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
code: `import Button from '@/volt/button';
|
||||
import SecondaryButton from '@/volt/button/secondary';
|
||||
import ContrastButton from '@/volt/button/contrast';
|
||||
import DangerButton from '@/volt/button/danger';
|
||||
`
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>The button element can be displayed as a link element, and similarly a regular link can be styled as a button.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center gap-4">
|
||||
<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>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from '@/volt/button';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex justify-center gap-4">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from '@/volt/button';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -4,37 +4,35 @@
|
|||
</DocSectionText>
|
||||
<div class="card flex justify-center flex-wrap gap-4">
|
||||
<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" />
|
||||
<SecondaryButton label="Secondary" variant="outlined" />
|
||||
<ContrastButton label="Contrast" variant="outlined" />
|
||||
<DangerButton label="Danger" variant="outlined" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from '@/volt/button';
|
||||
import ContrastButton from '@/volt/button/contrast';
|
||||
import DangerButton from '@/volt/button/danger';
|
||||
import SecondaryButton from '@/volt/button/secondary';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex justify-center flex-wrap gap-4">
|
||||
<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" />
|
||||
<SecondaryButton label="Secondary" variant="outlined" />
|
||||
<ContrastButton label="Contrast" variant="outlined" />
|
||||
<DangerButton label="Danger" variant="outlined" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from '@/volt/button';
|
||||
import ContrastButton from '@/volt/button/contrast';
|
||||
import DangerButton from '@/volt/button/danger';
|
||||
import SecondaryButton from '@/volt/button/secondary';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,37 +4,35 @@
|
|||
</DocSectionText>
|
||||
<div class="card flex justify-center flex-wrap gap-4">
|
||||
<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 />
|
||||
<SecondaryButton label="Secondary" raised />
|
||||
<ContrastButton label="Contrast" raised />
|
||||
<DangerButton label="Danger" raised />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from '@/volt/button';
|
||||
import ContrastButton from '@/volt/button/contrast';
|
||||
import DangerButton from '@/volt/button/danger';
|
||||
import SecondaryButton from '@/volt/button/secondary';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex justify-center flex-wrap gap-4">
|
||||
<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 />
|
||||
<SecondaryButton label="Secondary" raised />
|
||||
<ContrastButton label="Contrast" raised />
|
||||
<DangerButton label="Danger" raised />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from '@/volt/button';
|
||||
import ContrastButton from '@/volt/button/contrast';
|
||||
import DangerButton from '@/volt/button/danger';
|
||||
import SecondaryButton from '@/volt/button/secondary';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,37 +4,35 @@
|
|||
</DocSectionText>
|
||||
<div class="card flex justify-center flex-wrap gap-4">
|
||||
<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 />
|
||||
<SecondaryButton label="Secondary" variant="text" raised />
|
||||
<ContrastButton label="Contrast" variant="text" raised />
|
||||
<DangerButton label="Danger" variant="text" raised />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from '@/volt/button';
|
||||
import ContrastButton from '@/volt/button/contrast';
|
||||
import DangerButton from '@/volt/button/danger';
|
||||
import SecondaryButton from '@/volt/button/secondary';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex justify-center flex-wrap gap-4">
|
||||
<div class="card flex justify-center flex-wrap gap-4">
|
||||
<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 />
|
||||
<SecondaryButton label="Secondary" variant="text" raised />
|
||||
<ContrastButton label="Contrast" variant="text" raised />
|
||||
<DangerButton label="Danger" variant="text" raised />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from '@/volt/button';
|
||||
import ContrastButton from '@/volt/button/contrast';
|
||||
import DangerButton from '@/volt/button/danger';
|
||||
import SecondaryButton from '@/volt/button/secondary';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,37 +4,35 @@
|
|||
</DocSectionText>
|
||||
<div class="card flex justify-center flex-wrap gap-4">
|
||||
<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 />
|
||||
<SecondaryButton label="Secondary" rounded />
|
||||
<ContrastButton label="Contrast" rounded />
|
||||
<DangerButton label="Danger" rounded />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from '@/volt/button';
|
||||
import ContrastButton from '@/volt/button/contrast';
|
||||
import DangerButton from '@/volt/button/danger';
|
||||
import SecondaryButton from '@/volt/button/secondary';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex justify-center flex-wrap gap-4">
|
||||
<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 />
|
||||
<SecondaryButton label="Secondary" rounded />
|
||||
<ContrastButton label="Contrast" rounded />
|
||||
<DangerButton label="Danger" rounded />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from '@/volt/button';
|
||||
import ContrastButton from '@/volt/button/contrast';
|
||||
import DangerButton from '@/volt/button/danger';
|
||||
import SecondaryButton from '@/volt/button/secondary';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,40 +1,38 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>The <i>severity</i> property defines the variant of a button.</p>
|
||||
<p>Secondary, Contrast and Danger buttons are available as separate components for severity alternatives.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center flex-wrap gap-4">
|
||||
<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" />
|
||||
<SecondaryButton label="Secondary" />
|
||||
<ContrastButton label="Contrast" />
|
||||
<DangerButton label="Danger" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from '@/volt/button';
|
||||
import ContrastButton from '@/volt/button/contrast';
|
||||
import DangerButton from '@/volt/button/danger';
|
||||
import SecondaryButton from '@/volt/button/secondary';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex justify-center flex-wrap gap-4">
|
||||
<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" />
|
||||
<SecondaryButton label="Secondary" />
|
||||
<ContrastButton label="Contrast" />
|
||||
<DangerButton label="Danger" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from '@/volt/button';
|
||||
import ContrastButton from '@/volt/button/contrast';
|
||||
import DangerButton from '@/volt/button/danger';
|
||||
import SecondaryButton from '@/volt/button/secondary';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,37 +4,35 @@
|
|||
</DocSectionText>
|
||||
<div class="card flex justify-center flex-wrap gap-4">
|
||||
<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" />
|
||||
<SecondaryButton label="Secondary" variant="text" />
|
||||
<ContrastButton label="Contrast" variant="text" />
|
||||
<DangerButton label="Danger" variant="text" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from '@/volt/button';
|
||||
import ContrastButton from '@/volt/button/contrast';
|
||||
import DangerButton from '@/volt/button/danger';
|
||||
import SecondaryButton from '@/volt/button/secondary';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex justify-center flex-wrap gap-4">
|
||||
<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" />
|
||||
<SecondaryButton label="Secondary" variant="text" />
|
||||
<ContrastButton label="Contrast" variant="text" />
|
||||
<DangerButton label="Danger" variant="text" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from '@/volt/button';
|
||||
import ContrastButton from '@/volt/button/contrast';
|
||||
import DangerButton from '@/volt/button/danger';
|
||||
import SecondaryButton from '@/volt/button/secondary';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ import HeadlessDoc from '@/doc/button/HeadlessDoc.vue';
|
|||
import IconOnlyDoc from '@/doc/button/IconOnlyDoc.vue';
|
||||
import IconsDoc from '@/doc/button/IconsDoc.vue';
|
||||
import ImportDoc from '@/doc/button/ImportDoc.vue';
|
||||
import LinkDoc from '@/doc/button/LinkDoc.vue';
|
||||
import LoadingDoc from '@/doc/button/LoadingDoc.vue';
|
||||
import OutlinedDoc from '@/doc/button/OutlinedDoc.vue';
|
||||
import RaisedDoc from '@/doc/button/RaisedDoc.vue';
|
||||
|
|
@ -45,11 +44,6 @@ const docs = ref([
|
|||
label: 'Loading',
|
||||
component: LoadingDoc
|
||||
},
|
||||
{
|
||||
id: 'link',
|
||||
label: 'Link',
|
||||
component: LinkDoc
|
||||
},
|
||||
{
|
||||
id: 'severity',
|
||||
label: 'Severity',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<Button
|
||||
unstyled
|
||||
:pt="theme"
|
||||
:ptOptions="{
|
||||
mergeProps: ptViewMerge
|
||||
}"
|
||||
>
|
||||
<template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
|
||||
<slot :name="slotName" v-bind="slotProps ?? {}" />
|
||||
</template>
|
||||
</Button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from 'primevue/button';
|
||||
import { ref } from 'vue';
|
||||
import { ptViewMerge } from '../utils';
|
||||
|
||||
const theme = ref({
|
||||
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 disabled:opacity-60 transition-colors duration-200
|
||||
bg-surface-950 enabled:hover:bg-surface-900 enabled:active:bg-surface-800
|
||||
border-surface-950 enabled:hover:border-surface-900 enabled:active:border-surface-800
|
||||
text-white enabled:hover:text-white enabled:active:text-white
|
||||
dark:bg-surface-0 dark:enabled:hover:bg-surface-100 dark:enabled:active:bg-surface-200
|
||||
dark:border-surface-100 dark:enabled:hover:border-surface-200 dark:enabled:active:border-surface-300
|
||||
dark:text-surface-950 dark:enabled:hover:text-surface-950 dark:enabled:active:text-surface-950
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
|
||||
focus-visible:outline-surface-950 dark:focus-visible:outline-surface-0
|
||||
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]
|
||||
p-outlined:bg-transparent enabled:hover:p-outlined:bg-surface-50 enabled:active:p-outlined:bg-surface-100
|
||||
p-outlined:border-surface-700 enabled:hover:p-outlined:border-surface-700 enabled:active:p-outlined:border-surface-700
|
||||
p-outlined:text-surface-950 enabled:hover:p-outlined:text-surface-950 enabled:active:p-outlined:text-surface-950
|
||||
dark:p-outlined:bg-transparent dark:enabled:hover:p-outlined:bg-surface-800 dark:enabled:active:p-outlined:bg-surface-700
|
||||
dark:p-outlined:border-surface-500 dark:enabled:hover:p-outlined:border-surface-500 dark:enabled:active:p-outlined:border-surface-500
|
||||
dark:p-outlined:text-surface-0 dark:enabled:hover:p-outlined:text-surface-0 dark:enabled:active:p-outlined:text-surface-0
|
||||
p-text:bg-transparent enabled:hover:p-text:bg-surface-50 enabled:active:p-text:bg-surface-100
|
||||
p-text:border-transparent enabled:hover:p-text:border-transparent enabled:active:p-text:border-transparent
|
||||
p-text:text-surface-950 enabled:hover:p-text:text-surface-950 enabled:active:p-text:text-surface-950
|
||||
dark:p-text:bg-transparent dark:enabled:hover:p-text:bg-surface-800 dark:enabled:active:p-text:bg-surface-700
|
||||
dark:p-text:border-transparent dark:enabled:hover:p-text:border-transparent dark:enabled:active:p-text:border-transparent
|
||||
dark:p-text:text-surface-0 dark:enabled:hover:p-text:text-surface-0 dark:enabled:active:p-text:text-surface-0
|
||||
`,
|
||||
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>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<Button
|
||||
unstyled
|
||||
:pt="theme"
|
||||
:ptOptions="{
|
||||
mergeProps: ptViewMerge
|
||||
}"
|
||||
>
|
||||
<template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
|
||||
<slot :name="slotName" v-bind="slotProps ?? {}" />
|
||||
</template>
|
||||
</Button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from 'primevue/button';
|
||||
import { ref } from 'vue';
|
||||
import { ptViewMerge } from '../utils';
|
||||
|
||||
const theme = ref({
|
||||
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 disabled:opacity-60 transition-colors duration-200
|
||||
bg-red-500 enabled:hover:bg-red-600 enabled:active:bg-red-700
|
||||
border-red-500 enabled:hover:border-red-600 enabled:active:border-red-700
|
||||
text-white enabled:hover:text-white enabled:active:text-white
|
||||
dark:bg-red-400 dark:enabled:hover:bg-red-300 dark:enabled:active:bg-red-200
|
||||
dark:border-red-400 dark:enabled:hover:border-red-300 dark:enabled:active:border-red-200
|
||||
dark:text-red-950 dark:enabled:hover:text-red-950 dark:enabled:active:text-red-950
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
|
||||
focus-visible:outline-red-500 dark:focus-visible:outline-red-400
|
||||
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]
|
||||
p-outlined:bg-transparent enabled:hover:p-outlined:bg-red-50 enabled:active:p-outlined:bg-red-100
|
||||
p-outlined:border-red-200 enabled:hover:p-outlined:border-red-200 enabled:active:p-outlined:border-red-200
|
||||
p-outlined:text-red-500 enabled:hover:p-outlined:text-red-500 enabled:active:p-outlined:text-red-500
|
||||
dark:p-outlined:bg-transparent dark:enabled:hover:p-outlined:bg-red-400/5 dark:enabled:active:p-outlined:bg-red-400/15
|
||||
dark:p-outlined:border-red-700 dark:enabled:hover:p-outlined:border-red-700 dark:enabled:active:p-outlined:border-red-700
|
||||
dark:p-outlined:text-red-400 dark:enabled:hover:p-outlined:text-red-400 dark:enabled:active:p-outlined:text-red-400
|
||||
p-text:bg-transparent enabled:hover:p-text:bg-red-50 enabled:active:p-text:bg-red-100
|
||||
p-text:border-transparent enabled:hover:p-text:border-transparent enabled:active:p-text:border-transparent
|
||||
p-text:text-red-500 enabled:hover:p-text:text-red-500 enabled:active:p-text:text-red-500
|
||||
dark:p-text:bg-transparent dark:enabled:hover:p-text:bg-red-400/5 dark:enabled:active:p-text:bg-red-400/15
|
||||
dark:p-text:border-transparent dark:enabled:hover:p-text:border-transparent dark:enabled:active:p-text:border-transparent
|
||||
dark:p-text:text-red-400 dark:enabled:hover:p-text:text-red-400 dark:enabled:active:p-text:text-red-400
|
||||
`,
|
||||
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>
|
||||
|
|
@ -19,7 +19,7 @@ import { ptViewMerge } from '../utils';
|
|||
|
||||
const theme = ref({
|
||||
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
|
||||
px-3 py-2 gap-2 rounded-md disabled:pointer-events-none disabled:opacity-60 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
|
||||
|
|
@ -29,6 +29,18 @@ const theme = ref({
|
|||
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]
|
||||
p-outlined:bg-transparent enabled:hover:p-outlined:bg-primary-50 enabled:active:p-outlined:bg-primary-100
|
||||
p-outlined:border-primary-200 enabled:hover:p-outlined:border-primary-200 enabled:active:p-outlined:border-primary-200
|
||||
p-outlined:text-primary enabled:hover:p-outlined:text-primary enabled:active:p-outlined:text-primary
|
||||
dark:p-outlined:bg-transparent dark:enabled:hover:p-outlined:bg-primary/5 dark:enabled:active:p-outlined:bg-primary/15
|
||||
dark:p-outlined:border-primary-700 dark:enabled:hover:p-outlined:border-primary-700 dark:enabled:active:p-outlined:border-primary-700
|
||||
dark:p-outlined:text-primary dark:enabled:hover:p-outlined:text-primary dark:enabled:active:p-outlined:text-primary
|
||||
p-text:bg-transparent enabled:hover:p-text:bg-primary-50 enabled:active:p-text:bg-primary-100
|
||||
p-text:border-transparent enabled:hover:p-text:border-transparent enabled:active:p-text:border-transparent
|
||||
p-text:text-primary enabled:hover:p-text:text-primary enabled:active:p-text:text-primary
|
||||
dark:p-text:bg-transparent dark:enabled:hover:p-text:bg-primary/5 dark:enabled:active:p-text:bg-primary/15
|
||||
dark:p-text:border-transparent dark:enabled:hover:p-text:border-transparent dark:enabled:active:p-text:border-transparent
|
||||
dark:p-text:text-primary dark:enabled:hover:p-text:text-primary dark:enabled:active:p-text:text-primary
|
||||
`,
|
||||
loadingIcon: ``,
|
||||
icon: `p-right:order-1 p-bottom:order-2`,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<Button
|
||||
unstyled
|
||||
:pt="theme"
|
||||
:ptOptions="{
|
||||
mergeProps: ptViewMerge
|
||||
}"
|
||||
>
|
||||
<template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
|
||||
<slot :name="slotName" v-bind="slotProps ?? {}" />
|
||||
</template>
|
||||
</Button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from 'primevue/button';
|
||||
import { ref } from 'vue';
|
||||
import { ptViewMerge } from '../utils';
|
||||
|
||||
const theme = ref({
|
||||
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 disabled:opacity-60 transition-colors duration-200
|
||||
bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300
|
||||
border-surface-100 enabled:hover:border-surface-200 enabled:active:border-surface-300
|
||||
text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800
|
||||
dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600
|
||||
dark:border-surface-800 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-600
|
||||
dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100
|
||||
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
|
||||
focus-visible:outline-surface-600 dark:focus-visible:outline-surface-300
|
||||
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]
|
||||
p-outlined:bg-transparent enabled:hover:p-outlined:bg-surface-50 enabled:active:p-outlined:bg-surface-100
|
||||
p-outlined:border-surface-200 enabled:hover:p-outlined:border-surface-200 enabled:active:p-outlined:border-surface-200
|
||||
p-outlined:text-surface-500 enabled:hover:p-outlined:text-surface-500 enabled:active:p-outlined:text-surface-500
|
||||
dark:p-outlined:bg-transparent dark:enabled:hover:p-outlined:bg-white/5 dark:enabled:active:p-outlined:bg-white/15
|
||||
dark:p-outlined:border-surface-700 dark:enabled:hover:p-outlined:border-surface-700 dark:enabled:active:p-outlined:border-surface-700
|
||||
dark:p-outlined:text-surface-400 dark:enabled:hover:p-outlined:text-surface-400 dark:enabled:active:p-outlined:text-surface-400
|
||||
p-text:bg-transparent enabled:hover:p-text:bg-surface-50 enabled:active:p-text:bg-surface-100
|
||||
p-text:border-transparent enabled:hover:p-text:border-transparent enabled:active:p-text:border-transparent
|
||||
p-text:text-surface-500 enabled:hover:p-text:text-surface-500 enabled:active:p-text:text-surface-500
|
||||
dark:p-text:bg-transparent dark:enabled:hover:p-text:bg-surface-800 dark:enabled:active:p-text:bg-surface-700
|
||||
dark:p-text:border-transparent dark:enabled:hover:p-text:border-transparent dark:enabled:active:p-text:border-transparent
|
||||
dark:p-text:text-surface-400 dark:enabled:hover:p-text:text-surface-400 dark:enabled:active:p-text:text-surface-400
|
||||
`,
|
||||
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>
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
<input
|
||||
v-if="editable"
|
||||
ref="focusInput"
|
||||
:name="name"
|
||||
:id="labelId || inputId"
|
||||
type="text"
|
||||
:class="[cx('label'), inputClass, labelClass]"
|
||||
|
|
@ -29,6 +30,7 @@
|
|||
<span
|
||||
v-else
|
||||
ref="focusInput"
|
||||
:name="name"
|
||||
:id="labelId || inputId"
|
||||
:class="[cx('label'), inputClass, labelClass]"
|
||||
:style="[inputStyle, labelStyle]"
|
||||
|
|
|
|||
Loading…
Reference in New Issue