update dependencies, vue 3

Author: alexusmai

.browserslistrc

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.editorconfig

@@ -0,0 +1,2 @@
+VUE_APP_LFM_AXIOS_BASE_URL=http://lfm.loc/file-manager/
+VUE_APP_LFM_CSRF_TOKEN=OFF

.env.development

@@ -1,39 +1,23 @@
 module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: [
-    'plugin:vue/essential',
-    '@vue/airbnb',
-  ],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-param-reassign': [
-      'error',
-      {
-        'props': true,
-        'ignorePropertyModificationsFor': [
-          'state',
-          'acc',
-          'e',
-          'ctx',
-          'req',
-          'request',
-          'res',
-          'response',
-          '$scope',
+    env: {
+        browser: true,
+        es2021: true,
+    },
+    extends: ['plugin:vue/essential', 'airbnb-base', 'prettier'],
+    parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+    },
+    plugins: ['vue', 'prettier'],
+    rules: {
+        'prettier/prettier': 'error',
+        'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+        'no-param-reassign': [
+            'error',
+            {
+                props: true,
+                ignorePropertyModificationsFor: ['state'],
+            },
         ],
-      },
-    ],
-    'max-len': 'off',
-    'vue/no-use-v-if-with-v-for': [
-      'error', {
-        'allowUsingIterationVar': true,
-      }],
-  },
-  parserOptions: {
-    parser: 'babel-eslint',
-  },
+    },
 };

.eslintignore

@@ -1,6 +1,7 @@
-/node_modules/
-/dist/
-
-# Editor directories and files
-/.idea/
-/.env.development
+node_modules
+.DS_Store
+dist
+dist-ssr
+.idea/
+*.local
+.env.development

.eslintrc.js

@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 4,
+  "singleQuote": true
+}

.gitignore

@@ -1,8 +1,3 @@
 # Contributing
 
 > Contributions are welcome, and are accepted via pull requests.
-
-## Pull requests
-
-Please ensure all pull requests are made against the `develop` branch on GitHub.
-

.prettierrc.json

@@ -1,15 +1,14 @@
-# laravel-file-manager (Frontend)
+# Laravel file manager (Frontend)
 
