@bryntum/taskboard-vue-3-thin 7.1.2 → 7.2.0

package/lib/helper/WrapperHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"WrapperHelper.js","sources":["../../src/helper/WrapperHelper.ts"],"sourcesContent":["/**\n * Vue 3 widget helper\n */\n\nimport { type ComponentInternalInstance, nextTick } from 'vue';\nimport { type VueConfig, Widget } from '@bryntum/core-thin';\n\ndeclare global {\n    interface Window {\n        bryntum: {\n            isTestEnv?: boolean;\n            vue?: {\n                isVueConfig?: (config: any) => boolean;\n                handleVueContent?: (widget: Widget, html: VueConfig) => void;\n            };\n        };\n    }\n}\n\ninterface RenderElement extends HTMLElement {\n    vueKey: string;\n}\n\nexport type Data = Record<string, unknown>;\n\ntype SuppressNew<T> = { [K in keyof T]: T[ K ] }\n\ntype AnyConstructor<\n    Instance extends object = object,\n    Static extends object = object\n> = (new (...input: any[]) => Instance) & SuppressNew<Static>\n\ntype AnyWidget = AnyConstructor<any, any>;\n\ntype RenderData = {\n    record: any,\n    row: any,\n    column: any,\n    cellElement: RenderElement\n}\n\ntype VueTeleportConfig = {\n    vue: boolean,\n    is: string,\n    bind?: object\n    on?: object\n}\n\nexport type WidgetData<T extends AnyWidget> = {\n    instanceClass: T,\n    instanceName: string\n    isView?: boolean,\n    dataStores?: object,\n    projectStores?: boolean,\n    configNames: string[]\n    propertyConfigNames: string[]\n    propertyNames: string[]\n    eventNames: string[]\n    featureNames?: string[]\n}\n\nexport type WidgetConfig<T extends AnyWidget> = {\n    me?: ComponentInternalInstance;\n    widgetData: WidgetData<T>,\n    emit: (...args: any[]) => any\n    element: HTMLDivElement;\n    processCellContent?: Function;\n    processEventContent?: Function;\n    processWidgetContent?: Function;\n    hasFrameworkRenderer?: Function;\n    toRaw?: Function\n}\n\nexport type BryntumConfig = Record<string, any> & {\n    vueComponent?: Object,\n    listeners: Record<string, Function>,\n    features: {},\n    processCellContent: Function,\n    processEventContent: Function,\n    processWidgetContent: Function;\n    hasFrameworkRenderer: Function\n};\n\nexport class WrapperHelper {\n\n    /**\n     * Development warning. Showed when environment is set to 'development'\n     * @param {String} clsName vue component instance\n     * @param {String} msg console message\n     */\n    static devWarning(clsName: string, msg: string) {\n        // @ts-ignore\n        if (window.bryntum?.isTestEnv || process.env.NODE_ENV === 'development') {\n            console.warn(`Bryntum${clsName}Component development warning!\\n${msg}\\n` +\n                'Please check Vue integration guide: https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/guide'\n            );\n        }\n    }\n\n    static devWarningContainer(clsName: string, containerParam: string) {\n        WrapperHelper.devWarning(clsName,\n            `Using \"${containerParam}\" parameter for configuration is not recommended.\\n` +\n            'Widget is placed automatically inside it\\'s container element.\\n' +\n            `Solution: remove \"${containerParam}\" parameter from configuration.`\n        );\n    }\n\n    static devWarningConfigProp(clsName: string, prop: string) {\n        WrapperHelper.devWarning(clsName,\n            `Using \"${prop}\" parameter for configuration is not recommended.\\n` +\n            `Solution: Use separate parameter for each \"${prop}\" value to enable reactive updates of the API instance`\n        );\n    }\n\n    static devWarningUpdateProp(clsName: string, prop: string) {\n        WrapperHelper.devWarning(clsName,\n            `\"${prop}\" is a static config option for component constructor only. No runtime changes are supported!`\n        );\n    }\n\n    static camelize(str: string) {\n        return str.replace(/-./g, s => (s[1] || '').toUpperCase());\n    }\n\n    static capitalize(str: string) {\n        return str.charAt(0).toUpperCase() + str.slice(1);\n    }\n\n    /**\n     * Returns `true` if the provided configuration object is valid for Vue processing.\n     * @param {*} config\n     * @returns {Boolean}\n     */\n    static isVueConfig(config: any): boolean {\n        return Boolean(config?.vue);\n    }\n\n    /**\n     * Creates bryntum component config from vue component\n     * @param {Object} context\n     * @param {Object} context.me vue component instance\n     * @param {Object} context.widgetData reference to data\n     * @param {Function} context.emit reference to emit\n     * @param {Object} context.element HTML element\n     * @param {Function} context.processCellContent cell renderer method\n     * @param {Function} context.processEventContent event renderer method\n     * @param {Function} context.processWidgetContent widget renderer method\n     * @param {Function} context.hasFrameworkRenderer checks presence of vue renderer\n     * @param {Function} context.toRaw Vue fn to unwrap reactive object\n     * @returns {Object} config object\n     */\n    static createConfig<T extends AnyWidget>({\n        me,\n        widgetData,\n        emit,\n        element,\n        processCellContent,\n        processEventContent,\n        processWidgetContent,\n        hasFrameworkRenderer,\n        toRaw\n    }: WidgetConfig<T>) {\n\n        const\n            props: Record<string, any> = {},\n            vProps                     = me!.vnode!.props! || {};\n\n        for (const key of Object.keys(vProps)) {\n            // Convert possible kebab keys to camelCase\n            props[this.camelize(key)] = vProps[key];\n        }\n\n        const\n            {\n                instanceClass,\n                instanceName\n            }                   = widgetData,\n            isValidProp         = (propName: string) => props[propName] !== undefined,\n            configNames         = (widgetData.configNames || []).filter(isValidProp),\n            propertyConfigNames = (widgetData.propertyConfigNames || []).filter(isValidProp),\n            propertyNames       = (widgetData.propertyNames || []).filter(isValidProp),\n            featureNames        = (widgetData.featureNames || []).filter(isValidProp),\n            // Disable event listeners for onProps, which are duplicating functions with preventable result support\n            eventNames          = widgetData.eventNames.filter(eventName => !isValidProp(eventName) && !props[`on${this.capitalize(eventName)}`]),\n            bryntumConfig       = {\n                vueComponent : me,\n                listeners    : {},\n                features     : {},\n                processCellContent,\n                processEventContent,\n                processWidgetContent,\n                hasFrameworkRenderer\n            } as BryntumConfig;\n\n        // Setup events listeners\n        eventNames.forEach(eventName => bryntumConfig.listeners[eventName] = (params: any) => emit(eventName, params));\n\n        // Setup configs\n        [\n            ...configNames,\n            ...propertyConfigNames,\n            ...featureNames\n        ].forEach(propName => {\n            WrapperHelper.applyPropValue(bryntumConfig, propName, props[propName], true, toRaw);\n            if (['features', 'config'].includes(propName)) {\n                WrapperHelper.devWarningConfigProp(instanceClass.$name, propName);\n            }\n        });\n\n        // Add vue wrapper class name\n        bryntumConfig.cls = (bryntumConfig.cls || '') + ` b-vue-${instanceClass.$name.toLowerCase()}-container`;\n\n        // Prepare watch arrays\n        widgetData.configNames   = configNames;\n        widgetData.propertyNames = [\n            ...configNames,\n            ...propertyNames,\n            ...propertyConfigNames,\n            ...featureNames\n        ];\n\n        // Cleanup unused instance arrays\n        widgetData.eventNames          = [];\n        widgetData.propertyConfigNames = [];\n        widgetData.featureNames        = [];\n\n        // If component has no container specified in config then use adopt to Wrapper's element\n        const\n            containerParam = [\n                'adopt',\n                'appendTo',\n                'insertAfter',\n                'insertBefore'\n            ].find((prop: string) => bryntumConfig[prop]);\n\n        if (!containerParam) {\n            if (instanceName === 'Button') {\n                // Button should always be <a> or <button> inside owner element\n                bryntumConfig.appendTo = element;\n            }\n            else {\n                bryntumConfig.adopt = element;\n            }\n        }\n        else {\n            WrapperHelper.devWarningContainer(instanceClass.$name, containerParam);\n        }\n        return bryntumConfig;\n    }\n\n    /**\n     * Setup store events relay\n     * @param {Object} data reference to data\n     * @param {Object} instance bryntum widget instance\n     */\n    static relayStores(data: any, instance: any) {\n        const { dataStores, projectStores } = data;\n\n        if (dataStores) {\n            Object.keys(dataStores).forEach(storeName => {\n                const store = projectStores ? instance.project[storeName] : instance[storeName];\n                if (store) {\n\n\n                    if (store.syncDataOnLoad == null && !store.readUrl && !store.lazyLoad && (!store.crudManager || !store.crudManager.loadUrl)) {\n                        store.syncDataOnLoad = true;\n                    }\n\n\n\n                    // Makes relaying store events configurable but off by default\n                    if (instance && instance.relayStoreEvents) {\n                        store.relayAll(instance, dataStores[storeName]);\n                    }\n                }\n            });\n            delete data.dataStores;\n        }\n    }\n\n    /**\n     * Creates bryntum Widget from vue component\n     * @param {Object} config\n     * @param {Object} config.me vue component instance\n     * @param {Object} config.widgetData reference to data\n     * @param {Function} config.emit reference to emit\n     * @param {Object} config.element HTML element\n     * @param {Function} config.processCellContent cell renderer method\n     * @param {Function} config.hasFrameworkRenderer check the presence of vue renderer\n     * @param {Function} config.toRaw Vue fn to unwrap reactive object\n     * @returns {Object} widget object\n     */\n    static createWidget<T extends AnyWidget>(config: WidgetConfig<T>): InstanceType<T> {\n        const\n            { instanceClass } = config.widgetData,\n            cfg               = WrapperHelper.createConfig(config);\n        return (instanceClass.$name === 'Widget' ? Widget.create(cfg) : new instanceClass(cfg)) as InstanceType<T>;\n    }\n\n    /**\n     * Applies property value to Bryntum config or instance.\n     * @param {Object} configOrInstance target object\n     * @param {String} prop property name\n     * @param {Object} value value\n     * @param {Boolean} [isConfig] config setting mode\n     * @param {Function} [toRaw] Vue fn to unwrap reactive object\n     */\n    static applyPropValue(configOrInstance: any, prop: string, value: any, isConfig = true, toRaw?: Function) {\n\n        if (prop === 'project') {\n            // Allow use ProjectModel component as project\n            if (value && typeof value === 'object') {\n                configOrInstance[prop] = value.instance ? value.instance.value || value.instance : value;\n            }\n        }\n        else if (prop === 'features' && typeof value === 'object') {\n            Object.keys(value).forEach(key => WrapperHelper.applyPropValue(configOrInstance, `${key}Feature`, value[key], isConfig, toRaw));\n        }\n        else if (prop === 'config' && typeof value === 'object') {\n            Object.keys(value).forEach(key => WrapperHelper.applyPropValue(configOrInstance, key, value[key], isConfig, toRaw));\n        }\n        else if (prop === 'columns' && !isConfig) {\n            configOrInstance['columns'].data = value;\n        }\n        else if (prop.endsWith('Feature')) {\n            const\n                features    = configOrInstance['features'],\n                featureName = prop.replace('Feature', '');\n            if (isConfig) {\n                features[featureName] = value;\n            }\n            else {\n                const feature = features[featureName];\n                if (feature) {\n                    feature.setConfig(value);\n                }\n            }\n        }\n        else {\n            configOrInstance[prop] = toRaw ? toRaw(value) : value;\n        }\n    }\n\n    /**\n     * Creates watches for vue component properties\n     * @param {Object} me vue component instance\n     * @param {Object} instance bryntum widget instance\n     * @param {Object} props reference to props\n     * @param {Object} data reference to data\n     * @param {Function} watcher watch method reference (Accepts: prop and newValue)\n     */\n    static watchProps<T extends AnyWidget>(\n        instance: InstanceType<T>,\n        data: WidgetData<T>,\n        watcher: (prop: string, callback: (value: any) => void) => void) {\n        const\n            {\n                configNames,\n                propertyNames,\n                instanceClass\n            } = data;\n\n        propertyNames.forEach(prop => watcher(prop, newValue => {\n            const value = Array.isArray(newValue) ? newValue.slice() : newValue;\n            WrapperHelper.applyPropValue(instance, prop, value, false);\n\n            // Check if property is a config and notify\n            if (configNames.includes(prop)) {\n                WrapperHelper.devWarningUpdateProp(instanceClass.$name, prop);\n            }\n        }));\n\n        // Cleanup unused instance arrays\n        data.configNames   = [];\n        data.propertyNames = [];\n    }\n\n    /**\n     * Called from Widget.js to add the Vue component to teleports\n     * @param {Object} context\n     * @param {Widget} context.widget Widget which content is rendered by the Vue component\n     * @param {Object} context.html Object containing the Vue component properties and event listeners\n     */\n    static processWidgetContent({ widget, html }: { widget: Widget; html: VueTeleportConfig }) {\n        const\n            { is, bind = {}, vue, on = {} }       = html,\n            // @ts-ignore\n            { vueComponent }                      = this,\n            { teleports : { value : teleports } } = vueComponent.provides,\n            { contentElement : to, id }           = widget;\n\n        if (vue) {\n            const key = `key-${id}`;\n\n            // delete the teleport with the same key if any\n            if (teleports.has(key)) {\n                teleports.delete(key);\n            }\n\n            nextTick(() => {\n                teleports.set(key, { bind, on, key, is, to });\n            });\n        }\n    }\n\n    /**\n     * Handles the content provided by a Vue component for the widget.\n     * @param {Widget} widget Owner widget\n     * @param {String} html The HTML content to be processed\n     */\n    static handleVueContent(widget: Widget, html: VueConfig): void {\n        // Called when a Vue component is to provide the widget content\n        const\n            hasTeleports = (element: any) => Boolean(element.vueComponent?.provides?.teleports),\n            parentView   = widget.closest(hasTeleports) as any,\n            // Find a view (grid, scheduler, etc.) which has `teleports` defined. It also has `processWidgetContent`\n            view         = parentView?.vueComponent ? parentView : Widget.query(hasTeleports);\n\n        view?.processWidgetContent?.({ widget, html });\n    }\n\n    /**\n     * Event renderer method\n     * @param {Object} context\n     * @param {*} context.jsx\n     * @param {DomConfig} context.domConfig\n     * @param {HTMLElement} context.targetElement\n     * @param {Boolean} context.isRelease\n     * @returns {Boolean}\n     */\n    static processEventContent({\n        // Core passes it as jsx for React wrappers.\n        // Let's rename it to a more appropriate name.\n        jsx : rendererConfig,\n        domConfig,\n        targetElement,\n        isRelease\n    }: {\n        jsx: { [key: string]: any },\n        domConfig: any;\n        isRelease: boolean;\n        targetElement: HTMLElement & { vueKey: string }\n        scrolling: boolean\n    }) {\n\n        let wrap: any   = targetElement,\n            returnValue = false;\n\n        // @ts-ignore\n        const domConfigData = this.isVertical ? domConfig?.elementData?.renderData : domConfig?.elementData;\n\n        if (WrapperHelper.isVueConfig(rendererConfig) && rendererConfig?.is) {\n            if (domConfig?.dataset?.isMilestone) {\n                wrap = targetElement.parentElement!.parentElement!.parentElement!;\n            }\n            else {\n                wrap = targetElement.parentElement!.parentElement!;\n            }\n            const\n                // Vertical nests renderData, while horizontal does not\n                // @ts-ignore\n                wrapData                              = this.isVertical ? wrap.elementData.renderData : wrap.elementData,\n                { assignmentRecord }                  = isRelease ? domConfigData : wrapData,\n                { eventRecord }                       = wrapData,\n                { vueComponent }                      = this as any,\n                { teleports : { value : teleports } } = vueComponent.provides,\n\n                // Recurring events are handled a bit differently so get the flag\n                isRecurring = eventRecord.isRecurring || eventRecord.isOccurrence,\n                key         = `assignment-${assignmentRecord?.id}${isRecurring ? '-' + eventRecord.id : ''}`;\n\n            if (wrap.vueKey) {\n                teleports.delete(wrap.vueKey);\n            }\n            const\n                bind            = { ...rendererConfig },\n                { is, on = {} } = bind;\n\n            delete bind.is;\n            delete bind.on;\n\n            nextTick(() => {\n                teleports.set(key, {\n                    bind,\n                    key,\n                    is,\n                    on,\n                    to         : targetElement,\n                    generation : assignmentRecord.generation\n                });\n\n            });\n\n            wrap.vueKey = key;\n            returnValue = true;\n        }\n\n        return returnValue;\n    }\n\n    /**\n     * Cell renderer method\n     * @param {Object} context\n     * @param {RenderData} context.rendererData\n     * @param {*} context.rendererHtml\n     * @returns {Boolean}\n     */\n    static processCellContent({ rendererData, rendererHtml }: { rendererData: RenderData, rendererHtml: any }) {\n        const { record, column, cellElement, row } = rendererData;\n\n        // Only run for cells with vue renderers\n        if (WrapperHelper.isVueConfig(column.data) && column.data?.renderer) {\n            const\n                // `this` is a caller component\n                { vueComponent }                      = this as any,\n                // `teleports` is javascript Map object\n                { teleports : { value : teleports } } = vueComponent.provides,\n                key                                   = `${column.id}-${record.id}`,\n                renderElement                         = column.tree\n                    ? cellElement.querySelector('.b-tree-cell-value')\n                    : cellElement;\n\n            // If the cell already has a teleport, release it\n            if (cellElement.vueKey) {\n                teleports.delete(cellElement.vueKey);\n            }\n\n            const\n                bind            = { ...rendererHtml },\n                { is, on = {} } = bind;\n\n            delete bind.is;\n            delete bind.on;\n\n            // Create new teleport\n            nextTick(() => {\n                // Only teleport if the row is still used for the same record. Since this happens async, we might have\n                // scrolled over the entire block of rows since the render\n                if (row.id === record.id) {\n                    teleports.set(key, {\n                        bind,\n                        key,\n                        is,\n                        on,\n                        to         : renderElement,\n                        generation : record.generation\n                    });\n                }\n            });\n\n            // Link cell to the teleport, to be able to release it above\n            cellElement.vueKey = key;\n        }\n    }\n\n    /**\n     *\n     * @param {Object} context\n     * @param {*} context.cellContent Content to be rendered in cell (set by renderer)\n     * @param {*} context.column Column being rendered\n     * @returns {Boolean} `true` if there is a Vue Renderer in this cell, `false` otherwise\n     */\n    static hasFrameworkRenderer({ cellContent, column }: { cellContent: any, column: any }) {\n        return cellContent && typeof cellContent === 'object' && WrapperHelper.isVueConfig(column?.data);\n    }\n}\n\n// Expose wrapper methods on window.bryntum\nwindow.bryntum     = window.bryntum || {};\nwindow.bryntum.vue = {\n    isVueConfig      : WrapperHelper.isVueConfig,\n    handleVueContent : WrapperHelper.handleVueContent\n};\n"],"names":["WrapperHelper","clsName","msg","containerParam","prop","str","s","config","me","widgetData","emit","element","processCellContent","processEventContent","processWidgetContent","hasFrameworkRenderer","toRaw","props","vProps","key","instanceClass","instanceName","isValidProp","propName","configNames","propertyConfigNames","propertyNames","featureNames","eventNames","eventName","bryntumConfig","params","data","instance","dataStores","projectStores","storeName","store","cfg","Widget","configOrInstance","value","isConfig","features","featureName","feature","watcher","newValue","widget","html","is","bind","vue","on","vueComponent","teleports","to","id","nextTick","hasTeleports","parentView","rendererConfig","domConfig","targetElement","isRelease","wrap","returnValue","domConfigData","wrapData","assignmentRecord","eventRecord","isRecurring","rendererData","rendererHtml","record","column","cellElement","row","renderElement","cellContent"],"mappings":";;AAmFO,MAAMA,EAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOvB,OAAO,WAAWC,GAAiBC,GAAa;AAE5C,KAAI,OAAO,SAAS,aAAa,QAAQ,IAAI,aAAa,kBACtD,QAAQ;AAAA,MAAK,UAAUD,CAAO;AAAA,EAAmCC,CAAG;AAAA;AAAA,IAAA;AAAA,EAI5E;AAAA,EAEA,OAAO,oBAAoBD,GAAiBE,GAAwB;AAChE,IAAAH,EAAc;AAAA,MAAWC;AAAA,MACrB,UAAUE,CAAc;AAAA;AAAA,oBAEHA,CAAc;AAAA,IAAA;AAAA,EAE3C;AAAA,EAEA,OAAO,qBAAqBF,GAAiBG,GAAc;AACvD,IAAAJ,EAAc;AAAA,MAAWC;AAAA,MACrB,UAAUG,CAAI;AAAA,6CACgCA,CAAI;AAAA,IAAA;AAAA,EAE1D;AAAA,EAEA,OAAO,qBAAqBH,GAAiBG,GAAc;AACvD,IAAAJ,EAAc;AAAA,MAAWC;AAAA,MACrB,IAAIG,CAAI;AAAA,IAAA;AAAA,EAEhB;AAAA,EAEA,OAAO,SAASC,GAAa;AACzB,WAAOA,EAAI,QAAQ,OAAO,CAAAC,OAAMA,EAAE,CAAC,KAAK,IAAI,aAAa;AAAA,EAC7D;AAAA,EAEA,OAAO,WAAWD,GAAa;AAC3B,WAAOA,EAAI,OAAO,CAAC,EAAE,gBAAgBA,EAAI,MAAM,CAAC;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,YAAYE,GAAsB;AACrC,WAAO,EAAQA,GAAQ;AAAA,EAC3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBA,OAAO,aAAkC;AAAA,IACrC,IAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,OAAAC;AAAA,EAAA,GACgB;AAEhB,UACIC,IAA6B,CAAA,GAC7BC,IAA6BV,EAAI,MAAO,SAAU,CAAA;AAEtD,eAAWW,KAAO,OAAO,KAAKD,CAAM;AAEhC,MAAAD,EAAM,KAAK,SAASE,CAAG,CAAC,IAAID,EAAOC,CAAG;AAG1C,UACI;AAAA,MACI,eAAAC;AAAA,MACA,cAAAC;AAAA,IAAA,IACkBZ,GACtBa,IAAsB,CAACC,MAAqBN,EAAMM,CAAQ,MAAM,QAChEC,KAAuBf,EAAW,eAAe,CAAA,GAAI,OAAOa,CAAW,GACvEG,KAAuBhB,EAAW,uBAAuB,CAAA,GAAI,OAAOa,CAAW,GAC/EI,KAAuBjB,EAAW,iBAAiB,CAAA,GAAI,OAAOa,CAAW,GACzEK,KAAuBlB,EAAW,gBAAgB,CAAA,GAAI,OAAOa,CAAW,GAExEM,IAAsBnB,EAAW,WAAW,OAAO,CAAAoB,MAAa,CAACP,EAAYO,CAAS,KAAK,CAACZ,EAAM,KAAK,KAAK,WAAWY,CAAS,CAAC,EAAE,CAAC,GACpIC,IAAsB;AAAA,MAClB,cAAetB;AAAA,MACf,WAAe,CAAA;AAAA,MACf,UAAe,CAAA;AAAA,MACf,oBAAAI;AAAA,MACA,qBAAAC;AAAA,MACA,sBAAAC;AAAA,MACA,sBAAAC;AAAA,IAAA;AAIR,IAAAa,EAAW,QAAQ,CAAAC,MAAaC,EAAc,UAAUD,CAAS,IAAI,CAACE,MAAgBrB,EAAKmB,GAAWE,CAAM,CAAC,GAG7G;AAAA,MACI,GAAGP;AAAA,MACH,GAAGC;AAAA,MACH,GAAGE;AAAA,IAAA,EACL,QAAQ,CAAAJ,MAAY;AAClB,MAAAvB,EAAc,eAAe8B,GAAeP,GAAUN,EAAMM,CAAQ,GAAG,IAAMP,CAAK,GAC9E,CAAC,YAAY,QAAQ,EAAE,SAASO,CAAQ,KACxCvB,EAAc,qBAAqBoB,EAAc,OAAOG,CAAQ;AAAA,IAExE,CAAC,GAGDO,EAAc,OAAOA,EAAc,OAAO,MAAM,UAAUV,EAAc,MAAM,aAAa,cAG3FX,EAAW,cAAgBe,GAC3Bf,EAAW,gBAAgB;AAAA,MACvB,GAAGe;AAAA,MACH,GAAGE;AAAA,MACH,GAAGD;AAAA,MACH,GAAGE;AAAA,IAAA,GAIPlB,EAAW,aAAsB,CAAA,GACjCA,EAAW,sBAAsB,CAAA,GACjCA,EAAW,eAAsB,CAAA;AAGjC,UACIN,IAAiB;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,EACF,KAAK,CAACC,MAAiB0B,EAAc1B,CAAI,CAAC;AAEhD,WAAKD,IAUDH,EAAc,oBAAoBoB,EAAc,OAAOjB,CAAc,IATjEkB,MAAiB,WAEjBS,EAAc,WAAWnB,IAGzBmB,EAAc,QAAQnB,GAMvBmB;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,YAAYE,GAAWC,GAAe;AACzC,UAAM,EAAE,YAAAC,GAAY,eAAAC,EAAA,IAAkBH;AAEtC,IAAIE,MACA,OAAO,KAAKA,CAAU,EAAE,QAAQ,CAAAE,MAAa;AACzC,YAAMC,IAAQF,IAAgBF,EAAS,QAAQG,CAAS,IAAIH,EAASG,CAAS;AAC9E,MAAIC,MAGIA,EAAM,kBAAkB,QAAQ,CAACA,EAAM,WAAW,CAACA,EAAM,aAAa,CAACA,EAAM,eAAe,CAACA,EAAM,YAAY,aAC/GA,EAAM,iBAAiB,KAMvBJ,KAAYA,EAAS,oBACrBI,EAAM,SAASJ,GAAUC,EAAWE,CAAS,CAAC;AAAA,IAG1D,CAAC,GACD,OAAOJ,EAAK;AAAA,EAEpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcA,OAAO,aAAkCzB,GAA0C;AAC/E,UACI,EAAE,eAAAa,MAAkBb,EAAO,YAC3B+B,IAAoBtC,EAAc,aAAaO,CAAM;AACzD,WAAQa,EAAc,UAAU,WAAWmB,EAAO,OAAOD,CAAG,IAAI,IAAIlB,EAAckB,CAAG;AAAA,EACzF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUA,OAAO,eAAeE,GAAuBpC,GAAcqC,GAAYC,IAAW,IAAM1B,GAAkB;AAEtG,QAAIZ,MAAS;AAET,MAAIqC,KAAS,OAAOA,KAAU,aAC1BD,EAAiBpC,CAAI,IAAIqC,EAAM,WAAWA,EAAM,SAAS,SAASA,EAAM,WAAWA;AAAA,aAGlFrC,MAAS,cAAc,OAAOqC,KAAU;AAC7C,aAAO,KAAKA,CAAK,EAAE,QAAQ,CAAAtB,MAAOnB,EAAc,eAAewC,GAAkB,GAAGrB,CAAG,WAAWsB,EAAMtB,CAAG,GAAGuB,GAAU1B,CAAK,CAAC;AAAA,aAEzHZ,MAAS,YAAY,OAAOqC,KAAU;AAC3C,aAAO,KAAKA,CAAK,EAAE,QAAQ,OAAOzC,EAAc,eAAewC,GAAkBrB,GAAKsB,EAAMtB,CAAG,GAAGuB,GAAU1B,CAAK,CAAC;AAAA,aAE7GZ,MAAS,aAAa,CAACsC;AAC5B,MAAAF,EAAiB,QAAW,OAAOC;AAAA,aAE9BrC,EAAK,SAAS,SAAS,GAAG;AAC/B,YACIuC,IAAcH,EAAiB,UAC/BI,IAAcxC,EAAK,QAAQ,WAAW,EAAE;AAC5C,UAAIsC;AACA,QAAAC,EAASC,CAAW,IAAIH;AAAA,WAEvB;AACD,cAAMI,IAAUF,EAASC,CAAW;AACpC,QAAIC,KACAA,EAAQ,UAAUJ,CAAK;AAAA,MAE/B;AAAA,IACJ;AAEI,MAAAD,EAAiBpC,CAAI,IAAIY,IAAQA,EAAMyB,CAAK,IAAIA;AAAA,EAExD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUA,OAAO,WACHR,GACAD,GACAc,GAAiE;AACjE,UACI;AAAA,MACI,aAAAtB;AAAA,MACA,eAAAE;AAAA,MACA,eAAAN;AAAA,IAAA,IACAY;AAER,IAAAN,EAAc,QAAQ,CAAAtB,MAAQ0C,EAAQ1C,GAAM,CAAA2C,MAAY;AACpD,YAAMN,IAAQ,MAAM,QAAQM,CAAQ,IAAIA,EAAS,UAAUA;AAC3D,MAAA/C,EAAc,eAAeiC,GAAU7B,GAAMqC,GAAO,EAAK,GAGrDjB,EAAY,SAASpB,CAAI,KACzBJ,EAAc,qBAAqBoB,EAAc,OAAOhB,CAAI;AAAA,IAEpE,CAAC,CAAC,GAGF4B,EAAK,cAAgB,CAAA,GACrBA,EAAK,gBAAgB,CAAA;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAO,qBAAqB,EAAE,QAAAgB,GAAQ,MAAAC,KAAqD;AACvF,UACI,EAAE,IAAAC,GAAI,MAAAC,IAAO,CAAA,GAAI,KAAAC,GAAK,IAAAC,IAAK,CAAA,MAAaJ,GAExC,EAAE,cAAAK,MAAsC,MACxC,EAAE,WAAY,EAAE,OAAQC,EAAA,MAAgBD,EAAa,UACrD,EAAE,gBAAiBE,GAAI,IAAAC,EAAA,IAAiBT;AAE5C,QAAII,GAAK;AACL,YAAMjC,IAAM,OAAOsC,CAAE;AAGrB,MAAIF,EAAU,IAAIpC,CAAG,KACjBoC,EAAU,OAAOpC,CAAG,GAGxBuC,EAAS,MAAM;AACX,QAAAH,EAAU,IAAIpC,GAAK,EAAE,MAAAgC,GAAM,IAAAE,GAAI,KAAAlC,GAAK,IAAA+B,GAAI,IAAAM,GAAI;AAAA,MAChD,CAAC;AAAA,IACL;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,iBAAiBR,GAAgBC,GAAuB;AAE3D,UACIU,IAAe,CAAChD,MAAiB,EAAQA,EAAQ,cAAc,UAAU,WACzEiD,IAAeZ,EAAO,QAAQW,CAAY;AAI9C,KAFmBC,GAAY,eAAeA,IAAarB,EAAO,MAAMoB,CAAY,IAE9E,uBAAuB,EAAE,QAAAX,GAAQ,MAAAC,EAAA,CAAM;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,OAAO,oBAAoB;AAAA;AAAA;AAAA,IAGvB,KAAMY;AAAA,IACN,WAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,GAOD;AAEC,QAAIC,IAAcF,GACdG,IAAc;AAGlB,UAAMC,IAAgB,KAAK,aAAaL,GAAW,aAAa,aAAaA,GAAW;AAExF,QAAI9D,EAAc,YAAY6D,CAAc,KAAKA,GAAgB,IAAI;AACjE,MAAIC,GAAW,SAAS,cACpBG,IAAOF,EAAc,cAAe,cAAe,gBAGnDE,IAAOF,EAAc,cAAe;AAExC,YAGIK,IAAwC,KAAK,aAAaH,EAAK,YAAY,aAAaA,EAAK,aAC7F,EAAE,kBAAAI,EAAA,IAAsCL,IAAYG,IAAgBC,GACpE,EAAE,aAAAE,EAAA,IAAsCF,GACxC,EAAE,cAAAd,MAAsC,MACxC,EAAE,WAAY,EAAE,OAAQC,IAAU,IAAMD,EAAa,UAGrDiB,IAAcD,EAAY,eAAeA,EAAY,cACrDnD,IAAc,cAAckD,GAAkB,EAAE,GAAGE,IAAc,MAAMD,EAAY,KAAK,EAAE;AAE9F,MAAIL,EAAK,UACLV,EAAU,OAAOU,EAAK,MAAM;AAEhC,YACId,IAAkB,EAAE,GAAGU,EAAA,GACvB,EAAE,IAAAX,GAAI,IAAAG,IAAK,CAAA,EAAC,IAAMF;AAEtB,aAAOA,EAAK,IACZ,OAAOA,EAAK,IAEZO,EAAS,MAAM;AACX,QAAAH,EAAU,IAAIpC,GAAK;AAAA,UACf,MAAAgC;AAAA,UACA,KAAAhC;AAAA,UACA,IAAA+B;AAAA,UACA,IAAAG;AAAA,UACA,IAAaU;AAAA,UACb,YAAaM,EAAiB;AAAA,QAAA,CACjC;AAAA,MAEL,CAAC,GAEDJ,EAAK,SAAS9C,GACd+C,IAAc;AAAA,IAClB;AAEA,WAAOA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,OAAO,mBAAmB,EAAE,cAAAM,GAAc,cAAAC,KAAiE;AACvG,UAAM,EAAE,QAAAC,GAAQ,QAAAC,GAAQ,aAAAC,GAAa,KAAAC,MAAQL;AAG7C,QAAIxE,EAAc,YAAY2E,EAAO,IAAI,KAAKA,EAAO,MAAM,UAAU;AACjE,YAEI,EAAE,cAAArB,EAAA,IAAsC,MAExC,EAAE,WAAY,EAAE,OAAQC,EAAA,EAAU,IAAMD,EAAa,UACrDnC,IAAwC,GAAGwD,EAAO,EAAE,IAAID,EAAO,EAAE,IACjEI,IAAwCH,EAAO,OACzCC,EAAY,cAAc,oBAAoB,IAC9CA;AAGV,MAAIA,EAAY,UACZrB,EAAU,OAAOqB,EAAY,MAAM;AAGvC,YACIzB,IAAkB,EAAE,GAAGsB,EAAA,GACvB,EAAE,IAAAvB,GAAI,IAAAG,IAAK,CAAA,EAAC,IAAMF;AAEtB,aAAOA,EAAK,IACZ,OAAOA,EAAK,IAGZO,EAAS,MAAM;AAGX,QAAImB,EAAI,OAAOH,EAAO,MAClBnB,EAAU,IAAIpC,GAAK;AAAA,UACf,MAAAgC;AAAA,UACA,KAAAhC;AAAA,UACA,IAAA+B;AAAA,UACA,IAAAG;AAAA,UACA,IAAayB;AAAA,UACb,YAAaJ,EAAO;AAAA,QAAA,CACvB;AAAA,MAET,CAAC,GAGDE,EAAY,SAASzD;AAAA,IACzB;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,OAAO,qBAAqB,EAAE,aAAA4D,GAAa,QAAAJ,KAA6C;AACpF,WAAOI,KAAe,OAAOA,KAAgB,YAAY/E,EAAc,YAAY2E,GAAQ,IAAI;AAAA,EACnG;AACJ;AAGA,OAAO,UAAc,OAAO,WAAW,CAAA;AACvC,OAAO,QAAQ,MAAM;AAAA,EACjB,aAAmB3E,EAAc;AAAA,EACjC,kBAAmBA,EAAc;AACrC;"}
+{"version":3,"file":"WrapperHelper.js","sources":["../../src/helper/WrapperHelper.ts"],"sourcesContent":["/**\n * Vue 3 widget helper\n */\n\nimport { type ComponentInternalInstance, nextTick } from 'vue';\nimport { type VueConfig, Widget } from '@bryntum/core-thin';\n\ndeclare global {\n    interface Window {\n        bryntum: {\n            isTestEnv?: boolean;\n            vue?: {\n                isVueConfig?: (config: any) => boolean;\n                handleVueContent?: (widget: Widget, html: VueConfig) => void;\n            };\n        };\n    }\n}\n\ninterface RenderElement extends HTMLElement {\n    vueKey: string;\n}\n\nexport type Data = Record<string, unknown>;\n\ntype SuppressNew<T> = { [K in keyof T]: T[ K ] }\n\ntype AnyConstructor<\n    Instance extends object = object,\n    Static extends object = object\n> = (new (...input: any[]) => Instance) & SuppressNew<Static>\n\ntype AnyWidget = AnyConstructor<any, any>;\n\ntype RenderData = {\n    record: any,\n    row: any,\n    column: any,\n    cellElement: RenderElement\n}\n\ntype VueTeleportConfig = {\n    vue: boolean,\n    is: string,\n    bind?: object\n    on?: object\n}\n\nexport type WidgetData<T extends AnyWidget> = {\n    instanceClass: T,\n    instanceName: string\n    isView?: boolean,\n    dataStores?: object,\n    projectStores?: boolean,\n    configNames: string[]\n    propertyConfigNames: string[]\n    propertyNames: string[]\n    eventNames: string[]\n    featureNames?: string[]\n}\n\nexport type WidgetConfig<T extends AnyWidget> = {\n    me?: ComponentInternalInstance;\n    widgetData: WidgetData<T>,\n    emit: (...args: any[]) => any\n    element: HTMLDivElement;\n    processCellContent?: Function;\n    processEventContent?: Function;\n    processWidgetContent?: Function;\n    hasFrameworkRenderer?: Function;\n    toRaw?: Function\n}\n\nexport type BryntumConfig = Record<string, any> & {\n    vueComponent?: Object,\n    listeners: Record<string, Function>,\n    features: {},\n    processCellContent: Function,\n    processEventContent: Function,\n    processWidgetContent: Function;\n    hasFrameworkRenderer: Function\n};\n\nexport class WrapperHelper {\n\n    /**\n     * Development warning. Showed when environment is set to 'development'\n     * @param {String} clsName vue component instance\n     * @param {String} msg console message\n     */\n    static devWarning(clsName: string, msg: string) {\n        // @ts-ignore\n        if (window.bryntum?.isTestEnv || process.env.NODE_ENV === 'development') {\n            console.warn(`Bryntum${clsName}Component development warning!\\n${msg}\\n` +\n                'Please check Vue integration guide: https://bryntum.com/products/grid/docs/guide/Grid/integration/vue/guide'\n            );\n        }\n    }\n\n    static devWarningContainer(clsName: string, containerParam: string) {\n        WrapperHelper.devWarning(clsName,\n            `Using \"${containerParam}\" parameter for configuration is not recommended.\\n` +\n            'Widget is placed automatically inside it\\'s container element.\\n' +\n            `Solution: remove \"${containerParam}\" parameter from configuration.`\n        );\n    }\n\n    static devWarningConfigProp(clsName: string, prop: string) {\n        WrapperHelper.devWarning(clsName,\n            `Using \"${prop}\" parameter for configuration is not recommended.\\n` +\n            `Solution: Use separate parameter for each \"${prop}\" value to enable reactive updates of the API instance`\n        );\n    }\n\n    static devWarningUpdateProp(clsName: string, prop: string) {\n        WrapperHelper.devWarning(clsName,\n            `\"${prop}\" is a static config option for component constructor only. No runtime changes are supported!`\n        );\n    }\n\n    static camelize(str: string) {\n        return str.replace(/-./g, s => (s[1] || '').toUpperCase());\n    }\n\n    static capitalize(str: string) {\n        return str.charAt(0).toUpperCase() + str.slice(1);\n    }\n\n    /**\n     * Returns `true` if the provided configuration object is valid for Vue processing.\n     * @param {*} config\n     * @returns {Boolean}\n     */\n    static isVueConfig(config: any): boolean {\n        return Boolean(config?.vue);\n    }\n\n    /**\n     * Creates bryntum component config from vue component\n     * @param {Object} context\n     * @param {Object} context.me vue component instance\n     * @param {Object} context.widgetData reference to data\n     * @param {Function} context.emit reference to emit\n     * @param {Object} context.element HTML element\n     * @param {Function} context.processCellContent cell renderer method\n     * @param {Function} context.processEventContent event renderer method\n     * @param {Function} context.processWidgetContent widget renderer method\n     * @param {Function} context.hasFrameworkRenderer checks presence of vue renderer\n     * @param {Function} context.toRaw Vue fn to unwrap reactive object\n     * @returns {Object} config object\n     */\n    static createConfig<T extends AnyWidget>({\n        me,\n        widgetData,\n        emit,\n        element,\n        processCellContent,\n        processEventContent,\n        processWidgetContent,\n        hasFrameworkRenderer,\n        toRaw\n    }: WidgetConfig<T>) {\n\n        const\n            props: Record<string, any> = {},\n            vProps                     = me!.vnode!.props! || {};\n\n        for (const key of Object.keys(vProps)) {\n            // Convert possible kebab keys to camelCase\n            props[this.camelize(key)] = vProps[key];\n        }\n\n        const\n            {\n                instanceClass,\n                instanceName\n            }                   = widgetData,\n            isValidProp         = (propName: string) => props[propName] !== undefined,\n            configNames         = (widgetData.configNames || []).filter(isValidProp),\n            propertyConfigNames = (widgetData.propertyConfigNames || []).filter(isValidProp),\n            propertyNames       = (widgetData.propertyNames || []).filter(isValidProp),\n            featureNames        = (widgetData.featureNames || []).filter(isValidProp),\n            // Disable event listeners for onProps, which are duplicating functions with preventable result support\n            eventNames          = widgetData.eventNames.filter(eventName => !isValidProp(eventName) && !props[`on${this.capitalize(eventName)}`]),\n            bryntumConfig       = {\n                vueComponent : me,\n                listeners    : {},\n                features     : {},\n                processCellContent,\n                processEventContent,\n                processWidgetContent,\n                hasFrameworkRenderer\n            } as BryntumConfig;\n\n        // Setup events listeners\n        eventNames.forEach(eventName => bryntumConfig.listeners[eventName] = (params: any) => emit(eventName, params));\n\n        // Setup configs\n        [\n            ...configNames,\n            ...propertyConfigNames,\n            ...featureNames\n        ].forEach(propName => {\n            WrapperHelper.applyPropValue(bryntumConfig, propName, props[propName], true, toRaw);\n            if (['features', 'config'].includes(propName)) {\n                WrapperHelper.devWarningConfigProp(instanceClass.$name, propName);\n            }\n        });\n\n        // Add vue wrapper class name\n        bryntumConfig.cls = (bryntumConfig.cls || '') + ` b-vue-${instanceClass.$name.toLowerCase()}-container`;\n\n        // Prepare watch arrays\n        widgetData.configNames   = configNames;\n        widgetData.propertyNames = [\n            ...configNames,\n            ...propertyNames,\n            ...propertyConfigNames,\n            ...featureNames\n        ];\n\n        // Cleanup unused instance arrays\n        widgetData.eventNames          = [];\n        widgetData.propertyConfigNames = [];\n        widgetData.featureNames        = [];\n\n        // If component has no container specified in config then use adopt to Wrapper's element\n        const\n            containerParam = [\n                'adopt',\n                'appendTo',\n                'insertAfter',\n                'insertBefore'\n            ].find((prop: string) => bryntumConfig[prop]);\n\n        if (!containerParam) {\n            if (instanceName === 'Button') {\n                // Button should always be <a> or <button> inside owner element\n                bryntumConfig.appendTo = element;\n            }\n            else {\n                bryntumConfig.adopt = element;\n            }\n        }\n        else {\n            WrapperHelper.devWarningContainer(instanceClass.$name, containerParam);\n        }\n        return bryntumConfig;\n    }\n\n    /**\n     * Setup store events relay\n     * @param {Object} data reference to data\n     * @param {Object} instance bryntum widget instance\n     */\n    static relayStores(data: any, instance: any) {\n        const { dataStores, projectStores } = data;\n\n        if (dataStores) {\n            Object.keys(dataStores).forEach(storeName => {\n                const store = projectStores ? instance.project[storeName] : instance[storeName];\n                if (store) {\n\n\n                    if (store.syncDataOnLoad == null && !store.readUrl && !store.lazyLoad && (!store.crudManager || !store.crudManager.loadUrl)) {\n                        store.syncDataOnLoad = true;\n                    }\n\n\n\n                    // Makes relaying store events configurable but off by default\n                    if (instance && instance.relayStoreEvents) {\n                        store.relayAll(instance, dataStores[storeName]);\n                    }\n                }\n            });\n            delete data.dataStores;\n        }\n    }\n\n    /**\n     * Creates bryntum Widget from vue component\n     * @param {Object} config\n     * @param {Object} config.me vue component instance\n     * @param {Object} config.widgetData reference to data\n     * @param {Function} config.emit reference to emit\n     * @param {Object} config.element HTML element\n     * @param {Function} config.processCellContent cell renderer method\n     * @param {Function} config.hasFrameworkRenderer check the presence of vue renderer\n     * @param {Function} config.toRaw Vue fn to unwrap reactive object\n     * @returns {Object} widget object\n     */\n    static createWidget<T extends AnyWidget>(config: WidgetConfig<T>): InstanceType<T> {\n        const\n            { instanceClass } = config.widgetData,\n            cfg               = WrapperHelper.createConfig(config);\n        return (instanceClass.$name === 'Widget' ? Widget.create(cfg) : new instanceClass(cfg)) as InstanceType<T>;\n    }\n\n    /**\n     * Applies property value to Bryntum config or instance.\n     * @param {Object} configOrInstance target object\n     * @param {String} prop property name\n     * @param {Object} value value\n     * @param {Boolean} [isConfig] config setting mode\n     * @param {Function} [toRaw] Vue fn to unwrap reactive object\n     */\n    static applyPropValue(configOrInstance: any, prop: string, value: any, isConfig = true, toRaw?: Function) {\n\n        if (prop === 'project') {\n            // Allow use ProjectModel component as project\n            if (value && typeof value === 'object') {\n                configOrInstance[prop] = value.instance ? value.instance.value || value.instance : value;\n            }\n        }\n        else if (prop === 'features' && typeof value === 'object') {\n            Object.keys(value).forEach(key => WrapperHelper.applyPropValue(configOrInstance, `${key}Feature`, value[key], isConfig, toRaw));\n        }\n        else if (prop === 'config' && typeof value === 'object') {\n            Object.keys(value).forEach(key => WrapperHelper.applyPropValue(configOrInstance, key, value[key], isConfig, toRaw));\n        }\n        else if (prop === 'columns' && !isConfig) {\n            configOrInstance['columns'].data = value;\n        }\n        else if (prop.endsWith('Feature')) {\n            const\n                features    = configOrInstance['features'],\n                featureName = prop.replace('Feature', '');\n            if (isConfig) {\n                features[featureName] = value;\n            }\n            else {\n                const feature = features[featureName];\n                if (feature) {\n                    feature.setConfig(value);\n                }\n            }\n        }\n        else {\n            configOrInstance[prop] = toRaw ? toRaw(value) : value;\n        }\n    }\n\n    /**\n     * Creates watches for vue component properties\n     * @param {Object} me vue component instance\n     * @param {Object} instance bryntum widget instance\n     * @param {Object} props reference to props\n     * @param {Object} data reference to data\n     * @param {Function} watcher watch method reference (Accepts: prop and newValue)\n     */\n    static watchProps<T extends AnyWidget>(\n        instance: InstanceType<T>,\n        data: WidgetData<T>,\n        watcher: (prop: string, callback: (value: any) => void) => void) {\n        const\n            {\n                configNames,\n                propertyNames,\n                instanceClass\n            } = data;\n\n        propertyNames.forEach(prop => watcher(prop, newValue => {\n            const value = Array.isArray(newValue) ? newValue.slice() : newValue;\n            WrapperHelper.applyPropValue(instance, prop, value, false);\n\n            // Check if property is a config and notify\n            if (configNames.includes(prop)) {\n                WrapperHelper.devWarningUpdateProp(instanceClass.$name, prop);\n            }\n        }));\n\n        // Cleanup unused instance arrays\n        data.configNames   = [];\n        data.propertyNames = [];\n    }\n\n    /**\n     * Called from Widget.js to add the Vue component to teleports\n     * @param {Object} context\n     * @param {Widget} context.widget Widget which content is rendered by the Vue component\n     * @param {Object} context.html Object containing the Vue component properties and event listeners\n     */\n    static processWidgetContent({ widget, html }: { widget: Widget; html: VueTeleportConfig }) {\n        const\n            { is, bind = {}, vue, on = {} }       = html,\n            // @ts-ignore\n            { vueComponent }                      = this,\n            { teleports : { value : teleports } } = vueComponent.provides,\n            { contentElement : to, id }           = widget;\n\n        if (vue) {\n            const key = `key-${id}`;\n\n            // delete the teleport with the same key if any\n            if (teleports.has(key)) {\n                teleports.delete(key);\n            }\n\n            nextTick(() => {\n                teleports.set(key, { bind, on, key, is, to });\n            });\n        }\n    }\n\n    /**\n     * Handles the content provided by a Vue component for the widget.\n     * @param {Widget} widget Owner widget\n     * @param {String} html The HTML content to be processed\n     */\n    static handleVueContent(widget: Widget, html: VueConfig): void {\n        // Called when a Vue component is to provide the widget content\n        const\n            hasTeleports = (element: any) => Boolean(element.vueComponent?.provides?.teleports),\n            parentView   = widget.closest(hasTeleports) as any,\n            // Find a view (grid, scheduler, etc.) which has `teleports` defined. It also has `processWidgetContent`\n            view         = parentView?.vueComponent ? parentView : Widget.query(hasTeleports);\n\n        view?.processWidgetContent?.({ widget, html });\n    }\n\n    /**\n     * Event renderer method\n     * @param {Object} context\n     * @param {*} context.jsx\n     * @param {DomConfig} context.domConfig\n     * @param {HTMLElement} context.targetElement\n     * @param {Boolean} context.isRelease\n     * @returns {Boolean}\n     */\n    static processEventContent({\n        // Core passes it as jsx for React wrappers.\n        // Let's rename it to a more appropriate name.\n        jsx : rendererConfig,\n        domConfig,\n        targetElement,\n        isRelease\n    }: {\n        jsx: { [key: string]: any },\n        domConfig: any;\n        isRelease: boolean;\n        targetElement: HTMLElement & { vueKey: string }\n        scrolling: boolean\n    }) {\n\n        let wrap: any   = targetElement,\n            returnValue = false;\n\n        // @ts-ignore\n        const domConfigData = this.isVertical ? domConfig?.elementData?.renderData : domConfig?.elementData;\n\n        if (WrapperHelper.isVueConfig(rendererConfig) && rendererConfig?.is) {\n            if (domConfig?.dataset?.isMilestone) {\n                wrap = targetElement.parentElement!.parentElement!.parentElement!;\n            }\n            else {\n                wrap = targetElement.parentElement!.parentElement!;\n            }\n            const\n                // Vertical nests renderData, while horizontal does not\n                // @ts-ignore\n                wrapData                              = this.isVertical ? wrap.elementData.renderData : wrap.elementData,\n                { assignmentRecord }                  = isRelease ? domConfigData : wrapData,\n                { eventRecord }                       = wrapData,\n                { vueComponent }                      = this as any,\n                { teleports : { value : teleports } } = vueComponent.provides,\n\n                // Recurring events are handled a bit differently so get the flag\n                isRecurring = eventRecord.isRecurring || eventRecord.isOccurrence,\n                key         = `assignment-${assignmentRecord?.id}${isRecurring ? '-' + eventRecord.id : ''}`;\n\n            // Only delete the teleport if it's rendering into this specific targetElement.\n            // Prevents issues when elements are reused during scrolling with LockRows feature.\n            if (wrap.vueKey && teleports.get(wrap.vueKey)?.to === targetElement) {\n                // Only delete if the existing teleport is rendering into this specific targetElement\n                teleports.delete(wrap.vueKey);\n            }\n\n            const\n                bind            = { ...rendererConfig },\n                { is, on = {} } = bind;\n\n            delete bind.is;\n            delete bind.on;\n\n            nextTick(() => {\n                teleports.set(key, {\n                    bind,\n                    key,\n                    is,\n                    on,\n                    to         : targetElement,\n                    generation : assignmentRecord.generation\n                });\n\n            });\n\n            wrap.vueKey = key;\n            returnValue = true;\n        }\n\n        return returnValue;\n    }\n\n    /**\n     * Cell renderer method\n     * @param {Object} context\n     * @param {RenderData} context.rendererData\n     * @param {*} context.rendererHtml\n     * @returns {Boolean}\n     */\n    static processCellContent({ rendererData, rendererHtml }: { rendererData: RenderData, rendererHtml: any }) {\n        const { record, column, cellElement, row } = rendererData;\n\n        // Only run for cells with vue renderers\n        if (WrapperHelper.isVueConfig(column.data) && column.data?.renderer) {\n            const\n                // `this` is a caller component\n                { vueComponent }                      = this as any,\n                // `teleports` is javascript Map object\n                { teleports : { value : teleports } } = vueComponent.provides,\n                key                                   = `${column.id}-${record.id}`,\n                renderElement                         = column.tree\n                    ? cellElement.querySelector('.b-tree-cell-value')\n                    : cellElement;\n\n            // If the cell already has a teleport, release it\n            if (cellElement.vueKey) {\n                teleports.delete(cellElement.vueKey);\n            }\n\n            const\n                bind            = { ...rendererHtml },\n                { is, on = {} } = bind;\n\n            delete bind.is;\n            delete bind.on;\n\n            // Create new teleport\n            nextTick(() => {\n                // Only teleport if the row is still used for the same record. Since this happens async, we might have\n                // scrolled over the entire block of rows since the render\n                if (row.id === record.id) {\n                    teleports.set(key, {\n                        bind,\n                        key,\n                        is,\n                        on,\n                        to         : renderElement,\n                        generation : record.generation\n                    });\n                }\n            });\n\n            // Link cell to the teleport, to be able to release it above\n            cellElement.vueKey = key;\n        }\n    }\n\n    /**\n     *\n     * @param {Object} context\n     * @param {*} context.cellContent Content to be rendered in cell (set by renderer)\n     * @param {*} context.column Column being rendered\n     * @returns {Boolean} `true` if there is a Vue Renderer in this cell, `false` otherwise\n     */\n    static hasFrameworkRenderer({ cellContent, column }: { cellContent: any, column: any }) {\n        return cellContent && typeof cellContent === 'object' && WrapperHelper.isVueConfig(column?.data);\n    }\n}\n\n// Expose wrapper methods on window.bryntum\nwindow.bryntum     = window.bryntum || {};\nwindow.bryntum.vue = {\n    isVueConfig      : WrapperHelper.isVueConfig,\n    handleVueContent : WrapperHelper.handleVueContent\n};\n"],"names":["WrapperHelper","clsName","msg","containerParam","prop","str","s","config","me","widgetData","emit","element","processCellContent","processEventContent","processWidgetContent","hasFrameworkRenderer","toRaw","props","vProps","key","instanceClass","instanceName","isValidProp","propName","configNames","propertyConfigNames","propertyNames","featureNames","eventNames","eventName","bryntumConfig","params","data","instance","dataStores","projectStores","storeName","store","cfg","Widget","configOrInstance","value","isConfig","features","featureName","feature","watcher","newValue","widget","html","is","bind","vue","on","vueComponent","teleports","to","id","nextTick","hasTeleports","parentView","rendererConfig","domConfig","targetElement","isRelease","wrap","returnValue","domConfigData","wrapData","assignmentRecord","eventRecord","isRecurring","rendererData","rendererHtml","record","column","cellElement","row","renderElement","cellContent"],"mappings":"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"}

