From d3d66c1050a41b058f1b3ed6bbfe23f763d49dbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 14 Dec 2020 16:16:39 +0300
Subject: [PATCH] Fix #779 - Tag Component

---
 exports/tag.d.ts            |   1 +
 exports/tag.js              |   2 +
 src/AppMenu.vue             |   1 +
 src/components/tag/Tag.d.ts |  10 +++
 src/components/tag/Tag.vue  |  49 ++++++++++++
 src/main.js                 |   2 +
 src/router.js               |   7 +-
 src/views/tag/TagDemo.vue   |  46 ++++++++++++
 src/views/tag/TagDoc.vue    | 145 ++++++++++++++++++++++++++++++++++++
 9 files changed, 262 insertions(+), 1 deletion(-)
 create mode 100644 exports/tag.d.ts
 create mode 100644 exports/tag.js
 create mode 100644 src/components/tag/Tag.d.ts
 create mode 100644 src/components/tag/Tag.vue
 create mode 100644 src/views/tag/TagDemo.vue
 create mode 100644 src/views/tag/TagDoc.vue

diff --git a/exports/tag.d.ts b/exports/tag.d.ts
new file mode 100644
index 0000000000..de094f9cc6
--- /dev/null
+++ b/exports/tag.d.ts
@@ -0,0 +1 @@
+export * from './components/tag/Tag';
\ No newline at end of file
diff --git a/exports/tag.js b/exports/tag.js
new file mode 100644
index 0000000000..7b0154d223
--- /dev/null
+++ b/exports/tag.js
@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/tag/Tag.vue');
\ No newline at end of file
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 53b534cf01..ea4ecc7bb1 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -254,6 +254,7 @@
                 <router-link to="/progressbar">ProgressBar</router-link>
                 <router-link to="/progressspinner">ProgressSpinner</router-link>
                 <router-link to="/ripple">Ripple</router-link>
+                <router-link to="/tag">Tag <Tag value="New"></Tag></router-link>
                 <router-link to="/terminal">Terminal</router-link>
             </div>
         </div>
