From e60d94fb3c0e28ac84610d9e5f6baa53effe31f9 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sat, 9 May 2020 02:19:35 +0300
Subject: [PATCH] Drop-in of badge

---
 public/themes/saga-blue/theme.css       |  51 ++++++++++
 public/themes/saga-cyan/theme.css       |  51 ++++++++++
 public/themes/saga-deeppurple/theme.css |  51 ++++++++++
 public/themes/saga-green/theme.css      |  51 ++++++++++
 public/themes/saga-indigo/theme.css     |  51 ++++++++++
 public/themes/saga-orange/theme.css     |  51 ++++++++++
 public/themes/saga-purple/theme.css     |  51 ++++++++++
 public/themes/saga-teal/theme.css       |  51 ++++++++++
 src/AppMenu.vue                         |   1 +
 src/assets/styles/app.scss              |   4 +-
 src/assets/styles/primevue.css          |   1 +
 src/components/badge/Badge.css          |  27 +++++
 src/router.js                           |   5 +
 src/views/badge/BadgeDemo.vue           |  91 +++++++++++++++++
 src/views/badge/BadgeDoc.vue            | 128 ++++++++++++++++++++++++
 15 files changed, 662 insertions(+), 3 deletions(-)
 create mode 100644 src/components/badge/Badge.css
 create mode 100644 src/views/badge/BadgeDemo.vue
 create mode 100644 src/views/badge/BadgeDoc.vue

diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index b9679dde3..9e09b88cd 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -3403,4 +3403,55 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-badge {
+  background: #2196F3;
+  color: #ffffff;
+  font-size: 0.75em;
+  font-weight: 700;
+  min-width: 2em;
+  height: 2em;
+  line-height: 2em;
+}
+.p-badge.p-badge-success {
+  background-color: #689F38;
+  color: #ffffff;
+}
+.p-badge.p-badge-info {
+  background-color: #0288D1;
+  color: #ffffff;
+}
+.p-badge.p-badge-warning {
+  background-color: #FBC02D;
+  color: #212529;
+}
+.p-badge.p-badge-danger {
+  background-color: #D32F2F;
+  color: #ffffff;
+}
+
+.p-tag {
+  background: #2196F3;
+  color: #ffffff;
+  font-size: 0.75em;
+  font-weight: 700;
+  padding: 0.25em 0.4em;
+  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;
+}
+
 /* Add your customizations of theme here */
diff --git a/public/themes/saga-cyan/theme.css b/public/themes/saga-cyan/theme.css
index b0341c550..d7e381dfb 100644
--- a/public/themes/saga-cyan/theme.css
+++ b/public/themes/saga-cyan/theme.css
@@ -3403,4 +3403,55 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-badge {
+  background: #00ACC1;
+  color: #ffffff;
+  font-size: 0.75em;
+  font-weight: 700;
+  min-width: 2em;
+  height: 2em;
+  line-height: 2em;
+}
+.p-badge.p-badge-success {
+  background-color: #689F38;
+  color: #ffffff;
+}
+.p-badge.p-badge-info {
+  background-color: #0288D1;
+  color: #ffffff;
+}
+.p-badge.p-badge-warning {
+  background-color: #FBC02D;
+  color: #212529;
+}
+.p-badge.p-badge-danger {
+  background-color: #D32F2F;
+  color: #ffffff;
+}
+
+.p-tag {
+  background: #00ACC1;
+  color: #ffffff;
+  font-size: 0.75em;
+  font-weight: 700;
+  padding: 0.25em 0.4em;
+  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;
+}
+
 /* Add your customizations of theme here */
