From 63904d1784ea9cc6c9f0abf70bf615cb8177225d Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 26 May 2024 01:37:01 +0300
Subject: [PATCH] Wrap password content

---
 components/lib/password/Password.d.ts         |  4 ++++
 components/lib/password/Password.vue          |  8 +++++---
 .../lib/password/style/PasswordStyle.js       |  6 +++++-
 components/lib/themes/aura/password/index.js  |  4 +++-
 components/lib/themes/lara/password/index.js  |  4 +++-
 components/lib/themes/nora/password/index.js  |  4 +++-
 doc/password/TemplateDoc.vue                  | 20 ++++++++-----------
 7 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/components/lib/password/Password.d.ts b/components/lib/password/Password.d.ts
index 9fcab31e4..40c683530 100755
--- a/components/lib/password/Password.d.ts
+++ b/components/lib/password/Password.d.ts
@@ -87,6 +87,10 @@ export interface PasswordPassThroughOptions {
      * Used to pass attributes to the overlay's DOM element.
      */
     overlay?: PasswordPassThroughOptionType;
+    /**
+     * Used to pass attributes to the overlay's content DOM element.
+     */
+    content?: PasswordPassThroughOptionType;
     /**
      * Used to pass attributes to the meter's DOM element.
      */
diff --git a/components/lib/password/Password.vue b/components/lib/password/Password.vue
index 026daef40..b9e395edf 100755
--- a/components/lib/password/Password.vue
+++ b/components/lib/password/Password.vue
@@ -49,10 +49,12 @@
                 >
                     <slot name="header"></slot>
                     <slot name="content">
-                        <div :class="cx('meter')" v-bind="ptm('meter')">
-                            <div :class="cx('meterLabel')" :style="{ width: meter ? meter.width : '' }" v-bind="ptm('meterLabel')"></div>
+                        <div :class="cx('content')" v-bind="ptm('content')">
+                            <div :class="cx('meter')" v-bind="ptm('meter')">
+                                <div :class="cx('meterLabel')" :style="{ width: meter ? meter.width : '' }" v-bind="ptm('meterLabel')"></div>
+                            </div>
+                            <div :class="cx('info')" v-bind="ptm('info')">{{ infoText }}</div>
                         </div>
-                        <div :class="cx('info')" v-bind="ptm('info')">{{ infoText }}</div>
                     </slot>
                     <slot name="footer"></slot>
                 </div>
diff --git a/components/lib/password/style/PasswordStyle.js b/components/lib/password/style/PasswordStyle.js
index ee8fd5df9..98cd38368 100644
--- a/components/lib/password/style/PasswordStyle.js
+++ b/components/lib/password/style/PasswordStyle.js
@@ -51,9 +51,12 @@ const theme = ({ dt }) => `
     border: 1px solid ${dt('password.overlay.border.color')};
     box-shadow: ${dt('password.overlay.shadow')};
     border-radius: ${dt('password.overlay.border.radius')};
+}
+
+.p-password-content {
     display: flex;
     flex-direction: column;
-    gap: ${dt('password.overlay.gap')}
+    gap: ${dt('password.content.gap')};
 }
 
 .p-password-toggle-mask-icon {
@@ -87,6 +90,7 @@ const classes = {
     maskIcon: 'p-password-toggle-mask-icon p-password-mask-icon',
     unmaskIcon: 'p-password-toggle-mask-icon p-password-unmask-icon',
     overlay: 'p-password-overlay p-component',
+    content: 'p-password-content',
     meter: 'p-password-meter',
     meterLabel: ({ instance }) => `p-password-meter-label ${instance.meter ? 'p-password-meter-' + instance.meter.strength : ''}`,
     meterText: 'p-password-meter-text'
diff --git a/components/lib/themes/aura/password/index.js b/components/lib/themes/aura/password/index.js
index 25cfdf5d7..cd04fee76 100644
--- a/components/lib/themes/aura/password/index.js
+++ b/components/lib/themes/aura/password/index.js
@@ -13,7 +13,9 @@ export default {
         borderRadius: '{overlay.popover.border.radius}',
         color: '{overlay.popover.color}',
         padding: '{overlay.popover.padding}',
-        shadow: '{overlay.popover.shadow}',
+        shadow: '{overlay.popover.shadow}'
+    },
+    content: {
         gap: '0.5rem'
     },
     colorScheme: {
diff --git a/components/lib/themes/lara/password/index.js b/components/lib/themes/lara/password/index.js
index f01c9c9b8..61e8726a0 100644
--- a/components/lib/themes/lara/password/index.js
+++ b/components/lib/themes/lara/password/index.js
@@ -13,7 +13,9 @@ export default {
         borderRadius: '{overlay.popover.border.radius}',
         color: '{overlay.popover.color}',
         padding: '{overlay.popover.padding}',
-        shadow: '{overlay.popover.shadow}',
+        shadow: '{overlay.popover.shadow}'
+    },
+    content: {
         gap: '0.75rem'
     },
     colorScheme: {
diff --git a/components/lib/themes/nora/password/index.js b/components/lib/themes/nora/password/index.js
index ad09beb5b..b4e4dffa7 100644
--- a/components/lib/themes/nora/password/index.js
+++ b/components/lib/themes/nora/password/index.js
@@ -12,7 +12,9 @@ export default {
         borderRadius: '{overlay.popover.border.radius}',
         color: '{overlay.popover.color}',
         padding: '{overlay.popover.padding}',
-        shadow: '{overlay.popover.shadow}',
+        shadow: '{overlay.popover.shadow}'
+    },
+    content: {
         gap: '0.5rem'
     },
     colorScheme: {
diff --git a/doc/password/TemplateDoc.vue b/doc/password/TemplateDoc.vue
index 01a6c95ef..9b8735603 100644
--- a/doc/password/TemplateDoc.vue
+++ b/doc/password/TemplateDoc.vue
@@ -5,12 +5,11 @@
     <div class="card flex justify-center">
         <Password v-model="value">
             <template #header>
-                <h6>Pick a password</h6>
+                <div class="font-semibold text-xm mb-4">Pick a password</div>
             </template>
             <template #footer>
                 <Divider />
-                <p class="mt-2">Suggestions</p>
-                <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
+                <ul class="pl-2 ml-2 my-0 leading-normal">
                     <li>At least one lowercase</li>
                     <li>At least one uppercase</li>
                     <li>At least one numeric</li>
@@ -31,12 +30,11 @@ export default {
                 basic: `
 <Password v-model="value">
     <template #header>
-        <h6>Pick a password</h6>
+        <div class="font-semibold text-xm mb-4">Pick a password</div>
     </template>
     <template #footer>
         <Divider />
-        <p class="mt-2">Suggestions</p>
-        <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
+        <ul class="pl-2 ml-2 my-0 leading-normal">
             <li>At least one lowercase</li>
             <li>At least one uppercase</li>
             <li>At least one numeric</li>
@@ -50,12 +48,11 @@ export default {
     <div class="card flex justify-center">
         <Password v-model="value">
             <template #header>
-                <h6>Pick a password</h6>
+                <div class="font-semibold text-xm mb-4">Pick a password</div>
             </template>
             <template #footer>
                 <Divider />
-                <p class="mt-2">Suggestions</p>
-                <ul class="pl-2 ml-2 style="line-height: 1.5">
+                <ul class="pl-2 ml-2 my-0 leading-normal">
                     <li>At least one lowercase</li>
                     <li>At least one uppercase</li>
                     <li>At least one numeric</li>
@@ -81,12 +78,11 @@ export default {
     <div class="card flex justify-center">
         <Password v-model="value">
             <template #header>
-                <h6>Pick a password</h6>
+                <div class="font-semibold text-xm mb-4">Pick a password</div>
             </template>
             <template #footer>
                 <Divider />
-                <p class="mt-2">Suggestions</p>
-                <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
+                <ul class="pl-2 ml-2 my-0 leading-normal">
                     <li>At least one lowercase</li>
                     <li>At least one uppercase</li>
                     <li>At least one numeric</li>