diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index 4d7dfba03..776fccac1 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -47,6 +47,14 @@
&__views {
align-items: center;
box-shadow: 0px -1px inset var(--b3-theme-background-light);
+
+ &--show .block__icon {
+ opacity: 1;
+ }
+
+ .b3-text-field {
+ transition: var(--b3-width-transition);
+ }
}
&__title {
diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts
index ffe991ba2..da18e54a7 100644
--- a/app/src/protyle/render/av/action.ts
+++ b/app/src/protyle/render/av/action.ts
@@ -115,6 +115,15 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
event.preventDefault();
event.stopPropagation();
return true;
+ } else if (type === "av-search-icon") {
+ const searchElement = blockElement.querySelector('input[data-type="av-search"]') as HTMLInputElement;
+ searchElement.style.width = "128px";
+ searchElement.style.paddingLeft = "";
+ searchElement.style.paddingRight = "";
+ searchElement.focus();
+ event.preventDefault();
+ event.stopPropagation();
+ return true;
} else if (type === "av-filter") {
openMenuPanel({protyle, blockElement, type: "filters"});
event.preventDefault();
diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts
index 68ddf6045..a55b0b961 100644
--- a/app/src/protyle/render/av/render.ts
+++ b/app/src/protyle/render/av/render.ts
@@ -9,6 +9,7 @@ import {stickyRow} from "./row";
import {getCalcValue} from "./calc";
import {renderAVAttribute} from "./blockAttr";
import {showMessage} from "../../../dialog/message";
+import {addClearButton} from "../../../util/addClearButton";
export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, viewID?: string) => {
let avElements: Element[] = [];
@@ -62,7 +63,8 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
created,
snapshot,
pageSize: parseInt(e.dataset.pageSize) || undefined,
- viewID: newViewID
+ viewID: newViewID,
+ query: (e.querySelector('.b3-text-field[data-type="av-search"]') as HTMLInputElement)?.value || ""
}, (response) => {
const data = response.data.view as IAVTable;
if (!e.dataset.pageSize) {
@@ -197,6 +199,13 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}`;
+
+
+
+
+
+
+
@@ -280,6 +289,56 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}`;
if (cb) {
cb();
}
+ const viewsElement = e.querySelector(".av__views") as HTMLElement;
+ const searchInputElement = e.querySelector('[data-type="av-search"]') as HTMLInputElement;
+ searchInputElement.addEventListener("input", (event: KeyboardEvent) => {
+ if (event.isComposing) {
+ return;
+ }
+ if (searchInputElement.value) {
+ viewsElement.classList.add("av__views--show");
+ } else {
+ viewsElement.classList.remove("av__views--show");
+ }
+ });
+ searchInputElement.addEventListener("keydown", (event: KeyboardEvent) => {
+ if (event.isComposing) {
+ return;
+ }
+ if (event.key === "Enter") {
+ e.removeAttribute("data-render");
+ avRender(e, protyle)
+ event.preventDefault();
+ }
+ });
+ searchInputElement.addEventListener("compositionend", (event: KeyboardEvent) => {
+ if (event.key === "Enter") {
+ // todo
+ event.preventDefault();
+ }
+ });
+ searchInputElement.addEventListener("blur", (event: KeyboardEvent) => {
+ if (event.isComposing) {
+ return;
+ }
+ if (!searchInputElement.value) {
+ viewsElement.classList.remove("av__views--show");
+ searchInputElement.style.width = "0";
+ searchInputElement.style.paddingLeft = "0";
+ searchInputElement.style.paddingRight = "0";
+ }
+ });
+ addClearButton({
+ inputElement: searchInputElement,
+ right: 0,
+ height: searchInputElement.clientHeight,
+ clearCB() {
+ viewsElement.classList.remove("av__views--show");
+ searchInputElement.style.width = "0";
+ searchInputElement.style.paddingLeft = "0";
+ searchInputElement.style.paddingRight = "0";
+ }
+ });
});
});
}
diff --git a/app/src/protyle/wysiwyg/keydown.ts b/app/src/protyle/wysiwyg/keydown.ts
index 89aee5717..e229ec314 100644
--- a/app/src/protyle/wysiwyg/keydown.ts
+++ b/app/src/protyle/wysiwyg/keydown.ts
@@ -85,7 +85,7 @@ export const getContentByInlineHTML = (range: Range, cb: (content: string) => vo
export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
editorElement.addEventListener("keydown", (event: KeyboardEvent & { target: HTMLElement }) => {
- if (event.target.localName === "protyle-html") {
+ if (event.target.localName === "protyle-html" || event.target.localName === "input") {
event.stopPropagation();
return;
}
diff --git a/app/src/util/addClearButton.ts b/app/src/util/addClearButton.ts
index 7010b4f37..ec35669fb 100644
--- a/app/src/util/addClearButton.ts
+++ b/app/src/util/addClearButton.ts
@@ -1,12 +1,12 @@
const update = (inputElement: HTMLInputElement, clearElement: Element, right: number) => {
if (inputElement.value === "") {
clearElement.classList.add("fn__none");
- if (right) {
- inputElement.style.paddingRight = "";
+ if (typeof right === "number") {
+ inputElement.style.paddingRight = inputElement.dataset.oldPaddingRight;
}
} else {
clearElement.classList.remove("fn__none");
- if (right) {
+ if (typeof right === "number") {
inputElement.style.setProperty("padding-right", `${right * 2 + clearElement.clientWidth}px`, "important");
}
}
@@ -18,6 +18,7 @@ export const addClearButton = (options: {
height?: number
className?: string
}) => {
+ options.inputElement.dataset.oldPaddingRight = options.inputElement.style.paddingRight;
options.inputElement.insertAdjacentHTML("afterend",
``);