diff --git a/public/themes/saga-deeppurple/theme.css b/public/themes/saga-deeppurple/theme.css
index 8e4513f86..ddfe195e5 100644
--- a/public/themes/saga-deeppurple/theme.css
+++ b/public/themes/saga-deeppurple/theme.css
@@ -3403,4 +3403,55 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-badge {
+  background: #673AB7;
+  color: #ffffff;
+  font-size: 0.75em;
+  font-weight: 700;
+  min-width: 2em;
+  height: 2em;
+  line-height: 2em;
+}
+.p-badge.p-badge-success {
+  background-color: #689F38;
+  color: #ffffff;
+}
+.p-badge.p-badge-info {
+  background-color: #0288D1;
+  color: #ffffff;
+}
+.p-badge.p-badge-warning {
+  background-color: #FBC02D;
+  color: #212529;
+}
+.p-badge.p-badge-danger {
+  background-color: #D32F2F;
+  color: #ffffff;
+}
+
+.p-tag {
+  background: #673AB7;
+  color: #ffffff;
+  font-size: 0.75em;
+  font-weight: 700;
+  padding: 0.25em 0.4em;
+  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;
+}
+
 /* Add your customizations of theme here */
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index ea0b7b752..49baeadbc 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -3403,4 +3403,55 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-badge {
+  background: #4CAF50;
+  color: #ffffff;
+  font-size: 0.75em;
+  font-weight: 700;
+  min-width: 2em;
+  height: 2em;
+  line-height: 2em;
+}
+.p-badge.p-badge-success {
+  background-color: #689F38;
+  color: #ffffff;
+}
+.p-badge.p-badge-info {
+  background-color: #0288D1;
+  color: #ffffff;
+}
+.p-badge.p-badge-warning {
+  background-color: #FBC02D;
+  color: #212529;
+}
+.p-badge.p-badge-danger {
+  background-color: #D32F2F;
+  color: #ffffff;
+}
+
+.p-tag {
+  background: #4CAF50;
+  color: #ffffff;
+  font-size: 0.75em;
+  font-weight: 700;
+  padding: 0.25em 0.4em;
+  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;
+}
+
 /* Add your customizations of theme here */
diff --git a/public/themes/saga-indigo/theme.css b/public/themes/saga-indigo/theme.css
index 38977f0c0..e2cc8e6bf 100644
--- a/public/themes/saga-indigo/theme.css
+++ b/public/themes/saga-indigo/theme.css
@@ -3403,4 +3403,55 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-badge {
+  background: #3F51B5;
+  color: #ffffff;
+  font-size: 0.75em;
+  font-weight: 700;
+  min-width: 2em;
+  height: 2em;
+  line-height: 2em;
+}
+.p-badge.p-badge-success {
+  background-color: #689F38;
+  color: #ffffff;
+}
+.p-badge.p-badge-info {
+  background-color: #0288D1;
+  color: #ffffff;
+}
+.p-badge.p-badge-warning {
+  background-color: #FBC02D;
+  color: #212529;
+}
+.p-badge.p-badge-danger {
+  background-color: #D32F2F;
+  color: #ffffff;
+}
+
+.p-tag {
+  background: #3F51B5;
+  color: #ffffff;
+  font-size: 0.75em;
+  font-weight: 700;
+  padding: 0.25em 0.4em;
+  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;
+}
+
 /* Add your customizations of theme here */
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index b550a2fa5..ec6aa7618 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -3403,4 +3403,55 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-badge {
+  background: #FFC107;
+  color: #212529;
+  font-size: 0.75em;
+  font-weight: 700;
+  min-width: 2em;
+  height: 2em;
+  line-height: 2em;
+}
+.p-badge.p-badge-success {
+  background-color: #689F38;
+  color: #ffffff;
+}
+.p-badge.p-badge-info {
+  background-color: #0288D1;
+  color: #ffffff;
+}
+.p-badge.p-badge-warning {
+  background-color: #FBC02D;
+  color: #212529;
+}
+.p-badge.p-badge-danger {
+  background-color: #D32F2F;
+  color: #ffffff;
+}
+
+.p-tag {
+  background: #FFC107;
+  color: #212529;
+  font-size: 0.75em;
+  font-weight: 700;
+  padding: 0.25em 0.4em;
+  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;
+}
+
 /* Add your customizations of theme here */
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index cbbeb64ec..cea27b662 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -3403,4 +3403,55 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-badge {
+  background: #9C27B0;
+  color: #ffffff;
+  font-size: 0.75em;
+  font-weight: 700;
+  min-width: 2em;
+  height: 2em;
+  line-height: 2em;
+}
+.p-badge.p-badge-success {
+  background-color: #689F38;
+  color: #ffffff;
+}
+.p-badge.p-badge-info {
+  background-color: #0288D1;
+  color: #ffffff;
+}
+.p-badge.p-badge-warning {
+  background-color: #FBC02D;
+  color: #212529;
+}
+.p-badge.p-badge-danger {
+  background-color: #D32F2F;
+  color: #ffffff;
+}
+
+.p-tag {
+  background: #9C27B0;
+  color: #ffffff;
+  font-size: 0.75em;
+  font-weight: 700;
+  padding: 0.25em 0.4em;
+  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;
+}
+
 /* Add your customizations of theme here */
