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

UI fixes

Browse Source
This commit is contained in:
sairaj mote 2022-11-25 01:15:41 +05:30
parent 182c4403ad
commit eeed13af3e
8 changed files with 16 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/dist/chips.js vendored
View File

@ -298,10 +298,6 @@ smChip.innerHTML = `
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host([selected]) .sm-chip{
color: var(--selected-option-color, rgba(var(--background-color,white)));
background-color: var(--selected-background-color, var(--accent-color,teal));
}
:host(:focus-within){
outline: none;
}

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

File diff suppressed because one or more lines are too long

5
components/dist/collapsed-text.js vendored
View File

@ -18,9 +18,8 @@ collapsedText.innerHTML = `
-webkit-line-clamp: unset;
}
.toggle-button {
position: absolute;
bottom: 0;
right: 0;
margin-top: 0.5rem;
margin-right: auto;
cursor: pointer;
font-weight: 500;
background: var(--button-background, #fff);

2
components/dist/collapsed-text.min.js vendored
View File

@ -1 +1 @@
const collapsedText=document.createElement("template");collapsedText.innerHTML='\n <style>\n .wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n .collapsed-text {\n display: -webkit-box;\n -webkit-line-clamp: var(--line-clamp,3);\n -webkit-box-orient: vertical; \n text-overflow: ellipsis;\n overflow: hidden;\n }\n :host([open]) .collapsed-text {\n -webkit-line-clamp: unset;\n }\n .toggle-button {\n position: absolute;\n bottom: 0;\n right: 0; \n cursor: pointer;\n font-weight: 500;\n background: var(--button-background, #fff);\n border: none;\n outline: none;\n color: var(--accent-color,teal);\n font-size: inherit;\n font-family: inherit;\n z-index: 1;\n }\n </style>\n <div class="wrapper">\n <div class="collapsed-text"><slot></slot></div>\n <button class="toggle-button">Show more</button>\n </div>\n';class CollapsedText extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(collapsedText.content.cloneNode(!0)),this.isCollapsed=!0,this.toggleCollapsedText=this.toggleCollapsedText.bind(this),this.wrapper=this.shadowRoot.querySelector(".collapsed-text"),this.toggleButton=this.shadowRoot.querySelector(".toggle-button")}toggleCollapsedText(){this.toggleButton.textContent=this.isCollapsed?"Show less":"Show more",this.isCollapsed?(this.setAttribute("open",""),this.wrapper.removeEventListener("click",this.toggleCollapsedText)):(this.removeAttribute("open"),this.wrapper.addEventListener("click",this.toggleCollapsedText)),this.isCollapsed=!this.isCollapsed}connectedCallback(){this.wrapper.addEventListener("click",this.toggleCollapsedText),this.toggleButton.addEventListener("click",this.toggleCollapsedText)}disconnectedCallback(){this.wrapper.removeEventListener("click",this.toggleCollapsedText),this.toggleButton.removeEventListener("click",this.toggleCollapsedText)}}window.customElements.define("collapsed-text",CollapsedText);
const collapsedText=document.createElement("template");collapsedText.innerHTML='\n <style>\n .wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n .collapsed-text {\n display: -webkit-box;\n -webkit-line-clamp: var(--line-clamp,3);\n -webkit-box-orient: vertical; \n text-overflow: ellipsis;\n overflow: hidden;\n }\n :host([open]) .collapsed-text {\n -webkit-line-clamp: unset;\n }\n .toggle-button {\n margin-top: 0.5rem;\n margin-right: auto;\n cursor: pointer;\n font-weight: 500;\n background: var(--button-background, #fff);\n border: none;\n outline: none;\n color: var(--accent-color,teal);\n font-size: inherit;\n font-family: inherit;\n z-index: 1;\n }\n </style>\n <div class="wrapper">\n <div class="collapsed-text"><slot></slot></div>\n <button class="toggle-button">Show more</button>\n </div>\n';class CollapsedText extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(collapsedText.content.cloneNode(!0)),this.isCollapsed=!0,this.toggleCollapsedText=this.toggleCollapsedText.bind(this),this.wrapper=this.shadowRoot.querySelector(".collapsed-text"),this.toggleButton=this.shadowRoot.querySelector(".toggle-button")}toggleCollapsedText(){this.toggleButton.textContent=this.isCollapsed?"Show less":"Show more",this.isCollapsed?(this.setAttribute("open",""),this.wrapper.removeEventListener("click",this.toggleCollapsedText)):(this.removeAttribute("open"),this.wrapper.addEventListener("click",this.toggleCollapsedText)),this.isCollapsed=!this.isCollapsed}connectedCallback(){this.wrapper.addEventListener("click",this.toggleCollapsedText),this.toggleButton.addEventListener("click",this.toggleCollapsedText)}disconnectedCallback(){this.wrapper.removeEventListener("click",this.toggleCollapsedText),this.toggleButton.removeEventListener("click",this.toggleCollapsedText)}}window.customElements.define("collapsed-text",CollapsedText);

