Skip to content

Commit 19fab17

Browse files
d2phapd2phap
authored
Merge pull request #38 from d2phap/feature/vue-3
Feature: Support Vue 3 + TypeScript
2 parents 238a34a + 5a0b5c8 commit 19fab17

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+25053
-11416
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

‎README.md

Lines changed: 45 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
# Vue File selector
1+
# Vue File selector for Vuejs 3
22
[![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)
33

44
File selector with validation that supports drag-n-drop for Vuejs.
55

6-
![Vue File selector](https://github.com/d2phap/vue-file-selector/raw/master/demo/public/screenshot.jpg)
6+
![Vue File selector](https://github.com/d2phap/vue-file-selector/raw/main/demo/public/screenshot.jpg)
77

88

99
### Other open source projects
@@ -23,47 +23,60 @@ NPM package: https://www.npmjs.com/package/vue-file-selector
2323
Github source: https://github.com/d2phap/vue-file-selector
2424

2525
## Usage
26-
Please see [Demo project](https://github.com/d2phap/vue-file-selector/tree/master/demo) for full example.
26+
Please see [Demo project](https://github.com/d2phap/vue-file-selector/tree/main/demo) for full example.
2727

2828
### Declare the plugin
2929
```js
30-
// import the library
30+
// in main.ts
31+
32+
import { createApp } from 'vue';
33+
34+
// import FileSelector main css
35+
import 'vue-file-selector/dist/main.css';
36+
37+
// import the FileSelector plugin
3138
import FileSelector from 'vue-file-selector';
3239

33-
// then use it!
34-
Vue.use(FileSelector);
40+
41+
import App from './App.vue';
42+
43+
createApp(App)
44+
45+
// then use it!
46+
.use(FileSelector)
47+
.mount('#app');
3548
```
3649

3750
### Use in Vue file
3851
```html
3952
<template>
4053
<div>
41-
<file-selector
54+
<FileSelector
4255
accept-extensions=".jpg,.svg"
4356
:multiple="true"
4457
:max-file-size="5 * 1024 * 1024"
4558
@validated="handleFilesValidated"
46-
@changed="handleFilesChanged"
47-
>
59+
@changed="handleFilesChanged">
4860
Select image files
49-
</file-selector>
61+
</FileSelector>
5062
</div>
5163
</template>
5264

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+
<script lang="ts">
66+
import { Options, Vue } from 'vue-class-component';
67+
import { FsValidationResult } from 'vue-file-selector/dist';
68+
69+
@Options({})
70+
export default class App extends Vue {
71+
handleFilesValidated(result: FsValidationResult, files: File[]) {
72+
console.log('Validation result: ' + result);
73+
},
74+
75+
handleFilesChanged(files: File[]) {
76+
console.log('Selected files: ');
77+
console.table(files);
6578
},
66-
};
79+
}
6780
</script>
6881
```
6982

@@ -79,20 +92,20 @@ export default {
7992
## Props
8093
| Name | Type | Default | Description |
8194
| -- | -- | -- | -- |
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. |
95+
| `multiple` | `boolean` | `false` | Allow multiple files selected. |
96+
| `isLoading` | `boolean` | `false` | Show or hide the loading section (slot: `loader`). |
97+
| `acceptExtensions` | `string` | `(empty)` | List of file extensions accepted. Each extension separated by a comma (`,`). E.g. `accept-extensions=".zip,.rar"`. |
98+
| `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). |
99+
| `height` | `number` | `NaN` | The height of droppable section. |
100+
| `validateFn` | `FsValidateFn` | `() => true` | A custom validation function that returns boolean value. |
88101

89102

90103
## Events
91104
### 1. `@validated`
92105
Occurs after the selected files validated.
93106

94107
```js
95-
Function(result: String | Boolean, files: FileList): void
108+
Function(result: FsValidationResult, files: File[]): void
96109
```
97110
- `result`: validation result,
98111
+ returns `true` if the file validation is valid, else
@@ -103,13 +116,13 @@ Function(result: String | Boolean, files: FileList): void
103116
Occurs if the selected files pass validation.
104117

105118
```js
106-
Function(files: FileList): void
119+
Function(files: File[]): void
107120
```
108121
- `files`: list of files validated.
109122

110123

111124
## Error codes
112-
List of error codes returned after validation.
125+
List of error codes returned after validation, see `FsValidationResult`.
113126

114127
| Code | Error description |
115128
| -- | -- |

‎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+
};

‎demo/.browserslistrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
> 1%
2+
last 2 versions
3+
not dead
4+
not ie 11

‎demo/.editorconfig

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
[*.{js,jsx,ts,tsx,vue}]
2+
indent_style = space
3+
indent_size = 2
4+
end_of_line = lf
5+
trim_trailing_whitespace = true
6+
insert_final_newline = true
7+
max_line_length = 100

‎demo/.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+
};

‎demo/.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
6+
# local env files
7+
.env.local
8+
.env.*.local
9+
10+
# Log files
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
pnpm-debug.log*
15+
16+
# Editor directories and files
17+
.idea
18+
.vscode
19+
*.suo
20+
*.ntvs*
21+
*.njsproj
22+
*.sln
23+
*.sw?

‎demo/README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# demo
2+
3+
## Project setup
4+
```
5+
npm install
6+
```
7+
8+
### Compiles and hot-reloads for development
9+
```
10+
npm run serve
11+
```
12+
13+
### Compiles and minifies for production
14+
```
15+
npm run build
16+
```
17+
18+
### Lints and fixes files
19+
```
20+
npm run lint
21+
```
22+
23+
### Customize configuration
24+
See [Configuration Reference](https://cli.vuejs.org/config/).

0 commit comments

Comments
 (0)