nuxt-ui-elements-pro 0.1.10 → 0.1.11

package/dist/runtime/components/gantt-chart/GanttChartTimeline.vue

@@ -0,0 +1,193 @@
+<script setup>
+import { useSlots } from "vue";
+import { useGanttChartContext } from "../../composables/useGanttChartContext";
+import GanttChartDependencies from "./GanttChartDependencies.vue";
+const ctx = useGanttChartContext();
+const slots = useSlots();
+</script>
+
+<template>
+  <div data-slot="timeline" :class="ctx.ui.value.timeline({ class: ctx.propUi.value?.timeline })" :style="{ width: `${ctx.layout.value.totalWidth}px` }">
+    <!-- Sticky header -->
+    <div data-slot="timelineHeader" :class="ctx.ui.value.timelineHeader({ class: ctx.propUi.value?.timelineHeader })">
+      <!-- Top row: header groups -->
+      <div data-slot="headerGroupRow" :class="ctx.ui.value.headerGroupRow({ class: ctx.propUi.value?.headerGroupRow })">
+        <div
+          v-for="(group, i) in ctx.layout.value.headerGroups"
+          :key="i"
+          data-slot="headerGroup"
+          :class="ctx.ui.value.headerGroup({ class: ctx.propUi.value?.headerGroup })"
+          :style="{ width: `${group.widthPx}px` }"
+        >
+          {{ group.label }}
+        </div>
+      </div>
+      <!-- Bottom row: columns -->
+      <div data-slot="headerColumnRow" :class="ctx.ui.value.headerColumnRow({ class: ctx.propUi.value?.headerColumnRow })">
+        <div
+          v-for="(col, i) in ctx.layout.value.columns"
+          :key="i"
+          data-slot="headerColumn"
+          :class="[
+  ctx.ui.value.headerColumn({ class: ctx.propUi.value?.headerColumn }),
+  col.isWeekend && ctx.ui.value.headerColumnWeekend({ class: ctx.propUi.value?.headerColumnWeekend }),
+  col.isToday && ctx.ui.value.headerColumnToday({ class: ctx.propUi.value?.headerColumnToday })
+]"
+          :style="{ width: `${col.widthPx}px` }"
+        >
+          {{ col.label }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Grid body -->
+    <div data-slot="grid" :class="ctx.ui.value.grid({ class: ctx.propUi.value?.grid })" :style="{ height: `${ctx.layout.value.totalHeight}px` }">
+      <!-- Vertical grid lines -->
+      <div
+        v-for="(col, i) in ctx.layout.value.columns"
+        :key="`line-${i}`"
+        :class="[
+  ctx.ui.value.gridLine({ class: ctx.propUi.value?.gridLine }),
+  col.isWeekend && ctx.ui.value.weekendColumn({ class: ctx.propUi.value?.weekendColumn })
+]"
+        :style="{ left: `${col.leftPx}px`, width: `${col.widthPx}px`, height: '100%' }"
+      />
+
+      <!-- Row stripes -->
+      <div
+        v-for="(bar, i) in ctx.layout.value.taskBars"
+        :key="`row-${bar.task.id}`"
+        :class="[
+  ctx.ui.value.row({ class: ctx.propUi.value?.row }),
+  i % 2 === 0 && ctx.ui.value.rowEven({ class: ctx.propUi.value?.rowEven })
+]"
+        :style="{ top: `${i * ctx.rowHeight.value}px`, height: `${ctx.rowHeight.value}px` }"
+      />
+
+      <!-- Today marker -->
+      <div
+        v-if="ctx.layout.value.todayOffsetPx !== null"
+        data-slot="todayMarker"
+        :class="ctx.ui.value.todayMarker({ class: ctx.propUi.value?.todayMarker })"
+        :style="{ left: `${ctx.layout.value.todayOffsetPx}px`, height: '100%' }"
+      >
+        <slot name="today-marker" />
+      </div>
+
+      <!-- Dependency arrows (rendered before task bars so they appear behind them) -->
+      <GanttChartDependencies>
+        <template v-if="slots.dependency" #default="depProps">
+          <slot name="dependency" v-bind="depProps" />
+        </template>
+      </GanttChartDependencies>
+
+      <!-- Task bars -->
+      <template v-for="bar in ctx.layout.value.taskBars" :key="bar.task.id">
+        <!-- Milestone -->
+        <div
+          v-if="bar.isMilestone"
+          data-slot="milestone"
+          :class="ctx.ui.value.milestone({ class: ctx.propUi.value?.milestone })"
+          :style="{
+  left: `${bar.leftPx - 7}px`,
+  top: `${bar.rowIndex * ctx.rowHeight.value + (ctx.rowHeight.value - 14) / 2}px`,
+  paddingLeft: `${bar.depth * 16}px`
+}"
+          :data-task-id="bar.task.id"
+          :data-focused="ctx.focusedTaskId.value === bar.task.id || void 0"
+          role="treeitem"
+          :aria-label="`Milestone: ${bar.task.title}`"
+          @click="ctx.handleTaskClick(bar.task, $event)"
+        >
+          <slot name="milestone" :task="bar.task.original" :bar="bar">
+            <div :class="ctx.ui.value.milestoneDiamond({ class: ctx.propUi.value?.milestoneDiamond })" :style="ctx.getTaskStyle(bar.task)" />
+          </slot>
+        </div>
+
+        <!-- Group bar -->
+        <div
+          v-else-if="bar.isGroup"
+          data-slot="groupBar"
+          :class="ctx.ui.value.groupBar({ class: ctx.propUi.value?.groupBar })"
+          :style="{
+  left: `${bar.leftPx}px`,
+  width: `${bar.widthPx}px`,
+  top: `${bar.rowIndex * ctx.rowHeight.value}px`,
+  height: `${ctx.rowHeight.value}px`,
+  paddingLeft: `${bar.depth * 16}px`
+}"
+          :data-task-id="bar.task.id"
+          :data-focused="ctx.focusedTaskId.value === bar.task.id || void 0"
+          role="treeitem"
+          :aria-expanded="bar.isExpanded"
+          :aria-label="`${bar.task.title}, ${bar.childCount} subtasks`"
+          @click="ctx.handleTaskClick(bar.task, $event)"
+        >
+          <slot name="group-header" :task="bar.task.original" :bar="bar" :expanded="bar.isExpanded" :toggle="() => ctx.toggleExpand(bar.task.id)">
+            <button
+              :class="ctx.ui.value.groupToggle({ class: ctx.propUi.value?.groupToggle })"
+              :aria-label="bar.isExpanded ? 'Collapse group' : 'Expand group'"
+              @click.stop="ctx.toggleExpand(bar.task.id)"
+            >
+              <UIcon :name="bar.isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'" class="size-3" />
+            </button>
+            <span :class="ctx.ui.value.groupTitle({ class: ctx.propUi.value?.groupTitle })">{{ bar.task.title }}</span>
+            <!-- Summary bar shape -->
+            <div :class="ctx.ui.value.groupBarShape({ class: ctx.propUi.value?.groupBarShape })" :style="ctx.getTaskStyle(bar.task)" />
+            <div :class="ctx.ui.value.groupBarEndCap({ class: ctx.propUi.value?.groupBarEndCap })" :style="{ left: '0', ...ctx.getTaskStyle(bar.task) }" />
+            <div :class="ctx.ui.value.groupBarEndCap({ class: ctx.propUi.value?.groupBarEndCap })" :style="{ right: '0', ...ctx.getTaskStyle(bar.task) }" />
+          </slot>
+        </div>
+
+        <!-- Regular task bar -->
+        <div
+          v-else
+          data-slot="taskBar"
+          :class="[
+  ctx.ui.value.taskBar({ class: ctx.propUi.value?.taskBar }),
+  ctx.draggedTaskId.value === bar.task.id && 'opacity-50'
+]"
+          :style="{
+  left: `${ctx.draggedTaskId.value === bar.task.id && ctx.dragPreview.value ? ctx.dragPreview.value.leftPx : ctx.resizingTaskId.value === bar.task.id && ctx.resizePreview.value ? ctx.resizePreview.value.leftPx : bar.leftPx}px`,
+  width: `${ctx.resizingTaskId.value === bar.task.id && ctx.resizePreview.value ? ctx.resizePreview.value.widthPx : bar.widthPx}px`,
+  top: `${bar.rowIndex * ctx.rowHeight.value + 4}px`,
+  height: `${ctx.rowHeight.value - 8}px`,
+  marginLeft: `${bar.depth * 16}px`
+}"
+          :data-task-id="bar.task.id"
+          :data-focused="ctx.focusedTaskId.value === bar.task.id || void 0"
+          role="treeitem"
+          :aria-label="bar.task.title"
+          @pointerdown="ctx.editable.value && bar.task.draggable ? ctx.onDragStart(bar, $event) : void 0"
+          @click="ctx.handleTaskClick(bar.task, $event)"
+        >
+          <slot name="task-bar" :task="bar.task.original" :bar="bar">
+            <!-- Background -->
+            <div :class="ctx.ui.value.taskBarInner({ class: ctx.propUi.value?.taskBarInner })" :style="ctx.getTaskStyle(bar.task)" />
+            <!-- Progress fill -->
+            <div
+              v-if="bar.task.progress > 0"
+              :class="ctx.ui.value.taskBarProgress({ class: ctx.propUi.value?.taskBarProgress })"
+              :style="{ width: `${bar.task.progress}%`, ...ctx.getTaskStyle(bar.task) }"
+            />
+            <span :class="ctx.ui.value.taskBarTitle({ class: ctx.propUi.value?.taskBarTitle })">{{ bar.task.title }}</span>
+          </slot>
+          <!-- Left resize handle -->
+          <div
+            v-if="ctx.editable.value && bar.task.resizable"
+            :class="ctx.ui.value.resizeHandleLeft({ class: ctx.propUi.value?.resizeHandleLeft })"
+            :style="ctx.getTaskStyle(bar.task)"
+            @pointerdown.stop="ctx.onResizePointerDown(bar, 'start', $event)"
+          />
+          <!-- Right resize handle -->
+          <div
+            v-if="ctx.editable.value && bar.task.resizable"
+            :class="ctx.ui.value.resizeHandleRight({ class: ctx.propUi.value?.resizeHandleRight })"
+            :style="ctx.getTaskStyle(bar.task)"
+            @pointerdown.stop="ctx.onResizePointerDown(bar, 'end', $event)"
+          />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/gantt-chart/GanttChartTimeline.vue.d.ts

