@bryntum/calendar-vue-3 7.1.1 → 7.1.3

package/README.md

@@ -1,53 +1,340 @@
+<br>
+<br>
+
+<p align="center">
+  <a href="https://bryntum.com/" rel="noopener" target="_blank">
+    <img width="350" src="https://bryntum.com/resources/bryntum_logo_blue.svg" alt="Bryntum logo">
+  </a>
+  &emsp;&emsp;&emsp;&emsp;&emsp;
+  <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/vue.svg" alt="Vue" width="100">
+</p>
+
+<br>
+
 # Vue 3 wrapper for Bryntum Calendar
 
-This package contains a wrapper that encapsulates Bryntum Calendar and turns it into a Vue 3 component, exposing
-configuration options, properties, features, and events.
+This package provides a wrapper that turns Bryntum Calendar into a Vue 3 component, exposing configuration options,
+properties, features, and events.
+
+## Version Requirement
+
+* Vue: `3.2` or higher
+* TypeScript: `4.2` or higher
+* Vite `5` or higher
+
+## Package Contents
+
+| Path         | Description                                    |
+|--------------|------------------------------------------------|
+| `lib/`       | Vue 3 wrapper components (BryntumCalendar etc.) |
+| `src/`       | Original Vue source files                      |
+| `src/*.d.ts` | TypeScript type definitions                    |
+
+**Note:** This is a wrapper package. The core `@bryntum/calendar` package must be installed separately.
+
+## Installation
+
+### Vue 3 Wrapper
 
-# Bryntum repository access setup
+```bash
+npm install @bryntum/calendar-vue-3@latest
+```
+
+### Component Package (Required)
+
+```bash
+npm install @bryntum/calendar@latest
+```
+
+## Try Bryntum Online Demos
 
