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 2023-11-30 02:23:18 +05:30
parent 279f6080c0
commit cc254e21df
6 changed files with 35 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/dist/chips.js vendored
View File

@ -202,7 +202,6 @@ customElements.define('sm-chips', class extends HTMLElement {
}
connectedCallback() {
this.setAttribute('role', 'listbox');
const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', e => {
firstOptionObserver.disconnect();
@ -212,11 +211,6 @@ customElements.define('sm-chips', class extends HTMLElement {
clearTimeout(this.slotChangeTimeout);
this.slotChangeTimeout = setTimeout(() => {
this.assignedElements = slot.assignedElements();
this.assignedElements.forEach(elem => {
if (elem.hasAttribute('selected')) {
this._value = elem.value;
}
});
this.observeSelf.observe(this);
}, 0);
});
@ -339,6 +333,9 @@ customElements.define('sm-chip', class extends HTMLElement {
this.fireEvent = this.fireEvent.bind(this);
this.handleKeyDown = this.handleKeyDown.bind(this);
}
static get observedAttributes() {
return ['selected'];
}
get value() {
return this._value;
}
@ -365,6 +362,16 @@ customElements.define('sm-chip', class extends HTMLElement {
this.addEventListener('click', this.fireEvent);
this.addEventListener('keydown', this.handleKeyDown);
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'selected') {
if (newValue !== null) {
this.fireEvent();
this.setAttribute('aria-selected', 'true');
} else {
this.removeAttribute('aria-selected');
}
}
}
disconnectedCallback() {
this.removeEventListener('click', this.fireEvent);
this.removeEventListener('keydown', this.handleKeyDown);

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

File diff suppressed because one or more lines are too long

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-box;\n display: flex;\n --padding: 0;\n --button-background-color: rgba(var(--text-color, (17,17,17)), 0.2);\n}\n.copy{\n display: grid;\n gap: 0.5rem;\n padding: var(--padding);\n align-items: center;\n grid-template-columns: minmax(0, 1fr) auto;\n}\n:host(:not([clip-text])) .copy-content{\n overflow-wrap: break-word;\n word-wrap: break-word;\n}\n:host([clip-text]) .copy-content{\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\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: rgba(var(--text-color, (17,17,17)), 0.06);\n border-radius: var(--button-border-radius, 0.3rem);\n transition: background-color 0.2s;\n font-family: inherit;\n color: inherit;\n font-size: 0.7rem;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.05rem;\n}\n.copy-button:active{\n background-color: var(--button-background-color);\n}\n@media (any-hover: hover){\n .copy:hover .copy-button{\n opacity: 1;\n }\n .copy-button:hover{\n background-color: var(--button-background-color);\n }\n}\n</style>\n<section class="copy">\n <p class="copy-content">\n <slot></slot>\n </p>\n <button part="button" class="copy-button" title="copy">\n <slot name="copy-icon">\n COPY\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(t){this.setAttribute("value",t)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.getAttribute("value")).then(t=>this.fireEvent()).catch(t=>console.error(t))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(t,n,o){if("value"===t){const t=this.copyContent.querySelector("slot");if(!t)return;const n=t.assignedNodes();n&&n.length||(t.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-box;\n display: flex;\n --padding: 0;\n --button-background-color: rgba(var(--text-color, (17,17,17)), 0.2);\n}\n.copy{\n display: grid;\n gap: 0.5rem;\n padding: var(--padding);\n align-items: center;\n grid-template-columns: minmax(0, 1fr) auto;\n}\n:host(:not([clip-text])) .copy-content{\n overflow-wrap: break-word;\n word-wrap: break-word;\n}\n:host([clip-text]) .copy-content{\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\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: rgba(var(--text-color, (17,17,17)), 0.06);\n border-radius: var(--button-border-radius, 0.3rem);\n transition: background-color 0.2s;\n font-family: inherit;\n color: inherit;\n font-size: 0.7rem;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.05rem;\n}\n.copy-button:active{\n background-color: var(--button-background-color);\n}\n@media (any-hover: hover){\n .copy:hover .copy-button{\n opacity: 1;\n }\n .copy-button:hover{\n background-color: var(--button-background-color);\n }\n}\n</style>\n<section class="copy">\n <p class="copy-content">\n <slot></slot>\n </p>\n <button part="button" class="copy-button" title="copy">\n <slot name="copy-icon">\n COPY\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(val){this.setAttribute("value",val)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.getAttribute("value")).then((res=>this.fireEvent())).catch((err=>console.error(err)))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(name,oldValue,newValue){if("value"===name){const slot=this.copyContent.querySelector("slot");if(!slot)return;const assignedNodes=slot.assignedNodes();assignedNodes&&assignedNodes.length||(slot.textContent=newValue)}}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}});

15
components/test.html
View File

@ -6,6 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="dist/copy.js"></script>
<script src="dist/select.js"></script>
<script src="dist/form.js"></script>
<script src="dist/popup.js"></script>
@ -36,21 +37,9 @@
</head>
<body>
<sm-form>
<sm-input placeholder="fafh" value="" animate required>
<sm-button slot="right" type="submit">Submit</sm-button>
</sm-input>
<sm-input placeholder="fafh" value="" animate required>
<sm-button slot="right" type="submit">Submit</sm-button>
</sm-input>
<sm-input placeholder="fafh" value="" animate required>
<sm-button slot="right" type="submit">Submit</sm-button>
</sm-input>
<button type="submit">Submit</button>
</sm-form>
<sm-copy value="hi dhf jsbdjf sjdb"></sm-copy>
</body>
<script>
document.querySelector('sm-input').isValid
let currentSubscriber = null;
/**
* @param {any} initialValue - initial value for the signal

22
main_UI.js
View File

@ -140,8 +140,7 @@ function openPopup(popupId, pinned) {
}
zIndex++
getRef(popupId).setAttribute('style', `z-index: ${zIndex}`)
getRef(popupId).show({ pinned })
return getRef(popupId);
return getRef(popupId).show({ pinned })
}
// hides the popup or modal
@ -783,14 +782,17 @@ function showChildElement(id, index, options = {}) {
}
function buttonLoader(id, show) {
const button = typeof id === 'string' ? document.getElementById(id) : id;
button.disabled = show;
if (!button) return
if (!button.dataset.hasOwnProperty('wasDisabled'))
button.dataset.wasDisabled = button.disabled
const animOptions = {
duration: 200,
fill: 'forwards',
easing: 'ease'
}
if (show) {
button.parentNode.append(createElement('sm-spinner'))
button.disabled = true
button.parentNode.append(document.createElement('sm-spinner'))
button.animate([
{
clipPath: 'circle(100%)',
@ -800,7 +802,17 @@ function buttonLoader(id, show) {
},
], animOptions)
} else {
button.getAnimations().forEach(anim => anim.cancel())
button.disabled = button.dataset.wasDisabled === 'true';
button.animate([
{
clipPath: 'circle(0)',
},
{
clipPath: 'circle(100%)',
},
], animOptions).onfinish = (e) => {
button.removeAttribute('data-original-state')
}
const potentialTarget = button.parentNode.querySelector('sm-spinner')
if (potentialTarget) potentialTarget.remove();
}

2
main_UI.min.js vendored
View File

File diff suppressed because one or more lines are too long