Prepare WeFa 0.7.2 with configurable Gantt shading

.github/workflows/vue.yml

@@ -63,15 +63,15 @@ jobs:
 
   unit-tests:
     name: Unit Tests
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/checkout@v7
       - uses: ./.github/actions/setup-node
       - name: Cache Playwright browsers
         uses: actions/cache@v6
         with:
           path: ~/.cache/ms-playwright
-          key: playwright-${{ runner.os }}-${{ hashFiles('vue/package-lock.json') }}
+          key: playwright-ubuntu-24.04-${{ runner.arch }}-${{ hashFiles('vue/package-lock.json') }}
       - run: npm ci
       - name: Install Playwright (browsers and deps)
         run: node node_modules/playwright/cli.js install --with-deps
@@ -85,15 +85,15 @@ jobs:
 
   e2e-tests:
     name: E2E Tests
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/checkout@v7
       - uses: ./.github/actions/setup-node
       - name: Cache Playwright browsers
         uses: actions/cache@v6
         with:
           path: ~/.cache/ms-playwright
-          key: playwright-${{ runner.os }}-${{ hashFiles('vue/package-lock.json') }}
+          key: playwright-ubuntu-24.04-${{ runner.arch }}-${{ hashFiles('vue/package-lock.json') }}
       - run: npm ci
       - name: Install Playwright (browsers and deps)
         run: node node_modules/playwright/cli.js install --with-deps