@@ -0,0 +1,34 @@
+declare var __VLS_1: {}, __VLS_10: {
+    paths: import("../../types/gantt-chart.js").GanttDependencyPath[];
+}, __VLS_12: {
+    task: import("../../types/gantt-chart.js").GanttTask;
+    bar: import("../../types/gantt-chart.js").GanttTaskBar;
+}, __VLS_14: {
+    task: import("../../types/gantt-chart.js").GanttTask;
+    bar: import("../../types/gantt-chart.js").GanttTaskBar;
+    expanded: boolean;
+    toggle: () => void;
+}, __VLS_21: {
+    task: import("../../types/gantt-chart.js").GanttTask;
+    bar: import("../../types/gantt-chart.js").GanttTaskBar;
+};
+type __VLS_Slots = {} & {
+    'today-marker'?: (props: typeof __VLS_1) => any;
+} & {
+    dependency?: (props: typeof __VLS_10) => any;
+} & {
+    milestone?: (props: typeof __VLS_12) => any;
+} & {
+    'group-header'?: (props: typeof __VLS_14) => any;
+} & {
+    'task-bar'?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/composables/useEventCalendar.d.ts

@@ -23,11 +23,13 @@ export declare function useEventCalendar(options: UseEventCalendarOptions): {
         startHour: number;
         endHour: number;
         slotDuration: 15 | 30 | 60;
+        scrollTime: number;
     }>;
     dayConfig: import("vue").ComputedRef<{
         startHour: number;
         endHour: number;
         slotDuration: 15 | 30 | 60;
+        scrollTime: number;
     }>;
     monthWeeks: import("vue").ComputedRef<CalendarWeek[]>;
     monthWeekLayouts: import("vue").ComputedRef<MonthWeekLayout[]>;

package/dist/runtime/composables/useEventCalendar.js

@@ -23,14 +23,16 @@ export function useEventCalendar(options) {
     fixedWeeks: options.monthOptions()?.fixedWeeks ?? true
   }));
   const weekConfig = computed(() => ({
-    startHour: options.weekOptions()?.startHour ?? 7,
-    endHour: options.weekOptions()?.endHour ?? 22,
-    slotDuration: options.weekOptions()?.slotDuration ?? 30
+    startHour: options.weekOptions()?.startHour ?? 0,
+    endHour: options.weekOptions()?.endHour ?? 24,
+    slotDuration: options.weekOptions()?.slotDuration ?? 30,
+    scrollTime: options.weekOptions()?.scrollTime ?? 7
   }));
   const dayConfig = computed(() => ({
-    startHour: options.dayOptions()?.startHour ?? 7,
-    endHour: options.dayOptions()?.endHour ?? 22,
-    slotDuration: options.dayOptions()?.slotDuration ?? 30
+    startHour: options.dayOptions()?.startHour ?? 0,
+    endHour: options.dayOptions()?.endHour ?? 24,
+    slotDuration: options.dayOptions()?.slotDuration ?? 30,
+    scrollTime: options.dayOptions()?.scrollTime ?? 7
   }));
   const displayDate = computed(() => {
     const mv = options.modelValue();

package/dist/runtime/composables/useEventCalendarContext.d.ts

@@ -1,8 +1,3 @@
-import type { InjectionKey } from "vue";
 import type { EventCalendarContext } from "../types/event-calendar.js";
-export declare const eventCalendarContextKey: InjectionKey<EventCalendarContext>;
-/**
- * Inject the EventCalendar context in a sub-component.
- * Throws if called outside an <UEEventCalendar> root.
- */
-export declare function useEventCalendarContext(): EventCalendarContext;
+export declare const eventCalendarContextKey: import("vue").InjectionKey<EventCalendarContext>;
+export declare const useEventCalendarContext: () => EventCalendarContext;

package/dist/runtime/composables/useEventCalendarContext.js

@@ -1,11 +1,4 @@
-import { inject } from "vue";
-export const eventCalendarContextKey = Symbol("nuxt-ui-elements-pro.event-calendar");
-export function useEventCalendarContext() {
-  const ctx = inject(eventCalendarContextKey);
-  if (!ctx) {
-    throw new Error(
-      "[EventCalendar] useEventCalendarContext() was called outside of an <UEEventCalendar> root. Sub-components (UEEventCalendarHeader, UEEventCalendarMonthView, UEEventCalendarTimeGrid, UEEventCalendarListView) must be used as children of <UEEventCalendar>."
-    );
-  }
-  return ctx;
-}
+import { createComponentContext } from "../utils/createComponentContext.js";
+const { key, useContext } = createComponentContext("EventCalendar");
+export const eventCalendarContextKey = key;
+export const useEventCalendarContext = useContext;

package/dist/runtime/composables/useFeedbackWidget.d.ts

@@ -0,0 +1,46 @@
+import type { FeedbackType, FeedbackTypeId, FeedbackSubmission, FeedbackSubmitResult, FeedbackWidgetPosition, CaptchaProvider } from "../types/feedback-widget.js";
+export interface UseFeedbackWidgetOptions {
+    feedbackTypes: () => FeedbackType[];
+    position: () => FeedbackWidgetPosition;
+    showScreenshot: () => boolean;
+    emailPlaceholder: () => string;
+    messagePlaceholder: () => string;
+    captchaEnabled: () => boolean;
+    captchaProvider: () => CaptchaProvider | null;
+    captchaSiteKey: () => string | null;
+    submitEndpoint: () => string;
+    onSubmit: () => ((submission: FeedbackSubmission) => Promise<FeedbackSubmitResult> | FeedbackSubmitResult) | undefined;
+    onOpen: () => void;
+    onClose: () => void;
+    onSuccess: (submission: FeedbackSubmission) => void;
+    onError: (error: string) => void;
+}
+export declare function useFeedbackWidget(options: UseFeedbackWidgetOptions): {
+    isOpen: import("vue").Ref<boolean, boolean>;
+    isSubmitting: import("vue").Ref<boolean, boolean>;
+    isSubmitted: import("vue").Ref<boolean, boolean>;
+    submitError: import("vue").Ref<string | null, string | null>;
+    selectedType: import("vue").Ref<FeedbackTypeId | null, FeedbackTypeId | null>;
+    email: import("vue").Ref<string, string>;
+    message: import("vue").Ref<string, string>;
+    screenshot: import("vue").Ref<string | null, string | null>;
+    honeypot: import("vue").Ref<string, string>;
+    captchaToken: import("vue").Ref<string | null, string | null>;
+    feedbackTypes: import("vue").ComputedRef<FeedbackType[]>;
+    position: import("vue").ComputedRef<FeedbackWidgetPosition>;
+    showScreenshot: import("vue").ComputedRef<boolean>;
+    emailPlaceholder: import("vue").ComputedRef<string>;
+    messagePlaceholder: import("vue").ComputedRef<string>;
+    captchaEnabled: import("vue").ComputedRef<boolean>;
+    captchaProvider: import("vue").ComputedRef<CaptchaProvider | null>;
+    captchaSiteKey: import("vue").ComputedRef<string | null>;
+    isValid: import("vue").ComputedRef<boolean>;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    reset: () => void;
+    submit: () => Promise<void>;
+    captureScreenshot: () => Promise<void>;
+    removeScreenshot: () => void;
+    setCaptchaToken: (token: string) => void;
+};

package/dist/runtime/composables/useFeedbackWidget.js

@@ -0,0 +1,137 @@
+import { computed, ref } from "vue";
+export function useFeedbackWidget(options) {
+  const isOpen = ref(false);
+  const isSubmitting = ref(false);
+  const isSubmitted = ref(false);
+  const submitError = ref(null);
+  const selectedType = ref(null);
+  const email = ref("");
+  const message = ref("");
+  const screenshot = ref(null);
+  const honeypot = ref("");
+  const captchaToken = ref(null);
+  const feedbackTypes = computed(() => options.feedbackTypes());
+  const position = computed(() => options.position());
+  const showScreenshot = computed(() => options.showScreenshot());
+  const emailPlaceholder = computed(() => options.emailPlaceholder());
+  const messagePlaceholder = computed(() => options.messagePlaceholder());
+  const captchaEnabled = computed(() => options.captchaEnabled());
+  const captchaProvider = computed(() => options.captchaProvider());
+  const captchaSiteKey = computed(() => options.captchaSiteKey());
+  const isValid = computed(() => {
+    return selectedType.value !== null && email.value.trim().length > 0 && message.value.trim().length > 0 && (!captchaEnabled.value || !!captchaToken.value);
+  });
+  function open() {
+    isOpen.value = true;
+    options.onOpen();
+  }
+  function close() {
+    isOpen.value = false;
+    options.onClose();
+  }
+  function toggle() {
+    if (isOpen.value) close();
+    else open();
+  }
+  function reset() {
+    selectedType.value = null;
+    email.value = "";
+    message.value = "";
+    screenshot.value = null;
+    honeypot.value = "";
+    captchaToken.value = null;
+    isSubmitted.value = false;
+    submitError.value = null;
+  }
+  async function captureScreenshot() {
+    try {
+      const { toPng } = await import("html-to-image");
+      const dataUrl = await toPng(document.body, {
+        quality: 0.8,
+        pixelRatio: 1
+      });
+      screenshot.value = dataUrl;
+    } catch {
+    }
+  }
+  function removeScreenshot() {
+    screenshot.value = null;
+  }
+  function setCaptchaToken(token) {
+    captchaToken.value = token;
+  }
+  async function submit() {
+    if (!isValid.value || isSubmitting.value) return;
+    isSubmitting.value = true;
+    submitError.value = null;
+    const submission = {
+      type: selectedType.value,
+      email: email.value.trim(),
+      message: message.value.trim(),
+      screenshot: screenshot.value ?? void 0,
+      _hp: honeypot.value,
+      captchaToken: captchaToken.value ?? void 0
+    };
+    try {
+      const customSubmit = options.onSubmit();
+      let result;
+      if (customSubmit) {
+        result = await customSubmit(submission);
+      } else {
+        const response = await $fetch(
+          options.submitEndpoint(),
+          {
+            method: "POST",
+            body: submission
+          }
+        );
+        result = response;
+      }
+      if (result.success) {
+        isSubmitted.value = true;
+        options.onSuccess(submission);
+      } else {
+        submitError.value = result.error ?? "Submission failed";
+        options.onError(submitError.value);
+      }
+    } catch (e) {
+      submitError.value = e?.data?.message || e?.message || "An error occurred";
+      options.onError(submitError.value);
+    } finally {
+      isSubmitting.value = false;
+    }
+  }
+  return {
+    // State
+    isOpen,
+    isSubmitting,
+    isSubmitted,
+    submitError,
+    // Form
+    selectedType,
+    email,
+    message,
+    screenshot,
+    honeypot,
+    captchaToken,
+    // Computed
+    feedbackTypes,
+    position,
+    showScreenshot,
+    emailPlaceholder,
+    messagePlaceholder,
+    captchaEnabled,
+    captchaProvider,
+    captchaSiteKey,
+    isValid,
+    // Actions
+    open,
+    close,
+    toggle,
+    reset,
+    submit,
+    captureScreenshot,
+    removeScreenshot,
+    setCaptchaToken
+  };
+}

package/dist/runtime/composables/useFeedbackWidgetContext.d.ts

@@ -0,0 +1,3 @@
+import type { FeedbackWidgetContext } from "../types/feedback-widget.js";
+export declare const feedbackWidgetContextKey: import("vue").InjectionKey<FeedbackWidgetContext>;
+export declare const useFeedbackWidgetContext: () => FeedbackWidgetContext;

package/dist/runtime/composables/useFeedbackWidgetContext.js

@@ -0,0 +1,4 @@
+import { createComponentContext } from "../utils/createComponentContext.js";
+const { key, useContext } = createComponentContext("FeedbackWidget");
+export const feedbackWidgetContextKey = key;
+export const useFeedbackWidgetContext = useContext;

package/dist/runtime/composables/useGanttChart.d.ts

@@ -0,0 +1,52 @@
+import type { DateValue } from "@internationalized/date";
+import { CalendarDate } from "@internationalized/date";
+import type { GanttTask, GanttDependency, GanttZoomLevel, NormalizedGanttTask, GanttTaskTreeNode, GanttLayout } from "../types/gantt-chart.js";
+export interface UseGanttChartOptions {
+    tasks: () => GanttTask[];
+    dependencies: () => GanttDependency[];
+    modelValue: () => Date | string | DateValue | undefined;
+    zoomLevel: () => GanttZoomLevel;
+    zoomLevels: () => GanttZoomLevel[];
+    locale: () => string;
+    rowHeight: () => number;
+    expanded: () => (string | number)[] | undefined;
+    onUpdateModelValue: (date: CalendarDate) => void;
+    onUpdateZoomLevel: (level: GanttZoomLevel) => void;
+    onUpdateExpanded: (ids: (string | number)[]) => void;
+}
+export declare function useGanttChart(options: UseGanttChartOptions): {
+    displayDate: import("vue").ComputedRef<CalendarDate>;
+    zoomLevel: import("vue").ComputedRef<GanttZoomLevel>;
+    zoomLevels: import("vue").ComputedRef<GanttZoomLevel[]>;
+    rowHeight: import("vue").ComputedRef<number>;
+    normalizedTasks: import("vue").ComputedRef<NormalizedGanttTask[]>;
+    normalizedDependencies: import("vue").ComputedRef<GanttDependency[]>;
+    taskTree: import("vue").ComputedRef<GanttTaskTreeNode[]>;
+    expandedIds: import("vue").Ref<Set<string | number> & Omit<Set<string | number>, keyof Set<any>>, Set<string | number> | (Set<string | number> & Omit<Set<string | number>, keyof Set<any>>)>;
+    flatVisible: import("vue").ComputedRef<{
+        task: NormalizedGanttTask;
+        depth: number;
+        isGroup: boolean;
+        isExpanded: boolean;
+        childCount: number;
+    }[]>;
+    timelineStart: import("vue").ComputedRef<CalendarDate>;
+    timelineEnd: import("vue").ComputedRef<CalendarDate>;
+    layout: import("vue").ComputedRef<GanttLayout>;
+    headerTitle: import("vue").ComputedRef<string>;
+    unitWidth: import("vue").ComputedRef<number>;
+    bodyEl: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+    goToPrev: () => void;
+    goToNext: () => void;
+    goToToday: () => void;
+    setZoomLevel: (level: GanttZoomLevel) => void;
+    scrollToDate: (date: CalendarDate) => void;
+    scrollToTask: (taskId: string | number) => void;
+    toggleExpand: (id: string | number) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+    isExpanded: (id: string | number) => boolean;
+    dateToPixel: (date: CalendarDate) => number;
+    pixelToDate: (px: number) => CalendarDate;
+    getTaskStyle: (task: NormalizedGanttTask) => Record<string, string>;
+};