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

Implemented Tag for Volt

pull/7377/head
Cagatay Civici 2025-03-05 22:03:23 +03:00
parent 6bcfeeb142
commit 68a54c3728
10 changed files with 279 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/volt/assets/data/menu.json
View File

@ -94,6 +94,10 @@
"name": "Slider",
"to": "/slider"
},
{
"name": "Tag",
"to": "/tag"
},
{
"name": "Textarea",
"to": "/textarea"

26
apps/volt/doc/tag/BasicDoc.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Label of the tag is defined with the <i>value</i> property.</p>
</DocSectionText>
<div class="card flex justify-center">
<Tag value="New"></Tag>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Tag from '@/volt/tag';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex justify-center">
<Tag value="New"></Tag>
</div>
</template>
<script setup>
import Tag from '@/volt/tag';
<\/script>
`);
</script>

38
apps/volt/doc/tag/IconDoc.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<DocSectionText v-bind="$attrs">
<p>A font icon next to the value can be displayed with the <i>icon</i> property.</p>
</DocSectionText>
<div class="card flex flex-wrap justify-center gap-2">
<Tag icon="pi pi-user" value="Primary"></Tag>
<Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
<Tag icon="pi pi-check" severity="success" value="Success"></Tag>
<Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
<Tag icon="pi pi-exclamation-triangle" severity="warn" value="Warn"></Tag>
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
<Tag icon="pi pi-cog" severity="contrast" value="Contrast"></Tag>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Tag from '@/volt/tag';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex flex-wrap justify-center gap-2">
<Tag icon="pi pi-user" value="Primary"></Tag>
<Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
<Tag icon="pi pi-check" severity="success" value="Success"></Tag>
<Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
<Tag icon="pi pi-exclamation-triangle" severity="warn" value="Warn"></Tag>
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
<Tag icon="pi pi-cog" severity="contrast" value="Contrast"></Tag>
</div>
</template>
<script setup>
import Tag from '@/volt/tag';
<\/script>
`);
</script>

11
apps/volt/doc/tag/ImportDoc.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" lang="script" />
</template>
<script setup>
import { ref } from 'vue';
const code = ref(`import Tag from '@/volt/tag';
`);
</script>

38
apps/volt/doc/tag/PillDoc.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Enabling <i>rounded</i>, displays a tag as a pill.</p>
</DocSectionText>
<div class="card flex flex-wrap justify-center gap-2">
<Tag value="Primary" rounded></Tag>
<Tag severity="secondary" value="Secondary" rounded></Tag>
<Tag severity="success" value="Success" rounded></Tag>
<Tag severity="info" value="Info" rounded></Tag>
<Tag severity="warn" value="Warn" rounded></Tag>
<Tag severity="danger" value="Danger" rounded></Tag>
<Tag severity="contrast" value="Contrast" rounded></Tag>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Tag from '@/volt/tag';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex flex-wrap justify-center gap-2">
<Tag value="Primary" rounded></Tag>
<Tag severity="secondary" value="Secondary" rounded></Tag>
<Tag severity="success" value="Success" rounded></Tag>
<Tag severity="info" value="Info" rounded></Tag>
<Tag severity="warn" value="Warn" rounded></Tag>
<Tag severity="danger" value="Danger" rounded></Tag>
<Tag severity="contrast" value="Contrast" rounded></Tag>
</div>
</template>
<script setup>
import Tag from '@/volt/tag';
<\/script>
`);
</script>

38
apps/volt/doc/tag/SeverityDoc.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Severity defines the variant of a tag.</p>
</DocSectionText>
<div class="card flex flex-wrap justify-center gap-2">
<Tag value="Primary"></Tag>
<Tag severity="secondary" value="Secondary"></Tag>
<Tag severity="success" value="Success"></Tag>
<Tag severity="info" value="Info"></Tag>
<Tag severity="warn" value="Warn"></Tag>
<Tag severity="danger" value="Danger"></Tag>
<Tag severity="contrast" value="Contrast"></Tag>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Tag from '@/volt/tag';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex flex-wrap justify-center gap-2">
<Tag value="Primary"></Tag>
<Tag severity="secondary" value="Secondary"></Tag>
<Tag severity="success" value="Success"></Tag>
<Tag severity="info" value="Info"></Tag>
<Tag severity="warn" value="Warn"></Tag>
<Tag severity="danger" value="Danger"></Tag>
<Tag severity="contrast" value="Contrast"></Tag>
</div>
</template>
<script setup>
import Tag from '@/volt/tag';
<\/script>
`);
</script>

