diff --git a/api/js/etemplate/Et2Vfs/Et2VfsPath.ts b/api/js/etemplate/Et2Vfs/Et2VfsPath.ts index 7d0a65a03f..40f90a8dc2 100644 --- a/api/js/etemplate/Et2Vfs/Et2VfsPath.ts +++ b/api/js/etemplate/Et2Vfs/Et2VfsPath.ts @@ -23,11 +23,14 @@ import {HasSlotController} from "../Et2Widget/slot"; * @summary Display an editable path from the VFS * @since * + * @slot label - The input’s label. Alternatively, you can use the label attribute. * @slot prefix - Before the path * @slot suffix - Like prefix, but after + * @slot edit-icon - The icon that switches to editing the path as text. * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute. * * @event change - Emitted when the control's value changes. + * @event {CustomEvent} click - Emitted when the user clicks on part of the path. `event.detail` contains the path. * * @csspart form-control-input - The textbox's wrapper. * @csspart form-control-help-text - The help text's wrapper. diff --git a/api/js/etemplate/Et2Vfs/Et2VfsSelectButton.ts b/api/js/etemplate/Et2Vfs/Et2VfsSelectButton.ts index 075478310e..2f9d465454 100644 --- a/api/js/etemplate/Et2Vfs/Et2VfsSelectButton.ts +++ b/api/js/etemplate/Et2Vfs/Et2VfsSelectButton.ts @@ -15,7 +15,8 @@ import {Et2VfsSelectDialog, FileInfo} from "./Et2VfsSelectDialog"; import {waitForEvent} from "../Et2Widget/event"; /** - * @summary Button to open a file selection dialog, and return the selected path(s) as a value + * @summary Button to open a file selection dialog, and either return the selected path(s) as a value or take immediate + * action with them using the `method` property. * @since 23.1 * * @dependency et2-vfs-select-dialog diff --git a/api/js/etemplate/Et2Vfs/Et2VfsSelectDialog.md b/api/js/etemplate/Et2Vfs/Et2VfsSelectDialog.md index 8427a0b3ee..9e2844cc73 100644 --- a/api/js/etemplate/Et2Vfs/Et2VfsSelectDialog.md +++ b/api/js/etemplate/Et2Vfs/Et2VfsSelectDialog.md @@ -1,8 +1,22 @@ -You can get the files by: +```html:preview + +Open dialog +// TODO: This doesn't work because of Dialog / keymanager issues + +``` + +## Selected files + +You can get the selected files by: ### Widget value -The dialog will return values on submit back to the server +If the dialog is in the template, it will return values on submit back to the server. ### Change event @@ -15,9 +29,12 @@ dialog.addEventListener("change", this.handleFilesSelected); ### getComplete() Promise -When the user closes the dialog, getComplete() will return the selected files +When the user closes the dialog, getComplete() will return the selected files. ```js const dialog = this.et2.getWidgetById("files"); let files = await dialog.getComplete(); ``` + +This is probably the best way to get files (or directories) that you then want to do something with on the client. See +also [Et2VfsSelectButton](../et2-vfs-select) which can pass the files to take action on the server. \ No newline at end of file diff --git a/api/js/etemplate/Et2Vfs/Et2VfsSelectDialog.ts b/api/js/etemplate/Et2Vfs/Et2VfsSelectDialog.ts index f94c70bb61..8fff453b21 100644 --- a/api/js/etemplate/Et2Vfs/Et2VfsSelectDialog.ts +++ b/api/js/etemplate/Et2Vfs/Et2VfsSelectDialog.ts @@ -28,7 +28,7 @@ import {Et2VfsPath} from "./Et2VfsPath"; /** * @summary Select files (including directories) from the VFS. * - * The dialog does not do anything with the files, just handles the UI to select file. + * The dialog does not do anything with the files, just handles the UI to select them. * * @dependency et2-box * @dependency et2-button diff --git a/api/js/etemplate/Et2Vfs/Et2VfsSelectRow.ts b/api/js/etemplate/Et2Vfs/Et2VfsSelectRow.ts index 0d14f15bb7..0876a1b3f3 100644 --- a/api/js/etemplate/Et2Vfs/Et2VfsSelectRow.ts +++ b/api/js/etemplate/Et2Vfs/Et2VfsSelectRow.ts @@ -7,6 +7,15 @@ import {classMap} from "lit/directives/class-map.js"; import shoelace from "../Styles/shoelace"; import styles from "./Et2VfsSelectRow.styles"; +/** + * @summary Shows one file in the Et2VfsSelectDialog list + * + * @slot prefix - Used to prepend an icon or similar element between the checked icon and the mime icon + * @slot suffix - Used to append an icon or similar element after the file name + * + * @csspart base - The component’s base wrapper. + * @csspart checked-icon - The checked icon, an element. + */ export class Et2VfsSelectRow extends Et2Widget(LitElement) { static get styles()