minor improvements
This commit is contained in:
sairaj mote
parent
86d8ef2b14
commit
81cfe843a2
14
components/dist/input.js
vendored
14
components/dist/input.js
vendored
@ -234,7 +234,7 @@ customElements.define('sm-input',
|
||||
this.focusOut = this.focusOut.bind(this);
|
||||
this.fireEvent = this.fireEvent.bind(this);
|
||||
this.checkInput = this.checkInput.bind(this);
|
||||
this.handleKeydown = this.handleKeydown.bind(this);
|
||||
this.allowOnlyNum = this.allowOnlyNum.bind(this);
|
||||
this.vibrate = this.vibrate.bind(this);
|
||||
}
|
||||
|
||||
@ -368,11 +368,11 @@ customElements.define('sm-input',
|
||||
this.feedbackText.textContent = '';
|
||||
}
|
||||
}
|
||||
handleKeydown(e) {
|
||||
allowOnlyNum(e) {
|
||||
if (e.key.length === 1) {
|
||||
if (!['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'].includes(e.key)) {
|
||||
if (e.key === '.' && (e.target.value.includes('.') || e.target.value.length === 0)) {
|
||||
e.preventDefault();
|
||||
} else if (e.key === '.' && e.target.value.includes('.')) {
|
||||
} else if (!['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'].includes(e.key)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
@ -418,9 +418,9 @@ customElements.define('sm-input',
|
||||
else if (name === 'type') {
|
||||
if (this.hasAttribute('type') && this.getAttribute('type') === 'number') {
|
||||
this.input.setAttribute('inputmode', 'decimal');
|
||||
this.input.addEventListener('keydown', this.handleKeydown);
|
||||
this.input.addEventListener('keydown', this.allowOnlyNum);
|
||||
} else {
|
||||
this.input.removeEventListener('keydown', this.handleKeydown);
|
||||
this.input.removeEventListener('keydown', this.allowOnlyNum);
|
||||
|
||||
}
|
||||
}
|
||||
@ -459,6 +459,6 @@ customElements.define('sm-input',
|
||||
disconnectedCallback() {
|
||||
this.input.removeEventListener('input', this.checkInput);
|
||||
this.clearBtn.removeEventListener('click', this.clear);
|
||||
this.input.removeEventListener('keydown', this.handleKeydown);
|
||||
this.input.removeEventListener('keydown', this.allowOnlyNum);
|
||||
}
|
||||
})
|
||||
2
components/dist/input.min.js
vendored
2
components/dist/input.min.js
vendored
File diff suppressed because one or more lines are too long
47
components/dist/menu.js
vendored
47
components/dist/menu.js
vendored
@ -98,7 +98,9 @@ smMenu.innerHTML = `
|
||||
</style>
|
||||
<div class="select">
|
||||
<div class="menu" tabindex="0">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
|
||||
<slot name="icon">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="options hide">
|
||||
<slot></slot>
|
||||
@ -127,6 +129,7 @@ customElements.define('sm-menu', class extends HTMLElement {
|
||||
this.collapse = this.collapse.bind(this)
|
||||
this.toggle = this.toggle.bind(this)
|
||||
this.handleKeyDown = this.handleKeyDown.bind(this)
|
||||
this.handleClick = this.handleClick.bind(this)
|
||||
this.handleClickOutside = this.handleClickOutside.bind(this)
|
||||
|
||||
}
|
||||
@ -155,6 +158,11 @@ customElements.define('sm-menu', class extends HTMLElement {
|
||||
.onfinish = () => {
|
||||
this.isOpen = true
|
||||
this.icon.classList.add('focused')
|
||||
document.addEventListener('mousedown', this.handleClickOutside)
|
||||
const firstElement = this.optionList.firstElementChild.assignedElements().find(el => el.tagName === 'MENU-OPTION')
|
||||
if (firstElement) {
|
||||
firstElement.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -174,6 +182,7 @@ customElements.define('sm-menu', class extends HTMLElement {
|
||||
this.isOpen = false
|
||||
this.icon.classList.remove('focused')
|
||||
this.optionList.classList.add('hide')
|
||||
document.removeEventListener('mousedown', this.handleClickOutside)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -184,6 +193,13 @@ customElements.define('sm-menu', class extends HTMLElement {
|
||||
this.collapse()
|
||||
}
|
||||
}
|
||||
handleClick(e) {
|
||||
if (e.target === this) {
|
||||
this.toggle()
|
||||
} else {
|
||||
this.collapse()
|
||||
}
|
||||
}
|
||||
handleKeyDown(e) {
|
||||
// If key is pressed on menu button
|
||||
if (e.target === this) {
|
||||
@ -191,7 +207,7 @@ customElements.define('sm-menu', class extends HTMLElement {
|
||||
e.preventDefault()
|
||||
this.availableOptions[0].focus()
|
||||
}
|
||||
else if (e.key === 'Enter' || e.key === ' ') {
|
||||
else if (e.key === ' ') {
|
||||
e.preventDefault()
|
||||
this.toggle()
|
||||
}
|
||||
@ -203,18 +219,18 @@ customElements.define('sm-menu', 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()
|
||||
} else {
|
||||
this.availableOptions[0].focus()
|
||||
}
|
||||
}
|
||||
else if (e.key === 'Enter' || e.key === ' ') {
|
||||
} else if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
e.target.click()
|
||||
this.collapse()
|
||||
this.menu.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -231,12 +247,11 @@ customElements.define('sm-menu', class extends HTMLElement {
|
||||
this.availableOptions = e.target.assignedElements()
|
||||
this.containerDimensions = this.optionList.getBoundingClientRect()
|
||||
});
|
||||
this.addEventListener('click', this.toggle)
|
||||
this.addEventListener('click', this.handleClick)
|
||||
this.addEventListener('keydown', this.handleKeyDown)
|
||||
document.addEventListener('mousedown', this.handleClickOutside)
|
||||
}
|
||||
disconnectedCallback() {
|
||||
this.removeEventListener('click', this.toggle)
|
||||
this.removeEventListener('click', this.handleClick)
|
||||
this.removeEventListener('keydown', this.handleKeyDown)
|
||||
document.removeEventListener('mousedown', this.handleClickOutside)
|
||||
}
|
||||
@ -249,17 +264,14 @@ menuOption.innerHTML = `
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host{
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
border-radius: var(--border-radius,0.3rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
.option{
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
min-width: 100%;
|
||||
padding: var(--padding, 0.6rem 1rem);
|
||||
@ -268,10 +280,7 @@ menuOption.innerHTML = `
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
border-radius: 0.3rem;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
:host(:focus){
|
||||
outline: none;
|
||||
|
||||
2
components/dist/menu.min.js
vendored
2
components/dist/menu.min.js
vendored
File diff suppressed because one or more lines are too long
2
components/dist/switch.js
vendored
2
components/dist/switch.js
vendored
@ -83,7 +83,7 @@ smSwitch.innerHTML = `
|
||||
align-items: center;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.3rem white inset;
|
||||
transition: 0.3s;
|
||||
transition: 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
|
||||
2
components/dist/switch.min.js
vendored
2
components/dist/switch.min.js
vendored
@ -1 +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)))}});
|
||||
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 cubic-bezier(0.68, -0.6, 0.32, 1.6);\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)))}});
|
||||
@ -13,6 +13,9 @@
|
||||
<script src="dist/checkbox.js"></script>
|
||||
<script src="dist/radio.js"></script>
|
||||
<script src="dist/input.js"></script>
|
||||
<script src="dist/textarea.js"></script>
|
||||
<script src="dist/button.js"></script>
|
||||
<script src="dist/menu.js"></script>
|
||||
<link rel="stylesheet" href="css/main.min.css">
|
||||
<style>
|
||||
div {
|
||||
@ -24,8 +27,11 @@
|
||||
|
||||
<body>
|
||||
<div>
|
||||
<sm-switch></sm-switch>
|
||||
<sm-input></sm-input>
|
||||
<sm-menu>
|
||||
<menu-option>Option 1</menu-option>
|
||||
<menu-option>Option 2</menu-option>
|
||||
<menu-option>Option 3</menu-option>
|
||||
</sm-menu>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user