From 3783b9ce4113f8871f04da18ab588ab23a5f25f8 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 4 Dec 2020 17:31:49 +0300
Subject: [PATCH] Fixed #693 - Knob Component

---
 exports/knob.d.ts                |   1 +
 exports/knob.js                  |   2 +
 src/AppMenu.vue                  |   1 +
 src/components/common/Common.css |   1 +
 src/components/knob/Knob.d.ts    |  20 +++
 src/components/knob/Knob.vue     | 239 +++++++++++++++++++++++++++
 src/main.js                      |   2 +
 src/router/index.js              |   5 +
 src/views/knob/KnobDemo.vue      |  78 +++++++++
 src/views/knob/KnobDoc.vue       | 275 +++++++++++++++++++++++++++++++
 10 files changed, 624 insertions(+)
 create mode 100644 exports/knob.d.ts
 create mode 100644 exports/knob.js
 create mode 100644 src/components/knob/Knob.d.ts
 create mode 100644 src/components/knob/Knob.vue
 create mode 100644 src/views/knob/KnobDemo.vue
 create mode 100644 src/views/knob/KnobDoc.vue

diff --git a/exports/knob.d.ts b/exports/knob.d.ts
new file mode 100644
index 000000000..937efc155
--- /dev/null
+++ b/exports/knob.d.ts
@@ -0,0 +1 @@
+export * from './components/knob/Knob';
\ No newline at end of file
diff --git a/exports/knob.js b/exports/knob.js
new file mode 100644
index 000000000..86c5d9784
--- /dev/null
+++ b/exports/knob.js
@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/knob/Knob.vue');
\ No newline at end of file
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 2a41574e3..52819399e 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -55,6 +55,7 @@
                 <router-link to="/inputswitch">InputSwitch</router-link>
                 <router-link to="/inputtext">InputText</router-link>
                 <router-link to="/floatlabel">FloatLabel</router-link>
+                <router-link to="/knob">Knob <Tag value="New"></Tag></router-link>
                 <router-link to="/listbox">Listbox</router-link>
                 <router-link to="/multiselect">MultiSelect</router-link>
                 <router-link to="/password">Password</router-link>
