Minor refactoring

Author: zunnzunn

docs/GGanttChart.md

@@ -8,7 +8,7 @@ The main component of Vue Ganttastic. Represents an entire chart and is meant to
 | `precision` | string? | `"hour"` | Display precision of the time-axis. Possible values: `hour`, `day` and `month`. |
 | `bar-start` | string | | Name of the property in bar objects that represents the start date.
 | `bar-end` | string  | | Name of the property in bar objects that represents the end date .
-| `date-format` | string \| false \| undefined  | `"YYYY-MM-DD HH:mm"` | Datetime string format of `chart-start`, `chart-end` and the values of the `bar-start`, `bar-end` properties in bar objects. See [Day.js format tokens](https://day.js.org/docs/en/parse/string-format). If you want to use Javascript Date set to `false`.
+| `date-format` | string \| false  | `"YYYY-MM-DD HH:mm"` | Datetime string format of `chart-start`, `chart-end` and the values of the `bar-start`, `bar-end` properties in bar objects. See [Day.js format tokens](https://day.js.org/docs/en/parse/string-format). If the aforementioned properties are native JavaScript [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) objects in your use case, pass `false`.
 | `width` | string? | `"100%"` | Width of the chart (e.g. `80%` or `800px`)
 | `hide-timeaxis` | boolean? | `false` | Toggle visibility of the time axis.
 | `color-scheme` | string \| ColorScheme | `"default"` | Color scheme (theme) of the chart. Either use the name of one of the predefined schemes or pass a color-scheme-object of your own. See [color schemes](#color-schemes).

src/components/GGanttChart.vue

@@ -49,6 +49,7 @@ import { colorSchemes, type ColorScheme } from "../color-schemes.js"
 import type { ColorSchemeKey } from "../color-schemes.js"
 import { CHART_ROWS_KEY, CONFIG_KEY, EMIT_BAR_EVENT_KEY } from "../provider/symbols.js"
 import type { GanttBarObject } from "../types"
+import { DEFAULT_DATE_FORMAT } from "../composables/useDayjsHelper"
 import { useElementSize } from "@vueuse/core"
 
 export interface GGanttChartProps {
@@ -57,7 +58,7 @@ export interface GGanttChartProps {
   precision?: "hour" | "day" | "month"
   barStart: string
   barEnd: string
-  dateFormat: string | false | undefined
+  dateFormat?: string | false
   width?: string
   hideTimeaxis?: boolean
   colorScheme?: ColorSchemeKey | ColorScheme
@@ -78,6 +79,7 @@ export type GGanttChartConfig = ToRefs<Required<GGanttChartProps>> & {
 }
 
 const props = withDefaults(defineProps<GGanttChartProps>(), {
+  dateFormat: DEFAULT_DATE_FORMAT,
   precision: "day",
   width: "100%",
   hideTimeaxis: false,

src/composables/useDayjsHelper.ts

@@ -27,13 +27,13 @@ export default function useDayjsHelper(config: GGanttChartConfig = provideConfig
     return dayjs(value, format, true)
   }
 
-  const format = (input: string | Date | Dayjs, template?: string | false | undefined) => {
-    if (template === false) {
+  const format = (input: string | Date | Dayjs, pattern?: string | false) => {
+    if (pattern === false) {
       return input instanceof Date ? input : dayjs(input).toDate()
     }
     const inputDayjs = typeof input === "string" || input instanceof Date ? toDayjs(input) : input
 
-    return inputDayjs.format(template)
+    return inputDayjs.format(pattern)
   }
 
   return {