Merge pull request #38 from d2phap/feature/vue-3

Feature: Support Vue 3 + TypeScript
d2phap · Jun 17, 2022 · 19fab17 · 19fab17
2 parents 238a34a + 5a0b5c8
commit 19fab17
Show file tree

Hide file tree

Showing 45 changed files with 25,053 additions and 11,416 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,62 @@
+const isProduction = process.env.NODE_ENV === 'production';
+
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    '@vue/airbnb',
+    '@vue/typescript/recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 2021,
+  },
+  rules: {
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/brace-style': 'off',
+    '@typescript-eslint/lines-between-class-members': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': isProduction ? 'error' : 'warn',
+    'arrow-parens': 'off',
+    'brace-style': ['error', 'stroustrup', { allowSingleLine: true }],
+    'camelcase': 'off',
+    'class-methods-use-this': 'off',
+    'import/extensions': 'off',
+    'import/no-cycle': 'off',
+    'linebreak-style': 'off',
+    'lines-between-class-members': 'off',
+    'max-classes-per-file': 'off',
+    'no-await-in-loop': 'off',
+    'no-console': isProduction ? 'warn' : 'off',
+    'no-continue': 'off',
+    'no-debugger': isProduction ? 'warn' : 'off',
+    'no-empty': 'off',
+    'no-multiple-empty-lines': ['error', { max: 2, maxEOF: 1, maxBOF: 1 }],
+    'no-param-reassign': 'off',
+    'no-plusplus': 'off',
+    'no-restricted-globals': 'off',
+    // https://github.com/typescript-eslint/typescript-eslint/blob/main/docs/linting/TROUBLESHOOTING.md#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+    'no-undef': 'off',
+    'prefer-object-spread': 'off',
+
+    'vuejs-accessibility/heading-has-content': 'off',
+    'vuejs-accessibility/mouse-events-have-key-events': 'off',
+    'vuejs-accessibility/click-events-have-key-events': 'off',
+    'vuejs-accessibility/label-has-for': 'off',
+    'vuejs-accessibility/form-control-has-label': 'off',
+  },
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)',
+      ],
+      env: {
+        jest: true,
+      },
+    },
+  ],
+};
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Phap Dieu Duong
+Copyright (c) 2019-2022 Phap Dieu Duong
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
-# Vue File selector
+# Vue File selector for Vuejs 3
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fd2phap%2Fvue-file-selector.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fd2phap%2Fvue-file-selector?ref=badge_shield)
 
 File selector with validation that supports drag-n-drop for Vuejs.
 
