Skip to content

Commit 4c3fd84

Browse files
mrholekmrholek
committed
feat(PasswordInput): new component release
1 parent cc65183 commit 4c3fd84

File tree

6 files changed

+177
-1
lines changed

6 files changed

+177
-1
lines changed

‎js/src/password-input.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/**
2+
* --------------------------------------------------------------------------
3+
* CoreUI PRO password-input.js
4+
* License (https://coreui.io/pro/license/)
5+
* --------------------------------------------------------------------------
6+
*/
7+
8+
import BaseComponent from './base-component.js'
9+
import EventHandler from './dom/event-handler.js'
10+
import SelectorEngine from './dom/selector-engine.js'
11+
import { defineJQueryPlugin } from './util/index.js'
12+
13+
/**
14+
* Constants
15+
*/
16+
17+
const NAME = 'password-input'
18+
const DATA_KEY = 'coreui.password-input'
19+
const EVENT_KEY = `.${DATA_KEY}`
20+
const DATA_API_KEY = '.data-api'
21+
22+
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
23+
24+
const SELECTOR_FORM_CONTROL = '.form-control'
25+
const SELECTOR_DATA_TOGGLE = `${SELECTOR_FORM_CONTROL}:not([disabled]) ~ [data-coreui-toggle="password"]`
26+
27+
/**
28+
* Class definition
29+
*/
30+
31+
class PasswordInput extends BaseComponent {
32+
// Getters
33+
static get NAME() {
34+
return NAME
35+
}
36+
37+
// Public
38+
toggle() {
39+
this._element.type = this._element.type === 'password' ? 'text' : 'password'
40+
}
41+
42+
// Static
43+
static jQueryInterface(config) {
44+
return this.each(function () {
45+
const data = PasswordInput.getOrCreateInstance(this)
46+
47+
data[config](this)
48+
})
49+
}
50+
}
51+
52+
/**
53+
* Data API implementation
54+
*/
55+
56+
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
57+
event.preventDefault()
58+
59+
const toggler = event.target.closest(SELECTOR_DATA_TOGGLE)
60+
PasswordInput.getOrCreateInstance(SelectorEngine.findOne(SELECTOR_FORM_CONTROL, toggler.parentNode)).toggle()
61+
})
62+
63+
/**
64+
* jQuery
65+
*/
66+
67+
defineJQueryPlugin(PasswordInput)
68+
69+
export default PasswordInput

‎scss/_forms.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@forward "forms/labels";
22
@forward "forms/form-text";
33
@forward "forms/form-control";
4+
@forward "forms/form-password";
45
@forward "forms/form-select";
56
@forward "forms/form-multi-select";
67
@forward "forms/form-check";

‎scss/_variables-dark.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ $accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
203203
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
204204
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
205205

206-
206+
207207
//
208208
// Carousel
209209
//

