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

feature update

Browse Source 
-- added option method to remove specific notification based on notification ID returned when pushing
-- consistent style improvements
This commit is contained in:
sairaj mote 2022-10-18 02:54:42 +05:30
parent b5c092372b
commit e47bb90750
11 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/dist/input.js vendored
View File

@ -147,8 +147,8 @@ smInput.innerHTML = `
transform: translateY(0.6rem);
}
:host([animate]) .input:focus-within .label,
.animate-placeholder .label {
:host([animate]) .input:focus-within .label,
.animate-placeholder .label {
-webkit-transform: translateY(-0.7em) scale(0.8);
-ms-transform: translateY(-0.7em) scale(0.8);
transform: translateY(-0.7em) scale(0.8);

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

File diff suppressed because one or more lines are too long

8
components/dist/notifications.js vendored
View File

@ -185,6 +185,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
this.createNotification = this.createNotification.bind(this)
this.removeNotification = this.removeNotification.bind(this)
this.clearAll = this.clearAll.bind(this)
this.remove = this.remove.bind(this)
this.handlePointerMove = this.handlePointerMove.bind(this)
@ -206,7 +207,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
randString(length) {
let result = '';
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
for (let i = 0; i < length; i++)
result += characters.charAt(Math.floor(Math.random() * characters.length));
return result;
@ -289,6 +290,11 @@ customElements.define('sm-notifications', class extends HTMLElement {
notification.remove();
};
}
remove(id) {
const notification = this.notificationPanel.querySelector(`#${id}`);
if (!notification) return;
this.removeNotification(notification);
}
clearAll() {
Array.from(this.notificationPanel.children).forEach(child => {

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

File diff suppressed because one or more lines are too long

4
components/dist/select.js vendored
View File

@ -60,8 +60,8 @@ smSelect.innerHTML = `
height: 100%;
}
.selection:focus{
-webkit-box-shadow: 0 0 0 0.1rem var(--accent-color, teal);
box-shadow: 0 0 0 0.1rem var(--accent-color, teal)
-webkit-box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset;
box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset;
}
:host([align-select="left"]) .options{
left: 0;

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

File diff suppressed because one or more lines are too long

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

@ -19,11 +19,13 @@ tagsInput.innerHTML = `
display: flex;
cursor: text;
flex-wrap: wrap;
gap: 0.3rem;
justify-items: flex-start;
align-items: center;
padding: 0.5rem 0.5rem 0 0.5rem;
padding: 0.6rem 0.8rem;
border-radius: var(--border-radius);
background: var(--background);
min-height: var(--min-height,3.2rem);
}
.tags-wrapper:focus-within{
box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important;
@ -37,7 +39,6 @@ tagsInput.innerHTML = `
display: inline-flex;
border-radius: 0.3rem;
padding: 0.3rem 0.5rem;
margin: 0 0.5rem 0.5rem 0;
background-color: rgba(var(--text-color,(17,17,17)), 0.06);
}
@ -61,13 +62,10 @@ tagsInput.innerHTML = `
max-width: inherit;
font-size: inherit;
font-family: inherit;
padding: 0.4rem 0.5rem;
margin: 0 0.5rem 0.5rem 0;
background-color: transparent;
}
.placeholder{
position: absolute;
padding: 0 0.5rem;
top: 50%;
font-weight: inherit;
transform: translateY(-50%);

2
components/dist/tags-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

@ -40,10 +40,11 @@ smTextarea.innerHTML = `
background: var(--background);
border-radius: var(--border-radius);
padding: var(--padding);
transition: opacity 0.3s, box-shadow 0.2s;
}
.textarea::after,
textarea{
padding: 0.7rem 1rem;
padding: var(--padding,0.6rem 0.8rem);
width: 100%;
min-width: 1em;
font: inherit;
@ -74,7 +75,7 @@ smTextarea.innerHTML = `
}
.placeholder{
position: absolute;
margin: 0.7rem 1rem;
margin: var(--padding,0.6rem 0.8rem);
opacity: .7;
font-weight: inherit;
font-size: inherit;

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 }\n .textarea::after,\n textarea{\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,teal) inset;\n }\n .placeholder{\n position: absolute;\n margin: 0.7rem 1rem;\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 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 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,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())}});

2
components/test.html
View File

@ -17,6 +17,7 @@
<script src="dist/button.js"></script>
<script src="dist/menu.js"></script>
<script src="dist/cube-loader.js"></script>
<script src="dist/tags-input.js"></script>
<link rel="stylesheet" href="css/main.min.css">
<style>
div {
@ -36,6 +37,7 @@
list="Afghanistan,Albania,Algeria,Andorra,Angola,Anguilla,Antigua Barbuda,Argentina,Armenia,Aruba,Australia,Austria,Azerbaijan,Bahamas,Bahrain,Bangladesh,Barbados,Belarus,Belgium,Belize,Benin,Bermuda,Bhutan,Bolivia,BosniaHerzegovina,Botswana,Brazil,British Virgin Islands,Brunei,Bulgaria,Burkina Faso,Burundi,Cambodia,Cameroon,Cape Verde,Cayman Islands,Chad,Chile,China,Colombia,Congo,Cook Islands,Costa Rica,Cote D Ivoire,Croatia,Cruise Ship,Cuba,Cyprus,Czech Republic,Denmark,Djibouti,Dominica,Dominican Republic,Ecuador,Egypt,El Salvador,Equatorial Guinea,Estonia,Ethiopia,Falkland Islands,Faroe Islands,Fiji,Finland,France,French Polynesia,French West Indies,Gabon,Gambia,Georgia,Germany,Ghana,Gibraltar,Greece,Greenland,Grenada,Guam,Guatemala,Guernsey,Guinea,Guinea Bissau,Guyana,Haiti,Honduras,Hong Kong,Hungary,Iceland,India,Indonesia,Iran,Iraq,Ireland,Isle of Man,Israel,Italy,Jamaica,Japan,Jersey,Jordan,Kazakhstan,Kenya,Kuwait,Kyrgyz Republic,Laos,Latvia,Lebanon,Lesotho,Liberia,Libya,Liechtenstein,Lithuania,Luxembourg,Macau,Macedonia,Madagascar,Malawi,Malaysia,Maldives,Mali,Malta,Mauritania,Mauritius,Mexico,Moldova,Monaco,Mongolia,Montenegro,Montserrat,Morocco,Mozambique,Namibia,Nepal,Netherlands,Netherlands Antilles,New Caledonia,New Zealand,Nicaragua,Niger,Nigeria,Norway,Oman,Pakistan,Palestine,Panama,Papua New Guinea,Paraguay,Peru,Philippines,Poland,Portugal,Puerto Rico,Qatar,Reunion,Romania,Russia,Rwanda,Saint PierreMiquelon,Samoa,San Marino,Satellite,Saudi Arabia,Senegal,Serbia,Seychelles,Sierra Leone,Singapore,Slovakia,Slovenia,South Africa,South Korea,Spain,Sri Lanka,St KittsNevis,St Lucia,St Vincent,St. Lucia,Sudan,Suriname,Swaziland,Sweden,Switzerland,Syria,Taiwan,Tajikistan,Tanzania,Thailand,Timor L'Este,Togo,Tonga,Trinidad Tobago,Tunisia,Turkey,Turkmenistan,Turks Caicos,Uganda,Ukraine,United Arab Emirates,United Kingdom,Uruguay,Uzbekistan,Venezuela,Vietnam,Virgin Islands (US),Yemen,Zambia,Zimbabwe">
</sm-input>
</div>
<tags-input placeholder="gwdswererg"></tags-input>
<br>
<br>
<br>