-![Vue File selector](https://github.com/d2phap/vue-file-selector/raw/master/demo/public/screenshot.jpg)
+![Vue File selector](https://github.com/d2phap/vue-file-selector/raw/main/demo/public/screenshot.jpg)
 
 
 ### Other open source projects
@@ -23,47 +23,60 @@ NPM package: https://www.npmjs.com/package/vue-file-selector
 Github source: https://github.com/d2phap/vue-file-selector
 
 ## Usage
-Please see [Demo project](https://github.com/d2phap/vue-file-selector/tree/master/demo) for full example.
+Please see [Demo project](https://github.com/d2phap/vue-file-selector/tree/main/demo) for full example.
 
 ### Declare the plugin
 ```js
-// import the library
+// in main.ts
+
+import { createApp } from 'vue';
+
+// import FileSelector main css
+import 'vue-file-selector/dist/main.css';
+
+// import the FileSelector plugin
 import FileSelector from 'vue-file-selector';
 
-// then use it!
-Vue.use(FileSelector);
+
+import App from './App.vue';
+
+createApp(App)
+
+  // then use it!
+  .use(FileSelector)
+  .mount('#app');
 ```
 
 ### Use in Vue file
 ```html
 <template>
   <div>
-    <file-selector
+    <FileSelector
       accept-extensions=".jpg,.svg"
       :multiple="true"
       :max-file-size="5 * 1024 * 1024"
       @validated="handleFilesValidated"
-      @changed="handleFilesChanged"
-    >
+      @changed="handleFilesChanged">
       Select image files
-    </file-selector>
+    </FileSelector>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'App',
-  methods: {
-    handleFilesValidated(result, files) {
-      console.log('Validation result: ' + result);
-    },
-
-    handleFilesChanged(files) {
-      console.log('Selected files: ');
-      console.table(files);
-    },
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component';
+import { FsValidationResult } from 'vue-file-selector/dist';
+
+@Options({})
+export default class App extends Vue {
+  handleFilesValidated(result: FsValidationResult, files: File[]) {
+    console.log('Validation result: ' + result);
+  },
+
+  handleFilesChanged(files: File[]) {
+    console.log('Selected files: ');
+    console.table(files);
   },
-};
+}
 </script>
 ```
 
@@ -79,20 +92,20 @@ export default {
 ## Props
 | Name | Type | Default | Description |
 | -- | -- | -- | -- |
-| `multiple` | `Boolean` | `false` | Allow multiple files selected. |
-| `isLoading` | `Boolean` | `false` | Show or hide the loading section (slot: `loader`). |
-| `acceptExtensions` | `String` | `(empty)` | List of file extensions accepted. Each extension separated by a comma (`,`). E.g. `accept-extensions=".zip,.rar"`. |
-| `maxFileSize` | `Number` | `NaN` | Maximum **size in byte** of every single file allowed. E.g. `:max-file-size="2*1024*1024"` (only the files that ≤2 MB are allowed). |
-| `height` | `Number` | `NaN` | The height of droppable section. |
-| `validateFn` | `Function -> Boolean` | `() => true` | A custom validation function that returns boolean value. |
+| `multiple` | `boolean` | `false` | Allow multiple files selected. |
+| `isLoading` | `boolean` | `false` | Show or hide the loading section (slot: `loader`). |
+| `acceptExtensions` | `string` | `(empty)` | List of file extensions accepted. Each extension separated by a comma (`,`). E.g. `accept-extensions=".zip,.rar"`. |
+| `maxFileSize` | `number` | `NaN` | Maximum **size in byte** of every single file allowed. E.g. `:max-file-size="2*1024*1024"` (only the files that ≤2 MB are allowed). |
+| `height` | `number` | `NaN` | The height of droppable section. |
+| `validateFn` | `FsValidateFn` | `() => true` | A custom validation function that returns boolean value. |
 
 
 ## Events
 ### 1. `@validated`
 Occurs after the selected files validated.
 
 ```js
-Function(result: String | Boolean, files: FileList): void
+Function(result: FsValidationResult, files: File[]): void
 ```
 - `result`: validation result, 
   + returns `true` if the file validation is valid, else
@@ -103,13 +116,13 @@ Function(result: String | Boolean, files: FileList): void
 Occurs if the selected files pass validation.
 
 ```js
-Function(files: FileList): void
+Function(files: File[]): void
 ```
 - `files`: list of files validated.
 
 
 ## Error codes
-List of error codes returned after validation.
+List of error codes returned after validation, see `FsValidationResult`.
 
 | Code | Error description |
 | -- | -- |

diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+  ],
+};
diff --git a/demo/.browserslistrc b/demo/.browserslistrc
@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11
diff --git a/demo/.editorconfig b/demo/.editorconfig
@@ -0,0 +1,7 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100
diff --git a/demo/.eslintrc.js b/demo/.eslintrc.js
@@ -0,0 +1,62 @@
+const isProduction = process.env.NODE_ENV === 'production';
+
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    '@vue/airbnb',
+    '@vue/typescript/recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 2021,
+  },
+  rules: {
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/brace-style': 'off',
+    '@typescript-eslint/lines-between-class-members': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': isProduction ? 'error' : 'warn',
+    'arrow-parens': 'off',
+    'brace-style': ['error', 'stroustrup', { allowSingleLine: true }],
+    'camelcase': 'off',
+    'class-methods-use-this': 'off',
+    'import/extensions': 'off',
+    'import/no-cycle': 'off',
+    'linebreak-style': 'off',
+    'lines-between-class-members': 'off',
+    'max-classes-per-file': 'off',
+    'no-await-in-loop': 'off',
+    'no-console': isProduction ? 'warn' : 'off',
+    'no-continue': 'off',
+    'no-debugger': isProduction ? 'warn' : 'off',
+    'no-empty': 'off',
+    'no-multiple-empty-lines': ['error', { max: 2, maxEOF: 1, maxBOF: 1 }],
+    'no-param-reassign': 'off',
+    'no-plusplus': 'off',
+    'no-restricted-globals': 'off',
+    // https://github.com/typescript-eslint/typescript-eslint/blob/main/docs/linting/TROUBLESHOOTING.md#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+    'no-undef': 'off',
+    'prefer-object-spread': 'off',
+
+    'vuejs-accessibility/heading-has-content': 'off',
+    'vuejs-accessibility/mouse-events-have-key-events': 'off',
+    'vuejs-accessibility/click-events-have-key-events': 'off',
+    'vuejs-accessibility/label-has-for': 'off',
+    'vuejs-accessibility/form-control-has-label': 'off',
+  },
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)',
+      ],
+      env: {
+        jest: true,
+      },
+    },
+  ],
+};
diff --git a/demo/.gitignore b/demo/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/demo/README.md b/demo/README.md
@@ -0,0 +1,24 @@
+# demo
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/demo/babel.config.js b/demo/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+  ],
+};