miao-vuefinder

0.2.10 • Public • Published

Miao-Vuefinder File Manager

**This is a special version, remove the edit function, and add Chinese;

GitHub npm

ezgif-1-b902690b76

About

Vuefinder is a file manager component for Vue.js version 3

Origin Demo

Live Demo [ Source ]

Installation

npm i miao-vuefinder

JS entry point (it can be index.js or main.js)

import { createApp } from 'vue'
import App from './App.vue'

import 'miao-vuefinder/dist/style.css'
import VueFinder from 'miao-vuefinder/dist/vuefinder'

const app = createApp(App)

app.use(VueFinder)

app.mount('#app')
 

Html

...
<div>
    <vue-finder id='my_vuefinder' url="http://vuefinder-php.test"></vue-finder>
</div>
...

Props

Prop Value Default Description
id string null required
url string null required - dir url
api string null required - backend api url
token string null required - backend api x-Token
locale string en optional - default language code
dark boolean false optional - makes theme dark as default
max-file-size string 10mb optional - client side max file upload
post-data object {} optional - custom post data
full-screen boolean false optional - makes full-screen as default

Features

  • Multi adapter/storage (see https://github.com/thephpleague/flysystem)
  • File and folder operations
    • Create a new file
    • Create a new folder
    • Rename
    • Delete
    • Archive (zip)
    • Unarchive (unzip)
    • Text editing
    • Image Crop Tool
    • Upload / Download files
    • Search (deep based on current folder)
  • Nice UI
    • Context Menu
    • Breadcrumb links
    • Toolbar
    • File explorer
    • Status bar
    • Image thumbnails
    • Toast notifications
  • Appearance
    • Multi language
    • Full Screen
    • View Modes: list, grid
    • Dark Mode
  • Accessibility
    • Drag & drop support
    • Move items (to a folder or up one folder) with drag and drop
    • Mouse selection

Backend

Roadmap

  • [ ] code refactoring (cleanup the duplications, make reusable components)
  • [ ] restyle the modals
  • [ ] add more languages (only en/tr/ru at the moment. PRs are welcomed.)
  • [ ] copy/move to a folder (modal, treeview)
  • [ ] transfer items between filesystem adapters
  • [ ] show/hide components (toolbar/statusbar etc.)
  • [ ] emit select event, with @select get selected files for online editors like tinymce/ckeditor
  • [ ] drag&drop on folders at address bar
  • [ ] update DragSelect plugin for using its dropzone support

Dependencies

License

Copyright (c) 2023 MiaoDa, released under the MIT license

Package Sidebar

Install

npm i miao-vuefinder

Weekly Downloads

82

Version

0.2.10

License

MIT

Unpacked Size

534 kB

Total Files

13

Last publish

Collaborators

  • miaoda