{"_id":"@adesin-fr/vue-ganttastic","_rev":"7-b0eb998c7f8433a01a25cea6b00be690","name":"@adesin-fr/vue-ganttastic","dist-tags":{"latest":"2.4.4"},"versions":{"2.4.0":{"name":"@adesin-fr/vue-ganttastic","version":"2.4.0","keywords":["gantt","chart","bar","diagram","vue","vuejs","ganttastic"],"author":{"url":"@adesin-fr","name":"Ludovic LEMARINEL"},"license":"MIT","_id":"@adesin-fr/vue-ganttastic@2.4.0","maintainers":[{"name":"adesin-fr","email":"ludovic@adesin.fr"}],"homepage":"https://zunnzunn.github.io/vue-ganttastic/","bugs":{"url":"https://github.com/adesin-fr/vue-ganttastic/issues"},"dist":{"shasum":"6ff1f45a990cd14c9bab9f591e859153e739e7c7","tarball":"https://registry.npmjs.org/@adesin-fr/vue-ganttastic/-/vue-ganttastic-2.4.0.tgz","fileCount":27,"integrity":"sha512-3+0b8vZhs7Lu3N7h/cVMcgB11Hl7isXiYJmsB7OI7UCHIK6GdVPNw1KzhIch1bXa4vdX87kpv1m0EjZXYLxU9g==","signatures":[{"sig":"MEYCIQCSVab6/nNfPgxykgwEe3fVU4305U5Zke8e1Rntn35hGwIhAJnUzSSM9HDjruXnZQAcbHjMUGbWmYi/Fuwegnr6gtwV","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":289778},"main":"./lib/vue-ganttastic.umd.cjs","type":"module","types":"./lib_types/vue-ganttastic.d.ts","exports":{".":{"types":"./lib_types/vue-ganttastic.d.ts","import":"./lib/vue-ganttastic.js","require":"./lib/vue-ganttastic.umd.cjs"}},"gitHead":"f0a8c1e3567d06accbaab37e713f0de39662320d","scripts":{"lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore","build":"npm run build:types && npm run build:lib","serve":"vite","docs:dev":"vitepress dev docs","lint:fix":"npm run lint --fix","build:lib":"vite build","typecheck":"vue-tsc --noEmit","docs:build":"vitepress build docs","build:types":"vue-tsc --declaration --emitDeclarationOnly --outDir lib_types","docs:preview":"vitepress preview docs"},"_npmUser":{"name":"adesin-fr","email":"ludovic@adesin.fr"},"repository":{"url":"git+https://github.com/adesin-fr/vue-ganttastic.git","type":"git"},"_npmVersion":"10.9.3","description":"A simple and customizable Gantt chart component for Vue.js","directories":{},"_nodeVersion":"22.19.0","dependencies":{"@vueuse/core":"^9.1.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^3.1.6","eslint":"^8.25.0","postcss":"^8.4.17","vue-tsc":"^1.8.27","prettier":"^2.7.1","vitepress":"^1.0.0-rc.4","typescript":"~4.8.4","@types/node":"^16.11.58","npm-run-all":"^4.1.5","@vue/tsconfig":"^0.1.3","eslint-plugin-vue":"^9.6.0","@vitejs/plugin-vue":"^3.1.2","postcss-preset-env":"^7.8.2","@rushstack/eslint-patch":"^1.2.0","@vuepress/plugin-search":"2.0.0-beta.51","@types/postcss-preset-env":"^7.7.0","@vue/eslint-config-prettier":"^7.0.0","@vue/eslint-config-typescript":"^11.0.2","@senojs/rollup-plugin-style-inject":"^0.1.1"},"peerDependencies":{"vue":"^3.2.40","dayjs":"^1.11.5"},"_npmOperationalInternal":{"tmp":"tmp/vue-ganttastic_2.4.0_1761679169357_0.5707344972029169","host":"s3://npm-registry-packages-npm-production"}},"2.4.1":{"name":"@adesin-fr/vue-ganttastic","version":"2.4.1","keywords":["gantt","chart","bar","diagram","vue","vuejs","ganttastic"],"author":{"url":"@adesin-fr","name":"Ludovic LEMARINEL"},"license":"MIT","_id":"@adesin-fr/vue-ganttastic@2.4.1","maintainers":[{"name":"adesin-fr","email":"ludovic@adesin.fr"}],"homepage":"https://zunnzunn.github.io/vue-ganttastic/","bugs":{"url":"https://github.com/adesin-fr/vue-ganttastic/issues"},"dist":{"shasum":"221344b8b59c32dba07504d62c570ec4d92774ad","tarball":"https://registry.npmjs.org/@adesin-fr/vue-ganttastic/-/vue-ganttastic-2.4.1.tgz","fileCount":27,"integrity":"sha512-HBNmjxo/J/LUdC5Y5q+f9q9e343Df4CGWHYPwcaekN/qp72jiCwQkyVL9tgcO5jLAAhwqYtLd+VrRRMSBPPDlQ==","signatures":[{"sig":"MEYCIQCTMoV0aRXKxRqMzeovl4I3yMQa0PE0EsmbFqpm7i/fXgIhAIpcVrdmzTkASV4CdKiBEQrsrXy0vNBan3anvugNsYRp","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":294507},"main":"./lib/vue-ganttastic.umd.cjs","type":"module","types":"./lib_types/vue-ganttastic.d.ts","exports":{".":{"types":"./lib_types/vue-ganttastic.d.ts","import":"./lib/vue-ganttastic.js","require":"./lib/vue-ganttastic.umd.cjs"}},"gitHead":"33d569b8927fcb5efc71401f5cdf361648ffcf51","scripts":{"lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore","build":"npm run build:types && npm run build:lib","serve":"vite","docs:dev":"vitepress dev docs","lint:fix":"npm run lint --fix","build:lib":"vite build","typecheck":"vue-tsc --noEmit","docs:build":"vitepress build docs","build:types":"vue-tsc --declaration --emitDeclarationOnly --outDir lib_types","docs:preview":"vitepress preview docs"},"_npmUser":{"name":"adesin-fr","email":"ludovic@adesin.fr"},"repository":{"url":"git+https://github.com/adesin-fr/vue-ganttastic.git","type":"git"},"_npmVersion":"10.9.3","description":"A simple and customizable Gantt chart component for Vue.js","directories":{},"_nodeVersion":"22.19.0","dependencies":{"@vueuse/core":"^9.1.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^3.1.6","eslint":"^8.25.0","postcss":"^8.4.17","vue-tsc":"^1.8.27","prettier":"^2.7.1","vitepress":"^1.0.0-rc.4","typescript":"~4.8.4","@types/node":"^16.11.58","npm-run-all":"^4.1.5","@vue/tsconfig":"^0.1.3","eslint-plugin-vue":"^9.6.0","@vitejs/plugin-vue":"^3.1.2","postcss-preset-env":"^7.8.2","@rushstack/eslint-patch":"^1.2.0","@vuepress/plugin-search":"2.0.0-beta.51","@types/postcss-preset-env":"^7.7.0","@vue/eslint-config-prettier":"^7.0.0","@vue/eslint-config-typescript":"^11.0.2","@senojs/rollup-plugin-style-inject":"^0.1.1"},"peerDependencies":{"vue":"^3.2.40","dayjs":"^1.11.5"},"_npmOperationalInternal":{"tmp":"tmp/vue-ganttastic_2.4.1_1761679855243_0.5013383695437408","host":"s3://npm-registry-packages-npm-production"}},"2.4.2":{"name":"@adesin-fr/vue-ganttastic","version":"2.4.2","keywords":["gantt","chart","bar","diagram","vue","vuejs","ganttastic"],"author":{"url":"@adesin-fr","name":"Ludovic LEMARINEL"},"license":"MIT","_id":"@adesin-fr/vue-ganttastic@2.4.2","maintainers":[{"name":"adesin-fr","email":"ludovic@adesin.fr"}],"homepage":"https://zunnzunn.github.io/vue-ganttastic/","bugs":{"url":"https://github.com/adesin-fr/vue-ganttastic/issues"},"dist":{"shasum":"cf4eda01e873f8c473f36dd2f89e54ff59411a85","tarball":"https://registry.npmjs.org/@adesin-fr/vue-ganttastic/-/vue-ganttastic-2.4.2.tgz","fileCount":27,"integrity":"sha512-JriH7LZ2kKFm2Obrm2/3T43lUXf1/i/hh31s5NfEYfayrJg6G18bWKzB9i54r7/B1E9XilL3Idjf6kbKEQOlDg==","signatures":[{"sig":"MEUCIQCJw9o4sVYxRXfJ6nNHWh5I4cgNwO1zw333MOH4J48sLAIgJflLOaIWc4E4ssEYTJ4OEzHxbREwojp5o7C3W1jjQHs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":294638},"main":"./lib/vue-ganttastic.umd.cjs","type":"module","types":"./lib_types/vue-ganttastic.d.ts","exports":{".":{"types":"./lib_types/vue-ganttastic.d.ts","import":"./lib/vue-ganttastic.js","require":"./lib/vue-ganttastic.umd.cjs"}},"gitHead":"ee53eb2294599ba8a2ae2b16c0054973c1131ebf","scripts":{"lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore","build":"npm run build:types && npm run build:lib","serve":"vite","docs:dev":"vitepress dev docs","lint:fix":"npm run lint --fix","build:lib":"vite build","typecheck":"vue-tsc --noEmit","docs:build":"vitepress build docs","build:types":"vue-tsc --declaration --emitDeclarationOnly --outDir lib_types","docs:preview":"vitepress preview docs"},"_npmUser":{"name":"adesin-fr","email":"ludovic@adesin.fr"},"repository":{"url":"git+https://github.com/adesin-fr/vue-ganttastic.git","type":"git"},"_npmVersion":"10.9.3","description":"A simple and customizable Gantt chart component for Vue.js","directories":{},"_nodeVersion":"22.19.0","dependencies":{"@vueuse/core":"^9.1.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^3.1.6","eslint":"^8.25.0","postcss":"^8.4.17","vue-tsc":"^1.8.27","prettier":"^2.7.1","vitepress":"^1.0.0-rc.4","typescript":"~4.8.4","@types/node":"^16.11.58","npm-run-all":"^4.1.5","@vue/tsconfig":"^0.1.3","eslint-plugin-vue":"^9.6.0","@vitejs/plugin-vue":"^3.1.2","postcss-preset-env":"^7.8.2","@rushstack/eslint-patch":"^1.2.0","@vuepress/plugin-search":"2.0.0-beta.51","@types/postcss-preset-env":"^7.7.0","@vue/eslint-config-prettier":"^7.0.0","@vue/eslint-config-typescript":"^11.0.2","@senojs/rollup-plugin-style-inject":"^0.1.1"},"peerDependencies":{"vue":"^3.2.40","dayjs":"^1.11.5"},"_npmOperationalInternal":{"tmp":"tmp/vue-ganttastic_2.4.2_1761680381583_0.9078660350448446","host":"s3://npm-registry-packages-npm-production"}},"2.4.3":{"name":"@adesin-fr/vue-ganttastic","version":"2.4.3","keywords":["gantt","chart","bar","diagram","vue","vuejs","ganttastic"],"author":{"url":"@adesin-fr","name":"Ludovic LEMARINEL"},"license":"MIT","_id":"@adesin-fr/vue-ganttastic@2.4.3","maintainers":[{"name":"adesin-fr","email":"ludovic@adesin.fr"}],"homepage":"https://zunnzunn.github.io/vue-ganttastic/","bugs":{"url":"https://github.com/adesin-fr/vue-ganttastic/issues"},"dist":{"shasum":"e4d66467f0ca9c5ce294d238cfd7c16cf6db36fa","tarball":"https://registry.npmjs.org/@adesin-fr/vue-ganttastic/-/vue-ganttastic-2.4.3.tgz","fileCount":27,"integrity":"sha512-GCtfe2ctIzFqVj0EyKXuiYH+wL/95MY2CrLqWmJwcLFrWX9fD9EBdEcfIYyr3EgSje1MvKm1fTN5P+9LSfc6dw==","signatures":[{"sig":"MEUCIDjj0TmRLy3x3GbwwG5W1NQZ66EpfQ6OJS5GhMj5eBjiAiEAh0z7wQA1i1FCmZXwoEW35TvP/D+m3ym3CNS460nnh3s=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":294638},"main":"./lib/vue-ganttastic.umd.cjs","type":"module","types":"./lib_types/vue-ganttastic.d.ts","exports":{".":{"types":"./lib_types/vue-ganttastic.d.ts","import":"./lib/vue-ganttastic.js","require":"./lib/vue-ganttastic.umd.cjs"}},"gitHead":"896c982fee90a52f531570642feed068e116866b","scripts":{"lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore","build":"npm run build:types && npm run build:lib","serve":"vite","docs:dev":"vitepress dev docs","lint:fix":"npm run lint --fix","build:lib":"vite build","typecheck":"vue-tsc --noEmit","docs:build":"vitepress build docs","build:types":"vue-tsc --declaration --emitDeclarationOnly --outDir lib_types","docs:preview":"vitepress preview docs"},"_npmUser":{"name":"adesin-fr","email":"ludovic@adesin.fr"},"repository":{"url":"git+https://github.com/adesin-fr/vue-ganttastic.git","type":"git"},"_npmVersion":"10.9.3","description":"A simple and customizable Gantt chart component for Vue.js","directories":{},"_nodeVersion":"22.19.0","dependencies":{"@vueuse/core":"^9.1.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^3.1.6","eslint":"^8.25.0","postcss":"^8.4.17","vue-tsc":"^1.8.27","prettier":"^2.7.1","vitepress":"^1.0.0-rc.4","typescript":"~4.8.4","@types/node":"^16.11.58","npm-run-all":"^4.1.5","@vue/tsconfig":"^0.1.3","eslint-plugin-vue":"^9.6.0","@vitejs/plugin-vue":"^3.1.2","postcss-preset-env":"^7.8.2","@rushstack/eslint-patch":"^1.2.0","@vuepress/plugin-search":"2.0.0-beta.51","@types/postcss-preset-env":"^7.7.0","@vue/eslint-config-prettier":"^7.0.0","@vue/eslint-config-typescript":"^11.0.2","@senojs/rollup-plugin-style-inject":"^0.1.1"},"peerDependencies":{"vue":"^3.2.40","dayjs":"^1.11.5"},"_npmOperationalInternal":{"tmp":"tmp/vue-ganttastic_2.4.3_1761680891820_0.2053943026247127","host":"s3://npm-registry-packages-npm-production"}},"2.4.4":{"name":"@adesin-fr/vue-ganttastic","version":"2.4.4","keywords":["gantt","chart","bar","diagram","vue","vuejs","ganttastic"],"author":{"url":"@adesin-fr","name":"Ludovic LEMARINEL"},"license":"MIT","_id":"@adesin-fr/vue-ganttastic@2.4.4","maintainers":[{"name":"adesin-fr","email":"ludovic@adesin.fr"}],"homepage":"https://zunnzunn.github.io/vue-ganttastic/","bugs":{"url":"https://github.com/adesin-fr/vue-ganttastic/issues"},"dist":{"shasum":"c6a59dba5c7456acaf3b697b1ebbd5a4a5adcd10","tarball":"https://registry.npmjs.org/@adesin-fr/vue-ganttastic/-/vue-ganttastic-2.4.4.tgz","fileCount":27,"integrity":"sha512-TTxwFGPh1fOnL6iW2fKHw28c8uYfZWUSV6+ASGyUI2fcPUYSe+vm92VEXXMhw2b+JMGoWBzitTHRP0Pz84cdAw==","signatures":[{"sig":"MEUCIGaA54Gbt39HPhXBbuNtnEWG05aseByZ3M1xBcixuF9YAiEAiFZspVj8qdPfB35WfBSTb2syVG46AZI2whrctLGVAhE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":294638},"main":"./lib/vue-ganttastic.umd.cjs","type":"module","types":"./lib_types/vue-ganttastic.d.ts","exports":{".":{"types":"./lib_types/vue-ganttastic.d.ts","import":"./lib/vue-ganttastic.js","require":"./lib/vue-ganttastic.umd.cjs"}},"gitHead":"10492fd4640698e8cac48d28db5eda7d3c5e03c1","scripts":{"lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore","build":"npm run build:types && npm run build:lib","serve":"vite","docs:dev":"vitepress dev docs","lint:fix":"npm run lint --fix","build:lib":"vite build","typecheck":"vue-tsc --noEmit","docs:build":"vitepress build docs","build:types":"vue-tsc --declaration --emitDeclarationOnly --outDir lib_types","docs:preview":"vitepress preview docs"},"_npmUser":{"name":"adesin-fr","email":"ludovic@adesin.fr"},"repository":{"url":"git+https://github.com/adesin-fr/vue-ganttastic.git","type":"git"},"_npmVersion":"10.9.3","description":"A simple and customizable Gantt chart component for Vue.js","directories":{},"_nodeVersion":"22.19.0","dependencies":{"@vueuse/core":"^9.1.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^3.1.6","eslint":"^8.25.0","postcss":"^8.4.17","vue-tsc":"^1.8.27","prettier":"^2.7.1","vitepress":"^1.0.0-rc.4","typescript":"~4.8.4","@types/node":"^16.11.58","npm-run-all":"^4.1.5","@vue/tsconfig":"^0.1.3","eslint-plugin-vue":"^9.6.0","@vitejs/plugin-vue":"^3.1.2","postcss-preset-env":"^7.8.2","@rushstack/eslint-patch":"^1.2.0","@vuepress/plugin-search":"2.0.0-beta.51","@types/postcss-preset-env":"^7.7.0","@vue/eslint-config-prettier":"^7.0.0","@vue/eslint-config-typescript":"^11.0.2","@senojs/rollup-plugin-style-inject":"^0.1.1"},"peerDependencies":{"vue":"^3.2.40","dayjs":"^1.11.5"},"_npmOperationalInternal":{"tmp":"tmp/vue-ganttastic_2.4.4_1761681165077_0.31941369715541024","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-10-28T19:19:29.274Z","modified":"2026-10-05T13:19:02.828Z","2.4.0":"2025-10-28T19:19:29.534Z","2.4.1":"2025-10-28T19:30:55.476Z","2.4.2":"2025-10-28T19:39:41.806Z","2.4.3":"2025-10-28T19:48:12.023Z","2.4.4":"2025-10-28T19:52:45.284Z"},"bugs":{"url":"https://github.com/adesin-fr/vue-ganttastic/issues"},"author":{"url":"@adesin-fr","name":"Ludovic LEMARINEL"},"license":"MIT","homepage":"https://zunnzunn.github.io/vue-ganttastic/","keywords":["gantt","chart","bar","diagram","vue","vuejs","ganttastic"],"repository":{"url":"git+https://github.com/adesin-fr/vue-ganttastic.git","type":"git"},"description":"A simple and customizable Gantt chart component for Vue.js","maintainers":[{"email":"arthur@adesin.fr","name":"arthur-gosset"},{"email":"ludovic@adesin.fr","name":"ludovic-lemarinel"}],"readme":"# Vue Ganttastic\n\n<div style=\"display: flex; flex-direction: column; align-items:center;\">\n<img\n    src=\"https://user-images.githubusercontent.com/28678851/148047714-301f07df-4101-48b8-9e47-1f272b290e80.png\" \n    style=\"margin: 10px;\" height=\"150\"\n    alt=\"Vue Ganttastic logo\"\n/>\n\n<b>Vue Ganttastic</b> is a simple, interactive and highly customizable Gantt chart component for Vue 3.\n\n![image](https://user-images.githubusercontent.com/28678851/148191571-76bd8d61-4583-4538-8c59-cc2915494890.png)\n\n</div>\n\n## Features\n\n- **[Vue 3](https://v3.vuejs.org/) support**\n- **[TypeScript](https://www.typescriptlang.org/) support** _(ships with out of the box type declarations)_\n- **Interactivity** _(dynamic, movable and pushable bars)_\n- **Reactivity / Responsiveness** (_when changes occur, bars are repositioned accordingly_)\n- **Customization options** (_chart/bar styling, slots, event handlers etc._)\n- **🆕 Zoom & Pan** _(mouse wheel to zoom in/out, Ctrl+wheel to pan, drag to navigate)_\n- **🆕 Automatic Precision** _(time axis automatically adjusts detail level based on zoom)_\n- **🆕 Date Object Support** _(accepts both Date objects and formatted strings)_\n\nUsing Vue 2? Check out [Vue-Ganttastic v1](https://github.com/zunnzunn/vue-ganttastic/tree/vue-ganttastic-v1).\n\n## Guide and Docs\n\nFor further guides and references, check out the [official docs](https://zunnzunn.github.io/vue-ganttastic/getting-started.html).\n\n## Quickstart\n\nInstall using\n\n```\nnpm install @adesin-fr/vue-ganttastic\n```\n\nThen, initalize the plugin in the starting point of your app (most likely src/main.js):\n\n```js\nimport { createApp } from \"vue\"\nimport App from \"./App.vue\"\n...\nimport ganttastic from '@adesin-fr/vue-ganttastic'\n...\ncreateApp(App)\n  .use(ganttastic)\n  .mount('#app')\n```\n\nThis will globally register the components g-gantt-chart and g-gantt-row and you will be able to use those two components right away.\n\n```html\n<template>\n  <g-gantt-chart\n    chart-start=\"2021-07-12 12:00\"\n    chart-end=\"2021-07-14 12:00\"\n    precision=\"hour\"\n    bar-start=\"myBeginDate\"\n    bar-end=\"myEndDate\"\n  >\n    <g-gantt-row label=\"My row 1\" :bars=\"row1BarList\" />\n    <g-gantt-row label=\"My row 2\" :bars=\"row2BarList\" />\n\n    <!-- Alternatively, you can use g-gantt-bar components directly inside g-gantt-row -->\n    <g-gantt-row label=\"My row 3\">\n      <g-gantt-bar :bar=\"singleBar\" />\n    </g-gantt-row>\n  </g-gantt-chart>\n</template>\n\n<script setup>\n  import { ref } from \"vue\"\n\n  const row1BarList = ref([\n    {\n      myBeginDate: \"2021-07-13 13:00\",\n      myEndDate: \"2021-07-13 19:00\",\n      id: \"unique-id-1\", // each bar must have a unique \"id\" property\n      label: \"Lorem ipsum dolor\"\n    }\n  ])\n  const row2BarList = ref([\n    {\n      myBeginDate: \"2021-07-13 00:00\",\n      myEndDate: \"2021-07-14 02:00\",\n      // ganttBarConfig object is not needed anymore : id and label are now picked directly on objects...\n      id: \"another-unique-id-2\",\n      hasHandles: true,\n      label: \"Hey, look at me\",\n      style: {\n        // arbitrary CSS styling for your bar\n        background: \"#e09b69\",\n        borderRadius: \"20px\",\n        color: \"black\"\n      },\n      class: \"foo\" // you can also add CSS classes to your bars!\n    }\n  ])\n\n  const singleBar = ref({\n    myBeginDate: \"2021-07-13 10:00\",\n    myEndDate: \"2021-07-13 15:00\",\n    id: \"unique-id-3\",\n    label: \"Direct bar usage\"\n  })\n</script>\n```\n\n## New Features\n\n### ✨ Simplified Bar Configuration\n\n**Important:** The `ganttBarConfig` object is no longer needed! You can now define bar properties directly on the bar object:\n\n```js\n// ✅ New simplified format (recommended)\nconst bars = ref([\n  {\n    myBeginDate: \"2021-07-13 13:00\",\n    myEndDate: \"2021-07-13 19:00\",\n    id: \"unique-id-1\",\n    label: \"My task\",\n    hasHandles: true,\n    style: { background: \"#e09b69\" },\n    class: \"my-custom-class\"\n  }\n])\n\n// ❌ Old format (deprecated, but still supported)\nconst bars = ref([\n  {\n    myBeginDate: \"2021-07-13 13:00\",\n    myEndDate: \"2021-07-13 19:00\",\n    ganttBarConfig: {\n      id: \"unique-id-1\",\n      label: \"My task\",\n      // ...\n    }\n  }\n])\n```\n\nProperties like `id`, `label`, `hasHandles`, `style`, `class`, `html`, `bundle`, and `immobile` can all be set directly on the bar object.\n\n### 🎯 Zoom & Pan\n\nNavigate through your Gantt chart intuitively with both mouse and touch controls:\n\n#### Desktop (Mouse & Trackpad)\n- **Zoom In/Out**: Use the mouse wheel to zoom in (show less time) or zoom out (show more time)\n  - Zooming is centered on your mouse cursor position\n  - Supports 20x zoom out (0.05x) to 10x zoom in\n\n- **Pan with Ctrl+Wheel**: Hold `Ctrl` (or `Cmd` on Mac) and scroll to move through time horizontally\n\n- **Drag to Pan**: Click and drag on empty areas of the chart (timeaxis, background) to pan\n  - The cursor changes to a grab hand when you can drag\n  - Bar dragging remains fully functional - drag functionality is context-aware\n\n#### Mobile & Touch Devices\n- **Pinch to Zoom**: Use two fingers to pinch in (zoom out) or pinch out (zoom in)\n  - Works just like zooming on maps\n  - Simultaneous panning while pinching is supported\n\n- **Two-Finger Pan**: Drag with two fingers to pan horizontally through the timeline\n\n- **Single-Finger Pan**: Drag with one finger on empty areas to pan through time\n  - Bar dragging on touch devices remains fully functional\n\n### 🔄 Automatic Precision Switching\n\nThe time axis automatically adjusts its granularity based on the visible time range:\n\n- **< 1 day visible**: Shows **hourly** precision\n- **1-60 days visible**: Shows **daily** precision\n- **60-365 days visible**: Shows **weekly** precision\n- **> 365 days visible**: Shows **monthly** precision\n\nThis provides the optimal level of detail at any zoom level, similar to how maps adjust labels when zooming.\n\n### 📅 Date Object Support\n\nThe `chartStart` and `chartEnd` props now accept both Date objects and formatted strings:\n\n```js\n// Using Date objects (recommended for dynamic dates)\nconst chartStart = new Date('2024-01-01')\nconst chartEnd = new Date('2024-12-31')\n\n// Or using formatted strings (as before)\nconst chartStart = '01.01.2024 00:00'\nconst chartEnd = '31.12.2024 23:59'\n```\n\nThe component automatically detects the type and handles conversions internally. All zoom, pan, and date range calculations work seamlessly with both formats.\n\n### 📊 Flexible Bar Usage\n\nYou can now use bars in two ways:\n\n1. **Via `:bars` prop** (original method):\n```html\n<g-gantt-row label=\"My row\" :bars=\"barList\" />\n```\n\n2. **Directly as child components** (new method):\n```html\n<g-gantt-row label=\"My row\">\n  <g-gantt-bar :bar=\"bar1\" />\n  <g-gantt-bar :bar=\"bar2\" />\n</g-gantt-row>\n```\n\nBoth methods work identically and can even be mixed within the same chart.\n\n### 🖱️ Click and Double-Click Events\n\nThe Gantt chart now supports both single-click and double-click events on bars and the chart background, with intelligent event handling to prevent conflicts:\n\n#### Chart Events\n\n```html\n<g-gantt-chart\n  @click-chart=\"onChartClick\"\n  @dblclick-chart=\"onChartDblClick\"\n>\n  <!-- ... -->\n</g-gantt-chart>\n```\n\n```js\nconst onChartClick = ({ e, datetime }) => {\n  console.log('Clicked at:', datetime)\n  // datetime is the date/time at the click position\n}\n\nconst onChartDblClick = ({ e, datetime }) => {\n  console.log('Double-clicked at:', datetime)\n}\n```\n\n#### Bar Events\n\n```html\n<g-gantt-chart\n  @click-bar=\"onBarClick\"\n  @dblclick-bar=\"onBarDblClick\"\n>\n  <!-- ... -->\n</g-gantt-chart>\n```\n\n```js\nconst onBarClick = ({ bar, e, datetime }) => {\n  console.log('Clicked bar:', bar.id)\n}\n\nconst onBarDblClick = ({ bar, e, datetime }) => {\n  console.log('Double-clicked bar:', bar.id)\n}\n```\n\n**Smart Event Handling:**\n- Single-click events are delayed by 250ms to wait for a potential double-click\n- If a double-click occurs, only the double-click event fires (single-click is cancelled)\n- This prevents both events from firing on a double-click action\n- The `datetime` parameter provides the exact date/time at the click position\n\n## Contributing\n\nClone the project, make some changes, test your changes out, create a pull request with a short summary of what changes you made. Contributing is warmly welcomed!\n\nTo test your changes out before creating a pull request, create a build:\n\n```\nnpm run build\n```\n\nTo test out the build, you should create a tarball using:\n\n```\nnpm pack\n```\n\nThen, place the tarball in some other test project and install the package from the tarball by using:\n\n```\nnpm install <name_of_the_package>.tgz\n```\n\n\n## About\n\n**License** [MIT](https://choosealicense.com/licenses/mit/)  \n**Author**: Marko Žunić, BSc  \n[GitHub Repository](https://github.com/zunnzunn/vue-ganttastic)\n\n## Support the project!\n\nIn case you found the library useful, a little tip would be much appreciated!\n\n<form action=\"https://www.paypal.com/donate\" method=\"post\" target=\"_top\">\n<input type=\"hidden\" name=\"hosted_button_id\" value=\"M63C8DAMV5YDJ\" />\n<input type=\"image\" src=\"https://pics.paypal.com/00/s/MTdhMWZmNTUtOWQ1Yi00YmRjLWJjMjgtY2Y0NTNhODM0OTJl/file.PNG\" border=\"0\" name=\"submit\" title=\"PayPal - The safer, easier way to pay online!\" alt=\"Donate with PayPal button\" style=\"max-width:200px\"/>\n<img alt=\"\" border=\"0\" src=\"https://www.paypal.com/en_AT/i/scr/pixel.gif\" width=\"1\" height=\"1\" />\n</form>\n\nBTC address:  \n![image](https://user-images.githubusercontent.com/28678851/233090745-a0a6d8a4-6df6-4b82-ac0c-90e69551786e.png)\n\n## Screenshots\n\n![image](https://user-images.githubusercontent.com/28678851/148191571-76bd8d61-4583-4538-8c59-cc2915494890.png)\n\n![image](https://user-images.githubusercontent.com/28678851/148191529-b50c0d17-bcc1-4a78-9d2c-ff2a36b03f52.png)\n\n![image](https://user-images.githubusercontent.com/28678851/148191757-a2520dce-aeed-43df-87b2-3a64e225f9e7.png)\n","readmeFilename":"README.md"}