Implemented Badge for Volt
Cagatay Civici
parent
9f973837fb
commit
50b11b8d56
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Text to display is defined with the <i>value</i> property.</p>
|
||||
<p>Content to display is defined with the <i>value</i> property or the default slot.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<div class="card flex justify-center gap-2">
|
||||
<Badge value="2"></Badge>
|
||||
<Badge>10</Badge>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
@ -15,11 +16,13 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<Badge value="2"></Badge>
|
||||
<Badge>10</Badge>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<div class="card flex justify-center gap-2">
|
||||
<Badge value="2"></Badge>
|
||||
<Badge>10</Badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -29,8 +32,9 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<div class="card flex justify-center gap-2">
|
||||
<Badge value="2"></Badge>
|
||||
<Badge>10</Badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -26,6 +26,10 @@
|
|||
"name": "Avatar",
|
||||
"to": "/avatar"
|
||||
},
|
||||
{
|
||||
"name": "Badge",
|
||||
"to": "/badge"
|
||||
},
|
||||
{
|
||||
"name": "Button",
|
||||
"to": "/button"
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
@custom-variant p-readonly (&[data-p~="readonly"]);
|
||||
@custom-variant p-removable (&[data-p~="removable"]);
|
||||
@custom-variant p-circle (&[data-p~="circle"]);
|
||||
@custom-variant p-empty (&[data-p~="empty"]);
|
||||
@custom-variant p-determinate (&[data-p~="determinate"]);
|
||||
@custom-variant p-indeterminate (&[data-p~="indeterminate"]);
|
||||
@custom-variant p-icon-only (&[data-p~="icon-only"]);
|
||||
|
|
@ -43,4 +44,10 @@
|
|||
@custom-variant p-toggleable (&[data-p~="toggleable"]);
|
||||
@custom-variant p-solid (&[data-p~="solid"]);
|
||||
@custom-variant p-dashed (&[data-p~="dashed"]);
|
||||
@custom-variant p-dotted (&[data-p~="dotted"]);
|
||||
@custom-variant p-dotted (&[data-p~="dotted"]);
|
||||
@custom-variant p-secondary (&[data-p~="secondary"]);
|
||||
@custom-variant p-contrast (&[data-p~="contrast"]);
|
||||
@custom-variant p-success (&[data-p~="success"]);
|
||||
@custom-variant p-info (&[data-p~="info"]);
|
||||
@custom-variant p-warn (&[data-p~="warn"]);
|
||||
@custom-variant p-danger (&[data-p~="danger"]);
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Content to display is defined with the <i>value</i> property or the default slot.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center gap-2">
|
||||
<Badge value="2"></Badge>
|
||||
<Badge>10</Badge>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Badge from '@/volt/badge';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex justify-center gap-2">
|
||||
<Badge value="2"></Badge>
|
||||
<Badge>10</Badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Badge from '@/volt/badge';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Buttons have built-in badge support with the <i>badge</i> property.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center flex-wrap gap-4">
|
||||
<Button type="button" label="Emails" badge="2" />
|
||||
</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 flex-wrap gap-4">
|
||||
<Button type="button" label="Emails" badge="2" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from '@/volt/button';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" lang="script" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: `import Badge from '@/volt/badge';
|
||||
import OverlayBadge from '@/volt/overlaybadge';
|
||||
`
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>A badge can be added to any element by encapsulating the content with the <i>OverlayBadge</i> component.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap justify-center gap-6">
|
||||
<OverlayBadge value="2">
|
||||
<i class="pi pi-bell" style="font-size: 2rem" />
|
||||
</OverlayBadge>
|
||||
<OverlayBadge value="4" severity="danger">
|
||||
<i class="pi pi-calendar" style="font-size: 2rem" />
|
||||
</OverlayBadge>
|
||||
<OverlayBadge severity="danger">
|
||||
<i class="pi pi-envelope" style="font-size: 2rem" />
|
||||
</OverlayBadge>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import OverlayBadge from '@/volt/overlaybadge';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-center gap-6">
|
||||
<OverlayBadge value="2">
|
||||
<i class="pi pi-bell" style="font-size: 2rem" />
|
||||
</OverlayBadge>
|
||||
<OverlayBadge value="4" severity="danger">
|
||||
<i class="pi pi-calendar" style="font-size: 2rem" />
|
||||
</OverlayBadge>
|
||||
<OverlayBadge severity="danger">
|
||||
<i class="pi pi-envelope" style="font-size: 2rem" />
|
||||
</OverlayBadge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import OverlayBadge from '@/volt/overlaybadge';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Severity defines the variant of a badge.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap justify-center gap-2">
|
||||
<Badge value="2"></Badge>
|
||||
<Badge value="6" severity="secondary"></Badge>
|
||||
<Badge value="8" severity="success"></Badge>
|
||||
<Badge value="4" severity="info"></Badge>
|
||||
<Badge value="9" severity="warn"></Badge>
|
||||
<Badge value="3" severity="danger"></Badge>
|
||||
<Badge value="5" severity="contrast"></Badge>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Badge from '@/volt/badge';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-center gap-2">
|
||||
<Badge value="2"></Badge>
|
||||
<Badge value="6" severity="secondary"></Badge>
|
||||
<Badge value="8" severity="success"></Badge>
|
||||
<Badge value="4" severity="info"></Badge>
|
||||
<Badge value="9" severity="warn"></Badge>
|
||||
<Badge value="3" severity="danger"></Badge>
|
||||
<Badge value="5" severity="contrast"></Badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Badge from '@/volt/badge';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Use the <i>size</i> property to customize the dimensions of a Badge.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap justify-center items-end gap-2">
|
||||
<Badge value="8" size="xlarge" severity="success"></Badge>
|
||||
<Badge value="6" size="large" severity="warn"></Badge>
|
||||
<Badge value="4" severity="info"></Badge>
|
||||
<Badge value="2" size="small"></Badge>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Badge from '@/volt/badge';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-center items-end gap-2">
|
||||
<Badge value="8" size="xlarge" severity="success"></Badge>
|
||||
<Badge value="6" size="large" severity="warn"></Badge>
|
||||
<Badge value="4" severity="info"></Badge>
|
||||
<Badge value="2" size="small"></Badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Badge from '@/volt/badge';
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Buttons have built-in badge support with <i>badge</i> and <i>badgeSeverity</i> properties.</p>
|
||||
<p>Buttons have built-in badge support with the <i>badge</i> property.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center flex-wrap gap-4">
|
||||
<Button type="button" label="Emails" badge="2" />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<DocComponent title="Vue Badge Component" header="Badge" description="Badge is a small status indicator for another element." :componentDocs="docs" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import BasicDoc from '@/doc/badge/BasicDoc.vue';
|
||||
import ButtonDoc from '@/doc/badge/ButtonDoc.vue';
|
||||
import ImportDoc from '@/doc/badge/ImportDoc.vue';
|
||||
import OverlayDoc from '@/doc/badge/OverlayDoc.vue';
|
||||
import SeverityDoc from '@/doc/badge/SeverityDoc.vue';
|
||||
import SizeDoc from '@/doc/badge/SizeDoc.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const docs = ref([
|
||||
{
|
||||
id: 'import',
|
||||
label: 'Import',
|
||||
component: ImportDoc
|
||||
},
|
||||
{
|
||||
id: 'basic',
|
||||
label: 'Basic',
|
||||
component: BasicDoc
|
||||
},
|
||||
{
|
||||
id: 'severity',
|
||||
label: 'Severity',
|
||||
component: SeverityDoc
|
||||
},
|
||||
{
|
||||
id: 'size',
|
||||
label: 'Size',
|
||||
component: SizeDoc
|
||||
},
|
||||
{
|
||||
id: 'overlay',
|
||||
label: 'Overlay',
|
||||
component: OverlayDoc
|
||||
},
|
||||
{
|
||||
id: 'button',
|
||||
label: 'Button',
|
||||
component: ButtonDoc
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<Badge
|
||||
unstyled
|
||||
:pt="theme"
|
||||
:ptOptions="{
|
||||
mergeProps: ptViewMerge
|
||||
}"
|
||||
>
|
||||
<template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
|
||||
<slot :name="slotName" v-bind="slotProps ?? {}" />
|
||||
</template>
|
||||
</Badge>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Badge from 'primevue/badge';
|
||||
import { ref } from 'vue';
|
||||
import { ptViewMerge } from '../utils';
|
||||
|
||||
const theme = ref({
|
||||
root: `inline-flex items-center justify-center rounded-md
|
||||
py-0 px-2 text-xs font-bold min-w-6 h-6
|
||||
bg-primary text-primary-contrast
|
||||
p-empty:min-w-2 p-empty:h-2 p-empty:rounded-full p-empty:p-0
|
||||
p-circle:p-0 p-circle:rounded-full
|
||||
p-secondary:bg-surface-100 dark:p-secondary:bg-surface-800 p-secondary:text-surface-600 dark:p-secondary:text-surface-300
|
||||
p-success:bg-green-500 dark:p-success:bg-green-400 p-success:text-white dark:p-success:text-green-950
|
||||
p-info:bg-sky-500 dark:p-info:bg-sky-400 p-info:text-white dark:p-info:text-sky-950
|
||||
p-warn:bg-orange-500 dark:p-warn:bg-orange-400 p-warn:text-white dark:p-warn:text-orange-950
|
||||
p-danger:bg-red-500 dark:p-danger:bg-red-400 p-danger:text-white dark:p-danger:text-red-950
|
||||
p-contrast:bg-surface-950 dark:p-contrast:bg-white p-contrast:text-white dark:p-contrast:text-surface-950
|
||||
p-small:text-[0.625rem] p-small:min-w-5 p-small:h-5
|
||||
p-large:text-sm p-large:min-w-7 p-large:h-7
|
||||
p-xlarge:text-base p-xlarge:min-w-8 p-xlarge:h-8`
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<div class="relative">
|
||||
<slot />
|
||||
<Badge v-bind="$attrs" class="absolute top-0 end-0 translate-x-[50%] translate-y-[-50%] origin-[100%_0] m-0 outline-2 outline-surface-0 dark:outline-surface-900" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Badge from '../badge';
|
||||
|
||||
defineOptions({
|
||||
inheritAttrs: false
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,15 +1,26 @@
|
|||
<template>
|
||||
<span :class="cx('root')" v-bind="ptmi('root')">
|
||||
<span :class="cx('root')" :data-p="dataP" data-badge v-bind="ptmi('root')">
|
||||
<slot>{{ value }}</slot>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { cn } from '@primeuix/utils';
|
||||
import BaseBadge from './BaseBadge.vue';
|
||||
|
||||
export default {
|
||||
name: 'Badge',
|
||||
extends: BaseBadge,
|
||||
inheritAttrs: false
|
||||
inheritAttrs: false,
|
||||
computed: {
|
||||
dataP() {
|
||||
return cn({
|
||||
circle: this.value != null && String(this.value).length === 1,
|
||||
empty: this.value == null && !this.$slots.default,
|
||||
[this.severity]: this.severity,
|
||||
[this.size]: this.size
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue