@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 is true.

• 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 is true.

• 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 when enableSelection and multipleSelect is true.

• 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 and extension

Methods

• resetPreview(): resets preview.
• rename(path, newName): Renames file or directory
• resetSelection(): Deselect all selected files.