diff --git a/public/themes/saga-teal/theme.css b/public/themes/saga-teal/theme.css
index 903819138..cc1c7a563 100644
--- a/public/themes/saga-teal/theme.css
+++ b/public/themes/saga-teal/theme.css
@@ -3403,4 +3403,55 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-badge {
+  background: #009688;
+  color: #ffffff;
+  font-size: 0.75em;
+  font-weight: 700;
+  min-width: 2em;
+  height: 2em;
+  line-height: 2em;
+}
+.p-badge.p-badge-success {
+  background-color: #689F38;
+  color: #ffffff;
+}
+.p-badge.p-badge-info {
+  background-color: #0288D1;
+  color: #ffffff;
+}
+.p-badge.p-badge-warning {
+  background-color: #FBC02D;
+  color: #212529;
+}
+.p-badge.p-badge-danger {
+  background-color: #D32F2F;
+  color: #ffffff;
+}
+
+.p-tag {
+  background: #009688;
+  color: #ffffff;
+  font-size: 0.75em;
+  font-weight: 700;
+  padding: 0.25em 0.4em;
+  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;
+}
+
 /* Add your customizations of theme here */
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index ffc8a9c58..06e670d77 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -146,6 +146,7 @@
                 <span>Misc</span>
             </span>
             <div>
+                <router-link to="/badge">Badge</router-link>
                 <router-link to="/blockui">BlockUI</router-link>
                 <router-link to="/inplace">Inplace</router-link>
                 <router-link to="/progressbar">ProgressBar</router-link>
diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss
index 1d9fccb1c..4b4a36ee4 100644
--- a/src/assets/styles/app.scss
+++ b/src/assets/styles/app.scss
@@ -473,10 +473,8 @@ a {
                 h1 {
                     font-size: 28px;
                     margin: 0 0 20px 0;
-                    display: block;
-                    text-align: left;
                     color: #ffffff;
-                    font-weight: normal;
+                    font-weight: 700;
                 }
 
                 p {
diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css
index ecceb3a2b..986a67488 100644
--- a/src/assets/styles/primevue.css
+++ b/src/assets/styles/primevue.css
@@ -1,4 +1,5 @@
 @import '../../components/common/Common.css';
+@import '../../components/badge/Badge.css';
 @import '../../components/button/Button.css';
 @import '../../components/checkbox/Checkbox.css';
 @import '../../components/colorpicker/ColorPicker.css';
diff --git a/src/components/badge/Badge.css b/src/components/badge/Badge.css
new file mode 100644
index 000000000..2b288c9d9
--- /dev/null
+++ b/src/components/badge/Badge.css
@@ -0,0 +1,27 @@
+.p-badge {
+    display: inline-block;
+    border-radius: 50%;
+    text-align: center;
+}
+
+.p-tag {
+    display: inline-block;
+    text-align: center;
+}
+
+.p-tag.p-tag-rounded {
+    border-radius: 10em;
+}
+
+.p-overlay-badge {
+    position: relative;
+    display: inline-block;
+}
+
+.p-overlay-badge .p-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(1em, -1em);
+    margin: 0;
+}
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index 6464924e3..2a3d0d213 100755
--- a/src/router.js
+++ b/src/router.js
@@ -41,6 +41,11 @@ export default new Router({
 			name: 'autocomplete',
 			component: () => import('./views/autocomplete/AutoCompleteDemo.vue')
         },
+        {
+			path: '/badge',
+			name: 'badge',
+			component: () => import('./views/badge/BadgeDemo.vue')
+		},
         {
 			path: '/blockui',
 			name: 'blockui',
diff --git a/src/views/badge/BadgeDemo.vue b/src/views/badge/BadgeDemo.vue
new file mode 100644
index 000000000..df52b6929
--- /dev/null
+++ b/src/views/badge/BadgeDemo.vue
@@ -0,0 +1,91 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Badge</h1>
+                <p>Badge is a small status indicator for another element.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3>Numbers</h3>
+            <span class="p-badge">2</span>
+            <span class="p-badge p-badge-success">8</span>
+            <span class="p-badge p-badge-info">4</span>
+            <span class="p-badge p-badge-warning">12</span>
+            <span class="p-badge p-badge-danger">3</span>
+
+            <h3>Tags</h3>
+            <span class="p-tag">Primary</span> 
+            <span class="p-tag p-tag-success">Success</span>
+            <span class="p-tag p-tag-info">Info</span>
+            <span class="p-tag p-tag-warning">Warning</span>
+            <span class="p-tag p-tag-danger">Danger</span>
+
+            <h3>Pills</h3>
+            <span class="p-tag p-tag-rounded">Primary</span>
+            <span class="p-tag p-tag-rounded p-tag-success">Success</span>
+            <span class="p-tag p-tag-rounded p-tag-info">Info</span>
+            <span class="p-tag p-tag-rounded p-tag-warning">Warning</span>
+            <span class="p-tag p-tag-rounded p-tag-danger">Danger</span>
+
+            <h3>Positioned Badge</h3>
+            <span class="p-overlay-badge">
+                 <span class="p-badge">2</span>
+                <i class="pi pi-bell" style="font-size: 2em"></i>
+            </span>
+
+            <span class="p-overlay-badge">
+                <span class="p-badge p-badge-warning">5</span>
+                <Button type="button" label="New" />
+            </span>
+
+            <h3>Sizes</h3>
+            <span class="p-badge" style="font-size: 1em">2</span>
+            <span class="p-badge p-badge-success" style="font-size: 1.25em">8</span>
+            <span class="p-badge p-badge-info" style="font-size: 1.5em">4</span>
+            <span class="p-badge p-badge-warning" style="font-size: 1.75em">12</span>
+            <span class="p-badge p-badge-danger" style="font-size: 2em">3</span>
+
+            <h1>Heading 1 <span class="p-tag p-tag-success">New</span></h1>
+            <h2>Heading 2 <span class="p-tag p-tag-success">New</span></h2>
+        </div>
+
+        <BadgeDoc />
+    </div>
+</template>
+
+<script>
+import BadgeDoc from './BadgeDoc';
+
+export default {
+    data() {
+        return {
+
+        }
+    },
+	components: {
+		'BadgeDoc': BadgeDoc
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.p-badge, .p-tag {
+    margin-right: .5em;
+}
+
+.p-overlay-badge {
+    margin-right: 2em;
+
+    .p-badge {
+        margin-right: 0;
+    }
+}
+
+/deep/ h1, h2 {
+    .p-badge {
+        vertical-align: middle;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/badge/BadgeDoc.vue b/src/views/badge/BadgeDoc.vue
new file mode 100644
index 000000000..e71f3cd3c
--- /dev/null
+++ b/src/views/badge/BadgeDoc.vue
@@ -0,0 +1,128 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import InputText from 'primevue/inputtext';
+</CodeHighlight>
+
+				<h3>Getting Started</h3>
+				<p>A model can be bound using the standard v-model directive.</p>
+<CodeHighlight>
+&lt;InputText type="text" v-model="value" /&gt;
+</CodeHighlight>
+
+				<h3>Float Label</h3>
+				<p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p>
+<CodeHighlight>
+&lt;span class="p-float-label"&gt;
+	&lt;InputText id="username" type="text" v-model="value" /&gt;
+	&lt;label for="username"&gt;Username&lt;/label&gt;
+&lt;/span&gt;
+</CodeHighlight>
+
+                <h3>Icons</h3>
+                <p>An icon can be integrated within an input field by wrapping the input and the icon with an element having either <i>p-input-icon-right</i>
+                or <i>p-input-icon-left</i> class depending on the icon location.</p>
+<CodeHighlight>
+&lt;span class="p-input-icon-left"&gt;
+    &lt;i class="pi pi-search" /&gt;
+    &lt;InputText type="text" v-model="value1" placeholder="Search" /&gt;
+&lt;/span&gt;
+
+&lt;span class="p-input-icon-right"&gt;
+    &lt;i class="pi pi-spin pi-spinner" /&gt;
+    &lt;InputText type="text" v-model="value2" /&gt;
+&lt;/span&gt;
+</CodeHighlight>
+
+				<h3>Properties</h3>
+				<p>InputText passes any valid attribute to the underlying input element.</p>
+
+                <h3>Events</h3>
+                <p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
+
+				<h3>Styling</h3>
+				<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-inputtext</td>
+							<td>Input element</td>
+						</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Dependencies</h3>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
+&lt;InputText type="text" v-model="value1" /&gt;
+&lt;span :style="{marginLeft: '.5em'}"&gt;{{value1}}&lt;/span&gt;
+
+&lt;h3&gt;Floating Label&lt;/h3&gt;
+&lt;span class="p-float-label"&gt;
+    &lt;InputText id="username" type="text" v-model="value2" /&gt;
+    &lt;label for="username"&gt;Username&lt;/label&gt;
+&lt;/span&gt;
+
+&lt;h3&gt;Left Icon&lt;/h3&gt;
+&lt;span class="p-input-icon-left"&gt;
+    &lt;i class="pi pi-search" /&gt;
+    &lt;InputText type="text" v-model="value3" placeholder="Search" /&gt;
+&lt;/span&gt;
+
+&lt;h3&gt;Right Icon&lt;/h3&gt;
+&lt;span class="p-input-icon-right"&gt;
+    &lt;i class="pi pi-spin pi-spinner" /&gt;
+    &lt;InputText type="text" v-model="value4" /&gt;
+&lt;/span&gt;
+
+&lt;h3&gt;Disabled&lt;/h3&gt;
+&lt;InputText type="text" v-model="value5" disabled /&gt;
+
+    &lt;h3&gt;Invalid&lt;/h3&gt;
+&lt;InputText type="text" class="p-error" /&gt;
+
+&lt;h3&gt;Sizes&lt;/h3&gt;
+&lt;div class="component-sizes"&gt;
+    &lt;InputText type="text" class="p-component-sm" placeholder="Small" /&gt;
+    &lt;InputText type="text" placeholder="Normal" /&gt;
+    &lt;InputText type="text" class="p-component-lg" placeholder="Large" /&gt;
+&lt;/div&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {
+	data() {
+		return {
+            value1: '',
+            value2: '',
+            value3: '',
+            value4: '',
+            value5: 'PrimeVue'
+		}
+	}
+}
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
\ No newline at end of file