PT code section fix

doc/inputmask/pt/PTDoc.vue

@@ -1,7 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs">
+    <DocSectionText v-bind="$attrs"></DocSectionText>
-        <p>InputMask is used as a controlled input with <i>v-model</i> properties.</p>
-    </DocSectionText>
     <div class="card flex justify-content-center">
         <InputMask
             id="basic"
@@ -23,11 +21,27 @@ export default {
             value: '',
             code: {
                 basic: `
-<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />`,
+<InputMask
+    id="basic"
+    v-model="value"
+    mask="99-999999"
+    placeholder="99-999999"
+    :pt="{
+        root: { class: 'border-teal-400' }
+    }"
+/>`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
+        <InputMask
+            id="basic"
+            v-model="value"
+            mask="99-999999"
+            placeholder="99-999999"
+            :pt="{
+                root: { class: 'border-teal-400' }
+            }"
+        />
     </div>
 </template>
 
@@ -44,7 +58,15 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
+        <InputMask
+            id="basic"
+            v-model="value"
+            mask="99-999999"
+            placeholder="99-999999"
+            :pt="{
+                root: { class: 'border-teal-400' }
+            }"
+        />
     </div>
 </template>
 

doc/inputtext/pt/PTDoc.vue

@@ -19,11 +19,23 @@ export default {
             value: null,
             code: {
                 basic: `
-<InputText type="text" v-model="value" />`,
+<InputText
+    v-model="value"
+    type="text"
+    :pt="{
+        root: { class: 'border-teal-400' }
+    }"
+/>`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <InputText type="text" v-model="value" />
+        <InputText
+            v-model="value"
+            type="text"
+            :pt="{
+                root: { class: 'border-teal-400' }
+            }"
+        />
     </div>
 </template>
 
@@ -40,7 +52,13 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <InputText type="text" v-model="value" />
+        <InputText
+            v-model="value"
+            type="text"
+            :pt="{
+                root: { class: 'border-teal-400' }
+            }"
+        />
     </div>
 </template>
 

doc/password/pt/PTDoc.vue

@@ -1,7 +1,5 @@
 <template>
-    <DocSectionText v-bind="$attrs">
+    <DocSectionText v-bind="$attrs"></DocSectionText>
-        <p>Strength meter is displayed as a popup while a value is being entered.</p>
-    </DocSectionText>
     <div class="card flex justify-content-center">
         <Password
             v-model="value"
@@ -20,11 +18,21 @@ export default {
             value: null,
             code: {
                 basic: `
-<Password v-model="value" />`,
+<Password
+    v-model="value"
+    :pt="{
+        info: { class: 'font-bold' }
+    }"
+/>`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Password v-model="value" />
+        <Password
+            v-model="value"
+            :pt="{
+                info: { class: 'font-bold' }
+            }"
+        />
     </div>
 </template>
 
@@ -40,7 +48,12 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Password v-model="value" />
+        <Password
+            v-model="value"
+            :pt="{
+                info: { class: 'font-bold' }
+            }"
+        />
     </div>
 </template>