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

Added documentation for 3 components

Browse Source
This commit is contained in:
sairaj mote 2021-07-14 22:51:44 +05:30
parent 058f363cd8
commit 9ddb825bd4
42 changed files with 744 additions and 310 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
components/css/main.css
View File

@ -17,21 +17,71 @@ html, body {
body {
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--background-color: 255, 255, 255;
--danger-color: red;
color: rgba(var(--text-color), 1);
background: var(--background-color);
background: rgba(var(--background-color), 1);
/* string - green */
/* keyword - dark pink */
/* comment - gray */
/* type - light blue */
/* literal */
/* html/xml tag */
/* html/xml attribute name */
/* html/xml attribute value*/
/* decimal - blue */
}
body pre .str, body code .str {
color: #65B042;
}
body pre .kwd, body code .kwd {
color: #E28964;
}
body pre .com, body code .com {
color: #AEAEAE;
font-style: italic;
}
body pre .typ, body code .typ {
color: #4395ff;
}
body pre .lit, body code .lit {
color: #1a76c2;
}
body pre .tag, body code .tag {
color: #1976D2;
}
body pre .atn, body code .atn {
color: #00C853;
}
body pre .atv, body code .atv {
color: #F57F17;
}
body pre .dec, body code .dec {
color: #3387CC;
}
body[data-theme=dark] {
/* html/xml tag */
/* html/xml attribute name */
/* html/xml attribute value*/
}
body[data-theme=dark],
body[data-theme=dark] * {
--accent-color: #976dd6;
--text-color: 240, 240, 240;
--text-color-light: 170, 170, 170;
--foreground-color: 20, 20, 20;
--background-color: #0a0a0a;
--background-color: 20, 20, 20;
--danger-color: rgb(255, 106, 106);
}
body[data-theme=dark] pre .tag, body[data-theme=dark] code .tag {
color: #29B6F6;
}
body[data-theme=dark] pre .atn, body[data-theme=dark] code .atn {
color: #1DE9B6;
}
body[data-theme=dark] pre .atv, body[data-theme=dark] code .atv {
color: #84FFFF;
}
p {
font-size: 0.8;
@ -74,6 +124,23 @@ ul {
list-style: none;
}
table {
position: relative;
text-align: left;
border-radius: 0.5rem;
border-collapse: separate;
border-spacing: 1rem 1.5rem;
background-color: rgba(var(--text-color), 0.04);
margin: 1rem 0;
}
table p:only-of-type {
margin-bottom: 0;
}
table td {
line-height: 1.7;
max-width: 65ch;
}
.flex {
display: flex;
}
@ -312,32 +379,6 @@ ul {
transform: scale(0) rotate(-90deg);
}
pre .str, code .str {
color: #65B042;
}
/* string - green */
pre .kwd, code .kwd {
color: #E28964;
}
/* keyword - dark pink */
pre .com, code .com {
color: #AEAEAE;
font-style: italic;
}
/* comment - gray */
pre .typ, code .typ {
color: #4395ff;
}
/* type - light blue */
pre .lit, code .lit {
color: #1a76c2;
}
/* literal */
pre .pun, code .pun {
color: rgba(var(--text-color), 0.8);
}
@ -348,35 +389,17 @@ pre .pln, code .pln {
}
/* plaintext */
pre .tag, code .tag {
color: #22863a;
}
/* html/xml tag */
pre .atn, code .atn {
color: #005cc5;
}
/* html/xml attribute name */
pre .atv, code .atv {
color: var(--accent-color);
}
/* html/xml attribute value*/
pre .dec, code .dec {
color: #3387CC;
}
/* decimal - blue */
pre {
max-width: 100%;
margin: 1rem 0;
padding: 0 1.5rem;
overflow-x: auto;
font-size: 0.9rem;
font-weight: 500;
white-space: pre-line;
border-radius: 0.5rem;
background: rgba(var(--text-color), 0.04);
line-height: 1.7;
}
code {
@ -434,13 +457,14 @@ main {
background-color: rgba(0, 0, 0, 0.5);
}
#side_nav,
.right {
max-height: 100%;
overflow-y: auto;
padding-bottom: 3rem;
}
#side_nav > :last-child {
padding-bottom: 3rem;
}
#side_nav h4 {
font-size: 0.9rem;
letter-spacing: 0.08em;
@ -511,6 +535,10 @@ ol li::first-letter {
text-transform: capitalize;
}
strong {
max-width: 65ch;
}
strong.important {
display: flex;
padding: 0.5rem;
@ -520,6 +548,15 @@ strong.important {
background-color: khaki;
}
.highlight {
display: inline-flex;
font-family: "Roboto Mono", monospace;
background-color: rgba(var(--text-color), 0.1);
border-radius: 0.3rem;
padding: 0 0.5rem;
font-size: 0.9rem;
}
#total_components_count {
font-size: 4rem;
}
@ -540,25 +577,6 @@ strong.important {
grid-template-rows: auto 1fr;
grid-template-columns: 1fr;
}
#side_nav {
display: flex;
flex-direction: column;
position: fixed;
z-index: 5;
height: 100%;
width: calc(100% - 4rem);
transition: transform 0.3s;
background-color: rgba(var(--foreground-color), 1);
box-shadow: 0.5rem 0 2rem rgba(0, 0, 0, 0.1);
}
#side_nav:not(.reveal) {
transform: translateX(-100%);
}
.reveal {
transform: none;
}
}
@media screen and (min-width: 640px) {
#main_header {
@ -584,7 +602,7 @@ strong.important {
}
.page__title {
font-size: 2rem;
font-size: 2.5rem;
}
#overview_page {

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

File diff suppressed because one or more lines are too long

96
components/css/main.scss
View File

@ -14,19 +14,34 @@ html, body{
body {
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--background-color: 255, 255, 255;
--danger-color: red;
color: rgba(var(--text-color), 1);
background: var(--background-color);
background: rgba(var(--background-color), 1);
pre .str, code .str { color: #65B042; } /* string - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #4395ff; } /* type - light blue */
pre .lit, code .lit { color: #1a76c2; } /* literal */
pre .tag, code .tag { color: #1976D2; } /* html/xml tag */
pre .atn, code .atn { color: #00C853; } /* html/xml attribute name */
pre .atv, code .atv { color: #F57F17 } /* html/xml attribute value*/
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
}
body[data-theme='dark']{
--accent-color: #976dd6;
--text-color: 240, 240, 240;
--text-color-light: 170, 170, 170;
--foreground-color: 20, 20, 20;
--background-color: #0a0a0a;
--danger-color: rgb(255, 106, 106);
&,
*{
--accent-color: #976dd6;
--text-color: 240, 240, 240;
--text-color-light: 170, 170, 170;
--background-color: 20, 20, 20;
--danger-color: rgb(255, 106, 106);
}
pre .tag, code .tag { color: #29B6F6; } /* html/xml tag */
pre .atn, code .atn { color: #1DE9B6; } /* html/xml attribute name */
pre .atv, code .atv { color: #84FFFF; } /* html/xml attribute value*/
}
p {
font-size: 0.8;
@ -65,6 +80,22 @@ sm-button{
ul{
list-style: none;
}
table{
position: relative;
text-align: left;
border-radius: 0.5rem;
border-collapse: separate;
border-spacing: 1rem 1.5rem;
background-color: rgba(var(--text-color), .04);
margin: 1rem 0;
p:only-of-type{
margin-bottom: 0;
}
td{
line-height: 1.7;
max-width: 65ch;
}
}
.flex{
display: flex;
}
@ -260,18 +291,8 @@ ul{
//Syntax highlighting
pre .str, code .str { color: #65B042; } /* string - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #4395ff; } /* type - light blue */
pre .lit, code .lit { color: #1a76c2; } /* literal */
pre .pun, code .pun { color: rgba(var(--text-color), 0.8); } /* punctuation */
pre .pln, code .pln { color: rgba(var(--text-color), 0.8); } /* plaintext */
pre .tag, code .tag { color: #22863a; } /* html/xml tag */
pre .atn, code .atn { color: #005cc5; } /* html/xml attribute name */
pre .atv, code .atv { color: var(--accent-color); } /* html/xml attribute value*/
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
pre{
max-width: 100%;
@ -279,9 +300,11 @@ pre{
padding: 0 1.5rem;
overflow-x: auto;
font-size: 0.9rem;
font-weight: 500;
white-space: pre-line;
border-radius: 0.5rem;
background: rgba(var(--text-color), .04);
line-height: 1.7;
}
code{
border-radius: 0.3rem;
@ -331,13 +354,14 @@ main{
bottom: 0;
background-color: rgba(0,0,0, 0.5);
}
#side_nav,
.right{
max-height: 100%;
overflow-y: auto;
padding-bottom: 3rem;
}
#side_nav{
& > :last-child{
padding-bottom: 3rem;
}
h4{
font-size: 0.9rem;
letter-spacing: 0.08em;
@ -400,6 +424,9 @@ ol{
}
}
}
strong{
max-width: 65ch;
}
strong.important{
display: flex;
padding: 0.5rem;
@ -408,6 +435,14 @@ strong.important{
color: rgba(0,0,0, 0.8);
background-color: khaki;
}
.highlight{
display: inline-flex;
font-family: 'Roboto Mono', monospace;
background-color: rgba(var(--text-color), .1);
border-radius: 0.3rem;
padding: 0 0.5rem;
font-size: 0.9rem;
}
#total_components_count{
font-size: 4rem;
}
@ -425,23 +460,6 @@ strong.important{
grid-template-rows: auto 1fr;
grid-template-columns: 1fr;
}
#side_nav{
display: flex;
flex-direction: column;
position: fixed;
z-index: 5;
height: 100%;
width: calc(100% - 4rem);
transition: transform 0.3s;
background-color: rgba(var(--foreground-color), 1);
box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1);
&:not(.reveal){
transform: translateX(-100%);
}
}
.reveal{
transform: none;
}
}
@media screen and (min-width: 640px){
#main_header{
@ -463,7 +481,7 @@ strong.important{
}
}
.page__title{
font-size: 2rem;
font-size: 2.5rem;
}
#overview_page{
display: grid;

86
components/dist/button.js vendored
View File

@ -11,27 +11,17 @@ smButton.innerHTML = `
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
width: auto;
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--danger-color: red;
--background-color: 255, 255, 255;
--padding: 0.6rem 1.2rem;
--border-radius: 0.3rem;
--background: rgba(var(--text-color), 0.1);
}
:host([disabled]) .button{
cursor: not-allowed;
opacity: 0.6;
background: rgba(var(--text-color), 0.3) !important;
color: rgba(var(--foreground-color), 0.6);
}
:host([disabled][variant="primary"]) .button{
color: rgba(var(--text-color), 1);
}
:host([variant='primary']) .button{
background: var(--accent-color);
color: rgba(var(--foreground-color), 1);
color: rgba(var(--background-color), 1);
}
:host([variant='outlined']) .button{
-webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
@ -40,15 +30,9 @@ smButton.innerHTML = `
color: var(--accent-color);
}
:host([variant='no-outline']) .button{
background: rgba(var(--foreground-color), 1);
background: rgba(var(--background-color), 1);
color: var(--accent-color);
}
:host(.small) .button{
padding: 0.4rem 0.8rem;
}
:host(.round) .button{
border-radius: 10rem;
}
.button {
position: relative;
display: -webkit-box;
@ -77,13 +61,11 @@ smButton.innerHTML = `
color: inherit;
align-items: center;
}
:host(:not([disabled])) .button:focus-visible{
-webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
box-shadow: 0 0 0 0.1rem var(--accent-color);
}
:host([variant='outlined']) .button:focus-visible{
-webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color);
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color);
:host([disabled]) .button{
cursor: not-allowed;
opacity: 0.6;
color: rgba(var(--text-color), 1);
background-color: rgba(var(--text-color), 0.3);
}
@media (hover: hover){
:host(:not([disabled])) .button:hover{
@ -106,9 +88,9 @@ smButton.innerHTML = `
}
}
</style>
<button part="button" class="button">
<div part="button" class="button">
<slot></slot>
</button>`;
</div>`;
customElements.define('sm-button',
class extends HTMLElement {
constructor() {
@ -117,42 +99,36 @@ customElements.define('sm-button',
mode: 'open'
}).append(smButton.content.cloneNode(true))
}
static get observedAttributes() {
return ['disabled'];
}
get disabled() {
return this.isDisabled
return this.hasAttribute('disabled')
}
set disabled(value) {
if (value && !this.isDisabled) {
this.isDisabled = true
if (value) {
this.setAttribute('disabled', '')
this.button.removeAttribute('tabindex')
} else if (!value && this.isDisabled) {
this.isDisabled = false
}else {
this.removeAttribute('disabled')
}
}
dispatch() {
if (this.isDisabled) {
this.dispatchEvent(new CustomEvent('disabled', {
bubbles: true,
composed: true
}))
} else {
this.dispatchEvent(new CustomEvent('clicked', {
bubbles: true,
composed: true
}))
}
}
connectedCallback() {
this.isDisabled = false
this.button = this.shadowRoot.querySelector('.button')
if (this.hasAttribute('disabled') && !this.isDisabled)
this.isDisabled = true
this.addEventListener('click', (e) => {
this.dispatch()
})
if (!this.hasAttribute('disabled')) {
this.setAttribute('tabindex', '0')
}
this.setAttribute('role', 'button')
}
attributeChangedCallback(name, oldVal, newVal) {
if (name === 'disabled') {
this.removeAttribute('tabindex')
this.setAttribute('aria-disabled', 'true')
}
else {
this.setAttribute('tabindex', '0')
this.setAttribute('aria-disabled', 'false')
}
}
})

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

@ -1 +1 @@
const smButton=document.createElement("template");smButton.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 --foreground-color: 255, 255, 255;\n --background-color: #F6f6f6;\n --danger-color: red;\n --padding: 0.6rem 1.2rem;\n --border-radius: 0.3rem;\n --background: rgba(var(--text-color), 0.1);\n}\n:host([disabled]) .button{\n cursor: not-allowed;\n opacity: 0.6;\n background: rgba(var(--text-color), 0.3) !important;\n color: rgba(var(--foreground-color), 0.6);\n}\n:host([disabled][variant=\"primary\"]) .button{\n color: rgba(var(--text-color), 1);\n}\n:host([variant='primary']) .button{\n background: var(--accent-color);\n color: rgba(var(--foreground-color), 1);\n}\n:host([variant='outlined']) .button{\n -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n background: transparent; \n color: var(--accent-color);\n}\n:host([variant='no-outline']) .button{\n background: rgba(var(--foreground-color), 1); \n color: var(--accent-color);\n}\n:host(.small) .button{\n padding: 0.4rem 0.8rem;\n}\n:host(.round) .button{\n border-radius: 10rem;\n}\n.button {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n padding: var(--padding);\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n border-radius: var(--border-radius); \n -webkit-box-pack: center; \n -ms-flex-pack: center; \n justify-content: center;\n transition: box-shadow 0.3s, background-color 0.3s;\n font-family: inherit;\n font-size: 0.9rem;\n font-weight: 500;\n background-color: var(--background); \n -webkit-tap-highlight-color: transparent;\n outline: none;\n overflow: hidden;\n border: none;\n color: inherit;\n align-items: center;\n}\n:host(:not([disabled])) .button:focus-visible{\n -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);\n box-shadow: 0 0 0 0.1rem var(--accent-color);\n}\n:host([variant='outlined']) .button:focus-visible{\n -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color);\n box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color);\n}\n@media (hover: hover){\n :host(:not([disabled])) .button:hover{\n -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n }\n :host([variant='outlined']) .button:hover{\n -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);\n box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);\n }\n}\n@media (hover: none){\n :host(:not([disabled])) .button:active{\n -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n }\n :host([variant='outlined']) .button:active{\n -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);\n box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);\n }\n}\n</style>\n<button part=\"button\" class=\"button\">\n <slot></slot> \n</button>",customElements.define("sm-button",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smButton.content.cloneNode(!0))}get disabled(){return this.isDisabled}set disabled(n){n&&!this.isDisabled?(this.isDisabled=!0,this.setAttribute("disabled",""),this.button.removeAttribute("tabindex")):!n&&this.isDisabled&&(this.isDisabled=!1,this.removeAttribute("disabled"))}dispatch(){this.isDisabled?this.dispatchEvent(new CustomEvent("disabled",{bubbles:!0,composed:!0})):this.dispatchEvent(new CustomEvent("clicked",{bubbles:!0,composed:!0}))}connectedCallback(){this.isDisabled=!1,this.button=this.shadowRoot.querySelector(".button"),this.hasAttribute("disabled")&&!this.isDisabled&&(this.isDisabled=!0),this.addEventListener("click",n=>{this.dispatch()})}});
const smButton=document.createElement("template");smButton.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 width: auto;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --padding: 0.6rem 1.2rem;\n --border-radius: 0.3rem;\n --background: rgba(var(--text-color), 0.1);\n}\n:host([variant='primary']) .button{\n background: var(--accent-color);\n color: rgba(var(--background-color), 1);\n}\n:host([variant='outlined']) .button{\n -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n background: transparent; \n color: var(--accent-color);\n}\n:host([variant='no-outline']) .button{\n background: rgba(var(--background-color), 1); \n color: var(--accent-color);\n}\n.button {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n padding: var(--padding);\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n border-radius: var(--border-radius); \n -webkit-box-pack: center; \n -ms-flex-pack: center; \n justify-content: center;\n transition: box-shadow 0.3s, background-color 0.3s;\n font-family: inherit;\n font-size: 0.9rem;\n font-weight: 500;\n background-color: var(--background); \n -webkit-tap-highlight-color: transparent;\n outline: none;\n overflow: hidden;\n border: none;\n color: inherit;\n align-items: center;\n}\n:host([disabled]) .button{\n cursor: not-allowed;\n opacity: 0.6;\n color: rgba(var(--text-color), 1);\n background-color: rgba(var(--text-color), 0.3);\n}\n@media (hover: hover){\n :host(:not([disabled])) .button:hover{\n -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n }\n :host([variant='outlined']) .button:hover{\n -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);\n box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);\n }\n}\n@media (hover: none){\n :host(:not([disabled])) .button:active{\n -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n }\n :host([variant='outlined']) .button:active{\n -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);\n box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);\n }\n}\n</style>\n<div part=\"button\" class=\"button\">\n <slot></slot> \n</div>",customElements.define("sm-button",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smButton.content.cloneNode(!0))}static get observedAttributes(){return["disabled"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button")}attributeChangedCallback(t,n,e){"disabled"===t?(this.removeAttribute("tabindex"),this.setAttribute("aria-disabled","true")):(this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled","false"))}});

18
components/dist/carousel.js vendored
View File

@ -13,16 +13,14 @@ smCarousel.innerHTML = `
display: flex;
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--danger-color: red;
--background-color: 255, 255, 255;
--arrow-left: 1rem;
--arrow-right: 1rem;
--arrow-top: auto;
--arrow-bottom: auto;
--arrow-fill: rgba(var(--foreground-color), 1);
--arrow-background: rgba(var(--text-color), 1);
--arrow-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;
--nav-icon-fill: rgba(var(--background-color), 1);
--nav-background-color: rgba(var(--text-color), 1);
--nav-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;
--indicator-top: auto;
--indicator-bottom: -1rem;
--active-indicator-color: var(--accent-color);
@ -37,9 +35,9 @@ smCarousel.innerHTML = `
top: var(--arrow-top);
bottom: var(--arrow-bottom);
border: none;
background: var(--arrow-background);
-webkit-box-shadow: var(--arrow-box-shadow);
box-shadow: var(--arrow-box-shadow);
background: var(--nav-background-color);
-webkit-box-shadow: var(--nav-box-shadow);
box-shadow: var(--nav-box-shadow);
-webkit-tap-highlight-color: transparent;
transition: transform 0.3s;
z-index: 1;
@ -64,7 +62,7 @@ button:focus-visible{
.icon {
height: 1.5rem;
width: 1.5rem;
fill: var(--arrow-fill);
fill: var(--nav-icon-fill);
}
.hide{
display: none !important;

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

File diff suppressed because one or more lines are too long

6
components/dist/checkbox.js vendored
View File

@ -13,9 +13,7 @@ smCheckbox.innerHTML = `
display: inline-flex;
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--danger-color: red;
--background-color: 255, 255, 255;
--height: 1.2rem;
--width: 1.2rem;
--border-radius: 0.2rem;
@ -61,7 +59,7 @@ smCheckbox.innerHTML = `
:host([checked]) .checkmark {
stroke-dashoffset: 0;
stroke: rgba(var(--foreground-color), 1);
stroke: rgba(var(--background-color), 1);
}
:host([checked]) .icon {
stroke-width: 8;

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

@ -1 +1 @@
const smCheckbox=document.createElement("template");smCheckbox.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 --foreground-color: 255, 255, 255;\n --background-color: #F6f6f6;\n --danger-color: red;\n --height: 1.2rem;\n --width: 1.2rem;\n --border-radius: 0.2rem;\n --border-color: rgba(var(--text-color), 0.7);\n }\n :host([disabled]) {\n opacity: 0.6;\n user-select: none;\n pointer-events: none;\n }\n .checkbox {\n position: relative;\n display:-webkit-box;\n display:-ms-flexbox;\n display:flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n cursor: pointer;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n \n .checkbox:focus-visible{\n outline: auto;\n }\n .checkbox:active .icon,\n .checkbox:focus-within .icon{\n box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n }\n \n input {\n display: none;\n }\n \n .checkmark {\n stroke-dashoffset: -65;\n stroke-dasharray: 65;\n -webkit-transition: stroke-dashoffset 0.3s; \n -o-transition: stroke-dashoffset 0.3s; \n transition: stroke-dashoffset 0.3s;\n }\n \n :host([checked]) .checkmark {\n stroke-dashoffset: 0;\n stroke: rgba(var(--foreground-color), 1);\n }\n :host([checked]) .icon {\n stroke-width: 8; \n stroke: var(--accent-color);\n background: var(--accent-color);\n }\n :host(:not([checked])) .icon {\n box-shadow: 0 0 0 0.1rem var(--border-color) inset;\n }\n \n .icon {\n fill: none;\n height: var(--height);\n width: var(--width);\n padding: 0.1rem;\n stroke: rgba(var(--text-color), 0.7);\n stroke-width: 6;\n overflow: visible;\n stroke-linecap: round;\n stroke-linejoin: round;\n -webkit-transition: background 0.3s;\n -o-transition: background 0.3s;\n transition: background 0.3s;\n border-radius: var(--border-radius);\n }\n</style>\n<label class="checkbox">\n <svg class="icon" viewBox="0 0 64 64">\n <title>checkbox</title>\n <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />\n </svg>\n <slot></slot>\n</label>',customElements.define("sm-checkbox",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCheckbox.content.cloneNode(!0)),this.checkbox=this.shadowRoot.querySelector(".checkbox"),this.reset=this.reset.bind(this),this.dispatch=this.dispatch.bind(this),this.handleKeyup=this.handleKeyup.bind(this),this.handleClick=this.handleClick.bind(this)}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(e){this.setAttribute("value",e)}get value(){return this.getAttribute("value")}reset(){this.removeAttribute("checked")}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}handleKeyup(e){"Space"===e.code&&this.click()}handleClick(e){this.toggleAttribute("checked")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","checkbox"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keyup",this.handleKeyup),this.addEventListener("click",this.handleClick)}attributeChangedCallback(e,t,n){t!==n&&("checked"===e?(this.setAttribute("aria-checked",this.hasAttribute("checked")),this.dispatch()):"disabled"===e&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keyup",this.handleKeyup),this.removeEventListener("change",this.handleClick)}});
const smCheckbox=document.createElement("template");smCheckbox.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 --height: 1.2rem;\n --width: 1.2rem;\n --border-radius: 0.2rem;\n --border-color: rgba(var(--text-color), 0.7);\n }\n :host([disabled]) {\n opacity: 0.6;\n user-select: none;\n pointer-events: none;\n }\n .checkbox {\n position: relative;\n display:-webkit-box;\n display:-ms-flexbox;\n display:flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n cursor: pointer;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n \n .checkbox:focus-visible{\n outline: auto;\n }\n .checkbox:active .icon,\n .checkbox:focus-within .icon{\n box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n }\n \n input {\n display: none;\n }\n \n .checkmark {\n stroke-dashoffset: -65;\n stroke-dasharray: 65;\n -webkit-transition: stroke-dashoffset 0.3s; \n -o-transition: stroke-dashoffset 0.3s; \n transition: stroke-dashoffset 0.3s;\n }\n \n :host([checked]) .checkmark {\n stroke-dashoffset: 0;\n stroke: rgba(var(--background-color), 1);\n }\n :host([checked]) .icon {\n stroke-width: 8; \n stroke: var(--accent-color);\n background: var(--accent-color);\n }\n :host(:not([checked])) .icon {\n box-shadow: 0 0 0 0.1rem var(--border-color) inset;\n }\n \n .icon {\n fill: none;\n height: var(--height);\n width: var(--width);\n padding: 0.1rem;\n stroke: rgba(var(--text-color), 0.7);\n stroke-width: 6;\n overflow: visible;\n stroke-linecap: round;\n stroke-linejoin: round;\n -webkit-transition: background 0.3s;\n -o-transition: background 0.3s;\n transition: background 0.3s;\n border-radius: var(--border-radius);\n }\n</style>\n<label class="checkbox">\n <svg class="icon" viewBox="0 0 64 64">\n <title>checkbox</title>\n <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />\n </svg>\n <slot></slot>\n</label>',customElements.define("sm-checkbox",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCheckbox.content.cloneNode(!0)),this.checkbox=this.shadowRoot.querySelector(".checkbox"),this.reset=this.reset.bind(this),this.dispatch=this.dispatch.bind(this),this.handleKeyup=this.handleKeyup.bind(this),this.handleClick=this.handleClick.bind(this)}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(e){this.setAttribute("value",e)}get value(){return this.getAttribute("value")}reset(){this.removeAttribute("checked")}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}handleKeyup(e){"Space"===e.code&&this.click()}handleClick(e){this.toggleAttribute("checked")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","checkbox"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keyup",this.handleKeyup),this.addEventListener("click",this.handleClick)}attributeChangedCallback(e,t,n){t!==n&&("checked"===e?(this.setAttribute("aria-checked",this.hasAttribute("checked")),this.dispatch()):"disabled"===e&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keyup",this.handleKeyup),this.removeEventListener("change",this.handleClick)}});

4
components/dist/copy.js vendored
View File

@ -13,9 +13,7 @@ smCopy.innerHTML = `
display: inline-flex;
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--danger-color: red;
--background-color: 255, 255, 255;
--padding: 0;
--background-color: inherit;
--button-background-color: rgba(var(--text-color), 0.2);

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 --foreground-color: 255, 255, 255;\n --background-color: #F6f6f6;\n --danger-color: red;\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 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)}});

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

@ -9,11 +9,9 @@ fileInput.innerHTML = `
:host{
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--danger-color: red;
--background-color: 255, 255, 255;
--border-radius: 0.3rem;
--button-color: var(--background-color);
--button-color: rgba(var(--background-color), 1);
--button-font-weight: 500;
--button-background-color: var(--accent-color);
}

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

@ -1 +1 @@
const fileInput=document.createElement("template");fileInput.innerHTML='\n \t<style>\n\t\t*{\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t:host{\n\t\t\t--accent-color: #4d2588;\n\t\t\t--text-color: 17, 17, 17;\n\t\t\t--foreground-color: 255, 255, 255;\n\t\t\t--background-color: #F6f6f6;\n\t\t\t--danger-color: red;\n\t\t\t--border-radius: 0.3rem;\n\t\t\t--button-color: var(--background-color);\n\t\t\t--button-font-weight: 500;\n\t\t\t--button-background-color: var(--accent-color);\n\t\t}\n\t\t.file-input {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t\n\t\t.file-picker-button {\n display: flex;\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n align-items: center;\n\t\t\tpadding: 0.5rem 0.8rem;\n\t\t\tcolor: var(--button-color);\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tfont-weight: var(--button-font-weigh);\n\t\t\tbackground-color: var(--button-background-color);\n\t\t}\n\t\t.files-preview-wrapper{\n\t\t\tdisplay: grid;\n\t\t\tgap: 0.5rem;\n\t\t\tlist-style: none;\n\t\t}\n\t\t.files-preview-wrapper:not(:empty){\n margin-bottom: 1rem;\n\t\t}\n\t\t.file-preview{\n\t\t\tdisplay: grid;\n gap: 0.5rem;\n align-items: center;\n\t\t\tpadding: 0.5rem 0.8rem;\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tbackground-color: rgba(var(--text-color), 0.06)\n\t\t}\n\t\t.file-name{\n\t\t}\n .file-size{\n font-size: 0.8rem;\n font-weight: 400;\n color: rgba(var(--text-color), 0.8);\n }\n\t\tinput[type=file] {\n\t\t\tdisplay: none;\n\t\t}\n \t</style>\n\t<ul class="files-preview-wrapper"></ul>\n \t<label tabindex="0" class="file-input">\n\t\t<div class="file-picker-button"><slot>Choose file</slot></div>\n\t\t<input type="file">\n\t</label>\n',customElements.define("file-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(fileInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.fileInput=this.shadowRoot.querySelector(".file-input"),this.filesPreviewWraper=this.shadowRoot.querySelector(".files-preview-wrapper"),this.reflectedAttributes=["accept","multiple","capture"],this.reset=this.reset.bind(this),this.formatBytes=this.formatBytes.bind(this),this.createFilePreview=this.createFilePreview.bind(this),this.handleChange=this.handleChange.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}static get observedAttributes(){return["accept","multiple","capture"]}get files(){return this.input.files}set accept(t){this.setAttribute("accept",t)}set multiple(t){t?this.setAttribute("mutiple",""):this.removeAttribute("mutiple")}set capture(t){this.setAttribute("capture",t)}set value(t){this.input.value=t}get isValid(){return""!==this.input.value}reset(){this.input.value="",this.filesPreviewWraper.innerHTML=""}formatBytes(t,e=2){if(0===t)return"0 Bytes";const n=0>e?0:e,i=Math.floor(Math.log(t)/Math.log(1024));return parseFloat((t/Math.pow(1024,i)).toFixed(n))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}createFilePreview(t){const e=document.createElement("li"),{name:n,size:i}=t;return e.className="file-preview",e.innerHTML=`\n\t\t\t<div class="file-name">${n}</div>\n <h5 class="file-size">${this.formatBytes(i)}</h5>\n\t\t`,e}handleChange(t){this.filesPreviewWraper.innerHTML="";const e=document.createDocumentFragment();Array.from(t.target.files).forEach(t=>{e.append(this.createFilePreview(t))}),this.filesPreviewWraper.append(e)}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.code||(t.preventDefault(),this.input.click())}connectedCallback(){this.setAttribute("role","button"),this.setAttribute("aria-label","File upload"),this.input.addEventListener("change",this.handleChange),this.fileInput.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t))}disconnectedCallback(){this.input.removeEventListener("change",this.handleChange),this.fileInput.removeEventListener("keydown",this.handleKeyDown)}});
const fileInput=document.createElement("template");fileInput.innerHTML='\n \t<style>\n\t\t*{\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t:host{\n\t\t\t--accent-color: #4d2588;\n\t\t\t--text-color: 17, 17, 17;\n\t\t\t--background-color: 255, 255, 255;\n\t\t\t--border-radius: 0.3rem;\n\t\t\t--button-color: rgba(var(--background-color), 1);\n\t\t\t--button-font-weight: 500;\n\t\t\t--button-background-color: var(--accent-color);\n\t\t}\n\t\t.file-input {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t\n\t\t.file-picker-button {\n display: flex;\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n align-items: center;\n\t\t\tpadding: 0.5rem 0.8rem;\n\t\t\tcolor: var(--button-color);\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tfont-weight: var(--button-font-weigh);\n\t\t\tbackground-color: var(--button-background-color);\n\t\t}\n\t\t.files-preview-wrapper{\n\t\t\tdisplay: grid;\n\t\t\tgap: 0.5rem;\n\t\t\tlist-style: none;\n\t\t}\n\t\t.files-preview-wrapper:not(:empty){\n margin-bottom: 1rem;\n\t\t}\n\t\t.file-preview{\n\t\t\tdisplay: grid;\n gap: 0.5rem;\n align-items: center;\n\t\t\tpadding: 0.5rem 0.8rem;\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tbackground-color: rgba(var(--text-color), 0.06)\n\t\t}\n\t\t.file-name{\n\t\t}\n .file-size{\n font-size: 0.8rem;\n font-weight: 400;\n color: rgba(var(--text-color), 0.8);\n }\n\t\tinput[type=file] {\n\t\t\tdisplay: none;\n\t\t}\n \t</style>\n\t<ul class="files-preview-wrapper"></ul>\n \t<label tabindex="0" class="file-input">\n\t\t<div class="file-picker-button"><slot>Choose file</slot></div>\n\t\t<input type="file">\n\t</label>\n',customElements.define("file-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(fileInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.fileInput=this.shadowRoot.querySelector(".file-input"),this.filesPreviewWraper=this.shadowRoot.querySelector(".files-preview-wrapper"),this.reflectedAttributes=["accept","multiple","capture"],this.reset=this.reset.bind(this),this.formatBytes=this.formatBytes.bind(this),this.createFilePreview=this.createFilePreview.bind(this),this.handleChange=this.handleChange.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}static get observedAttributes(){return["accept","multiple","capture"]}get files(){return this.input.files}set accept(t){this.setAttribute("accept",t)}set multiple(t){t?this.setAttribute("mutiple",""):this.removeAttribute("mutiple")}set capture(t){this.setAttribute("capture",t)}set value(t){this.input.value=t}get isValid(){return""!==this.input.value}reset(){this.input.value="",this.filesPreviewWraper.innerHTML=""}formatBytes(t,e=2){if(0===t)return"0 Bytes";const n=0>e?0:e,i=Math.floor(Math.log(t)/Math.log(1024));return parseFloat((t/Math.pow(1024,i)).toFixed(n))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}createFilePreview(t){const e=document.createElement("li"),{name:n,size:i}=t;return e.className="file-preview",e.innerHTML=`\n\t\t\t<div class="file-name">${n}</div>\n <h5 class="file-size">${this.formatBytes(i)}</h5>\n\t\t`,e}handleChange(t){this.filesPreviewWraper.innerHTML="";const e=document.createDocumentFragment();Array.from(t.target.files).forEach(t=>{e.append(this.createFilePreview(t))}),this.filesPreviewWraper.append(e)}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.code||(t.preventDefault(),this.input.click())}connectedCallback(){this.setAttribute("role","button"),this.setAttribute("aria-label","File upload"),this.input.addEventListener("change",this.handleChange),this.fileInput.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t))}disconnectedCallback(){this.input.removeEventListener("change",this.handleChange),this.fileInput.removeEventListener("keydown",this.handleKeyDown)}});

187
components/dist/hamburger-menu.js vendored Normal file
View File

@ -0,0 +1,187 @@
const hamburgerMenu = document.createElement('template')
hamburgerMenu.innerHTML = `
<style>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:host{
display: flex;
width: 100%;
height: 100%;
overflow-y: auto;
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--background-color: inherit;
--padding: 0 0 3rem 0;
--backdrop-color: rgba(0,0,0,0.5);
}
.backdrop{
position: fixed;
}
.side-nav{
display: flex;
flex-direction: column;
width: 100%;
}
.hide{
display: none !important;
}
@media screen and (max-width: 640px){
:host{
position: fixed;
z-index: 10;
}
.side-nav{
height: 100%;
overflow-y: auto;
width: calc(100% - 4rem);
transition: transform 0.3s;
background-color: var(--background-color);
box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1);
z-index: 1;
}
.side-nav:not(.reveal){
transform: translateX(-100%);
}
.reveal{
transform: none;
}
.backdrop{
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--backdrop-color);
-webkit-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
}
@media screen and (min-width: 640px){
.backdrop{
pointer-events: none;
}
}
@media (any-hover: hover){
::-webkit-scrollbar{
width: 0.5rem;
}
::-webkit-scrollbar-thumb{
border-radius: 1rem;
background: rgba(var(--text-color), 0.3);
&:hover{
background: rgba(var(--text-color), 0.5);
}
}
}
</style>
<section class="backdrop hide"></section>
<nav class="side-nav">
<slot></slot>
</nav>
`
class HamburgerMenu extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' }).append(hamburgerMenu.content.cloneNode(true))
this.resumeScrolling = this.resumeScrolling.bind(this)
this.open = this.open.bind(this)
this.close = this.close.bind(this)
this.sideNav = this.shadowRoot.querySelector('.side-nav')
this.backdrop = this.shadowRoot.querySelector('.backdrop')
this.isOpen = false
this.animeOptions = {
duration: 300,
easing: 'ease'
}
}
static get observedAttributes() {
return ['open'];
}
resumeScrolling() {
const scrollY = document.body.style.top;
window.scrollTo(0, parseInt(scrollY || '0') * -1);
setTimeout(() => {
document.body.style.overflow = 'auto';
document.body.style.top = 'initial'
}, 300);
}
open() {
if (this.isOpen) return
document.body.style.overflow = 'hidden';
document.body.style.top = `-${window.scrollY}px`
this.classList.remove('hide')
this.sideNav.classList.add('reveal')
this.backdrop.classList.remove('hide')
this.backdrop.animate([
{
opacity: 0
},
{
opacity: 1
},
],
this.animeOptions)
.onfinish = () => {
this.isOpen = true
this.setAttribute('open', '')
}
}
close() {
if (!this.isOpen) return
this.sideNav.classList.remove('reveal')
this.backdrop.animate([
{
opacity: 1
},
{
opacity: 0
},
],
this.animeOptions)
.onfinish = () => {
this.backdrop.classList.add('hide')
this.classList.add('hide')
this.isOpen = false
this.removeAttribute('open')
}
}
connectedCallback() {
this.backdrop.addEventListener('click', this.close)
const resizeObserver = new ResizeObserver(entries => {
if (window.innerWidth < 640 && this.isOpen) {
this.classList.remove('hide')
}
else {
this.classList.add('hide')
}
if (window.innerWidth > 640) {
this.classList.remove('hide')
}
});
resizeObserver.observe(this)
}
disconnectedCallback() {
this.backdrop.removeEventListener('click', this.close)
}
attributeChangedCallback(name, oldVal, newVal) {
if (name === 'open') {
if (this.hasAttribute('open')) {
this.open()
}
}
}
}
window.customElements.define('hamburger-menu', HamburgerMenu);

1
components/dist/hamburger-menu.min.js vendored Normal file
View File

@ -0,0 +1 @@
const hamburgerMenu=document.createElement("template");hamburgerMenu.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: flex;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: inherit;\n --padding: 0 0 3rem 0;\n --backdrop-color: rgba(0,0,0,0.5);\n}\n.backdrop{\n position: fixed;\n}\n.side-nav{\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n.hide{\n display: none !important;\n}\n@media screen and (max-width: 640px){\n :host{\n position: fixed;\n z-index: 10;\n }\n .side-nav{\n height: 100%;\n overflow-y: auto; \n width: calc(100% - 4rem);\n transition: transform 0.3s;\n background-color: var(--background-color);\n box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1);\n z-index: 1;\n }\n .side-nav:not(.reveal){\n transform: translateX(-100%);\n }\n .reveal{\n transform: none;\n }\n .backdrop{\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: var(--backdrop-color);\n -webkit-transition: opacity 0.3s;\n -o-transition: opacity 0.3s;\n transition: opacity 0.3s;\n }\n}\n@media screen and (min-width: 640px){\n .backdrop{\n pointer-events: none;\n }\n}\n@media (any-hover: hover){\n ::-webkit-scrollbar{\n width: 0.5rem;\n }\n \n ::-webkit-scrollbar-thumb{\n border-radius: 1rem;\n background: rgba(var(--text-color), 0.3);\n &:hover{\n background: rgba(var(--text-color), 0.5);\n }\n }\n}\n</style>\n<section class="backdrop hide"></section>\n<nav class="side-nav">\n <slot></slot>\n</nav>\n';class HamburgerMenu extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(hamburgerMenu.content.cloneNode(!0)),this.resumeScrolling=this.resumeScrolling.bind(this),this.open=this.open.bind(this),this.close=this.close.bind(this),this.sideNav=this.shadowRoot.querySelector(".side-nav"),this.backdrop=this.shadowRoot.querySelector(".backdrop"),this.isOpen=!1,this.animeOptions={duration:300,easing:"ease"}}static get observedAttributes(){return["open"]}resumeScrolling(){const n=document.body.style.top;window.scrollTo(0,-1*parseInt(n||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}open(){this.isOpen||(document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.classList.remove("hide"),this.sideNav.classList.add("reveal"),this.backdrop.classList.remove("hide"),this.backdrop.animate([{opacity:0},{opacity:1}],this.animeOptions).onfinish=(()=>{this.isOpen=!0,this.setAttribute("open","")}))}close(){this.isOpen&&(this.sideNav.classList.remove("reveal"),this.backdrop.animate([{opacity:1},{opacity:0}],this.animeOptions).onfinish=(()=>{this.backdrop.classList.add("hide"),this.classList.add("hide"),this.isOpen=!1,this.removeAttribute("open")}))}connectedCallback(){this.backdrop.addEventListener("click",this.close);const n=new ResizeObserver(n=>{window.innerWidth<640&&this.isOpen?this.classList.remove("hide"):this.classList.add("hide"),window.innerWidth>640&&this.classList.remove("hide")});n.observe(this)}disconnectedCallback(){this.backdrop.removeEventListener("click",this.close)}attributeChangedCallback(n,e,t){"open"===n&&this.hasAttribute("open")&&this.open()}}window.customElements.define("hamburger-menu",HamburgerMenu);

7
components/dist/input.js vendored
View File

@ -39,8 +39,7 @@ border: none;
display: flex;
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--background-color: 255, 255, 255;
--success-color: #00C853;
--danger-color: red;
--width: 100%;
@ -168,7 +167,7 @@ input{
}
:host(.outlined) .input {
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
background: rgba(var(--foreground-color), 1);
background: rgba(var(--background-color), 1);
}
:host(.outlined) .label {
width: max-content;
@ -180,7 +179,7 @@ input{
-ms-transform: translate(0.1rem, -1.5rem) scale(0.8);
transform: translate(0.1rem, -1.5rem) scale(0.8);
opacity: 1;
background: rgba(var(--foreground-color), 1);
background: rgba(var(--background-color), 1);
}
.animate-label:focus-within:not(.readonly) .label{
color: var(--accent-color)

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

File diff suppressed because one or more lines are too long

2
components/dist/menu.js vendored
View File

@ -82,7 +82,7 @@ smMenu.innerHTML = `
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background: rgba(var(--foreground-color), 1);
background: rgba(var(--background-color), 1);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
-o-transition: opacity 0.3s, transform 0.3s;

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

File diff suppressed because one or more lines are too long

5
components/dist/notifications.js vendored
View File

@ -13,8 +13,7 @@ smNotifications.innerHTML = `
display: flex;
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--background-color: 255, 255, 255;
--danger-color: red;
--icon-height: 1.5rem;
--icon-width: 1.5rem;
@ -46,7 +45,7 @@ smNotifications.innerHTML = `
display: flex;
position: relative;
border-radius: 0.3rem;
background: rgba(var(--foreground-color), 1);
background: rgba(var(--background-color), 1);
overflow: hidden;
overflow-wrap: break-word;
word-wrap: break-word;

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

File diff suppressed because one or more lines are too long

6
components/dist/popup.js vendored
View File

@ -14,9 +14,7 @@ smPopup.innerHTML = `
z-index: 10;
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--danger-color: red;
--background-color: 255, 255, 255;
--width: 100%;
--height: auto;
--min-width: auto;
@ -71,7 +69,7 @@ smPopup.innerHTML = `
-o-transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s;
background: rgba(var(--foreground-color), 1);
background: rgba(var(--background-color), 1);
-webkit-box-shadow: 0 -1rem 2rem #00000020;
box-shadow: 0 -1rem 2rem #00000020;
content-visibility: auto;

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

File diff suppressed because one or more lines are too long

4
components/dist/radio.js vendored
View File

@ -10,9 +10,7 @@ smRadio.innerHTML = `
:host{
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--danger-color: red;
--background-color: 255, 255, 255;
--gap: 0.5rem;
--height: 1.4rem;
}

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

@ -1 +1 @@
const smRadio=document.createElement("template");smRadio.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 --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --foreground-color: 255, 255, 255;\n --background-color: #F6f6f6;\n --danger-color: red;\n --gap: 0.5rem;\n --height: 1.4rem;\n }\n :host([disabled]) {\n opacity: 0.6;\n user-select: none;\n pointer-events: none;\n }\n .hide{\n display: none !important;\n }\n .radio{\n display: flex;\n cursor: pointer;\n }\n .radio__button{\n position: relative;\n height: var(--height);\n width: var(--height);\n overflow: visible;\n padding: 0.1rem;\n }\n .outer-disc{\n fill: none;\n stroke-width: 3;\n stroke: rgba(var(--text-color), 0.7);\n }\n .inner-disc{\n fill: var(--accent-color);\n transition: transform 0.3s;\n transform: scale(0);\n transform-origin: center;\n }\n :host([checked]) .outer-disc{\n stroke: var(--accent-color);\n }\n :host([checked]) .inner-disc{\n transform: scale(1);\n }\n\n @media (any-hover: hover){\n }\n</style>\n<div class="radio">\n <slot name="left"></slot>\n <svg class="radio__button" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="outer-disc" cx="12" cy="12" r="11"/><circle class="inner-disc" cx="12" cy="12" r="6"/></svg>\n <slot></slot>\n</div>\n',window.customElements.define("sm-radio",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smRadio.content.cloneNode(!0)),this.radio=this.shadowRoot.querySelector(".radio"),this.reset=this.reset.bind(this),this.dispatchChangeEvent=this.dispatchChangeEvent.bind(this),this.dispatchGroupEvent=this.dispatchGroupEvent.bind(this),this.handleKeyup=this.handleKeyup.bind(this),this.handleClick=this.handleClick.bind(this),this.handleRadioGroup=this.handleRadioGroup.bind(this),this.options={bubbles:!0,composed:!0,detail:{value:this.value}}}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(t){this.setAttribute("value",t)}get value(){return this.getAttribute("value")}reset(){this.removeAttribute("checked")}dispatchChangeEvent(){this.dispatchEvent(new CustomEvent("change",this.options))}dispatchGroupEvent(){this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&this.dispatchEvent(new CustomEvent(`changed${this.getAttribute("name")}`,this.options))}handleKeyup(t){"Space"===t.code&&this.handleClick()}handleClick(){this.hasAttribute("checked")||(this.setAttribute("checked",""),this.dispatchGroupEvent())}handleRadioGroup(t){t.detail.value!==this.getAttribute("value")&&this.reset()}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","radio"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keyup",this.handleKeyup),this.addEventListener("click",this.handleClick),this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&document.addEventListener(`changed${this.getAttribute("name")}`,this.handleRadioGroup)}attributeChangedCallback(t,e,i){e!==i&&("checked"===t?this.dispatchChangeEvent():"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keyup",this.handleKeyup),this.removeEventListener("change",this.handleClick)}});
const smRadio=document.createElement("template");smRadio.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 --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --gap: 0.5rem;\n --height: 1.4rem;\n }\n :host([disabled]) {\n opacity: 0.6;\n user-select: none;\n pointer-events: none;\n }\n .hide{\n display: none !important;\n }\n .radio{\n display: flex;\n cursor: pointer;\n }\n .radio__button{\n position: relative;\n height: var(--height);\n width: var(--height);\n overflow: visible;\n padding: 0.1rem;\n }\n .outer-disc{\n fill: none;\n stroke-width: 3;\n stroke: rgba(var(--text-color), 0.7);\n }\n .inner-disc{\n fill: var(--accent-color);\n transition: transform 0.3s;\n transform: scale(0);\n transform-origin: center;\n }\n :host([checked]) .outer-disc{\n stroke: var(--accent-color);\n }\n :host([checked]) .inner-disc{\n transform: scale(1);\n }\n\n @media (any-hover: hover){\n }\n</style>\n<div class="radio">\n <slot name="left"></slot>\n <svg class="radio__button" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="outer-disc" cx="12" cy="12" r="11"/><circle class="inner-disc" cx="12" cy="12" r="6"/></svg>\n <slot></slot>\n</div>\n',window.customElements.define("sm-radio",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smRadio.content.cloneNode(!0)),this.radio=this.shadowRoot.querySelector(".radio"),this.reset=this.reset.bind(this),this.dispatchChangeEvent=this.dispatchChangeEvent.bind(this),this.dispatchGroupEvent=this.dispatchGroupEvent.bind(this),this.handleKeyup=this.handleKeyup.bind(this),this.handleClick=this.handleClick.bind(this),this.handleRadioGroup=this.handleRadioGroup.bind(this),this.options={bubbles:!0,composed:!0,detail:{value:this.value}}}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(t){this.setAttribute("value",t)}get value(){return this.getAttribute("value")}reset(){this.removeAttribute("checked")}dispatchChangeEvent(){this.dispatchEvent(new CustomEvent("change",this.options))}dispatchGroupEvent(){this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&this.dispatchEvent(new CustomEvent(`changed${this.getAttribute("name")}`,this.options))}handleKeyup(t){"Space"===t.code&&this.handleClick()}handleClick(){this.hasAttribute("checked")||(this.setAttribute("checked",""),this.dispatchGroupEvent())}handleRadioGroup(t){t.detail.value!==this.getAttribute("value")&&this.reset()}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","radio"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keyup",this.handleKeyup),this.addEventListener("click",this.handleClick),this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&document.addEventListener(`changed${this.getAttribute("name")}`,this.handleRadioGroup)}attributeChangedCallback(t,e,i){e!==i&&("checked"===t?this.dispatchChangeEvent():"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keyup",this.handleKeyup),this.removeEventListener("change",this.handleClick)}});

6
components/dist/select.js vendored
View File

@ -23,9 +23,7 @@ smSelect.innerHTML = `
display: inline-flex;
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--danger-color: red;
--background-color: 255, 255, 255;
--max-height: auto;
--min-width: 100%;
}
@ -95,7 +93,7 @@ smSelect.innerHTML = `
flex-direction: column;
min-width: var(--min-width);
max-height: var(--max-height);
background: rgba(var(--foreground-color), 1);
background: rgba(var(--background-color), 1);
border: solid 1px rgba(var(--text-color), 0.2);
border-radius: 0.3rem;
z-index: 2;

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

File diff suppressed because one or more lines are too long

0
components/dist/sm-spinner.js → components/dist/spinner.js vendored
View File

0
components/dist/sm-spinner.min.js → components/dist/spinner.min.js vendored
View File

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

@ -10,9 +10,7 @@ stripSelect.innerHTML = `
:host{
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--danger-color: red;
--background-color: 255, 255, 255;
--gap: 0.5rem;
}
.hide{

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

File diff suppressed because one or more lines are too long

4
components/dist/switch.js vendored
View File

@ -14,9 +14,7 @@ smSwitch.innerHTML = `
display: inline-flex;
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--danger-color: red;
--background-color: 255, 255, 255;
}
label{
display: -webkit-box;

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

File diff suppressed because one or more lines are too long

6
components/dist/tabs.js vendored
View File

@ -13,9 +13,7 @@ smTabHeader.innerHTML = `
display: flex;
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--danger-color: red;
--background-color: 255, 255, 255;
}
.tabs{
position: relative;
@ -71,7 +69,7 @@ smTabHeader.innerHTML = `
border-radius: 0.3rem;
}
:host([variant="tab"]) slot::slotted(.active){
color: rgba(var(--foreground-color), 1);
color: rgba(var(--background-color), 1);
}
slot::slotted(.active){
color: var(--accent-color);

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

File diff suppressed because one or more lines are too long

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

@ -9,8 +9,7 @@ tagsInput.innerHTML = `
:host{
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--background-color: 255, 255, 255;
--danger-color: red;
--border-radius: 0.3rem;
}

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 --foreground-color: 255, 255, 255;\n --background-color: #F6f6f6;\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 }\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)}});

4
components/dist/text-field.js vendored
View File

@ -9,9 +9,7 @@ textField.innerHTML = `
:host{
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--danger-color: red;
--background-color: 255, 255, 255;
}
.text-field{
display: flex;

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

File diff suppressed because one or more lines are too long

5
components/dist/textarea.js vendored
View File

@ -19,8 +19,7 @@ smTextarea.innerHTML = `
display: grid;
--accent-color: #4d2588;
--text-color: 17, 17, 17;
--foreground-color: 255, 255, 255;
--background-color: #F6f6f6;
--background-color: 255, 255, 255;
--danger-color: red;
--border-radius: 0.3rem;
--background: rgba(var(--text-color), 0.06);
@ -30,7 +29,7 @@ smTextarea.innerHTML = `
}
:host(.outlined) .textarea {
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
background: rgba(var(--foreground-color), 1);
background: rgba(var(--background-color), 1);
}
.textarea{
display: grid;

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 --foreground-color: 255, 255, 255;\n --background-color: #F6f6f6;\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(--foreground-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-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())}});

394
components/index.html
View File

@ -21,7 +21,7 @@
</audio>
<main>
<header id="main_header" class="flex align-center space-between">
<button id="side_nav_button" class="interact" onclick="sideNav()">
<button id="side_nav_button" class="interact" onclick="getRef('side_nav').open()">
<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="M16 18v2H5v-2h11zm5-7v2H3v-2h18zm-2-7v2H8V4h11z" />
@ -45,7 +45,7 @@
</svg>
</label>
</header>
<nav id="side_nav">
<hamburger-menu id="side_nav">
<h4>Getting Started</h4>
<ul class="list">
<li>
@ -66,7 +66,7 @@
</ul>
<h4>Components</h4>
<ul id="components_list" class="list"></ul>
</nav>
</hamburger-menu>
<section id="backdrop" class="hide-completely" onclick="sideNav(false)"></section>
<div class="right language-html">
<section id="overview_page" class="page">
@ -80,15 +80,15 @@
Component-based design is the cornerstone of the modern UI development process. With rise of more UI frameworks every day, the web platform has a serious issue of fragmentation and portability.
</p>
<p>
Web components to the rescue! This is the collection of web components (WC here forward) that we use at RanchiMall.especially since we are a framework-less development environment so this was a logical choice.
Web components to the rescue! This is the collection of web components (WC here forward) that we use at RanchiMall, especially since we are a framework-less development environment so this was a logical choice.
</p>
<p>
Just download the components you like, link them with a script tag and drop it in HTML done!.
Just download the components you like, link them with a script tag and drop it in HTML done!
</p>
<h3>Features</h3>
<ul class="grid gap-1">
<li>Native and Cross framework support</li>
<li>Standalone functionality</li>
<li>Encapsulated style and functionality</li>
<li>Easy styling</li>
<li>Adaptive scaling </li>
</ul>
@ -109,7 +109,7 @@
</strong>
</li>
<li>
Link the downloaded js with <code>&lt;script src=".../components.js"&gt;&lt;/script&gt;</code> at bottom of your HTML file just before <code>&lt;/body&gt;</code> tag.
Link the downloaded js with <code>&lt;script src=".../components.js"&gt;&lt;/script&gt;</code> at bottom of your HTML file just before <span class="highlight">&lt;/body&gt;</span> tag.
</li>
</ol>
<div class="grid grid-3 gap-0-5 align-center">
@ -130,34 +130,156 @@
<section id="global_styling_page" class="page hide-completely">
<h1 class="page__title">Global styling</h1>
<p>These components use <strong>CSS variables</strong> to customize styling. they share some CSS variables that make global styling easier.</p>
<h4>Some common CSS variables and their use</h4>
<table>
<thead>
<tr>
<th>Variable</th>
<th>Use</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="highlight">--accent-color</span></td>
<td>Color which will be used for denoting active state</td>
</tr>
<tr>
<td><span class="highlight">--text-color</span></td>
<td>
default text color for all components. <br>
( Use comma separated rgb values. e.g 17, 17, 17 )
</td>
</tr>
<tr>
<td><span class="highlight">--background-color</span></td>
<td>
default background color for all components. <br>
( Use comma separated rgb values. e.g 255, 255, 255 )
</td>
</tr>
<tr>
<td><span class="highlight">--danger-color</span></td>
<td>Used for error/invalid state</td>
</tr>
</tbody>
</table>
</section>
<section id="button_page" class="page hide-completely">
<h1 class="page__title">Buttons</h1>
<p>
Buttons are used in various basic UI interactions to perform an action.
</p>
<sm-button>default</sm-button>
<sm-button variant="primary">primary</sm-button>
<sm-button variant="outlined">outlined</sm-button>
<sm-button variant="no-outline">no-outline</sm-button>
<sm-button variant="primary" disabled>disabled</sm-button>
<p><span class="highlight">sm-button</span> has 3 variants that define how the button looks.</p>
<table>
<thead>
<tr>
<th>Variant type</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="highlight">primary</span></td>
<td>
<sm-button variant="primary">Primary</sm-button>
</td>
</tr>
<tr>
<td><span class="highlight">outlined</span></td>
<td>
<sm-button variant="outlined">Outlined</sm-button>
</td>
</tr>
<tr>
<td><span class="highlight">no--outline</span></td>
<td>
<sm-button variant="no-outline">No outline</sm-button>
</td>
</tr>
</tbody>
</table>
<h4>How to define variant</h4>
<pre>
<code class="prettyprint">
&lt;sm-button&gt;default&lt;/sm-button&gt;
&lt;sm-button variant="primary"&gt;primary&lt;/sm-button&gt;
&lt;sm-button variant="outlined"&gt;outlined&lt;/sm-button&gt;
&lt;sm-button variant="no-outline"&gt;no-outline&lt;/sm-button&gt;
&lt;sm-button variant="primary" disabled&gt;disabled&lt;/sm-button&gt;
</code>
</pre>
<h2>States</h2>
<h4>Disabled</h4>
<p>To disable the button add <span class="highlight">disabled</span> attribute.</p>
<sm-button disabled>Disabled</sm-button>
<pre>
<code class="prettyprint">
&lt;sm-button disabled&gt;Disabled&lt;/sm-button&gt;
</code>
</pre>
<h2>Attributes</h2>
<p>All the native HTML checkbox attributes are valid</p>
<table>
<thead>
<tr>
<th>Attribute</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="highlight">disabled</span> (boolean)</td>
<td>
Button is disabled by default. all the interactions are disabled
</td>
</tr>
<tr>
<td><span class="highlight">type</span> (string)</td>
<td>
Has values <span class="highlight">submit</span> <span class="highlight">reset</span> <br>
Can only used withing <spna class="highlight">sm-form</spna> to submit or reset the form.
</td>
</tr>
</tbody>
</table>
<h2>Styling</h2>
<p>CSS variables used to style this component</p>
<table>
<thead>
<tr>
<th>Variable</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="highlight">--background</span></td>
<td>
Define background of button. accepts all values of CSS background property
</td>
</tr>
<tr>
<td><span class="highlight">--border-radius</span></td>
<td>
Set curvature at button corners
</td>
</tr>
<tr>
<td><span class="highlight">--padding</span></td>
<td>
Specify padding of button
</td>
</tr>
</tbody>
</table>
</section>
<section id="carousel_page" class="page hide-completely">
<h1 class="page__title">Carousel</h1>
<p>
To start using SM Components
Carousel is a very common UI component primarily used to display images or slides.
This carousel switches user interactions based on type of input devices present. For hover capable devices slides can be scrolled with buttons and on
touch enabled devices swipe can be used.
</p>
<h2>Interactive demo</h2>
<sm-carousel align-items="start" indicator>
<div class="card">
<h3>Title</h3>
@ -176,19 +298,183 @@
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.</p>
</div>
</sm-carousel>
<h4>Markup for above carousel</h4>
<pre>
<code class="prettyprint">
&lt;sm-carousel align-items="start" indicator&gt; ...carousel items... &lt;/sm-carousel&gt;
</code>
</pre>
<h2>Custom attributes</h2>
<p>These attributes cane used to customize carousel behaviour and features</p>
<table>
<thead>
<tr>
<th>Attribute</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="highlight">align-items</span></td>
<td>
Has values <span class="highlight">start</span>
<span class="highlight">center</span> <span class="highlight">end</span>
Specifies how carousel items should align. default is <span class="highlight">center</span>.
</td>
</tr>
<tr>
<td><span class="highlight">indicator</span> (boolean)</td>
<td>
if added carousel shows dot indicators of carousel items.
</td>
</tr>
</tbody>
</table>
<h2>Styling</h2>
<p>CSS variables used to style this component</p>
<table>
<thead>
<tr>
<th>Variable</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="highlight">--active-indicator-color</span></td>
<td>
Defines background color of active slide indicator
</td>
</tr>
<tr>
<td><span class="highlight">--nav-background-color</td>
<td>
Defines background color of carousel navigation buttons
</td>
</tr>
<tr>
<td><span class="highlight">--nav-box-shadow</td>
<td>
Defines box shadow of carousel navigation buttons
</td>
</tr>
<tr>
<td><span class="highlight">--nav-icon-fill</td>
<td>
Defines fill of arrow icon on carousel navigation buttons
</td>
</tr>
</tbody>
</table>
</section>
<section id="checkbox_page" class="page hide-completely">
<h1 class="page__title">Checkbox</h1>
<p>
To start using SM Components
</p>
<label>
<sm-checkbox id="checkbox">Default</sm-checkbox>
<sm-checkbox id="checkbox" checked>Checked</sm-checkbox>
<sm-checkbox id="checkbox" disabled>Disabled</sm-checkbox>
<sm-checkbox id="checkbox" checked disabled>Checked Disabled</sm-checkbox>
</label>
<p><span class="highlight">sm-checkbox</span> supports all the attributes of native HTML5 checkbox</p>
<strong>
linking some HTML element with <span class="highlght">sm-checbox</span> using <span class="highlight">label</span> tag won't work. <br>
Add the element inside the opening and closing checkbox tag.
</strong>
<h2>Interactive demo</h2>
<sm-checkbox id="checkbox">
<div style="margin-left: 0.5rem;">
Check this box
</div>
</sm-checkbox>
<h2>States</h2>
<h4>Disabled</h4>
<p>To disable the checkbox add <span class="highlight">disabled</span> attribute.</p>
<sm-checkbox disabled>
<div style="margin-left: 0.5rem;">
Disabled checkbox
</div>
</sm-checkbox>
<pre>
<code class="prettyprint">
&lt;sm-checkbox disabled&gt;
&lt;div style="margin-left: 0.5rem;"&gt;Disabled checkbox&lt;/div&gt;
&lt;/sm-checkbox&gt;
</code>
</pre>
<h4>Checked</h4>
<p>To make checkbox checked by default add <span class="highlight">checked</span> attribute.</p>
<sm-checkbox checked>
<div style="margin-left: 0.5rem;">
Checked checkbox
</div>
</sm-checkbox>
<pre>
<code class="prettyprint">
&lt;sm-checkbox checked&gt;
&lt;div style="margin-left: 0.5rem;"&gt;Checked checkbox&lt;/div&gt;
&lt;/sm-checkbox&gt;
</code>
</pre>
<h2>Attributes</h2>
<p>All the native HTML checkbox attributes are valid</p>
<table>
<thead>
<tr>
<th>Attribute</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="highlight">checked</span> (boolean)</td>
<td>
Sets checked state as default if added
</td>
</tr>
<tr>
<td><span class="highlight">disabled</span> (boolean)</td>
<td>
Checkbox is disabled by default. all the interactions are disabled
</td>
</tr>
<tr>
<td><span class="highlight">value</span> (string)</td>
<td>
Sets value of checkbox which can be accessed by value property with JS
</td>
</tr>
</tbody>
</table>
<h2>Styling</h2>
<p>CSS variables used to style this component</p>
<table>
<thead>
<tr>
<th>Variable</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="highlight">--border-radius</span></td>
<td>
Defines border-radius of checkbox square
</td>
</tr>
<tr>
<td><span class="highlight">--height</td>
<td>
Defines height of checkbox
</td>
</tr>
<tr>
<td><span class="highlight">--width</td>
<td>
Defines width of checkbox
</td>
</tr>
</tbody>
</table>
</section>
<section id="copy_page" class="page hide-completely">
@ -219,6 +505,11 @@
</sm-form>
<p id="insert_text"></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>
<p>
@ -312,7 +603,7 @@
<section id="select_page" class="page hide-completely">
<h1 class="page__title">Select</h1>
<p>
<code>&lt;sm-select&gt;</code> is very similar to starndatd HTML5 select and it's markup stucture is
<span class="highlight">&lt;sm-select&gt;</span> is very similar to starndatd HTML5 select and it's markup stucture is
also identical.
</p>
<sm-select>
@ -324,7 +615,7 @@
<section id="spinner_page" class="page hide-completely">
<h1 class="page__title">Spinner</h1>
<p>
<code>&lt;sm-select&gt;</code> is very similar to starndatd HTML5 select and it's markup stucture is
<span class="highlight">&lt;sm-select&gt;</span> is very similar to starndatd HTML5 select and it's markup stucture is
also identical.
</p>
<sm-spinner></sm-spinner>
@ -420,13 +711,14 @@
<script src="dist/copy.js"></script>
<script src="dist/file-input.js"></script>
<script src="dist/form.js"></script>
<script src="dist/hamburger-menu.js"></script>
<script src="dist/input.js"></script>
<script src="dist/menu.js"></script>
<script src="dist/notifications.js"></script>
<script src="dist/popup.js"></script>
<script src="dist/radio.js"></script>
<script src="dist/select.js"></script>
<script src="dist/sm-spinner.js"></script>
<script src="dist/spinner.js"></script>
<script src="dist/strip-select.js"></script>
<script src="dist/switch.js"></script>
<script src="dist/tabs.js"></script>
@ -818,6 +1110,10 @@
name: 'Form',
pageId: 'form_page'
},
{
name: 'Hamburger menu',
pageId: 'hamburger_menu_page'
},
{
name: 'Input',
pageId: 'input_page'
@ -871,42 +1167,6 @@
pageId: 'text_field_page'
},
]
function sideNav(show = true) {
if (show) {
getRef('side_nav').classList.add('reveal')
getRef('backdrop').classList.remove('hide-completely')
getRef('backdrop').animate([
{
opacity: 0
},
{
opacity: 1
},
],
{
duration: 300,
easing: 'ease'
})
}
else {
getRef('side_nav').classList.remove('reveal')
getRef('backdrop').animate([
{
opacity: 1
},
{
opacity: 0
},
],
{
duration: 300,
easing: 'ease'
})
.onfinish = () => {
getRef('backdrop').classList.add('hide-completely')
}
}
}
function renderComponentList() {
const itemsFrag = document.createDocumentFragment()