diff --git a/src/components/tag/Tag.d.ts b/src/components/tag/Tag.d.ts
new file mode 100644
index 0000000000..c322eab3b2
--- /dev/null
+++ b/src/components/tag/Tag.d.ts
@@ -0,0 +1,10 @@
+import Vue from 'vue';
+
+declare class Tag extends Vue {
+    value?: any;
+    severity?: string;
+    rounded?: boolean;
+    icon?: string;
+}
+
+export default Tag;
\ No newline at end of file
diff --git a/src/components/tag/Tag.vue b/src/components/tag/Tag.vue
new file mode 100644
index 0000000000..1ede3e8c13
--- /dev/null
+++ b/src/components/tag/Tag.vue
@@ -0,0 +1,49 @@
+<template>
+    <span :class="containerClass">
+        <slot>
+            <span :class="iconClass" v-if="icon"></span>
+            <span class="p-tag-value">{{value}}</span>
+        </slot>
+    </span>
+</template>
+
+<script>
+export default {
+    props: {
+        value: null,
+        severity: null,
+        rounded: Boolean,
+        icon: String
+    },
+    computed: {
+        containerClass() {
+            return ['p-tag p-component', {
+                'p-tag-info': this.severity === 'info',
+                'p-tag-success': this.severity === 'success',
+                'p-tag-warning': this.severity === 'warning',
+                'p-tag-danger': this.severity === 'danger',
+                'p-tag-rounded': this.rounded
+            }];
+        },
+        iconClass() {
+            return ['p-tag-icon', this.icon];
+        }
+    }
+}
+</script>
+
+<style>
+.p-tag {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+.p-tag-icon,
+.p-tag-value,
+.p-tag-icon.pi {
+    line-height: 1.5;
+}
+.p-tag.p-tag-rounded {
+    border-radius: 10rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 2c4e864eea..cb2ff88290 100644
--- a/src/main.js
+++ b/src/main.js
@@ -62,6 +62,7 @@ import Steps from './components/steps/Steps';
 import TabMenu from './components/tabmenu/TabMenu';
 import TabView from './components/tabview/TabView';
 import TabPanel from './components/tabpanel/TabPanel';
+import Tag from './components/tag/Tag';
 import Terminal from './components/terminal/Terminal';
 import Textarea from './components/textarea/Textarea';
 import TieredMenu from './components/tieredmenu/TieredMenu';
@@ -156,6 +157,7 @@ Vue.component('Steps', Steps);
 Vue.component('TabView', TabView);
 Vue.component('TabPanel', TabPanel);
 Vue.component('TabMenu', TabMenu);
+Vue.component('Tag', Tag);
 Vue.component('Terminal', Terminal);
 Vue.component('Textarea', Textarea);
 Vue.component('TieredMenu', TieredMenu);
diff --git a/src/router.js b/src/router.js
index 759fb36c75..0e7802b90b 100755
--- a/src/router.js
+++ b/src/router.js
@@ -559,7 +559,12 @@ export default new Router({
 			path: '/tabview',
 			name: 'tabview',
 			component: () => import('./views/tabview/TabViewDemo.vue')
-        },
+		},
+		{
+			path: '/tag',
+			name: 'tag',
+			component: () => import('./views/tag/TagDemo.vue')
+		},
         {
 			path: '/text',
 			name: 'text',
diff --git a/src/views/tag/TagDemo.vue b/src/views/tag/TagDemo.vue
new file mode 100644
index 0000000000..8a46a8bb13
--- /dev/null
+++ b/src/views/tag/TagDemo.vue
@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Tag</h1>
+                <p>Tag component is used to categorize content.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Tags</h5>
+                <Tag class="p-mr-2" value="Primary"></Tag>
+                <Tag class="p-mr-2" severity="success" value="Success"></Tag>
+                <Tag class="p-mr-2" severity="info" value="Info"></Tag>
+                <Tag class="p-mr-2" severity="warning" value="Warning"></Tag>
+                <Tag severity="danger" value="Danger"></Tag>
+
+                <h5>Pills</h5>
+                <Tag class="p-mr-2" value="Primary" rounded></Tag>
+                <Tag class="p-mr-2" severity="success" value="Success" rounded></Tag>
+                <Tag class="p-mr-2" severity="info" value="Info" rounded></Tag>
+                <Tag class="p-mr-2" severity="warning" value="Warning" rounded></Tag>
+                <Tag severity="danger" value="Danger" rounded></Tag>
+
+                <h5>Icons</h5>
+                <Tag class="p-mr-2" icon="pi pi-user" value="Primary"></Tag>
+                <Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
+                <Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
+                <Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
+                <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+            </div>
+        </div>
+
+        <TagDoc />
+    </div>
+</template>
+
+<script>
+import TagDoc from './TagDoc';
+export default {
+	components: {
+		'TagDoc': TagDoc
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/tag/TagDoc.vue b/src/views/tag/TagDoc.vue
new file mode 100644
index 0000000000..d5b9063920
--- /dev/null
+++ b/src/views/tag/TagDoc.vue
@@ -0,0 +1,145 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+                <h5>Import</h5>
+<CodeHighlight lang="javascript">
+import Tag from 'primevue/tag';
+</CodeHighlight>
+
+				<h5>Getting Started</h5>
+				<p>Content of the tag is specified using the <i>value</i> property.</p>
+<CodeHighlight>
+&lt;Tag value="New"&gt;&lt;/Tag&gt;
+</CodeHighlight>
+
+				<h5>Icon</h5>
+				<p>An icon can also be configured to be displayed next to the value with the <i>icon</i> property.</p>
+<CodeHighlight>
+&lt;Tag value="New" icon="pi pi-plus"&gt;&lt;/Tag&gt;
+</CodeHighlight>
+
+                <h5>Severities</h5>
+                <p>Different color options are available as severity levels.</p>
+
+				<ul>
+					<li>success</li>
+					<li>info</li>
+					<li>warning</li>
+					<li>danger</li>
+				</ul>
+
+				<h5>Templating</h5>
+				<p>Content can easily be customized with the default slot instead of using the built-in display.</p>
+<CodeHighlight>
+&lt;Tag&gt;
+   Content
+&lt;/Tag&gt;
+</CodeHighlight>
+
+				<h5>Properties</h5>
+				<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>value</td>
+                                <td>any</td>
+                                <td>null</td>
+                                <td>Value to display inside the tag.</td>
+                            </tr>
+							<tr>
+                                <td>severity</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Severity type of the tag.</td>
+                            </tr>
+							<tr>
+                                <td>rounded</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Whether the corners of the tag are rounded.</td>
+                            </tr>
+							<tr>
+                                <td>icon</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Icon of the tag to display next to the value.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Styling</h5>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+						<tr>
+							<th>Name</th>
+							<th>Element</th>
+						</tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>p-tag</td>
+                                <td>Tag element</td>
+                            </tr>
+                            <tr>
+                                <td>p-tag-rounded</td>
+                                <td>Rounded element</td>
+                            </tr>
+                            <tr>
+                                <td>p-tag-icon</td>
+                                <td>Icon of the tag</td>
+                            </tr>
+                            <tr>
+                                <td>p-tag-value</td>
+                                <td>Value of the tag</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Dependencies</h5>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/tag" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+&lt;h5&gt;Tags&lt;/h5&gt;
+&lt;Tag class="p-mr-2" value="Primary"&gt;&lt;/Tag&gt;
+&lt;Tag class="p-mr-2" severity="success" value="Success"&gt;&lt;/Tag&gt;
+&lt;Tag class="p-mr-2" severity="info" value="Info"&gt;&lt;/Tag&gt;
+&lt;Tag class="p-mr-2" severity="warning" value="Warning"&gt;&lt;/Tag&gt;
+&lt;Tag severity="danger" value="Danger"&gt;&lt;/Tag&gt;
+
+&lt;h5&gt;Pills&lt;/h5&gt;
+&lt;Tag class="p-mr-2" value="Primary" rounded&gt;&lt;/Tag&gt;
+&lt;Tag class="p-mr-2" severity="success" value="Success" rounded&gt;&lt;/Tag&gt;
+&lt;Tag class="p-mr-2" severity="info" value="Info" rounded&gt;&lt;/Tag&gt;
+&lt;Tag class="p-mr-2" severity="warning" value="Warning" rounded&gt;&lt;/Tag&gt;
+&lt;Tag severity="danger" value="Danger" rounded&gt;&lt;/Tag&gt;
+
+&lt;h5&gt;Icons&lt;/h5&gt;
+&lt;Tag class="p-mr-2" icon="pi pi-user" value="Primary"&gt;&lt;/Tag&gt;
+&lt;Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"&gt;&lt;/Tag&gt;
+&lt;Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"&gt;&lt;/Tag&gt;
+&lt;Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"&gt;&lt;/Tag&gt;
+&lt;Tag icon="pi pi-times" severity="danger" value="Danger"&gt;&lt;/Tag&gt;
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
\ No newline at end of file