feat: can add CSS class to gantt bar configuration

zunnzunn · zunnzunn · commit 65d3ebc306d7 · 2023-08-15T19:14:22.000+02:00
Bumped version, updated docs and README Fixes #74
diff --git a/README.md b/README.md
@@ -1,33 +1,38 @@
 # Vue Ganttastic
+
 <div style="display: flex; flex-direction: column; align-items:center;">
 <img
     src="https://user-images.githubusercontent.com/28678851/148047714-301f07df-4101-48b8-9e47-1f272b290e80.png" 
     style="margin: 10px;" height="150"
     alt="Vue Ganttastic logo"
-/>  
+/>
 
-<b>Vue Ganttastic</b> is a simple, interactive and highly customizable Gantt chart component for Vue 3.   
+<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>
 
-
 ## Features
+
 - **[Vue 3](https://v3.vuejs.org/) support**
-- **[TypeScript](https://www.typescriptlang.org/) support** *(ships with out of the box type declarations)*
-- **Interactivity** *(dynamic, movable and pushable bars)*
-- **Reactivity / Responsiveness** (*when changes occur, bars are repositioned accordingly*)
-- **Customization options** (*chart/bar styling, slots, event handlers etc.*)
+- **[TypeScript](https://www.typescriptlang.org/) support** _(ships with out of the box type declarations)_
+- **Interactivity** _(dynamic, movable and pushable bars)_
+- **Reactivity / Responsiveness** (_when changes occur, bars are repositioned accordingly_)
+- **Customization options** (_chart/bar styling, slots, event handlers etc._)
 
-Using Vue 2? Check out [Vue-Ganttastic v1](https://github.com/zunnzunn/vue-ganttastic/tree/vue-ganttastic-v1).  
+Using Vue 2? Check out [Vue-Ganttastic v1](https://github.com/zunnzunn/vue-ganttastic/tree/vue-ganttastic-v1).
 
 ## Quickstart
+
 Install using
+
 ```
 npm install @infectoone/vue-ganttastic
 ```
+
 Then, initalize the plugin in the starting point of your app (most likely src/main.js):
+
 ```js
 import { createApp } from "vue"
 import App from "./App.vue"
@@ -40,6 +45,7 @@ createApp(App)
 ```
 
 This will globally register the components g-gantt-chart and g-gantt-row and you will be able to use those two components right away.
+
 ```html
 <template>
   <g-gantt-chart
@@ -49,76 +55,80 @@ This will globally register the components g-gantt-chart and g-gantt-row and you
     bar-start="myBeginDate"
     bar-end="myEndDate"
   >
-    <g-gantt-row
-      label="My row 1"
-      :bars="row1BarList"
-    />
-    <g-gantt-row
-      label="My row 2"
-      :bars="row2BarList"
-    />
+    <g-gantt-row label="My row 1" :bars="row1BarList" />
+    <g-gantt-row label="My row 2" :bars="row2BarList" />
   </g-gantt-chart>
 </template>
 
 <script setup>
-
-import { ref } from "vue"
-
-const row1BarList = ref([
-  {
-    myBeginDate: "2021-07-13 13:00",
-    myEndDate: "2021-07-13 19:00",
-    ganttBarConfig: {    // each bar must have a nested ganttBarConfig object ...
-      id: "unique-id-1", // ... and a unique "id" property
-      label: "Lorem ipsum dolor"
+  import { ref } from "vue"
+
+  const row1BarList = ref([
+    {
+      myBeginDate: "2021-07-13 13:00",
+      myEndDate: "2021-07-13 19:00",
+      ganttBarConfig: {
+        // each bar must have a nested ganttBarConfig object ...
+        id: "unique-id-1", // ... and a unique "id" property
+        label: "Lorem ipsum dolor"
+      }
     }
-  }
-])
-const row2BarList = ref([
-  {
-    myBeginDate: "2021-07-13 00:00",
-    myEndDate: "2021-07-14 02:00",
-    ganttBarConfig: {
-      id: "another-unique-id-2",
-      hasHandles: true,
-      label: "Hey, look at me",
-      style: {     // arbitrary CSS styling for your bar
-        background: "#e09b69",
-        borderRadius: "20px",
-        color: "black"
+  ])
+  const row2BarList = ref([
+    {
+      myBeginDate: "2021-07-13 00:00",
+      myEndDate: "2021-07-14 02:00",
+      ganttBarConfig: {
+        id: "another-unique-id-2",
+        hasHandles: true,
+        label: "Hey, look at me",
+        style: {
+          // arbitrary CSS styling for your bar
+          background: "#e09b69",
+          borderRadius: "20px",
+          color: "black"
+        },
+        class: "foo" // you can also add CSS classes to your bars!
       }
     }
-  }
-])
+  ])
 </script>
-
 ```
 
 ## 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://zunnzunn.github.io/vue-ganttastic/getting-started.html).  
+
+For further guides and references, check out the [official docs](https://zunnzunn.github.io/vue-ganttastic/getting-started.html).
 
 ## About
+
 **License** [MIT](https://choosealicense.com/licenses/mit/)  
 **Author**: Marko Žunić, BSc  
-[GitHub Repository](https://github.com/zunnzunn/vue-ganttastic)  
+[GitHub Repository](https://github.com/zunnzunn/vue-ganttastic)
 
 ## Support the project!
+
 In case you found the library useful, a little tip would be much appreciated!
 
 <form action="https://www.paypal.com/donate" method="post" target="_top">
@@ -128,12 +138,12 @@ In case you found the library useful, a little tip would be much appreciated!
 </form>
 
 BTC address:  
-![image](https://user-images.githubusercontent.com/28678851/233090745-a0a6d8a4-6df6-4b82-ac0c-90e69551786e.png)  
-
+![image](https://user-images.githubusercontent.com/28678851/233090745-a0a6d8a4-6df6-4b82-ac0c-90e69551786e.png)
 
 ## Screenshots
+
 ![image](https://user-images.githubusercontent.com/28678851/148191571-76bd8d61-4583-4538-8c59-cc2915494890.png)
 
-![image](https://user-images.githubusercontent.com/28678851/148191529-b50c0d17-bcc1-4a78-9d2c-ff2a36b03f52.png)  
+![image](https://user-images.githubusercontent.com/28678851/148191529-b50c0d17-bcc1-4a78-9d2c-ff2a36b03f52.png)
 
 ![image](https://user-images.githubusercontent.com/28678851/148191757-a2520dce-aeed-43df-87b2-3a64e225f9e7.png)
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -6,7 +6,8 @@ You can add Vue Ganttastic to your project using <kbd>npm</kbd>:
 
 ```
 npm install @infectoone/vue-ganttastic
-```  
+```
+
 Then, initalize the plugin in the starting point of your app (most likely `src/main.js`):
 
 ```javascript
@@ -24,7 +25,6 @@ This will globally register the components `g-gantt-chart` and `g-gantt-row` and
 
 ## Basic usage
 
-
 ```vue
 <template>
   <g-gantt-chart
@@ -34,26 +34,20 @@ This will globally register the components `g-gantt-chart` and `g-gantt-row` and
     bar-start="myBeginDate"
     bar-end="myEndDate"
   >
-    <g-gantt-row
-      label="My row 1"
-      :bars="row1BarList"
-    />
-    <g-gantt-row
-      label="My row 2"
-      :bars="row2BarList"
-    />
+    <g-gantt-row label="My row 1" :bars="row1BarList" />
+    <g-gantt-row label="My row 2" :bars="row2BarList" />
   </g-gantt-chart>
 </template>
 
 <script setup>
-
 import { ref } from "vue"
 
 const row1BarList = ref([
   {
     myBeginDate: "2021-07-13 13:00",
     myEndDate: "2021-07-13 19:00",
-    ganttBarConfig: {    // each bar must have a nested ganttBarConfig object ...
+    ganttBarConfig: {
+      // each bar must have a nested ganttBarConfig object ...
       id: "unique-id-1", // ... and a unique "id" property
       label: "Lorem ipsum dolor"
     }
@@ -67,7 +61,8 @@ const row2BarList = ref([
       id: "another-unique-id-2",
       hasHandles: true,
       label: "Hey, look at me",
-      style: {     // arbitrary CSS styling for your bar
+      style: {
+        // arbitrary CSS styling for your bar
         background: "#e09b69",
         borderRadius: "20px",
         color: "black"
@@ -77,6 +72,7 @@ const row2BarList = ref([
 ])
 </script>
 ```
+
 The result shoud look like this:  
 <g-gantt-chart chart-start="2021-07-12 12:00" chart-end="2021-07-14 12:00" precision="hour" width="100%" bar-start="myBeginDate" bar-end="myEndDate"> <g-gantt-row label="My row 1" :bars="row1BarList"/>
 <g-gantt-row label="My row 2" :bars="row2BarList"/>
@@ -104,12 +100,14 @@ const row2BarList = ref([
       id: "another-unique-id-2",
       hasHandles: true,
       label: "Hey, look at me",
-      style: {     // arbitrary CSS styling for your bar
+      style: {     
+        // arbitrary CSS styling for your bar
         background: "#e09b69",
         borderRadius: "20px",
         color: "#000000"
-      }
+      },
+      class: "foo" // you can also add CSS classes to your bars!
     }
   }
 ])
-</script>
+</script>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infectoone/vue-ganttastic",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "description": "A simple and customizable Gantt chart component for Vue.js",
   "author": "Marko Zunic (@infectoone)",
   "scripts": {
diff --git a/src/color-schemes.ts b/src/color-schemes.ts
@@ -1,4 +1,6 @@
-import type { Color } from "csstype"
+import type * as CSS from "csstype"
+
+type Color = CSS.DataType.Color
 
 export type ColorScheme = {
   primary: Color
@@ -11,7 +13,7 @@ export type ColorScheme = {
   toast?: Color
 }
 
-export const colorSchemes = {
+export const colorSchemes: Record<string, ColorScheme> = {
   default: {
     primary: "#eeeeee",
     secondary: "#E0E0E0",
@@ -123,7 +125,7 @@ export const colorSchemes = {
     text: "white",
     background: "white"
   }
-} as Record<string, ColorScheme>
+}
 
 export type ColorSchemeKey = keyof typeof colorSchemes
 
diff --git a/src/components/GGanttBar.vue b/src/components/GGanttBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :id="barConfig.id"
-    class="g-gantt-bar"
+    :class="['g-gantt-bar', barConfig.class || '']"
     :style="{
       ...barConfig.style,
       position: 'absolute',
diff --git a/src/composables/useBarDragManagement.ts b/src/composables/useBarDragManagement.ts
@@ -1,6 +1,5 @@
 import type { GanttBarObject } from "../types"
 
-import { ref } from "vue"
 import createBarDrag from "./createBarDrag.js"
 import useDayjsHelper from "./useDayjsHelper.js"
 import provideConfig from "../provider/provideConfig.js"
diff --git a/src/types.ts b/src/types.ts
@@ -13,5 +13,6 @@ export type GanttBarObject = {
     dragLimitLeft?: number
     dragLimitRight?: number
     style?: CSSProperties
+    class?: string
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@infectoone/vue-ganttastic",`
`3`		`- "version": "2.1.4",`
	`3`	`+ "version": "2.2.0",`
`4`	`4`	`"description": "A simple and customizable Gantt chart component for Vue.js",`
`5`	`5`	`"author": "Marko Zunic (@infectoone)",`
`6`	`6`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -13,5 +13,6 @@ export type GanttBarObject = {`
`13`	`13`	`dragLimitLeft?: number`
`14`	`14`	`dragLimitRight?: number`
`15`	`15`	`style?: CSSProperties`
	`16`	`+ class?: string`
`16`	`17`	`}`
`17`	`18`	`}`