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

Bug fixes

Browse Source
This commit is contained in:
sairaj mote 2024-02-08 01:49:46 +05:30
parent c475ce20d7
commit 997d355b02
4 changed files with 19 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/dist/input.js vendored
View File

@ -233,7 +233,7 @@ smInput.innerHTML = /*html*/`
`;
customElements.define('sm-input',
class SmInput extends HTMLElement {
static hasAppendedStyles = false
static hasAppendedStyles = false;
#validationState = {
validatedFor: undefined,
isValid: false,
@ -373,6 +373,7 @@ customElements.define('sm-input',
this.value = '';
this.input.focus();
this.fireEvent();
this.hideFeedback();
}
focusIn = () => {
@ -508,6 +509,9 @@ customElements.define('sm-input',
}
}
handleBlur = (e) => {
if (this.input.value.trim() === '') {
this.hideFeedback();
}
if (this.datalist.length) {
this.optionList.classList.add('hidden');
}
@ -595,15 +599,17 @@ customElements.define('sm-input',
fill: 'forwards'
}).onfinish = () => {
this.intersectionObserver?.disconnect();
this.feedbackPopover.remove();
this.feedbackPopover = null;
if (this.feedbackPopover) {
this.feedbackPopover.remove();
this.feedbackPopover = null;
}
window.removeEventListener('resize', this.updatePosition, { passive: true })
}
}
connectedCallback() {
if (!SmInput.hasAppendedStyles) {
// inject styles once will be utilised by all instances
document.head.insertAdjacentHTML('beforeend', `<style>
// inject styles once will be utilized by all instances
document.head.insertAdjacentHTML('beforeend', /*html*/`<style>
// styles injected by sm-input component
.success{
color: var(--success-color);

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

File diff suppressed because one or more lines are too long

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 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 }\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 }\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(val){this.setAttribute("value",val),this.fireEvent()}get disabled(){return this.hasAttribute("disabled")}set disabled(val){val?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let event=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(event)}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(name,oldValue,newValue){this.reflectedAttributes.includes(name)?this.hasAttribute(name)?this.textarea.setAttribute(name,this.getAttribute(name)?this.getAttribute(name):""):this.textContent.removeAttribute(name):"placeholder"===name?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===name&&(this.textarea.value=newValue,this.textareaBox.dataset.value=newValue,this.checkInput())}});

61
components/test.html
View File

@ -46,63 +46,14 @@
</sm-button>
</sm-copy>
</syntax-highlighter>
<sm-input></sm-input>
</body>
<script>
let currentSubscriber = null;
/**
* @param {any} initialValue - initial value for the signal
* @returns {array} - array containing getter and setter for the signal
* @example
* const [getCount, setCount] = $signal(0);
*/
function $signal(initialValue) {
let value = initialValue;
const subscribers = new Set();
function getter() {
if (currentSubscriber) {
const weakRef = new WeakRef({ func: currentSubscriber });
subscribers.add(weakRef);
}
return value;
}
function setter(newValue) {
if (newValue !== value) {
value = newValue;
for (const subscriber of subscribers) {
const ref = subscriber.deref();
if (ref) {
ref.func();
}
}
}
}
return [getter, setter];
}
/**
*
* @param {function} fn - function that will run if any of its dependent signals change
* @example
* $effect(() => {
* console.log(count());
* }
* @returns {void}
*/
async function $effect(fn) {
currentSubscriber = fn;
const result = fn();
try {
if (result instanceof Promise) {
await result;
}
} catch (e) {
console.error(e)
} finally {
currentSubscriber = null;
}
}
setInterval(() => {
const random = Math.random().toString(36).substring(7);
console.log(random);
document.querySelector('sm-input').value = random;
}, 3000);
</script>
</html>