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 = `