issue fix
This commit is contained in:
parent
fb9e920c15
commit
feec8b59a7
1
lib/ui/css/dropdown.css
Normal file
1
lib/ui/css/dropdown.css
Normal file
@ -0,0 +1 @@
|
||||
.ui-drop-wrapper{display:inline-block;border:none;border-radius:unset;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;font-size:var(--font-size);font-family:var(--font-family)}.ui-drop-wrapper>.ui-drop-header{background-color:var(--bg-color);display:flex;height:26px;border:1px solid var(--border-color);border-radius:var(--border-radius);transition:border-color .12s ease}.ui-drop-wrapper>.ui-drop-header:focus,.ui-drop-wrapper>.ui-drop-header:focus-visible{outline:none}.ui-drop-wrapper>.ui-drop-header:focus,.ui-drop-wrapper>.ui-drop-header:hover{border-color:var(--focus-border-color)}.ui-drop-wrapper>.ui-drop-header:disabled{border-color:var(--disabled-border-color);color:var(--disabled-color);background-color:var(--disabled-bg-color)}.ui-drop-wrapper>.ui-drop-header>.ui-drop-text{flex:1 1 auto;cursor:pointer;font-size:var(--font-size);padding:0 6px;overflow:hidden;text-overflow:ellipsis;border:none;white-space:nowrap}.ui-drop-wrapper>.ui-drop-header>.ui-drop-text:focus,.ui-drop-wrapper>.ui-drop-header>.ui-drop-text:focus-visible{outline:none}.ui-drop-wrapper>.ui-drop-header>input.ui-drop-text{cursor:initial}.ui-drop-wrapper>.ui-drop-header>input.ui-drop-text::-moz-placeholder{font-size:var(--font-smaller-size);font-style:italic}.ui-drop-wrapper>.ui-drop-header>input.ui-drop-text::placeholder{font-size:var(--font-smaller-size);font-style:italic}.ui-drop-wrapper>.ui-drop-header>.ui-drop-caret{flex:0 0 auto;width:26px;display:flex;justify-content:center;align-items:center;cursor:pointer}.ui-drop-wrapper>.ui-drop-header>.ui-drop-caret::after{display:block;content:"";border-top:4px solid;border-left:4px solid rgba(0,0,0,0);border-right:4px solid rgba(0,0,0,0);height:0;width:0}.ui-drop-wrapper>.ui-drop-header.disabled{border-color:var(--disabled-border-color);background-color:var(--disabled-bg-color);color:var(--disabled-color)}.ui-drop-wrapper>.ui-drop-header.disabled:focus{border-color:var(--disabled-border-color)}.ui-drop-wrapper>.ui-drop-header.disabled>.ui-drop-text,.ui-drop-wrapper>.ui-drop-header.disabled>.ui-drop-caret{cursor:default}.ui-drop-box{position:absolute;visibility:hidden;opacity:0;transform:scaleY(0);transform-origin:top;background-color:var(--bg-color);top:28px;z-index:2;transition:transform 120ms ease,opacity 120ms ease,visibility 120ms ease;min-width:calc(100% + 2px);box-sizing:border-box;box-shadow:0 3px 6px -4px rgba(0,0,0,.12),0 6px 16px 0 rgba(0,0,0,.08),0 9px 28px 8px rgba(0,0,0,.05);left:-1px}.ui-drop-box.slide-up{transform-origin:bottom;top:unset;bottom:28px}.ui-drop-box.active{visibility:visible;opacity:1;transform:scaleY(1)}.ui-drop-box>.ui-drop-search{box-sizing:border-box;height:36px;line-height:36px;padding:0 8px;position:relative;display:flex;align-items:center}.ui-drop-box>.ui-drop-search>input[type=text]{box-sizing:border-box;width:100%;height:26px;padding:0 6px 0 22px;color:var(--color);border:1px solid var(--border-color);border-radius:var(--border-radius);transition:border-color .12s ease}.ui-drop-box>.ui-drop-search>input[type=text]:focus,.ui-drop-box>.ui-drop-search>input[type=text]:focus-visible{outline:none}.ui-drop-box>.ui-drop-search>input[type=text]:focus,.ui-drop-box>.ui-drop-search>input[type=text]:hover{border-color:var(--focus-border-color)}.ui-drop-box>.ui-drop-search>input[type=text]:disabled{border-color:var(--disabled-border-color);color:var(--disabled-color);background-color:var(--disabled-bg-color)}.ui-drop-box>.ui-drop-search>input[type=text]::-moz-placeholder{font-style:italic}.ui-drop-box>.ui-drop-search>input[type=text]::placeholder{font-style:italic}.ui-drop-box>.ui-drop-search>svg{position:absolute;left:14px;width:13px;height:100%;cursor:text}.ui-drop-box>.ui-drop-list{margin:0;padding:0;list-style:none;max-height:210px;overflow-y:auto;font-size:var(--font-size)}.ui-drop-box>.ui-drop-list::-webkit-scrollbar{width:8px;height:8px}.ui-drop-box>.ui-drop-list::-webkit-scrollbar-thumb{background-color:rgba(168,168,168,.9);border-radius:4px}.ui-drop-box>.ui-drop-list.filtered>li:first-child{background-color:var(--hover-bg-color)}.ui-drop-box>.ui-drop-list>li{line-height:30px;height:30px;padding:0 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-drop-box>.ui-drop-list>li:hover,.ui-drop-box>.ui-drop-list>li.selected{background-color:var(--hover-bg-color)}.ui-drop-box>.ui-drop-list>li>.ui-check-wrapper{height:30px;display:flex}
|
||||
@ -84,106 +84,106 @@ $listMaxHeight: 210px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.ui-drop-box {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
background-color: var(--bg-color);
|
||||
top: calc($headerHeight + 2px);
|
||||
z-index: 2;
|
||||
transition: transform 120ms ease, opacity 120ms ease, visibility 120ms ease;
|
||||
width: calc(100% + 2px);
|
||||
.ui-drop-box {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top;
|
||||
background-color: var(--bg-color);
|
||||
top: calc($headerHeight + 2px);
|
||||
z-index: 2;
|
||||
transition: transform 120ms ease, opacity 120ms ease, visibility 120ms ease;
|
||||
min-width: calc(100% + 2px);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
|
||||
left: -1px;
|
||||
|
||||
&.slide-up {
|
||||
/*border-top-width: 1px;
|
||||
border-bottom-width: 0;*/
|
||||
transform-origin: bottom;
|
||||
top: unset;
|
||||
bottom: calc($headerHeight + 2px);
|
||||
}
|
||||
|
||||
&.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
>.ui-drop-search {
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
|
||||
left: -1px;
|
||||
height: $searchBarHeight;
|
||||
line-height: $searchBarHeight;
|
||||
padding: 0 8px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.slide-up {
|
||||
/*border-top-width: 1px;
|
||||
border-bottom-width: 0;*/
|
||||
transform-origin: bottom;
|
||||
top: unset;
|
||||
bottom: calc($headerHeight + 2px);
|
||||
}
|
||||
|
||||
&.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
>.ui-drop-search {
|
||||
>input[type="text"] {
|
||||
box-sizing: border-box;
|
||||
height: $searchBarHeight;
|
||||
line-height: $searchBarHeight;
|
||||
padding: 0 8px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: $searchInputHeight;
|
||||
padding: 0 6px 0 22px;
|
||||
color: var(--color);
|
||||
|
||||
>input[type="text"] {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: $searchInputHeight;
|
||||
padding: 0 6px 0 22px;
|
||||
color: var(--color);
|
||||
@include outborder();
|
||||
|
||||
@include outborder();
|
||||
// &:focus {
|
||||
// box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
|
||||
// }
|
||||
|
||||
// &:focus {
|
||||
// box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
|
||||
// }
|
||||
|
||||
&::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
>svg {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
width: $searchIconSize;
|
||||
height: 100%;
|
||||
cursor: text;
|
||||
&::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
>.ui-drop-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
max-height: $listMaxHeight;
|
||||
overflow-y: auto;
|
||||
font-size: var(--font-size);
|
||||
@include scrollbar();
|
||||
>svg {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
width: $searchIconSize;
|
||||
height: 100%;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
|
||||
&.filtered>li:first-child {
|
||||
>.ui-drop-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
max-height: $listMaxHeight;
|
||||
overflow-y: auto;
|
||||
font-size: var(--font-size);
|
||||
@include scrollbar();
|
||||
|
||||
&.filtered>li:first-child {
|
||||
background-color: var(--hover-bg-color);
|
||||
}
|
||||
|
||||
>li {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
line-height: $dropItemHeight;
|
||||
height: $dropItemHeight;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
background-color: var(--hover-bg-color);
|
||||
}
|
||||
|
||||
>li {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
line-height: $dropItemHeight;
|
||||
>.ui-check-wrapper {
|
||||
height: $dropItemHeight;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
background-color: var(--hover-bg-color);
|
||||
}
|
||||
|
||||
>.ui-check-wrapper {
|
||||
height: $dropItemHeight;
|
||||
display: flex;
|
||||
}
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -175,7 +175,7 @@
|
||||
right: calc(0px - var(--split-width) /2);
|
||||
width: var(--split-width);
|
||||
cursor: ew-resize;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
@ -333,20 +333,12 @@
|
||||
>.ui-drop-header {
|
||||
border: none;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
|
||||
>.ui-drop-text {
|
||||
padding: var(--spacing-cell);
|
||||
}
|
||||
}
|
||||
|
||||
>.ui-drop-box {
|
||||
top: calc(var(--row-height) + 2px);
|
||||
|
||||
&.slide-up {
|
||||
top: unset;
|
||||
bottom: calc(var(--row-height) + 2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col-icon {
|
||||
@ -378,28 +370,29 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-grid-hover-holder {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
line-height: var(--line-height);
|
||||
padding: var(--spacing-cell);
|
||||
background-color: var(--cell-hover-bg-color);
|
||||
white-space: pre;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0s linear .12s, opacity .12s ease;
|
||||
|
||||
&.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-grid-hover-holder {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
line-height: var(--line-height);
|
||||
padding: var(--spacing-cell);
|
||||
background-color: var(--cell-hover-bg-color);
|
||||
white-space: pre;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0s linear .12s, opacity .12s ease;
|
||||
z-index: 3;
|
||||
|
||||
&.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.ui-grid-loading {
|
||||
position: absolute;
|
||||
@ -411,7 +404,7 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
z-index: 3;
|
||||
|
||||
>div {
|
||||
background-color: var(--loading-fore-color);
|
||||
@ -426,6 +419,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
>.ui-drop-box {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
>.filter-panel {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
|
||||
@ -8,7 +8,6 @@ import { createCheckbox } from "./checkbox";
|
||||
import { createIcon } from "./icon"
|
||||
|
||||
const SymbolDropdown = Symbol.for('ui-dropdown');
|
||||
const DropdownTitleHeight = 26;
|
||||
const DropdownItemHeight = 30;
|
||||
|
||||
let dropdownGlobal = global[SymbolDropdown];
|
||||
@ -21,7 +20,7 @@ if (dropdownGlobal == null) {
|
||||
configurable: false,
|
||||
enumerable: false,
|
||||
value: function () {
|
||||
const panel = document.querySelector('.ui-drop-wrapper .ui-drop-box.active');
|
||||
const panel = document.querySelector('.ui-drop-box.active');
|
||||
if (panel == null) {
|
||||
return;
|
||||
}
|
||||
@ -101,11 +100,11 @@ export class Dropdown {
|
||||
onexpanded;
|
||||
|
||||
constructor(options = {}) {
|
||||
options.searchplaceholder ??= r('searchHolder', 'Search...');
|
||||
options.textkey ??= 'text';
|
||||
options.valuekey ??= 'value';
|
||||
options.htmlkey ??= 'html';
|
||||
options.maxlength ??= 500;
|
||||
options.searchPlaceholder ??= r('searchHolder', 'Search...');
|
||||
options.textKey ??= 'text';
|
||||
options.valueKey ??= 'value';
|
||||
options.htmlKey ??= 'html';
|
||||
options.maxLength ??= 500;
|
||||
this._var.options = options;
|
||||
}
|
||||
|
||||
@ -132,7 +131,7 @@ export class Dropdown {
|
||||
if (up || down) {
|
||||
const source = this.source;
|
||||
const count = source.length;
|
||||
const valuekey = this._var.options.valuekey;
|
||||
const valuekey = this._var.options.valueKey;
|
||||
let index = source?.indexOf(this._var.selected);
|
||||
if (isNaN(index) || index < -1) {
|
||||
index = -1;
|
||||
@ -183,11 +182,11 @@ export class Dropdown {
|
||||
label = createElement('input', 'ui-drop-text');
|
||||
label.setAttribute('type', 'text');
|
||||
options.placeholder && label.setAttribute('placeholder', options.placeholder);
|
||||
isPositive(options.maxlength) && label.setAttribute('maxlength', options.maxlength);
|
||||
isPositive(options.maxLength) && label.setAttribute('maxlength', options.maxLength);
|
||||
isPositive(options.tabIndex) && label.setAttribute('tabindex', options.tabIndex);
|
||||
label.addEventListener('input', e => {
|
||||
const key = e.target.value.toLowerCase();
|
||||
const source = filterSource(options.searchkeys, options.textkey, key, this.source);
|
||||
const source = filterSource(options.searchKeys, options.textKey, key, this.source);
|
||||
this._filllist(source);
|
||||
this._var.container.classList.add('active');
|
||||
});
|
||||
@ -198,9 +197,9 @@ export class Dropdown {
|
||||
label = createElement('label', 'ui-drop-text');
|
||||
}
|
||||
this._var.label = label;
|
||||
if (options.multiselect) {
|
||||
if (Array.isArray(options.selectedlist)) {
|
||||
this.selectlist(options.selectedlist, true);
|
||||
if (options.multiSelect) {
|
||||
if (Array.isArray(options.selectedList)) {
|
||||
this.selectlist(options.selectedList, true);
|
||||
} else {
|
||||
this._var.allChecked = true;
|
||||
label.innerText = r('allItem', '( All )');
|
||||
@ -215,7 +214,7 @@ export class Dropdown {
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
get multiselect() { return this._var.options.multiselect }
|
||||
get multiselect() { return this._var.options.multiSelect }
|
||||
|
||||
get disabled() { return this._var.wrapper == null || this._var.wrapper.querySelector('.ui-drop-header.disabled') != null }
|
||||
|
||||
@ -263,9 +262,9 @@ export class Dropdown {
|
||||
return false;
|
||||
}
|
||||
this._var.lastSelected = selected;
|
||||
const valuekey = this._var.options.valuekey;
|
||||
const textkey = this._var.options.textkey;
|
||||
const htmlkey = this._var.options.htmlkey;
|
||||
const valuekey = this._var.options.valueKey;
|
||||
const textkey = this._var.options.textKey;
|
||||
const htmlkey = this._var.options.htmlKey;
|
||||
let item = this.source.find(it => it[valuekey] === selected);
|
||||
if (this._var.options.input) {
|
||||
if (item == null) {
|
||||
@ -308,9 +307,9 @@ export class Dropdown {
|
||||
|
||||
selectlist(selectedlist, silence) {
|
||||
const source = this.source;
|
||||
const valuekey = this._var.options.valuekey;
|
||||
const textkey = this._var.options.textkey;
|
||||
const htmlkey = this._var.options.htmlkey;
|
||||
const valuekey = this._var.options.valueKey;
|
||||
const textkey = this._var.options.textKey;
|
||||
const htmlkey = this._var.options.htmlKey;
|
||||
const itemlist = selectedlist.map(v => {
|
||||
let item = source.find(it => it[valuekey] === v);
|
||||
if (item == null) {
|
||||
@ -343,10 +342,10 @@ export class Dropdown {
|
||||
const input = createElement('input');
|
||||
input.setAttribute('type', 'text');
|
||||
isPositive(options.tabIndex) && input.setAttribute('tabindex', options.tabIndex);
|
||||
!nullOrEmpty(options.searchplaceholder) && input.setAttribute('placeholder', options.searchplaceholder);
|
||||
!nullOrEmpty(options.searchPlaceholder) && input.setAttribute('placeholder', options.searchPlaceholder);
|
||||
input.addEventListener('input', e => {
|
||||
const key = e.target.value.toLowerCase();
|
||||
const source = filterSource(options.searchkeys, options.textkey, key, this.source);
|
||||
const source = filterSource(options.searchKeys, options.textKey, key, this.source);
|
||||
this._filllist(source);
|
||||
})
|
||||
search.append(input, createIcon('fa-light', 'search'));
|
||||
@ -371,8 +370,8 @@ export class Dropdown {
|
||||
}
|
||||
panel.appendChild(list);
|
||||
this._var.container = panel;
|
||||
if (options.holder instanceof HTMLElement) {
|
||||
options.holder.appendChild(panel);
|
||||
if (options.wrapper instanceof HTMLElement) {
|
||||
options.wrapper.appendChild(panel);
|
||||
} else {
|
||||
this._var.wrapper.appendChild(panel);
|
||||
}
|
||||
@ -382,19 +381,43 @@ export class Dropdown {
|
||||
if (!options.input && options.search) {
|
||||
const search = panel.querySelector('.ui-drop-search > input');
|
||||
if (!nullOrEmpty(search?.value)) {
|
||||
source = filterSource(options.searchkeys, options.textkey, search.value, source);
|
||||
source = filterSource(options.searchKeys, options.textKey, search.value, source);
|
||||
}
|
||||
}
|
||||
this._filllist(source);
|
||||
// slide direction
|
||||
if (!options.slidefixed) {
|
||||
let parent = options.parent ?? document.body;
|
||||
if (!options.slideFixed) {
|
||||
const parent = options.wrapper ?? document.body;
|
||||
let p = this._var.wrapper;
|
||||
let top = p.offsetTop;
|
||||
while ((p = p.parentElement) != null && p !== parent) {
|
||||
top -= p.scrollTop;
|
||||
panel.style.minWidth = `${p.offsetWidth}px`;
|
||||
const headerHeight = p.offsetHeight;
|
||||
let top = p.offsetTop + headerHeight;
|
||||
let left = p.offsetLeft;
|
||||
if (p !== parent) {
|
||||
while ((p = p.parentElement) != null && p !== parent) {
|
||||
top -= p.scrollTop;
|
||||
left -= p.scrollLeft;
|
||||
}
|
||||
}
|
||||
if (top - parent.offsetTop + DropdownTitleHeight + panel.offsetHeight >= parent.offsetHeight) {
|
||||
p = this._var.wrapper;
|
||||
if (p !== parent) {
|
||||
while ((p = p.offsetParent) != null && p !== parent) {
|
||||
top += p.offsetTop;
|
||||
left += p.offsetLeft;
|
||||
}
|
||||
}
|
||||
const slideUp = top - parent.scrollTop + panel.offsetHeight >= parent.offsetHeight;
|
||||
if (options.wrapper instanceof HTMLElement) {
|
||||
if (slideUp) {
|
||||
panel.style.top = '';
|
||||
panel.style.bottom = `${parent.offsetHeight - top + headerHeight - 4}px`;
|
||||
} else {
|
||||
panel.style.top = `${top}px`;
|
||||
panel.style.bottom = '';
|
||||
}
|
||||
panel.style.left = `${left}px`;
|
||||
}
|
||||
if (slideUp) {
|
||||
panel.classList.add('slide-up');
|
||||
} else {
|
||||
panel.classList.remove('slide-up');
|
||||
@ -424,9 +447,9 @@ export class Dropdown {
|
||||
);
|
||||
}
|
||||
// TODO: virtual mode
|
||||
const valuekey = this._var.options.valuekey;
|
||||
const textkey = this._var.options.textkey;
|
||||
const htmlkey = this._var.options.htmlkey;
|
||||
const valuekey = this._var.options.valueKey;
|
||||
const textkey = this._var.options.textKey;
|
||||
const htmlkey = this._var.options.htmlKey;
|
||||
const selected = this.selected;
|
||||
const selectedlist = this.selectedlist;
|
||||
let scrolled;
|
||||
@ -476,9 +499,9 @@ export class Dropdown {
|
||||
|
||||
_triggerselect(checkbox) {
|
||||
let list;
|
||||
const valuekey = this._var.options.valuekey;
|
||||
const textkey = this._var.options.textkey;
|
||||
const htmlkey = this._var.options.htmlkey;
|
||||
const valuekey = this._var.options.valueKey;
|
||||
const textkey = this._var.options.textKey;
|
||||
const htmlkey = this._var.options.htmlKey;
|
||||
if (checkbox.getAttribute('isall') === '1') {
|
||||
const allchecked = this._var.allChecked = checkbox.checked;
|
||||
const boxes = this._var.container.querySelectorAll('input.dataitem');
|
||||
|
||||
@ -32,7 +32,7 @@ export class GridColumn {
|
||||
export class GridInputColumn extends GridColumn {
|
||||
static get editing() { return true };
|
||||
|
||||
static createEdit(trigger, col, _parent, vals) {
|
||||
static createEdit(trigger, col, _wrapper, vals) {
|
||||
const input = createElement('input');
|
||||
input.setAttribute('type', 'text');
|
||||
if (typeof trigger === 'function') {
|
||||
@ -61,13 +61,13 @@ export class GridInputColumn extends GridColumn {
|
||||
static getValue(e) { return e.target.value }
|
||||
|
||||
static setEnabled(element, enabled) {
|
||||
super.setEnabled(element , enabled);
|
||||
super.setEnabled(element, enabled);
|
||||
element.disabled = enabled === false;
|
||||
}
|
||||
}
|
||||
|
||||
export class GridTextColumn extends GridInputColumn {
|
||||
static createEdit(trigger, col, _parent, vals) {
|
||||
static createEdit(trigger, col, _wrapper, vals) {
|
||||
const input = createElement('textarea');
|
||||
if (typeof trigger === 'function') {
|
||||
input.addEventListener('change', trigger);
|
||||
@ -101,13 +101,15 @@ export class GridTextColumn extends GridInputColumn {
|
||||
const SymbolDropdown = Symbol.for('ui-dropdown');
|
||||
|
||||
export class GridDropdownColumn extends GridColumn {
|
||||
static createEdit(trigger, col, parent) {
|
||||
static createEdit(trigger, col, wrapper, it) {
|
||||
const drop = new Dropdown({
|
||||
...col.dropOptions,
|
||||
parent,
|
||||
holder: parent
|
||||
wrapper
|
||||
});
|
||||
drop.onselected = trigger;
|
||||
if (typeof col.dropExpanded === 'function') {
|
||||
drop.onexpanded = col.dropExpanded.bind(col, it.values, drop);
|
||||
}
|
||||
return drop.create();
|
||||
}
|
||||
|
||||
@ -125,9 +127,23 @@ export class GridDropdownColumn extends GridColumn {
|
||||
}
|
||||
|
||||
static _getSource(item, col) {
|
||||
let source = col.source;
|
||||
let source;
|
||||
if (col.sourceCache !== false) {
|
||||
source = item.source?.[col.key];
|
||||
if (source != null) {
|
||||
return source;
|
||||
}
|
||||
}
|
||||
source = col.source;
|
||||
if (typeof source === 'function') {
|
||||
source = source(item);
|
||||
source = source(item.values);
|
||||
}
|
||||
if (col.sourceCache !== false) {
|
||||
if (item.source == null) {
|
||||
item.source = { [col.key]: source };
|
||||
} else {
|
||||
item.source[col.key] = source;
|
||||
}
|
||||
}
|
||||
return source;
|
||||
}
|
||||
@ -169,12 +185,12 @@ export class GridDropdownColumn extends GridColumn {
|
||||
drop.select(val, true);
|
||||
}
|
||||
|
||||
static getValue(e) {
|
||||
return e.value;
|
||||
static getValue(e, col) {
|
||||
return e[col.dropOptions?.valueKey ?? 'value'];
|
||||
}
|
||||
|
||||
static setEnabled(element, enabled) {
|
||||
super.setEnabled(element , enabled);
|
||||
super.setEnabled(element, enabled);
|
||||
const drop = this._getDrop(element);
|
||||
if (drop == null) {
|
||||
return;
|
||||
@ -198,7 +214,7 @@ export class GridCheckboxColumn extends GridColumn {
|
||||
static getValue(e) { return e.target.checked }
|
||||
|
||||
static setEnabled(element, enabled) {
|
||||
super.setEnabled(element , enabled);
|
||||
super.setEnabled(element, enabled);
|
||||
element.querySelector('input').disabled = enabled === false;
|
||||
}
|
||||
}
|
||||
@ -206,10 +222,10 @@ export class GridCheckboxColumn extends GridColumn {
|
||||
export class GridIconColumn extends GridColumn {
|
||||
static create() { return createElement('span', 'col-icon') }
|
||||
|
||||
static setValue(element, val, item, col, grid) {
|
||||
static setValue(element, val, item, col, _grid) {
|
||||
let className = col.className;
|
||||
if (typeof className === 'function') {
|
||||
className = className.call(col, item);
|
||||
className = className.call(col, item.values);
|
||||
}
|
||||
if (className == null) {
|
||||
element.className = 'col-icon';
|
||||
@ -218,7 +234,7 @@ export class GridIconColumn extends GridColumn {
|
||||
}
|
||||
let type = col.iconType;
|
||||
if (typeof type === 'function') {
|
||||
type = type.call(col, item);
|
||||
type = type.call(col, item.values);
|
||||
}
|
||||
type ??= 'fa-regular';
|
||||
if (element.dataset.type !== type || element.dataset.icon !== val) {
|
||||
@ -232,7 +248,7 @@ export class GridIconColumn extends GridColumn {
|
||||
}
|
||||
|
||||
static setEnabled(element, enabled) {
|
||||
super.setEnabled(element , enabled);
|
||||
super.setEnabled(element, enabled);
|
||||
if (enabled === false) {
|
||||
element.classList.add('disabled');
|
||||
} else {
|
||||
|
||||
@ -141,6 +141,15 @@ export class Grid {
|
||||
this._refreshSource(list);
|
||||
}
|
||||
|
||||
setItem(index, item) {
|
||||
if (this._var.source == null) {
|
||||
return;
|
||||
}
|
||||
const it = this._var.source[index];
|
||||
delete it.source;
|
||||
it.values = item;
|
||||
}
|
||||
|
||||
_refreshSource(list) {
|
||||
list ??= this._var.source;
|
||||
if (this._var.colAttrs.__filtered === true) {
|
||||
@ -181,7 +190,8 @@ export class Grid {
|
||||
}
|
||||
|
||||
get tableRows() {
|
||||
return [...this._var.refs.body.children]; //.filter(r => r.classList.contains('ui-grid-row'));
|
||||
// return [...this._var.refs.body.children];
|
||||
return Array.prototype.slice.call(this._var.refs.body.children);
|
||||
}
|
||||
|
||||
get selectedIndexes() { return this._var.selectedIndexes }
|
||||
@ -220,12 +230,12 @@ export class Grid {
|
||||
}
|
||||
}
|
||||
|
||||
get scrollTop() { return this._var.refs.el?.scrollTop; }
|
||||
get scrollTop() { return this._var.el?.scrollTop; }
|
||||
set scrollTop(top) {
|
||||
if (this._var.refs.el == null) {
|
||||
if (this._var.el == null) {
|
||||
return;
|
||||
}
|
||||
this._var.refs.el.scrollTop = top;
|
||||
this._var.el.scrollTop = top;
|
||||
this.reload();
|
||||
}
|
||||
|
||||
@ -280,8 +290,24 @@ export class Grid {
|
||||
const table = createElement('table', 'ui-grid-table');
|
||||
this._var.refs.table = table;
|
||||
this._createHeader(table);
|
||||
this._createBody(table);
|
||||
const body = this._createBody(table);
|
||||
wrapper.appendChild(table);
|
||||
// holder
|
||||
if (!this.holderDisabled) {
|
||||
const holder = createElement('div', 'ui-grid-hover-holder');
|
||||
holder.addEventListener('mousedown', e => {
|
||||
const holder = e.currentTarget;
|
||||
const row = Number(holder.dataset.row);
|
||||
const col = Number(holder.dataset.col);
|
||||
if (holder.classList.contains('active')) {
|
||||
holder.classList.remove('active');
|
||||
}
|
||||
return this._onRowClicked(e, row, col);
|
||||
});
|
||||
holder.addEventListener('dblclick', e => this._onRowDblClicked(e));
|
||||
wrapper.appendChild(holder);
|
||||
body.addEventListener('mousemove', e => throttle(this._onBodyMouseMove, HoverInternal, this, e, holder), { passive: true });
|
||||
}
|
||||
|
||||
// loading
|
||||
const loading = createElement('div', 'ui-grid-loading',
|
||||
@ -303,7 +329,7 @@ export class Grid {
|
||||
|
||||
scrollToIndex(index) {
|
||||
const top = this._scrollToTop(index * (this.rowHeight + 1), true);
|
||||
this._var.refs.el.scrollTop = top;
|
||||
this._var.el.scrollTop = top;
|
||||
}
|
||||
|
||||
resize(force) {
|
||||
@ -311,12 +337,6 @@ export class Grid {
|
||||
return;
|
||||
}
|
||||
const body = this._var.refs.body;
|
||||
// let height = this._var.refs.header.offsetHeight + 2;
|
||||
// let top = body.offsetTop;
|
||||
// if (top !== height) {
|
||||
// body.style.top = `${height}px`;
|
||||
// top = height;
|
||||
// }
|
||||
const top = this.headerVisible === false ? 0 : this._var.refs.header.offsetHeight;
|
||||
|
||||
let height = this.height;
|
||||
@ -572,15 +592,6 @@ export class Grid {
|
||||
width += col.width + 1;
|
||||
}
|
||||
}
|
||||
// // body container
|
||||
// const bodyContainer = createElement('div');
|
||||
// bodyContainer.style.position = 'relative';
|
||||
// bodyContainer.style.minWidth = '100%';
|
||||
// bodyContainer.style.minHeight = '1px';
|
||||
// if (width > 0) {
|
||||
// bodyContainer.style.width = `${width}px`;
|
||||
// }
|
||||
// body.appendChild(bodyContainer);
|
||||
if (width > 0) {
|
||||
table.style.width = `${width}px`;
|
||||
}
|
||||
@ -596,24 +607,7 @@ export class Grid {
|
||||
});
|
||||
body.addEventListener('dblclick', e => this._onRowDblClicked(e));
|
||||
// this._adjustRows();
|
||||
// events
|
||||
// if (!this.holderDisabled) {
|
||||
// const holder = createElement('div', 'ui-grid-hover-holder');
|
||||
// holder.addEventListener('mousedown', e => {
|
||||
// const holder = e.currentTarget;
|
||||
// const row = Number(holder.dataset.row);
|
||||
// const col = Number(holder.dataset.col);
|
||||
// if (holder.classList.contains('active')) {
|
||||
// holder.classList.remove('active');
|
||||
// }
|
||||
// return this._onRowClicked(e, row + this._var.startIndex, col);
|
||||
// });
|
||||
// holder.addEventListener('dblclick', e => this._onRowDblClicked(e));
|
||||
// bodyContainer.appendChild(holder);
|
||||
// body.addEventListener('mousemove', e => throttle(this._onBodyMouseMove, HoverInternal, this, e, holder), { passive: true });
|
||||
// }
|
||||
this._var.refs.body = body;
|
||||
// this._var.refs.bodyContainer = bodyContainer;
|
||||
|
||||
// this.refresh();
|
||||
return body;
|
||||
@ -631,8 +625,6 @@ export class Grid {
|
||||
if (count > 0) {
|
||||
for (let i = 0; i < count; i += 1) {
|
||||
const row = createElement('tr', 'ui-grid-row');
|
||||
// row.addEventListener('mousedown', e => this._onRowClicked(e, exists + i));
|
||||
// row.addEventListener('dblclick', e => this._onRowDblClicked(e));
|
||||
let left = 0;
|
||||
cols.forEach((col, j) => {
|
||||
const cell = createElement('td');
|
||||
@ -669,7 +661,7 @@ export class Grid {
|
||||
type ??= GridColumn;
|
||||
this._var.colTypes[col.key] = type;
|
||||
}
|
||||
cell.appendChild(type.create(col, e => this._onRowChanged(e, this._var.startIndex + i, col, type.getValue(e), cell), this._var.refs.body));
|
||||
cell.appendChild(type.create(col, e => this._onRowChanged(e, this._var.startIndex + i, col, type.getValue(e, col), cell), this._var.el));
|
||||
}
|
||||
} else {
|
||||
cell.style.display = 'none';
|
||||
@ -682,7 +674,7 @@ export class Grid {
|
||||
} else if (count < 0) {
|
||||
for (let i = -1; i >= count; i -= 1) {
|
||||
// content.removeChild(content.children[exists + i]);
|
||||
content.children[exists + i + 1].remove();
|
||||
content.children[exists + i].remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -706,21 +698,25 @@ export class Grid {
|
||||
row.classList.remove('selected');
|
||||
}
|
||||
// data
|
||||
const selectChanged = vals.__selected ^ selected;
|
||||
if (selected) {
|
||||
vals.__selected = true;
|
||||
} else {
|
||||
delete vals.__selected;
|
||||
}
|
||||
// const selectChanged = vals.__selected ^ selected;
|
||||
// if (selected) {
|
||||
// vals.__selected = true;
|
||||
// } else {
|
||||
// delete vals.__selected;
|
||||
// }
|
||||
cols.forEach((col, j) => {
|
||||
if (col.visible === false) {
|
||||
return;
|
||||
}
|
||||
const cell = row.children[j];
|
||||
if (cell == null) {
|
||||
return;
|
||||
}
|
||||
let val;
|
||||
if (col.text != null) {
|
||||
val = col.text;
|
||||
} else if (typeof col.filter === 'function') {
|
||||
val = col.filter(item, this._var.refs.body);
|
||||
val = col.filter(item, selected, this._var.refs.body);
|
||||
} else {
|
||||
val = item[col.key];
|
||||
if (val?.displayValue != null) {
|
||||
@ -729,7 +725,6 @@ export class Grid {
|
||||
}
|
||||
val ??= '';
|
||||
// fill
|
||||
const cell = row.children[j];
|
||||
if (typeof col.bgFilter === 'function') {
|
||||
const bgColor = col.bgFilter(item);
|
||||
cell.style.backgroundColor = bgColor ?? '';
|
||||
@ -737,13 +732,13 @@ export class Grid {
|
||||
const isCheckbox = Grid.ColumnTypes.isCheckbox(col.type);
|
||||
const type = isCheckbox ? GridCheckboxColumn : this._var.colTypes[col.key] ?? GridColumn;
|
||||
let element;
|
||||
if (!isCheckbox && selectChanged && typeof type.createEdit === 'function') {
|
||||
if (!isCheckbox && typeof type.createEdit === 'function') {
|
||||
if (vals.__editing?.[col.key] && type.editing) {
|
||||
val = type.getValue({ target: cell.children[0] });
|
||||
val = type.getValue({ target: cell.children[0] }, col);
|
||||
this._onRowChanged(null, startIndex + i, col, val, cell, true);
|
||||
}
|
||||
element = selected ?
|
||||
type.createEdit(e => this._onRowChanged(e, startIndex + i, col, type.getValue(e), cell), col, this._var.refs.body, vals) :
|
||||
type.createEdit(e => this._onRowChanged(e, startIndex + i, col, type.getValue(e, col), cell), col, this._var.el, vals) :
|
||||
type.create(col);
|
||||
cell.replaceChildren(element);
|
||||
} else {
|
||||
@ -760,7 +755,7 @@ export class Grid {
|
||||
enabled = item[enabled];
|
||||
}
|
||||
}
|
||||
type.setValue(element, val, item, col, this);
|
||||
type.setValue(element, val, vals, col, this);
|
||||
let tip = col.tooltip;
|
||||
if (typeof tip === 'function') {
|
||||
tip = tip.call(col, item);
|
||||
@ -854,10 +849,6 @@ export class Grid {
|
||||
}
|
||||
}
|
||||
}
|
||||
// } else {
|
||||
// width = this._var.refs.bodyContainer.offsetWidth - oldwidth + width;
|
||||
// this._var.refs.bodyContainer.style.width = `${width}px`;
|
||||
// }
|
||||
}
|
||||
|
||||
_changingColumnOrder(index, offset, x, offsetLeft) {
|
||||
@ -1017,7 +1008,7 @@ export class Grid {
|
||||
_getItemValue(item, key, filter) {
|
||||
let value;
|
||||
if (typeof filter === 'function') {
|
||||
value = filter(item, this._var.refs.body);
|
||||
value = filter(item, false, this._var.refs.body);
|
||||
} else {
|
||||
value = item[key];
|
||||
}
|
||||
@ -1480,7 +1471,7 @@ export class Grid {
|
||||
holder.dataset.row = row;
|
||||
holder.dataset.col = col;
|
||||
holder.innerText = element.innerText;
|
||||
const top = this._var.refs.body.offsetTop + target.offsetTop;
|
||||
const top = target.offsetTop + this._var.refs.table.offsetTop;
|
||||
let left = target.offsetLeft;
|
||||
let width = holder.offsetWidth;
|
||||
if (width > this._var.bodyClientWidth) {
|
||||
@ -1587,6 +1578,7 @@ export class Grid {
|
||||
return;
|
||||
}
|
||||
const row = this._var.currentSource[this._var.startIndex + index];
|
||||
delete row.source;
|
||||
const item = row.values;
|
||||
if (item == null) {
|
||||
return;
|
||||
@ -1598,7 +1590,12 @@ export class Grid {
|
||||
enabled = item[enabled];
|
||||
}
|
||||
if (enabled !== false) {
|
||||
item[col.key] = value;
|
||||
const val = item[col.key];
|
||||
if (val?.value != null) {
|
||||
val.value = value;
|
||||
} else {
|
||||
item[col.key] = value;
|
||||
}
|
||||
let tip = col.tooltip;
|
||||
if (typeof tip === 'function') {
|
||||
tip = tip.call(col, item);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user