From 68a54c3728b6932f28887ecf939421fa88ec6502 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 5 Mar 2025 22:03:23 +0300
Subject: [PATCH] Implemented Tag for Volt

---
 apps/volt/assets/data/menu.json   |  4 +++
 apps/volt/doc/tag/BasicDoc.vue    | 26 +++++++++++++++++
 apps/volt/doc/tag/IconDoc.vue     | 38 +++++++++++++++++++++++++
 apps/volt/doc/tag/ImportDoc.vue   | 11 ++++++++
 apps/volt/doc/tag/PillDoc.vue     | 38 +++++++++++++++++++++++++
 apps/volt/doc/tag/SeverityDoc.vue | 38 +++++++++++++++++++++++++
 apps/volt/doc/tag/TemplateDoc.vue | 36 ++++++++++++++++++++++++
 apps/volt/pages/tag/index.vue     | 46 +++++++++++++++++++++++++++++++
 apps/volt/volt/tag/index.vue      | 31 +++++++++++++++++++++
 packages/primevue/src/tag/Tag.vue | 13 +++++++--
 10 files changed, 279 insertions(+), 2 deletions(-)
 create mode 100644 apps/volt/doc/tag/BasicDoc.vue
 create mode 100644 apps/volt/doc/tag/IconDoc.vue
 create mode 100644 apps/volt/doc/tag/ImportDoc.vue
 create mode 100644 apps/volt/doc/tag/PillDoc.vue
 create mode 100644 apps/volt/doc/tag/SeverityDoc.vue
 create mode 100644 apps/volt/doc/tag/TemplateDoc.vue
 create mode 100644 apps/volt/pages/tag/index.vue
 create mode 100644 apps/volt/volt/tag/index.vue

diff --git a/apps/volt/assets/data/menu.json b/apps/volt/assets/data/menu.json
index 9922a876a..169199d56 100644
--- a/apps/volt/assets/data/menu.json
+++ b/apps/volt/assets/data/menu.json
@@ -94,6 +94,10 @@
                     "name": "Slider",
                     "to": "/slider"
                 },
+                {
+                    "name": "Tag",
+                    "to": "/tag"
+                },
                 {
                     "name": "Textarea",
                     "to": "/textarea"
diff --git a/apps/volt/doc/tag/BasicDoc.vue b/apps/volt/doc/tag/BasicDoc.vue
new file mode 100644
index 000000000..49fe3fdd6
--- /dev/null
+++ b/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>
diff --git a/apps/volt/doc/tag/IconDoc.vue b/apps/volt/doc/tag/IconDoc.vue
new file mode 100644
index 000000000..3de28d94e
--- /dev/null
+++ b/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>
diff --git a/apps/volt/doc/tag/ImportDoc.vue b/apps/volt/doc/tag/ImportDoc.vue
new file mode 100644
index 000000000..5a88cde64
--- /dev/null
+++ b/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>
diff --git a/apps/volt/doc/tag/PillDoc.vue b/apps/volt/doc/tag/PillDoc.vue
new file mode 100644
index 000000000..80c9c6592
--- /dev/null
+++ b/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>
diff --git a/apps/volt/doc/tag/SeverityDoc.vue b/apps/volt/doc/tag/SeverityDoc.vue
new file mode 100644
index 000000000..ea7cb97b7
--- /dev/null
+++ b/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>
diff --git a/apps/volt/doc/tag/TemplateDoc.vue b/apps/volt/doc/tag/TemplateDoc.vue
new file mode 100644
index 000000000..5e33cd179
--- /dev/null
+++ b/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>
diff --git a/apps/volt/pages/tag/index.vue b/apps/volt/pages/tag/index.vue
new file mode 100644
index 000000000..ba6bc3d43
--- /dev/null
+++ b/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>
diff --git a/apps/volt/volt/tag/index.vue b/apps/volt/volt/tag/index.vue
new file mode 100644
index 000000000..37977f0d4
--- /dev/null
+++ b/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>
diff --git a/packages/primevue/src/tag/Tag.vue b/packages/primevue/src/tag/Tag.vue
index 56b0ea237..00ec5d00d 100644
--- a/packages/primevue/src/tag/Tag.vue
+++ b/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>