Skip to content

Commit 4c75329

Browse files
d2phapd2phap
committed
updated to vuejs 3
1 parent 238a34a commit 4c75329

22 files changed

+2621
-6532
lines changed

‎.babelrc

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎.eslintrc.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
const isProduction = process.env.NODE_ENV === 'production';
2+
3+
module.exports = {
4+
root: true,
5+
env: {
6+
node: true,
7+
},
8+
extends: [
9+
'plugin:vue/vue3-essential',
10+
'@vue/airbnb',
11+
'@vue/typescript/recommended',
12+
],
13+
parserOptions: {
14+
ecmaVersion: 2021,
15+
},
16+
rules: {
17+
'@typescript-eslint/ban-types': 'off',
18+
'@typescript-eslint/ban-ts-comment': 'off',
19+
'@typescript-eslint/brace-style': 'off',
20+
'@typescript-eslint/lines-between-class-members': 'off',
21+
'@typescript-eslint/no-explicit-any': 'off',
22+
'@typescript-eslint/no-unused-vars': isProduction ? 'error' : 'warn',
23+
'arrow-parens': 'off',
24+
'brace-style': ['error', 'stroustrup', { allowSingleLine: true }],
25+
'camelcase': 'off',
26+
'class-methods-use-this': 'off',
27+
'import/extensions': 'off',
28+
'import/no-cycle': 'off',
29+
'linebreak-style': 'off',
30+
'lines-between-class-members': 'off',
31+
'max-classes-per-file': 'off',
32+
'no-await-in-loop': 'off',
33+
'no-console': isProduction ? 'warn' : 'off',
34+
'no-continue': 'off',
35+
'no-debugger': isProduction ? 'warn' : 'off',
36+
'no-empty': 'off',
37+
'no-multiple-empty-lines': ['error', { max: 2, maxEOF: 1, maxBOF: 1 }],
38+
'no-param-reassign': 'off',
39+
'no-plusplus': 'off',
40+
'no-restricted-globals': 'off',
41+
// 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
42+
'no-undef': 'off',
43+
'prefer-object-spread': 'off',
44+
45+
'vuejs-accessibility/heading-has-content': 'off',
46+
'vuejs-accessibility/mouse-events-have-key-events': 'off',
47+
'vuejs-accessibility/click-events-have-key-events': 'off',
48+
'vuejs-accessibility/label-has-for': 'off',
49+
'vuejs-accessibility/form-control-has-label': 'off',
50+
},
51+
overrides: [
52+
{
53+
files: [
54+
'**/__tests__/*.{j,t}s?(x)',
55+
'**/tests/unit/**/*.spec.{j,t}s?(x)',
56+
],
57+
env: {
58+
jest: true,
59+
},
60+
},
61+
],
62+
};

‎LICENSE

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2019 Phap Dieu Duong
3+
Copyright (c) 2019-2022 Phap Dieu Duong
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎babel.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset',
4+
],
5+
};

‎dist/FileSelector.d.ts

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { FsValidationResult } from './types';
2+
declare const _default: import("vue").DefineComponent<{
3+
multiple: {
4+
type: BooleanConstructor;
5+
default: boolean;
6+
};
7+
isLoading: {
8+
type: BooleanConstructor;
9+
default: boolean;
10+
};
11+
acceptExtensions: {
12+
type: StringConstructor;
13+
default: string;
14+
};
15+
maxFileSize: {
16+
type: NumberConstructor;
17+
default: number;
18+
};
19+
height: {
20+
type: NumberConstructor;
21+
default: number;
22+
};
23+
validateFn: {
24+
type: FunctionConstructor;
25+
default: () => boolean;
26+
};
27+
}, {
28+
isDragEnter: import("vue").Ref<boolean>;
29+
}, unknown, {}, {
30+
handleFilesChange(e: InputEvent): void;
31+
handleDrop(e: DragEvent): void;
32+
preprocessFiles(files: File[]): void;
33+
validate(files: File[]): FsValidationResult;
34+
checkFileExtensions(files: File[]): boolean;
35+
checkFileSize(files: File[]): boolean;
36+
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
37+
multiple: {
38+
type: BooleanConstructor;
39+
default: boolean;
40+
};
41+
isLoading: {
42+
type: BooleanConstructor;
43+
default: boolean;
44+
};
45+
acceptExtensions: {
46+
type: StringConstructor;
47+
default: string;
48+
};
49+
maxFileSize: {
50+
type: NumberConstructor;
51+
default: number;
52+
};
53+
height: {
54+
type: NumberConstructor;
55+
default: number;
56+
};
57+
validateFn: {
58+
type: FunctionConstructor;
59+
default: () => boolean;
60+
};
61+
}>>, {
62+
multiple: boolean;
63+
isLoading: boolean;
64+
acceptExtensions: string;
65+
maxFileSize: number;
66+
height: number;
67+
validateFn: Function;
68+
}>;
69+
export default _default;

