diff --git a/ide/src/base-ui/menu/LitMainMenu.ts b/ide/src/base-ui/menu/LitMainMenu.ts index c9f7b4f96862fe06bbe3e028888e2be234ec5864..e8884aadee505fb4f6039bf7b32796d2de9d5737 100644 --- a/ide/src/base-ui/menu/LitMainMenu.ts +++ b/ide/src/base-ui/menu/LitMainMenu.ts @@ -129,6 +129,9 @@ export class LitMainMenu extends BaseElement { let groupDescribe: LitMainMenuGroup = group!.shadowRoot!.querySelector('.group-describe') as LitMainMenuGroup; menuBody?.appendChild(group); it.children?.forEach((item: any) => { + if (item.fileModel !== undefined && item.fileModel === 'db') { + return; + } if (item.children && item.children.length > 0) { let secondGroup: LitMainMenuGroup = new LitMainMenuGroup(); secondGroup.setAttribute('title', item.title || ''); @@ -273,6 +276,7 @@ export interface MenuGroup { export interface MenuItem { icon: string; title: string; + fileModel?: string; disabled?: boolean; fileChoose?: boolean; clickHandler?: Function; diff --git a/ide/src/base-ui/select/LitSelect.ts b/ide/src/base-ui/select/LitSelect.ts index e72abac21b246ba665337ec73fad7a3661171ab0..e086ed9d8a6a6f962eb7b056de2e9f841d5f0bbb 100644 --- a/ide/src/base-ui/select/LitSelect.ts +++ b/ide/src/base-ui/select/LitSelect.ts @@ -15,11 +15,15 @@ import { BaseElement, element } from '../BaseElement'; import { selectHtmlStr } from './LitSelectHtml'; +import { LitSelectOption } from './LitSelectOption'; @element('lit-select') export class LitSelect extends BaseElement { private focused: any; private selectInputEl: any; + private selectSearchInputEl: HTMLInputElement | null | undefined; + private selectOptions: HTMLDivElement | null | undefined; + private selectItem: string = ''; private selectClearEl: any; private selectIconEl: any; private bodyEl: any; @@ -38,6 +42,7 @@ export class LitSelect extends BaseElement { 'list-height', 'border', 'mode', + 'showSearchInput', ]; } @@ -140,19 +145,70 @@ export class LitSelect extends BaseElement { } } + get showSearchInput() { + return this.hasAttribute('showSearchInput'); + } + + set showSearchInput(isHide: boolean) { + if (isHide) { + this.setAttribute('showSearchInput', ''); + } else { + this.removeAttribute('showSearchInput'); + } + } + + set showItem(item: string) { + this.selectItem = item; + } + set dataSource(selectDataSource: any) { - selectDataSource.forEach((dateSourceBean: any) => { - let selectOption = document.createElement('lit-select-option'); - if (dateSourceBean.name) { - selectOption.textContent = dateSourceBean.name; - selectOption.setAttribute('value', dateSourceBean.name); - } - this.append(selectOption); - }); - this.initOptions(); + this.innerHTML = ``; + if (selectDataSource.length > 0) { + this.bodyEl!.style.display = 'flex'; + selectDataSource.forEach((dateSourceBean: any) => { + let selectOption = document.createElement('lit-select-option'); + if (dateSourceBean.name) { + selectOption.textContent = dateSourceBean.name; + selectOption.setAttribute('value', dateSourceBean.name); + } else if (dateSourceBean) { + selectOption.textContent = dateSourceBean; + selectOption.setAttribute('value', dateSourceBean); + if ( + this.selectItem !== '' && + this.selectItem === this.value && + this.selectItem === selectOption.textContent + ) { + selectOption.setAttribute('selected', ''); + } + this.selectInputEl!.value = ''; + } + this.append(selectOption); + }); + this.initOptions(); + } else { + this.bodyEl!.style.display = 'none'; + } } - initElements(): void {} + initElements(): void { + if (this.showSearchInput) { + this.shadowRoot!.querySelector('.body-select')!.style.display = 'block'; + this.selectSearchInputEl = this.shadowRoot!.querySelector('#search-input') as HTMLInputElement; + this.selectSearchInputEl?.addEventListener('keyup', (evt) => { + let options = []; + options = [...this.querySelectorAll('lit-select-option')]; + options.filter((a: LitSelectOption) => { + if (a.textContent!.indexOf(this.selectSearchInputEl!.value) <= -1) { + a.style.display = 'none'; + } else { + a.style.display = 'flex'; + } + }); + evt.preventDefault(); + evt.stopPropagation(); + }); + } + } initHtml() { return ` @@ -168,8 +224,13 @@ export class LitSelect extends BaseElement {
- - + +
+ + +
`; } @@ -214,6 +275,7 @@ export class LitSelect extends BaseElement { this.selectIconEl = this.shadowRoot!.querySelector('.icon'); this.selectSearchEl = this.shadowRoot!.querySelector('.search'); this.selectMultipleRootEl = this.shadowRoot!.querySelector('.multipleRoot'); + this.selectOptions = this.shadowRoot!.querySelector('.body-opt') as HTMLDivElement; this.setEventClick(); this.setEvent(); this.selectInputEl.onblur = (ev: any) => { @@ -238,14 +300,14 @@ export class LitSelect extends BaseElement { this.setOnkeydown(); } - setOninput():void{ + setOninput(): void { this.selectInputEl.oninput = (ev: any) => { let els: Element[] = [...this.querySelectorAll('lit-select-option')]; if (this.hasAttribute('show-search')) { if (!ev.target.value) { els.forEach((a: any) => (a.style.display = 'flex')); } else { - this.setSelectItem(els,ev) + this.setSelectItem(els, ev); } } else { this.value = ev.target.value; @@ -253,7 +315,7 @@ export class LitSelect extends BaseElement { }; } - setSelectItem(els:Element[],ev:any):void{ + setSelectItem(els: Element[], ev: any): void { els.forEach((a: any) => { let value = a.getAttribute('value'); if ( @@ -267,7 +329,7 @@ export class LitSelect extends BaseElement { }); } - setEventClick():void{ + setEventClick(): void { this.selectClearEl.onclick = (ev: any) => { if (this.isMultiple()) { let delNodes: Array = []; @@ -298,17 +360,15 @@ export class LitSelect extends BaseElement { if (this.focused === false) { this.selectInputEl.focus(); this.focused = true; - this.bodyEl!.style.display = 'block'; + this.bodyEl!.style.display = 'flex'; } else { - this.blur(); - this.bodyEl!.style.display = 'none'; this.focused = false; } } }; } - setEvent():void{ + setEvent(): void { this.onmouseover = this.onfocus = (ev) => { if (this.focused === false && this.hasAttribute('adaptive-expansion')) { if (this.parentElement!.offsetTop < this.bodyEl!.clientHeight) { @@ -351,7 +411,7 @@ export class LitSelect extends BaseElement { }; } - setOnkeydown():void{ + setOnkeydown(): void { this.selectInputEl.onkeydown = (ev: any) => { if (ev.key === 'Backspace') { if (this.isMultiple()) { @@ -422,7 +482,7 @@ export class LitSelect extends BaseElement { }); } - onSelectedEvent(a:Element):void{ + onSelectedEvent(a: Element): void { a.addEventListener('onSelected', (e: any) => { if (this.isMultiple()) { if (a.hasAttribute('selected')) { @@ -454,6 +514,7 @@ export class LitSelect extends BaseElement { a.removeAttribute('selected'); } else { a.setAttribute('selected', ''); + this.selectItem = a.textContent!; } // @ts-ignore this.value = e.detail.value; diff --git a/ide/src/base-ui/select/LitSelectHtml.ts b/ide/src/base-ui/select/LitSelectHtml.ts index 47aa38f32aa73f3b0f433bd75d57bcf9b4a42f2d..785ebaa12f57fa1d560dee38b7529ca21feabc04 100644 --- a/ide/src/base-ui/select/LitSelectHtml.ts +++ b/ide/src/base-ui/select/LitSelectHtml.ts @@ -33,6 +33,7 @@ let css = ` border: 1px solid var(--bark-prompt,#dcdcdc); } input{ + width: 100%; border: 0; outline: none; background-color: transparent; @@ -54,7 +55,7 @@ let css = ` } .root{ position: relative; - padding: 3px 6px; + padding: 1px 8px; display: flex; align-items: center; justify-content: space-between; @@ -141,10 +142,10 @@ let css = ` } :host(:not([mode])) input{ width: 100%; + padding: 6px 0px; } .body{ - max-height: {1}; - overflow: auto; + max-height: 286px; border-radius: 2px; box-shadow: 0 5px 15px 0px #00000033; } @@ -174,6 +175,7 @@ let css = ` display: none; } .multipleRoot{ + width:100%; display: flex; align-items: center; flex-flow: wrap; @@ -208,6 +210,40 @@ let css = ` color: #999999; margin-left: 0px; } + #search-input { + outline: none; + border: none; + margin-left: 15px; + } + .body-select { + margin-top: 3px; + background-color: var(--dark-background4,#fff); + width: 100%; + border-bottom: none; + } + .body-opt{ + width: 100%; + max-height: 256px; + border-top: none; + overflow: auto; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + background-color: var(--dark-background4,#fff); + } + input::-webkit-input-placeholder { + color: var(--dark-color,#aab2bd); + } + /*Define the height, width and background of the scroll bar*/ + ::-webkit-scrollbar{ + width: 8px; + border-radius: 10px; + background-color: var(--dark-background3,#FFFFFF); + } + /*define slider*/ + ::-webkit-scrollbar-thumb{ + border-radius: 6px; + background-color: var(--dark-background7,rgba(0,0,0,0.1)); + } `; diff --git a/ide/src/base-ui/select/LitSelectOption.ts b/ide/src/base-ui/select/LitSelectOption.ts index de6345c0978a329c62e314007d8ccde251e57ca6..a9f58c3c1894923540e30e5ce1ade902d9f41326 100644 --- a/ide/src/base-ui/select/LitSelectOption.ts +++ b/ide/src/base-ui/select/LitSelectOption.ts @@ -16,7 +16,7 @@ import { BaseElement } from '../BaseElement'; import '../icon/LitIcon'; -const initHtmlStyle:string = ` +const initHtmlStyle: string = `