diff --git a/src/components/common/Common.css b/src/components/common/Common.css
index 0d26d2509..eb4534911 100755
--- a/src/components/common/Common.css
+++ b/src/components/common/Common.css
@@ -35,6 +35,7 @@
 .p-disabled, .p-disabled * {
     cursor: default !important;
     pointer-events: none;
+    user-select: none;
 }
 
 .p-component-overlay {
diff --git a/src/components/knob/Knob.d.ts b/src/components/knob/Knob.d.ts
new file mode 100644
index 000000000..b5c0552f2
--- /dev/null
+++ b/src/components/knob/Knob.d.ts
@@ -0,0 +1,20 @@
+import Vue from 'vue';
+
+declare class Knob extends Vue {
+    modelValue?: number;
+    size?: number;
+    disabled?: boolean;
+    readonly?: boolean;
+    step?: number;
+    min?: number;
+    max?: number;
+    valueColor?: string;
+    rangeColor?: string;
+    textColor?: string;
+    strokeWidth?: number;
+    showValue?: boolean;
+    valueTemplate?: string;
+    $emit(eventName: 'change', value: any): this;
+}
+
+export default Knob;
\ No newline at end of file
diff --git a/src/components/knob/Knob.vue b/src/components/knob/Knob.vue
new file mode 100644
index 000000000..d2b648c1b
--- /dev/null
+++ b/src/components/knob/Knob.vue
@@ -0,0 +1,239 @@
+<template>
+    <div :class="containerClass">
+        <svg viewBox="0 0 100 100" :width="size" :height="size" @click="onClick" @mousedown="onMouseDown" @mouseup="onMouseUp"
+            @touchstart="onTouchStart" @touchend="onTouchEnd">
+            <path :d="rangePath" :stroke-width="strokeWidth" :stroke="rangeColor" class="p-knob-range"></path>
+            <path :d="valuePath" :stroke-width="strokeWidth" :stroke="valueColor" class="p-knob-value"></path>
+            <text v-if="showValue" :x="50" :y="57" text-anchor="middle" :fill="textColor" class="p-knob-text">{{valueToDisplay}}</text>
+        </svg>
+    </div>
+</template>
+
+<script>
+export default {
+    emits: ['update:modelValue', 'change'],
+    data() {
+        return {
+            radius: 40,
+            midX: 50,
+            midY: 50,
+            minRadians: 4 * Math.PI / 3,
+            maxRadians: -Math.PI / 3
+        }
+    },
+    props: {
+        modelValue: {
+            type: Number,
+            default: null
+        },
+        size: {
+            type: Number,
+            default: 100
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        step: {
+            type: Number,
+            default: 1
+        },
+        min: {
+            type: Number,
+            default: 0
+        },
+        max: {
+            type: Number,
+            default: 100
+        },
+        valueColor: {
+            type: String,
+            default: 'var(--primary-color, Black)'
+        },
+        rangeColor: {
+            type: String,
+            default: 'var(--surface-d, LightGray)'
+        },
+        textColor: {
+            type: String,
+            default: 'var(--text-color-secondary, Black)'
+        },
+        strokeWidth: {
+            type: Number,
+            default: 14
+        },
+        showValue: {
+            type: Boolean,
+            default: true
+        },
+        valueTemplate: {
+            type: String,
+            default: "{value}"
+        }
+    },
+    methods: {
+        updateValue(offsetX, offsetY) {
+            let dx = offsetX - this.size / 2;
+            let dy =  this.size / 2 - offsetY;
+            let angle = Math.atan2(dy, dx);
+            let start = -Math.PI / 2 - Math.PI / 6;
+            this.updateModel(angle, start);
+        },
+        updateModel(angle, start) {
+            let mappedValue;
+            if (angle > this.maxRadians)
+                mappedValue = this.mapRange(angle, this.minRadians, this.maxRadians, this.min, this.max);
+            else if (angle < start)
+                mappedValue = this.mapRange(angle + 2 * Math.PI, this.minRadians, this.maxRadians, this.min, this.max);
+            else
+                return;
+
+            let newValue = Math.round((mappedValue - this.min) / this.step) * this.step + this.min;
+            this.$emit('update:modelValue', newValue);
+            this.$emit('change', newValue);
+        },
+        mapRange(x, inMin, inMax, outMin, outMax) {
+            return (x - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
+        },
+        onClick(event) {
+            if (!this.disabled && !this.readonly) {
+                this.updateValue(event.offsetX, event.offsetY);
+            }
+        },
+        onMouseDown(event) {
+            if (!this.disabled && !this.readonly) {
+                window.addEventListener('mousemove', this.onMouseMove);
+                window.addEventListener('mouseup', this.onMouseUp);
+                event.preventDefault();
+            }
+        },
+        onMouseUp(event) {
+            if (!this.disabled && !this.readonly) {
+                window.removeEventListener('mousemove', this.onMouseMove);
+                window.removeEventListener('mouseup', this.onMouseUp);
+                event.preventDefault();
+            }
+        },
+        onTouchStart(event) {
+            if (!this.disabled && !this.readonly) {
+                window.addEventListener('touchmove', this.onTouchMove);
+                window.addEventListener('touchend', this.onTouchEnd);
+                event.preventDefault();
+            }
+        },
+        onTouchEnd(event) {
+            if (!this.disabled && !this.readonly) {
+                window.removeEventListener('touchmove', this.onTouchMove);
+                window.removeEventListener('touchend', this.onTouchEnd);
+                event.preventDefault();
+            }
+        },
+        onMouseMove(event) {
+            if (!this.disabled && !this.readonly) {
+                this.updateValue(event.offsetX, event.offsetY);
+                event.preventDefault();
+            }
+        },
+        onTouchMove(event) {
+            if (!this.disabled && !this.readonly && event.touches.length == 1) {
+                const rect = this.$el.getBoundingClientRect();
+                const touch = event.targetTouches.item(0);
+                const offsetX = touch.clientX - rect.left;
+                const offsetY = touch.clientY - rect.top;
+                this.updateValue(offsetX, offsetY);
+            }
+        }
+    },
+    computed: {
+        containerClass() {
+            return [
+                'p-knob p-component', {
+                    'p-disabled': this.disabled
+                }
+            ];
+        },
+        style () {
+            return {
+                height: this.responsive ? this.size + '%' : this.size - 5 + 'px'
+            };
+        },
+        computedSize() {
+            return this.responsive ? this.size + '%' : this.size;
+        },
+        rangePath() {
+            return `M ${this.minX} ${this.minY} A ${this.radius} ${this.radius} 0 1 1 ${this.maxX} ${this.maxY}`;
+        },
+        valuePath() {
+            return `M ${this.zeroX} ${this.zeroY} A ${this.radius} ${this.radius} 0 ${this.largeArc} ${this.sweep} ${this.valueX} ${this.valueY}`;
+        },
+        zeroRadians() {
+            if (this.min > 0 && this.max > 0)
+                return this.mapRange(this.min, this.min, this.max, this.minRadians, this.maxRadians);
+            else
+                return this.mapRange(0, this.min, this.max, this.minRadians, this.maxRadians);
+        },
+        valueRadians() {
+            return this.mapRange(this.modelValue, this.min, this.max, this.minRadians, this.maxRadians);
+        },
+        minX() {
+            return this.midX + Math.cos(this.minRadians) * this.radius;
+        },
+        minY() {
+            return this.midY - Math.sin(this.minRadians) * this.radius;
+        },
+        maxX() {
+            return this.midX + Math.cos(this.maxRadians) * this.radius;
+        },
+        maxY() {
+            return this.midY - Math.sin(this.maxRadians) * this.radius;
+        },
+        zeroX() {
+            return this.midX + Math.cos(this.zeroRadians) * this.radius;
+        },
+        zeroY() {
+            return this.midY - Math.sin(this.zeroRadians) * this.radius;
+        },
+        valueX() {
+            return this.midX + Math.cos(this.valueRadians) * this.radius;
+        },
+        valueY() {
+            return this.midY - Math.sin(this.valueRadians) * this.radius;
+        },
+        largeArc() {
+            return Math.abs(this.zeroRadians - this.valueRadians) < Math.PI ? 0 : 1;
+        },
+        sweep() {
+            return this.valueRadians > this.zeroRadians ? 0 : 1;
+        },
+        valueToDisplay() {
+            return this.valueTemplate.replaceAll("{value}", this.modelValue);
+        }
+    }
+}
+//Inspired from https://github.com/kramer99/vue-knob-control
+</script>
+
+<style>
+@keyframes dash-frame {
+    100% {
+        stroke-dashoffset: 0;
+    }
+}
+.p-knob-range {
+    fill: none;
+    transition: stroke .1s ease-in;
+}
+.p-knob-value {
+    animation-name: dash-frame;
+    animation-fill-mode: forwards;
+    fill: none;
+}
+.p-knob-text {
+    font-size: 1.3rem;
+    text-align: center;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index af6f556bb..eaf59b0a6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -41,6 +41,7 @@ import InputMask from './components/inputmask/InputMask';
 import InputNumber from './components/inputnumber/InputNumber';
 import InputSwitch from './components/inputswitch/InputSwitch';
 import InputText from './components/inputtext/InputText';
+import Knob from './components/knob/Knob';
 import Listbox from './components/listbox/Listbox';
 import MegaMenu from './components/megamenu/MegaMenu';
 import Menu from './components/menu/Menu';
@@ -156,6 +157,7 @@ app.component('InputMask', InputMask);
 app.component('InputNumber', InputNumber);
 app.component('InputSwitch', InputSwitch);
 app.component('InputText', InputText);
+app.component('Knob', Knob);
 app.component('Listbox', Listbox);
 app.component('MegaMenu', MegaMenu);
 app.component('Menu', Menu);
diff --git a/src/router/index.js b/src/router/index.js
index 8d92ce18b..c96a0e2be 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -397,6 +397,11 @@ const routes = [
         name: 'splitter',
         component: () => import('../views/splitter/SplitterDemo.vue')
     },
+    {
+        path: '/knob',
+        name: 'knob',
+        component: () => import('../views/knob/KnobDemo.vue')
+    },
     {
         path: '/listbox',
         name: 'listbox',
diff --git a/src/views/knob/KnobDemo.vue b/src/views/knob/KnobDemo.vue
new file mode 100644
index 000000000..cebeb40ff
--- /dev/null
+++ b/src/views/knob/KnobDemo.vue
@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Knob</h1>
+                <p>Knob is a form component to define number inputs with a dial.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <div class="p-grid p-formgrid p-text-center">
+                    <div class="p-field p-col-12 p-md-4">
+                        <h5>Basic</h5>
+                        <Knob v-model="value1" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <h5>Readonly</h5>
+                        <Knob v-model="value2" readonly />
+                    </div>
+                     <div class="p-field p-col-12 p-md-4">
+                         <h5>Disabled</h5>
+                        <Knob v-model="value3" disabled />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <h5 class="p-mt-3">Min/Max</h5>
+                        <Knob v-model="value4" :min="-50" :max="50" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <h5 class="p-mt-3">Step</h5>
+                        <Knob v-model="value5" :step="10" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                         <h5 class="p-mt-3">Template</h5>
+                        <Knob v-model="value6" valueTemplate="{value}%" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <h5 class="p-mt-3">Stroke</h5>
+                        <Knob v-model="value7" :strokeWidth="5" />
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <h5 class="p-mt-3">Size</h5>
+                        <Knob v-model="value8" :size="200"/>
+                    </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <h5 class="p-mt-3">Color</h5>
+                        <Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise"  />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <KnobDoc />
+    </div>
+</template>
+
+<script>
+import KnobDoc from './KnobDoc';
+
+export default {
+    data() {
+        return {
+            value1: 0,
+            value2: 50,
+            value3: 75,
+            value4: 10,
+            value5: 40,
+            value6: 60,
+            value7: 40,
+            value8: 60,
+            value9: 50,
+        }
+    },
+    components: {
+        'KnobDoc': KnobDoc
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/knob/KnobDoc.vue b/src/views/knob/KnobDoc.vue
new file mode 100644
index 000000000..cc8a11c5d
--- /dev/null
+++ b/src/views/knob/KnobDoc.vue
@@ -0,0 +1,275 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h5>Import</h5>
+<pre v-code.script>
+<code>
+import Knob from 'primevue/knob';
+
+</code></pre>
+
+				<h5>Getting Started</h5>
+				<p>Knob is an input component and used with the standard <i>v-model</i> directive.</p>
+<pre v-code>
+<code>
+&lt;Knob v-model="value" /&gt;
+
+</code></pre>
+<pre v-code.script>
+<code>
+data() {
+	return {
+		value: 0
+	}
+}
+
+</code></pre>
+
+				<h5>Minimum and Maximum</h5>
+				<p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
+<pre v-code>
+<code>
+&lt;Knob v-model="value" :min="-50" :max="10" /&gt;
+
+</code></pre>
+
+				<h5>Step</h5>
+				<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
+<pre v-code>
+<code>
+&lt;Knob v-model="value" :step="10" /&gt;
+
+</code></pre>
+
+				<h5>Styling</h5>
+				<p><i>valueColor</i> defines the value color, <i>rangeColor</i> defines the range background and similarly <i>textColor</i> configures the color of the value text. 
+				In addition, <i>strokeWidth</i> is used to determine the width of the stroke of range and value sections.</p>
+<pre v-code>
+<code>
+&lt;Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise"  /&gt;
+
+</code></pre>
+
+				<h5>Size</h5>
+				<p>Default size of the Knob is 100 pixels for width and height, use the <i>size</i> property to customize it per your requirements.</p>
+<pre v-code>
+<code>
+&lt;Knob v-model="value" :size="200" /&gt;
+
+</code></pre>
+
+				<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>modelValue</td>
+                                <td>number</td>
+                                <td>null</td>
+                                <td>Value of the component.</td>
+                            </tr>
+							<tr>
+                                <td>disabled</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>When present, it specifies that the component should be disabled.</td>
+                            </tr>
+							<tr>
+                                <td>readonly</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>When present, it specifies that the component value cannot be edited.</td>
+                            </tr>
+							<tr>
+                                <td>step</td>
+                                <td>number</td>
+                                <td>null</td>
+                                <td>Step factor to increment/decrement the value.</td>
+                            </tr>
+							<tr>
+                                <td>min</td>
+                                <td>number</td>
+                                <td>0</td>
+                                <td>Mininum boundary value.</td>
+                            </tr>
+							<tr>
+                                <td>max</td>
+                                <td>number</td>
+                                <td>100</td>
+                                <td>Maximum boundary value.</td>
+                            </tr>
+							<tr>
+                                <td>valueColor</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Background of the value.</td>
+                            </tr>
+							<tr>
+                                <td>rangeColor</td>
+                                <td>number</td>
+                                <td>null</td>
+                                <td>Background color of the range.</td>
+                            </tr>
+							<tr>
+                                <td>textColor</td>
+                                <td>number</td>
+                                <td>null</td>
+                                <td>Color of the value text.</td>
+                            </tr>
+							<tr>
+                                <td>strokeWidth</td>
+                                <td>number</td>
+                                <td>14</td>
+                                <td>Width of the knob stroke.</td>
+                            </tr>
+							<tr>
+                                <td>showValue</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Whether the show the value inside the knob.</td>
+                            </tr>
+							<tr>
+                                <td>valueTemplate</td>
+                                <td>string</td>
+                                <td>{value}</td>
+                                <td>Template string of the value.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Events</h5>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Parameters</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>change</td>
+                                <td>value: New value </td>
+                                <td>Callback to invoke when the value changes.</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-knob</td>
+                                <td>Container element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-knob-text</td>
+                                <td>Text element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-knob-value</td>
+                                <td>Value element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-knob-text</td>
+                                <td>Text element.</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/knob" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<pre v-code>
+<code><template v-pre>
+&lt;div class="p-grid p-formgrid p-text-center"&gt;
+	&lt;div class="p-field p-col-12 p-md-4"&gt;
+		&lt;h5&gt;Basic&lt;/h5&gt;
+		&lt;Knob v-model="value1" /&gt;
+	&lt;/div&gt;
+	&lt;div class="p-field p-col-12 p-md-4"&gt;
+		&lt;h5&gt;Readonly&lt;/h5&gt;
+		&lt;Knob v-model="value2" readonly /&gt;
+	&lt;/div&gt;
+		&lt;div class="p-field p-col-12 p-md-4"&gt;
+			&lt;h5&gt;Disabled&lt;/h5&gt;
+		&lt;Knob v-model="value3" disabled /&gt;
+	&lt;/div&gt;
+	&lt;div class="p-field p-col-12 p-md-4"&gt;
+		&lt;h5 class="p-mt-3"&gt;Min/Max&lt;/h5&gt;
+		&lt;Knob v-model="value4" :min="-50" :max="50" /&gt;
+	&lt;/div&gt;
+	&lt;div class="p-field p-col-12 p-md-4"&gt;
+		&lt;h5 class="p-mt-3"&gt;Step&lt;/h5&gt;
+		&lt;Knob v-model="value5" :step="10" /&gt;
+	&lt;/div&gt;
+	&lt;div class="p-field p-col-12 p-md-4"&gt;
+			&lt;h5 class="p-mt-3"&gt;Template&lt;/h5&gt;
+		&lt;Knob v-model="value6" valueTemplate="{value}%" /&gt;
+	&lt;/div&gt;
+	&lt;div class="p-field p-col-12 p-md-4"&gt;
+		&lt;h5 class="p-mt-3"&gt;Stroke&lt;/h5&gt;
+		&lt;Knob v-model="value7" :strokeWidth="5" /&gt;
+	&lt;/div&gt;
+	&lt;div class="p-field p-col-12 p-md-4"&gt;
+		&lt;h5 class="p-mt-3"&gt;Size&lt;/h5&gt;
+		&lt;Knob v-model="value8" :size="200"/&gt;
+	&lt;/div&gt;
+	&lt;div class="p-field p-col-12 p-md-4"&gt;
+		&lt;h5 class="p-mt-3"&gt;Color&lt;/h5&gt;
+		&lt;Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise"  /&gt;
+	&lt;/div&gt;
+&lt;/div&gt;
+</template>
+</code></pre>
+
+<pre v-code.script>
+<code>
+export default {
+    data() {
+        return {
+            value1: 0,
+            value2: 50,
+            value3: 75,
+            value4: 10,
+            value5: 40,
+            value6: 60,
+            value7: 40,
+            value8: 60,
+            value9: 50,
+        }
+    }
+}
+
+</code></pre>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>