@onereach/or-browser
🗂 Vue component for browsing assets, items and files.
Props
-
v-model: Object default: {}
An object with data that the component will manipulate. Component will mutate this object if any operations allowed. Must have the following structure:
{ dir1: { subdir: {}, file1: 'content of file 1', file2: 'content of file 2' }, file3: 'content of file 3' }
-
selectedItems.sync: Array default: []
An array of selected items. Works when
enableSelection
istrue
. -
enableSelection: Boolean default: false
Enables possibility to select items in component.
-
multipleSelect: Boolean default: false
Whether or not user can select multiple items. Works when
enableSelection
istrue
. -
loadingPaths: Array default: []
Whether or not the directory is in loading state. Add path to show spinner in directory.
Limit for number of selected items. Use
0
for unlimited number of selected items. Works whenenableSelection
andmultipleSelect
istrue
. -
allowOperations: Object default:
{
copyPaste: true,
createDirectory: true,
createFile: true,
delete: true,
}
Note: this restriction will not affect the methods that calls from this.$refs[componentRef]
-
isPreviewLoading: Boolean default: false
Whether or not the preview part of component is in loading state. Set to
true
show spinner and disable navigation. -
rootLabel: String default: '.'
Label for root directory item in list
Events
-
pathChange
Emitted when browsing path changed.
Handler called with new and old paths, e. g.
{ old: '/dir', new: '/dir/subdir' }
-
chevronClick
Emitted when chevron near the directory clicked.
Handler called with directory state and path, e. g.
{ path: '/dir', expanded: false }
-
fileClick
Emitted when file clicked.
Handler called with file content and path, e. g.
{ path: '/dir/file', content: 'some files' }
-
copy:
Emitted when the copy operation performed.
-
paste:
Emitted when the paste operation performed.
-
delete:
Emitted when the delete operation performed.
-
cut:
Emitted when the cut operation performed.
-
fileCreated:
Emitted when user creates file
-
directoryCreated
Emitted when user creates directory
-
fileEdited
Emitted when the user edited file
Slots
-
previewer
Holds previewer for files which represents files. Slot props contains
content
, which is currently selected item content andextension
Methods
- resetPreview(): resets preview.
- rename(path, newName): Renames file or directory
- resetSelection(): Deselect all selected files.