36
apps/volt/doc/tag/TemplateDoc.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Children of the component are passed as the content for templating.</p>
</DocSectionText>
<div class="card flex justify-center">
<Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
<div class="flex items-center gap-2 px-1">
<img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
<span class="text-base">Italy</span>
</div>
</Tag>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Tag from '@/volt/tag';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex justify-center">
<Tag style="border: 2px solid var(--border-color); background: transparent; color: var(--text-color)">
<div class="flex items-center gap-2 px-1">
<img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
<span class="text-base">Italy</span>
</div>
</Tag>
</div>
</template>
<script setup>
import Tag from '@/volt/tag';
<\/script>
`);
</script>

46
apps/volt/pages/tag/index.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<DocComponent title="Vue Tag Component" header="Tag" description="Tag component is used to categorize content." :componentDocs="docs" />
</template>
<script setup>
import BasicDoc from '@/doc/tag/BasicDoc.vue';
import IconDoc from '@/doc/tag/IconDoc.vue';
import ImportDoc from '@/doc/tag/ImportDoc.vue';
import PillDoc from '@/doc/tag/PillDoc.vue';
import SeverityDoc from '@/doc/tag/SeverityDoc.vue';
import TemplateDoc from '@/doc/tag/TemplateDoc.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: 'pill',
label: 'Pill',
component: PillDoc
},
{
id: 'icons',
label: 'Icon',
component: IconDoc
},
{
id: 'template',
label: 'Template',
component: TemplateDoc
}
]);
</script>

31
apps/volt/volt/tag/index.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<Tag
unstyled
:pt="theme"
:ptOptions="{
mergeProps: ptViewMerge
}"
>
<template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
<slot :name="slotName" v-bind="slotProps ?? {}" />
</template>
</Tag>
</template>
<script setup>
import Tag from 'primevue/tag';
import { ref } from 'vue';
import { ptViewMerge } from '../utils';
const theme = ref({
root: `inline-flex items-center justify-center text-sm font-bold py-1 px-2 rounded-md gap-1 p-rounded:rounded-2xl
bg-primary-100 dark:bg-primary-500/15 text-primary-700 dark:text-primary-300
p-success:bg-green-100 dark:p-success:bg-green-500/15 p-success:text-green-700 dark:p-success:text-green-300
p-info:bg-sky-100 dark:p-info:bg-sky-500/15 p-info:text-sky-700 dark:p-info:text-sky-300
p-warn:bg-orange-100 dark:p-warn:bg-orange-500/15 p-warn:text-orange-700 dark:p-warn:text-orange-300
p-danger:bg-red-100 dark:p-danger:bg-red-500/15 p-danger:text-red-700 dark:p-danger:text-red-300
p-secondary:bg-surface-100 dark:p-secondary:bg-surface-800 p-secondary:text-surface-600 dark:p-secondary:text-surface-300
p-contrast:bg-surface-950 dark:p-contrast:bg-surface-0 p-contrast:text-surface-0 dark:p-contrast:text-surface-950`,
icon: `text-xs w-3 h-3`
});
</script>

13
packages/primevue/src/tag/Tag.vue
View File

@ -1,5 +1,5 @@
<template>
<span :class="cx('root')" v-bind="ptmi('root')">
<span :class="cx('root')" :data-p="dataP" v-bind="ptmi('root')">
<component v-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" v-bind="ptm('icon')" />
<span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></span>
<slot v-if="value != null || $slots.default">
@ -9,11 +9,20 @@
</template>
<script>
import { cn } from '@primeuix/utils';
import BaseTag from './BaseTag.vue';
export default {
name: 'Tag',
extends: BaseTag,
inheritAttrs: false
inheritAttrs: false,
computed: {
dataP() {
return cn({
rounded: this.rounded,
[this.severity]: this.severity
});
}
}
};
</script>