-> File manager for Laravel - Frontend - Vue.js 
-
-> Backend - Laravel 5 package - [alexusmai/laravel-file-manager](https://github.com/alexusmai/laravel-file-manager)
+> Backend - Laravel package - [alexusmai/laravel-file-manager](https://github.com/alexusmai/laravel-file-manager)
 
 ![Laravel File Manager](https://raw.github.com/alexusmai/vue-laravel-file-manager/master/src/assets/laravel-file-manager.gif?raw=true)
 
-# v 2.4.0
-
-Now you can overwrite default settings using props
+# New in version 3
 
+- Vue.js 3
+- Bootstrap 5
+- Bootstrap icons
 
 ## Installation
 
@@ -23,90 +22,74 @@ $ npm install laravel-file-manager --save
 **IF** your App using Vuex store
 
 ```
+import { createApp } from 'vue';
+import { createStore } from 'vuex';
+
+// Source main component
+import Main from './components/Main.vue';
 import FileManager from 'laravel-file-manager'
-import store from './path-to-your-store/store'   // your Vuex store
+// your Vuex store
+import store from './path-to-your-store/store'  
 
-Vue.use(FileManager, {store})
+createApp(Main).use(store).use(FileManager, {store}).mount('#id');
 ```
 
 **ELSE** you need to create a new vuex instance
 
 ```
-import Vue from 'vue';
-import Vuex from 'vuex';
-import FileManager from 'laravel-file-manager'
+import { createApp } from 'vue';
+import { createStore } from 'vuex';
 
-Vue.use(Vuex);
+// Source main component
+import Main from './components/Main.vue';
+import FileManager from 'laravel-file-manager'
 
-// create Vuex store, if you don't have it
-const store = new Vuex.Store();
+// Create a new store instance.
+const store = createStore();
 
-Vue.use(FileManager, {store});
+createApp(Main).use(store).use(FileManager, {store}).mount('#id');
 ```
 
 `The application store module will be registered under the name 'fm'`
 
-You can overwrite some default settings
+Now vue component is registered and you can use it in your app
+```
+<file-manager></file-manager>
+```
+
+### You can overwrite some default settings
 
 ```
 // In the new version 2.4.0 and higher
 <file-manager v-bind:settings="settings"></file-manager>
 
 ...
 // settings object structure
-settings: {
-    // axios headers
-    headers: {
-      'X-Requested-With': 'XMLHttpRequest',
-      Authorization: `Bearer ${window.localStorage.getItem('user-token')}`,
-    },
-    baseUrl: 'http://test.loc/file-manager/',   // overwrite base url Axios
-    windowsConfig: 2,                           // overwrite config
-    lang: 'de',                                 // set language
-    translation: {                              // add new translation
-        name: de,
-        content: {
-            about: 'Über',
-            back: 'Zurück',
-            ... see lang file structure
+computed: {
+        settings() {
+            return {
+                // axios headers
+                headers: {
+                  'X-Requested-With': 'XMLHttpRequest',
+                  Authorization: `Bearer ${window.localStorage.getItem('user-token')}`,
+                },
+                baseUrl: 'http://test.loc/file-manager/',   // overwrite base url Axios
+                windowsConfig: 2,                           // overwrite config
+                lang: 'de',                                 // set language
+                translation: {                              // add new translation
+                    name: de,
+                    content: {
+                        about: 'Über',
+                        back: 'Zurück',
+                        ... see lang file structure
+                    },
+                },
+            };
         },
-    },
-},
+    }
 ...
 
-// Old versions
-Vue.use(FileManager, {
-    store, // required
-    
-    // not required params
-    
-    headers: {
-        'X-Requested-With': 'XMLHttpRequest',
-        'Authorization': 'Bearer ...'
-    },
-    // default headers example
-    headers: {
-        'X-Requested-With': 'XMLHttpRequest',
-        'X-CSRF-TOKEN': 'set laravel csrf token here...'
-    },
-    
-    baseUrl: 'http://my_url:80/file-manager/',  // overwrite base url Axios
-    windowsConfig: 2,
-    lang: 'de',                                 // set language
-    translation: {                              // add new translation
-        name: de,
-        content: {
-            about: 'Über',
-            back: 'Zurück',
-            ... see lang file structure
-        },
-    },
-}
-```
 
-Now vue component is registered and you can use it in your app
-```
-<file-manager></file-manager>
 ```
 
 ## Available Props
@@ -121,25 +104,22 @@ Now vue component is registered and you can use it in your app
 |  lang    |     String     |  'de'  |  No  | Set language |
 |  translation    |     Object     |  { ... see lang file structure },  |  No  | Add new translation |
 
-## CSRF, Bootstrap, FontAwesome
+## CSRF, Bootstrap, Bootstrap icons
 
-Don't forget add a csrf token to head block in your Laravel view and add bootstrap 4 and fontawesome 5 styles
+Don't forget to add a csrf token to head block in your Laravel view and add bootstrap 5 and bootstrap icons 5 styles
 ```
 <!-- CSRF Token -->
 <meta name="csrf-token" content="{{ csrf_token() }}">
 <!-- Example -->
-<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
-<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
 ```
 
-You can use [environment variables](https://laravel.com/docs/mix#environment-variables)
-
+[Laravel mix environment variables](https://laravel.com/docs/mix#environment-variables)
 ```
 // set baseUrl
 MIX_LFM_BASE_URL=http://my-url.loc/file-manager/
 
 // if you don't want to use csrf-token - you can off it
 MIX_LFM_CSRF_TOKEN=OFF
 ```
-
-Warning! Package use axios (Promise) - use babel-polyfill for ie11

CONTRIBUTING.md

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" href="/favicon.ico"/>
+    <title>Laravel file manager</title>
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+</head>
+<body>
+<noscript>
+    <strong>
+        We're sorry but file-manager doesn't work properly without JavaScript enabled. Please enable it to continue.
+    </strong>
+</noscript>
+
+<div class="container">
+    <div id="fm" style="height: 700px"></div>
+</div>
+<script type="module" src="/src/main.js"></script>
+</body>
+</html>