‎dist/LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019-2022 Phap Dieu Duong
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎dist/README.md

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
# Vue File selector
2+
[![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)
3+
4+
File selector with validation that supports drag-n-drop for Vuejs.
5+
6+
![Vue File selector](https://github.com/d2phap/vue-file-selector/raw/master/demo/public/screenshot.jpg)
7+
8+
9+
### Other open source projects
10+
- `ImageGlass` - A lightweight, versatile image viewer: https://imageglass.org
11+
- `Fluent Reveal Effect Js` (Fluent Design System): https://github.com/d2phap/fluent-reveal-effect
12+
- `FileWatcherEx` - A wrapper of C# FileSystemWatcher for Windows: https://github.com/d2phap/FileWatcherEx
13+
14+
15+
## Install
16+
Run the command
17+
```
18+
npm i vue-file-selector@latest
19+
```
20+
21+
NPM package: https://www.npmjs.com/package/vue-file-selector
22+
23+
Github source: https://github.com/d2phap/vue-file-selector
24+
25+
## Usage
26+
Please see [Demo project](https://github.com/d2phap/vue-file-selector/tree/master/demo) for full example.
27+
28+
### Declare the plugin
29+
```js
30+
// import the library
31+
import FileSelector from 'vue-file-selector';
32+
33+
// then use it!
34+
Vue.use(FileSelector);
35+
```
36+
37+
### Use in Vue file
38+
```html
39+
<template>
40+
<div>
41+
<file-selector
42+
accept-extensions=".jpg,.svg"
43+
:multiple="true"
44+
:max-file-size="5 * 1024 * 1024"
45+
@validated="handleFilesValidated"
46+
@changed="handleFilesChanged"
47+
>
48+
Select image files
49+
</file-selector>
50+
</div>
51+
</template>
52+
53+
<script>
54+
export default {
55+
name: 'App',
56+
methods: {
57+
handleFilesValidated(result, files) {
58+
console.log('Validation result: ' + result);
59+
},
60+
61+
handleFilesChanged(files) {
62+
console.log('Selected files: ');
63+
console.table(files);
64+
},
65+
},
66+
};
67+
</script>
68+
```
69+
70+
## Slots
71+
| Name | Default | Description |
72+
| -- | -- | -- |
73+
| `default` | `Select` | Content of the `Select` button. |
74+
| `loader` | `Loading...` | Content of loading state. |
75+
| `top` | `(empty)` | Top section content, above the `Select` button. |
76+
| `bottom` | `(empty)` | Bottom section content, below the `Select` button. |
77+
78+
79+
## Props
80+
| Name | Type | Default | Description |
81+
| -- | -- | -- | -- |
82+
| `multiple` | `Boolean` | `false` | Allow multiple files selected. |
83+
| `isLoading` | `Boolean` | `false` | Show or hide the loading section (slot: `loader`). |
84+
| `acceptExtensions` | `String` | `(empty)` | List of file extensions accepted. Each extension separated by a comma (`,`). E.g. `accept-extensions=".zip,.rar"`. |
85+
| `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). |
86+
| `height` | `Number` | `NaN` | The height of droppable section. |
87+
| `validateFn` | `Function -> Boolean` | `() => true` | A custom validation function that returns boolean value. |
88+
89+
90+
## Events
91+
### 1. `@validated`
92+
Occurs after the selected files validated.
93+
94+
```js
95+
Function(result: String | Boolean, files: FileList): void
96+
```
97+
- `result`: validation result,
98+
+ returns `true` if the file validation is valid, else
99+
+ returns `false` or [Error codes (`string`)](#error-codes).
100+
- `files`: list of files validated.
101+
102+
### 2. `@changed`
103+
Occurs if the selected files pass validation.
104+
105+
```js
106+
Function(files: FileList): void
107+
```
108+
- `files`: list of files validated.
109+
110+
111+
## Error codes
112+
List of error codes returned after validation.
113+
114+
| Code | Error description |
115+
| -- | -- |
116+
| `EXTENSION_ERROR` | The selected files contain invalid extensions. |
117+
| `FILE_SIZE_ERROR` | The selected files size exceeded limit. |
118+
| `MULTIFILES_ERROR` | Multiple files selection is not allowed. |
119+
120+
121+
## License
122+
[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fd2phap%2Fvue-file-selector.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fd2phap%2Fvue-file-selector?ref=badge_large)
123+

‎dist/index.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { Plugin } from 'vue';
2+
export * from './types';
3+
declare const FileSelector: Plugin;
4+
export default FileSelector;

0 commit comments

Comments
 (0)