Implemented Tag for Volt

apps/volt/assets/data/menu.json

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

apps/volt/doc/tag/BasicDoc.vue

@@ -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>

apps/volt/doc/tag/IconDoc.vue

@@ -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>

apps/volt/doc/tag/ImportDoc.vue

@@ -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>

apps/volt/doc/tag/PillDoc.vue

@@ -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>

apps/volt/doc/tag/SeverityDoc.vue

@@ -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>

apps/volt/doc/tag/TemplateDoc.vue

@@ -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>

apps/volt/pages/tag/index.vue

@@ -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>

apps/volt/volt/tag/index.vue

@@ -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>

packages/primevue/src/tag/Tag.vue

@@ -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>