RanchiMall/standard-ui
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bug fixes

Browse Source
This commit is contained in:
sairaj mote 2022-09-17 00:43:09 +05:30
parent b931f42137
commit 86d8ef2b14
7 changed files with 122 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/dist/input.js vendored
View File

@ -32,7 +32,7 @@ smInput.innerHTML = `
box-shadow: none;
}
::-moz-focus-inner{
border: none;
border: none;
}
:host{
display: flex;
@ -46,6 +46,7 @@ smInput.innerHTML = `
.hide{
display: none !important;
}
button{
display: flex;
border: none;
@ -88,6 +89,9 @@ smInput.innerHTML = `
margin-right: -2rem;
pointer-events: none !important;
}
.clear{
visibility: hidden;
}
.readonly{
pointer-events: none;
}
@ -194,7 +198,7 @@ smInput.innerHTML = `
<div class="container">
<input type="text"/>
<div part="placeholder" class="label"></div>
<button class="clear hide" title="Clear" tabindex="-1">
<button class="clear" title="Clear" tabindex="-1">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
</button>
</div>
@ -222,7 +226,7 @@ customElements.define('sm-input',
this._errorText = '';
this.isRequired = false;
this.validationFunction = undefined;
this.reflectedAttributes = ['value', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step'];
this.reflectedAttributes = ['value', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step', 'list', 'autocomplete'];
this.reset = this.reset.bind(this);
this.clear = this.clear.bind(this);
@ -235,7 +239,7 @@ customElements.define('sm-input',
}
static get observedAttributes() {
return ['value', 'placeholder', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step', 'helper-text', 'error-text', 'hiderequired'];
return ['value', 'placeholder', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step', 'helper-text', 'error-text'];
}
get value() {
@ -326,6 +330,7 @@ customElements.define('sm-input',
clear() {
this.value = '';
this.input.focus();
this.fireEvent();
}
focusIn() {
@ -347,11 +352,7 @@ customElements.define('sm-input',
checkInput(e) {
if (!this.hasAttribute('readonly')) {
if (this.input.value.trim() !== '') {
this.clearBtn.classList.remove('hide');
} else {
this.clearBtn.classList.add('hide');
}
this.clearBtn.style.visibility = this.input.value !== '' ? 'visible' : 'hidden';
}
if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder').trim() === '') return;
if (this.input.value !== '') {

2
components/dist/input.min.js vendored
View File

File diff suppressed because one or more lines are too long

94
components/dist/select.js vendored
View File

@ -89,8 +89,7 @@ smSelect.innerHTML = `
border: solid 1px rgba(var(--text-color,(17,17,17)), 0.2);
border-radius: var(--border-radius, 0.5rem);
z-index: 1;
-webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
box-shadow: 0 1rem 1.5rem rgba(0 0 0 /0.2);
}
:host([open]) .toggle-icon{
-webkit-transform: rotate(180deg);
@ -141,8 +140,9 @@ customElements.define('sm-select', class extends HTMLElement {
this.handleKeydown = this.handleKeydown.bind(this)
this.handleClickOutside = this.handleClickOutside.bind(this)
this.selectOption = this.selectOption.bind(this)
this.debounce = this.debounce.bind(this)
this.availableOptions
this.availableOptions = []
this.previousOption
this.isOpen = false;
this.label = ''
@ -189,6 +189,15 @@ customElements.define('sm-select', class extends HTMLElement {
console.warn(`There is no option with ${val} as value`)
}
}
debounce(callback, wait) {
let timeoutId = null;
return (...args) => {
window.clearTimeout(timeoutId);
timeoutId = window.setTimeout(() => {
callback.apply(null, args);
}, wait);
};
}
reset(fire = true) {
if (this.availableOptions[0] && this.previousOption !== this.availableOptions[0]) {
@ -202,8 +211,8 @@ customElements.define('sm-select', class extends HTMLElement {
selectOption(selectedOption) {
if (this.previousOption !== selectedOption) {
this.querySelectorAll('[selected]').forEach(option => option.removeAttribute('selected'))
selectedOption.setAttribute('selected', '')
this.selectedOptionText.textContent = `${this.label}${selectedOption.textContent}`;
selectedOption.setAttribute('selected', '')
this.previousOption = selectedOption
}
}
@ -213,15 +222,18 @@ customElements.define('sm-select', class extends HTMLElement {
}
open() {
this.availableOptions.forEach(option => option.setAttribute('tabindex', 0))
this.optionList.classList.remove('hide')
this.optionList.animate(this.slideDown, this.animationOptions)
this.setAttribute('open', '')
this.setAttribute('open', '');
(this.availableOptions.find(option => option.hasAttribute('selected')) || this.availableOptions[0]).focus()
this.isOpen = true
}
collapse() {
this.removeAttribute('open')
this.optionList.animate(this.slideUp, this.animationOptions)
.onfinish = () => {
this.availableOptions.forEach(option => option.removeAttribute('tabindex'))
this.optionList.classList.add('hide')
this.isOpen = false
}
@ -252,8 +264,7 @@ customElements.define('sm-select', class extends HTMLElement {
} else {
this.availableOptions[this.availableOptions.length - 1].focus()
}
}
else if (e.key === 'ArrowDown') {
} else if (e.key === 'ArrowDown') {
e.preventDefault()
if (document.activeElement.nextElementSibling) {
document.activeElement.nextElementSibling.focus()
@ -280,21 +291,20 @@ customElements.define('sm-select', class extends HTMLElement {
handleKeydown(e) {
if (e.target === this) {
if (this.isOpen && e.key === 'ArrowDown') {
e.preventDefault()
this.availableOptions[0].focus()
e.preventDefault();
(this.availableOptions.find(option => option.hasAttribute('selected')) || this.availableOptions[0]).focus()
this.handleOptionSelection(e)
}
else if (e.key === 'Enter' || e.key === ' ') {
} else if (e.key === ' ') {
e.preventDefault()
this.toggle()
}
}
else {
} else {
this.handleOptionsNavigation(e)
this.handleOptionSelection(e)
if (e.key === 'Enter' || e.key === ' ') {
if (['Enter', ' ', 'Escape', 'Tab'].includes(e.key)) {
e.preventDefault()
this.collapse()
this.focusIn()
}
}
}
@ -309,10 +319,22 @@ customElements.define('sm-select', class extends HTMLElement {
this.selection.setAttribute('tabindex', '0')
}
let slot = this.shadowRoot.querySelector('slot')
slot.addEventListener('slotchange', e => {
slot.addEventListener('slotchange', this.debounce(e => {
this.availableOptions = slot.assignedElements()
this.reset(false)
});
}, 100));
new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const offsetLeft = this.selection.getBoundingClientRect().left
if (offsetLeft < window.innerWidth / 2) {
this.setAttribute('align-select', 'left')
} else {
this.setAttribute('align-select', 'right')
}
}
})
}).observe(this)
this.addEventListener('click', this.handleClick)
this.addEventListener('keydown', this.handleKeydown)
document.addEventListener('mousedown', this.handleClickOutside)
@ -350,12 +372,15 @@ smOption.innerHTML = `
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: hidden;
border-radius: var(--border-radius, 0.3rem);
}
.option{
position: relative;
display: grid;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
gap: 0.5rem;
grid-template-columns: max-content minmax(0, 1fr);
@ -363,35 +388,39 @@ smOption.innerHTML = `
cursor: pointer;
outline: none;
user-select: none;
border-radius: var(--border-radius, 0.3rem);
}
.option::before{
position: absolute;
content: '';
display: block;
width: 0.2rem;
height: 1em;
border-radius: 0 1em 1em 0;
background: rgba(var(--text-color,(17,17,17)), 0.5);
transition: all 0.2s ease-in-out;
opacity: 0;
}
:host(:focus){
outline: none;
background: rgba(var(--text-color,(17,17,17)), 0.1);
}
.icon {
opacity: 0;
height: 1.2rem;
width: 1.2rem;
fill: rgba(var(--text-color,(17,17,17)), 0.8);
}
:host(:focus) .option .icon{
opacity: 0.4
}
:host([selected]) .icon{
:host(:focus) .option::before{
opacity: 1
}
:host([selected]) .option::before{
opacity: 1;
background: var(--accent-color, teal);
}
@media (hover: hover){
.option:hover{
background: rgba(var(--text-color,(17,17,17)), 0.1);
}
:host(:not([selected]):hover) .icon{
opacity: 0.4
:host(:not([selected]):hover) .option::before{
opacity: 1
}
}
</style>
<div class="option">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>
<slot></slot>
</div>`;
customElements.define('sm-option', class extends HTMLElement {
@ -404,6 +433,5 @@ customElements.define('sm-option', class extends HTMLElement {
connectedCallback() {
this.setAttribute('role', 'option')
this.setAttribute('tabindex', '0')
}
})

2
components/dist/select.min.js vendored
View File

File diff suppressed because one or more lines are too long

52
components/dist/switch.js vendored
View File

@ -4,24 +4,22 @@ const smSwitch = document.createElement('template')
smSwitch.innerHTML = `
<style>
*{
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
:host{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
:host(:active) .thumb{
box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.2rem white inset;
}
label{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
align-items: center;
width: 100%;
outline: none;
cursor: pointer;
@ -34,12 +32,8 @@ smSwitch.innerHTML = `
}
.switch {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
align-items: center;
width: 2.4rem;
flex-shrink: 0;
margin-left: auto;
@ -57,12 +51,9 @@ smSwitch.innerHTML = `
left: 0;
right: 0;
height: 1.4rem;
-webkit-transition: background 0.3s;
-o-transition: background 0.3s;
transition: background 0.3s;
background: rgba(var(--text-color,inherit), 0.4);
-webkit-box-shadow: 0 0.1rem 0.3rem #00000040 inset;
box-shadow: 0 0.1rem 0.3rem #00000040 inset;
box-shadow: 0 0.1rem 0.3rem #00000040 inset;
border-radius: 1rem;
}
@ -73,8 +64,6 @@ smSwitch.innerHTML = `
.thumb::after{
content: '';
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
height: 2.6rem;
@ -82,39 +71,24 @@ smSwitch.innerHTML = `
background: rgba(var(--text-color,inherit), 0.2);
border-radius: 2rem;
opacity: 0;
-webkit-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.thumb {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
height: 1rem;
width: 1rem;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: center;
align-items: center;
border-radius: 1rem;
-webkit-box-shadow: 0 0.1rem 0.4rem #00000060;
box-shadow: 0 0.1rem 0.4rem #00000060;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
-o-transition: transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
border: solid 0.3rem white;
box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.3rem white inset;
transition: 0.3s;
background-color: inherit;
}
input:checked ~ .thumb {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
transform: translateX(100%);
}
input:checked ~ .track {

2
components/dist/switch.min.js vendored
View File

@ -1 +1 @@
const smSwitch=document.createElement("template");smSwitch.innerHTML='\t\n<style>\n *{\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n \n :host{\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n label{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n outline: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n :host([disabled]) {\n cursor: not-allowed;\n opacity: 0.6;\n pointer-events: none;\n }\n .switch {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n width: 2.4rem;\n flex-shrink: 0;\n margin-left: auto;\n padding: 0.2rem;\n cursor: pointer;\n border-radius: 2rem;\n }\n \n input {\n display: none;\n }\n \n .track {\n position: absolute;\n left: 0;\n right: 0;\n height: 1.4rem;\n -webkit-transition: background 0.3s;\n -o-transition: background 0.3s;\n transition: background 0.3s;\n background: rgba(var(--text-color,inherit), 0.4);\n -webkit-box-shadow: 0 0.1rem 0.3rem #00000040 inset;\n box-shadow: 0 0.1rem 0.3rem #00000040 inset;\n border-radius: 1rem;\n }\n \n label:active .thumb::after,\n label:focus-within .thumb::after{\n opacity: 1;\n }\n \n .thumb::after{\n content: \'\';\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n height: 2.6rem;\n width: 2.6rem;\n background: rgba(var(--text-color,inherit), 0.2);\n border-radius: 2rem;\n opacity: 0;\n -webkit-transition: opacity 0.3s;\n -o-transition: opacity 0.3s;\n transition: opacity 0.3s;\n }\n \n .thumb {\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n height: 1rem;\n width: 1rem;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 1rem;\n -webkit-box-shadow: 0 0.1rem 0.4rem #00000060;\n box-shadow: 0 0.1rem 0.4rem #00000060;\n -webkit-transition: -webkit-transform 0.3s;\n transition: -webkit-transform 0.3s;\n -o-transition: transform 0.3s;\n transition: transform 0.3s;\n transition: transform 0.3s, -webkit-transform 0.3s;\n border: solid 0.3rem white;\n }\n \n input:checked ~ .thumb {\n -webkit-transform: translateX(100%);\n -ms-transform: translateX(100%);\n transform: translateX(100%);\n }\n \n input:checked ~ .track {\n background: var(--accent-color, teal);\n }\n</style>\n<label tabindex="0">\n <slot name="left"></slot>\n <div part="switch" class="switch">\n <input type="checkbox">\n <div class="track"></div>\n <div class="thumb"></div>\n </div>\n <slot name="right"></slot>\n</label>',customElements.define("sm-switch",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSwitch.content.cloneNode(!0)),this.switch=this.shadowRoot.querySelector(".switch"),this.input=this.shadowRoot.querySelector("input"),this.isChecked=!1,this.isDisabled=!1,this.dispatch=this.dispatch.bind(this)}static get observedAttributes(){return["disabled","checked"]}get disabled(){return this.isDisabled}set disabled(n){n?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.isChecked}set checked(n){n?this.setAttribute("checked",""):this.removeAttribute("checked")}get value(){return this.isChecked}reset(){}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.isChecked}}))}connectedCallback(){this.addEventListener("keydown",n=>{" "!==n.key||this.isDisabled||(n.preventDefault(),this.input.click())}),this.input.addEventListener("click",n=>{this.input.checked?this.checked=!0:this.checked=!1,this.dispatch()})}attributeChangedCallback(n,e,t){e!==t&&("disabled"===n?this.hasAttribute("disabled")?this.disabled=!0:this.disabled=!1:"checked"===n&&(this.hasAttribute("checked")?(this.isChecked=!0,this.input.checked=!0):(this.isChecked=!1,this.input.checked=!1)))}});
const smSwitch=document.createElement("template");smSwitch.innerHTML='\t\n<style>\n *{\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n \n :host{\n display: inline-flex;\n }\n :host(:active) .thumb{\n box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.2rem white inset;\n }\n label{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n align-items: center;\n width: 100%;\n outline: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n :host([disabled]) {\n cursor: not-allowed;\n opacity: 0.6;\n pointer-events: none;\n }\n .switch {\n position: relative;\n display: flex;\n align-items: center;\n width: 2.4rem;\n flex-shrink: 0;\n margin-left: auto;\n padding: 0.2rem;\n cursor: pointer;\n border-radius: 2rem;\n }\n \n input {\n display: none;\n }\n \n .track {\n position: absolute;\n left: 0;\n right: 0;\n height: 1.4rem;\n transition: background 0.3s;\n background: rgba(var(--text-color,inherit), 0.4);\n box-shadow: 0 0.1rem 0.3rem #00000040 inset;\n border-radius: 1rem;\n }\n \n label:active .thumb::after,\n label:focus-within .thumb::after{\n opacity: 1;\n }\n \n .thumb::after{\n content: \'\';\n display: flex;\n position: absolute;\n height: 2.6rem;\n width: 2.6rem;\n background: rgba(var(--text-color,inherit), 0.2);\n border-radius: 2rem;\n opacity: 0;\n transition: opacity 0.3s;\n }\n \n .thumb {\n position: relative;\n display: inline-flex;\n height: 1rem;\n width: 1rem;\n justify-content: center;\n align-items: center;\n border-radius: 1rem;\n box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.3rem white inset;\n transition: 0.3s;\n background-color: inherit;\n }\n \n input:checked ~ .thumb {\n transform: translateX(100%);\n }\n \n input:checked ~ .track {\n background: var(--accent-color, teal);\n }\n</style>\n<label tabindex="0">\n <slot name="left"></slot>\n <div part="switch" class="switch">\n <input type="checkbox">\n <div class="track"></div>\n <div class="thumb"></div>\n </div>\n <slot name="right"></slot>\n</label>',customElements.define("sm-switch",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSwitch.content.cloneNode(!0)),this.switch=this.shadowRoot.querySelector(".switch"),this.input=this.shadowRoot.querySelector("input"),this.isChecked=!1,this.isDisabled=!1,this.dispatch=this.dispatch.bind(this)}static get observedAttributes(){return["disabled","checked"]}get disabled(){return this.isDisabled}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.isChecked}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}get value(){return this.isChecked}reset(){}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.isChecked}}))}connectedCallback(){this.addEventListener("keydown",e=>{" "!==e.key||this.isDisabled||(e.preventDefault(),this.input.click())}),this.input.addEventListener("click",e=>{this.input.checked?this.checked=!0:this.checked=!1,this.dispatch()})}attributeChangedCallback(e,t,n){t!==n&&("disabled"===e?this.hasAttribute("disabled")?this.disabled=!0:this.disabled=!1:"checked"===e&&(this.hasAttribute("checked")?(this.isChecked=!0,this.input.checked=!0):(this.isChecked=!1,this.input.checked=!1)))}});

35
components/test.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="dist/select.js"></script>
<script src="dist/form.js"></script>
<script src="dist/popup.js"></script>
<script src="dist/switch.js"></script>
<script src="dist/checkbox.js"></script>
<script src="dist/radio.js"></script>
<script src="dist/input.js"></script>
<link rel="stylesheet" href="css/main.min.css">
<style>
div {
display: flex;
padding: 4vmax;
}
</style>
</head>
<body>
<div>
<sm-switch></sm-switch>
<sm-input></sm-input>
</div>
<script>
</script>
</body>
</html>