‎scss/_variables.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1123,6 +1123,18 @@ $form-switch-widths: (
11231123

11241124
$form-check-inline-margin-end: 1rem !default;
11251125

1126+
// scss-docs-start form-password-variables
1127+
$form-password-action-bg: transparent !default;
1128+
$form-password-action-hover-bg: var(--#{$prefix}tertiary-bg) !default;
1129+
$form-password-icon-show: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M256%2C144.927A103.309%2C103.309%2C0%2C1%2C0%2C359.309%2C248.236%2C103.426%2C103.426%2C0%2C0%2C0%2C256%2C144.927Zm0%2C174.618a71.309%2C71.309%2C0%2C1%2C1%2C71.309-71.309A71.39%2C71.39%2C0%2C0%2C1%2C256%2C319.545Z%22%20class%3D%22ci-primary%22/%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M397.222%2C131.1l-.218-.223c-77.75-77.749-204.258-77.749-282.008%2C0L16%2C233.79v28.893l98.778%2C102.689.218.222a199.409%2C199.409%2C0%2C0%2C0%2C282.008%2C0l99-102.911V233.79ZM464%2C249.79l-89.732%2C93.285a167.409%2C167.409%2C0%2C0%2C1-236.536%2C0L48%2C249.79v-3.107L137.729%2C153.4c65.247-65.13%2C171.3-65.13%2C236.542%2C0L464%2C246.683Z%22%20class%3D%22ci-primary%22/%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20x%3D%22240%22%20y%3D%22232%22%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20class%3D%22ci-primary%22/%3E%3C/svg%3E") !default;
1130+
$form-password-icon-hide: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M397.222%2C131.1l-.218-.223C333.831%2C67.707%2C238.47%2C55.862%2C163.228%2C95.346l23.938%2C23.939c61.571-27.691%2C136.573-16.327%2C187.105%2C34.115L464%2C246.683v3.107l-71.744%2C74.585%2C22.63%2C22.63L496%2C262.683V233.79Z%22%20class%3D%22ci-primary%22/%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M352.8%2C284.33A103.307%2C103.307%2C0%2C0%2C0%2C219.907%2C151.438L246.1%2C177.63a71.228%2C71.228%2C0%2C0%2C1%2C80.507%2C80.508Z%22%20class%3D%22ci-primary%22/%3E%3Cpath%20fill%3D%22var(--ci-primary-color%2C%20currentColor)%22%20d%3D%22M369.9%2C347.268l-33.831-33.831c.088-.108.179-.212.266-.32l-22.805-22.806c-.083.113-.169.222-.253.334l-99.681-99.681c.112-.083.221-.17.334-.253L191.12%2C167.906c-.108.087-.213.179-.321.266L38.627%2C16H16V38.627l95.689%2C95.689L16%2C233.79v28.893l98.778%2C102.689.218.222A199.732%2C199.732%2C0%2C0%2C0%2C367.372%2C390l106%2C106H496V473.373L392.537%2C369.911Zm-177.157-131.9L288.871%2C311.5a71.28%2C71.28%2C0%2C0%2C1-96.133-96.133ZM137.729%2C343.073%2C48%2C249.79v-3.107l86.319-89.737%2C35.065%2C35.064A103.248%2C103.248%2C0%2C0%2C0%2C312.226%2C334.853l32.007%2C32.007C279.723%2C406.875%2C193.711%2C398.955%2C137.729%2C343.073Z%22%20class%3D%22ci-primary%22/%3E%3C/svg%3E") !default;
1131+
$form-password-icon-color: var(--#{$prefix}tertiary-color) !default;
1132+
$form-password-icon-hover-color: var(--#{$prefix}secondary-color) !default;
1133+
$form-password-icon-size: 1.25rem !default;
1134+
$form-password-icon-size-lg: 1.5rem !default;
1135+
$form-password-icon-size-sm: 1rem !default;
1136+
// scss-docs-end form-password-variables
1137+
11261138
// scss-docs-start input-group-variables
11271139
$input-group-addon-padding-y: $input-padding-y !default;
11281140
$input-group-addon-padding-x: $input-padding-x !default;

‎scss/forms/_form-password.import.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@forward "form-password";

‎scss/forms/_form-password.scss‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
@use "sass:math";
2+
@use "../mixins/border-radius" as *;
3+
@use "../mixins/box-shadow" as *;
4+
@use "../mixins/transition" as *;
5+
@use "../variables" as *;
6+
7+
8+
.form-password {
9+
position: relative;
10+
11+
.form-control {
12+
padding-inline-end: ($input-line-height * $input-font-size) + ($input-padding-y * 2);
13+
}
14+
15+
.form-password-action {
16+
$size: ($input-line-height * $input-font-size) + $input-padding-y;
17+
18+
position: absolute;
19+
inset-inline-end: math.div($input-padding-y, 3) * 2;
20+
top: 50%;
21+
width: $size;
22+
height: $size;
23+
margin-top: calc($size / -2); // stylelint-disable-line function-disallowed-list
24+
background: $form-password-action-bg;
25+
border: 0;
26+
@include border-radius($input-border-radius-sm);
27+
@include transition($btn-transition);
28+
29+
&:hover:not(:disabled) {
30+
background-color: $form-password-action-hover-bg;
31+
32+
.form-password-action-icon {
33+
background-color: $form-password-icon-hover-color;
34+
}
35+
}
36+
37+
&:focus {
38+
color: $input-focus-color;
39+
background-color: $input-focus-bg;
40+
border-color: $input-focus-border-color;
41+
outline: 0;
42+
@if $enable-shadows {
43+
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
44+
} @else {
45+
// Avoid using mixin so we can pass custom focus shadow properly
46+
box-shadow: $input-focus-box-shadow;
47+
}
48+
}
49+
}
50+
51+
.form-password-action-icon {
52+
display: block;
53+
width: $form-password-icon-size;
54+
height: $form-password-icon-size;
55+
background-color: $form-password-icon-color;
56+
mask: $form-password-icon-show center / $form-password-icon-size no-repeat;
57+
}
58+
59+
.form-control[type="text"] ~ .form-password-action .form-password-action-icon {
60+
mask-image: $form-password-icon-hide;
61+
}
62+
63+
.form-control-lg ~ .form-password-action .form-password-action-icon {
64+
width: $form-password-icon-size-lg;
65+
height: $form-password-icon-size-lg;
66+
mask-size: $form-password-icon-size-lg;
67+
}
68+
69+
.form-control-sm ~ .form-password-action .form-password-action-icon {
70+
width: $form-password-icon-size-sm;
71+
height: $form-password-icon-size-sm;
72+
mask-size: $form-password-icon-size-sm;
73+
}
74+
75+
.form-control-lg ~ .form-password-action {
76+
$size: ($input-line-height * $input-font-size-lg) + $input-padding-y-lg;
77+
78+
inset-inline-end: math.div($input-padding-y-lg, 3) * 2;
79+
width: $size;
80+
height: $size;
81+
margin-top: calc($size / -2); // stylelint-disable-line function-disallowed-list
82+
@include border-radius($input-border-radius);
83+
}
84+
85+
.form-control-sm ~ .form-password-action {
86+
$size: ($input-line-height * $input-font-size-sm) + $input-padding-y-sm;
87+
88+
inset-inline-end: math.div($input-padding-y-sm, 3) * 2;
89+
width: $size;
90+
height: $size;
91+
margin-top: calc($size / -2); // stylelint-disable-line function-disallowed-list
92+
}
93+
}

0 commit comments

Comments
 (0)