Github-Mirror/pocketbase
1
0
Fork 0
mirror of https://github.com/pocketbase/pocketbase.git synced 2026-09-16 11:30:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

minor ui fixes and shablon update

Browse Source
This commit is contained in:
Gani Georgiev
2026-08-10 08:44:29 +03:00
parent fd25a8ae32
commit 6212276c82
19 changed files with 230 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/apiPreview/docsRealtime.js
+12 -12
View File
@@ -57,14 +57,14 @@ export function docsRealtime(collection) {
// (optionally) authenticate
await pb.collection('users').authWithPassword('test@example.com', '123456');
// subscribe to changes in any ${baseURL} record
pb.collection('${baseURL}').subscribe('*', function (e) {
// subscribe to changes in any ${collection.name} record
pb.collection('${collection.name}').subscribe('*', function (e) {
console.log(e.action);
console.log(e.record);
}, { /* other options like: filter, expand, custom headers, etc. */ });
// subscribe to changes only in the specified record
pb.collection('${baseURL}').subscribe('RECORD_ID', function (e) {
pb.collection('${collection.name}').subscribe('RECORD_ID', function (e) {
console.log(e.action);
console.log(e.record);
}, { /* other options like: filter, expand, custom headers, etc. */ });
@@ -72,13 +72,13 @@ export function docsRealtime(collection) {
...
// unsubscribe - remove all 'RECORD_ID' subscriptions
pb.collection('${baseURL}').unsubscribe('RECORD_ID');
pb.collection('${collection.name}').unsubscribe('RECORD_ID');
// unsubscribe - remove all '*' topic subscriptions
pb.collection('${baseURL}').unsubscribe('*');
pb.collection('${collection.name}').unsubscribe('*');
// unsubscribe - remove all collection subscriptions
pb.collection('${baseURL}').unsubscribe();
pb.collection('${collection.name}').unsubscribe();
`,
footnote: t.div(
{ className: "txt-right" },
@@ -103,14 +103,14 @@ export function docsRealtime(collection) {
// (optionally) authenticate
await pb.collection('users').authWithPassword('test@example.com', '123456');
// subscribe to changes in any ${baseURL} record
pb.collection('${baseURL}').subscribe('*', (e) {
// subscribe to changes in any ${collection.name} record
pb.collection('${collection.name}').subscribe('*', (e) {
print(e.action);
print(e.record);
}, /* other options like: filter, expand, custom headers, etc. */);
// subscribe to changes only in the specified record
pb.collection('${baseURL}').subscribe('RECORD_ID', (e) {
pb.collection('${collection.name}').subscribe('RECORD_ID', (e) {
print(e.action);
print(e.record);
}, /* other options like: filter, expand, custom headers, etc. */);
@@ -118,13 +118,13 @@ export function docsRealtime(collection) {
...
// unsubscribe - remove all 'RECORD_ID' subscriptions
pb.collection('${baseURL}').unsubscribe('RECORD_ID');
pb.collection('${collection.name}').unsubscribe('RECORD_ID');
// unsubscribe - remove all '*' topic subscriptions
pb.collection('${baseURL}').unsubscribe('*');
pb.collection('${collection.name}').unsubscribe('*');
// unsubscribe - remove all collection subscriptions
pb.collection('${baseURL}').unsubscribe();
pb.collection('${collection.name}').unsubscribe();
`,
footnote: t.div(
{ className: "txt-right" },
ui/src/base/codeEditor.js
+6
View File
@@ -307,6 +307,12 @@ window.app.components.codeEditor = function(propsArg = {}) {
return;
}
// prevent "Tab trap"
if (!props.singleLine && e.key == "Escape" && !dropdown?.isConnected) {
editorContent?.blur();
return;
}
if (!props.singleLine && e.key == "Tab") {
e.preventDefault();
const selection = window.getSelection();
ui/src/base/dropdownKeyboardNav.js
+6
View File
@@ -64,9 +64,15 @@ document.addEventListener(
dropdown.addEventListener("toggle", (e) => {
if (e.newState == "open") {
// in case the dropdown is manually controlled and don't have a popovertarget
dropdown.__dropdownSource = e.source;
dropdown.__dropdownSource?.setAttribute("data-popover-state", true);
updatePopovertargetsData(e.target.id, true);
document.addEventListener("keydown", onKeydown);
} else {
dropdown.__dropdownSource?.setAttribute("data-popover-state", false);
updatePopovertargetsData(e.target.id, false);
document.removeEventListener("keydown", onKeydown);
}
ui/src/base/sortable.js
+10 -4
View File
@@ -75,10 +75,6 @@ window.app.components.sortable = function(propsArg = {}) {
}
});
listEl.addEventListener("dragend", (e) => {
clearDragData();
});
// drop
// ---
// prevent default to allow drop
@@ -115,6 +111,12 @@ window.app.components.sortable = function(propsArg = {}) {
props.onchange(clone, fromIndex, toIndex);
});
// note: using document because it could be an outside dragged element
listEl._documentDragend = function() {
clearDragData();
};
document.addEventListener("dragend", listEl._documentDragend);
}
function childIndex(children, child) {
@@ -151,6 +153,10 @@ window.app.components.sortable = function(propsArg = {}) {
},
onunmount: (listEl) => {
watchers.forEach((w) => w?.unwatch());
if (listEl._documentDragend) {
document.removeEventListener("dragend", listEl._documentDragend);
}
},
},
(el) => {
ui/src/fields/file/input.js
+17 -1
View File
@@ -105,7 +105,6 @@ export function input(props) {
className: "field-content",
name: () => props.field.name,
},
// @todo enable ordering new files before/inbetween existing
app.components.sortable({
className: "list",
data: () => {
@@ -130,6 +129,23 @@ export function input(props) {
return vals;
},
onchange: (sortedList) => {
// sort existing files first because at the moment we don't
// support putting new files between old ones
sortedList.sort((a, b) => {
const aIsString = typeof a == "string";
const bIsString = typeof b == "string";
if (aIsString && !bIsString) {
return -1;
}
if (!aIsString && bIsString) {
return 1;
}
return 0;
});
props.record[props.field.name] = sortedList;
triggerChangeEvent();
},
ui/src/records/recordFilePickerModal.js
+1 -1
View File
@@ -5,7 +5,7 @@ const recordsPerPage = 100;
const defaultSettings = {
btnText: "Insert",
fileTypes: [], // "image", "document", "video", "audio", "file"
fileTypes: [], // "image", "document", "video", "audio", "archive", "file"
onselect: function(selectedFile) {},
};
ui/src/utils.js
+33 -8
View File
@@ -1295,6 +1295,23 @@ const utils = {
videoExtensions: [".mp4", ".avi", ".mov", ".3gp", ".wmv"],
audioExtensions: [".aa", ".aac", ".m4v", ".mp3", ".ogg", ".oga", ".mogg", ".amr"],
documentExtensions: [".pdf", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".odp", ".odt", ".ods", ".txt"],
archiveExtensions: [".zip", ".gz", ".tar", ".rar", ".7z"],
/**
* Loosely check if a file has an extension from the specified list.
*
* @param {Array} extensionsList
* @param {string} filename
* @return {boolean}
*/
hasExtension(extensionsList, filename) {
if (typeof filename != "string") {
return false;
}
filename = filename.toLowerCase();
return !!extensionsList?.find((ext) => filename.endsWith(ext));
},
/**
* Loosely check if a file has image extension.
@@ -1303,8 +1320,7 @@ const utils = {
* @return {boolean}
*/
hasImageExtension(filename) {
filename = (filename || "").toLowerCase();
return !!app.utils.imageExtensions.find((ext) => filename.endsWith(ext));
return app.utils.hasExtension(app.utils.imageExtensions, filename);
},
/**
@@ -1314,8 +1330,7 @@ const utils = {
* @return {boolean}
*/
hasVideoExtension(filename) {
filename = (filename || "").toLowerCase();
return !!app.utils.videoExtensions.find((ext) => filename.endsWith(ext));
return app.utils.hasExtension(app.utils.videoExtensions, filename);
},
/**
@@ -1325,8 +1340,7 @@ const utils = {
* @return {boolean}
*/
hasAudioExtension(filename) {
filename = (filename || "").toLowerCase();
return !!app.utils.audioExtensions.find((ext) => filename.endsWith(ext));
return app.utils.hasExtension(app.utils.audioExtensions, filename);
},
/**
@@ -1336,8 +1350,17 @@ const utils = {
* @return {boolean}
*/
hasDocumentExtension(filename) {
filename = (filename || "").toLowerCase();
return !!app.utils.documentExtensions.find((ext) => filename.endsWith(ext));
return app.utils.hasExtension(app.utils.documentExtensions, filename);
},
/**
* Loosely check if a file has an archive extension.
*
* @param {string} filename
* @return {boolean}
*/
hasArchiveExtension(filename) {
return app.utils.hasExtension(app.utils.archiveExtensions, filename);
},
/**
@@ -1351,6 +1374,7 @@ const utils = {
if (app.utils.hasVideoExtension(filename)) return "video";
if (app.utils.hasAudioExtension(filename)) return "audio";
if (app.utils.hasDocumentExtension(filename)) return "document";
if (app.utils.hasArchiveExtension(filename)) return "archive";
return "file";
},
fileTypeIcons: {
@@ -1358,6 +1382,7 @@ const utils = {
video: "ri-movie-line",
audio: "ri-music-2-line",
document: "ri-file-line",
archive: "ri-file-zip-line",
file: "ri-file-line",
},