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

Code refactoring and bug fixes

Browse Source
This commit is contained in:
sairaj mote 2022-11-08 03:01:43 +05:30
parent c2bfbba229
commit 2c0cbbff3e
13 changed files with 306 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
components/dist/strip-select.js → components/dist/chips.js vendored
View File

@ -1,5 +1,5 @@
const stripSelect = document.createElement('template'); const smChips = document.createElement('template');
stripSelect.innerHTML = ` smChips.innerHTML = `
<style> <style>
*{ *{
padding: 0; padding: 0;
@ -24,17 +24,17 @@ stripSelect.innerHTML = `
grid-template-columns: min-content minmax(0,1fr) min-content; grid-template-columns: min-content minmax(0,1fr) min-content;
grid-template-rows: 1fr; grid-template-rows: 1fr;
} }
.strip-select{ .sm-chips{
display: flex; display: flex;
position: relative; position: relative;
grid-area: 1/1/2/-1; grid-area: 1/1/2/-1;
gap: var(--gap, 0.5rem); gap: var(--gap, 0.5rem);
overflow: auto hidden; overflow: auto hidden;
} }
:host([multiline]) .strip-select{ :host([multiline]) .sm-chips{
flex-wrap: wrap; flex-wrap: wrap;
} }
:host(:not([multiline])) .strip-select{ :host(:not([multiline])) .sm-chips{
max-width: 100%; max-width: 100%;
align-items: center; align-items: center;
} }
@ -87,7 +87,7 @@ stripSelect.innerHTML = `
.nav-button{ .nav-button{
display: none; display: none;
} }
.strip-select{ .sm-chips{
overflow: auto hidden; overflow: auto hidden;
} }
.cover{ .cover{
@ -109,7 +109,7 @@ stripSelect.innerHTML = `
height: 0; height: 0;
background-color: transparent; background-color: transparent;
} }
.strip-select{ .sm-chips{
overflow: hidden; overflow: hidden;
} }
.cover--left{ .cover--left{
@ -126,7 +126,7 @@ stripSelect.innerHTML = `
<button class="nav-button nav-button--left hide"> <button class="nav-button nav-button--left hide">
<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="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg> <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="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>
</button> </button>
<section class="strip-select"> <section class="sm-chips">
<slot></slot> <slot></slot>
</section> </section>
<button class="nav-button nav-button--right hide"> <button class="nav-button nav-button--right hide">
@ -136,13 +136,17 @@ stripSelect.innerHTML = `
</section> </section>
`; `;
customElements.define('strip-select', class extends HTMLElement { customElements.define('sm-chips', class extends HTMLElement {
constructor() { constructor() {
super(); super();
this.attachShadow({ this.attachShadow({
mode: 'open' mode: 'open'
}).append(stripSelect.content.cloneNode(true)); }).append(smChips.content.cloneNode(true));
this.stripSelect = this.shadowRoot.querySelector('.strip-select'); this.chipsWrapper = this.shadowRoot.querySelector('.sm-chips');
this.coverLeft = this.shadowRoot.querySelector('.cover--left');
this.coverRight = this.shadowRoot.querySelector('.cover--right');
this.navButtonLeft = this.shadowRoot.querySelector('.nav-button--left');
this.navButtonRight = this.shadowRoot.querySelector('.nav-button--right');
this.slottedOptions = undefined; this.slottedOptions = undefined;
this._value = undefined; this._value = undefined;
this.scrollDistance = 0; this.scrollDistance = 0;
@ -160,14 +164,14 @@ customElements.define('strip-select', class extends HTMLElement {
this.setSelectedOption(val); this.setSelectedOption(val);
} }
scrollLeft() { scrollLeft() {
this.stripSelect.scrollBy({ this.chipsWrapper.scrollBy({
left: -this.scrollDistance, left: -this.scrollDistance,
behavior: 'smooth' behavior: 'smooth'
}); });
} }
scrollRight() { scrollRight() {
this.stripSelect.scrollBy({ this.chipsWrapper.scrollBy({
left: this.scrollDistance, left: this.scrollDistance,
behavior: 'smooth' behavior: 'smooth'
}); });
@ -176,7 +180,7 @@ customElements.define('strip-select', class extends HTMLElement {
if (this._value === value) return if (this._value === value) return
this._value = value; this._value = value;
this.assignedElements.forEach(elem => { this.assignedElements.forEach(elem => {
if (elem.value === value) { if (elem.value == value) {
elem.setAttribute('selected', ''); elem.setAttribute('selected', '');
elem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }); elem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
} }
@ -200,14 +204,12 @@ customElements.define('strip-select', class extends HTMLElement {
this.setAttribute('role', 'listbox'); this.setAttribute('role', 'listbox');
const slot = this.shadowRoot.querySelector('slot'); const slot = this.shadowRoot.querySelector('slot');
const coverLeft = this.shadowRoot.querySelector('.cover--left');
const coverRight = this.shadowRoot.querySelector('.cover--right');
const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left');
const navButtonRight = this.shadowRoot.querySelector('.nav-button--right');
slot.addEventListener('slotchange', e => { slot.addEventListener('slotchange', e => {
// debounce to wait for all elements to be assigned // debounce to wait for all elements to be assigned
clearTimeout(this.slotChangeTimeout); clearTimeout(this.slotChangeTimeout);
this.slotChangeTimeout = setTimeout(() => { this.slotChangeTimeout = setTimeout(() => {
firstOptionObserver.disconnect();
lastOptionObserver.disconnect();
this.assignedElements = slot.assignedElements(); this.assignedElements = slot.assignedElements();
this.assignedElements.forEach(elem => { this.assignedElements.forEach(elem => {
if (elem.hasAttribute('selected')) { if (elem.hasAttribute('selected')) {
@ -220,10 +222,10 @@ customElements.define('strip-select', class extends HTMLElement {
lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]); lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]);
} }
else { else {
navButtonLeft.classList.add('hide'); this.navButtonLeft.classList.add('hide');
navButtonRight.classList.add('hide'); this.navButtonRight.classList.add('hide');
coverLeft.classList.add('hide'); this.coverLeft.classList.add('hide');
coverRight.classList.add('hide'); this.coverRight.classList.add('hide');
firstOptionObserver.disconnect(); firstOptionObserver.disconnect();
lastOptionObserver.disconnect(); lastOptionObserver.disconnect();
} }
@ -242,7 +244,7 @@ customElements.define('strip-select', class extends HTMLElement {
}); });
}); });
resObs.observe(this); resObs.observe(this);
this.stripSelect.addEventListener('option-clicked', e => { this.chipsWrapper.addEventListener('option-clicked', e => {
if (this._value !== e.target.value) { if (this._value !== e.target.value) {
this.setSelectedOption(e.target.value); this.setSelectedOption(e.target.value);
this.fireEvent(); this.fireEvent();
@ -251,11 +253,11 @@ customElements.define('strip-select', class extends HTMLElement {
const firstOptionObserver = new IntersectionObserver(entries => { const firstOptionObserver = new IntersectionObserver(entries => {
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
navButtonLeft.classList.add('hide'); this.navButtonLeft.classList.add('hide');
coverLeft.classList.add('hide'); this.coverLeft.classList.add('hide');
} else { } else {
navButtonLeft.classList.remove('hide'); this.navButtonLeft.classList.remove('hide');
coverLeft.classList.remove('hide'); this.coverLeft.classList.remove('hide');
} }
}); });
}, },
@ -266,11 +268,11 @@ customElements.define('strip-select', class extends HTMLElement {
const lastOptionObserver = new IntersectionObserver(entries => { const lastOptionObserver = new IntersectionObserver(entries => {
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
navButtonRight.classList.add('hide'); this.navButtonRight.classList.add('hide');
coverRight.classList.add('hide'); this.coverRight.classList.add('hide');
} else { } else {
navButtonRight.classList.remove('hide'); this.navButtonRight.classList.remove('hide');
coverRight.classList.remove('hide'); this.coverRight.classList.remove('hide');
} }
}); });
}, },
@ -278,18 +280,17 @@ customElements.define('strip-select', class extends HTMLElement {
threshold: 0.9, threshold: 0.9,
root: this root: this
}); });
navButtonLeft.addEventListener('click', this.scrollLeft); this.navButtonLeft.addEventListener('click', this.scrollLeft);
navButtonRight.addEventListener('click', this.scrollRight); this.navButtonRight.addEventListener('click', this.scrollRight);
} }
disconnectedCallback() { disconnectedCallback() {
navButtonLeft.removeEventListener('click', this.scrollLeft); this.navButtonLeft.removeEventListener('click', this.scrollLeft);
navButtonRight.removeEventListener('click', this.scrollRight); this.navButtonRight.removeEventListener('click', this.scrollRight);
} }
}); });
//Strip option const smChip = document.createElement('template');
const stripOption = document.createElement('template'); smChip.innerHTML = `
stripOption.innerHTML = `
<style> <style>
*{ *{
padding: 0; padding: 0;
@ -297,7 +298,7 @@ stripOption.innerHTML = `
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
.strip-option{ .sm-chip{
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
@ -307,30 +308,30 @@ stripOption.innerHTML = `
border-radius: var(--border-radius, 2rem); border-radius: var(--border-radius, 2rem);
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
:host([selected]) .strip-option{ :host([selected]) .sm-chip{
color: var(--selected-option-color, rgba(var(--background-color,white))); color: var(--selected-option-color, rgba(var(--background-color,white)));
background-color: var(--selected-background-color, var(--accent-color,teal)); background-color: var(--selected-background-color, var(--accent-color,teal));
} }
:host(:focus-within){ :host(:focus-within){
outline: none; outline: none;
} }
:host(:focus-within) .strip-option{ :host(:focus-within) .sm-chip{
box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset; box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset;
} }
:host(:hover:not([selected])) .strip-option{ :host(:hover:not([selected])) .sm-chip{
background-color: rgba(var(--text-color,(17,17,17)), 0.06); background-color: rgba(var(--text-color,(17,17,17)), 0.06);
} }
</style> </style>
<label class="strip-option"> <label class="sm-chip">
<slot></slot> <slot></slot>
</label> </label>
`; `;
customElements.define('strip-option', class extends HTMLElement { customElements.define('sm-chip', class extends HTMLElement {
constructor() { constructor() {
super(); super();
this.attachShadow({ this.attachShadow({
mode: 'open' mode: 'open'
}).append(stripOption.content.cloneNode(true)); }).append(smChip.content.cloneNode(true));
this._value = undefined; this._value = undefined;
this.radioButton = this.shadowRoot.querySelector('input'); this.radioButton = this.shadowRoot.querySelector('input');

1
components/dist/chips.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

73
components/dist/collapsed-text.js vendored Normal file
View File

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

35
components/dist/form.js vendored
View File

@ -30,7 +30,7 @@ customElements.define('sm-form', class extends HTMLElement {
this.form = this.shadowRoot.querySelector('form'); this.form = this.shadowRoot.querySelector('form');
this.formElements this.formElements
this.requiredElements this._requiredElements = [];
this.submitButton this.submitButton
this.resetButton this.resetButton
this.invalidFields = false; this.invalidFields = false;
@ -53,11 +53,11 @@ customElements.define('sm-form', class extends HTMLElement {
} }
_checkValidity() { _checkValidity() {
if (!this.submitButton) return; if (!this.submitButton) return;
this.invalidFields = this.requiredElements.filter(elem => !elem.isValid) this.invalidFields = this._requiredElements.filter(([elem, isWC]) => isWC ? !elem.isValid : !elem.checkValidity())
this.submitButton.disabled = this.invalidFields.length; this.submitButton.disabled = this.invalidFields.length > 0;
} }
handleKeydown(e) { handleKeydown(e) {
if (e.key === 'Enter' && e.target.tagName.includes('SM-INPUT')) { if (e.key === 'Enter' && e.target.tagName.includes('INPUT')) {
if (!this.invalidFields.length) { if (!this.invalidFields.length) {
if (this.submitButton) { if (this.submitButton) {
this.submitButton.click() this.submitButton.click()
@ -67,7 +67,24 @@ customElements.define('sm-form', class extends HTMLElement {
composed: true, composed: true,
})) }))
} else { } else {
this.requiredElements.forEach(elem => { if (!elem.isValid) elem.vibrate() }) for (const [elem, isWC] of this._requiredElements) {
const invalid = isWC ? !elem.isValid : !elem.checkValidity()
if (invalid) {
(elem?.shadowRoot?.lastElementChild || elem).animate([
{ transform: 'translateX(-1rem)' },
{ transform: 'translateX(1rem)' },
{ transform: 'translateX(-0.5rem)' },
{ transform: 'translateX(0.5rem)' },
{ transform: 'translateX(0)' },
], {
duration: 300,
easing: 'ease'
});
if (isWC) elem.focusIn()
else elem.focus()
break;
}
}
} }
} }
} }
@ -75,8 +92,12 @@ customElements.define('sm-form', class extends HTMLElement {
this.formElements.forEach(elem => elem.reset()) this.formElements.forEach(elem => elem.reset())
} }
elementsChanged() { elementsChanged() {
this.formElements = [...this.querySelectorAll('sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')] this.formElements = [...this.querySelectorAll('input, sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')]
this.requiredElements = this.formElements.filter(elem => elem.hasAttribute('required')); this.formElements.forEach(elem => {
if (elem.hasAttribute('required')) {
this._requiredElements.push([elem, elem.tagName.includes('-')])
}
});
this.submitButton = this.querySelector('[variant="primary"], [type="submit"]'); this.submitButton = this.querySelector('[variant="primary"], [type="submit"]');
this.resetButton = this.querySelector('[type="reset"]'); this.resetButton = this.querySelector('[type="reset"]');
if (this.resetButton) { if (this.resetButton) {

BIN
components/dist/form.min.js vendored
View File

Binary file not shown.

13
components/dist/input.js vendored
View File

@ -268,7 +268,6 @@ customElements.define('sm-input',
this.fireEvent = this.fireEvent.bind(this); this.fireEvent = this.fireEvent.bind(this);
this.checkInput = this.checkInput.bind(this); this.checkInput = this.checkInput.bind(this);
this.allowOnlyNum = this.allowOnlyNum.bind(this); this.allowOnlyNum = this.allowOnlyNum.bind(this);
this.vibrate = this.vibrate.bind(this);
this.handleOptionClick = this.handleOptionClick.bind(this); this.handleOptionClick = this.handleOptionClick.bind(this);
this.handleInputNavigation = this.handleInputNavigation.bind(this); this.handleInputNavigation = this.handleInputNavigation.bind(this);
this.handleDatalistNavigation = this.handleDatalistNavigation.bind(this); this.handleDatalistNavigation = this.handleDatalistNavigation.bind(this);
@ -460,18 +459,6 @@ customElements.define('sm-input',
} }
} }
} }
vibrate() {
this.outerContainer.animate([
{ transform: 'translateX(-1rem)' },
{ transform: 'translateX(1rem)' },
{ transform: 'translateX(-0.5rem)' },
{ transform: 'translateX(0.5rem)' },
{ transform: 'translateX(0)' },
], {
duration: 300,
easing: 'ease'
});
}
handleOptionClick(e) { handleOptionClick(e) {
this.input.value = e.target.textContent; this.input.value = e.target.textContent;
this.optionList.classList.add('hidden'); this.optionList.classList.add('hidden');

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

File diff suppressed because one or more lines are too long

130
components/dist/popup.js vendored
View File

@ -54,13 +54,12 @@ smPopup.innerHTML = `
-webkit-transform: scale(0.9) translateY(-2rem) !important; -webkit-transform: scale(0.9) translateY(-2rem) !important;
transform: scale(0.9) translateY(-2rem) !important; transform: scale(0.9) translateY(-2rem) !important;
} }
.background{ .backdrop{
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
pointer-events: none;
background: var(--backdrop-background); background: var(--backdrop-background);
-webkit-transition: opacity 0.3s; -webkit-transition: opacity 0.3s;
-o-transition: opacity 0.3s; -o-transition: opacity 0.3s;
@ -165,7 +164,7 @@ smPopup.innerHTML = `
} }
</style> </style>
<div class="popup-container hide" role="dialog"> <div class="popup-container hide" role="dialog">
<div part="background" class="background"></div> <div part="backdrop" class="backdrop"></div>
<div part="popup" class="popup"> <div part="popup" class="popup">
<div part="popup-header" class="popup-top"> <div part="popup-header" class="popup-top">
<div class="handle"></div> <div class="handle"></div>
@ -186,7 +185,6 @@ customElements.define('sm-popup', class extends HTMLElement {
this.allowClosing = false; this.allowClosing = false;
this.isOpen = false; this.isOpen = false;
this.pinned = false;
this.offset = 0; this.offset = 0;
this.touchStartY = 0; this.touchStartY = 0;
this.touchEndY = 0; this.touchEndY = 0;
@ -198,7 +196,7 @@ customElements.define('sm-popup', class extends HTMLElement {
this.mutationObserver this.mutationObserver
this.popupContainer = this.shadowRoot.querySelector('.popup-container'); this.popupContainer = this.shadowRoot.querySelector('.popup-container');
this.backdrop = this.shadowRoot.querySelector('.background'); this.backdrop = this.shadowRoot.querySelector('.backdrop');
this.dialogBox = this.shadowRoot.querySelector('.popup'); this.dialogBox = this.shadowRoot.querySelector('.popup');
this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot'); this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot');
this.popupHeader = this.shadowRoot.querySelector('.popup-top'); this.popupHeader = this.shadowRoot.querySelector('.popup-top');
@ -211,6 +209,7 @@ customElements.define('sm-popup', class extends HTMLElement {
this.handleTouchMove = this.handleTouchMove.bind(this); this.handleTouchMove = this.handleTouchMove.bind(this);
this.handleTouchEnd = this.handleTouchEnd.bind(this); this.handleTouchEnd = this.handleTouchEnd.bind(this);
this.detectFocus = this.detectFocus.bind(this); this.detectFocus = this.detectFocus.bind(this);
this.handleSoftDismiss = this.handleSoftDismiss.bind(this);
} }
static get observedAttributes() { static get observedAttributes() {
@ -260,44 +259,47 @@ customElements.define('sm-popup', class extends HTMLElement {
show(options = {}) { show(options = {}) {
const { pinned = false } = options; const { pinned = false } = options;
if (!this.isOpen) { if (this.isOpen) return;
const animOptions = { const animOptions = {
duration: 300, duration: 300,
easing: 'ease' easing: 'ease'
} }
popupStack.push({ popupStack.push({
popup: this, popup: this,
permission: pinned permission: pinned
}); });
if (popupStack.items.length > 1) { if (popupStack.items.length > 1) {
this.animateTo(popupStack.items[popupStack.items.length - 2].popup.shadowRoot.querySelector('.popup'), [ this.animateTo(popupStack.items[popupStack.items.length - 2].popup.shadowRoot.querySelector('.popup'), [
{ transform: 'none' }, { transform: 'none' },
{ transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' }, { transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' },
], animOptions) ], animOptions)
} }
this.popupContainer.classList.remove('hide'); this.popupContainer.classList.remove('hide');
if (!this.offset) if (!this.offset)
this.backdrop.animate([ this.backdrop.animate([
{ opacity: 0 }, { opacity: 0 },
{ opacity: 1 }, { opacity: 1 },
], animOptions) ], animOptions)
this.setStateOpen() this.setStateOpen()
this.dispatchEvent( this.dispatchEvent(
new CustomEvent("popupopened", { new CustomEvent("popupopened", {
bubbles: true, bubbles: true,
detail: { })
popup: this, );
} this.pinned = pinned;
}) this.isOpen = true;
); document.body.style.overflow = 'hidden';
this.pinned = pinned; document.body.style.top = `-${window.scrollY}px`;
this.isOpen = true; const elementToFocus = this.autoFocus || this.focusable[0];
document.body.style.overflow = 'hidden'; if (elementToFocus)
document.body.style.top = `-${window.scrollY}px`;
const elementToFocus = this.autoFocus || this.focusable[0];
elementToFocus.tagName.includes('SM-') ? elementToFocus.focusIn() : elementToFocus.focus(); elementToFocus.tagName.includes('SM-') ? elementToFocus.focusIn() : elementToFocus.focus();
if (!this.hasAttribute('open')) if (!this.hasAttribute('open')) {
this.setAttribute('open', ''); this.setAttribute('open', '');
this.addEventListener('keydown', this.detectFocus);
this.resizeObserver.observe(this);
this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true })
this.popupHeader.addEventListener('touchstart', this.handleTouchStart, { passive: true });
this.backdrop.addEventListener('mousedown', this.handleSoftDismiss);
} }
} }
hide() { hide() {
@ -343,10 +345,14 @@ customElements.define('sm-popup', class extends HTMLElement {
{ transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' }, { transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' },
{ transform: 'none' }, { transform: 'none' },
], animOptions) ], animOptions)
} else { } else {
this.resumeScrolling(); this.resumeScrolling();
} }
this.resizeObserver.disconnect();
this.mutationObserver.disconnect()
this.removeEventListener('keydown', this.detectFocus);
this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
this.backdrop.removeEventListener('mousedown', this.handleSoftDismiss);
} }
handleTouchStart(e) { handleTouchStart(e) {
@ -414,21 +420,29 @@ customElements.define('sm-popup', class extends HTMLElement {
this.autoFocus = this.querySelector('[autofocus]') this.autoFocus = this.querySelector('[autofocus]')
} }
handleSoftDismiss() {
if (this.pinned) {
this.dialogBox.animate([
{ transform: 'translateX(-1rem)' },
{ transform: 'translateX(1rem)' },
{ transform: 'translateX(-0.5rem)' },
{ transform: 'translateX(0.5rem)' },
{ transform: 'translateX(0)' },
], {
duration: 300,
easing: 'ease'
});
} else {
this.hide();
}
}
connectedCallback() { connectedCallback() {
this.popupBodySlot.addEventListener('slotchange', () => { this.popupBodySlot.addEventListener('slotchange', () => {
this.forms = this.querySelectorAll('sm-form'); this.forms = this.querySelectorAll('sm-form');
this.updateFocusableList() this.updateFocusableList()
}); });
this.popupContainer.addEventListener('mousedown', e => { this.resizeObserver = new ResizeObserver(entries => {
if (e.target === this.popupContainer && !this.pinned) {
if (this.pinned) {
this.setStateOpen();
} else
this.hide();
}
});
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) { for (let entry of entries) {
if (entry.contentBoxSize) { if (entry.contentBoxSize) {
// Firefox implements `contentBoxSize` as a single content rect, rather than an array // Firefox implements `contentBoxSize` as a single content rect, rather than an array
@ -439,21 +453,17 @@ customElements.define('sm-popup', class extends HTMLElement {
} }
} }
}); });
resizeObserver.observe(this);
this.mutationObserver = new MutationObserver(entries => { this.mutationObserver = new MutationObserver(entries => {
this.updateFocusableList() this.updateFocusableList()
}) })
this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true })
this.addEventListener('keydown', this.detectFocus);
this.popupHeader.addEventListener('touchstart', this.handleTouchStart, { passive: true });
} }
disconnectedCallback() { disconnectedCallback() {
this.removeEventListener('keydown', this.detectFocus); this.resizeObserver.disconnect();
resizeObserver.unobserve();
this.mutationObserver.disconnect() this.mutationObserver.disconnect()
this.removeEventListener('keydown', this.detectFocus);
this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, { passive: true }); this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
this.backdrop.removeEventListener('mousedown', this.handleSoftDismiss);
} }
attributeChangedCallback(name) { attributeChangedCallback(name) {
if (name === 'open') { if (name === 'open') {

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

104
components/index.html
View File

@ -1205,7 +1205,7 @@
&lt;script&gt; &lt;script&gt;
const mySelect = document.getElementById('my_select') const mySelect = document.getElementById('my_select')
mySelect.addEventListener('change', event =&gt; { mySelect.addEventListener('change', event =&gt; {
console.log(event.detail.value) // logs out value of selected option console.log(event.target.value) // logs out value of selected option
}) })
&lt;/script&gt; &lt;/script&gt;
</code> </code>
@ -1238,7 +1238,7 @@
Whenever a different options is selected by user the this event is Whenever a different options is selected by user the this event is
fired. <br> fired. <br>
You can listen to this event and access the current value with event object <span You can listen to this event and access the current value with event object <span
class="highlight">event.detail.value</span> class="highlight">event.target.value</span>
</p> </p>
</div> </div>
</section> </section>
@ -1332,28 +1332,28 @@
</section> </section>
</section> </section>
<section id="strip_select_page" class="page hide-completely"> <section id="chips_page" class="page hide-completely">
<h1 class="page__title">Strip select</h1> <h1 class="page__title">Chips</h1>
<p> <p>
This is a modern interpritation of classical HTML <span class="highlight">select</span> tag. More This is a modern interpretation of classical HTML <span class="highlight">select</span> tag. More
suitable for touch devices, suitable for touch devices,
</p> </p>
<h2>Interactive demo</h2> <h2>Interactive demo</h2>
<span>Sort by </span> <span>Sort by </span>
<strip-select id="sort_by"> <sm-chips id="sort_by">
<strip-option value="relevance" selected>Relevance</strip-option> <sm-chip value="relevance" selected>Relevance</sm-chip>
<strip-option value="popularity">Popularity</strip-option> <sm-chip value="popularity">Popularity</sm-chip>
<strip-option value="price">Price</strip-option> <sm-chip value="price">Price</sm-chip>
<strip-option value="rating">Rating</strip-option> <sm-chip value="rating">Rating</sm-chip>
</strip-select> </sm-chips>
<pre> <pre>
<code> <code>
&lt;strip-select id="sort_by"&gt; &lt;sm-chips id="sort_by"&gt;
&lt;strip-option value="relevance" selected&gt;Relevance&lt;/strip-option&gt; &lt;sm-chip value="relevance" selected&gt;Relevance&lt;/sm-chip&gt;
&lt;strip-option value="popularity"&gt;Popularity&lt;/strip-option&gt; &lt;sm-chip value="popularity"&gt;Popularity&lt;/sm-chip&gt;
&lt;strip-option value="price"&gt;Price&lt;/strip-option&gt; &lt;sm-chip value="price"&gt;Price&lt;/sm-chip&gt;
&lt;strip-option value="rating"&gt;Rating&lt;/strip-option&gt; &lt;sm-chip value="rating"&gt;Rating&lt;/sm-chip&gt;
&lt;/strip-select&gt; &lt;/sm-chips&gt;
</code> </code>
</pre> </pre>
<h2>Custom attributes</h2> <h2>Custom attributes</h2>
@ -1396,23 +1396,23 @@
Whenever a different options is selected by user the this event is Whenever a different options is selected by user the this event is
fired. <br> fired. <br>
You can listen to this event and access the current value with event object <span You can listen to this event and access the current value with event object <span
class="highlight">event.detail.value</span> class="highlight">event.target.value</span>
</p> </p>
</div> </div>
</section> </section>
<h2>Usage</h2> <h2>Usage</h2>
<pre> <pre>
<code> <code>
&lt;strip-select id="sort_by"&gt; &lt;sm-chips id="sort_by"&gt;
&lt;strip-option value="relevance" selected&gt;Relevance&lt;/strip-option&gt; &lt;sm-chip value="relevance" selected&gt;Relevance&lt;/sm-chip&gt;
&lt;strip-option value="popularity"&gt;Popularity&lt;/strip-option&gt; &lt;sm-chip value="popularity"&gt;Popularity&lt;/sm-chip&gt;
&lt;strip-option value="price"&gt;Price&lt;/strip-option&gt; &lt;sm-chip value="price"&gt;Price&lt;/sm-chip&gt;
&lt;strip-option value="rating"&gt;Rating&lt;/strip-option&gt; &lt;sm-chip value="rating"&gt;Rating&lt;/sm-chip&gt;
&lt;/strip-select&gt; &lt;/sm-chips&gt;
&lt;script&gt; &lt;script&gt;
const sortBy = document.getElementById('sort_by') const sortBy = document.getElementById('sort_by')
sortBy.addEventListener('change', event =&gt; { sortBy.addEventListener('change', event =&gt; {
console.log(event.detail.value) // logs out value of selected option console.log(event.target.value) // logs out value of selected option
}) })
&lt;/script&gt; &lt;/script&gt;
</code> </code>
@ -1760,7 +1760,7 @@
&lt;script&gt; &lt;script&gt;
const nameField = document.getElementById('name_field') const nameField = document.getElementById('name_field')
nameField.addEventListener('change', event =&gt; { nameField.addEventListener('change', event =&gt; {
console.log(event.detail.value) // logs out new value set by user console.log(event.target.value) // logs out new value set by user
console.log(nameField.value) // Accessing value directly with getter console.log(nameField.value) // Accessing value directly with getter
}) })
&lt;/script&gt; &lt;/script&gt;
@ -1914,31 +1914,31 @@
</sm-checkbox> </sm-checkbox>
</template> </template>
<script src="assets/prism.js"></script> <script src="assets/prism.js"></script>
<script src="dist/button.js"></script> <script src="dist/button.min.js"></script>
<script src="dist/carousel.js"></script> <script src="dist/carousel.min.js"></script>
<script src="dist/checkbox.js"></script> <script src="dist/checkbox.min.js"></script>
<script src="dist/copy.js"></script> <script src="dist/chips.min.js"></script>
<script src="dist/file-input.js"></script> <script src="dist/copy.min.js"></script>
<script src="dist/form.js"></script> <script src="dist/file-input.min.js"></script>
<script src="dist/hamburger-menu.js"></script> <script src="dist/form.min.js"></script>
<script src="dist/input.js"></script> <script src="dist/hamburger-menu.min.js"></script>
<script src="dist/menu.js"></script> <script src="dist/input.min.js"></script>
<script src="dist/notifications.js"></script> <script src="dist/menu.min.js"></script>
<script src="dist/popup.js"></script> <script src="dist/notifications.min.js"></script>
<script src="dist/radio.js"></script> <script src="dist/popup.min.js"></script>
<script src="dist/select.js"></script> <script src="dist/radio.min.js"></script>
<script src="dist/spinner.js"></script> <script src="dist/select.min.js"></script>
<script src="dist/strip-select.js"></script> <script src="dist/spinner.min.js"></script>
<script src="dist/switch.js"></script> <script src="dist/switch.min.js"></script>
<script src="dist/tabs.js"></script> <script src="dist/tabs.min.js"></script>
<script src="dist/tags-input.js"></script> <script src="dist/tags-input.min.js"></script>
<script src="dist/text-field.js"></script> <script src="dist/text-field.min.js"></script>
<script src="dist/textarea.js"></script> <script src="dist/textarea.min.js"></script>
<script src="dist/theme-toggle.js"></script> <script src="dist/theme-toggle.min.js"></script>
<script id="default_ui_library"> <script id="default_ui_library">
const domRefs = {}; const domRefs = {};
const appPages = ["overview_page", "quick_start_page", "global_styling_page", "button_page", "carousel_page", "checkbox_page", "copy_page", "file_input_page", "form_page", "hamburger_menu_page", "input_page", "menu_page", "notifications_page", "popup_page", "radio_page", "select_page", "spinner_page", "switch_page", "strip_select_page", "tabs_page", "tags_input_page", "textarea_page", "text_field_page", "theme_toggle_page"] const appPages = ["overview_page", "quick_start_page", "global_styling_page", "button_page", "carousel_page", "checkbox_page", "copy_page", "file_input_page", "form_page", "hamburger_menu_page", "input_page", "menu_page", "notifications_page", "popup_page", "radio_page", "select_page", "spinner_page", "switch_page", "chips_page", "tabs_page", "tags_input_page", "textarea_page", "text_field_page", "theme_toggle_page"]
function getRef(elementId) { function getRef(elementId) {
if (!domRefs.hasOwnProperty(elementId)) { if (!domRefs.hasOwnProperty(elementId)) {
@ -2256,6 +2256,10 @@
name: 'Checkbox', name: 'Checkbox',
pageId: 'checkbox_page' pageId: 'checkbox_page'
}, },
{
name: 'Chips',
pageId: 'chips_page'
},
{ {
name: 'Copy', name: 'Copy',
pageId: 'copy_page' pageId: 'copy_page'
@ -2304,10 +2308,6 @@
name: 'Spinner', name: 'Spinner',
pageId: 'spinner_page' pageId: 'spinner_page'
}, },
{
name: 'Strip select',
pageId: 'strip_select_page'
},
{ {
name: 'Tabs', name: 'Tabs',
pageId: 'tabs_page' pageId: 'tabs_page'

48
components/index.min.html
View File

@ -156,7 +156,7 @@
&lt;script&gt; &lt;script&gt;
const mySelect = document.getElementById('my_select') const mySelect = document.getElementById('my_select')
mySelect.addEventListener('change', event =&gt; { mySelect.addEventListener('change', event =&gt; {
console.log(event.detail.value) // logs out value of selected option console.log(event.target.value) // logs out value of selected option
}) })
&lt;/script&gt; &lt;/script&gt;
</code> </code>
@ -166,7 +166,7 @@
&lt;!-- Options --&gt; &lt;!-- Options --&gt;
&lt;/sm-select&gt; &lt;/sm-select&gt;
</code> </code>
</pre><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.detail.value</span></p></div></section></section><section id="spinner_page" class="page hide-completely"><h1 class="page__title">Spinner</h1><p>Just drop the <span class="highlight">sm-spinner</span> in markup where you want to show the spinner</p><sm-spinner></sm-spinner><pre> </pre><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.target.value</span></p></div></section></section><section id="spinner_page" class="page hide-completely"><h1 class="page__title">Spinner</h1><p>Just drop the <span class="highlight">sm-spinner</span> in markup where you want to show the spinner</p><sm-spinner></sm-spinner><pre>
<code> <code>
&lt;sm-spinner&gt;&lt;/sm-spinner&gt; &lt;sm-spinner&gt;&lt;/sm-spinner&gt;
</code> </code>
@ -186,27 +186,27 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/sm-switch&gt; &lt;/sm-switch&gt;
</code> </code>
</pre><h2>Attributes</h2><p>All the native HTML checkbox attributes are valid</p><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">checked</span> (boolean)</div><p>If present, switch is set to checked state as default.</p></div><div class="tr"><div><span class="highlight">disabled</span> (boolean)</div><p>If present switch is set to disabled state. all the interactions are disabled</p></div><div class="tr"><div><span class="highlight">value</span> (string)</div><p>Sets value of switch which can be accessed by value property with JS</p></div></section></section><section id="strip_select_page" class="page hide-completely"><h1 class="page__title">Strip select</h1><p>This is a modern interpritation of classical HTML <span class="highlight">select</span> tag. More suitable for touch devices,</p><h2>Interactive demo</h2><span>Sort by</span><strip-select id="sort_by"><strip-option value="relevance" selected>Relevance</strip-option><strip-option value="popularity">Popularity</strip-option><strip-option value="price">Price</strip-option><strip-option value="rating">Rating</strip-option></strip-select><pre> </pre><h2>Attributes</h2><p>All the native HTML checkbox attributes are valid</p><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">checked</span> (boolean)</div><p>If present, switch is set to checked state as default.</p></div><div class="tr"><div><span class="highlight">disabled</span> (boolean)</div><p>If present switch is set to disabled state. all the interactions are disabled</p></div><div class="tr"><div><span class="highlight">value</span> (string)</div><p>Sets value of switch which can be accessed by value property with JS</p></div></section></section><section id="chips_page" class="page hide-completely"><h1 class="page__title">Chips</h1><p>This is a modern interpretation of classical HTML <span class="highlight">select</span> tag. More suitable for touch devices,</p><h2>Interactive demo</h2><span>Sort by</span><sm-chips id="sort_by"><sm-chip value="relevance" selected>Relevance</sm-chip><sm-chip value="popularity">Popularity</sm-chip><sm-chip value="price">Price</sm-chip><sm-chip value="rating">Rating</sm-chip></sm-chips><pre>
<code> <code>
&lt;strip-select id="sort_by"&gt; &lt;sm-chips id="sort_by"&gt;
&lt;strip-option value="relevance" selected&gt;Relevance&lt;/strip-option&gt; &lt;sm-chip value="relevance" selected&gt;Relevance&lt;/sm-chip&gt;
&lt;strip-option value="popularity"&gt;Popularity&lt;/strip-option&gt; &lt;sm-chip value="popularity"&gt;Popularity&lt;/sm-chip&gt;
&lt;strip-option value="price"&gt;Price&lt;/strip-option&gt; &lt;sm-chip value="price"&gt;Price&lt;/sm-chip&gt;
&lt;strip-option value="rating"&gt;Rating&lt;/strip-option&gt; &lt;sm-chip value="rating"&gt;Rating&lt;/sm-chip&gt;
&lt;/strip-select&gt; &lt;/sm-chips&gt;
</code> </code>
</pre><h2>Custom attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">multiline</span> ( Boolean )</div><p>If present, options will wrap around instead of overflowing horizontally.</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--gap</span></div><p>Defines space between options. Default is "0.5rem".</p></div></section><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.detail.value</span></p></div></section><h2>Usage</h2><pre> </pre><h2>Custom attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">multiline</span> ( Boolean )</div><p>If present, options will wrap around instead of overflowing horizontally.</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--gap</span></div><p>Defines space between options. Default is "0.5rem".</p></div></section><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.target.value</span></p></div></section><h2>Usage</h2><pre>
<code> <code>
&lt;strip-select id="sort_by"&gt; &lt;sm-chips id="sort_by"&gt;
&lt;strip-option value="relevance" selected&gt;Relevance&lt;/strip-option&gt; &lt;sm-chip value="relevance" selected&gt;Relevance&lt;/sm-chip&gt;
&lt;strip-option value="popularity"&gt;Popularity&lt;/strip-option&gt; &lt;sm-chip value="popularity"&gt;Popularity&lt;/sm-chip&gt;
&lt;strip-option value="price"&gt;Price&lt;/strip-option&gt; &lt;sm-chip value="price"&gt;Price&lt;/sm-chip&gt;
&lt;strip-option value="rating"&gt;Rating&lt;/strip-option&gt; &lt;sm-chip value="rating"&gt;Rating&lt;/sm-chip&gt;
&lt;/strip-select&gt; &lt;/sm-chips&gt;
&lt;script&gt; &lt;script&gt;
const sortBy = document.getElementById('sort_by') const sortBy = document.getElementById('sort_by')
sortBy.addEventListener('change', event =&gt; { sortBy.addEventListener('change', event =&gt; {
console.log(event.detail.value) // logs out value of selected option console.log(event.target.value) // logs out value of selected option
}) })
&lt;/script&gt; &lt;/script&gt;
</code> </code>
@ -281,7 +281,7 @@
&lt;script&gt; &lt;script&gt;
const nameField = document.getElementById('name_field') const nameField = document.getElementById('name_field')
nameField.addEventListener('change', event =&gt; { nameField.addEventListener('change', event =&gt; {
console.log(event.detail.value) // logs out new value set by user console.log(event.target.value) // logs out new value set by user
console.log(nameField.value) // Accessing value directly with getter console.log(nameField.value) // Accessing value directly with getter
}) })
&lt;/script&gt; &lt;/script&gt;
@ -326,8 +326,8 @@
}) })
&lt;/script&gt; &lt;/script&gt;
</code> </code>
</pre></section></article></main><template id="nav_item_template"><li><a class="list__item interact"></a></li></template><template id="comp_checkbox_template"><sm-checkbox><span class="comp-checkbox__title"></span></sm-checkbox></template><script src="assets/prism.js"></script><script src="dist/button.js"></script><script src="dist/carousel.js"></script><script src="dist/checkbox.js"></script><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/spinner.js"></script><script src="dist/strip-select.js"></script><script src="dist/switch.js"></script><script src="dist/tabs.js"></script><script src="dist/tags-input.js"></script><script src="dist/text-field.js"></script><script src="dist/textarea.js"></script><script src="dist/theme-toggle.js"></script><script id="default_ui_library">const domRefs = {}; </pre></section></article></main><template id="nav_item_template"><li><a class="list__item interact"></a></li></template><template id="comp_checkbox_template"><sm-checkbox><span class="comp-checkbox__title"></span></sm-checkbox></template><script src="assets/prism.js"></script><script src="dist/button.min.js"></script><script src="dist/carousel.min.js"></script><script src="dist/checkbox.min.js"></script><script src="dist/chips.min.js"></script><script src="dist/copy.min.js"></script><script src="dist/file-input.min.js"></script><script src="dist/form.min.js"></script><script src="dist/hamburger-menu.min.js"></script><script src="dist/input.min.js"></script><script src="dist/menu.min.js"></script><script src="dist/notifications.min.js"></script><script src="dist/popup.min.js"></script><script src="dist/radio.min.js"></script><script src="dist/select.min.js"></script><script src="dist/spinner.min.js"></script><script src="dist/switch.min.js"></script><script src="dist/tabs.min.js"></script><script src="dist/tags-input.min.js"></script><script src="dist/text-field.min.js"></script><script src="dist/textarea.min.js"></script><script src="dist/theme-toggle.min.js"></script><script id="default_ui_library">const domRefs = {};
const appPages = ["overview_page", "quick_start_page", "global_styling_page", "button_page", "carousel_page", "checkbox_page", "copy_page", "file_input_page", "form_page", "hamburger_menu_page", "input_page", "menu_page", "notifications_page", "popup_page", "radio_page", "select_page", "spinner_page", "switch_page", "strip_select_page", "tabs_page", "tags_input_page", "textarea_page", "text_field_page", "theme_toggle_page"] const appPages = ["overview_page", "quick_start_page", "global_styling_page", "button_page", "carousel_page", "checkbox_page", "copy_page", "file_input_page", "form_page", "hamburger_menu_page", "input_page", "menu_page", "notifications_page", "popup_page", "radio_page", "select_page", "spinner_page", "switch_page", "chips_page", "tabs_page", "tags_input_page", "textarea_page", "text_field_page", "theme_toggle_page"]
function getRef(elementId) { function getRef(elementId) {
if (!domRefs.hasOwnProperty(elementId)) { if (!domRefs.hasOwnProperty(elementId)) {
@ -642,6 +642,10 @@
name: 'Checkbox', name: 'Checkbox',
pageId: 'checkbox_page' pageId: 'checkbox_page'
}, },
{
name: 'Chips',
pageId: 'chips_page'
},
{ {
name: 'Copy', name: 'Copy',
pageId: 'copy_page' pageId: 'copy_page'
@ -690,10 +694,6 @@
name: 'Spinner', name: 'Spinner',
pageId: 'spinner_page' pageId: 'spinner_page'
}, },
{
name: 'Strip select',
pageId: 'strip_select_page'
},
{ {
name: 'Tabs', name: 'Tabs',
pageId: 'tabs_page' pageId: 'tabs_page'

62
components/test.html
View File

@ -19,6 +19,7 @@
<script src="dist/cube-loader.js"></script> <script src="dist/cube-loader.js"></script>
<script src="dist/tags-input.js"></script> <script src="dist/tags-input.js"></script>
<script src="dist/strip-select.js"></script> <script src="dist/strip-select.js"></script>
<script src="dist/collapsed-text.js"></script>
<link rel="stylesheet" href="css/main.min.css"> <link rel="stylesheet" href="css/main.min.css">
<style> <style>
div { div {
@ -33,58 +34,15 @@
</head> </head>
<body> <body>
<div class="flex"> <collapsed-text>
<sm-input placeholder="Country" Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto minima maiores autem iusto porro, odit iure
list="Afghanistan,Albania,Algeria,Andorra,Angola,Anguilla,Antigua Barbuda,Argentina,Armenia,Aruba,Australia,Austria,Azerbaijan,Bahamas,Bahrain,Bangladesh,Barbados,Belarus,Belgium,Belize,Benin,Bermuda,Bhutan,Bolivia,BosniaHerzegovina,Botswana,Brazil,British Virgin Islands,Brunei,Bulgaria,Burkina Faso,Burundi,Cambodia,Cameroon,Cape Verde,Cayman Islands,Chad,Chile,China,Colombia,Congo,Cook Islands,Costa Rica,Cote D Ivoire,Croatia,Cruise Ship,Cuba,Cyprus,Czech Republic,Denmark,Djibouti,Dominica,Dominican Republic,Ecuador,Egypt,El Salvador,Equatorial Guinea,Estonia,Ethiopia,Falkland Islands,Faroe Islands,Fiji,Finland,France,French Polynesia,French West Indies,Gabon,Gambia,Georgia,Germany,Ghana,Gibraltar,Greece,Greenland,Grenada,Guam,Guatemala,Guernsey,Guinea,Guinea Bissau,Guyana,Haiti,Honduras,Hong Kong,Hungary,Iceland,India,Indonesia,Iran,Iraq,Ireland,Isle of Man,Israel,Italy,Jamaica,Japan,Jersey,Jordan,Kazakhstan,Kenya,Kuwait,Kyrgyz Republic,Laos,Latvia,Lebanon,Lesotho,Liberia,Libya,Liechtenstein,Lithuania,Luxembourg,Macau,Macedonia,Madagascar,Malawi,Malaysia,Maldives,Mali,Malta,Mauritania,Mauritius,Mexico,Moldova,Monaco,Mongolia,Montenegro,Montserrat,Morocco,Mozambique,Namibia,Nepal,Netherlands,Netherlands Antilles,New Caledonia,New Zealand,Nicaragua,Niger,Nigeria,Norway,Oman,Pakistan,Palestine,Panama,Papua New Guinea,Paraguay,Peru,Philippines,Poland,Portugal,Puerto Rico,Qatar,Reunion,Romania,Russia,Rwanda,Saint PierreMiquelon,Samoa,San Marino,Satellite,Saudi Arabia,Senegal,Serbia,Seychelles,Sierra Leone,Singapore,Slovakia,Slovenia,South Africa,South Korea,Spain,Sri Lanka,St KittsNevis,St Lucia,St Vincent,St. Lucia,Sudan,Suriname,Swaziland,Sweden,Switzerland,Syria,Taiwan,Tajikistan,Tanzania,Thailand,Timor L'Este,Togo,Tonga,Trinidad Tobago,Tunisia,Turkey,Turkmenistan,Turks Caicos,Uganda,Ukraine,United Arab Emirates,United Kingdom,Uruguay,Uzbekistan,Venezuela,Vietnam,Virgin Islands (US),Yemen,Zambia,Zimbabwe"> ea eveniet enim soluta ex a nihil? Dicta ducimus dolor itaque unde sequi, reprehenderit ex aperiam dignissimos
</sm-input> inventore? Totam aliquid repellendus nulla culpa nemo perspiciatis tempora. Vel obcaecati asperiores nam,
</div> ratione sint itaque temporibus incidunt officiis iusto cumque reiciendis ab repellendus quaerat ducimus
<tags-input placeholder="gwdswererg"></tags-input> quibusdam quia maxime nostrum atque ad sequi eveniet est error ipsam voluptatem. Architecto molestiae ex et
<br> minima praesentium quasi ea, ad enim consequuntur at nisi nostrum. Quisquam nostrum, accusamus neque, fugiat
<br> esse deleniti ex vitae totam asperiores odit quaerat sunt voluptates.
<br> </collapsed-text>
<br>
<br>
<br>
<div class="flex">
<strip-select>
<strip-option value="2">sdfsfd2</strip-option>
<strip-option value="3">3sgd</strip-option>
<strip-option value="1">1sdgsdgsgd</strip-option>
<strip-option value="4">sdggsdgsdg4</strip-option>
<strip-option value="5">5sdgdsgsd</strip-option>
<strip-option value="6">6sggsdsgd</strip-option>
<strip-option value="7">7gsdgsdgsd</strip-option>
<strip-option value="8">8sdgsdgsdg</strip-option>
</strip-select>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="flex">
<sm-select>
<sm-option value="1">1</sm-option>
<sm-option value="2">2</sm-option>
<sm-option value="3">3</sm-option>
<sm-option value="4">4</sm-option>
<sm-option value="5">5</sm-option>
<sm-option value="6">6</sm-option>
<sm-option value="7">7</sm-option>
<sm-option value="8">8</sm-option>
</sm-select>
</div>
<script>
</script>
</body> </body>
</html> </html>