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 @@ > -
-
+
+
+
+
+
{{ infoText }}
-
{{ infoText }}
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 @@