Wrap password content

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.
      */

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('content')" v-bind="ptm('content')">
-                            <div :class="cx('meterLabel')" :style="{ width: meter ? meter.width : '' }" v-bind="ptm('meterLabel')"></div>
+                            <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>

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'

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: {

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: {

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: {

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 my-0 leading-normal">
-                <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
                     <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 my-0 leading-normal">
-        <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
             <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 my-0 leading-normal">
-                <ul class="pl-2 ml-2 style="line-height: 1.5">
                     <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 my-0 leading-normal">
-                <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
                     <li>At least one lowercase</li>
                     <li>At least one uppercase</li>
                     <li>At least one numeric</li>