From feec8b59a7ae34f46e161a67649f241c757a6623 Mon Sep 17 00:00:00 2001 From: Tsanie Date: Thu, 18 Jan 2024 17:25:44 +0800 Subject: [PATCH] issue fix --- lib/ui/css/dropdown.css | 1 + lib/ui/css/dropdown.scss | 170 +++++++++++++++++++-------------------- lib/ui/css/grid.css | 2 +- lib/ui/css/grid.scss | 59 +++++++------- lib/ui/dropdown.js | 97 +++++++++++++--------- lib/ui/grid/column.js | 48 +++++++---- lib/ui/grid/grid.js | 119 +++++++++++++-------------- 7 files changed, 265 insertions(+), 231 deletions(-) create mode 100644 lib/ui/css/dropdown.css diff --git a/lib/ui/css/dropdown.css b/lib/ui/css/dropdown.css new file mode 100644 index 0000000..235bc92 --- /dev/null +++ b/lib/ui/css/dropdown.css @@ -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} \ No newline at end of file diff --git a/lib/ui/css/dropdown.scss b/lib/ui/css/dropdown.scss index 774831c..ca4e7ab 100644 --- a/lib/ui/css/dropdown.scss +++ b/lib/ui/css/dropdown.scss @@ -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; } } } -} \ No newline at end of file +} diff --git a/lib/ui/css/grid.css b/lib/ui/css/grid.css index 0eedf6c..3cd2ba6 100644 --- a/lib/ui/css/grid.css +++ b/lib/ui/css/grid.css @@ -1 +1 @@ -.ui-grid{position:relative;box-sizing:border-box;overflow:auto}.ui-grid{--cell-hover-bg-color: lightyellow;--header-border-color: #adaba9;--header-bg-color: #fafafa;--header-fore-color: #000;--cell-border-color: #f0f0f0;--cell-fore-color: #333;--dark-border-color: #666;--split-border-color: #b3b3b3;--dragger-bg-color: #fff;--dragger-cursor-color: #333;--row-bg-color: #fff;--row-active-bg-color: #fafafa;--row-selected-bg-color: #e6f2fb;--text-disabled-color: gray;--filter-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);--filter-transition: transform .12s ease, opacity .24s ease;--row-height: 36px;--header-line-height: 26px;--text-indent: 8px;--loading-size: 40px;--loading-border-radius: 20px;--arrow-size: 4px;--filter-size: 10px;--split-width: 8px;--dragger-size: 20px;--dragger-opacity: .6;--dragger-cursor-size: 4px;--dragger-cursor-pos: -4px;--dragger-cursor-opacity: .3;--header-padding: 4px 12px 4px 8px;--header-filter-padding: 4px 26px 4px 8px;--spacing-s: 4px;--spacing-cell: 6px 4px 6px 8px;--filter-line-height: 30px;--filter-item-padding: 0 4px}.ui-grid:focus,.ui-grid:focus-visible{outline:none}.ui-grid::-webkit-scrollbar{width:8px;height:8px}.ui-grid::-webkit-scrollbar-thumb{background-color:rgba(168,168,168,.9);border-radius:4px}.ui-grid,.ui-grid input[type=text],.ui-grid textarea{font-size:var(--font-size);font-family:var(--font-family)}.ui-grid>.ui-grid-sizer{position:absolute;white-space:nowrap;font-weight:bold;visibility:hidden}.ui-grid>.ui-grid-wrapper{position:relative}.ui-grid>.ui-grid-wrapper>.ui-grid-table{position:absolute;width:100%;min-width:100%;margin:0;border-collapse:collapse;border-spacing:0;table-layout:fixed}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr{color:var(--header-fore-color);position:sticky;top:0;z-index:2}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th{background-color:var(--header-bg-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:0;margin:0;word-wrap:break-word;white-space:normal;position:relative}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th.sticky{position:sticky;z-index:2}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>div{border-bottom:1px solid var(--header-border-color);line-height:var(--header-line-height);min-height:var(--row-height);display:flex;align-items:center;padding:var(--header-padding);box-sizing:border-box}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>div>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow{width:0;height:0;top:50%;margin-top:calc(0px - var(--arrow-size)/2);right:calc(var(--arrow-size)/2);position:absolute}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.asc{border-bottom:var(--arrow-size) solid var(--dark-border-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.desc{border-top:var(--arrow-size) solid var(--dark-border-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.asc,.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.desc{border-left:var(--arrow-size) solid rgba(0,0,0,0);border-right:var(--arrow-size) solid rgba(0,0,0,0)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter{width:var(--filter-size);height:var(--filter-size);top:50%;margin-top:calc(0px - var(--filter-size)/2);right:calc(var(--arrow-size)*2 + 4px);position:absolute;display:flex}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter>svg{width:100%;height:100%;fill:var(--color);opacity:.2;transition:opacity .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter>svg:hover{opacity:.8}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter.hover>svg{opacity:.8}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter.active>svg{opacity:1}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.spliter{position:absolute;height:100%;top:0;right:calc(0px - var(--split-width)/2);width:var(--split-width);cursor:ew-resize;z-index:1}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.spliter::after{content:"";height:100%;width:1px;display:block;margin:0 auto;transition:background-color .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.spliter:hover::after{background-color:var(--split-border-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger{position:absolute;left:0;top:0;min-width:var(--dragger-size);height:100%;background-color:var(--dragger-bg-color);opacity:var(--dragger-opacity);display:none}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor{position:absolute;top:0;height:100%;border:1px solid var(--dragger-cursor-color);box-sizing:border-box;margin-left:0;opacity:var(--dragger-cursor-opacity);display:none;transition:left .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor::before{top:-1px;border-top:var(--dragger-cursor-size) solid}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor::after{bottom:-1px;border-bottom:var(--dragger-cursor-size) solid}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor::before,.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor::after{content:"";position:absolute;left:var(--dragger-cursor-pos);border-left:var(--dragger-cursor-size) solid rgba(0,0,0,0);border-right:var(--dragger-cursor-size) solid rgba(0,0,0,0)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th.header-filter>div{padding:var(--header-filter-padding)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody{color:var(--cell-fore-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row{line-height:var(--line-height);white-space:nowrap;background-color:var(--row-bg-color);border-bottom:1px solid var(--cell-border-color);box-sizing:border-box}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row:hover{background-color:var(--row-active-bg-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row:hover>td.sticky{background-color:var(--row-active-bg-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row.selected{background-color:var(--row-selected-bg-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row.selected>td.sticky{background-color:var(--row-selected-bg-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td{padding:0}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td.sticky{position:sticky;z-index:1;background-color:var(--row-bg-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>span{padding:var(--spacing-cell);display:block;overflow:hidden;text-overflow:ellipsis;white-space:pre}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>input[type=text],.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>textarea{border:none;box-sizing:border-box;width:100%;padding:0}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>input[type=text]:focus,.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>input[type=text]:focus-visible,.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>textarea:focus,.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>textarea:focus-visible{outline:none}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>input[type=text]:disabled,.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>textarea:disabled{color:var(--text-disabled-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>input[type=text]{height:var(--row-height);text-indent:var(--text-indent)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>textarea{resize:none;line-height:var(--line-height);display:block;padding:var(--spacing-cell);white-space:nowrap}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>textarea::-webkit-scrollbar{width:8px;height:8px}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>textarea::-webkit-scrollbar-thumb{background-color:rgba(168,168,168,.9);border-radius:4px}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .ui-check-wrapper{display:flex;justify-content:center}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .ui-check-wrapper .ui-check-inner,.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .ui-check-wrapper .ui-check-inner>svg{transition:none}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .ui-drop-wrapper{height:var(--row-height);width:100%;display:flex;flex-direction:column}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .ui-drop-wrapper>.ui-drop-header{border:none;height:100%}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .ui-drop-wrapper>.ui-drop-header>.ui-drop-text{padding:var(--spacing-cell)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .ui-drop-wrapper>.ui-drop-box{top:calc(var(--row-height) + 2px)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .ui-drop-wrapper>.ui-drop-box.slide-up{top:unset;bottom:calc(var(--row-height) + 2px)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .col-icon{display:flex;cursor:pointer;justify-content:center;align-items:center;position:relative}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .col-icon>svg{width:16px;height:16px;fill:var(--primary-color);transition:opacity .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .col-icon:hover>svg{opacity:.4}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .col-icon.disabled{cursor:unset}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .col-icon.disabled>svg{fill:var(--header-border-color);opacity:unset}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody .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}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody .ui-grid-hover-holder.active{visibility:visible;opacity:1}.ui-grid>.ui-grid-loading{position:absolute;top:0;right:0;bottom:0;left:0;visibility:hidden;opacity:0;transition:visibility 0s linear .12s,opacity .12s ease;background-color:var(--loading-bg-color);display:flex;justify-content:center;align-items:center;z-index:1}.ui-grid>.ui-grid-loading>div{background-color:var(--loading-fore-color);border-radius:var(--loading-border-radius)}.ui-grid>.ui-grid-loading>div>svg{width:var(--loading-size);height:var(--loading-size);padding:20px;animation:loading-spinner 1.2s infinite linear}.ui-grid>.filter-panel{position:absolute;width:200px;height:300px;box-shadow:var(--filter-shadow);transition:var(--filter-transition);background-color:var(--bg-color);transform:scaleY(0);transform-origin:top;opacity:0;display:flex;flex-direction:column;z-index:3}.ui-grid>.filter-panel.active{transform:scaleY(1);opacity:1}.ui-grid>.filter-panel>.filter-search-holder{position:relative;margin:8px 8px 4px}.ui-grid>.filter-panel>.filter-search-holder>.filter-search-box{box-sizing:border-box;text-indent:16px;width:100%;font-size:var(--font-smaller-size);height:var(--line-height);line-height:var(--line-height)}.ui-grid>.filter-panel>.filter-search-holder>svg{position:absolute;width:12px;height:12px;top:calc(50% - 6px);left:4px;fill:var(--color);cursor:text}.ui-grid>.filter-panel>.filter-item-list{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ui-grid>.filter-panel>.filter-item-list::-webkit-scrollbar{width:8px;height:8px}.ui-grid>.filter-panel>.filter-item-list::-webkit-scrollbar-thumb{background-color:rgba(168,168,168,.9);border-radius:4px}.ui-grid>.filter-panel>.filter-item-list>.filter-content{position:absolute;width:100%}.ui-grid>.filter-panel>.filter-item-list .filter-item{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;padding:var(--filter-item-padding)}.ui-grid>.filter-panel>.filter-item-list .filter-item:hover{background-color:var(--hover-bg-color)}.ui-grid>.filter-panel>.filter-item-list .filter-item .ui-check-wrapper{height:var(--filter-line-height);display:flex}.ui-grid>.filter-panel>.filter-item-list .filter-item .ui-check-wrapper .ui-check-inner+*{font-size:var(--font-smaller-size)}.ui-grid>.filter-panel>.filter-function{display:flex;justify-content:flex-end;padding:4px}.ui-grid>.filter-panel>.filter-function>button{box-sizing:border-box;margin-right:10px;min-width:40px;height:var(--filter-line-height);border:none;background-color:rgba(0,0,0,0);cursor:pointer;border-radius:0;transition:background-color .12s ease}.ui-grid>.filter-panel>.filter-function>button:focus,.ui-grid>.filter-panel>.filter-function>button:focus-visible{outline:none}.ui-grid>.filter-panel>.filter-function>button:hover{background-color:var(--hover-bg-color)} \ No newline at end of file +.ui-grid{position:relative;box-sizing:border-box;overflow:auto}.ui-grid{--cell-hover-bg-color: lightyellow;--header-border-color: #adaba9;--header-bg-color: #fafafa;--header-fore-color: #000;--cell-border-color: #f0f0f0;--cell-fore-color: #333;--dark-border-color: #666;--split-border-color: #b3b3b3;--dragger-bg-color: #fff;--dragger-cursor-color: #333;--row-bg-color: #fff;--row-active-bg-color: #fafafa;--row-selected-bg-color: #e6f2fb;--text-disabled-color: gray;--filter-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);--filter-transition: transform .12s ease, opacity .24s ease;--row-height: 36px;--header-line-height: 26px;--text-indent: 8px;--loading-size: 40px;--loading-border-radius: 20px;--arrow-size: 4px;--filter-size: 10px;--split-width: 8px;--dragger-size: 20px;--dragger-opacity: .6;--dragger-cursor-size: 4px;--dragger-cursor-pos: -4px;--dragger-cursor-opacity: .3;--header-padding: 4px 12px 4px 8px;--header-filter-padding: 4px 26px 4px 8px;--spacing-s: 4px;--spacing-cell: 6px 4px 6px 8px;--filter-line-height: 30px;--filter-item-padding: 0 4px}.ui-grid:focus,.ui-grid:focus-visible{outline:none}.ui-grid::-webkit-scrollbar{width:8px;height:8px}.ui-grid::-webkit-scrollbar-thumb{background-color:rgba(168,168,168,.9);border-radius:4px}.ui-grid,.ui-grid input[type=text],.ui-grid textarea{font-size:var(--font-size);font-family:var(--font-family)}.ui-grid>.ui-grid-sizer{position:absolute;white-space:nowrap;font-weight:bold;visibility:hidden}.ui-grid>.ui-grid-wrapper{position:relative}.ui-grid>.ui-grid-wrapper>.ui-grid-table{position:absolute;width:100%;min-width:100%;margin:0;border-collapse:collapse;border-spacing:0;table-layout:fixed}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr{color:var(--header-fore-color);position:sticky;top:0;z-index:2}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th{background-color:var(--header-bg-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:0;margin:0;word-wrap:break-word;white-space:normal;position:relative}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th.sticky{position:sticky;z-index:2}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>div{border-bottom:1px solid var(--header-border-color);line-height:var(--header-line-height);min-height:var(--row-height);display:flex;align-items:center;padding:var(--header-padding);box-sizing:border-box}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>div>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow{width:0;height:0;top:50%;margin-top:calc(0px - var(--arrow-size)/2);right:calc(var(--arrow-size)/2);position:absolute}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.asc{border-bottom:var(--arrow-size) solid var(--dark-border-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.desc{border-top:var(--arrow-size) solid var(--dark-border-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.asc,.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.arrow.desc{border-left:var(--arrow-size) solid rgba(0,0,0,0);border-right:var(--arrow-size) solid rgba(0,0,0,0)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter{width:var(--filter-size);height:var(--filter-size);top:50%;margin-top:calc(0px - var(--filter-size)/2);right:calc(var(--arrow-size)*2 + 4px);position:absolute;display:flex}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter>svg{width:100%;height:100%;fill:var(--color);opacity:.2;transition:opacity .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter>svg:hover{opacity:.8}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter.hover>svg{opacity:.8}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.filter.active>svg{opacity:1}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.spliter{position:absolute;height:100%;top:0;right:calc(0px - var(--split-width)/2);width:var(--split-width);cursor:ew-resize;z-index:2}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.spliter::after{content:"";height:100%;width:1px;display:block;margin:0 auto;transition:background-color .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.spliter:hover::after{background-color:var(--split-border-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger{position:absolute;left:0;top:0;min-width:var(--dragger-size);height:100%;background-color:var(--dragger-bg-color);opacity:var(--dragger-opacity);display:none}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor{position:absolute;top:0;height:100%;border:1px solid var(--dragger-cursor-color);box-sizing:border-box;margin-left:0;opacity:var(--dragger-cursor-opacity);display:none;transition:left .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor::before{top:-1px;border-top:var(--dragger-cursor-size) solid}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor::after{bottom:-1px;border-bottom:var(--dragger-cursor-size) solid}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor::before,.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th>.dragger-cursor::after{content:"";position:absolute;left:var(--dragger-cursor-pos);border-left:var(--dragger-cursor-size) solid rgba(0,0,0,0);border-right:var(--dragger-cursor-size) solid rgba(0,0,0,0)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>thead tr>th.header-filter>div{padding:var(--header-filter-padding)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody{color:var(--cell-fore-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row{line-height:var(--line-height);white-space:nowrap;background-color:var(--row-bg-color);border-bottom:1px solid var(--cell-border-color);box-sizing:border-box}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row:hover{background-color:var(--row-active-bg-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row:hover>td.sticky{background-color:var(--row-active-bg-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row.selected{background-color:var(--row-selected-bg-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row.selected>td.sticky{background-color:var(--row-selected-bg-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td{padding:0}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td.sticky{position:sticky;z-index:1;background-color:var(--row-bg-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>span{padding:var(--spacing-cell);display:block;overflow:hidden;text-overflow:ellipsis;white-space:pre}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>input[type=text],.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>textarea{border:none;box-sizing:border-box;width:100%;padding:0}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>input[type=text]:focus,.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>input[type=text]:focus-visible,.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>textarea:focus,.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>textarea:focus-visible{outline:none}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>input[type=text]:disabled,.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>textarea:disabled{color:var(--text-disabled-color)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>input[type=text]{height:var(--row-height);text-indent:var(--text-indent)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>textarea{resize:none;line-height:var(--line-height);display:block;padding:var(--spacing-cell);white-space:nowrap}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>textarea::-webkit-scrollbar{width:8px;height:8px}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td>textarea::-webkit-scrollbar-thumb{background-color:rgba(168,168,168,.9);border-radius:4px}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .ui-check-wrapper{display:flex;justify-content:center}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .ui-check-wrapper .ui-check-inner,.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .ui-check-wrapper .ui-check-inner>svg{transition:none}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .ui-drop-wrapper{height:var(--row-height);width:100%;display:flex;flex-direction:column}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .ui-drop-wrapper>.ui-drop-header{border:none;height:100%;background-color:rgba(0,0,0,0)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .ui-drop-wrapper>.ui-drop-header>.ui-drop-text{padding:var(--spacing-cell)}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .col-icon{display:flex;cursor:pointer;justify-content:center;align-items:center;position:relative}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .col-icon>svg{width:16px;height:16px;fill:var(--primary-color);transition:opacity .12s ease}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .col-icon:hover>svg{opacity:.4}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .col-icon.disabled{cursor:unset}.ui-grid>.ui-grid-wrapper>.ui-grid-table>tbody>.ui-grid-row>td .col-icon.disabled>svg{fill:var(--header-border-color);opacity:unset}.ui-grid>.ui-grid-wrapper .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}.ui-grid>.ui-grid-wrapper .ui-grid-hover-holder.active{visibility:visible;opacity:1}.ui-grid>.ui-grid-loading{position:absolute;top:0;right:0;bottom:0;left:0;visibility:hidden;opacity:0;transition:visibility 0s linear .12s,opacity .12s ease;background-color:var(--loading-bg-color);display:flex;justify-content:center;align-items:center;z-index:3}.ui-grid>.ui-grid-loading>div{background-color:var(--loading-fore-color);border-radius:var(--loading-border-radius)}.ui-grid>.ui-grid-loading>div>svg{width:var(--loading-size);height:var(--loading-size);padding:20px;animation:loading-spinner 1.2s infinite linear}.ui-grid>.ui-drop-box{max-width:300px}.ui-grid>.filter-panel{position:absolute;width:200px;height:300px;box-shadow:var(--filter-shadow);transition:var(--filter-transition);background-color:var(--bg-color);transform:scaleY(0);transform-origin:top;opacity:0;display:flex;flex-direction:column;z-index:3}.ui-grid>.filter-panel.active{transform:scaleY(1);opacity:1}.ui-grid>.filter-panel>.filter-search-holder{position:relative;margin:8px 8px 4px}.ui-grid>.filter-panel>.filter-search-holder>.filter-search-box{box-sizing:border-box;text-indent:16px;width:100%;font-size:var(--font-smaller-size);height:var(--line-height);line-height:var(--line-height)}.ui-grid>.filter-panel>.filter-search-holder>svg{position:absolute;width:12px;height:12px;top:calc(50% - 6px);left:4px;fill:var(--color);cursor:text}.ui-grid>.filter-panel>.filter-item-list{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ui-grid>.filter-panel>.filter-item-list::-webkit-scrollbar{width:8px;height:8px}.ui-grid>.filter-panel>.filter-item-list::-webkit-scrollbar-thumb{background-color:rgba(168,168,168,.9);border-radius:4px}.ui-grid>.filter-panel>.filter-item-list>.filter-content{position:absolute;width:100%}.ui-grid>.filter-panel>.filter-item-list .filter-item{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;padding:var(--filter-item-padding)}.ui-grid>.filter-panel>.filter-item-list .filter-item:hover{background-color:var(--hover-bg-color)}.ui-grid>.filter-panel>.filter-item-list .filter-item .ui-check-wrapper{height:var(--filter-line-height);display:flex}.ui-grid>.filter-panel>.filter-item-list .filter-item .ui-check-wrapper .ui-check-inner+*{font-size:var(--font-smaller-size)}.ui-grid>.filter-panel>.filter-function{display:flex;justify-content:flex-end;padding:4px}.ui-grid>.filter-panel>.filter-function>button{box-sizing:border-box;margin-right:10px;min-width:40px;height:var(--filter-line-height);border:none;background-color:rgba(0,0,0,0);cursor:pointer;border-radius:0;transition:background-color .12s ease}.ui-grid>.filter-panel>.filter-function>button:focus,.ui-grid>.filter-panel>.filter-function>button:focus-visible{outline:none}.ui-grid>.filter-panel>.filter-function>button:hover{background-color:var(--hover-bg-color)} \ No newline at end of file diff --git a/lib/ui/css/grid.scss b/lib/ui/css/grid.scss index 4ad108f..b6f9829 100644 --- a/lib/ui/css/grid.scss +++ b/lib/ui/css/grid.scss @@ -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; diff --git a/lib/ui/dropdown.js b/lib/ui/dropdown.js index 025dd76..8756794 100644 --- a/lib/ui/dropdown.js +++ b/lib/ui/dropdown.js @@ -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'); diff --git a/lib/ui/grid/column.js b/lib/ui/grid/column.js index fa91f37..af9f16a 100644 --- a/lib/ui/grid/column.js +++ b/lib/ui/grid/column.js @@ -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 { diff --git a/lib/ui/grid/grid.js b/lib/ui/grid/grid.js index 8bf3dd8..c3e6a10 100644 --- a/lib/ui/grid/grid.js +++ b/lib/ui/grid/grid.js @@ -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);