bff/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "backend-for-frontend"
-version = "0.7.1"
+version = "0.7.2"
 description = "Flask backend-for-frontend"
 requires-python = ">=3.12,<3.13"
 dependencies = [

django/nside_wefa/__init__.py

@@ -5,4 +5,4 @@
 with a focus on Legal Consent compliance, data protection, authentication.
 """
 
-__version__ = "0.7.1"
+__version__ = "0.7.2"

django/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "nside-wefa"
-version = "0.7.1"
+version = "0.7.2"
 description = "Django library with Legal Consent compliance utilities and reusable apps"
 readme = "README.md"
 requires-python = ">=3.12"

vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nside/wefa",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "type": "module",
   "main": "./dist/lib.umd.cjs",
   "module": "./dist/lib.js",

vue/src/components/GanttChartComponent/GanttChartComponent.mdx

@@ -348,3 +348,11 @@ Set an activity's `linkOffsetYPx` to adjust both incoming and outgoing dependenc
 endpoints from the chart's calculated activity center. Positive values move down,
 negative values move up, and omission means zero adjustment. This changes arrow
 geometry only; it does not change bars, row heights, or transitions.
+
+### Additional shaded dates
+
+Pass `shadedDates` as date-only strings (`YYYY-MM-DD`) to shade selected day columns using the weekend colour. Dates are matched to the chart's displayed local calendar dates. Duplicates and dates outside the visible range have no effect. This layer is non-interactive and remains behind activities, selection and dependency links. It works independently of `showWeekendShading`. Like weekend shading, it is disabled in weekly view because a weekly column contains multiple dates. The component does not calculate public holidays; the application supplies its calendar.
+
+```vue
+<GanttChartComponent :shaded-dates="['2026-12-25', '2026-12-28']" />
+```

vue/src/components/GanttChartComponent/GanttChartComponent.spec.ts

@@ -84,6 +84,40 @@ const baseRows: GanttChartRowData[] = [
 ]
 
 describe('GanttChartComponent', () => {
+  it('keeps weekend shading enabled by default and forwards optional shaded dates', async () => {
+    const wrapper = mount(GanttChartComponent, {
+      props: {
+        startDate: new Date(2026, 0, 1),
+        endDate: new Date(2026, 0, 8),
+        rows: baseRows,
+      },
+    })
+    const row = wrapper.findComponent(GanttChartRowGrid)
+    expect(row.props('showWeekendShading')).toBe(true)
+    expect(row.props('shadedDates')).toEqual([])
+    await wrapper.setProps({ shadedDates: ['2026-01-02'] })
+    expect(row.props('shadedDates')).toEqual(['2026-01-02'])
+  })
+
+  it('shades only supplied visible day columns without intercepting interactions', async () => {
+    const wrapper = mount(GanttChartRowGrid, {
+      props: {
+        dateRange: [new Date(2026, 0, 1), new Date(2026, 0, 2), new Date(2026, 0, 3)],
+        columnWidthPx: 40,
+        activities: [],
+        showWeekendShading: false,
+        shadedDates: ['2026-01-02', '2026-01-02', '2027-01-01'],
+      },
+    })
+    expect(wrapper.get('.box-border').attributes('style')).toContain('rgb(248, 250, 252) 40px')
+    expect(wrapper.get('.box-border').attributes('style')).toContain('rgb(248, 250, 252) 80px')
+    expect(wrapper.findAll('.cursor-pointer')).toHaveLength(0)
+    await wrapper.setProps({ shadedDates: [] })
+    expect(wrapper.get('.box-border').attributes('style')).not.toContain('rgb(248, 250, 252)')
+    await wrapper.setProps({ shadedDates: ['2026-01-02'], viewMode: 'week' })
+    expect(wrapper.get('.box-border').attributes('style')).not.toContain('rgb(248, 250, 252)')
+  })
+
   it('applies explicit link offsets without changing row geometry', () => {
     const rows = ref(
       baseRows.map((row, index) => ({

vue/src/components/GanttChartComponent/GanttChartComponent.stories.ts

@@ -134,6 +134,7 @@ const meta: Meta<typeof GanttChartComponent> = {
     headerLabel: 'gantt_chart.header',
     viewMode: 'day',
     showWeekendShading: true,
+    shadedDates: ['2026-01-01'],
     stackMiniActivities: true,
     leftHeaderWidthPx: 320,
     baseRowHeightPx: 30,

vue/src/components/GanttChartComponent/GanttChartComponent.vue

@@ -109,6 +109,7 @@
           :row-height-px="rowHeights[item.index]"
           :view-mode="viewMode"
           :show-weekend-shading="showWeekendShading"
+          :shaded-dates="shadedDates"
           :stack-mini-activities="stackMiniActivities"
           :activity-tooltip="activityTooltip"
           :activity-hover="handleActivityHover"
@@ -214,6 +215,8 @@ interface GanttChartComponentProps {
   viewMode?: 'day' | 'week'
   /** Enables weekend background shading in day view. */
   showWeekendShading?: boolean
+  /** Additional date-only (YYYY-MM-DD) columns shaded like weekends in day view. */
+  shadedDates?: string[]
   /** Stacks overlapping mini activities into separate vertical lanes. */
   stackMiniActivities?: boolean
   /** Returns PrimeVue tooltip text for an activity when no popover slot is used. */
@@ -271,6 +274,7 @@ const {
   headerLabel = 'gantt_chart.header',
   viewMode: viewModeProp = 'day',
   showWeekendShading = true,
+  shadedDates = [],
   stackMiniActivities = true,
   activityTooltip = undefined,
   activityClick = undefined,

vue/src/components/GanttChartComponent/GanttChartRowGrid.vue

@@ -164,6 +164,7 @@ export interface GanttChartRowGridProps {
   activityColorClass?: string
   stripeColor?: string
   showWeekendShading?: boolean
+  shadedDates?: string[]
   stackMiniActivities?: boolean
   rowHeightPx?: number
   rowIndex?: number
@@ -205,6 +206,7 @@ const {
   activityColorClass = 'bg-emerald-400/80',
   stripeColor = 'rgba(59, 130, 246, 0.2)',
   showWeekendShading = true,
+  shadedDates = [],
   stackMiniActivities = true,
   rowHeightPx = undefined,
   rowIndex = undefined,
@@ -300,7 +302,24 @@ const weekPattern = computed(() => {
   return `linear-gradient(90deg, ${stops.join(', ')})`
 })
 
-// Grid background style with optional weekend shading.
+// Additional dates are an irregular, non-repeating layer below grid lines and activities.
+const shadedDatePattern = computed(() => {
+  if (isWeekView.value || shadedDates.length === 0) return ''
+  const dates = new Set(shadedDates)
+  const stops = dateRange.flatMap((date, index) =>
+    dates.has(DateTime.fromJSDate(date).toISODate() ?? '')
+      ? [
+          `transparent ${index * columnWidthPx}px`,
+          `rgb(248 250 252) ${index * columnWidthPx}px`,
+          `rgb(248 250 252) ${(index + 1) * columnWidthPx}px`,
+          `transparent ${(index + 1) * columnWidthPx}px`,
+        ]
+      : []
+  )
+  return stops.length ? `linear-gradient(90deg, ${stops.join(', ')})` : ''
+})
+
+// Grid background style with optional weekend and additional date shading.
 const gridStyle = computed(() => {
   const firstDate = dateRange[0]
   const weekStart = firstDate
@@ -328,6 +347,13 @@ const gridStyle = computed(() => {
     baseStyle.backgroundRepeat = 'repeat-x, repeat-x'
   }
 
+  if (shadedDatePattern.value) {
+    baseStyle.backgroundImage += `, ${shadedDatePattern.value}`
+    baseStyle.backgroundSize += `, ${lineWidth.value} 100%`
+    baseStyle.backgroundPosition = `${baseStyle.backgroundPosition ?? '0 0'}, 0 0`
+    baseStyle.backgroundRepeat += ', no-repeat'
+  }
+
   return baseStyle
 })