v0.32.83
perf: improve URL detection and redering in messages style: add animation for error message for setting pin
This commit is contained in:
sairaj mote
parent
dfb984b198
commit
719035bb7a
@ -219,7 +219,7 @@ a:any-link {
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
span.ripple {
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -183,7 +183,7 @@ a:any-link{
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
span.ripple{
|
||||
.ripple{
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
|
||||
95
index.html
95
index.html
File diff suppressed because one or more lines are too long
@ -64,12 +64,15 @@ smButton.innerHTML = `
|
||||
transition: box-shadow 0.3s;
|
||||
transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
|
||||
text-transform: capitalize;
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
background: var(--background);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
color: inherit;
|
||||
}
|
||||
:host(:not([disable])) .button:focus-visible{
|
||||
-webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
|
||||
@ -100,9 +103,9 @@ smButton.innerHTML = `
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div part="button" class="button" tabindex="0" role="button">
|
||||
<button part="button" class="button">
|
||||
<slot></slot>
|
||||
</div>`;
|
||||
</button>`;
|
||||
customElements.define('sm-button',
|
||||
class extends HTMLElement {
|
||||
constructor() {
|
||||
@ -149,10 +152,6 @@ customElements.define('sm-button',
|
||||
this.addEventListener('click', (e) => {
|
||||
this.dispatch()
|
||||
})
|
||||
this.addEventListener('keydown', (e) => {
|
||||
if (e.code === "Enter" || e.code === "Space")
|
||||
this.click()
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@ -3939,11 +3938,6 @@ pinInput.innerHTML = `
|
||||
width: auto;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
label{
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
input{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -3959,13 +3953,6 @@ pinInput.innerHTML = `
|
||||
input:valid{
|
||||
background-color: transparent;
|
||||
}
|
||||
input[type="password"]:valid ~ .dot{
|
||||
content: '';
|
||||
position: absolute;
|
||||
padding: 0.4rem;
|
||||
border-radius: 1rem;
|
||||
background: rgba(var(--text-color), 1);
|
||||
}
|
||||
input:focus,
|
||||
button:focus{
|
||||
outline: none;
|
||||
@ -4008,7 +3995,7 @@ customElements.define('pin-input',
|
||||
}
|
||||
|
||||
set value(val) {
|
||||
this.arrayOfInput.forEach((input, index) => input.children[0].value = val[index] ? val[index] : '')
|
||||
this.arrayOfInput.forEach((input, index) => input.value = val[index] ? val[index] : '')
|
||||
}
|
||||
|
||||
get value() {
|
||||
@ -4023,7 +4010,7 @@ customElements.define('pin-input',
|
||||
}
|
||||
|
||||
get isValid(){
|
||||
return this.arrayOfInput.every(input => input.children[0].value.trim().length)
|
||||
return this.arrayOfInput.every(input => input.value.trim().length)
|
||||
}
|
||||
|
||||
clear = () => {
|
||||
@ -4031,12 +4018,12 @@ customElements.define('pin-input',
|
||||
}
|
||||
|
||||
focusIn = () => {
|
||||
this.arrayOfInput[0].children[0].focus();
|
||||
this.arrayOfInput[0].focus();
|
||||
}
|
||||
|
||||
getValue = () => {
|
||||
return this.arrayOfInput.reduce((acc, val) => {
|
||||
return acc += val.children[0].value
|
||||
return acc += val.value
|
||||
}, '')
|
||||
}
|
||||
|
||||
@ -4045,11 +4032,11 @@ customElements.define('pin-input',
|
||||
const frag = document.createDocumentFragment();
|
||||
|
||||
for (let i = 0; i < this.pinDigits; i++) {
|
||||
const inputBox = document.createElement('label')
|
||||
inputBox.innerHTML = `
|
||||
<input type="password" inputmode="numeric" maxlength="1" required/>
|
||||
<div class="dot"></div>
|
||||
`
|
||||
const inputBox = document.createElement('input')
|
||||
inputBox.setAttribute('type', 'password')
|
||||
inputBox.setAttribute('inputmode', 'numeric')
|
||||
inputBox.setAttribute('maxlength', '1')
|
||||
inputBox.setAttribute('required', '')
|
||||
this.arrayOfInput.push(inputBox);
|
||||
frag.append(inputBox);
|
||||
}
|
||||
@ -4057,9 +4044,9 @@ customElements.define('pin-input',
|
||||
}
|
||||
|
||||
handleKeydown = (e) => {
|
||||
const activeInput = e.target.closest('label')
|
||||
const activeInput = e.target.closest('input')
|
||||
if (/[0-9]/.test(e.key)) {
|
||||
if (activeInput.children[0].value.trim().length > 2) {
|
||||
if (activeInput.value.trim().length > 2) {
|
||||
e.preventDefault();
|
||||
}
|
||||
else {
|
||||
@ -4100,17 +4087,17 @@ customElements.define('pin-input',
|
||||
}
|
||||
|
||||
toggleVisiblity = () => {
|
||||
if (this.arrayOfInput[0].children[0].getAttribute('type') === 'password') {
|
||||
if (this.arrayOfInput[0].getAttribute('type') === 'password') {
|
||||
this.toggleButton.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M22.05,31.44a10.12,10.12,0,0,0,.1,1.36L33.36,21.59a10.12,10.12,0,0,0-1.36-.1A10,10,0,0,0,22.05,31.44Z"/><path d="M19.11,35.84A13.6,13.6,0,0,1,36.4,18.55l5.28-5.27A31,31,0,0,0,32,11.72c-20.3,0-32,19.72-32,19.72A48.48,48.48,0,0,0,11.27,43.69Z"/><path d="M52.73,19.2l6.14-6.14L54.63,8.81l-7,7h0l-6,6h0L39,24.41h0l-7,7L20.09,43.35,16.4,47h0l-7,7,4.25,4.24,8.71-8.71A31.15,31.15,0,0,0,32,51.16c20.3,0,32-19.72,32-19.72A48.54,48.54,0,0,0,52.73,19.2ZM32,45.07a13.63,13.63,0,0,1-4.4-.74l3-3a10.12,10.12,0,0,0,1.36.1,10,10,0,0,0,10-9.95,10.12,10.12,0,0,0-.1-1.36l3-3A13.6,13.6,0,0,1,32,45.07Z"/></svg>
|
||||
`
|
||||
this.arrayOfInput.forEach(input => input.children[0].setAttribute('type', 'text'))
|
||||
this.arrayOfInput.forEach(input => input.setAttribute('type', 'text'))
|
||||
}
|
||||
else {
|
||||
this.toggleButton.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="9.95"/><path d="M32,12.28C11.7,12.28,0,32,0,32S11.7,51.72,32,51.72,64,32,64,32,52.3,12.28,32,12.28Zm0,33.35A13.63,13.63,0,1,1,45.63,32,13.64,13.64,0,0,1,32,45.63Z"/></svg>
|
||||
`
|
||||
this.arrayOfInput.forEach(input => input.children[0].setAttribute('type', 'password'))
|
||||
this.arrayOfInput.forEach(input => input.setAttribute('type', 'password'))
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user