package/lib/index.js

@@ -10,14 +10,14 @@ import { _ as k } from "./chunks/BZslhDhE.js";
 import { _ as F } from "./chunks/-hGMKDT-.js";
 import { _ as T } from "./chunks/BUqJrgcM.js";
 import { _ as b } from "./chunks/ComLVoEW.js";
-import { _ as w } from "./chunks/CQPtNMld.js";
-import { _ as R } from "./chunks/DO9RkP9d.js";
-import { _ as G } from "./chunks/BkWE4YMJ.js";
-import { _ as M } from "./chunks/2RRMFKHJ.js";
+import { _ as w } from "./chunks/Cyqga-RH.js";
+import { _ as R } from "./chunks/GI9kaxvW.js";
+import { _ as G } from "./chunks/OJMgvLRB.js";
+import { _ as M } from "./chunks/2-KvDhBx.js";
 import { _ as Z } from "./chunks/CPFlJHkf.js";
 import { _ as q } from "./chunks/CIGedStG.js";
 import { _ as z } from "./chunks/ujL-F7eG.js";
-import { _ as D } from "./chunks/B32q-UcS.js";
+import { _ as D } from "./chunks/BXf_2WcW.js";
 import { _ as H } from "./chunks/C8Ls3rwH.js";
 export {
   t as BryntumColumnCombo,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bryntum/taskboard-vue-3-thin",
-  "version": "7.1.2",
+  "version": "7.2.0",
   "description": "Vue 3 wrappers for Bryntum TaskBoard JavaScript component",
   "keywords": [
     "bryntum",

package/src/components/BryntumColumnCombo.vue

@@ -10,7 +10,7 @@
 
 import { getCurrentInstance, onBeforeUnmount, onMounted, provide, ref, watch, toRaw } from 'vue';
 
-import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Color, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
 import type { ColumnComboListeners, TaskBoardContainerItemConfig, TaskBoard } from '@bryntum/taskboard-thin';
 import { ColumnCombo } from '@bryntum/taskboard-thin';
 
@@ -152,7 +152,7 @@ defineProps<{
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/ColumnCombo#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumColumnComboProps.ts

@@ -1,4 +1,4 @@
-import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Color, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
 import type { ColumnComboListeners, TaskBoardContainerItemConfig, TaskBoard } from '@bryntum/taskboard-thin';
 
 export declare type BryntumColumnComboProps = {
@@ -137,7 +137,7 @@ export declare type BryntumColumnComboProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/ColumnCombo#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumColumnFilterField.vue

@@ -10,7 +10,7 @@
 
 import { getCurrentInstance, onBeforeUnmount, onMounted, provide, ref, watch, toRaw } from 'vue';
 
-import type { AlignSpec, Base, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, Rectangle, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, Color, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, Rectangle, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
 import type { ColumnFilterFieldListeners, TaskBoardContainerItemConfig, TaskBoard } from '@bryntum/taskboard-thin';
 import { ColumnFilterField } from '@bryntum/taskboard-thin';
 
@@ -119,7 +119,7 @@ defineProps<{
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/ColumnFilterField#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumColumnFilterFieldProps.ts

@@ -1,4 +1,4 @@
-import type { AlignSpec, Base, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Rectangle, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, Color, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Rectangle, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
 import type { ColumnFilterFieldListeners, TaskBoardContainerItemConfig, TaskBoard } from '@bryntum/taskboard-thin';
 
 export declare type BryntumColumnFilterFieldProps = {
@@ -104,7 +104,7 @@ export declare type BryntumColumnFilterFieldProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/ColumnFilterField#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumColumnPickerButton.vue

@@ -10,7 +10,7 @@
 
 import { getCurrentInstance, onBeforeUnmount, onMounted, provide, ref, watch, toRaw } from 'vue';
 
-import type { AlignSpec, Base, Button, DomConfig, KeyMapConfig, MaskConfig, Menu, MenuConfig, MenuItemEntry, PopupConfig, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, Button, Color, DomConfig, KeyMapConfig, MaskConfig, Menu, MenuConfig, MenuItemEntry, PopupConfig, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 import type { ColumnPickerButtonListeners, TaskBoardContainerItemConfig, TaskBoard } from '@bryntum/taskboard-thin';
 import { ColumnPickerButton } from '@bryntum/taskboard-thin';
 
@@ -108,7 +108,7 @@ defineProps<{
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/ColumnPickerButton#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumColumnPickerButtonProps.ts

@@ -1,4 +1,4 @@
-import type { AlignSpec, Base, DomConfig, KeyMapConfig, MaskConfig, MenuConfig, MenuItemEntry, PopupConfig, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, Color, DomConfig, KeyMapConfig, MaskConfig, MenuConfig, MenuItemEntry, PopupConfig, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 import type { ColumnPickerButtonListeners, TaskBoardContainerItemConfig, TaskBoard } from '@bryntum/taskboard-thin';
 
 export declare type BryntumColumnPickerButtonProps = {
@@ -93,7 +93,7 @@ export declare type BryntumColumnPickerButtonProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/ColumnPickerButton#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumColumnScrollButton.vue

@@ -10,7 +10,7 @@
 
 import { getCurrentInstance, onBeforeUnmount, onMounted, provide, ref, watch, toRaw } from 'vue';
 
-import type { AlignSpec, Base, Button, DomConfig, KeyMapConfig, MaskConfig, Menu, MenuConfig, MenuItemEntry, PopupConfig, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, Button, Color, DomConfig, KeyMapConfig, MaskConfig, Menu, MenuConfig, MenuItemEntry, PopupConfig, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 import type { ColumnScrollButtonListeners, TaskBoardContainerItemConfig, TaskBoard } from '@bryntum/taskboard-thin';
 import { ColumnScrollButton } from '@bryntum/taskboard-thin';
 
@@ -108,7 +108,7 @@ defineProps<{
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/ColumnScrollButton#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumColumnScrollButtonProps.ts

@@ -1,4 +1,4 @@
-import type { AlignSpec, Base, DomConfig, KeyMapConfig, MaskConfig, MenuConfig, MenuItemEntry, PopupConfig, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, Color, DomConfig, KeyMapConfig, MaskConfig, MenuConfig, MenuItemEntry, PopupConfig, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 import type { ColumnScrollButtonListeners, TaskBoardContainerItemConfig, TaskBoard } from '@bryntum/taskboard-thin';
 
 export declare type BryntumColumnScrollButtonProps = {
@@ -93,7 +93,7 @@ export declare type BryntumColumnScrollButtonProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/ColumnScrollButton#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumProjectCombo.vue

@@ -10,7 +10,7 @@
 
 import { getCurrentInstance, onBeforeUnmount, onMounted, provide, ref, watch, toRaw } from 'vue';
 
-import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, Store, StoreConfig, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Color, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, Store, StoreConfig, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
 import type { TaskBoardContainerItemConfig, ProjectComboListeners, ProjectModel, TaskBoard } from '@bryntum/taskboard-thin';
 import { ProjectCombo } from '@bryntum/taskboard-thin';
 
@@ -152,7 +152,7 @@ defineProps<{
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/ProjectCombo#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumProjectComboProps.ts

@@ -1,4 +1,4 @@
-import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, Store, StoreConfig, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Color, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, Store, StoreConfig, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
 import type { TaskBoardContainerItemConfig, ProjectComboListeners, ProjectModel, TaskBoard } from '@bryntum/taskboard-thin';
 
 export declare type BryntumProjectComboProps = {
@@ -137,7 +137,7 @@ export declare type BryntumProjectComboProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/ProjectCombo#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumResourcesCombo.vue

@@ -10,7 +10,7 @@
 
 import { getCurrentInstance, onBeforeUnmount, onMounted, provide, ref, watch, toRaw } from 'vue';
 
-import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, Store, StoreConfig, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Color, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, Store, StoreConfig, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
 import type { TaskBoardContainerItemConfig, ResourcesComboListeners, TaskBoard } from '@bryntum/taskboard-thin';
 import { ResourcesCombo } from '@bryntum/taskboard-thin';
 
@@ -152,7 +152,7 @@ defineProps<{
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/ResourcesCombo#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumResourcesComboProps.ts

@@ -1,4 +1,4 @@
-import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, Store, StoreConfig, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Color, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, Store, StoreConfig, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
 import type { TaskBoardContainerItemConfig, ResourcesComboListeners, TaskBoard } from '@bryntum/taskboard-thin';
 
 export declare type BryntumResourcesComboProps = {
@@ -137,7 +137,7 @@ export declare type BryntumResourcesComboProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/ResourcesCombo#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumSwimlaneCombo.vue

@@ -10,7 +10,7 @@
 
 import { getCurrentInstance, onBeforeUnmount, onMounted, provide, ref, watch, toRaw } from 'vue';
 
-import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, Store, StoreConfig, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Color, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, Store, StoreConfig, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
 import type { TaskBoardContainerItemConfig, SwimlaneComboListeners, TaskBoard } from '@bryntum/taskboard-thin';
 import { SwimlaneCombo } from '@bryntum/taskboard-thin';
 
@@ -152,7 +152,7 @@ defineProps<{
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/SwimlaneCombo#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumSwimlaneComboProps.ts

@@ -1,4 +1,4 @@
-import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, Store, StoreConfig, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Color, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, Store, StoreConfig, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
 import type { TaskBoardContainerItemConfig, SwimlaneComboListeners, TaskBoard } from '@bryntum/taskboard-thin';
 
 export declare type BryntumSwimlaneComboProps = {
@@ -137,7 +137,7 @@ export declare type BryntumSwimlaneComboProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/SwimlaneCombo#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumSwimlaneFilterField.vue

@@ -10,7 +10,7 @@
 
 import { getCurrentInstance, onBeforeUnmount, onMounted, provide, ref, watch, toRaw } from 'vue';
 
-import type { AlignSpec, Base, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, Rectangle, Store, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, Color, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, Rectangle, Store, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
 import type { TaskBoardContainerItemConfig, SwimlaneFilterFieldListeners, TaskBoard } from '@bryntum/taskboard-thin';
 import { SwimlaneFilterField } from '@bryntum/taskboard-thin';
 
@@ -119,7 +119,7 @@ defineProps<{
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/SwimlaneFilterField#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumSwimlaneFilterFieldProps.ts

@@ -1,4 +1,4 @@
-import type { AlignSpec, Base, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, Rectangle, Store, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, Color, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, Rectangle, Store, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
 import type { TaskBoardContainerItemConfig, SwimlaneFilterFieldListeners, TaskBoard } from '@bryntum/taskboard-thin';
 
 export declare type BryntumSwimlaneFilterFieldProps = {
@@ -104,7 +104,7 @@ export declare type BryntumSwimlaneFilterFieldProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/SwimlaneFilterField#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumSwimlanePickerButton.vue

@@ -10,7 +10,7 @@
 
 import { getCurrentInstance, onBeforeUnmount, onMounted, provide, ref, watch, toRaw } from 'vue';
 
-import type { AlignSpec, Base, Button, DomConfig, KeyMapConfig, MaskConfig, Menu, MenuConfig, MenuItemEntry, PopupConfig, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, Button, Color, DomConfig, KeyMapConfig, MaskConfig, Menu, MenuConfig, MenuItemEntry, PopupConfig, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 import type { TaskBoardContainerItemConfig, SwimlanePickerButtonListeners, TaskBoard } from '@bryntum/taskboard-thin';
 import { SwimlanePickerButton } from '@bryntum/taskboard-thin';
 
@@ -108,7 +108,7 @@ defineProps<{
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/SwimlanePickerButton#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumSwimlanePickerButtonProps.ts

@@ -1,4 +1,4 @@
-import type { AlignSpec, Base, DomConfig, KeyMapConfig, MaskConfig, MenuConfig, MenuItemEntry, PopupConfig, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, Color, DomConfig, KeyMapConfig, MaskConfig, MenuConfig, MenuItemEntry, PopupConfig, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 import type { TaskBoardContainerItemConfig, SwimlanePickerButtonListeners, TaskBoard } from '@bryntum/taskboard-thin';
 
 export declare type BryntumSwimlanePickerButtonProps = {
@@ -93,7 +93,7 @@ export declare type BryntumSwimlanePickerButtonProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/SwimlanePickerButton#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumSwimlaneScrollButton.vue

@@ -10,7 +10,7 @@
 
 import { getCurrentInstance, onBeforeUnmount, onMounted, provide, ref, watch, toRaw } from 'vue';
 
-import type { AlignSpec, Base, Button, DomConfig, KeyMapConfig, MaskConfig, Menu, MenuConfig, MenuItemEntry, PopupConfig, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, Button, Color, DomConfig, KeyMapConfig, MaskConfig, Menu, MenuConfig, MenuItemEntry, PopupConfig, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 import type { TaskBoardContainerItemConfig, SwimlaneScrollButtonListeners, TaskBoard } from '@bryntum/taskboard-thin';
 import { SwimlaneScrollButton } from '@bryntum/taskboard-thin';
 
@@ -108,7 +108,7 @@ defineProps<{
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/SwimlaneScrollButton#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumSwimlaneScrollButtonProps.ts

@@ -1,4 +1,4 @@
-import type { AlignSpec, Base, DomConfig, KeyMapConfig, MaskConfig, MenuConfig, MenuItemEntry, PopupConfig, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, Color, DomConfig, KeyMapConfig, MaskConfig, MenuConfig, MenuItemEntry, PopupConfig, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 import type { TaskBoardContainerItemConfig, SwimlaneScrollButtonListeners, TaskBoard } from '@bryntum/taskboard-thin';
 
 export declare type BryntumSwimlaneScrollButtonProps = {
@@ -93,7 +93,7 @@ export declare type BryntumSwimlaneScrollButtonProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/SwimlaneScrollButton#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumTagCombo.vue

@@ -10,7 +10,7 @@
 
 import { getCurrentInstance, onBeforeUnmount, onMounted, provide, ref, watch, toRaw } from 'vue';
 
-import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, Store, StoreConfig, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Color, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, Store, StoreConfig, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
 import type { TaskBoardContainerItemConfig, TagComboListeners, TaskBoard } from '@bryntum/taskboard-thin';
 import { TagCombo } from '@bryntum/taskboard-thin';
 
@@ -152,7 +152,7 @@ defineProps<{
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/TagCombo#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumTagComboProps.ts

@@ -1,4 +1,4 @@
-import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, Store, StoreConfig, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, ChipViewConfig, CollectionCompareOperator, CollectionFilterConfig, Color, Combo, ComboModel, Duration, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, List, ListConfig, MaskConfig, Model, Rectangle, Store, StoreConfig, TabConfig, TooltipConfig, Widget } from '@bryntum/core-thin';
 import type { TaskBoardContainerItemConfig, TagComboListeners, TaskBoard } from '@bryntum/taskboard-thin';
 
 export declare type BryntumTagComboProps = {
@@ -137,7 +137,7 @@ export declare type BryntumTagComboProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/widget/TagCombo#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/components/BryntumTaskBoard.vue

@@ -33,7 +33,7 @@
 
 import { getCurrentInstance, onBeforeUnmount, onMounted, provide, ref, watch, toRaw } from 'vue';
 
-import type { AlignSpec, Base, BryntumScrollOptions, Container, DomConfig, KeyMapConfig, Mask, MaskConfig, Menu, MenuItem, MenuItemEntry, Model, PagingToolbarConfig, Panel, PanelCollapserConfig, PanelCollapserOverlayConfig, PanelHeader, Rectangle, ScrollManagerConfig, Scroller, ScrollerConfig, StateProvider, Store, StoreConfig, TabConfig, Tool, ToolConfig, ToolbarConfig, ToolbarItems, Widget } from '@bryntum/core-thin';
+import type { AlignSpec, Base, BryntumScrollOptions, Color, Container, DomConfig, KeyMapConfig, Mask, MaskConfig, Menu, MenuItem, MenuItemEntry, Model, PagingToolbarConfig, Panel, PanelCollapserConfig, PanelCollapserOverlayConfig, PanelHeader, Rectangle, ScrollManagerConfig, Scroller, ScrollerConfig, StateProvider, Store, StoreConfig, TabConfig, Tool, ToolConfig, ToolbarConfig, ToolbarItems, Widget } from '@bryntum/core-thin';
 import type { AssignmentModel, AssignmentModelConfig, CardSize, ColumnDrag, ColumnDragConfig, ColumnFilter, ColumnFilterConfig, ColumnHeaderMenu, ColumnHeaderMenuConfig, ColumnLock, ColumnLockConfig, ColumnModel, ColumnModelConfig, ColumnRename, ColumnRenameConfig, ColumnResize, ColumnResizeConfig, ColumnSort, ColumnSortConfig, ColumnToolbars, ColumnToolbarsConfig, TaskBoardContainerItemConfig, FilterBar, FilterBarConfig, ProjectModel, ProjectModelConfig, ResourceModel, ResourceModelConfig, SimpleTaskEdit, SimpleTaskEditConfig, SwimlaneDrag, SwimlaneDragConfig, SwimlaneModel, SwimlaneModelConfig, TaskBoardListeners, TaskDrag, TaskDragConfig, TaskDragSelect, TaskDragSelectConfig, TaskEdit, TaskEditConfig, TaskEditor, TaskItemOptions, TaskMenu, TaskMenuConfig, TaskModel, TaskModelConfig, TaskTooltip, TaskTooltipConfig } from '@bryntum/taskboard-thin';
 import { TaskBoard } from '@bryntum/taskboard-thin';
 
@@ -125,6 +125,10 @@ defineProps<{
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/view/TaskBoard#config-bodyItems)
      */
     bodyItems ? : Record<string, TaskItemOptions>
+    /**
+     * Set `true` to add a border to this container's element.
+     */
+    border ? : Boolean
     /**
      * An object where property names with a truthy value indicate which events should bubble up the ownership
      * hierarchy when triggered.
@@ -196,7 +200,7 @@ defineProps<{
      * ...
      * [View online docs...](https://bryntum.com/products/taskboard/docs/api/TaskBoard/view/TaskBoard#config-color)
      */
-    color ? : string
+    color ? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */
@@ -2086,6 +2090,7 @@ const widgetData = {
         'autoGenerateSwimlanes',
         'bbar',
         'bodyCls',
+        'border',
         'bubbleEvents',
         'cardSizes',
         'centered',