`;
+ if (data.coverFrom !== 0) {
+ const coverClass = "av__gallery-cover av__gallery-cover--" + data.cardAspectRatio;
+ if (item.coverURL) {
+ if (item.coverURL.startsWith("background")) {
+ galleryHTML += `
`;
+ } else {
+ galleryHTML += `
`;
+ }
+ } else if (item.coverContent) {
+ galleryHTML += `
`;
+ } else {
+ galleryHTML += `
`;
+ }
+ }
+ galleryHTML += '
';
+ item.values.forEach((cell, fieldsIndex) => {
+ if (data.fields[fieldsIndex].hidden) {
+ return;
+ }
+ let checkClass = "";
+ if (cell.valueType === "checkbox") {
+ checkClass = cell.value?.checkbox?.checked ? " av__cell-check" : " av__cell-uncheck";
+ }
+ const isEmpty = cellValueIsEmpty(cell.value);
+ // NOTE: innerHTML 中不能换行否则 https://github.com/siyuan-note/siyuan/issues/15132
+ let ariaLabel = escapeAttr(data.fields[fieldsIndex].name) || getColNameByType(data.fields[fieldsIndex].type);
+ if (data.fields[fieldsIndex].desc) {
+ ariaLabel += escapeAttr(`
${data.fields[fieldsIndex].desc}
`);
+ }
+
+ if (cell.valueType === "checkbox" && !data.displayFieldName) {
+ cell.value.checkbox.content = data.fields[fieldsIndex].name || getColNameByType(data.fields[fieldsIndex].type);
+ }
+ const cellHTML = `
${renderCell(cell.value, rowIndex, data.showIcon, "gallery")}
`;
+ if (data.displayFieldName) {
+ galleryHTML += `
+
+ ${data.fields[fieldsIndex].icon ? unicode2Emoji(data.fields[fieldsIndex].icon, undefined, true) : ``}${Lute.EscapeHTMLStr(data.fields[fieldsIndex].name)}
+ ${data.fields[fieldsIndex].desc ? `` : ""}
+
+ ${cellHTML}
+
`;
+ } else {
+ galleryHTML += `
+
+ ${data.fields[fieldsIndex].icon ? unicode2Emoji(data.fields[fieldsIndex].icon, undefined, true) : ``}${window.siyuan.languages.edit} ${Lute.EscapeHTMLStr(data.fields[fieldsIndex].name)}
+
+ ${cellHTML}
+
`;
+ }
+ });
+ galleryHTML += `
+
+
+
+
+
+ }
+ const selectRowIds: IIds[] = [];
+ e.querySelectorAll(".av__row--select").forEach(rowItem => {
+ const rowId = rowItem.getAttribute("data-id");
+ if (rowId) {
+ selectRowIds.push({
+ groupId: (hasClosestByClassName(rowItem, "av__body") as HTMLElement).dataset.groupId || "",
+ rowId
+ });
+ }
+ });
+ let dragFillId;
+ const dragFillElement = e.querySelector(".av__drag-fill") as HTMLElement;
+ if (dragFillElement) {
+ dragFillId = {
+ groupId: (hasClosestByClassName(dragFillElement, "av__body") as HTMLElement).dataset.groupId || "",
+ rowId: (hasClosestByClassName(dragFillElement, "av__row") as HTMLElement).dataset.id,
+ colId: dragFillElement.parentElement.getAttribute("data-col-id"),
+ };
+ }
+ const activeIds: IIds[] = [];
+ e.querySelectorAll(".av__cell--active").forEach((item: HTMLElement) => {
+ activeIds.push({
+ groupId: (hasClosestByClassName(item, "av__body") as HTMLElement).dataset.groupId || "",
+ rowId: (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id,
+ colId: item.getAttribute("data-col-id"),
+ });
+ });
+ const searchInputElement = e.querySelector('[data-type="av-search"]') as HTMLInputElement;
+ const pageSizes: { [key: string]: string } = {};
+ e.querySelectorAll(".av__body").forEach((item: HTMLElement) => {
+ pageSizes[item.dataset.groupId || "unGroup"] = item.dataset.pageSize;
+ });
+ const resetData = {
+ selectCellId,
+ alignSelf: e.style.alignSelf,
+ left: e.querySelector(".av__scroll")?.scrollLeft || 0,
+ headerTransform: (e.querySelector('.av__row--header[style^="transform"]') as HTMLElement)?.style.transform,
+ footerTransform: (e.querySelector(".av__row--footer") as HTMLElement)?.style.transform,
+ isSearching: searchInputElement && document.activeElement === searchInputElement,
+ selectRowIds,
+ dragFillId,
+ activeIds,
+ query: searchInputElement?.value || "",
+ pageSizes
+ };
+ if (e.firstElementChild.innerHTML === "") {
+ e.style.alignSelf = "";
+ let html = "";
+ [1, 2, 3].forEach(() => {
+ html += `
`;
- });
- e.firstElementChild.innerHTML = html;
- }
- const created = protyle.options.history?.created;
- const snapshot = protyle.options.history?.snapshot;
- const avPageSize = getPageSize(e);
- fetchPost(created ? "/api/av/renderHistoryAttributeView" : (snapshot ? "/api/av/renderSnapshotAttributeView" : "/api/av/renderAttributeView"), {
+ });
+ e.firstElementChild.innerHTML = html;
+ }
+ const created = protyle.options.history?.created;
+ const snapshot = protyle.options.history?.snapshot;
+ const avPageSize = getPageSize(e);
+ if (!data) {
+ const response = await fetchSyncPost(created ? "/api/av/renderHistoryAttributeView" : (snapshot ? "/api/av/renderSnapshotAttributeView" : "/api/av/renderAttributeView"), {
id: e.getAttribute("data-av-id"),
created,
snapshot,
@@ -552,43 +554,48 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) =
viewID: e.getAttribute(Constants.CUSTOM_SY_AV_VIEW) || "",
query: resetData.query.trim(),
blockID: e.getAttribute("data-node-id"),
- }, (response) => {
- const data = response.data.view as IAVTable;
- if (response.data.viewType === "gallery") {
- e.setAttribute("data-av-type", "table");
- renderGallery({blockElement: e, protyle, cb, renderAll, data: response.data});
- return;
- }
- if (data.groups?.length > 0) {
- renderGroupTable({blockElement: e, protyle, cb, renderAll, data: response.data, resetData});
- return;
- }
- const avBodyHTML = `
- ${getTableHTMLs(data, e)}
+ });
+ data = response.data;
+ }
+ if (data.viewType === "gallery") {
+ e.setAttribute("data-av-type", data.viewType);
+ renderGallery({blockElement: e, protyle, cb, renderAll, data});
+ return;
+ }
+ if (data.viewType === "kanban") {
+ e.setAttribute("data-av-type", data.viewType);
+ renderKanban({blockElement: e, protyle, cb, renderAll, data});
+ return;
+ }
+ const view = data.view as IAVTable;
+ if (view.groups?.length > 0) {
+ renderGroupTable({blockElement: e, protyle, cb, renderAll, data, resetData});
+ return;
+ }
+ const avBodyHTML = `
+ ${getTableHTMLs(view, e)}
`;
- if (renderAll) {
- e.firstElementChild.outerHTML = `
- ${genTabHeaderHTML(response.data, resetData.isSearching || !!resetData.query, !protyle.disabled && !hasClosestByAttribute(e, "data-type", "NodeBlockQueryEmbed"))}
+ if (renderAll) {
+ e.firstElementChild.outerHTML = `
+ ${genTabHeaderHTML(data, resetData.isSearching || !!resetData.query, !protyle.disabled && !hasClosestByAttribute(e, "data-type", "NodeBlockQueryEmbed"))}
${avBodyHTML}
${Constants.ZWSP}
`;
- } else {
- e.firstElementChild.querySelector(".av__scroll").innerHTML = avBodyHTML;
- }
- afterRenderTable({
- renderAll,
- data: response.data,
- cb,
- protyle,
- blockElement: e,
- resetData
- });
- // 历史兼容
- e.style.margin = "";
- });
+ } else {
+ e.firstElementChild.querySelector(".av__scroll").innerHTML = avBodyHTML;
+ }
+ afterRenderTable({
+ renderAll,
+ data,
+ cb,
+ protyle,
+ blockElement: e,
+ resetData
});
+ // 历史兼容
+ e.style.margin = "";
}
};
diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts
index f3fcf2426..b00eb28bf 100644
--- a/app/src/types/index.d.ts
+++ b/app/src/types/index.d.ts
@@ -909,6 +909,20 @@ interface IAVGallery extends IAVView {
cardCount: number,
}
+interface IAVKanban extends IAVView {
+ coverFrom: number; // 0：无，1：内容图，2：资源字段，3：内容块
+ coverFromAssetKeyID?: string;
+ cardSize: number; // 0：小卡片，1：中卡片，2：大卡片
+ cardAspectRatio: number;
+ displayFieldName: boolean;
+ fitImage: boolean;
+ cards: IAVGalleryItem[],
+ desc: string
+ fields: IAVColumn[]
+ cardCount: number,
+ fillColBackgroundColor: boolean
+}
+
interface IAVFilter {
column: string,
operator: TAVFilterOperator,
diff --git a/app/src/util/assets.ts b/app/src/util/assets.ts
index f2bbc699a..a737012f9 100644
--- a/app/src/util/assets.ts
+++ b/app/src/util/assets.ts
@@ -58,9 +58,14 @@ export const loadAssets = (data: Config.IAppearance) => {
/// #if !MOBILE
setTimeout(() => {
document.querySelectorAll(".av__kanban-group").forEach(item => {
- const nameElement = item.querySelector(".av__group-title .b3-chip") as HTMLElement;
- if (nameElement) {
- const selectBg = getComputedStyle(document.documentElement).getPropertyValue(`--b3-font-background${nameElement.style.backgroundColor.slice(-2, -1)}`);
+ if (item.getAttribute("style")) {
+ let selectBg;
+ const nameElement = item.querySelector(".av__group-title .b3-chip") as HTMLElement;
+ if (nameElement) {
+ selectBg = getComputedStyle(document.documentElement).getPropertyValue(`--b3-font-background${nameElement.style.backgroundColor.slice(-2, -1)}`);
+ } else {
+ selectBg = getComputedStyle(document.documentElement).getPropertyValue("--b3-border-color");
+ }
item.setAttribute("style", `--b3-av-kanban-border:${selectBg};--b3-av-kanban-bg:${selectBg}29;--b3-av-kanban-content-bg:${selectBg}47;--b3-av-kanban-content-hover-bg:${selectBg}5c;`);
}
});
