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

Added 6 more components documentation

Browse Source
This commit is contained in:
sairaj mote 2021-07-18 17:05:41 +05:30
parent f9b2b79133
commit 91edb9b2ec
17 changed files with 793 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/css/main.css
View File

@ -518,7 +518,7 @@ sm-tab-header {
ol {
padding: 0.6rem 1rem;
max-width: 75ch;
margin-bottom: 3rem;
margin-bottom: 1.5rem;
}
ol li {
margin-bottom: 1rem;
@ -526,9 +526,6 @@ ol li {
ol li:last-of-type {
margin-bottom: 0;
}
ol li::first-letter {
text-transform: capitalize;
}
strong {
max-width: 65ch;
@ -575,6 +572,10 @@ strong.important {
}
}
@media screen and (min-width: 640px) {
sm-popup {
--width: 32rem;
}
#main_header {
padding: 1rem 1.5rem;
grid-area: main-header;

2
components/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

8
components/css/main.scss
View File

@ -451,15 +451,12 @@ sm-tab-header{
ol{
padding: 0.6rem 1rem;
max-width: 75ch;
margin-bottom: 3rem;
margin-bottom: 1.5rem;
li{
margin-bottom: 1rem;
&:last-of-type{
margin-bottom: 0;
}
&::first-letter{
text-transform: capitalize;
}
}
}
strong{
@ -501,6 +498,9 @@ strong.important{
}
}
@media screen and (min-width: 640px){
sm-popup{
--width: 32rem;
}
#main_header{
padding: 1rem 1.5rem;
grid-area: main-header;

2
components/dist/copy.js vendored
View File

@ -23,8 +23,8 @@ smCopy.innerHTML = `
display: grid;
gap: 1rem;
padding: var(--padding);
align-items: center;
grid-template-columns: minmax(0, 1fr) auto;
align-items: flex-start;
}
.copy-button{
display: inline-flex;

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

@ -1 +1 @@
const smCopy=document.createElement("template");smCopy.innerHTML='\n<style> \n*{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n} \n:host{\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --padding: 0;\n --background-color: inherit;\n --button-background-color: rgba(var(--text-color), 0.2);\n --button-border-radius: 0.3rem;\n}\n.copy{\n display: grid;\n gap: 1rem;\n padding: var(--padding);\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: flex-start;\n}\n.copy-button{\n display: inline-flex;\n justify-content: center;\n cursor: pointer;\n border: none;\n padding: 0.4rem;\n background-color: inherit;\n border-radius: var(--button-border-radius);\n}\n.copy-button:active{\n background-color: var(--button-background-color);\n}\n.icon{\n height: 1.2rem;\n width: 1.2rem;\n fill: rgba(var(--text-color), 0.8);\n}\n@media (any-hover: hover){\n .copy:hover .copy-button{\n opacity: 1;\n }\n .copy-button{\n opacity: 0.6;\n }\n .copy-button:hover{\n background-color: var(--button-background-color);\n }\n}\n</style>\n</style>\n<section class="copy">\n <p class="copy-content"></p>\n <button part="button" class="copy-button" title="copy">\n <slot name="copy-icon">\n <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="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"/></svg>\n </slot>\n </button>\n</section>\n',customElements.define("sm-copy",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCopy.content.cloneNode(!0)),this.copyContent=this.shadowRoot.querySelector(".copy-content"),this.copyButton=this.shadowRoot.querySelector(".copy-button"),this.copy=this.copy.bind(this)}static get observedAttributes(){return["value"]}set value(n){this.setAttribute("value",n)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.copyContent.textContent).then(n=>this.fireEvent()).catch(n=>console.error(n))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(n,t,o){"value"===n&&(this.copyContent.textContent=o)}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}});
const smCopy=document.createElement("template");smCopy.innerHTML='\n<style> \n*{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n} \n:host{\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --padding: 0;\n --background-color: inherit;\n --button-background-color: rgba(var(--text-color), 0.2);\n --button-border-radius: 0.3rem;\n}\n.copy{\n display: grid;\n gap: 1rem;\n padding: var(--padding);\n align-items: center;\n grid-template-columns: minmax(0, 1fr) auto;\n}\n.copy-button{\n display: inline-flex;\n justify-content: center;\n cursor: pointer;\n border: none;\n padding: 0.4rem;\n background-color: inherit;\n border-radius: var(--button-border-radius);\n}\n.copy-button:active{\n background-color: var(--button-background-color);\n}\n.icon{\n height: 1.2rem;\n width: 1.2rem;\n fill: rgba(var(--text-color), 0.8);\n}\n@media (any-hover: hover){\n .copy:hover .copy-button{\n opacity: 1;\n }\n .copy-button{\n opacity: 0.6;\n }\n .copy-button:hover{\n background-color: var(--button-background-color);\n }\n}\n</style>\n</style>\n<section class="copy">\n <p class="copy-content"></p>\n <button part="button" class="copy-button" title="copy">\n <slot name="copy-icon">\n <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="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"/></svg>\n </slot>\n </button>\n</section>\n',customElements.define("sm-copy",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCopy.content.cloneNode(!0)),this.copyContent=this.shadowRoot.querySelector(".copy-content"),this.copyButton=this.shadowRoot.querySelector(".copy-button"),this.copy=this.copy.bind(this)}static get observedAttributes(){return["value"]}set value(n){this.setAttribute("value",n)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.copyContent.textContent).then(n=>this.fireEvent()).catch(n=>console.error(n))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(n,t,o){"value"===n&&(this.copyContent.textContent=o)}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}});

11
components/dist/popup.js vendored
View File

@ -20,7 +20,7 @@ smPopup.innerHTML = `
--min-width: auto;
--min-height: auto;
--body-padding: 1.5rem;
--backdrop: rgba(0, 0, 0, 0.6);
--backdrop-background: rgba(0, 0, 0, 0.6);
--border-radius: 0.8rem 0.8rem 0 0;
}
.popup-container{
@ -32,7 +32,7 @@ smPopup.innerHTML = `
left: 0;
right: 0;
place-items: center;
background: var(--backdrop);
background: var(--backdrop-background);
-webkit-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
@ -214,7 +214,8 @@ customElements.define('sm-popup', class extends HTMLElement {
}, 300);
}
show(pinned, popupStack) {
show(options = {}) {
const {pinned = false, popupStack = undefined} = options
if (popupStack)
this.popupStack = popupStack
if (this.popupStack && !this.hasAttribute('open')) {
@ -292,10 +293,6 @@ customElements.define('sm-popup', class extends HTMLElement {
this.offset = e.changedTouches[0].clientY - this.touchStartY;
this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup())
}
/*else {
this.offset = this.touchStartY - e.changedTouches[0].clientY;
this.popup.style.transform = `translateY(-${this.offset}px)`
}*/
}
handleTouchEnd(e) {

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

File diff suppressed because one or more lines are too long

21
components/dist/strip-select.js vendored
View File

@ -51,7 +51,7 @@ stripSelect.innerHTML = `
cursor: pointer;
position: absolute;
align-items: center;
background: var(--background-color);
background: rgba(var(--background-color), 1);
transform: translateY(-50%);
}
.nav-button--right{
@ -65,11 +65,11 @@ stripSelect.innerHTML = `
pointer-events: none;
}
.cover--left{
background: linear-gradient(90deg, var(--background-color) 60%, transparent);
background: linear-gradient(90deg, rgba(var(--background-color), 1) 60%, transparent);
}
.cover--right{
right: 0;
background: linear-gradient(90deg, transparent 0%, var(--background-color) 40%);
background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color), 1) 40%);
}
.nav-button--right::before{
background-color: red;
@ -161,6 +161,8 @@ customElements.define('strip-select', class extends HTMLElement{
)
}
connectedCallback() {
this.setAttribute('role', 'listbox')
const slot = this.shadowRoot.querySelector('slot')
const coverLeft = this.shadowRoot.querySelector('.cover--left')
const coverRight = this.shadowRoot.querySelector('.cover--right')
@ -268,9 +270,6 @@ stripOption.innerHTML = `
--active-option-color: inherit;
--active-option-backgroud-color: rgba(var(--text-color), .2);
}
.hide{
display: none !important;
}
.strip-option{
display: flex;
flex-shrink: 0;
@ -286,11 +285,17 @@ stripOption.innerHTML = `
color: var(--active-option-color);
background-color: var(--active-option-backgroud-color);
}
:host(:focus-within){
outline: none;
}
:host(:focus-within) .strip-option{
box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
}
:host(:hover:not([active])) .strip-option{
background-color: rgba(var(--text-color), 0.06);
}
</style>
<label class="strip-option" tabindex="0">
<label class="strip-option">
<slot></slot>
</label>
`
@ -326,6 +331,8 @@ customElements.define('strip-option', class extends HTMLElement{
}
}
connectedCallback() {
this.setAttribute('role', 'option')
this.setAttribute('tabindex', '0')
this._value = this.getAttribute('value')
this.addEventListener('click', this.fireEvent)
this.addEventListener('keydown', this.handleKeyDown)

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

File diff suppressed because one or more lines are too long

2
components/dist/tabs.js vendored
View File

@ -373,7 +373,7 @@ customElements.define('sm-tab-panels', class extends HTMLElement {
}
})
}, {
threshold: 0.9
threshold: 0.6
})
}
disconnectedCallback() {

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

File diff suppressed because one or more lines are too long

6
components/dist/tags-input.js vendored
View File

@ -12,6 +12,7 @@ tagsInput.innerHTML = `
--background-color: 255, 255, 255;
--danger-color: red;
--border-radius: 0.3rem;
--background: rgba(var(--text-color), 0.06);
}
.hide{
display: none !important;
@ -25,7 +26,7 @@ tagsInput.innerHTML = `
align-items: center;
padding: 0.5rem 0.5rem 0 0.5rem;
border-radius: var(--border-radius);
background-color: rgba(var(--text-color), 0.06);
background: var(--background);
}
.tags-wrapper:focus-within{
box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;
@ -107,6 +108,9 @@ customElements.define('tags-input', class extends HTMLElement {
get value() {
return [...this.tags].join()
}
focusIn() {
this.input.focus()
}
reset(){
this.input.value = ''
this.tags.clear()

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

@ -1 +1 @@
const tagsInput=document.createElement("template");tagsInput.innerHTML='\n <style>\n *{\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n }\n :host{\n\t--accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --danger-color: red;\n --border-radius: 0.3rem;\n }\n.hide{\n display: none !important;\n}\n.tags-wrapper{\n position: relative;\n display: flex;\n cursor: text;\n flex-wrap: wrap;\n justify-items: flex-start;\n align-items: center;\n padding: 0.5rem 0.5rem 0 0.5rem;\n border-radius: var(--border-radius);\n background-color: rgba(var(--text-color), 0.06);\n }\n .tags-wrapper:focus-within{\n box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;\n }\n \n .tag {\n cursor: pointer;\n user-select: none;\n align-items: center;\n display: inline-flex;\n border-radius: 0.3rem;\n padding: 0.3rem 0.5rem;\n margin: 0 0.5rem 0.5rem 0;\n background-color: rgba(var(--text-color), 0.06);\n }\n \n .icon {\n height: 1.2rem;\n width: 1.2rem;\n margin-left: 0.3rem;\n fill: rgba(var(--text-color), 0.8);\n }\n \n input,\n input:focus {\n outline: none;\n border: none;\n }\n \n input {\n display: inline-flex;\n width: auto;\n color: inherit;\n max-width: inherit;\n font-size: inherit;\n font-family: inherit;\n padding: 0.4rem 0.5rem;\n margin: 0 0.5rem 0.5rem 0;\n background-color: transparent;\n }\n .placeholder{\n position: absolute;\n padding: 0 0.5rem;\n top: 50%;\n font-weight: 500;\n transform: translateY(-50%);\n color: rgba(var(--text-color), 0.6);\n }\n </style>\n <div class="tags-wrapper">\n <input type="text" size="3"/>\n <p class="placeholder"></p>\n </div>\n',customElements.define("tags-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(tagsInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.tagsWrapper=this.shadowRoot.querySelector(".tags-wrapper"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["placeholder","limit"],this.limit=void 0,this.tags=new Set,this.reset=this.reset.bind(this),this.handleInput=this.handleInput.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClick=this.handleClick.bind(this),this.removeTag=this.removeTag.bind(this)}static get observedAttributes(){return["placeholder","limit"]}get value(){return[...this.tags].join()}reset(){for(this.input.value="",this.tags.clear();this.input.previousElementSibling;)this.input.previousElementSibling.remove()}handleInput(e){const t=e.target.value.trim().length;e.target.setAttribute("size",t||"3"),t?this.placeholder.classList.add("hide"):t||this.tags.size||this.placeholder.classList.remove("hide")}handleKeydown(e){if(","!==e.key&&"/"!==e.key||e.preventDefault(),""!==e.target.value.trim()){if("Enter"===e.key||","===e.key||"/"===e.key||"Space"===e.code){const t=e.target.value.trim();if(this.tags.has(t))this.tagsWrapper.querySelector(`[data-value="${t}"]`).animate([{backgroundColor:"initial"},{backgroundColor:"var(--accent-color)"},{backgroundColor:"initial"}],{duration:300,easing:"ease"});else{const e=document.createElement("span");e.dataset.value=t,e.className="tag",e.innerHTML=`\n <span class="tag-text">${t}</span>\n <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 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>\n `,this.input.before(e),this.tags.add(t)}if(e.target.value="",e.target.setAttribute("size","3"),this.limit&&this.limit<this.tags.size+1)return void(this.input.readOnly=!0)}}else"Backspace"===e.key&&this.input.previousElementSibling&&this.removeTag(this.input.previousElementSibling),this.limit&&this.limit>this.tags.size&&(this.input.readOnly=!1)}handleClick(e){e.target.closest(".tag")?this.removeTag(e.target.closest(".tag")):this.input.focus()}removeTag(e){this.tags.delete(e.dataset.value),e.remove(),this.tags.size||this.placeholder.classList.remove("hide")}connectedCallback(){this.input.addEventListener("input",this.handleInput),this.input.addEventListener("keydown",this.handleKeydown),this.tagsWrapper.addEventListener("click",this.handleClick)}attributeChangedCallback(e,t,n){"placeholder"===e&&(this.placeholder.textContent=n),"limit"===e&&(this.limit=parseInt(n))}disconnectedCallback(){this.input.removeEventListener("input",this.handleInput),this.input.removeEventListener("keydown",this.handleKeydown),this.tagsWrapper.removeEventListener("click",this.handleClick)}});
const tagsInput=document.createElement("template");tagsInput.innerHTML='\n <style>\n *{\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n }\n :host{\n\t--accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --danger-color: red;\n --border-radius: 0.3rem;\n\t--background: rgba(var(--text-color), 0.06);\n }\n.hide{\n display: none !important;\n}\n.tags-wrapper{\n position: relative;\n display: flex;\n cursor: text;\n flex-wrap: wrap;\n justify-items: flex-start;\n align-items: center;\n padding: 0.5rem 0.5rem 0 0.5rem;\n border-radius: var(--border-radius);\n background: var(--background);\n }\n .tags-wrapper:focus-within{\n box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;\n }\n \n .tag {\n cursor: pointer;\n user-select: none;\n align-items: center;\n display: inline-flex;\n border-radius: 0.3rem;\n padding: 0.3rem 0.5rem;\n margin: 0 0.5rem 0.5rem 0;\n background-color: rgba(var(--text-color), 0.06);\n }\n \n .icon {\n height: 1.2rem;\n width: 1.2rem;\n margin-left: 0.3rem;\n fill: rgba(var(--text-color), 0.8);\n }\n \n input,\n input:focus {\n outline: none;\n border: none;\n }\n \n input {\n display: inline-flex;\n width: auto;\n color: inherit;\n max-width: inherit;\n font-size: inherit;\n font-family: inherit;\n padding: 0.4rem 0.5rem;\n margin: 0 0.5rem 0.5rem 0;\n background-color: transparent;\n }\n .placeholder{\n position: absolute;\n padding: 0 0.5rem;\n top: 50%;\n font-weight: 500;\n transform: translateY(-50%);\n color: rgba(var(--text-color), 0.6);\n }\n </style>\n <div class="tags-wrapper">\n <input type="text" size="3"/>\n <p class="placeholder"></p>\n </div>\n',customElements.define("tags-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(tagsInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.tagsWrapper=this.shadowRoot.querySelector(".tags-wrapper"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["placeholder","limit"],this.limit=void 0,this.tags=new Set,this.reset=this.reset.bind(this),this.handleInput=this.handleInput.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClick=this.handleClick.bind(this),this.removeTag=this.removeTag.bind(this)}static get observedAttributes(){return["placeholder","limit"]}get value(){return[...this.tags].join()}focusIn(){this.input.focus()}reset(){for(this.input.value="",this.tags.clear();this.input.previousElementSibling;)this.input.previousElementSibling.remove()}handleInput(t){const e=t.target.value.trim().length;t.target.setAttribute("size",e||"3"),e?this.placeholder.classList.add("hide"):e||this.tags.size||this.placeholder.classList.remove("hide")}handleKeydown(t){if(","!==t.key&&"/"!==t.key||t.preventDefault(),""!==t.target.value.trim()){if("Enter"===t.key||","===t.key||"/"===t.key||"Space"===t.code){const e=t.target.value.trim();if(this.tags.has(e))this.tagsWrapper.querySelector(`[data-value="${e}"]`).animate([{backgroundColor:"initial"},{backgroundColor:"var(--accent-color)"},{backgroundColor:"initial"}],{duration:300,easing:"ease"});else{const t=document.createElement("span");t.dataset.value=e,t.className="tag",t.innerHTML=`\n <span class="tag-text">${e}</span>\n <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 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>\n `,this.input.before(t),this.tags.add(e)}if(t.target.value="",t.target.setAttribute("size","3"),this.limit&&this.limit<this.tags.size+1)return void(this.input.readOnly=!0)}}else"Backspace"===t.key&&this.input.previousElementSibling&&this.removeTag(this.input.previousElementSibling),this.limit&&this.limit>this.tags.size&&(this.input.readOnly=!1)}handleClick(t){t.target.closest(".tag")?this.removeTag(t.target.closest(".tag")):this.input.focus()}removeTag(t){this.tags.delete(t.dataset.value),t.remove(),this.tags.size||this.placeholder.classList.remove("hide")}connectedCallback(){this.input.addEventListener("input",this.handleInput),this.input.addEventListener("keydown",this.handleKeydown),this.tagsWrapper.addEventListener("click",this.handleClick)}attributeChangedCallback(t,e,n){"placeholder"===t&&(this.placeholder.textContent=n),"limit"===t&&(this.limit=parseInt(n))}disconnectedCallback(){this.input.removeEventListener("input",this.handleInput),this.input.removeEventListener("keydown",this.handleKeydown),this.tagsWrapper.removeEventListener("click",this.handleClick)}});

32
components/dist/textarea.js vendored
View File

@ -23,11 +23,10 @@ smTextarea.innerHTML = `
--danger-color: red;
--border-radius: 0.3rem;
--background: rgba(var(--text-color), 0.06);
--padding-right: initial;
--padding-left: initial;
--padding: initial;
--max-height: 8rem;
}
:host(.outlined) .textarea {
:host([variant="outlined"]) .textarea {
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
background: rgba(var(--background-color), 1);
}
@ -43,8 +42,7 @@ smTextarea.innerHTML = `
max-height: var(--max-height);
background: var(--background);
border-radius: var(--border-radius);
padding-left: var(--padding-left);
padding-right: var(--padding-right);
padding: var(--padding);
}
.textarea::after,
textarea{
@ -77,10 +75,6 @@ textarea{
.textarea:focus-within:not(.readonly){
box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
}
.disabled{
pointer-events: none;
opacity: 0.6;
}
.placeholder{
position: absolute;
margin: 0.7rem 1rem;
@ -91,6 +85,10 @@ textarea{
pointer-events: none;
user-select: none;
}
:host([disabled]) .textarea{
cursor: not-allowed;
opacity: 0.6;
}
@media (any-hover: hover){
::-webkit-scrollbar{
width: 0.5rem;
@ -122,7 +120,7 @@ customElements.define('sm-textarea',
this.textarea = this.shadowRoot.querySelector('textarea')
this.textareaBox = this.shadowRoot.querySelector('.textarea')
this.placeholder = this.shadowRoot.querySelector('.placeholder')
this.reflectedAttributes = ['required', 'readonly', 'rows', 'minlength', 'maxlength']
this.reflectedAttributes = ['disabled', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
this.reset = this.reset.bind(this)
this.focusIn = this.focusIn.bind(this)
@ -130,7 +128,7 @@ customElements.define('sm-textarea',
this.checkInput = this.checkInput.bind(this)
}
static get observedAttributes() {
return ['value', 'placeholder', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
return ['disabled', 'value', 'placeholder', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
}
get value() {
return this.textarea.value
@ -139,6 +137,16 @@ customElements.define('sm-textarea',
this.setAttribute('value', val)
this.fireEvent()
}
get disabled() {
return this.hasAttribute('disabled')
}
set disabled(val) {
if (val) {
this.setAttribute('disabled', '')
} else {
this.removeAttribute('disabled')
}
}
get isValid() {
return this.textarea.checkValidity()
}
@ -177,7 +185,7 @@ customElements.define('sm-textarea',
this.textarea.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '')
}
else {
this.input.removeAttribute(name)
this.textContent.removeAttribute(name)
}
}
else if (name === 'placeholder') {

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

@ -1 +1 @@
const smTextarea=document.createElement("template");smTextarea.innerHTML='\n<style>\n*,\n*::before,\n*::after { \n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n} \n::-moz-focus-inner{\n border: none;\n}\n.hide{\n opacity: 0 !important;\n}\n:host{\n display: grid;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --danger-color: red;\n --border-radius: 0.3rem;\n --background: rgba(var(--text-color), 0.06);\n --padding-right: initial;\n --padding-left: initial;\n --max-height: 8rem;\n}\n:host(.outlined) .textarea {\n box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;\n background: rgba(var(--background-color), 1);\n}\n.textarea{\n display: grid;\n position: relative;\n cursor: text;\n min-width: 0;\n text-align: left;\n overflow: hidden auto;\n grid-template-columns: 1fr;\n align-items: stretch;\n max-height: var(--max-height);\n background: var(--background);\n border-radius: var(--border-radius);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n}\n.textarea::after,\ntextarea{\n padding: 0.7rem 1rem;\n width: 100%;\n min-width: 1em;\n font: inherit;\n color: inherit;\n resize: none;\n grid-area: 2/1;\n justify-self: stretch;\n background: none;\n appearance: none;\n border: none;\n outline: none;\n line-height: 1.5;\n overflow: hidden;\n}\n.textarea::after{\n content: attr(data-value) \' \';\n visibility: hidden;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n word-wrap: break-word;\n hyphens: auto;\n}\n.readonly{\n pointer-events: none;\n}\n.textarea:focus-within:not(.readonly){\n box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n}\n.disabled{\n pointer-events: none;\n opacity: 0.6;\n}\n.placeholder{\n position: absolute;\n margin: 0.7rem 1rem;\n opacity: .7;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n pointer-events: none;\n user-select: none;\n}\n@media (any-hover: hover){\n ::-webkit-scrollbar{\n width: 0.5rem;\n height: 0.5rem;\n }\n \n ::-webkit-scrollbar-thumb{\n background: rgba(var(--text-color), 0.3);\n border-radius: 1rem;\n &:hover{\n background: rgba(var(--text-color), 0.5);\n }\n }\n}\n</style>\n<label class="textarea" part="textarea">\n <span class="placeholder"></span>\n <textarea rows="1"></textarea>\n</label>\n',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(e,t,n){this.reflectedAttributes.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.input.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});
const smTextarea=document.createElement("template");smTextarea.innerHTML='\n<style>\n*,\n*::before,\n*::after { \n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n} \n::-moz-focus-inner{\n border: none;\n}\n.hide{\n opacity: 0 !important;\n}\n:host{\n display: grid;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --danger-color: red;\n --border-radius: 0.3rem;\n --background: rgba(var(--text-color), 0.06);\n --padding: initial;\n --max-height: 8rem;\n}\n:host([variant="outlined"]) .textarea {\n box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;\n background: rgba(var(--background-color), 1);\n}\n.textarea{\n display: grid;\n position: relative;\n cursor: text;\n min-width: 0;\n text-align: left;\n overflow: hidden auto;\n grid-template-columns: 1fr;\n align-items: stretch;\n max-height: var(--max-height);\n background: var(--background);\n border-radius: var(--border-radius);\n padding: var(--padding);\n}\n.textarea::after,\ntextarea{\n padding: 0.7rem 1rem;\n width: 100%;\n min-width: 1em;\n font: inherit;\n color: inherit;\n resize: none;\n grid-area: 2/1;\n justify-self: stretch;\n background: none;\n appearance: none;\n border: none;\n outline: none;\n line-height: 1.5;\n overflow: hidden;\n}\n.textarea::after{\n content: attr(data-value) \' \';\n visibility: hidden;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n word-wrap: break-word;\n hyphens: auto;\n}\n.readonly{\n pointer-events: none;\n}\n.textarea:focus-within:not(.readonly){\n box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n}\n.placeholder{\n position: absolute;\n margin: 0.7rem 1rem;\n opacity: .7;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n pointer-events: none;\n user-select: none;\n}\n:host([disabled]) .textarea{\n cursor: not-allowed;\n opacity: 0.6;\n}\n@media (any-hover: hover){\n ::-webkit-scrollbar{\n width: 0.5rem;\n height: 0.5rem;\n }\n \n ::-webkit-scrollbar-thumb{\n background: rgba(var(--text-color), 0.3);\n border-radius: 1rem;\n &:hover{\n background: rgba(var(--text-color), 0.5);\n }\n }\n}\n</style>\n<label class="textarea" part="textarea">\n <span class="placeholder"></span>\n <textarea rows="1"></textarea>\n</label>\n',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["disabled","required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["disabled","value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(e,t,n){this.reflectedAttributes.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.textContent.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});

640
components/index.html
View File

@ -453,10 +453,57 @@
<section id="copy_page" class="page hide-completely">
<h1 class="page__title">Copy</h1>
<p>
To start using SM Components
</p>
<h2>Interactive demo</h2>
<sm-copy value="copy this message"></sm-copy>
<pre>
<code>
&lt;sm-copy value="copy this message"&gt;&lt;/sm-copy&gt;
</code>
</pre>
<h2>Attributes</h2>
<section class="table">
<div class="tr">
<h4 class="table__heading">Attribute</h4>
<h4 class="table__heading">Description</h4>
</div>
<div class="tr">
<div><span class="highlight">value</span> ( string )</div>
<p>
Defines content that will be copied when copy button is clicked
</p>
</div>
</section>
<h2>Styling</h2>
<p>CSS variables used to style this component</p>
<section class="table">
<div class="tr">
<h4 class="table__heading">Variable</h4>
<h4 class="table__heading">Description</h4>
</div>
<div class="tr">
<div><span class="highlight">--button-background-color</span></div>
<p>
Defines background color of copy button
</p>
</div>
<div class="tr">
<div><span class="highlight">--button-border-radius</span></div>
<p>
Defines border-radius of copy button
</p>
</div>
</section>
<h2>Usage</h2>
<pre>
<code>
&lt;sm-copy id="text_to_copy" value="sample text"&gt;&lt;/sm-copy&gt;
&lt;script&gt;
const textToCopy = document.getElementById('text_to_copy')
textToCopy.value = 'Different value'; /* Setting value to be copied */
&lt;/script&gt;
</code>
</pre>
</section>
<section id="file_input_page" class="page hide-completely">
@ -528,7 +575,7 @@
<div class="tr">
<div><span class="highlight">reset()</span></div>
<p>
When this function is called upon form element. all the form elements (sm- form elements
When this function is called upon form element. all the form elements (sm- form components
only) will be reset to default state.
</p>
</div>
@ -618,6 +665,19 @@
function.
</p>
</div>
<div class="tr">
<div><span class="highlight">disabled</span></div>
<p>
Set disabled state to <span class="highlight">true</span> or <span
class="highlight">false</span>
</p>
</div>
<div class="tr">
<div><span class="highlight">value</span></div>
<p>
Sets the value of input with JS
</p>
</div>
</section>
<pre>
<code>
@ -750,13 +810,153 @@
Popups are used to show addition UI elements that you may want to hide at first and reveal them when
needed.
</p>
<sm-popup id="popup">
<sm-form>
<sm-input placeholder="hjdfijkgbn"></sm-input>
</sm-form>
<h2>Interactive demo</h2>
<sm-popup id="my_popup">
<h2>Title</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore tenetur natus, pariatur beatae
veritatis debitis repellat laudantium corporis velit adipisci!</p>
</sm-popup>
<sm-button onclick="getRef('my_popup').show()">show popup</sm-button>
<pre>
<code>
&lt;sm-popup id="my_popup"&gt;
&lt;!--Popup content --&gt;
&lt;/sm-popup&gt;
</code>
</pre>
<h2>Usage</h2>
<pre>
<code>
&lt;sm-popup id="my_popup"&gt;
&lt;!--Popup content --&gt;
&lt;/sm-popup&gt;
&lt;sm-button id="show_popup_button"&gt;Show popup&lt;/sm-button&gt;
&lt;script&gt;
const myPopup = document.getElementById('my_popup')
document.getElementById('show_popup_button').addEventListener('click', e =&gt; {
myPopup.show({options});
})
&lt;/script&gt;
</code>
</pre>
<h2>Custom Attributes</h2>
<section class="table">
<div class="tr">
<h4 class="table__heading">Attribute</h4>
<h4 class="table__heading">Description</h4>
</div>
<div class="tr">
<div><span class="highlight">open</span> (boolean)</div>
<p>
If present, popup will be in opened state by default. useful for development purpose.
</p>
</div>
</section>
<h2>Styling</h2>
<p>CSS variables used to style this component</p>
<section class="table">
<div class="tr">
<h4 class="table__heading">Variable</h4>
<h4 class="table__heading">Description</h4>
</div>
<div class="tr">
<div><span class="highlight">--backdrop-background</span></div>
<p>
Defines background property of popup backdrop. Any valid CSS background value is supported.
</p>
</div>
<div class="tr">
<div><span class="highlight">--border-radius</span></div>
<p>
Defines border-radius of popup dialog box.
</p>
</div>
<div class="tr">
<div><span class="highlight">--body-padding</span></div>
<p>
Defines padding of popup dialog box.
</p>
</div>
<div class="tr">
<div><span class="highlight">--height</span></div>
<p>
Defines height of popup dialog box.
</p>
</div>
<div class="tr">
<div><span class="highlight">--min-height</span></div>
<p>
Defines min-height of popup dialog box.
</p>
</div>
<div class="tr">
<div><span class="highlight">--width</span></div>
<p>
Defines width of popup dialog box.
</p>
</div>
<div class="tr">
<div><span class="highlight">--min-width</span></div>
<p>
Defines min-width of popup dialog box.
</p>
</div>
</section>
<h2>Supported functions</h2>
<section class="table">
<div class="tr">
<h4 class="table__heading">Function</h4>
<h4 class="table__heading">Description</h4>
</div>
<div class="tr">
<div><span class="highlight">show()</span></div>
<p>
Displays the hidden popup, when called upon specified popup.
</p>
</div>
<div class="tr">
<div><span class="highlight">hide()</span></div>
<p>
Hides the visible popup, when called upon specified popup
</p>
</div>
</section>
<sm-button variant="primary" onclick="getRef('popup').show()">show popup</sm-button>
<h4>Show() options</h4>
<section class="table">
<div class="tr">
<h4 class="table__heading">Property</h4>
<h4 class="table__heading">Description</h4>
</div>
<div class="tr">
<div><span class="highlight">pinned</span> ( Boolean )</div>
<p>
If set <span class="highlight">true</span>, opened popup won't be closed when clicked
outside the popup area.
</p>
</div>
</section>
<h2>Custom events</h2>
<section class="table">
<div class="tr">
<h4 class="table__heading">Event</h4>
<h4 class="table__heading">Description</h4>
</div>
<div class="tr">
<div><span class="highlight">popupopned</span></div>
<p>
Fired when a popup is opened, to access which popup fired the event you can use
<span class="highlight">event.detail.popup</span> within event listener
</p>
</div>
<div class="tr">
<div><span class="highlight">popupclosed</span></div>
<p>
Fired when a popup is closed, to access which popup fired the event you can use
<span class="highlight">event.detail.popup</span> within event listener
</p>
</div>
</section>
</section>
<section id="radio_page" class="page hide-completely">
@ -775,25 +975,25 @@
<h2>Interactive demo</h2>
<div class="grid gap-0-5">
<sm-radio name="abc" value="on" checked>
<div class="flex">&nbsp;&nbsp;On</div>
<div>&nbsp;&nbsp;On</div>
</sm-radio>
<sm-radio name="abc" value="off">
<div class="flex">&nbsp;&nbsp;Off</div>
<div>&nbsp;&nbsp;Off</div>
</sm-radio>
<sm-radio name="abc" value="🤷">
<div class="flex">&nbsp;&nbsp;🤷</div>
<div>&nbsp;&nbsp;🤷</div>
</sm-radio>
</div>
<pre>
<code>
&lt;sm-radio name="abc" value="on" checked&gt;
&lt;div class="flex"&gt;&nbsp;&nbsp;On&lt;/div&gt;
&lt;div&gt;&nbsp;&nbsp;On&lt;/div&gt;
&lt;/sm-radio&gt;
&lt;sm-radio name="abc" value="off"&gt;
&lt;div class="flex"&gt;&nbsp;&nbsp;Off&lt;/div&gt;
&lt;div&gt;&nbsp;&nbsp;Off&lt;/div&gt;
&lt;/sm-radio&gt;
&lt;sm-radio name="abc" value="🤷"&gt;
&lt;div class="flex"&gt;&nbsp;&nbsp;🤷&lt;/div&gt;
&lt;div&gt;&nbsp;&nbsp;🤷&lt;/div&gt;
&lt;/sm-radio&gt;
</code>
</pre>
@ -919,6 +1119,7 @@
</p>
</div>
</section>
<h2>Usage</h2>
<pre>
<code>
&lt;sm-select id="my_select"&gt;
@ -1039,50 +1240,413 @@
<section id="strip_select_page" class="page hide-completely">
<h1 class="page__title">Strip select</h1>
<p>
To start using SM Components
This is a modern interpritation of classical HTML <span class="highlight">select</span> tag. More
suitable for touch devices,
</p>
<strip-select id="browse_category_selector" multiline>
<strip-option value="movie" selected>Movie</strip-option>
<strip-option value="tv series">TV series</strip-option>
<strip-option value="video">Video</strip-option>
<strip-option value="music">Music</strip-option>
<h2>Interactive demo</h2>
<span>Sort by </span>
<strip-select id="sort_by">
<strip-option value="relevance" selected>Relevance</strip-option>
<strip-option value="popularity">Popularity</strip-option>
<strip-option value="price">Price</strip-option>
<strip-option value="rating">Rating</strip-option>
</strip-select>
<pre>
<code>
&lt;strip-select id="sort_by"&gt;
&lt;strip-option value="relevance" selected&gt;Relevance&lt;/strip-option&gt;
&lt;strip-option value="popularity"&gt;Popularity&lt;/strip-option&gt;
&lt;strip-option value="price"&gt;Price&lt;/strip-option&gt;
&lt;strip-option value="rating"&gt;Rating&lt;/strip-option&gt;
&lt;/strip-select&gt;
</code>
</pre>
<h2>Custom attributes</h2>
<section class="table">
<div class="tr">
<h4 class="table__heading">Attribute</h4>
<h4 class="table__heading">Description</h4>
</div>
<div class="tr">
<div><span class="highlight">multiline</span>( Boolean )</div>
<p>
If present, options will wrap around instead of overflowing horizontally.
</p>
</div>
</section>
<h2>Styling</h2>
<p>CSS variables used to style this component</p>
<section class="table">
<div class="tr">
<h4 class="table__heading">Variable</h4>
<h4 class="table__heading">Description</h4>
</div>
<div class="tr">
<div><span class="highlight">--gap</span></div>
<p>
Defines space between options. Default is "0.5rem".
</p>
</div>
</section>
<h2>Supported events</h2>
<p>These are the events that will be fired when component state changes</p>
<section class="table">
<div class="tr">
<h4 class="table__heading">Event</h4>
<h4 class="table__heading">Description</h4>
</div>
<div class="tr">
<div><span class="highlight">change</span></div>
<p>
Whenever a different options is selected by user the this event is
fired. <br>
You can listen to this event and access the current value with event object <span
class="highlight">event.detail.value</span>
</p>
</div>
</section>
<h2>Usage</h2>
<pre>
<code>
&lt;strip-select id="sort_by"&gt;
&lt;strip-option value="relevance" selected&gt;Relevance&lt;/strip-option&gt;
&lt;strip-option value="popularity"&gt;Popularity&lt;/strip-option&gt;
&lt;strip-option value="price"&gt;Price&lt;/strip-option&gt;
&lt;strip-option value="rating"&gt;Rating&lt;/strip-option&gt;
&lt;/strip-select&gt;
&lt;script&gt;
const sortBy = document.getElementById('sort_by')
sortBy.addEventListener('change', event =&gt; {
console.log(event.detail.value) // logs out value of selected option
})
&lt;/script&gt;
</code>
</pre>
</section>
<section id="tabs_page" class="page hide-completely">
<h1 class="page__title">Tabs</h1>
<p>
To start using SM Components
This component can be used sub-page navigation.
</p>
<sm-tab-header variant="tab" target="tab1">
<h2>Usage</h2>
<pre>
<code>
&lt;sm-tab-header target="tab1"&gt;
&lt;sm-tab&gt;
tab name
&lt;/sm-tab&gt;
&lt;sm-tab&gt;
tab name
&lt;/sm-tab&gt;
&lt;/sm-tab-header&gt;
&lt;sm-tab-panels id="tab1"&gt;
&lt;section&gt;
&lt;!-- Panel content --&gt;
&lt;/section&gt;
&lt;section&gt;
&lt;!-- Panel content --&gt;
&lt;/section&gt;
&lt;/sm-tab-panels&gt;
</code>
</pre>
<p>
There are three components that together make the tabs components.
<ol>
<li>sm-tab-header</li>
<li>sm-tab</li>
<li>sm-tab-panels</li>
</ol>
</p>
<h3>sm-tab-header</h3>
<p>This is the first half of tabs that include the tabs header and actual tab buttons.</p>
<pre>
<code>
&lt;sm-tab-header variant="tab" target="tab2"&gt;
&lt;sm-tab&gt;Audio&lt;/sm-tab&gt;
&lt;sm-tab&gt;Video&lt;/sm-tab&gt;
&lt;/sm-tab-header&gt;
</code>
</pre>
<h2>Supported attributes</h2>
<section class="table">
<div class="tr">
<h4 class="table__heading">Attribute</h4>
<h4 class="table__heading">Description</h4>
</div>
<div class="tr">
<div><span class="highlight">variant</span> ( string )</div>
<p>
Specifies variant of sm-tab-header. Only value can be <span class="highlight">tab</span>
</p>
</div>
<div class="tr">
<div><span class="highlight">target</span> ( string )</div>
<p>
Pass in the ID of respective sm-tab-panels to link them. This is how sm-tab-header communicates with sm-tab-panel on which tab or panel should be displayed.
</p>
</div>
</section>
<h2>Interactive demo</h2>
<sm-tab-header target="tab1">
<sm-tab>Audio</sm-tab>
<sm-tab>Video</sm-tab>
</sm-tab-header>
<sm-tab-panels id="tab1">
<sm-panel>
gjdhnsrfijbgn<br>bdfjnbj
</sm-panel>
<sm-panel>
jadifjoaijdiajdo
dosfighjoi<br>
flkmgklfmzkl<br>
hbdsfhb
</sm-panel>
<section>
<h3>Audio</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae
repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p>
</section>
<section>
<h3>Video</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae
repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p>
</section>
</sm-tab-panels>
<h2>Variants</h2>
<p><span class="highlight">tab</span> is the only other variant than default style.</p>
<sm-tab-header variant="tab" target="tab2">
<sm-tab>Audio</sm-tab>
<sm-tab>Video</sm-tab>
</sm-tab-header>
<sm-tab-panels id="tab2">
<section>
<h3>Audio</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae
repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p>
</section>
<section>
<h3>Video</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae
repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p>
</section>
</sm-tab-panels>
<pre>
<code>
&lt;sm-tab-header variant="tab" target="tab2"&gt;
&lt;sm-tab&gt;Audio&lt;/sm-tab&gt;
&lt;sm-tab&gt;Video&lt;/sm-tab&gt;
&lt;/sm-tab-header&gt;
</code>
</pre>
</section>
<section id="tags_input_page" class="page hide-completely">
<h1 class="page__title">Tags input</h1>
<p>
To start using SM Components
This component has a very specific use case and that is for accepting tags.
Each time user presses enter or space, a new tag is created. Only unique values are allowed.
</p>
<h2>Interactive demo</h2>
<tags-input placeholder="Add tags..."></tags-input>
<pre>
<code>
&lt;tags-input placeholder="Add tags..."&gt;&lt;/tags-input&gt;
</code>
</pre>
<h2>Attributes</h2>
<section class="table">
<div class="tr">
<h4 class="table__heading">Attribute</h4>
<h4 class="table__heading">Description</h4>
</div>
<div class="tr">
<div><span class="highlight">placeholder</span> ( string )</div>
<p>
Define some string to let user know which kind of input is required.
</p>
</div>
<div class="tr">
<div><span class="highlight">limit</span> ( number )</div>
<p>
Set a limit of tags that will be accepted atmost
</p>
</div>
</section>
<h2>Styling</h2>
<p>CSS variables used to style this component</p>
<section class="table">
<div class="tr">
<h4 class="table__heading">Variable</h4>
<h4 class="table__heading">Description</h4>
</div>
<div class="tr">
<div><span class="highlight">--background</span></div>
<p>
Defines background of tags-input. Any valid CSS background property values are supported.
</p>
</div>
<div class="tr">
<div><span class="highlight">--border-radius</span></div>
<p>
Defines border-radius of tags-input
</p>
</div>
</section>
<h2>Supported functions</h2>
<section class="table">
<div class="tr">
<h4 class="table__heading">Function</h4>
<h4 class="table__heading">Description</h4>
</div>
<div class="tr">
<div><span class="highlight">focusIn()</span></div>
<p>
To give focus to this component use this function instead of <span
class="highlight">focus()</span>
</p>
</div>
<div class="tr">
<div><span class="highlight">reset()</span></div>
<p>
When this function is called value will be set to empty string.
</p>
</div>
</section>
<h2>Usage</h2>
<pre>
<code>
&lt;tags-input id="get_tags" placeholder="Add tags..."&gt;&lt;/tags-input&gt;
&lt;script&gt;
const getTags = document.getElementById('get_tags')
console.log(getTags.value); /* returns an array of string that are user input */
&lt;/script&gt;
</code>
</pre>
</section>
<section id="textarea_page" class="page hide-completely">
<h1 class="page__title">Textarea</h1>
<p>
To start using SM Components
</p>
<sm-textarea placeholder="Add some text here..." rows="4"></sm-textarea>
<p>Textarea is suitable component where multiline input is required. you can either specify
the number of lines textarea should expand or let the textarea expand according to user input until
a max-height is reached.</p>
<h2>Interactive demo</h2>
<sm-textarea id="my_textarea" placeholder="Add some text here..." rows="2"></sm-textarea>
<pre>
<code>
&lt;sm-textarea id="my_textarea" placeholder="Add some text here..." rows="4"&gt;&lt;/sm-textarea&gt;
</code>
</pre>
<h2>Variants</h2>
<p><span class="highlight">outlined</span> is only one styled variation. Default is filled which doesn't
require variant specified.</p>
<sm-textarea placeholder="This is a textarea" variant="outlined"></sm-textarea>
<pre>
<code>
&lt;sm-textarea placeholder="This is a textarea" variant="outlined"&gt;&lt;/sm-textarea&gt;
</code>
</pre>
<h2>Supported Attributes</h2>
<p>All the native HTML textarea attributes are valid.</p>
<section class="table">
<div class="tr">
<h4 class="table__heading">Attribute</h4>
<h4 class="table__heading">Description</h4>
</div>
<div class="tr">
<div><span class="highlight">disabled</span> (boolean)</div>
<p>
If present, all the interactions will be blocked.
</p>
</div>
<div class="tr">
<div><span class="highlight">rows</span> (number)</div>
<p>
Sets the number of rows textarea will be expanded by default.
Default is "1".
</p>
</div>
<div class="tr">
<div><span class="highlight">value</span> (string)</div>
<p>
Sets the default value of textarea.
</p>
</div>
</section>
<h2>Styling</h2>
<p>CSS variables used to style this component</p>
<section class="table">
<div class="tr">
<h4 class="table__heading">Variable</h4>
<h4 class="table__heading">Description</h4>
</div>
<div class="tr">
<div><span class="highlight">--background</span></div>
<p>
Defines background textarea. Any valid CSS background property values are supported.
</p>
</div>
<div class="tr">
<div><span class="highlight">--border-radius</span></div>
<p>
Defines border-radius of textarea
</p>
</div>
<div class="tr">
<div><span class="highlight">--max-height</div>
<p>
Defines max-height to which textarea is allowed to expand. Default is "8rem"
</p>
</div>
</section>
<h2>Supported functions</h2>
<section class="table">
<div class="tr">
<h4 class="table__heading">Function</h4>
<h4 class="table__heading">Description</h4>
</div>
<div class="tr">
<div><span class="highlight">focusIn()</span></div>
<p>
To give focus to this component use this function instead of <span
class="highlight">focus()</span>
</p>
</div>
<div class="tr">
<div><span class="highlight">reset()</span></div>
<p>
When this function is called value will be set to empty string.
</p>
</div>
</section>
<h2>Setters</h2>
<section class="table">
<div class="tr">
<h4 class="table__heading">Function</h4>
<h4 class="table__heading">Description</h4>
</div>
<div class="tr">
<div><span class="highlight">disabled</span></div>
<p>
Set disabled state to <span class="highlight">true</span> or <span
class="highlight">false</span>
</p>
</div>
<div class="tr">
<div><span class="highlight">value</span></div>
<p>
Sets the value of textarea with JS
</p>
</div>
</section>
<h2>Usage</h2>
<pre>
<code>
&lt;sm-textarea placeholder="This is a textarea" id="my_textarea"&gt;&lt;/sm-textarea&gt;
&lt;script&gt;
const myTextarea = document.getElelementById('my_textarea')
myTextarea.value = 'some string'; /* setting value of textarea */
myTextarea.addEventListener('input', event => {
const value = event.target.value; /* accessing value of textarea */
})
&lt;/script&gt;
</code>
</pre>
</section>
<section id="text_field_page" class="page hide-completely">
<h1 class="page__title">Text field</h1>
@ -1332,7 +1896,7 @@
async function showPopup(popup, pinned) {
zIndex++
getRef(popup).setAttribute('style', `z-index: ${zIndex}`)
popupStack = getRef(popup).show(pinned, popupStack)
popupStack = getRef(popup).show({ pinned, popupStack })
return getRef(popup);
}

140
components/index.min.html
View File

@ -28,11 +28,23 @@
&lt;div style="margin-left: 0.5rem;"&gt;Disabled checkbox&lt;/div&gt;
&lt;/sm-checkbox&gt;
</code>
</pre><h2>Attributes</h2><p>All the native HTML checkbox attributes are valid</p><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">checked</span> (boolean)</div><p>If present, checkbox is set to checked state as default.</p></div><div class="tr"><div><span class="highlight">disabled</span> (boolean)</div><p>If present checkbox is set to disabled state. all the interactions are disabled</p></div><div class="tr"><div><span class="highlight">value</span> (string)</div><p>Sets value of checkbox which can be accessed by value property with JS</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--border-color</span></div><p>Defines color of un-checked checkbox border</p></div><div class="tr"><div><span class="highlight">--border-radius</span></div><p>Defines border-radius of checkbox square</p></div><div class="tr"><div><span class="highlight">--height</span></div><p>Defines height of checkbox</p></div><div class="tr"><div><span class="highlight">--width</span></div><p>Defines width of checkbox</p></div></section></section><section id="copy_page" class="page hide-completely"><h1 class="page__title">Copy</h1><p>To start using SM Components</p><sm-copy value="copy this message"></sm-copy></section><section id="file_input_page" class="page hide-completely"><h1 class="page__title">File input</h1><p><span class="highlight">&lt;file-input&gt;</span> is essentially native <span class="highlight">&lt;input type="file"/&gt; </span>with added style.<br>So every attribute supported by native file input is supported as can be used in exactly same way.</p><h2>Interactive demo</h2><file-input multiple>Select multiple files</file-input><pre>
</pre><h2>Attributes</h2><p>All the native HTML checkbox attributes are valid</p><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">checked</span> (boolean)</div><p>If present, checkbox is set to checked state as default.</p></div><div class="tr"><div><span class="highlight">disabled</span> (boolean)</div><p>If present checkbox is set to disabled state. all the interactions are disabled</p></div><div class="tr"><div><span class="highlight">value</span> (string)</div><p>Sets value of checkbox which can be accessed by value property with JS</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--border-color</span></div><p>Defines color of un-checked checkbox border</p></div><div class="tr"><div><span class="highlight">--border-radius</span></div><p>Defines border-radius of checkbox square</p></div><div class="tr"><div><span class="highlight">--height</span></div><p>Defines height of checkbox</p></div><div class="tr"><div><span class="highlight">--width</span></div><p>Defines width of checkbox</p></div></section></section><section id="copy_page" class="page hide-completely"><h1 class="page__title">Copy</h1><h2>Interactive demo</h2><sm-copy value="copy this message"></sm-copy><pre>
<code>
&lt;sm-copy value="copy this message"&gt;&lt;/sm-copy&gt;
</code>
</pre><h2>Attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">value</span> ( string )</div><p>Defines content that will be copied when copy button is clicked</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--button-background-color</span></div><p>Defines background color of copy button</p></div><div class="tr"><div><span class="highlight">--button-border-radius</span></div><p>Defines border-radius of copy button</p></div></section><h2>Usage</h2><pre>
<code>
&lt;sm-copy id="text_to_copy" value="sample text"&gt;&lt;/sm-copy&gt;
&lt;script&gt;
const textToCopy = document.getElementById('text_to_copy')
textToCopy.value = 'Different value'; /* Setting value to be copied */
&lt;/script&gt;
</code>
</pre></section><section id="file_input_page" class="page hide-completely"><h1 class="page__title">File input</h1><p><span class="highlight">&lt;file-input&gt;</span> is essentially native <span class="highlight">&lt;input type="file"/&gt; </span>with added style.<br>So every attribute supported by native file input is supported as can be used in exactly same way.</p><h2>Interactive demo</h2><file-input multiple>Select multiple files</file-input><pre>
<code>
&lt;file-input multiple&gt;Select multiple files&lt;/file-input&gt;
</code>
</pre><h2>Attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">accept</span></div><p>One or more unique file type specifiers describing file types to allow</p></div><div class="tr"><div><span class="highlight">capture</span></div><p>What source to use for capturing image or video data</p></div><div class="tr"><div><span class="highlight">files</span></div><p>A FileList listing the chosen files</p></div><div class="tr"><div><span class="highlight">multiple</span></div><p>A Boolean which, if present, indicates that the user may choose more than one file</p></div></section></section><section id="form_page" class="page hide-completely"><h1 class="page__title">Form</h1><p>Browser support for web components form validation or form submition is not perfect. so to circumvent this problem <span class="highlight">&lt;sm-form&gt;</span> can be used.</p><h2>Interactive demo</h2><sm-form><sm-input placeholder="Email" type="email" error-text="please enter correct email" required animate></sm-input><sm-input placeholder="Password" type="password" required animate></sm-input><sm-button variant="primary" disabled>Login</sm-button></sm-form><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">reset()</span></div><p>When this function is called upon form element. all the form elements (sm- form elements only) will be reset to default state.</p></div></section><h2>Nested element behaviour</h2><p></p></section><section id="hamburger_menu_page" class="page hide-completely"><h1 class="page__title">Hamburger menu</h1><hamburger-menu></hamburger-menu></section><section id="input_page" class="page hide-completely"><h1 class="page__title">Input</h1><h2>Interactive demo</h2><sm-input id="my_input" placeholder="Email" type="email" value="john@doe" animate></sm-input><pre>
</pre><h2>Attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">accept</span></div><p>One or more unique file type specifiers describing file types to allow</p></div><div class="tr"><div><span class="highlight">capture</span></div><p>What source to use for capturing image or video data</p></div><div class="tr"><div><span class="highlight">files</span></div><p>A FileList listing the chosen files</p></div><div class="tr"><div><span class="highlight">multiple</span></div><p>A Boolean which, if present, indicates that the user may choose more than one file</p></div></section></section><section id="form_page" class="page hide-completely"><h1 class="page__title">Form</h1><p>Browser support for web components form validation or form submition is not perfect. so to circumvent this problem <span class="highlight">&lt;sm-form&gt;</span> can be used.</p><h2>Interactive demo</h2><sm-form><sm-input placeholder="Email" type="email" error-text="please enter correct email" required animate></sm-input><sm-input placeholder="Password" type="password" required animate></sm-input><sm-button variant="primary" disabled>Login</sm-button></sm-form><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">reset()</span></div><p>When this function is called upon form element. all the form elements (sm- form components only) will be reset to default state.</p></div></section><h2>Nested element behaviour</h2><p></p></section><section id="hamburger_menu_page" class="page hide-completely"><h1 class="page__title">Hamburger menu</h1><hamburger-menu></hamburger-menu></section><section id="input_page" class="page hide-completely"><h1 class="page__title">Input</h1><h2>Interactive demo</h2><sm-input id="my_input" placeholder="Email" type="email" value="john@doe" animate></sm-input><pre>
<code>
&lt;sm-input id="my_input" placeholder="Email" type="email" value="john@doe" animate&gt;&lt;/sm-input&gt;
</code>
@ -40,7 +52,7 @@
<code>
&lt;sm-input placeholder="Name" variant="outlined" animate&gt;&lt;/sm-input&gt;
</code>
</pre><h2>Custom Attributes</h2><p>All the native HTML input attributes are valid. These are additional attributes which can be used to add more functionality</p><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">animate</span> (boolean)</div><p>If present, placeholder of input will be animated to occupy space above enterned text instead of vanishing.</p></div><div class="tr"><div><span class="highlight">error-text</span> (string)</div><p>Message specified as value of this attribute will be shown if validation fails.</p></div></section><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">focusIn()</span></div><p>To give focus to this component use this function instead of <span class="highlight">focus()</span></p></div><div class="tr"><div><span class="highlight">reset()</span></div><p>When this function is called value will be set to empty string.</p></div></section><h2>Custom Setters</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">customValidation</span></div><p>If you want to perform custom validation on input value, set the desired validation function.</p></div></section><pre>
</pre><h2>Custom Attributes</h2><p>All the native HTML input attributes are valid. These are additional attributes which can be used to add more functionality</p><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">animate</span> (boolean)</div><p>If present, placeholder of input will be animated to occupy space above enterned text instead of vanishing.</p></div><div class="tr"><div><span class="highlight">error-text</span> (string)</div><p>Message specified as value of this attribute will be shown if validation fails.</p></div></section><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">focusIn()</span></div><p>To give focus to this component use this function instead of <span class="highlight">focus()</span></p></div><div class="tr"><div><span class="highlight">reset()</span></div><p>When this function is called value will be set to empty string.</p></div></section><h2>Custom Setters</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">customValidation</span></div><p>If you want to perform custom validation on input value, set the desired validation function.</p></div><div class="tr"><div><span class="highlight">disabled</span></div><p>Set disabled state to <span class="highlight">true</span> or <span class="highlight">false</span></p></div><div class="tr"><div><span class="highlight">value</span></div><p>Sets the value of input with JS</p></div></section><pre>
<code>
&lt;script&gt;
/* Setting custom validation function */
@ -68,16 +80,35 @@
notificationDrawer.push('This is a notification', { pinned: true })
&lt;/script&gt;
</code>
</pre></section><section id="popup_page" class="page hide-completely"><h1 class="page__title">Popup / dialog</h1><p>Popups are used to show addition UI elements that you may want to hide at first and reveal them when needed.</p><sm-popup id="popup"><sm-form><sm-input placeholder="hjdfijkgbn"></sm-input></sm-form></sm-popup><sm-button variant="primary" onclick="getRef('popup').show()">show popup</sm-button></section><section id="radio_page" class="page hide-completely"><h1 class="page__title">Radio button</h1><p>Radio buttons are useful whenever only one option needs to be selected from mutiple options. this functionality can be achieved by assigning same name to the group of radio buttons.<br><span class="highlight">sm-radio</span> supports all the attributes of native HTML5 radio.</p><strong>linking some HTML element with <span class="highlght">sm-radio</span> using <span class="highlight">label</span> tag won't work.<br>Add the element inside the opening and closing sm-radio tag.</strong><h2>Interactive demo</h2><div class="grid gap-0-5"><sm-radio name="abc" value="on" checked><div class="flex">&nbsp;&nbsp;On</div></sm-radio><sm-radio name="abc" value="off"><div class="flex">&nbsp;&nbsp;Off</div></sm-radio><sm-radio name="abc" value="🤷"><div class="flex">&nbsp;&nbsp;🤷</div></sm-radio></div><pre>
</pre></section><section id="popup_page" class="page hide-completely"><h1 class="page__title">Popup / dialog</h1><p>Popups are used to show addition UI elements that you may want to hide at first and reveal them when needed.</p><h2>Interactive demo</h2><sm-popup id="my_popup"><h2>Title</h2><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore tenetur natus, pariatur beatae veritatis debitis repellat laudantium corporis velit adipisci!</p></sm-popup><sm-button onclick="getRef('my_popup').show()">show popup</sm-button><pre>
<code>
&lt;sm-popup id="my_popup"&gt;
&lt;!--Popup content --&gt;
&lt;/sm-popup&gt;
</code>
</pre><h2>Usage</h2><pre>
<code>
&lt;sm-popup id="my_popup"&gt;
&lt;!--Popup content --&gt;
&lt;/sm-popup&gt;
&lt;sm-button id="show_popup_button"&gt;Show popup&lt;/sm-button&gt;
&lt;script&gt;
const myPopup = document.getElementById('my_popup')
document.getElementById('show_popup_button').addEventListener('click', e =&gt; {
myPopup.show({options});
})
&lt;/script&gt;
</code>
</pre><h2>Custom Attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">open</span> (boolean)</div><p>If present, popup will be in opened state by default. useful for development purpose.</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--backdrop-background</span></div><p>Defines background property of popup backdrop. Any valid CSS background value is supported.</p></div><div class="tr"><div><span class="highlight">--border-radius</span></div><p>Defines border-radius of popup dialog box.</p></div><div class="tr"><div><span class="highlight">--body-padding</span></div><p>Defines padding of popup dialog box.</p></div><div class="tr"><div><span class="highlight">--height</span></div><p>Defines height of popup dialog box.</p></div><div class="tr"><div><span class="highlight">--min-height</span></div><p>Defines min-height of popup dialog box.</p></div><div class="tr"><div><span class="highlight">--width</span></div><p>Defines width of popup dialog box.</p></div><div class="tr"><div><span class="highlight">--min-width</span></div><p>Defines min-width of popup dialog box.</p></div></section><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">show()</span></div><p>Displays the hidden popup, when called upon specified popup.</p></div><div class="tr"><div><span class="highlight">hide()</span></div><p>Hides the visible popup, when called upon specified popup</p></div></section><h4>Show() options</h4><section class="table"><div class="tr"><h4 class="table__heading">Property</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">pinned</span> ( Boolean )</div><p>If set <span class="highlight">true</span>, opened popup won't be closed when clicked outside the popup area.</p></div></section><h2>Custom events</h2><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">popupopned</span></div><p>Fired when a popup is opened, to access which popup fired the event you can use <span class="highlight">event.detail.popup</span> within event listener</p></div><div class="tr"><div><span class="highlight">popupclosed</span></div><p>Fired when a popup is closed, to access which popup fired the event you can use <span class="highlight">event.detail.popup</span> within event listener</p></div></section></section><section id="radio_page" class="page hide-completely"><h1 class="page__title">Radio button</h1><p>Radio buttons are useful whenever only one option needs to be selected from mutiple options. this functionality can be achieved by assigning same name to the group of radio buttons.<br><span class="highlight">sm-radio</span> supports all the attributes of native HTML5 radio.</p><strong>linking some HTML element with <span class="highlght">sm-radio</span> using <span class="highlight">label</span> tag won't work.<br>Add the element inside the opening and closing sm-radio tag.</strong><h2>Interactive demo</h2><div class="grid gap-0-5"><sm-radio name="abc" value="on" checked><div>&nbsp;&nbsp;On</div></sm-radio><sm-radio name="abc" value="off"><div>&nbsp;&nbsp;Off</div></sm-radio><sm-radio name="abc" value="🤷"><div>&nbsp;&nbsp;🤷</div></sm-radio></div><pre>
<code>
&lt;sm-radio name="abc" value="on" checked&gt;
&lt;div class="flex"&gt;&nbsp;&nbsp;On&lt;/div&gt;
&lt;div&gt;&nbsp;&nbsp;On&lt;/div&gt;
&lt;/sm-radio&gt;
&lt;sm-radio name="abc" value="off"&gt;
&lt;div class="flex"&gt;&nbsp;&nbsp;Off&lt;/div&gt;
&lt;div&gt;&nbsp;&nbsp;Off&lt;/div&gt;
&lt;/sm-radio&gt;
&lt;sm-radio name="abc" value="🤷"&gt;
&lt;div class="flex"&gt;&nbsp;&nbsp;🤷&lt;/div&gt;
&lt;div&gt;&nbsp;&nbsp;🤷&lt;/div&gt;
&lt;/sm-radio&gt;
</code>
</pre><h2>States</h2><h4>Checked</h4><p>To make switch turned on by default add <span class="highlight">checked</span> attribute.</p><sm-radio checked><div style="margin-left:.5rem">Checked radio button</div></sm-radio><pre>
@ -108,7 +139,7 @@
&lt;sm-option value="3"&gt;option3&lt;/sm-option&gt;
&lt;/sm-select&gt;
</code>
</pre><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.detail.value</span></p></div></section><pre>
</pre><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.detail.value</span></p></div></section><h2>Usage</h2><pre>
<code>
&lt;sm-select id="my_select"&gt;
&lt;sm-option value="1"&gt;option1&lt;/sm-option&gt;
@ -146,7 +177,96 @@
<code>
&lt;sm-spinner&gt;&lt;/sm-spinner&gt;
</code>
</pre></section><section id="strip_select_page" class="page hide-completely"><h1 class="page__title">Strip select</h1><p>To start using SM Components</p><strip-select id="browse_category_selector" multiline><strip-option value="movie" selected>Movie</strip-option><strip-option value="tv series">TV series</strip-option><strip-option value="video">Video</strip-option><strip-option value="music">Music</strip-option></strip-select></section><section id="tabs_page" class="page hide-completely"><h1 class="page__title">Tabs</h1><p>To start using SM Components</p><sm-tab-header variant="tab" target="tab1"><sm-tab>Audio</sm-tab><sm-tab>Video</sm-tab></sm-tab-header><sm-tab-panels id="tab1"><sm-panel>gjdhnsrfijbgn<br>bdfjnbj</sm-panel><sm-panel>jadifjoaijdiajdo dosfighjoi<br>flkmgklfmzkl<br>hbdsfhb</sm-panel></sm-tab-panels></section><section id="tags_input_page" class="page hide-completely"><h1 class="page__title">Tags input</h1><p>To start using SM Components</p><tags-input placeholder="Add tags..."></tags-input></section><section id="textarea_page" class="page hide-completely"><h1 class="page__title">Textarea</h1><p>To start using SM Components</p><sm-textarea placeholder="Add some text here..." rows="4"></sm-textarea></section><section id="text_field_page" class="page hide-completely"><h1 class="page__title">Text field</h1><p>To start using SM Components</p><text-field value="Double click me!"></text-field></section><section id="theme_toggle_page" class="page hide-completely"><h1 class="page__title">Theme toggle</h1><p>Use <span class="highlight">theme-toggle</span> to create light/dark theme easily with CSS variables.</p><p>When this is toggled by user the component changes the custom data attribute <span class="highlight">data-theme=""</span> on HTML body tag to either <span class="highlight">light</span> or <span class="highlight">dark</span></p><p>By default theme is set to OS level preferred-color-scheme ( supported by Android, iOS, Windows and MacOS ).</p><h2>Interactive demo</h2><theme-toggle></theme-toggle><h2>HTML</h2><pre>
</pre></section><section id="strip_select_page" class="page hide-completely"><h1 class="page__title">Strip select</h1><p>This is a modern interpritation of classical HTML <span class="highlight">select</span> tag. More suitable for touch devices,</p><h2>Interactive demo</h2><span>Sort by</span><strip-select id="sort_by"><strip-option value="relevance" selected>Relevance</strip-option><strip-option value="popularity">Popularity</strip-option><strip-option value="price">Price</strip-option><strip-option value="rating">Rating</strip-option></strip-select><pre>
<code>
&lt;strip-select id="sort_by"&gt;
&lt;strip-option value="relevance" selected&gt;Relevance&lt;/strip-option&gt;
&lt;strip-option value="popularity"&gt;Popularity&lt;/strip-option&gt;
&lt;strip-option value="price"&gt;Price&lt;/strip-option&gt;
&lt;strip-option value="rating"&gt;Rating&lt;/strip-option&gt;
&lt;/strip-select&gt;
</code>
</pre><h2>Custom attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">multiline</span>( Boolean )</div><p>If present, options will wrap around instead of overflowing horizontally.</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--gap</span></div><p>Defines space between options. Default is "0.5rem".</p></div></section><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.detail.value</span></p></div></section><h2>Usage</h2><pre>
<code>
&lt;strip-select id="sort_by"&gt;
&lt;strip-option value="relevance" selected&gt;Relevance&lt;/strip-option&gt;
&lt;strip-option value="popularity"&gt;Popularity&lt;/strip-option&gt;
&lt;strip-option value="price"&gt;Price&lt;/strip-option&gt;
&lt;strip-option value="rating"&gt;Rating&lt;/strip-option&gt;
&lt;/strip-select&gt;
&lt;script&gt;
const sortBy = document.getElementById('sort_by')
sortBy.addEventListener('change', event =&gt; {
console.log(event.detail.value) // logs out value of selected option
})
&lt;/script&gt;
</code>
</pre></section><section id="tabs_page" class="page hide-completely"><h1 class="page__title">Tabs</h1><p>This component can be used sub-page navigation.</p><h2>Usage</h2><pre>
<code>
&lt;sm-tab-header target="tab1"&gt;
&lt;sm-tab&gt;
tab name
&lt;/sm-tab&gt;
&lt;sm-tab&gt;
tab name
&lt;/sm-tab&gt;
&lt;/sm-tab-header&gt;
&lt;sm-tab-panels id="tab1"&gt;
&lt;section&gt;
&lt;!-- Panel content --&gt;
&lt;/section&gt;
&lt;section&gt;
&lt;!-- Panel content --&gt;
&lt;/section&gt;
&lt;/sm-tab-panels&gt;
</code>
</pre><p>There are three components that together make the tabs components.</p><ol><li>sm-tab-header</li><li>sm-tab</li><li>sm-tab-panels</li></ol><p></p><h3>sm-tab-header</h3><p>This is the first half of tabs that include the tabs header and actual tab buttons.</p><pre>
<code>
&lt;sm-tab-header variant="tab" target="tab2"&gt;
&lt;sm-tab&gt;Audio&lt;/sm-tab&gt;
&lt;sm-tab&gt;Video&lt;/sm-tab&gt;
&lt;/sm-tab-header&gt;
</code>
</pre><h2>Supported attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">variant</span> ( string )</div><p>Specifies variant of sm-tab-header. Only value can be <span class="highlight">tab</span></p></div><div class="tr"><div><span class="highlight">target</span> ( string )</div><p>Pass in the ID of respective sm-tab-panels to link them. This is how sm-tab-header communicates with sm-tab-panel on which tab or panel should be displayed.</p></div></section><h2>Interactive demo</h2><sm-tab-header target="tab1"><sm-tab>Audio</sm-tab><sm-tab>Video</sm-tab></sm-tab-header><sm-tab-panels id="tab1"><section><h3>Audio</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p></section><section><h3>Video</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p></section></sm-tab-panels><h2>Variants</h2><p><span class="highlight">tab</span> is the only other variant than default style.</p><sm-tab-header variant="tab" target="tab2"><sm-tab>Audio</sm-tab><sm-tab>Video</sm-tab></sm-tab-header><sm-tab-panels id="tab2"><section><h3>Audio</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p></section><section><h3>Video</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p></section></sm-tab-panels><pre>
<code>
&lt;sm-tab-header variant="tab" target="tab2"&gt;
&lt;sm-tab&gt;Audio&lt;/sm-tab&gt;
&lt;sm-tab&gt;Video&lt;/sm-tab&gt;
&lt;/sm-tab-header&gt;
</code>
</pre></section><section id="tags_input_page" class="page hide-completely"><h1 class="page__title">Tags input</h1><p>This component has a very specific use case and that is for accepting tags. Each time user presses enter or space, a new tag is created. Only unique values are allowed.</p><h2>Interactive demo</h2><tags-input placeholder="Add tags..."></tags-input><pre>
<code>
&lt;tags-input placeholder="Add tags..."&gt;&lt;/tags-input&gt;
</code>
</pre><h2>Attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">placeholder</span> ( string )</div><p>Define some string to let user know which kind of input is required.</p></div><div class="tr"><div><span class="highlight">limit</span> ( number )</div><p>Set a limit of tags that will be accepted atmost</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--background</span></div><p>Defines background of tags-input. Any valid CSS background property values are supported.</p></div><div class="tr"><div><span class="highlight">--border-radius</span></div><p>Defines border-radius of tags-input</p></div></section><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">focusIn()</span></div><p>To give focus to this component use this function instead of <span class="highlight">focus()</span></p></div><div class="tr"><div><span class="highlight">reset()</span></div><p>When this function is called value will be set to empty string.</p></div></section><h2>Usage</h2><pre>
<code>
&lt;tags-input id="get_tags" placeholder="Add tags..."&gt;&lt;/tags-input&gt;
&lt;script&gt;
const getTags = document.getElementById('get_tags')
console.log(getTags.value); /* returns an array of string that are user input */
&lt;/script&gt;
</code>
</pre></section><section id="textarea_page" class="page hide-completely"><h1 class="page__title">Textarea</h1><p>Textarea is suitable component where multiline input is required. you can either specify the number of lines textarea should expand or let the textarea expand according to user input until a max-height is reached.</p><h2>Interactive demo</h2><sm-textarea id="my_textarea" placeholder="Add some text here..." rows="2"></sm-textarea><pre>
<code>
&lt;sm-textarea id="my_textarea" placeholder="Add some text here..." rows="4"&gt;&lt;/sm-textarea&gt;
</code>
</pre><h2>Variants</h2><p><span class="highlight">outlined</span> is only one styled variation. Default is filled which doesn't require variant specified.</p><sm-textarea placeholder="This is a textarea" variant="outlined"></sm-textarea><pre>
<code>
&lt;sm-textarea placeholder="This is a textarea" variant="outlined"&gt;&lt;/sm-textarea&gt;
</code>
</pre><h2>Supported Attributes</h2><p>All the native HTML textarea attributes are valid.</p><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">disabled</span> (boolean)</div><p>If present, all the interactions will be blocked.</p></div><div class="tr"><div><span class="highlight">rows</span> (number)</div><p>Sets the number of rows textarea will be expanded by default. Default is "1".</p></div><div class="tr"><div><span class="highlight">value</span> (string)</div><p>Sets the default value of textarea.</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--background</span></div><p>Defines background textarea. Any valid CSS background property values are supported.</p></div><div class="tr"><div><span class="highlight">--border-radius</span></div><p>Defines border-radius of textarea</p></div><div class="tr"><div><span class="highlight">--max-height</span></div><p>Defines max-height to which textarea is allowed to expand. Default is "8rem"</p></div></section><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">focusIn()</span></div><p>To give focus to this component use this function instead of <span class="highlight">focus()</span></p></div><div class="tr"><div><span class="highlight">reset()</span></div><p>When this function is called value will be set to empty string.</p></div></section><h2>Setters</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">disabled</span></div><p>Set disabled state to <span class="highlight">true</span> or <span class="highlight">false</span></p></div><div class="tr"><div><span class="highlight">value</span></div><p>Sets the value of textarea with JS</p></div></section><h2>Usage</h2><pre>
<code>
&lt;sm-textarea placeholder="This is a textarea" id="my_textarea"&gt;&lt;/sm-textarea&gt;
&lt;script&gt;
const myTextarea = document.getElelementById('my_textarea')
myTextarea.value = 'some string'; /* setting value of textarea */
myTextarea.addEventListener('input', event => {
const value = event.target.value; /* accessing value of textarea */
})
&lt;/script&gt;
</code>
</pre></section><section id="text_field_page" class="page hide-completely"><h1 class="page__title">Text field</h1><p>To start using SM Components</p><text-field value="Double click me!"></text-field></section><section id="theme_toggle_page" class="page hide-completely"><h1 class="page__title">Theme toggle</h1><p>Use <span class="highlight">theme-toggle</span> to create light/dark theme easily with CSS variables.</p><p>When this is toggled by user the component changes the custom data attribute <span class="highlight">data-theme=""</span> on HTML body tag to either <span class="highlight">light</span> or <span class="highlight">dark</span></p><p>By default theme is set to OS level preferred-color-scheme ( supported by Android, iOS, Windows and MacOS ).</p><h2>Interactive demo</h2><theme-toggle></theme-toggle><h2>HTML</h2><pre>
<code>
&lt;theme-toggle&gt;&lt;/theme-toggle&gt;
</code>
@ -290,7 +410,7 @@
async function showPopup(popup, pinned) {
zIndex++
getRef(popup).setAttribute('style', `z-index: ${zIndex}`)
popupStack = getRef(popup).show(pinned, popupStack)
popupStack = getRef(popup).show({ pinned, popupStack })
return getRef(popup);
}