12
components/dist/input.js vendored
View File

@ -89,9 +89,6 @@ smInput.innerHTML = `
margin-right: -2rem;
pointer-events: none !important;
}
.clear{
visibility: hidden;
}
.readonly{
pointer-events: none;
}
@ -114,6 +111,7 @@ smInput.innerHTML = `
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
user-select: none;
will-change: transform;
@ -228,7 +226,7 @@ smInput.innerHTML = `
<div class="container">
<input type="text"/>
<div part="placeholder" class="label"></div>
<button class="clear" title="Clear" tabindex="-1">
<button class="clear hidden" title="Clear" tabindex="-1">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
</button>
</div>
@ -421,7 +419,11 @@ customElements.define('sm-input',
checkInput(e) {
if (!this.hasAttribute('readonly')) {
this.clearBtn.style.visibility = this.input.value !== '' ? 'visible' : 'hidden';
if (this.input.value !== '') {
this.clearBtn.classList.remove('hidden');
} else {
this.clearBtn.classList.add('hidden');
}
}
if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder').trim() === '') return;
if (this.input.value !== '') {

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

File diff suppressed because one or more lines are too long

5
components/dist/textarea.js vendored
View File

@ -33,7 +33,6 @@ smTextarea.innerHTML = `
cursor: text;
min-width: 0;
text-align: left;
overflow: hidden auto;
grid-template-columns: 1fr;
align-items: stretch;
max-height: var(--max-height);
@ -57,6 +56,7 @@ smTextarea.innerHTML = `
border: none;
outline: none;
line-height: 1.5;
overflow: hidden auto;
}
.textarea::after{
content: attr(data-value) ' ';
@ -73,7 +73,6 @@ smTextarea.innerHTML = `
box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset;
}
.placeholder{
position: absolute;
margin: var(--padding,0.6rem 0.8rem);
opacity: .7;
font-weight: inherit;
@ -81,6 +80,8 @@ smTextarea.innerHTML = `
line-height: 1.5;
pointer-events: none;
user-select: none;
grid-area: 2/1;
align-self: center;
}
:host([disabled]) .textarea{
cursor: not-allowed;

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 --danger-color: red;\n --border-radius: 0.3rem;\n --background: rgba(var(--text-color,(17,17,17)), 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,(17,17,17)), 0.4) inset;\n background: rgba(var(--background-color,(255,255,255)), 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 transition: opacity 0.3s, box-shadow 0.2s;\n }\n .textarea::after,\n textarea{\n padding: var(--padding,0.6rem 0.8rem);\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 }\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,teal) inset;\n }\n .placeholder{\n position: absolute;\n margin: var(--padding,0.6rem 0.8rem);\n opacity: .7;\n font-weight: inherit;\n font-size: inherit;\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,(17,17,17)), 0.3);\n border-radius: 1rem;\n &:hover{\n background: rgba(var(--text-color,(17,17,17)), 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())}});
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 --danger-color: red;\n --border-radius: 0.3rem;\n --background: rgba(var(--text-color,(17,17,17)), 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,(17,17,17)), 0.4) inset;\n background: rgba(var(--background-color,(255,255,255)), 1);\n }\n .textarea{\n display: grid;\n position: relative;\n cursor: text;\n min-width: 0;\n text-align: left;\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 transition: opacity 0.3s, box-shadow 0.2s;\n }\n .textarea::after,\n textarea{\n padding: var(--padding,0.6rem 0.8rem);\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 auto;\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,teal) inset;\n }\n .placeholder{\n margin: var(--padding,0.6rem 0.8rem);\n opacity: .7;\n font-weight: inherit;\n font-size: inherit;\n line-height: 1.5;\n pointer-events: none;\n user-select: none;\n grid-area: 2/1;\n align-self: center;\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,(17,17,17)), 0.3);\n border-radius: 1rem;\n &:hover{\n background: rgba(var(--text-color,(17,17,17)), 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())}});