From d97f6479885d4fde40e3513a2299c2f9de74b3a3 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 13 Jan 2020 10:46:42 +0300
Subject: [PATCH] Initiated ColorPicker

---
 exports/colorpicker.d.ts                    |   1 +
 exports/colorpicker.js                      |   3 +
 src/AppMenu.vue                             |   1 +
 src/assets/styles/primevue.css              |   1 +
 src/components/colorpicker/ColorPicker.css  |  86 ++++
 src/components/colorpicker/ColorPicker.d.ts |   5 +
 src/components/colorpicker/ColorPicker.vue  | 419 ++++++++++++++++++++
 src/components/colorpicker/images/color.png | Bin 0 -> 10355 bytes
 src/components/colorpicker/images/hue.png   | Bin 0 -> 293 bytes
 src/main.js                                 |   2 +
 src/router.js                               |   5 +
 src/views/colorpicker/ColorPickerDemo.vue   |  36 ++
 src/views/colorpicker/ColorPickerDoc.vue    |  86 ++++
 13 files changed, 645 insertions(+)
 create mode 100644 exports/colorpicker.d.ts
 create mode 100644 exports/colorpicker.js
 create mode 100644 src/components/colorpicker/ColorPicker.css
 create mode 100644 src/components/colorpicker/ColorPicker.d.ts
 create mode 100644 src/components/colorpicker/ColorPicker.vue
 create mode 100644 src/components/colorpicker/images/color.png
 create mode 100644 src/components/colorpicker/images/hue.png
 create mode 100644 src/views/colorpicker/ColorPickerDemo.vue
 create mode 100644 src/views/colorpicker/ColorPickerDoc.vue

diff --git a/exports/colorpicker.d.ts b/exports/colorpicker.d.ts
new file mode 100644
index 000000000..e3b8f2e4e
--- /dev/null
+++ b/exports/colorpicker.d.ts
@@ -0,0 +1 @@
+export * from './components/colorpicker/ColorPicker';
\ No newline at end of file
diff --git a/exports/colorpicker.js b/exports/colorpicker.js
new file mode 100644
index 000000000..d08b117d4
--- /dev/null
+++ b/exports/colorpicker.js
@@ -0,0 +1,3 @@
+'use strict';
+module.exports = require('./components/colorpicker/ColorPicker.vue');
+            
\ No newline at end of file
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 4f9d2794f..3f195df14 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -10,6 +10,7 @@
                 <router-link to="/calendar">Calendar</router-link>
                 <router-link to="/checkbox">Checkbox</router-link>
                 <router-link to="/chips">Chips</router-link>
+                <router-link to="/colorpicker">ColorPicker</router-link>
                 <router-link to="/dropdown">Dropdown</router-link>
                 <router-link to="/editor">Editor</router-link>
                 <router-link to="/inputgroup">InputGroup</router-link>
diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css
index 783b61217..04c5c6a6e 100644
--- a/src/assets/styles/primevue.css
+++ b/src/assets/styles/primevue.css
@@ -1,6 +1,7 @@
 @import '../../components/common/Common.css';
 @import '../../components/button/Button.css';
 @import '../../components/checkbox/Checkbox.css';
+@import '../../components/colorpicker/ColorPicker.css';
 @import '../../components/inputtext/InputText.css';
 @import '../../components/password/Password.css';
 @import '../../components/radiobutton/RadioButton.css';
