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

bug fixes

Browse Source
This commit is contained in:
sairaj mote 2022-10-24 23:25:26 +05:30
parent 73f1911761
commit 0b0509bb4b
5 changed files with 69 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,20 +9,24 @@ stripSelect.innerHTML = `
} }
:host{ :host{
padding: 1rem 0; padding: 1rem 0;
max-width: 100%;
} }
.hide{ .hide{
display: none !important; opacity: 0;
pointer-events: none;
} }
input[type="radio"]{ input[type="radio"]{
display: none; display: none;
} }
.scrolling-container{ .scrolling-container{
position: relative; position: relative;
display: flex; display: grid;
align-items: center; grid-template-columns: min-content minmax(0,1fr) min-content;
grid-template-rows: 1fr;
} }
.strip-select{ .strip-select{
position: relative; position: relative;
grid-area: 1/1/2/-1;
} }
:host([multiline]) .strip-select{ :host([multiline]) .strip-select{
display: flex; display: flex;
@ -40,32 +44,42 @@ stripSelect.innerHTML = `
} }
.nav-button{ .nav-button{
display: flex; display: flex;
top: 50%;
z-index: 2; z-index: 2;
border: none; border: none;
padding: 0.3rem; padding: 0.3rem;
cursor: pointer; cursor: pointer;
position: absolute;
align-items: center; align-items: center;
background: rgba(var(--background-color,(255,255,255)), 1); background: rgba(var(--background-color,(255,255,255)), 1);
transform: translateY(-50%); transition: opacity 0.2s;
grid-row: 1;
}
.nav-button--left{
grid-column: 1;
justify-self: start;
} }
.nav-button--right{ .nav-button--right{
right: 0; grid-column: 3;
justify-self: end;
} }
.cover{ .cover{
position: absolute;
z-index: 1; z-index: 1;
width: 5rem; width: 5rem;
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
grid-row: 1;
}
.cover--left{
grid-column: 1;
}
.cover--right{
grid-column: 3;
} }
.nav-button--right::before{ .nav-button--right::before{
background-color: red; background-color: red;
} }
.icon{ .icon{
height: 1.5rem; height: 1.2rem;
width: 1.5rem; width: 1.2rem;
fill: rgba(var(--text-color,(17,17,17)), .8); fill: rgba(var(--text-color,(17,17,17)), .8);
} }
@media (hover: none){ @media (hover: none){
@ -165,11 +179,11 @@ customElements.define('strip-select', class extends HTMLElement {
this._value = value; this._value = value;
this.assignedElements.forEach(elem => { this.assignedElements.forEach(elem => {
if (elem.value === value) { if (elem.value === value) {
elem.setAttribute('active', ''); elem.setAttribute('selected', '');
elem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }); elem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
} }
else else
elem.removeAttribute('active') elem.removeAttribute('selected')
}); });
} }
@ -193,34 +207,36 @@ customElements.define('strip-select', class extends HTMLElement {
const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left'); const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left');
const navButtonRight = this.shadowRoot.querySelector('.nav-button--right'); const navButtonRight = this.shadowRoot.querySelector('.nav-button--right');
slot.addEventListener('slotchange', e => { slot.addEventListener('slotchange', e => {
this.assignedElements = slot.assignedElements(); // debounce to wait for all elements to be assigned
this.assignedElements.forEach(elem => { clearTimeout(this.slotChangeTimeout);
if (elem.hasAttribute('selected')) { this.slotChangeTimeout = setTimeout(() => {
elem.setAttribute('active', ''); this.assignedElements = slot.assignedElements();
this._value = elem.value; this.assignedElements.forEach(elem => {
if (elem.hasAttribute('selected')) {
this._value = elem.value;
}
});
if (!this.hasAttribute('multiline')) {
if (this.assignedElements.length > 0) {
firstOptionObserver.observe(this.assignedElements[0]);
lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]);
}
else {
navButtonLeft.classList.add('hide');
navButtonRight.classList.add('hide');
coverLeft.classList.add('hide');
coverRight.classList.add('hide');
firstOptionObserver.disconnect();
lastOptionObserver.disconnect();
}
} }
}); }, 100);
if (!this.hasAttribute('multiline')) {
if (this.assignedElements.length > 0) {
firstOptionObserver.observe(this.assignedElements[0]);
lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]);
}
else {
navButtonLeft.classList.add('hide');
navButtonRight.classList.add('hide');
coverLeft.classList.add('hide');
coverRight.classList.add('hide');
firstOptionObserver.disconnect();
lastOptionObserver.disconnect();
}
}
}); });
const resObs = new ResizeObserver(entries => { const resObs = new ResizeObserver(entries => {
entries.forEach(entry => { entries.forEach(entry => {
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
const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize; const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
this.scrollDistance = contentBoxSize.inlineSize * 0.6; this.scrollDistance = contentBoxSize.inlineSize * 0.6;
} else { } else {
this.scrollDistance = entry.contentRect.width * 0.6; this.scrollDistance = entry.contentRect.width * 0.6;
@ -295,9 +311,9 @@ 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([active]) .strip-option{ :host([selected]) .strip-option{
color: var(--active-option-color, rgba(var(--background-color,white))); color: var(--selected-option-color, rgba(var(--background-color,white)));
background-color: var(--active-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;
@ -305,7 +321,7 @@ stripOption.innerHTML = `
:host(:focus-within) .strip-option{ :host(:focus-within) .strip-option{
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([active])) .strip-option{ :host(:hover:not([selected])) .strip-option{
background-color: rgba(var(--text-color,(17,17,17)), 0.06); background-color: rgba(var(--text-color,(17,17,17)), 0.06);
} }
</style> </style>

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

File diff suppressed because one or more lines are too long

3
components/index.html
View File

@ -2394,10 +2394,11 @@
} }
function downloadJs(componentsArray, options = { minified: true }) { function downloadJs(componentsArray, options = { minified: true }) {
const { minified } = options const { minified } = options
const selectedComponentsList = [...getRef('components_selection_list').querySelectorAll('sm-checkbox[checked]')].map(v => v.value)
const extension = minified ? '.min.js' : '.js' const extension = minified ? '.min.js' : '.js'
const element = createElement('a', { const element = createElement('a', {
attributes: { attributes: {
'href': 'data:application/javascript;charset=utf-8,' + encodeURIComponent(componentsArray.join("\n")), 'href': 'data:application/javascript;charset=utf-8,' + encodeURIComponent(`// Components downloaded: ${selectedComponentsList.join(',')} \n ${componentsArray.join("\n")}`),
'download': `components${extension}`, 'download': `components${extension}`,
'style': 'display:none' 'style': 'display:none'
} }

3
components/index.min.html
View File

@ -780,10 +780,11 @@
} }
function downloadJs(componentsArray, options = { minified: true }) { function downloadJs(componentsArray, options = { minified: true }) {
const { minified } = options const { minified } = options
const selectedComponentsList = [...getRef('components_selection_list').querySelectorAll('sm-checkbox[checked]')].map(v => v.value)
const extension = minified ? '.min.js' : '.js' const extension = minified ? '.min.js' : '.js'
const element = createElement('a', { const element = createElement('a', {
attributes: { attributes: {
'href': 'data:application/javascript;charset=utf-8,' + encodeURIComponent(componentsArray.join("\n")), 'href': 'data:application/javascript;charset=utf-8,' + encodeURIComponent(`// Components downloaded: ${selectedComponentsList.join(',')} \n ${componentsArray.join("\n")}`),
'download': `components${extension}`, 'download': `components${extension}`,
'style': 'display:none' 'style': 'display:none'
} }

21
components/test.html
View File

@ -18,6 +18,7 @@
<script src="dist/menu.js"></script> <script src="dist/menu.js"></script>
<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>
<link rel="stylesheet" href="css/main.min.css"> <link rel="stylesheet" href="css/main.min.css">
<style> <style>
div { div {
@ -45,16 +46,16 @@
<br> <br>
<br> <br>
<div class="flex"> <div class="flex">
<sm-select> <strip-select>
<sm-option value="1">1</sm-option> <strip-option value="2">sdfsfd2</strip-option>
<sm-option value="2">2</sm-option> <strip-option value="3">3sgd</strip-option>
<sm-option value="3">3</sm-option> <strip-option value="1">1sdgsdgsgd</strip-option>
<sm-option value="4">4</sm-option> <strip-option value="4">sdggsdgsdg4</strip-option>
<sm-option value="5">5</sm-option> <strip-option value="5">5sdgdsgsd</strip-option>
<sm-option value="6">6</sm-option> <strip-option value="6">6sggsdsgd</strip-option>
<sm-option value="7">7</sm-option> <strip-option value="7">7gsdgsdgsd</strip-option>
<sm-option value="8">8</sm-option> <strip-option value="8">8sdgsdgsdg</strip-option>
</sm-select> </strip-select>
</div> </div>
<br> <br>
<br> <br>