add file upload over drag and drop feature (#1)

.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ["eslint:recommended", "plugin:vue/essential", "prettier"],
+  parserOptions: {
+    parser: "babel-eslint",
+  },
+  plugins: [],
+  rules: {},
+  ignorePatterns: [],
+};

.prettierignore

@@ -0,0 +1,24 @@
+.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?
+

.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  semi: true,
+  singleQuote: false,
+};

README.md

@@ -1,24 +1,56 @@
-# vue-drag-and-drop
+# Vue File drag and drop
+
+![Screenshot](https://raw.githubusercontent.com/CSalih/CSalih/main/public/screenshot.png)  
+Vue component that provides a convenient use of the HTML drag and drop interface.
+
+## Usage
+
+Npm
+
+```bash
+npm install vue-meeting-selector --save
+```
+
+Yarn
+
+```bash
+yarn add vue-meeting-selector
+```
+
+Include in Vue
+
+```js
+import VueMeetingSelector from "vue-meeting-selector";
+```
+
+## Documentation
+
+Need a documentation? Please create an issue.
 
 ## Project setup
+
 ```
 yarn install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 yarn serve
 ```
 
 ### Compiles and minifies for production
+
 ```
 yarn build
 ```
 
 ### Lints and fixes files
+
 ```
 yarn lint
 ```
 
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+  presets: ["@vue/cli-plugin-babel/preset"],
+};

package.json

@@ -1,42 +1,64 @@
 {
-  "name": "vue-drag-and-drop",
+  "name": "vue-file-drag-and-drop",
   "version": "0.1.0",
-  "private": true,
+  "license": "MIT",
+  "description": "Vue component that provides a convenient use of the HTML drag and drop interface",
+  "author": "Salih Candir <[email protected]>",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "serve": "vue-cli-service serve src/main.js",
+    "build:lib": "vue-cli-service build --target lib --name vue-file-drag-and-drop src/lib.js",
+    "lint": "yarn lint:es && yarn lint:style",
+    "lint:es": "vue-cli-service lint --fix",
+    "lint:style": "prettier --write --ignore-unknown .",
+    "lint:check": "vue-cli-service lint --no-fix && prettier --check --ignore-unknown ."
   },
-  "dependencies": {
-    "core-js": "^3.6.5",
+  "main": "./dist/vue-file-drag-and-drop.common.js",
+  "files": [
+    "dist/*",
+    "src/*",
+    "README.md"
+  ],
+  "peerDependencies": {
     "vue": "^2.6.11"
   },
   "devDependencies": {
+    "@tailwindcss/postcss7-compat": "^2.0.2",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
+    "autoprefixer": "^9",
     "babel-eslint": "^10.1.0",
+    "core-js": "^3.6.5",
     "eslint": "^6.7.2",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-vue": "^6.2.2",
+    "postcss": "^7",
+    "prettier": "2.4.1",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
+    "vue": "^2.6.11",
+    "vue-cli-plugin-tailwind": "~2.0.6",
     "vue-template-compiler": "^2.6.11"
   },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not dead"
-  ]
+  ],
+  "keywords": [
+    "vue",
+    "vuejs",
+    "drag-and-drop",
+    "file",
+    "image",
+    "tailwind"
+  ],
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CSalih/vue-file-drag-and-drop.git"
+  },
+  "bugs": {
+    "url": "https://github.com/CSalih/vue-file-drag-and-drop/issues"
+  },
+  "homepage": "https://github.com/CSalih/vue-file-drag-and-drop#readme"
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

public/index.html

@@ -1,15 +1,19 @@
 <!DOCTYPE html>
 <html lang="">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

src/App.vue

@@ -1,28 +1,48 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+  <article class="container mx-auto">
+    <header class="mx-auto text-center">
+      <div class="bg-white">
+        <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
+          <div class="text-center">
+            <img class="h-12 mx-auto" alt="Vue logo" src="./assets/logo.png" />
+            <p
+              class="
+                mt-1
+                text-4xl
+                font-bold
+                text-gray-900
+                sm:text-5xl sm:tracking-tight
+                lg:text-6xl
+              "
+            >
+              Vue File Drag and drop
+            </p>
+            <p class="max-w-xl mt-5 mx-auto text-xl text-gray-500">
+              Vue component that provides a convenient use of the HTML drag and
+              drop interface
+            </p>
+          </div>
+        </div>
+      </div>
+    </header>
+    <main>
+      <vue-file-drag-and-drop v-model="files" />
+    </main>
+  </article>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import VueFileDragAndDrop from "@/components/VueFileDragAndDrop.vue";
 
 export default {
-  name: 'App',
+  name: "App",
   components: {
-    HelloWorld
-  }
-}
+    VueFileDragAndDrop,
+  },
+  data() {
+    return {
+      files: [],
+    };
+  },
+};
 </script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

src/assets/css/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;