diff --git a/src/components/colorpicker/ColorPicker.css b/src/components/colorpicker/ColorPicker.css
new file mode 100644
index 000000000..9732455c1
--- /dev/null
+++ b/src/components/colorpicker/ColorPicker.css
@@ -0,0 +1,86 @@
+.p-colorpicker {
+    display: inline-block;
+} 
+
+.p-colorpicker-dragging {
+    cursor: pointer;
+} 
+
+.p-colorpicker-overlay {
+    position: relative;
+} 
+
+.p-colorpicker-panel {
+    position: relative;
+    width: 193px;
+    height: 166px;
+    background-color: #323232;
+    border-color: #191919;
+}
+
+.p-colorpicker-overlay-panel {
+    position: absolute;
+}
+
+.p-colorpicker-preview {
+    width: 2em;
+    cursor: pointer;
+}
+
+.p-colorpicker-panel .p-colorpicker-content {
+    position: relative;
+}
+
+.p-colorpicker-panel .p-colorpicker-color-selector {
+    width: 150px;
+    height: 150px;
+    top: 8px;
+    left: 8px;
+    position: absolute;
+}
+
+.p-colorpicker-panel .p-colorpicker-color {
+     width: 150px;
+     height: 150px;
+     background: transparent url("./images/color.png") no-repeat left top; 
+}
+
+.p-colorpicker-panel .p-colorpicker-color-handle {
+     position: absolute;
+     top: 0px;
+     left: 150px;
+     border-radius: 100%;
+     width: 10px;
+     height: 10px;
+     border: 1px solid #ffffff;
+     margin: -5px 0 0 -5px;
+     cursor: pointer;
+}
+
+.p-colorpicker-panel .p-colorpicker-hue {
+    background: transparent url("./images/hue.png") no-repeat left top; 
+    width: 17px;
+    height: 150px;
+    top: 8px;
+    left: 167px;
+    position: absolute;
+    opacity: .85;
+}
+
+.p-colorpicker-panel .p-colorpicker-hue-handle {
+     position: absolute;
+     top: 150px;
+     left: 0px;
+     width: 21px;
+     margin-left: -2px;
+     margin-top: -5px;
+     height: 10px;
+     border: 2px solid #ffffff;
+     opacity: .85;
+     cursor: pointer;
+ }
+ 
+ .p-colorpicker-panel.p-disabled .p-colorpicker-hue-handle,
+ .p-colorpicker-panel.p-disabled .p-colorpicker-color-handle  {
+      opacity: .5;
+ }
\ No newline at end of file
diff --git a/src/components/colorpicker/ColorPicker.d.ts b/src/components/colorpicker/ColorPicker.d.ts
new file mode 100644
index 000000000..f9f6b87d4
--- /dev/null
+++ b/src/components/colorpicker/ColorPicker.d.ts
@@ -0,0 +1,5 @@
+import Vue, { VNode } from 'vue';
+
+export declare class ColorPicker extends Vue {
+    value: any;
+}
\ No newline at end of file
diff --git a/src/components/colorpicker/ColorPicker.vue b/src/components/colorpicker/ColorPicker.vue
new file mode 100644
index 000000000..87bc1c2de
--- /dev/null
+++ b/src/components/colorpicker/ColorPicker.vue
@@ -0,0 +1,419 @@
+<template>
+    <div :class="containerClass">
+        <input ref="input" type="text" :class="inputClass" :style="inputStyle" readonly="readonly" :tabindex="tabindex" :disabled="disabled" 
+            @click="onInputClick" @keydown="onInputKeydown" v-if="!inline"/>
+        <transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
+            <div ref="picker" :class="pickerClass" v-if="inline ? true : overlayVisible">
+                <div class="p-colorpicker-content">
+                    <div ref="colorSelector" class="p-colorpicker-color-selector" @mousedown="onColorMousedown" :style="colorSelectorStyle">
+                        <div class="p-colorpicker-color">
+                            <div ref="colorHandle" class="p-colorpicker-color-handle" :style="colorHandleStyle"></div>
+                        </div>
+                    </div>
+                    <div ref="hueView" class="p-colorpicker-hue" @mousedown="onHueMousedown">
+                        <div ref="hueHandle" class="p-colorpicker-hue-handle" :style="hueHandleStyle"></div>
+                    </div>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+import DomHandler from '../utils/DomHandler';
+
+export default {
+    props: {
+        value: {
+            type: null,
+            default: null
+        },
+        defaultColor: {
+            type: null,
+            default: 'ff0000'
+        },
+        inline: {
+            type: Boolean,
+            default: false
+        },
+        format: {
+            type: String,
+            default: 'hex'
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        tabindex: {
+            type: String,
+            default: null
+        },
+        autoZIndex: {
+            type: Boolean,
+            default: true
+        },
+        baseZIndex: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            overlayVisible: false
+        };
+    },
+    outsideClickListener: null,
+    documentMouseMoveListener: null,
+    documentMouseUpListener: null,
+    hueDragging: null,
+    colorDragging: null,
+    beforeDestroy() {
+        this.unbindOutsideClickListener();
+        this.unbindDocumentMouseMoveListener();
+        this.unbindDocumentMouseUpListener();
+    },
+    methods: {
+        pickColor(event) {
+            let rect = this.$refs.colorSelector.getBoundingClientRect();
+            let top = rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
+            let left = rect.left + document.body.scrollLeft;
+            let saturation = Math.floor(100 * (Math.max(0, Math.min(150, (event.pageX - left)))) / 150);
+            let brightness = Math.floor(100 * (150 - Math.max(0, Math.min(150, (event.pageY - top)))) / 150);
+            let newHSBValue = this.validateHSB({
+                h: this.hsbValue.h,
+                s: saturation,
+                b: brightness
+            });
+            
+            this.updateModel(newHSBValue);
+        },
+        pickHue(event) {
+            let top = this.$refs.hueView.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
+            let hsbValue = this.validateHSB({
+                h: Math.floor(360 * (150 - Math.max(0, Math.min(150, (event.pageY - top)))) / 150),
+                s: 100,
+                b: 100
+            });
+            
+            this.updateModel(hsbValue);
+        },
+        updateModel(value) {
+            switch(this.format) {
+                case 'hex':
+                    this.$emit('input', this.HSBtoHEX(value));
+                break;
+                
+                case 'rgb':
+                    this.$emit('input', this.HSBtoRGB(value));
+                break;
+                
+                case 'hsb':
+                    this.$emit('input', value);
+                break;
+
+                default:
+                    //NoOp
+                break;
+            }
+        },
+        validateHSB(hsb) {
+            return {
+                h: Math.min(360, Math.max(0, hsb.h)),
+                s: Math.min(100, Math.max(0, hsb.s)),
+                b: Math.min(100, Math.max(0, hsb.b))
+            };
+        },
+        validateRGB(rgb) {
+            return {
+                r: Math.min(255, Math.max(0, rgb.r)),
+                g: Math.min(255, Math.max(0, rgb.g)),
+                b: Math.min(255, Math.max(0, rgb.b))
+            };
+        },
+        validateHEX(hex) {
+            var len = 6 - hex.length;
+            if (len > 0) {
+                var o = [];
+                for (var i=0; i<len; i++) {
+                    o.push('0');
+                }
+                o.push(hex);
+                hex = o.join('');
+            }
+            return hex;
+        },
+        HEXtoRGB(hex) {
+            let hexValue = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
+            return {r: hexValue >> 16, g: (hexValue & 0x00FF00) >> 8, b: (hexValue & 0x0000FF)};
+        },
+        HEXtoHSB(hex) {
+            return this.RGBtoHSB(this.HEXtoRGB(hex));
+        },
+        RGBtoHSB(rgb) {
+            var hsb = {
+                h: 0,
+                s: 0,
+                b: 0
+            };
+            var min = Math.min(rgb.r, rgb.g, rgb.b);
+            var max = Math.max(rgb.r, rgb.g, rgb.b);
+            var delta = max - min;
+            hsb.b = max;
+            if (max !== 0) {
+                
+            }
+            hsb.s = max !== 0 ? 255 * delta / max : 0;
+            if (hsb.s !== 0) {
+                if (rgb.r === max) {
+                    hsb.h = (rgb.g - rgb.b) / delta;
+                } else if (rgb.g === max) {
+                    hsb.h = 2 + (rgb.b - rgb.r) / delta;
+                } else {
+                    hsb.h = 4 + (rgb.r - rgb.g) / delta;
+                }
+            } else {
+                hsb.h = -1;
+            }
+            hsb.h *= 60;
+            if (hsb.h < 0) {
+                hsb.h += 360;
+            }
+            hsb.s *= 100/255;
+            hsb.b *= 100/255;
+            return hsb;
+        },
+        HSBtoRGB(hsb) {
+            var rgb = {
+                r: null, g: null, b: null
+            };
+            var h = Math.round(hsb.h);
+            var s = Math.round(hsb.s*255/100);
+            var v = Math.round(hsb.b*255/100);
+            if (s === 0) {
+                rgb = {
+                    r: v,
+                    g: v,
+                    b: v
+                }
+            } 
+            else {
+                var t1 = v;
+                var t2 = (255-s)*v/255;
+                var t3 = (t1-t2)*(h%60)/60;
+                if (h===360) h = 0;
+                if (h<60) {rgb.r=t1;	rgb.b=t2; rgb.g=t2+t3}
+                else if (h<120) {rgb.g=t1; rgb.b=t2;	rgb.r=t1-t3}
+                else if (h<180) {rgb.g=t1; rgb.r=t2;	rgb.b=t2+t3}
+                else if (h<240) {rgb.b=t1; rgb.r=t2;	rgb.g=t1-t3}
+                else if (h<300) {rgb.b=t1; rgb.g=t2;	rgb.r=t2+t3}
+                else if (h<360) {rgb.r=t1; rgb.g=t2;	rgb.b=t1-t3}
+                else {rgb.r=0; rgb.g=0;	rgb.b=0}
+            }
+            return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
+        },
+        RGBtoHEX(rgb) {
+            var hex = [
+                rgb.r.toString(16),
+                rgb.g.toString(16),
+                rgb.b.toString(16)
+            ];
+            
+            for (var key in hex) {
+                if (hex[key].length === 1) {
+                    hex[key] = '0' + hex[key];
+                }
+            }        
+
+            return hex.join('');
+        },
+        HSBtoHEX(hsb) {
+            return this.RGBtoHEX(this.HSBtoRGB(hsb));
+        },
+        toHSB(value) {
+            let hsb;
+
+            if (value) {
+                switch (this.format) {
+                    case 'hex':
+                        hsb = this.HEXtoHSB(value);
+                    break;
+
+                    case 'rgb':
+                        hsb = this.RGBtoHSB(value);
+                    break;
+
+                    case 'hsb':
+                        hsb = value;
+                    break;
+
+                    default:
+                        break;
+                }
+            }
+            else {
+                hsb = this.HEXtoHSB(this.defaultColor);
+            }
+
+            return hsb;
+        },
+        onOverlayEnter() {
+            this.alignOverlay();
+            this.bindOutsideClickListener();
+
+            if (this.autoZIndex) {
+                this.$refs.picker.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
+            }
+        },
+        onOverlayLeave() {
+            this.unbindOutsideClickListener();
+        },
+        alignOverlay() {
+            DomHandler.relativePosition(this.$refs.picker, this.$refs.input);
+        },
+        onInputClick(event) {
+            if (this.disabled) {
+                return;
+            }
+
+            this.overlayVisible = !this.overlayVisible;
+        },
+        onInputKeydown(event) {
+            switch(event.which) {
+                //space
+                case 32:
+                    this.overlayVisible = !this.overlayVisible;
+                    event.preventDefault();
+                break;
+                            
+                //escape and tab
+                case 27:
+                case 9:
+                    this.overlayVisible = false;
+                break;
+
+                default:
+                    //NoOp
+                break;
+            }
+        },
+        onColorMousedown(event) {
+            if (this.disabled) {
+                return;
+            }
+        
+            this.colorDragging = true;
+            this.bindDocumentMouseMoveListener();
+            this.bindDocumentMouseUpListener();
+            this.pickColor(event);
+            DomHandler.addClass(this.$el, 'p-colorpicker-dragging');
+        },
+        onHueMousedown(event) {
+            if (this.disabled) {
+                return;
+            }
+            
+            this.hueDragging = true;
+            this.bindDocumentMouseMoveListener();
+            this.bindDocumentMouseUpListener();
+            this.pickHue(event);
+            DomHandler.addClass(this.$el, 'p-colorpicker-dragging');
+        },
+        isInputClicked(event) {
+            return this.$refs.input && this.$refs.input.isSameNode(event.target);
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = (event) => {
+                    if (this.overlayVisible && this.$refs.picker && !this.$refs.picker.contains(event.target) && !this.isInputClicked(event)) {
+                        this.overlayVisible = false;
+                    }
+                };
+                document.addEventListener('click', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        },
+        bindDocumentMouseMoveListener() {
+            if (!this.documentMouseMoveListener) {
+                this.documentMouseMoveListener = (event) => {
+                    if (this.colorDragging) {
+                        this.pickColor(event);
+                    }
+
+                    if (this.hueDragging) {
+                        this.pickHue(event);
+                    }
+                };
+                document.addEventListener('mousemove', this.documentMouseMoveListener);
+            }
+        },
+        unbindDocumentMouseMoveListener() {
+            if (this.documentMouseMoveListener) {
+                document.removeEventListener('mousemove', this.documentMouseMoveListener);
+                this.documentMouseMoveListener = null;
+            }
+        },
+        bindDocumentMouseUpListener() {
+            if (!this.documentMouseUpListener) {
+                this.documentMouseUpListener = (event) => {
+                    this.colorDragging = false;
+                    this.hueDragging = false;
+                    DomHandler.removeClass(this.$el, 'p-colorpicker-dragging');
+                    this.unbindDocumentMouseMoveListener();
+                    this.unbindDocumentMouseUpListener();
+                };
+                document.addEventListener('mouseup', this.documentMouseUpListener);
+            }
+        },
+        unbindDocumentMouseUpListener() {
+            if (this.documentMouseUpListener) {
+                document.removeEventListener('mouseup', this.documentMouseUpListener);
+                this.documentMouseUpListener = null;
+            }
+        }
+    },
+    computed: {
+        containerClass() {
+            return ['p-colorpicker p-component', {'p-colorpicker-overlay': !this.inline}];
+        },
+        inputClass() {
+            return ['p-colorpicker-preview p-inputtext', {'p-disabled': this.disabled}];
+        },
+        pickerClass() {
+            return ['p-colorpicker-panel', {'p-colorpicker-overlay-panel': !this.inline, 'p-disabled': this.disabled}];
+        },
+        inputStyle() {
+            return {backgroundColor: '#' + this.HSBtoHEX(this.hsbValue)};
+        },
+        colorHandleStyle() {
+            return {
+                left: Math.floor(150 * this.hsbValue.s / 100) + 'px',
+                top:  Math.floor(150 * (100 - this.hsbValue.b) / 100) + 'px'
+            }
+        },
+        colorSelectorStyle() {
+            let hsbValue = this.validateHSB({
+                h: this.hsbValue.h,
+                s: 100,
+                b: 100
+            });
+
+            return {
+                backgroundColor: '#' + this.HSBtoHEX(hsbValue)
+            }
+        },
+        hueHandleStyle() {
+            return {
+                top: Math.floor(150 - (150 * this.hsbValue.h / 360)) + 'px'
+            }
+        },
+        hsbValue() {
+            return this.toHSB(this.value);
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/colorpicker/images/color.png b/src/components/colorpicker/images/color.png
new file mode 100644
index 0000000000000000000000000000000000000000..561cdd9c59a498b499cbfd1295dc4d2037e235ff
GIT binary patch
literal 10355
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
RdwKu>002ovPDHLkV1myV#+d*B

literal 0
HcmV?d00001

diff --git a/src/components/colorpicker/images/hue.png b/src/components/colorpicker/images/hue.png
new file mode 100644
index 0000000000000000000000000000000000000000..8efa252578a2c8c513c6eeec7e183aa2f8355f5b
GIT binary patch
literal 293
zcmV+=0owkFP)<h;3K|Lk000e1NJLTq000pH005Q<0ssI2x4QJr0002&Nkl<ZSi|j@
zQ3``V3`B>~mb#^S1@C_)KRiU;6-7(0&`CkU5}4m1d7IrNET?{$U;Xcz`hnwej&DWF
zNg$~*dY-BXbYh&&IgceyZD$ZX!DGwqgNG^>K$Xdp0aaYZAgeLA;Hi(t=#dVf1dn^3
zt$`})Egsa{HK>mTqbGRk<FUkvng&k-aX(a1Uk@_%7GDU+TZJ*sRXkUnL2W#qYZ^T6
z-<-B7@`ghdli02kK)qetJo+dB^^p}k!Sk2L?fa>X$8z7A4XUWOYr9AM47fD6s(AFz
rLFy}o|N2Bt9oN*rQ}#A1Dtr3{xkh4EFufcl00000NkvXXu0mjf>=A&>

literal 0
HcmV?d00001

diff --git a/src/main.js b/src/main.js
index 32b73d225..9f0f39d00 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,7 @@ import Carousel from './components/carousel/Carousel';
 import Chart from './components/chart/Chart';
 import Checkbox from './components/checkbox/Checkbox';
 import Chips from './components/chips/Chips';
+import ColorPicker from './components/colorpicker/ColorPicker';
 import Column from './components/column/Column';
 import ColumnGroup from './components/columngroup/ColumnGroup';
 import ContextMenu from './components/contextmenu/ContextMenu';
@@ -98,6 +99,7 @@ Vue.component('Carousel', Carousel);
 Vue.component('Chart', Chart);
 Vue.component('Checkbox', Checkbox);
 Vue.component('Chips', Chips);
+Vue.component('ColorPicker', ColorPicker);
 Vue.component('Column', Column);
 Vue.component('ColumnGroup', ColumnGroup);
 Vue.component('ContextMenu', ContextMenu);
diff --git a/src/router.js b/src/router.js
index b0980481b..1f84daa29 100644
--- a/src/router.js
+++ b/src/router.js
@@ -116,6 +116,11 @@ export default new Router({
 			name: 'chips',
 			component: () => import('./views/chips/ChipsDemo.vue')
         },
+        {
+			path: '/colorpicker',
+			name: 'colorpicker',
+			component: () => import('./views/colorpicker/ColorPickerDemo.vue')
+		},
         {
 			path: '/contextmenu',
 			name: 'contextmenu',
diff --git a/src/views/colorpicker/ColorPickerDemo.vue b/src/views/colorpicker/ColorPickerDemo.vue
new file mode 100644
index 000000000..940adf8d0
--- /dev/null
+++ b/src/views/colorpicker/ColorPickerDemo.vue
@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>ColorPicker</h1>
+                <p>ColorPicker is an input component to select a color.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3>Inline</h3>
+            <ColorPicker v-model="color1" :inline="true" />{{color1}}
+
+            <h3>Overlay</h3>
+            <ColorPicker v-model="color2" />{{color2}}
+        </div>
+
+        <ColorPickerDoc />
+    </div>
+</template>
+
+<script>
+import ColorPickerDoc from './ColorPickerDoc';
+
+export default {
+    data() {
+        return {
+            color1: null,
+            color2: '1976D2'
+        }
+    },
+    components: {
+        'ColorPickerDoc': ColorPickerDoc
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/colorpicker/ColorPickerDoc.vue b/src/views/colorpicker/ColorPickerDoc.vue
new file mode 100644
index 000000000..b853f6691
--- /dev/null
+++ b/src/views/colorpicker/ColorPickerDoc.vue
@@ -0,0 +1,86 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import ColorPicker from 'primevue/colorpicker';
+</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>Properties</h3>
+				<p>InputText passes any valid attribute 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&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;Disabled&lt;/h3&gt;
+&lt;InputText type="text" v-model="value3" disabled /&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {
+	data() {
+		return {
+			value1: '',
+			value2: '',
+			value3: 'PrimeVue'
+		}
+	}
+}
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
\ No newline at end of file