Fixed #717 - Tag Component

exports/tag.d.ts

@@ -0,0 +1 @@
+export * from './components/tag/Tag';

exports/tag.js

@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/tag/Tag.vue');

public/themes/saga-blue/theme.css

@@ -4283,15 +4283,6 @@
   background-color: rgba(0, 0, 0, 0.9);
 }
 
-.p-avatar {
-  background-color: #dee2e6;
-  border-radius: 3px;
-}
-
-.p-avatar-group .p-avatar {
-  border: 2px solid #ffffff;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
@@ -4338,6 +4329,15 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-avatar {
+  background-color: #dee2e6;
+  border-radius: 3px;
+}
+
+.p-avatar-group .p-avatar {
+  border: 2px solid #ffffff;
+}
+
 .p-badge {
   background: #2196F3;
   color: #ffffff;
@@ -4380,31 +4380,6 @@
   line-height: 3rem;
 }
 
-.p-tag {
-  background: #2196F3;
-  color: #ffffff;
-  font-size: 0.75rem;
-  font-weight: 700;
-  padding: 0.25rem 0.4rem;
-  border-radius: 3px;
-}
-.p-tag.p-tag-success {
-  background-color: #689F38;
-  color: #ffffff;
-}
-.p-tag.p-tag-info {
-  background-color: #0288D1;
-  color: #ffffff;
-}
-.p-tag.p-tag-warning {
-  background-color: #FBC02D;
-  color: #212529;
-}
-.p-tag.p-tag-danger {
-  background-color: #D32F2F;
-  color: #ffffff;
-}
-
 .p-divider .p-divider-content {
   background-color: #ffffff;
 }
@@ -4429,6 +4404,35 @@
   padding: 0.5rem 0;
 }
 
+.p-tag {
+  background: #2196F3;
+  color: #ffffff;
+  font-size: 0.75rem;
+  font-weight: 700;
+  padding: 0.25rem 0.4rem;
+  border-radius: 3px;
+}
+.p-tag.p-tag-success {
+  background-color: #689F38;
+  color: #ffffff;
+}
+.p-tag.p-tag-info {
+  background-color: #0288D1;
+  color: #ffffff;
+}
+.p-tag.p-tag-warning {
+  background-color: #FBC02D;
+  color: #212529;
+}
+.p-tag.p-tag-danger {
+  background-color: #D32F2F;
+  color: #ffffff;
+}
+.p-tag .p-tag-icon {
+  margin-right: 0.25rem;
+  font-size: 0.75rem;
+}
+
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
   background-color: #2196F3;

public/themes/saga-green/theme.css

@@ -4283,15 +4283,6 @@
   background-color: rgba(0, 0, 0, 0.9);
 }
 
-.p-avatar {
-  background-color: #dee2e6;
-  border-radius: 3px;
-}
-
-.p-avatar-group .p-avatar {
-  border: 2px solid #ffffff;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
@@ -4338,6 +4329,15 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-avatar {
+  background-color: #dee2e6;
+  border-radius: 3px;
+}
+
+.p-avatar-group .p-avatar {
+  border: 2px solid #ffffff;
+}
+
 .p-badge {
   background: #4CAF50;
   color: #ffffff;
@@ -4380,31 +4380,6 @@
   line-height: 3rem;
 }
 
-.p-tag {
-  background: #4CAF50;
-  color: #ffffff;
-  font-size: 0.75rem;
-  font-weight: 700;
-  padding: 0.25rem 0.4rem;
-  border-radius: 3px;
-}
-.p-tag.p-tag-success {
-  background-color: #689F38;
-  color: #ffffff;
-}
-.p-tag.p-tag-info {
-  background-color: #0288D1;
-  color: #ffffff;
-}
-.p-tag.p-tag-warning {
-  background-color: #FBC02D;
-  color: #212529;
-}
-.p-tag.p-tag-danger {
-  background-color: #D32F2F;
-  color: #ffffff;
-}
-
 .p-divider .p-divider-content {
   background-color: #ffffff;
 }
@@ -4429,6 +4404,35 @@
   padding: 0.5rem 0;
 }
 
