0.2.10 • Published 26 days ago
miao-vuefinder v0.2.10
Miao-Vuefinder File Manager
**This is a special version, remove the edit function, and add Chinese;
About
Vuefinder is a file manager component for Vue.js version 3
Origin Demo
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
- Vue3
- Cropperjs : JavaScript image cropper
- DragSelect : Selection utility
- Plupload : Upload library
- vanilla-lazyload : lazy loading for thumbnails
License
Copyright (c) 2023 MiaoDa, released under the MIT license
0.2.10
26 days ago
0.2.9
1 month ago
0.2.8
1 month ago
0.2.7
8 months ago
0.2.6
8 months ago
0.2.5
8 months ago
0.2.0
12 months ago
0.1.5
12 months ago
0.1.4
12 months ago
0.1.3
12 months ago
0.1.2
12 months ago
0.1.1
12 months ago
0.1.0
12 months ago
0.0.13
12 months ago
0.0.12
12 months ago
0.0.11
12 months ago
0.0.10
12 months ago
0.0.9
12 months ago
0.0.8
12 months ago
0.0.7
12 months ago
0.0.6
12 months ago
0.0.5
12 months ago
0.0.4
12 months ago
0.0.3
12 months ago
0.0.2
12 months ago
0.0.1
12 months ago