Merge branch 'release/1.1.0'

Author: Xeyos88

README.md

@@ -6,7 +6,7 @@ A powerful Gantt chart component for Vue 3, evolved from vue-ganttastic. Provide
 
 ## Guide and Docs
 
-For further guides and references, check out the [documentation](https://github.com/Xeyos88/HyVueGantt).  
+For further guides and references, check out the [documentation](https://xeyos88.github.io/HyVueGantt/).
 
 ## 🚀 Installation
 

docs/.vitepress/theme/components/MultiColumnDemo.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { GGanttChart, GGanttRow, type ChartRow, type LabelColumnConfig } from 'hy-vue-gantt'
+
+const chartStart = ref('2024-01-01')
+const chartEnd = ref('2024-03-31')
+const precision = ref('day')
+const barStart = ref('start')
+const barEnd = ref('end')
+
+const getN = (row: ChartRow) => {
+  return row.bars.length
+}
+
+const sortN = (a: ChartRow, b: ChartRow) => {
+  const aId = a.bars.length ?? 0
+  const bId = b.bars.length ?? 0
+  return aId < bId ? -1 : aId > bId ? 1 : 0
+}
+
+
+const multiColumnLabel = ref<LabelColumnConfig[]>([
+  {
+    field: 'Id',
+    sortable: false,
+  },
+  {
+    field: 'Label',
+  },
+  {
+    field: 'StartDate',
+  },
+  {
+    field: 'Duration',
+  },
+  {
+    field: 'Bars N°',
+    valueGetter: getN,
+    sortFn: sortN,
+  },
+])
+
+const rows = ref([
+  {
+    id: 1,
+    label: 'Design Phase',
+    bars: [
+      {
+        start: '2024-01-05',
+        end: '2024-01-20',
+        ganttBarConfig: {
+          id: '1',
+          label: 'UI/UX Design',
+          style: { background: '#42b883' }
+        }
+      }
+    ]
+  },
+  {
+    id: 2,
+    label: 'Development',
+    bars: [
+      {
+        start: '2024-01-21',
+        end: '2024-02-15',
+        ganttBarConfig: {
+          id: '2',
+          label: 'Frontend Implementation',
+          style: { background: '#35495e' }
+        }
+      }
+    ]
+  },
+  {
+    id: 3,
+    label: 'Testing',
+    bars: [
+      {
+        start: '2024-02-10',
+        end: '2024-02-28',
+        ganttBarConfig: {
+          id: '3',
+          label: 'QA and Testing',
+          style: { background: '#ff7e67' }
+        }
+      }
+    ]
+  }
+])
+</script>
+
+<template>
+  <div class="demo-container">
+    <g-gantt-chart
+      :chart-start="chartStart"
+      :chart-end="chartEnd"
+      :precision="precision"
+      :bar-start="barStart"
+      :bar-end="barEnd"
+      :row-height="40"
+      grid
+      label-column-title="Project Details"
+      :multi-column-label="multiColumnLabel"
+      sortable
+      color-scheme="slumber"
+    >
+      <g-gantt-row
+        v-for="row in rows"
+        :key="row.label"
+        :label="row.label"
+        :bars="row.bars"
+      />
+    </g-gantt-chart>
+  </div>
+</template>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  border: 1px solid #eaeaea;
+  border-radius: 8px;
+  margin: 20px 0;
+}
+
+h3 {
+  margin-bottom: 20px;
+  color: #42b883;
+}
+</style>

docs/.vitepress/theme/custom.css

@@ -82,4 +82,12 @@
 
 .dark .VPFeatures .item .icon {
   background-color: #2a2a2a;
+}
+
+.VPContent.has-sidebar {
+  padding-right: calc((90vw - var(--vp-layout-max-width)) / 2) !important;
+}
+
+.VPDoc.has-aside .content-container {
+  max-width: 900px !important;
 }

docs/.vitepress/theme/index.ts

@@ -33,6 +33,11 @@ const OtherGanttDemo = defineClientComponent(() => {
   return import('./components/OtherGanttDemo.vue')
 })
 
+const MultiColumnDemo= defineClientComponent(() => {
+  return import('./components/MultiColumnDemo.vue')
+})
+
+
 
 export default {
   extends: DefaultTheme,
@@ -41,7 +46,8 @@ export default {
     app.component('BasicGanttDemo', GanttDemo)
     app.component('ConnectionsGanttDemo', ConnectionsGanttDemo)
     app.component('TimeGanttDemo', TimeGanttDemo)
-    app.component('AdvancedGanttDemo',AdvancedGanttDemo)
+    app.component('AdvancedGanttDemo', AdvancedGanttDemo)
     app.component('OtherGanttDemo', OtherGanttDemo)
+    app.component('MultiColumnDemo', MultiColumnDemo)
   }
 }

docs/api/types.md

@@ -8,9 +8,6 @@ HyVue Gantt exposes several TypeScript types and interfaces for use in your appl
 // Time Units
 type TimeUnit = 'hour' | 'day' | 'week' | 'month';
 
-// Sort Direction
-type SortDirection = 'asc' | 'desc' | 'none';
-
 // Connection Types
 type ConnectionType = 'bezier' | 'straight' | 'squared';
 type ConnectionPattern = 'solid' | 'dot' | 'dash' | 'dashdot';
@@ -57,4 +54,18 @@ interface BarConnection {
   animated?: boolean;
   animationSpeed?: ConnectionSpeed;
 }
+```
+## Label Data Types
+
+```typescript
+export type LabelColumnField = "Id" | "Label" | "StartDate" | "EndDate" | "Duration"
+
+export type SortFunction = (a: ChartRow, b: ChartRow) => number
+
+interface LabelColumnConfig {
+  field: LabelColumnField | string
+  sortable?: boolean
+  valueGetter?: (row: ChartRow) => string | number
+  sortFn?: SortFunction
+}
 ```

docs/components/g-gantt-chart.md

@@ -48,6 +48,8 @@ Here's a minimal example of using the GGanttChart component:
 | font | `string` | `'inherit'` | Font family for the chart |
 | labelColumnTitle | `string` | `''` | Title for the label column |
 | labelColumnWidth | `string` | `'150px'` | Width of the label column |
+| sortable | `boolean` | `true` | Enable row sorting functionality |
+| multiColumnLabel | `LabelColumnConfig[]` | `[]` | Array of columns to display in the header |
 | commands | `boolean` | `true` | Show chart control commands |
 | enableMinutes | `boolean` | `false` | Enable minutes precision for hour view |
 | enableConnections | `boolean` | `true` | Enable connections between bars |

docs/components/g-gantt-row.md

@@ -37,6 +37,19 @@ The GGanttRow component represents a single row in the Gantt chart. It manages t
 | label | None | Custom row label content |
 | bar-label | `{ bar: GanttBarObject }` | Custom bar label content |
 
+# Keyboard Controls
+
+Bars within the row support the following keyboard controls:
+
+| Key | Action | With Shift |
+|-----|--------|------------|
+| Left Arrow | Move bar backward | Move 12 units |
+| Right Arrow | Move bar forward | Move 12 units |
+| Up Arrow | Expand bar | Expand 12 units |
+| Down Arrow | Shrink bar | Shrink 12 units |
+
+The actual unit size depends on the chart's precision setting (hours, days, etc.).
+
 ## Bar Configuration
 
 Each bar in the bars array should follow this structure:

docs/examples/live.md

@@ -24,6 +24,14 @@ Time Precions Live Demo for Hyper Vue Gantt:
   <TimeGanttDemo />
 </ClientOnly>
 
+## Multi-Column Demo
+
+Demo showcasing multi-column display with sorting capabilities:
+
+<ClientOnly>
+  <MultiColumnDemo />
+</ClientOnly>
+
 ## Advanced Custom Demo 
 
 Advanced Custom Live Demo for Hyper Vue Gantt:

package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-vue-gantt",
-  "version": "1.0.1",
-  "description": "Fork and update of vue-ganttastic",
+  "version": "1.1.0",
+  "description": "Evolution of vue-ganttastic package",
   "author": "Eugenio Topa (@Xeyos88)",
   "scripts": {
     "serve": "vite",