[FIX] Connetions with max rows

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -4,6 +4,9 @@ A powerful Gantt chart component for Vue 3, evolved from vue-ganttastic. Provide
 
 <img src="https://github.com/Xeyos88/HyVueGantt/blob/main/docs/.vitepress/public/logo.png?raw=true" alt="logo HyVueGantt" witdh="300" height="300">
 
+## Guide and Docs
+
+For further guides and references, check out the [documentation](https://github.com/Xeyos88/HyVueGantt).  
 
 ## 🚀 Installation
 

docs/.vitepress/theme/components/AdvancedGanttDemo.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import dayjs from 'dayjs'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import { GGanttChart, GGanttRow } from 'hy-vue-gantt'
 
-dayjs.extend(isSameOrBefore)
-
 const isLibraryReady = ref(false)
 const currentScheme = ref('default')
 
@@ -70,8 +66,8 @@ onMounted(() => {
           </select>
         </div>
       <g-gantt-chart
-        chart-start="2024-12-10"
-        chart-end="2024-12-20"
+        chart-start="2024-12-11"
+        chart-end="2024-12-17"
         precision="day"
         bar-start="start"
         bar-end="end"

docs/.vitepress/theme/components/BasicGanttDemo.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import dayjs from 'dayjs'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import { GGanttChart, GGanttRow } from 'hy-vue-gantt'
 
-dayjs.extend(isSameOrBefore)
-
 const isLibraryReady = ref(false)
 
 const rows = ref([

docs/.vitepress/theme/components/ConnectionsGanttDemo.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import dayjs from 'dayjs'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import { GGanttChart, GGanttRow } from 'hy-vue-gantt'
 
-dayjs.extend(isSameOrBefore)
-
 const isLibraryReady = ref(false)
 
 const rows = ref([

docs/.vitepress/theme/components/OtherGanttDemo.vue

@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import dayjs from 'dayjs'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import { GGanttChart, GGanttRow } from 'hy-vue-gantt'
-
-dayjs.extend(isSameOrBefore)
-
 const isLibraryReady = ref(false)
 
 const rows = ref([

docs/.vitepress/theme/components/TimeGanttDemo.vue

@@ -1,10 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import dayjs from 'dayjs'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import { GGanttChart, GGanttRow } from 'hy-vue-gantt'
 
-dayjs.extend(isSameOrBefore)
 
 const isLibraryReady = ref(false)
 const currentPrecision = ref('hour')

docs/.vitepress/theme/index.ts

@@ -1,10 +1,20 @@
 import DefaultTheme from 'vitepress/theme'
 import { defineClientComponent } from 'vitepress'
 import './custom.css'
-import dayjs from 'dayjs'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
-
-dayjs.extend(isSameOrBefore)
+import dayjs from "dayjs"
+import isoWeek from "dayjs/plugin/isoWeek"
+import isSameOrBefore from "dayjs/plugin/isSameOrBefore.js"
+import isSameOrAfter from "dayjs/plugin/isSameOrAfter.js"
+import isBetween from "dayjs/plugin/isBetween.js"
+import weekOfYear from "dayjs/plugin/weekOfYear"
+import advancedFormat from "dayjs/plugin/advancedFormat"
+import customParseFormat from "dayjs/plugin/customParseFormat.js"
+
+export function extendDayjs() {
+  dayjs.extend(isSameOrBefore)
+  dayjs.extend(isSameOrAfter)
+  dayjs.extend(isBetween)
+}
 
 const GanttDemo = defineClientComponent(() => {
   return import('./components/BasicGanttDemo.vue')
@@ -30,10 +40,11 @@ const OtherGanttDemo = defineClientComponent(() => {
 export default {
   extends: DefaultTheme,
   enhanceApp({ app }) {
+    extendDayjs()
     app.component('BasicGanttDemo', GanttDemo)
     app.component('ConnectionsGanttDemo', ConnectionsGanttDemo)
     app.component('TimeGanttDemo', TimeGanttDemo)
     app.component('AdvancedGanttDemo',AdvancedGanttDemo)
-    app.component('OtherGanttDemo',OtherGanttDemo)
+    app.component('OtherGanttDemo', OtherGanttDemo)
   }
 }

docs/components/g-gantt-chart.md

@@ -29,8 +29,6 @@ Here's a minimal example of using the GGanttChart component:
 
 ### Props
 
-### Props
-
 | Prop Name | Type | Default | Description |
 |-----------|------|---------|-------------|
 | chartStart | `string \| Date` | Required | The start date of the chart's visible range |

docs/guide/installation.md

@@ -36,8 +36,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import hyvuegantt from 'hy-vue-gantt'
 
-// Import the default styles
-import 'hy-vue-gantt/dist/style.css'
 
 const app = createApp(App)
 app.use(hyvuegantt)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hy-vue-gantt",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Fork and update of vue-ganttastic",
   "author": "Eugenio Topa (@Xeyos88)",
   "scripts": {
@@ -56,7 +56,7 @@
     "dayjs": "^1.11.13",
     "vue": "^3.5.13"
   },
-  "homepage": "",
+  "homepage": "https://xeyos88.github.io/HyVueGantt/",
   "keywords": [
     "gantt",
     "chart",

src/composables/useConnections.ts

@@ -67,6 +67,8 @@ export function useConnections(
     const parentElement = document.getElementById(id.value)
     const rowsContainer = parentElement!.querySelector(".g-gantt-rows-container")
     if (!rowsContainer) return
+    const scrollTop = rowsContainer.scrollTop
+    const scrollLeft = rowsContainer.scrollLeft
 
     const containerRect = rowsContainer.getBoundingClientRect()
     const bars = parentElement!.querySelectorAll(".g-gantt-bar")
@@ -80,8 +82,8 @@ export function useConnections(
       if (barId) {
         const position = {
           id: barId,
-          x: rect.left - containerRect.left,
-          y: rect.top - containerRect.top,
+          x: rect.left - containerRect.left +scrollLeft,
+          y: rect.top - containerRect.top +scrollTop,
           width: rect.width,
           height: rect.height
         }