Bumped version to 2.1.1

Renamed file useBarDrag to createBarDrag
Re-enabled default import
Added plugin for auto-injecting CSS in vite build
Updated README

README.md

@@ -7,6 +7,9 @@
 />  
 
 <b>Vue Ganttastic</b> is a simple, interactive and highly customizable Gantt chart component for Vue 3.   
+
+![image](https://user-images.githubusercontent.com/28678851/148191571-76bd8d61-4583-4538-8c59-cc2915494890.png)
+
 </div>
 
 
@@ -92,6 +95,22 @@ const row2BarList = ref([
 
 ```
 
+## Contributing
+Clone the project, make some changes, test your changes out, create a pull request with a short summary of what changes you made. Contributing is warmly welcomed!
+
+To test your changes out before creating a pull request, create a build:
+```
+npm run build
+```
+To test out the build, you should create a tarball using:
+```
+npm pack
+```
+Then, place the tarball in some other test project and install the package from the tarball by using:
+```
+npm install <name_of_the_package>.tgz
+```
+
 ## Guide and Docs
 For further guides and references, check out the [official docs](https://infectoone.github.io/vue-ganttastic/getting-started.html).  
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infectoone/vue-ganttastic",
-  "version": "3.0.0",
+  "version": "2.1.1",
   "description": "A simple and customizable Gantt chart component for Vue.js",
   "author": "Marko Zunic (@infectoone)",
   "scripts": {
@@ -23,6 +23,7 @@
   ],
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.4",
+    "@senojs/rollup-plugin-style-inject": "^0.1.1",
     "@types/node": "^16.11.58",
     "@types/postcss-preset-env": "^7.7.0",
     "@vitejs/plugin-vue": "^3.1.0",

src/composables/useBarDragManagement.ts

@@ -1,7 +1,7 @@
 import type { GanttBarObject } from "../types"
 
 import { ref } from "vue"
-import createBarDrag from "./useBarDrag"
+import createBarDrag from "./createBarDrag"
 import useDayjsHelper from "./useDayjsHelper"
 import provideConfig from "../provider/provideConfig"
 import provideGetChartRows from "../provider/provideGetChartRows"

src/index.ts

@@ -24,3 +24,5 @@ export const ganttastic: Plugin = {
     app.component("GGanttRow", GGanttRow)
   }
 }
+
+export default ganttastic

src/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from "vue"
 import Playground from "./GanttPlayground.vue"
-import { ganttastic } from "./index"
+import ganttastic from "./index"
 
 createApp(Playground).use(ganttastic).mount("#app")

vite.config.ts → vite.config.mts

@@ -3,10 +3,16 @@ import { fileURLToPath, URL } from "node:url"
 import { defineConfig } from "vite"
 import vue from "@vitejs/plugin-vue"
 import postcssPresetEnv from "postcss-preset-env"
+import styleInject from "@senojs/rollup-plugin-style-inject"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    styleInject({
+      insertAt: "top"
+    })
+  ],
   css: {
     postcss: {
       plugins: [postcssPresetEnv()]