Merge branch 'feature/update_docs' into develop

Xeyos88 · Xeyos88 · commit 892de481e57a · 2024-12-19T20:26:02.000+01:00
diff --git a/LICENSE b/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.
diff --git a/README.md b/README.md
@@ -2,6 +2,12 @@
 
 A powerful Gantt chart component for Vue 3, evolved from vue-ganttastic. Provides flexible and performant timeline visualization for modern applications.
 
+<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
 
 ```bash
diff --git a/deploy.sh b/deploy.sh
diff --git a/docs-deploy.yml b/docs-deploy.yml
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -6,11 +6,11 @@ export default defineConfig({
   title: "Hyper Vue Gantt",
   description: "Documentation for the Huper Vue Gantt Chart Library",
   base: '/HyVueGantt/',
-  head: [['link', { rel: 'icon', href: '/favicon.ico' }]],
+  head: [['link', { rel: 'icon', href: 'https://raw.githubusercontent.com/Xeyos88/HyVueGantt/refs/heads/main/public/favicon.ico' }]],
 
   themeConfig: {
     logo: {
-      src: '/logo.png',
+      src: 'https://github.com/Xeyos88/HyVueGantt/blob/main/docs/.vitepress/public/logo.png?raw=true',
       alt: 'Hyper Vue Gantt Logo'
     },
 
diff --git a/docs/.vitepress/theme/components/AdvancedGanttDemo.vue b/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"
diff --git a/docs/.vitepress/theme/components/BasicGanttDemo.vue b/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([
diff --git a/docs/.vitepress/theme/components/ConnectionsGanttDemo.vue b/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([
diff --git a/docs/.vitepress/theme/components/OtherGanttDemo.vue b/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([
diff --git a/docs/.vitepress/theme/components/TimeGanttDemo.vue b/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')
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -1,10 +1,17 @@
 import DefaultTheme from 'vitepress/theme'
 import { defineClientComponent } from 'vitepress'
 import './custom.css'
-import dayjs from 'dayjs'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
+import dayjs from "dayjs"
+import isSameOrBefore from "dayjs/plugin/isSameOrBefore.js"
+import isSameOrAfter from "dayjs/plugin/isSameOrAfter.js"
+import isBetween from "dayjs/plugin/isBetween.js"
 
-dayjs.extend(isSameOrBefore)
+
+export function extendDayjs() {
+  dayjs.extend(isSameOrBefore)
+  dayjs.extend(isSameOrAfter)
+  dayjs.extend(isBetween)
+}
 
 const GanttDemo = defineClientComponent(() => {
   return import('./components/BasicGanttDemo.vue')
@@ -30,10 +37,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)
   }
 }
diff --git a/docs/components/g-gantt-chart.md b/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 |
diff --git a/docs/guide/installation.md b/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)
diff --git a/package.json b/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",
diff --git a/src/composables/useConnections.ts b/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
         }