+.p-tag {
+  background: #4CAF50;
+  color: #ffffff;
+  font-size: 0.75rem;
+  font-weight: 700;
+  padding: 0.25rem 0.4rem;
+  border-radius: 3px;
+}
+.p-tag.p-tag-success {
+  background-color: #689F38;
+  color: #ffffff;
+}
+.p-tag.p-tag-info {
+  background-color: #0288D1;
+  color: #ffffff;
+}
+.p-tag.p-tag-warning {
+  background-color: #FBC02D;
+  color: #212529;
+}
+.p-tag.p-tag-danger {
+  background-color: #D32F2F;
+  color: #ffffff;
+}
+.p-tag .p-tag-icon {
+  margin-right: 0.25rem;
+  font-size: 0.75rem;
+}
+
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
   background-color: #4CAF50;

public/themes/saga-orange/theme.css

@@ -4283,15 +4283,6 @@
   background-color: rgba(0, 0, 0, 0.9);
 }
 
-.p-avatar {
-  background-color: #dee2e6;
-  border-radius: 3px;
-}
-
-.p-avatar-group .p-avatar {
-  border: 2px solid #ffffff;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
@@ -4338,6 +4329,15 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-avatar {
+  background-color: #dee2e6;
+  border-radius: 3px;
+}
+
+.p-avatar-group .p-avatar {
+  border: 2px solid #ffffff;
+}
+
 .p-badge {
   background: #FFC107;
   color: #212529;
@@ -4380,31 +4380,6 @@
   line-height: 3rem;
 }
 
-.p-tag {
-  background: #FFC107;
-  color: #212529;
-  font-size: 0.75rem;
-  font-weight: 700;
-  padding: 0.25rem 0.4rem;
-  border-radius: 3px;
-}
-.p-tag.p-tag-success {
-  background-color: #689F38;
-  color: #ffffff;
-}
-.p-tag.p-tag-info {
-  background-color: #0288D1;
-  color: #ffffff;
-}
-.p-tag.p-tag-warning {
-  background-color: #FBC02D;
-  color: #212529;
-}
-.p-tag.p-tag-danger {
-  background-color: #D32F2F;
-  color: #ffffff;
-}
-
 .p-divider .p-divider-content {
   background-color: #ffffff;
 }
@@ -4429,6 +4404,35 @@
   padding: 0.5rem 0;
 }
 
+.p-tag {
+  background: #FFC107;
+  color: #212529;
+  font-size: 0.75rem;
+  font-weight: 700;
+  padding: 0.25rem 0.4rem;
+  border-radius: 3px;
+}
+.p-tag.p-tag-success {
+  background-color: #689F38;
+  color: #ffffff;
+}
+.p-tag.p-tag-info {
+  background-color: #0288D1;
+  color: #ffffff;
+}
+.p-tag.p-tag-warning {
+  background-color: #FBC02D;
+  color: #212529;
+}
+.p-tag.p-tag-danger {
+  background-color: #D32F2F;
+  color: #ffffff;
+}
+.p-tag .p-tag-icon {
+  margin-right: 0.25rem;
+  font-size: 0.75rem;
+}
+
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
   background-color: #FFC107;

public/themes/saga-purple/theme.css

@@ -4283,15 +4283,6 @@
   background-color: rgba(0, 0, 0, 0.9);
 }
 
-.p-avatar {
-  background-color: #dee2e6;
-  border-radius: 3px;
-}
-
-.p-avatar-group .p-avatar {
-  border: 2px solid #ffffff;
-}
-
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
@@ -4338,6 +4329,15 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-avatar {
+  background-color: #dee2e6;
+  border-radius: 3px;
+}
+
+.p-avatar-group .p-avatar {
+  border: 2px solid #ffffff;
+}
+
 .p-badge {
   background: #9C27B0;
   color: #ffffff;
@@ -4380,31 +4380,6 @@
   line-height: 3rem;
 }
 
