From 04ebd6c38444741006568fd3b5336ac719a307d2 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 30 Oct 2024 14:05:09 +0300
Subject: [PATCH 1/2] Change order

---
 apps/showcase/pages/autocomplete/index.vue | 12 ++++++------
 apps/showcase/pages/checkbox/index.vue     | 22 +++++++++++-----------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/apps/showcase/pages/autocomplete/index.vue b/apps/showcase/pages/autocomplete/index.vue
index 3d8dba94a..1599f4ef4 100755
--- a/apps/showcase/pages/autocomplete/index.vue
+++ b/apps/showcase/pages/autocomplete/index.vue
@@ -21,11 +21,11 @@ import ForceSelectionDoc from '@/doc/autocomplete/ForceSelectionDoc.vue';
 import FormsDoc from '@/doc/autocomplete/FormsDoc.vue';
 import GroupDoc from '@/doc/autocomplete/GroupDoc.vue';
 import IftaLabelDoc from '@/doc/autocomplete/IftaLabelDoc.vue';
-import SizesDoc from '@/doc/autocomplete/SizesDoc.vue';
 import ImportDoc from '@/doc/autocomplete/ImportDoc.vue';
 import InvalidDoc from '@/doc/autocomplete/InvalidDoc.vue';
 import MultipleDoc from '@/doc/autocomplete/MultipleDoc.vue';
 import ObjectsDoc from '@/doc/autocomplete/ObjectsDoc.vue';
+import SizesDoc from '@/doc/autocomplete/SizesDoc.vue';
 import TemplateDoc from '@/doc/autocomplete/TemplateDoc.vue';
 import VirtualScrollDoc from '@/doc/autocomplete/VirtualScrollDoc.vue';
 import PTComponent from '@/doc/autocomplete/pt/index.vue';
