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

code refactoring

Browse Source
This commit is contained in:
sairaj mote 2023-11-01 00:53:21 +05:30
parent 48c09f401b
commit 279f6080c0
2 changed files with 6 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/dist/switch.js vendored
View File

@ -1,5 +1,3 @@
//switch
const smSwitch = document.createElement('template')
smSwitch.innerHTML = `
<style>
@ -16,8 +14,6 @@ smSwitch.innerHTML = `
box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.2rem white inset;
}
label{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
width: 100%;
@ -57,8 +53,7 @@ smSwitch.innerHTML = `
border-radius: 1rem;
}
label:active .thumb::after,
label:focus-within .thumb::after{
label:focus-visible .thumb::after{
opacity: 1;
}
@ -82,8 +77,8 @@ smSwitch.innerHTML = `
justify-content: center;
align-items: center;
border-radius: 1rem;
box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.3rem white inset;
transition: 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.2rem white inset;
transition: 0.3s ease;
background-color: inherit;
}
@ -115,8 +110,6 @@ customElements.define('sm-switch', class extends HTMLElement {
this.input = this.shadowRoot.querySelector('input')
this.isChecked = false
this.isDisabled = false
this.dispatch = this.dispatch.bind(this)
}
static get observedAttributes() {
@ -154,7 +147,7 @@ customElements.define('sm-switch', class extends HTMLElement {
}
dispatch() {
dispatch = () => {
this.dispatchEvent(new CustomEvent('change', {
bubbles: true,
composed: true,
@ -193,8 +186,7 @@ customElements.define('sm-switch', class extends HTMLElement {
if (this.hasAttribute('checked')) {
this.isChecked = true
this.input.checked = true
}
else {
} else {
this.isChecked = false
this.input.checked = false
}

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

@ -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 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)))}});
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: 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:focus-visible .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.2rem white inset;\n transition: 0.3s ease;\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}static get observedAttributes(){return["disabled","checked"]}get disabled(){return this.isDisabled}set disabled(val){val?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.isChecked}set checked(value){value?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(name,oldValue,newValue){oldValue!==newValue&&("disabled"===name?this.hasAttribute("disabled")?this.disabled=!0:this.disabled=!1:"checked"===name&&(this.hasAttribute("checked")?(this.isChecked=!0,this.input.checked=!0):(this.isChecked=!1,this.input.checked=!1)))}});