-.p-tag {
-  background: #9C27B0;
-  color: #ffffff;
-  font-size: 0.75rem;
-  font-weight: 700;
-  padding: 0.25rem 0.4rem;
-  border-radius: 3px;
-}
-.p-tag.p-tag-success {
-  background-color: #689F38;
-  color: #ffffff;
-}
-.p-tag.p-tag-info {
-  background-color: #0288D1;
-  color: #ffffff;
-}
-.p-tag.p-tag-warning {
-  background-color: #FBC02D;
-  color: #212529;
-}
-.p-tag.p-tag-danger {
-  background-color: #D32F2F;
-  color: #ffffff;
-}
-
 .p-divider .p-divider-content {
   background-color: #ffffff;
 }
@@ -4429,6 +4404,35 @@
   padding: 0.5rem 0;
 }
 
+.p-tag {
+  background: #9C27B0;
+  color: #ffffff;
+  font-size: 0.75rem;
+  font-weight: 700;
+  padding: 0.25rem 0.4rem;
+  border-radius: 3px;
+}
+.p-tag.p-tag-success {
+  background-color: #689F38;
+  color: #ffffff;
+}
+.p-tag.p-tag-info {
+  background-color: #0288D1;
+  color: #ffffff;
+}
+.p-tag.p-tag-warning {
+  background-color: #FBC02D;
+  color: #212529;
+}
+.p-tag.p-tag-danger {
+  background-color: #D32F2F;
+  color: #ffffff;
+}
+.p-tag .p-tag-icon {
+  margin-right: 0.25rem;
+  font-size: 0.75rem;
+}
+
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
   background-color: #9C27B0;

src/AppMenu.vue

@@ -249,13 +249,14 @@
             <div class="menu-category">Misc</div>
             <div class="menu-items">
                 <router-link to="/avatar">Avatar <span class="p-tag">New</span></router-link>
-                <router-link to="/badge">Badge</router-link>
+                <router-link to="/badge">Badge <span class="p-tag">New</span></router-link>
                 <router-link to="/blockui">BlockUI</router-link>
                 <router-link to="/divider">Divider <span class="p-tag">New</span></router-link>
                 <router-link to="/inplace">Inplace</router-link>
                 <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 <span class="p-tag">tag</span></router-link>
                 <router-link to="/terminal">Terminal</router-link>
             </div>
         </div>

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;

src/components/tag/Tag.vue

@@ -0,0 +1,51 @@
+<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>

src/main.js

@@ -70,6 +70,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';
@@ -179,6 +180,7 @@ app.component('Steps', Steps);
 app.component('TabView', TabView);
 app.component('TabPanel', TabPanel);
 app.component('TabMenu', TabMenu);
+app.component('Tag', Tag);
 app.component('Terminal', Terminal);
 app.component('Textarea', Textarea);
 app.component('TieredMenu', TieredMenu);

src/router/index.js

@@ -576,6 +576,11 @@ const routes = [
         name: 'tabview',
         component: () => import('../views/tabview/TabViewDemo.vue')
     },
+    {
+        path: '/tag',
+        name: 'tag',
+        component: () => import('../views/tag/TagDemo.vue')
+    },
     {
         path: '/text',
         name: 'text',

src/views/tag/TagDemo.vue

@@ -0,0 +1,47 @@
+<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>

src/views/tag/TagDoc.vue

@@ -0,0 +1,104 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+                <h5>Import</h5>
+<pre v-code.script>
+<code>
+import Tag from 'primevue/tag';
+
+</code></pre>
+
+				<h5>Getting Started</h5>
+				<p>Content of the tag is specified using the <i>value</i> property.</p>
+<pre v-code>
+<code>
+&lt;Tag value="New"&gt;&lt;/Tag&gt;
+
+</code></pre>
+
+				<h5>Icon</h5>
+				<p>An icon can also be configured to be displayed next to the value with the <i>icon</i> property.</p>
+<pre v-code>
+<code>
+&lt;Tag value="New" icon="pi pi-plus"&gt;&lt;/Tag&gt;
+
+</code></pre>
+
+                <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>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>
+<pre v-code>
+<code><template v-pre>
+&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;
+</template>
+</code></pre>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>