@@ -45,6 +45,11 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
+                {
+                    id: 'objects',
+                    label: 'Objects',
+                    component: ObjectsDoc
+                },
                 {
                     id: 'forms',
                     label: 'Forms',
@@ -55,11 +60,6 @@ export default {
                     label: 'Dropdown',
                     component: DropdownDoc
                 },
-                {
-                    id: 'objects',
-                    label: 'Objects',
-                    component: ObjectsDoc
-                },
                 {
                     id: 'template',
                     label: 'Template',
diff --git a/apps/showcase/pages/checkbox/index.vue b/apps/showcase/pages/checkbox/index.vue
index 68615ec91..89c6132ad 100755
--- a/apps/showcase/pages/checkbox/index.vue
+++ b/apps/showcase/pages/checkbox/index.vue
@@ -20,9 +20,9 @@ import FormsDoc from '@/doc/checkbox/FormsDoc.vue';
 import GroupDoc from '@/doc/checkbox/GroupDoc.vue';
 import ImportDoc from '@/doc/checkbox/ImportDoc.vue';
 import IndeterminateDoc from '@/doc/checkbox/IndeterminateDoc.vue';
-import SizesDoc from '@/doc/checkbox/SizesDoc.vue';
 import InvalidDoc from '@/doc/checkbox/InvalidDoc.vue';
 import PTComponent from '@/doc/checkbox/pt/index.vue';
+import SizesDoc from '@/doc/checkbox/SizesDoc.vue';
 import ThemingDoc from '@/doc/checkbox/theming/index.vue';
 
 export default {
@@ -39,26 +39,26 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
-                {
-                    id: 'forms',
-                    label: 'Forms',
-                    component: FormsDoc
-                },
-                {
-                    id: 'indeterminate',
-                    label: 'Indeterminate',
-                    component: IndeterminateDoc
-                },
                 {
                     id: 'group',
                     label: 'Group',
                     component: GroupDoc
                 },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
                 {
                     id: 'dynamic',
                     label: 'Dynamic',
                     component: DynamicDoc
                 },
+                {
+                    id: 'indeterminate',
+                    label: 'Indeterminate',
+                    component: IndeterminateDoc
+                },
                 {
                     id: 'filled',
                     label: 'Filled',

From b59ad4db99123bc75213b23432acd76db6fc0e97 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 30 Oct 2024 14:18:22 +0300
Subject: [PATCH 2/2] Update wording

---
 apps/showcase/doc/autocomplete/BasicDoc.vue   |  2 +-
 apps/showcase/doc/cascadeselect/BasicDoc.vue  |  2 +-
 apps/showcase/doc/checkbox/BasicDoc.vue       | 10 +++++-----
 apps/showcase/doc/colorpicker/BasicDoc.vue    |  2 +-
 apps/showcase/doc/datepicker/BasicDoc.vue     |  2 +-
 apps/showcase/doc/editor/BasicDoc.vue         |  2 +-
 apps/showcase/doc/inputmask/BasicDoc.vue      |  2 +-
 apps/showcase/doc/inputnumber/NumeralsDoc.vue |  2 +-
 apps/showcase/doc/inputotp/BasicDoc.vue       |  2 +-
 apps/showcase/doc/inputtext/BasicDoc.vue      |  2 +-
 apps/showcase/doc/knob/BasicDoc.vue           |  2 +-
 apps/showcase/doc/listbox/BasicDoc.vue        |  2 +-
 apps/showcase/doc/multiselect/BasicDoc.vue    |  4 ++--
 apps/showcase/doc/password/BasicDoc.vue       |  2 +-
 apps/showcase/doc/radiobutton/GroupDoc.vue    |  2 +-
 apps/showcase/doc/rating/BasicDoc.vue         |  2 +-
 apps/showcase/doc/select/BasicDoc.vue         |  4 ++--
 apps/showcase/doc/selectbutton/BasicDoc.vue   |  2 +-
 apps/showcase/doc/slider/BasicDoc.vue         |  2 +-
 apps/showcase/doc/textarea/BasicDoc.vue       |  2 +-
 apps/showcase/doc/togglebutton/BasicDoc.vue   |  2 +-
 apps/showcase/doc/toggleswitch/BasicDoc.vue   |  2 +-
 apps/showcase/doc/treeselect/BasicDoc.vue     |  2 +-
 23 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/apps/showcase/doc/autocomplete/BasicDoc.vue b/apps/showcase/doc/autocomplete/BasicDoc.vue
index d798b6634..c46d0f33a 100644
--- a/apps/showcase/doc/autocomplete/BasicDoc.vue
+++ b/apps/showcase/doc/autocomplete/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>AutoComplete is used with the <i>v-model</i> property. In addition, <i>suggestions</i> property and a <i>complete</i> method are required to query the results.</p>
+        <p>AutoComplete is used with the <i>v-model</i> property for two-way value binding. In addition, <i>suggestions</i> property and a <i>complete</i> method are required to query the results.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" />
diff --git a/apps/showcase/doc/cascadeselect/BasicDoc.vue b/apps/showcase/doc/cascadeselect/BasicDoc.vue
index cb3b96263..3812c19aa 100644
--- a/apps/showcase/doc/cascadeselect/BasicDoc.vue
+++ b/apps/showcase/doc/cascadeselect/BasicDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            CascadeSelect is used as a controlled component with <i>v-model</i> property along with an <i>options</i> collection. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is
+            CascadeSelect is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is
             required to define the property that refers to the children of a group. Note that order of the <i>optionGroupChildren</i> matters as it should correspond to the data hierarchy.
         </p>
     </DocSectionText>
diff --git a/apps/showcase/doc/checkbox/BasicDoc.vue b/apps/showcase/doc/checkbox/BasicDoc.vue
index c75d66dfc..233714e8f 100644
--- a/apps/showcase/doc/checkbox/BasicDoc.vue
+++ b/apps/showcase/doc/checkbox/BasicDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Binary checkbox is used as a controlled input with <i>v-model</i> and <i>binary</i> properties.</p>
+        <p>Binary checkbox is used with the <i>v-model</i> for two-way value binding and the <i>binary</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Checkbox v-model="checked" :binary="true" />
+        <Checkbox v-model="checked" binary />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             checked: false,
             code: {
                 basic: `
-<Checkbox v-model="checked" :binary="true" />
+<Checkbox v-model="checked" binary />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <Checkbox v-model="checked" :binary="true" />
+        <Checkbox v-model="checked" binary />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <Checkbox v-model="checked" :binary="true" />
+        <Checkbox v-model="checked" binary />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/colorpicker/BasicDoc.vue b/apps/showcase/doc/colorpicker/BasicDoc.vue
index 44991ad8f..8e1b824b4 100644
--- a/apps/showcase/doc/colorpicker/BasicDoc.vue
+++ b/apps/showcase/doc/colorpicker/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>ColorPicker is used as a controlled input with <i>v-model</i> property.</p>
+        <p>ColorPicker is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <ColorPicker v-model="color" />
diff --git a/apps/showcase/doc/datepicker/BasicDoc.vue b/apps/showcase/doc/datepicker/BasicDoc.vue
index 414d31af6..11b63e4b0 100644
--- a/apps/showcase/doc/datepicker/BasicDoc.vue
+++ b/apps/showcase/doc/datepicker/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>DatePicker uses a controlled input component with <i>v-model</i> property.</p>
+        <p>DatePicker is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <DatePicker v-model="date" />
diff --git a/apps/showcase/doc/editor/BasicDoc.vue b/apps/showcase/doc/editor/BasicDoc.vue
index 7a3053a22..612d7a8d7 100644
--- a/apps/showcase/doc/editor/BasicDoc.vue
+++ b/apps/showcase/doc/editor/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>A model can be bound using the standard <i>v-model</i> directive.</p>
+        <p>Editor is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card">
         <Editor v-model="value" editorStyle="height: 320px" />
diff --git a/apps/showcase/doc/inputmask/BasicDoc.vue b/apps/showcase/doc/inputmask/BasicDoc.vue
index 0224cddc8..4974c0247 100644
--- a/apps/showcase/doc/inputmask/BasicDoc.vue
+++ b/apps/showcase/doc/inputmask/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>InputMask is used with the <i>v-model</i> property.</p>
+        <p>InputMask is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
diff --git a/apps/showcase/doc/inputnumber/NumeralsDoc.vue b/apps/showcase/doc/inputnumber/NumeralsDoc.vue
index 44b9881ee..20750e2f7 100644
--- a/apps/showcase/doc/inputnumber/NumeralsDoc.vue
+++ b/apps/showcase/doc/inputnumber/NumeralsDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>InputNumber is used as a controlled input with <i>v-model</i> property.</p>
+        <p>InputNumber is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
diff --git a/apps/showcase/doc/inputotp/BasicDoc.vue b/apps/showcase/doc/inputotp/BasicDoc.vue
index 11a5b84cf..cd7d63588 100644
--- a/apps/showcase/doc/inputotp/BasicDoc.vue
+++ b/apps/showcase/doc/inputotp/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Two-way value binding is defined using <i>v-model</i>. The number of characters is defined with the <i>length</i> property, which is set to 4 by default.</p>
+        <p>InputOtp is used with the <i>v-model</i> property for two-way value binding. The number of characters is defined with the <i>length</i> option, which is set to 4 by default.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <InputOtp v-model="value" />
diff --git a/apps/showcase/doc/inputtext/BasicDoc.vue b/apps/showcase/doc/inputtext/BasicDoc.vue
index c4d583326..804f28e79 100644
--- a/apps/showcase/doc/inputtext/BasicDoc.vue
+++ b/apps/showcase/doc/inputtext/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>InputText is used with the <i>v-model</i> property.</p>
+        <p>InputText is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <InputText v-model="value" type="text" />
diff --git a/apps/showcase/doc/knob/BasicDoc.vue b/apps/showcase/doc/knob/BasicDoc.vue
index 164587558..915053633 100644
--- a/apps/showcase/doc/knob/BasicDoc.vue
+++ b/apps/showcase/doc/knob/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Knob is an input component and used with the standard <i>v-model</i> directive.</p>
+        <p>Knob is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <Knob v-model="value" />
diff --git a/apps/showcase/doc/listbox/BasicDoc.vue b/apps/showcase/doc/listbox/BasicDoc.vue
index e6a9f83d9..fd59606ab 100644
--- a/apps/showcase/doc/listbox/BasicDoc.vue
+++ b/apps/showcase/doc/listbox/BasicDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Listbox is used as a controlled component with <i>v-model</i> property along with an <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively. Note
+            Listbox is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively. Note
             that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
         </p>
     </DocSectionText>
diff --git a/apps/showcase/doc/multiselect/BasicDoc.vue b/apps/showcase/doc/multiselect/BasicDoc.vue
index 4e88c4afb..3a5fedcd3 100644
--- a/apps/showcase/doc/multiselect/BasicDoc.vue
+++ b/apps/showcase/doc/multiselect/BasicDoc.vue
@@ -1,8 +1,8 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            MultiSelect is used as a controlled component with <i>v-model</i> property along with an <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively. Note
-            that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
+            MultiSelect is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively.
+            Note that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
         </p>
     </DocSectionText>
     <div class="card flex justify-center">
diff --git a/apps/showcase/doc/password/BasicDoc.vue b/apps/showcase/doc/password/BasicDoc.vue
index dc96c87fc..2ccba43be 100644
--- a/apps/showcase/doc/password/BasicDoc.vue
+++ b/apps/showcase/doc/password/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Two-way value binding is defined using <i>v-model</i>.</p>
+        <p>Password is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <Password v-model="value" :feedback="false" />
diff --git a/apps/showcase/doc/radiobutton/GroupDoc.vue b/apps/showcase/doc/radiobutton/GroupDoc.vue
index 78ab413f9..0592368df 100644
--- a/apps/showcase/doc/radiobutton/GroupDoc.vue
+++ b/apps/showcase/doc/radiobutton/GroupDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Two-way value binding is defined using <i>v-model</i>.</p>
+        <p>RadioButton is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <div class="flex flex-wrap gap-4">
diff --git a/apps/showcase/doc/rating/BasicDoc.vue b/apps/showcase/doc/rating/BasicDoc.vue
index 915933511..1daf28d57 100644
--- a/apps/showcase/doc/rating/BasicDoc.vue
+++ b/apps/showcase/doc/rating/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Two-way value binding is defined using <i>v-model</i>.</p>
+        <p>Rating is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <Rating v-model="value" />
diff --git a/apps/showcase/doc/select/BasicDoc.vue b/apps/showcase/doc/select/BasicDoc.vue
index 5f5caf546..5c13e5aea 100644
--- a/apps/showcase/doc/select/BasicDoc.vue
+++ b/apps/showcase/doc/select/BasicDoc.vue
@@ -1,8 +1,8 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Select is used as a controlled component with <i>v-model</i> property along with an <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively. Note that,
-            when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
+            Select is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively. Note
+            that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
         </p>
     </DocSectionText>
     <div class="card flex justify-center">
diff --git a/apps/showcase/doc/selectbutton/BasicDoc.vue b/apps/showcase/doc/selectbutton/BasicDoc.vue
index c2b7e2b4f..e83fac879 100644
--- a/apps/showcase/doc/selectbutton/BasicDoc.vue
+++ b/apps/showcase/doc/selectbutton/BasicDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            SelectButton is used as a controlled component with <i>modelValue</i> property along with an <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively.
+            SelectButton is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i> properties respectively.
             Note that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
         </p>
     </DocSectionText>
diff --git a/apps/showcase/doc/slider/BasicDoc.vue b/apps/showcase/doc/slider/BasicDoc.vue
index e88b9e4be..9f44f23ce 100644
--- a/apps/showcase/doc/slider/BasicDoc.vue
+++ b/apps/showcase/doc/slider/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Two-way binding is defined using the standard <i>v-model</i> directive.</p>
+        <p>Slider is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <Slider v-model="value" class="w-56" />
diff --git a/apps/showcase/doc/textarea/BasicDoc.vue b/apps/showcase/doc/textarea/BasicDoc.vue
index 013ec2b98..59c915acc 100644
--- a/apps/showcase/doc/textarea/BasicDoc.vue
+++ b/apps/showcase/doc/textarea/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>A model can be bound using the standard <i>v-model</i> directive.</p>
+        <p>Textarea is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <Textarea v-model="value" rows="5" cols="30" style="resize: none" />
diff --git a/apps/showcase/doc/togglebutton/BasicDoc.vue b/apps/showcase/doc/togglebutton/BasicDoc.vue
index b4846df3a..1e72a9b8c 100644
--- a/apps/showcase/doc/togglebutton/BasicDoc.vue
+++ b/apps/showcase/doc/togglebutton/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
+        <p>ToggleButton is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <ToggleButton v-model="checked" class="w-24" onLabel="On" offLabel="Off" />
diff --git a/apps/showcase/doc/toggleswitch/BasicDoc.vue b/apps/showcase/doc/toggleswitch/BasicDoc.vue
index c310d436a..a4ccf41ea 100644
--- a/apps/showcase/doc/toggleswitch/BasicDoc.vue
+++ b/apps/showcase/doc/toggleswitch/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Two-way value binding is defined using v-model.</p>
+        <p>ToggleSwitch is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <ToggleSwitch v-model="checked" />
diff --git a/apps/showcase/doc/treeselect/BasicDoc.vue b/apps/showcase/doc/treeselect/BasicDoc.vue
index 3fd32e411..87b8dd5e6 100644
--- a/apps/showcase/doc/treeselect/BasicDoc.vue
+++ b/apps/showcase/doc/treeselect/BasicDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            TreeSelect is used as a controlled component with <i>v-model</i> directive along with an <i>options</i> collection. Internally <PrimeVueNuxtLink to="/tree">Tree</PrimeVueNuxtLink> component is used so the options model is based on
+            TreeSelect is used with the <i>v-model</i> property for two-way value binding along with the <i>options</i> collection. Internally <PrimeVueNuxtLink to="/tree">Tree</PrimeVueNuxtLink> component is used so the options model is based on
             TreeNode API.
         </p>
         <p>In single selection mode, value binding should be the <i>key</i> value of a node.</p>