-This npm package requires access to the private Bryntum npm repository.
-You must be logged in to this repository as a licensed or trial user to access it.
-Please check the [Online npm repository guide](https://bryntum.com/products/calendar/docs/guide/Calendar/npm-repository) for detailed information on the sign-up/login
-process.
+* [View Online Vue Demos](https://bryntum.com/products/calendar/examples/?framework=vue)
 
-# Installation
+## Quick Start
 
-The installation is performed by running the installation command in the root of your application folder. The specific
-command depends on the package manager used in your application.
+Edit the `src/App.vue` file and replace the content with the following:
 
-The following commands are most frequently used:
+```typescript
+<script setup>
+import { BryntumCalendar } from '@bryntum/calendar-vue-3';
+import { calendarProps } from './AppConfig.js';
+</script>
 
-Install using `npm`:
+<template>
+  <bryntum-calendar v-bind=calendarProps />
+</template>
 
-```shell
-npm install @bryntum/calendar-vue-3@7.1.1
+<style lang="scss">
+@import './App.scss';
+</style>
 ```
 
-Install using `yarn`:
+Create a `CalendarConfig.ts` file in the `src/` directory with the following content:
 
-```shell
-yarn add @bryntum/calendar-vue-3@7.1.1
+```typescript
+import { type BryntumCalendarProps } from '@bryntum/calendar-vue-3';
+
+export const calendarProps : BryntumCalendarProps = {
+    // Start life looking at this date
+    date : new Date(2026, 5, 7),
+
+    // CrudManager arranges loading and syncing of data in JSON form from/to a web service
+    crudManager : {
+        loadUrl : 'data/data.json',
+        autoLoad : true
+    },
+
+    // Features named by the properties are included.
+    // An object is used to configure the feature.
+    eventTooltipFeature : {
+        // Configuration options are passed on to the tooltip instance
+        // We want the tooltip's left edge aligned to the right edge of the event if possible.
+        align : 'l-r'
+    }
+};
 ```
 
-# Integration guide
+<details>
+<summary>Create sample data (click to expand)</summary>
+
+Create a `public/data/data.json` file for example data and add the following JSON data to it:
+
+```json
+{
+  "success": true,
+  "resources": {
+    "rows": [
+      {
+        "id": 1,
+        "name": "New York Team",
+        "eventColor": "blue"
+      },
+      {
+        "id": 2,
+        "name": "Tokyo Hub",
+        "eventColor": "green"
+      },
+      {
+        "id": 3,
+        "name": "Paris Office",
+        "eventColor": "orange"
+      },
+      {
+        "id": 4,
+        "name": "Sydney Crew",
+        "eventColor": "red"
+      }
+    ]
+  },
+  "events": {
+    "rows": [
+      {
+        "id": 1,
+        "name": "Kickoff Strategy Meeting",
+        "startDate": "2026-06-08T09:00:00",
+        "endDate": "2026-06-08T12:30:00",
+        "resourceId": 1
+      },
+      {
+        "id": 2,
+        "name": "Client Review Call",
+        "startDate": "2026-06-09T14:00:00",
+        "endDate": "2026-06-09T17:00:00",
+        "resourceId": 1
+      },
+      {
+        "id": 3,
+        "name": "Design Workshop",
+        "startDate": "2026-06-10T10:00:00",
+        "endDate": "2026-06-10T15:00:00",
+        "resourceId": 1
+      },
+      {
+        "id": 4,
+        "name": "Project Planning",
+        "startDate": "2026-06-08T13:00:00",
+        "endDate": "2026-06-08T16:30:00",
+        "resourceId": 2
+      },
+      {
+        "id": 5,
+        "name": "Sprint Retrospective",
+        "startDate": "2026-06-09T15:00:00",
+        "endDate": "2026-06-09T19:00:00",
+        "resourceId": 2
+      },
+      {
+        "id": 6,
+        "name": "Innovation Lab Session",
+        "startDate": "2026-06-11T16:00:00",
+        "endDate": "2026-06-11T19:30:00",
+        "resourceId": 2
+      },
+      {
+        "id": 7,
+        "name": "UX/UI Review",
+        "startDate": "2026-06-09T08:30:00",
+        "endDate": "2026-06-09T11:00:00",
+        "resourceId": 3
+      },
+      {
+        "id": 8,
+        "name": "Marketing Sync",
+        "startDate": "2026-06-10T08:00:00",
+        "endDate": "2026-06-10T11:00:00",
+        "resourceId": 3
+      },
+      {
+        "id": 9,
+        "name": "Team Building Lunch",
+        "startDate": "2026-06-12T11:30:00",
+        "endDate": "2026-06-12T15:00:00",
+        "resourceId": 3
+      },
+      {
+        "id": 10,
+        "name": "Daily Standup",
+        "startDate": "2026-06-08T09:00:00",
+        "endDate": "2026-06-08T12:30:00",
+        "resourceId": 4
+      },
+      {
+        "id": 11,
+        "name": "Product Demo",
+        "startDate": "2026-06-10T16:00:00",
+        "endDate": "2026-06-10T20:00:00",
+        "resourceId": 4
+      },
+      {
+        "id": 12,
+        "name": "Customer Feedback Session",
+        "startDate": "2026-06-11T11:00:00",
+        "endDate": "2026-06-11T15:30:00",
+        "resourceId": 4
+      },
+      {
+        "id": 13,
+        "name": "End of Sprint Wrap-up",
+        "startDate": "2026-06-12T12:00:00",
+        "endDate": "2026-06-12T15:00:00",
+        "resourceId": 4
+      },
+      {
+        "id": 100,
+        "name": "Hackathon 2026",
+        "startDate": "2026-06-08T00:00:00",
+        "endDate": "2026-06-15T00:00:00",
+        "allDay": true,
+        "resourceId": 1,
+        "eventColor": "purple"
+      },
+      {
+        "id": 101,
+        "name": "Innovation Day",
+        "startDate": "2026-06-08T00:00:00",
+        "endDate": "2026-06-09T00:00:00",
+        "allDay": true,
+        "resourceId": 2
+      },
+      {
+        "id": 102,
+        "name": "Wellness Retreat",
+        "startDate": "2026-06-10T00:00:00",
+        "endDate": "2026-06-11T00:00:00",
+        "allDay": true,
+        "resourceId": 3
+      },
+      {
+        "id": 103,
+        "name": "Tech Expo Visit",
+        "startDate": "2026-06-11T00:00:00",
+        "endDate": "2026-06-12T00:00:00",
+        "allDay": true,
+        "resourceId": 4
+      },
+      {
+        "id": 104,
+        "name": "Team Celebration",
+        "startDate": "2026-06-13T00:00:00",
+        "endDate": "2026-06-14T00:00:00",
+        "allDay": true,
+        "resourceId": 1
+      }
+    ]
+  }
+}
+```
+
+This is the data the Bryntum Calendar will use.
+
+</details>
+
+Lastly, add some styling to your `src/style.css`:
+
+```css
+/* FontAwesome is used for icons */
+@import '@bryntum/calendar/fontawesome/css/fontawesome.css';
+@import '@bryntum/calendar/fontawesome/css/solid.css';
+/* Structural CSS */
+@import "@bryntum/calendar/calendar.css";
+/* Bryntum theme of your choice */
+@import "@bryntum/calendar/svalbard-light.css";
+```
+
+## Integration Guide
 
 For details on installing and using this package, see the
 [Vue Integration Guide](https://bryntum.com/products/calendar/docs/guide/Calendar/integration/vue/guide).
 
-# Online references
+## Wrappers
+
+Vue wrappers encapsulate Bryntum components as native Vue components, exposing all configuration options,
+properties, features, and events through Vue-familiar patterns like props, events, and slots.
+
+Visit [Wrappers documentation](https://bryntum.com/products/calendar/docs/guide/Calendar/integration/vue/guide#wrappers) for the complete list of available
+wrapper components.
+
+## Features
+
+Features are optional modules that extend Bryntum Calendar functionality. Each feature is suffixed with `Feature` and
+can be enabled and configured through standard Vue props.
+
+Visit [Features documentation](https://bryntum.com/products/calendar/docs/guide/Calendar/integration/vue/guide#features) for the complete list of available
+features and their configuration options.
+
+## Explore All Bryntum Products
+
+* [Bryntum Grid](https://bryntum.com/products/grid/) - High-performance data grid
+* [Bryntum Scheduler](https://bryntum.com/products/scheduler/) - Resource scheduling component
+* [Bryntum Scheduler Pro](https://bryntum.com/products/schedulerpro/) - Advanced scheduling with dependencies
+* [Bryntum Gantt](https://bryntum.com/products/gantt/) - Project planning and management
+* [Bryntum Calendar](https://bryntum.com/products/calendar/) - Full-featured calendar component
+* [Bryntum TaskBoard](https://bryntum.com/products/taskboard/) - Kanban-style task management
+
+Explore our comprehensive collection of demos:
+
+| Product           |   <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/js.svg" alt="JavaScript" width="30"><br>JavaScript    |  <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/react.svg" alt="React" width="30"><br>React  |   <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/vue.svg" alt="Vue" width="30"><br>Vue   | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/angular.svg" alt="Angular" width="30"><br>Angular |
+|-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:|
+| **Grid**          |         [Grid JavaScript demos](https://bryntum.com/products/grid/examples/?framework=javascript)          |         [Grid React demos](https://bryntum.com/products/grid/examples/?framework=react)          |         [Grid Vue demos](https://bryntum.com/products/grid/examples/?framework=vue)          |         [Grid Angular demos](https://bryntum.com/products/grid/examples/?framework=angular)          |
+| **Scheduler**     |    [Scheduler JavaScript demos](https://bryntum.com/products/scheduler/examples/?framework=javascript)     |    [Scheduler React demos](https://bryntum.com/products/scheduler/examples/?framework=react)     |    [Scheduler Vue demos](https://bryntum.com/products/scheduler/examples/?framework=vue)     |    [Scheduler Angular demos](https://bryntum.com/products/scheduler/examples/?framework=angular)     |
+| **Scheduler Pro** | [Scheduler Pro JavaScript demos](https://bryntum.com/products/schedulerpro/examples/?framework=javascript) | [Scheduler Pro React demos](https://bryntum.com/products/schedulerpro/examples/?framework=react) | [Scheduler Pro Vue demos](https://bryntum.com/products/schedulerpro/examples/?framework=vue) | [Scheduler Pro Angular demos](https://bryntum.com/products/schedulerpro/examples/?framework=angular) |
+| **Gantt**         |        [Gantt JavaScript demos](https://bryntum.com/products/gantt/examples/?framework=javascript)         |        [Gantt React demos](https://bryntum.com/products/gantt/examples/?framework=react)         |        [Gantt Vue demos](https://bryntum.com/products/gantt/examples/?framework=vue)         |        [Gantt Angular demos](https://bryntum.com/products/gantt/examples/?framework=angular)         |
+| **Calendar**      |     [Calendar JavaScript demos](https://bryntum.com/products/calendar/examples/?framework=javascript)      |     [Calendar React demos](https://bryntum.com/products/calendar/examples/?framework=react)      |     [Calendar Vue demos](https://bryntum.com/products/calendar/examples/?framework=vue)      |     [Calendar Angular demos](https://bryntum.com/products/calendar/examples/?framework=angular)      |
+| **TaskBoard**     |    [TaskBoard JavaScript demos](https://bryntum.com/products/taskboard/examples/?framework=javascript)     |    [TaskBoard React demos](https://bryntum.com/products/taskboard/examples/?framework=react)     |    [TaskBoard Vue demos](https://bryntum.com/products/taskboard/examples/?framework=vue)     |    [TaskBoard Angular demos](https://bryntum.com/products/taskboard/examples/?framework=angular)     |
+
+## Online references
 
-* [Bryntum Vue Quick Start Guide](https://bryntum.com/products/calendar/docs/guide/Calendar/quick-start/vue-3)
-* [Bryntum Vue Integration Guide](https://bryntum.com/products/calendar/docs/guide/Calendar/integration/vue/guide)
-* [Bryntum npm repository guide](https://bryntum.com/products/calendar/docs/guide/Calendar/npm-repository)
 * [Bryntum Calendar documentation](https://bryntum.com/products/calendar/docs/)
 * [Bryntum Calendar examples](https://bryntum.com/products/calendar/examples/)
+
 * [Bryntum Support Forum](https://forum.bryntum.com/)
 * [Contact us](https://bryntum.com/contact/)
 
-# License and copyright
+## License and copyright
 
 This wrapper depends on Bryntum Calendar, which is commercial software and requires a paid license.
 Please visit the [Bryntum Calendar End User License](https://bryntum.com/products/calendar/license/) for the full text of the license.
 
 Copyright © 2009-2026, Bryntum
 All rights reserved.
+

package/lib/chunks/{DSQuUUDN.js → B36YEgoW.js}

@@ -169,7 +169,7 @@ const H = {
     treeFeature: {},
     treeGroupFeature: {}
   },
-  emits: ["beforeCancelCellEdit", "beforeCancelRowEdit", "beforeCellEditStart", "beforeCellRangeDelete", "beforeCellRangeEdit", "beforeColumnDragStart", "beforeColumnDropFinalize", "beforeColumnResize", "beforeCopy", "beforeCSVExport", "beforeDestroy", "beforeExcelExport", "beforeFillHandleDragStart", "beforeFinishCellEdit", "beforeFinishRowEdit", "beforeHide", "beforePaste", "beforePdfExport", "beforeRenderRow", "beforeRenderRows", "beforeRowCollapse", "beforeRowExpand", "beforeSelectionChange", "beforeSetRecord", "beforeShow", "beforeStartRowEdit", "beforeStateApply", "beforeStateSave", "beforeToggleGroup", "beforeToggleNode", "cancelCellEdit", "catchAll", "cellClick", "cellContextMenu", "cellDblClick", "cellMenuBeforeShow", "cellMenuItem", "cellMenuShow", "cellMenuToggleItem", "cellMouseEnter", "cellMouseLeave", "cellMouseOut", "cellMouseOver", "collapse", "collapseNode", "columnDrag", "columnDragStart", "columnDrop", "columnResize", "columnResizeStart", "contextMenuItem", "contextMenuToggleItem", "copy", "dataChange", "destroy", "dirtyStateChange", "dragSelecting", "elementCreated", "expand", "expandNode", "fileDrop", "fillHandleBeforeDragFinalize", "fillHandleDrag", "fillHandleDragAbort", "fillHandleDragEnd", "fillHandleDragStart", "finishCellEdit", "finishRowEdit", "focusIn", "focusOut", "gridRowBeforeDragStart", "gridRowBeforeDropFinalize", "gridRowDrag", "gridRowDragAbort", "gridRowDragStart", "gridRowDrop", "headerClick", "headerMenuBeforeShow", "headerMenuItem", "headerMenuShow", "headerMenuToggleItem", "hide", "lockRows", "mouseOut", "mouseOver", "paint", "paste", "pdfExport", "readOnly", "recompose", "renderRow", "renderRows", "resize", "responsive", "rowCollapse", "rowExpand", "rowMouseEnter", "rowMouseLeave", "scroll", "selectionChange", "selectionModeChange", "show", "split", "splitterCollapseClick", "splitterDragEnd", "splitterDragStart", "splitterExpandClick", "startCellEdit", "startRowEdit", "subGridCollapse", "subGridExpand", "toggleGroup", "toggleNode", "toolClick", "unlockRows", "unsplit"],
+  emits: ["beforeCancelCellEdit", "beforeCancelRowEdit", "beforeCellEditStart", "beforeCellRangeDelete", "beforeCellRangeEdit", "beforeColumnCollapseToggle", "beforeColumnDragStart", "beforeColumnDropFinalize", "beforeColumnResize", "beforeCopy", "beforeCSVExport", "beforeDestroy", "beforeExcelExport", "beforeFillHandleDragStart", "beforeFinishCellEdit", "beforeFinishRowEdit", "beforeHide", "beforePaste", "beforePdfExport", "beforeRenderRow", "beforeRenderRows", "beforeRowCollapse", "beforeRowExpand", "beforeSelectionChange", "beforeSetRecord", "beforeShow", "beforeStartRowEdit", "beforeStateApply", "beforeStateSave", "beforeToggleGroup", "beforeToggleNode", "cancelCellEdit", "catchAll", "cellClick", "cellContextMenu", "cellDblClick", "cellMenuBeforeShow", "cellMenuItem", "cellMenuShow", "cellMenuToggleItem", "cellMouseEnter", "cellMouseLeave", "cellMouseOut", "cellMouseOver", "collapse", "collapseNode", "columnCollapseToggle", "columnDrag", "columnDragStart", "columnDrop", "columnResize", "columnResizeStart", "contextMenuItem", "contextMenuToggleItem", "copy", "dataChange", "destroy", "dirtyStateChange", "dragSelecting", "elementCreated", "expand", "expandNode", "fileDrop", "fillHandleBeforeDragFinalize", "fillHandleDrag", "fillHandleDragAbort", "fillHandleDragEnd", "fillHandleDragStart", "finishCellEdit", "finishRowEdit", "focusIn", "focusOut", "gridRowBeforeDragStart", "gridRowBeforeDropFinalize", "gridRowDrag", "gridRowDragAbort", "gridRowDragStart", "gridRowDrop", "headerClick", "headerMenuBeforeShow", "headerMenuItem", "headerMenuShow", "headerMenuToggleItem", "hide", "lockRows", "mouseOut", "mouseOver", "paint", "paste", "pdfExport", "readOnly", "recompose", "renderRow", "renderRows", "resize", "responsive", "rowCollapse", "rowExpand", "rowMouseEnter", "rowMouseLeave", "scroll", "selectionChange", "selectionModeChange", "show", "split", "splitterCollapseClick", "splitterDragEnd", "splitterDragStart", "splitterExpandClick", "startCellEdit", "startRowEdit", "subGridCollapse", "subGridExpand", "toggleGroup", "toggleNode", "toolClick", "unlockRows", "unsplit"],
   setup(T, { expose: p, emit: g }) {
     const f = g, i = {
       instanceClass: B,
@@ -335,6 +335,7 @@ const H = {
         "onBeforeCellEditStart",
         "onBeforeCellRangeDelete",
         "onBeforeCellRangeEdit",
+        "onBeforeColumnCollapseToggle",
         "onBeforeColumnDragStart",
         "onBeforeColumnDropFinalize",
         "onBeforeColumnResize",
@@ -375,6 +376,7 @@ const H = {
         "onCellMouseOver",
         "onCollapse",
         "onCollapseNode",
+        "onColumnCollapseToggle",
         "onColumnDrag",
         "onColumnDragStart",
         "onColumnDrop",
@@ -482,6 +484,7 @@ const H = {
         "beforeCellEditStart",
         "beforeCellRangeDelete",
         "beforeCellRangeEdit",
+        "beforeColumnCollapseToggle",
         "beforeColumnDragStart",
         "beforeColumnDropFinalize",
         "beforeColumnResize",
@@ -522,6 +525,7 @@ const H = {
         "cellMouseOver",
         "collapse",
         "collapseNode",
+        "columnCollapseToggle",
         "columnDrag",
         "columnDragStart",
         "columnDrop",
@@ -639,4 +643,4 @@ const H = {
 export {
   G as _
 };
-//# sourceMappingURL=DSQuUUDN.js.map
+//# sourceMappingURL=B36YEgoW.js.map