@bryntum/scheduler-vue 7.1.1

package/src/WrapperHelper.js

@@ -0,0 +1,487 @@
+/**
+ * Vue 2 widget helper
+ */
+
+import { StringHelper, Widget } from '@bryntum/scheduler';
+
+export default function WrapperHelper() {
+
+    /**
+     * Development warning. Showed when environment is set to 'development'
+     * @param {String} clsName vue component instance
+     * @param {String} msg console message
+     */
+    function devWarning(clsName, msg) {
+        if (window.bryntum && window.bryntum.isTestEnv || process.env.NODE_ENV === 'development') {
+            console.warn(`Bryntum${clsName}Component development warning!\n${msg}\n` +
+                'Please check Vue integration guide: https://bryntum.com/products/scheduler/docs/guide/Scheduler/integration/vue/guide'
+            );
+        }
+    }
+
+    function devWarningContainer(clsName, containerParam) {
+        devWarning(clsName,
+            `Using "${containerParam}" parameter for configuration is not recommended.\n` +
+            'Widget is placed automatically inside it\'s container element.\n' +
+            `Solution: remove "${containerParam}" parameter from configuration.`
+        );
+    }
+
+    function devWarningConfigProp(clsName, prop) {
+        devWarning(clsName,
+            `Using "${prop}" parameter for configuration is not recommended.\n` +
+            `Solution: Use separate parameter for each "${prop}" value to enable reactive updates of the API instance`
+        );
+    }
+
+    function devWarningUpdateProp(clsName, prop) {
+        devWarning(clsName,
+            `"${prop}" is a static config option for component constructor only. No runtime changes are supported!`
+        );
+    }
+
+    /**
+     * Creates bryntum component config from vue component
+     * @param {Object} context
+     * @param {Object} context.me vue component instance
+     * @param {Object} context.props reference to props
+     * @param {Object} context.data reference to data
+     * @param {Function} context.emit reference to emit
+     * @param {Object} context.element HTML element
+     * @param {Function} context.processCellContent cell renderer method
+     * @param {Function} context.processEventContent event renderer method
+     * @param {Function} context.hasFrameworkRenderer checks presence of vue renderer
+     * @param {Function} context.toRaw Vue fn to unwrap reactive object
+     * @returns {Object} config object
+     */
+    function createConfig({ me, props, listeners, data, emit, element, processCellContent, processEventContent, hasFrameworkRenderer, toRaw }) {
+        const
+            {
+                instanceClass,
+                instanceName
+            }                   = data,
+            filter              = arr => arr.filter(prop => props[prop] !== undefined),
+            configNames         = filter(data.configNames || []),
+            propertyConfigNames = filter(data.propertyConfigNames || []),
+            propertyNames       = filter(data.propertyNames || []),
+            featureNames        = filter(data.featureNames || []),
+            eventNames          = data.eventNames.filter(event => listeners[event] !== undefined || listeners[event.toLowerCase()] !== undefined),
+            bryntumConfig       = {
+                vueComponent : instanceClass.isModel ? undefined : me,
+                listeners    : {},
+                features     : {},
+                processCellContent,
+                processEventContent,
+                hasFrameworkRenderer
+            };
+
+        // Setup events listeners
+        eventNames.forEach(eventName => {
+            const onFunctionName = `on${StringHelper.capitalize(eventName)}`;
+
+            // Vue prefixes DOM events with on, for example click becomes onClick which
+            // is same as our on-Function. Therefore the DOM events' handlers are called twice.
+            // This prevents firing the event if we already have on-Function created by Vue.
+            if (!props[onFunctionName]) {
+                bryntumConfig.listeners[eventName] = event => emit(eventName.toLowerCase(), event);
+            }
+        });
+
+        // Assign configs. Skip properties
+        configNames
+            .concat(propertyConfigNames)
+            .concat(featureNames)
+            .forEach(prop => {
+                applyPropValue(bryntumConfig, prop, props[prop], true, toRaw);
+                if (['features', 'config'].includes(prop)) {
+                    devWarningConfigProp(instanceClass.$name, prop);
+                }
+            });
+
+        // Add vue wrapper class name
+        bryntumConfig.cls = (bryntumConfig.cls || '') + ` b-vue-${instanceClass.$name.toLowerCase()}-container`;
+
+        // Prepare watch arrays
+        data.configNames = configNames;
+        data.propertyNames = configNames.concat(propertyNames).concat(propertyConfigNames).concat(featureNames);
+
+        // Cleanup unused instance arrays
+        data.eventNames && delete data.eventNames;
+        data.propertyConfigNames && delete data.propertyConfigNames;
+        data.featureNames && delete data.featureNames;
+
+        // If component has no container specified in config then use adopt to Wrapper's element
+        const
+            containerParam = [
+                'adopt',
+                'appendTo',
+                'insertAfter',
+                'insertBefore'
+            ].find(prop => bryntumConfig[prop]);
+        if (!containerParam) {
+            if (instanceName === 'Button') {
+                // Button should always be <a> or <button> inside owner element
+                bryntumConfig.appendTo = element;
+            }
+            else {
+                bryntumConfig.adopt = element;
+            }
+        }
+        else {
+            devWarningContainer(instanceClass.$name, containerParam);
+        }
+
+        return bryntumConfig;
+    }
+
+    /**
+     * Setup store events relay
+     * @param {Object} data reference to data
+     * @param {Object} instance bryntum widget instance
+     */
+    function relayStores(data, instance) {
+        const { dataStores, projectStores } = data;
+
+        if (dataStores) {
+            Object.keys(dataStores).forEach(storeName => {
+                const store = projectStores ? instance.project[storeName] : instance[storeName];
+                if (store) {
+                    if (store.syncDataOnLoad == null && !store.readUrl && !store.lazyLoad && (!store.crudManager || !store.crudManager.loadUrl)) {
+                        // Default syncDataOnLoad to true if store is not configured with a readUrl (AjaxStore)
+                        // and it doesn't belong to a project that has a loadUrl configured
+                        store.syncDataOnLoad = true;
+                    }
+
+                    // Makes relaying store events configurable but off by default
+                    if (instance && instance.relayStoreEvents) {
+                        store.relayAll(instance, dataStores[storeName]);
+                    }
+                }
+            });
+            delete data.dataStores;
+        }
+    }
+
+    /**
+     * Creates bryntum Widget from vue component
+     * @param {Object} context
+     * @param {Object} context.me vue component instance
+     * @param {Object} context.props reference to props
+     * @param {Object} context.data reference to data
+     * @param {Function} context.emit reference to emit
+     * @param {Object} context.element HTML element
+     * @param {Function} context.processCellContent cell renderer method
+     * @param {Function} context.hasFrameworkRenderer check the presence of vue renderer
+     * @param {Function} context.toRaw Vue fn to unwrap reactive object
+     * @returns {Object} widget object
+     */
+    function createWidget(context) {
+        const
+            { instanceClass } = context.data,
+            config            = createConfig(context);
+        return instanceClass.$name === 'Widget' ? Widget.create(config) : new instanceClass(config);
+    }
+
+    /**
+     * Applies property value to Bryntum config or instance.
+     * @param {Object} configOrInstance target object
+     * @param {String} prop property name
+     * @param {Object} value value
+     * @param {Boolean} isConfig config setting mode
+     * @param {Function} toRaw Vue fn to unwrap reactive object
+     */
+    function applyPropValue(configOrInstance, prop, value, isConfig = true, toRaw) {
+
+        if (prop === 'project') {
+            // Allow use ProjectModel component as project
+            if (value && typeof value === 'object') {
+                configOrInstance[prop] = value.instance ? value.instance.value || value.instance : value;
+            }
+        }
+        else if (prop === 'features' && typeof value === 'object') {
+            Object.keys(value).forEach(key => applyPropValue(configOrInstance, `${key}Feature`, value[key], isConfig, toRaw));
+        }
+        else if (prop === 'config' && typeof value === 'object') {
+            Object.keys(value).forEach(key => applyPropValue(configOrInstance, key, value[key], isConfig, toRaw));
+        }
+        else if (prop === 'columns' && !isConfig) {
+            configOrInstance['columns'].data = value;
+        }
+        else if (prop.endsWith('Feature')) {
+            const
+                features    = configOrInstance['features'],
+                featureName = prop.replace('Feature', '');
+            if (isConfig) {
+                features[featureName] = value;
+            }
+            else {
+                const feature = features[featureName];
+                if (feature) {
+                    feature.setConfig(value);
+                }
+            }
+        }
+        else {
+            configOrInstance[prop] = toRaw ? toRaw(value) : value;
+        }
+    }
+
+    /**
+     * Creates watches for vue component properties
+     * @param {Object} me vue component instance
+     * @param {Object} instance bryntum widget instance
+     * @param {Object} props reference to props
+     * @param {Object} data reference to data
+     * @param {Function} watcher watch method reference (Accepts: prop and newValue)
+     */
+    function watchProps(me, instance, props, data, watcher) {
+        const
+            {
+                configNames,
+                propertyNames,
+                instanceClass
+            } = data;
+
+        propertyNames.forEach(prop => watcher(prop, newValue => {
+            const value = Array.isArray(newValue) ? newValue.slice() : newValue;
+            applyPropValue(instance, prop, value, false);
+
+            // Check if property is a config and notify
+            if (configNames.includes(prop)) {
+                devWarningUpdateProp(instanceClass.$name, prop);
+            }
+        }));
+
+        // Cleanup unused instance arrays
+        delete data.configNames;
+        delete data.propertyNames;
+    }
+
+    /**
+     * Returns `true` if the provided configuration object is valid for Vue processing.
+     * @param {*} config
+     * @returns {Boolean}
+     */
+    function isVueConfig(config) {
+        return Boolean(config && config.vue);
+    }
+
+    /**
+     *
+     * @param { Object } context
+     * @param { * } context.cellContent Content to be rendered in cell (set by renderer)
+     * @param { Column } context.column Column being rendered
+     * @returns { Boolean } `true` if there is a Vue Renderer in this cell, `false` otherwise
+     */
+    function hasFrameworkRenderer({ cellContent, column }) {
+        return (
+            cellContent &&
+            typeof cellContent === 'object' &&
+            column.data.vue
+        );
+    }
+
+    /**
+     * https://github.com/bryntum/support/issues/10416
+     *
+     * @param { Object} context }
+     * @param { String } context.action The requested action
+     * @param { Object } context.domConfig
+     * @param { Boolean } context.isRelease This is a "release" call
+     * @param { Object } context.jsx That what is returned by the user's eventRenderer function
+     * @param { Boolean } context.scrolling `true` if this a "scrolling" call
+     * @param { HTMLElement } context.targetElement Element to render to
+     * @returns { Boolean } `true` if the function set the content, `false` otherwise
+     */
+    function processEventContent({
+        action,
+        domConfig,
+        isRelease,
+        // Core passes it as jsx for React wrappers.
+        // Let's rename it to a more appropriate name.
+        jsx : rendererConfig,
+        scrolling,
+        targetElement
+    }) {
+        const
+            me                              = this,
+            { instance : scheduler, $refs } = me,
+            { eventResize }                 = scheduler && scheduler.features ? scheduler.features : {};
+
+        // Early return if no action or resizing or we haven't got a proper instance (can happen for calendar)
+        // if (['none', 'removeElement'].includes(action) || (eventResize?.isResizing && !eventResize.dragging.completed && !scrolling)) {
+        if (!eventResize || ['none', 'removeElement'].includes(action) || (eventResize.isResizing && !eventResize.dragging.completed && !scrolling)) {
+            return false;
+        }
+
+        const
+            { vueInstance }                   = targetElement,
+            // domConfigData   = scheduler.isVertical ? domConfig?.elementData?.renderData : domConfig?.elementData,
+            domConfigData                     = scheduler.isVertical ? (domConfig.elementData ? domConfig.elementData.renderData : false) : domConfig.elementData,
+            // Get wrap that contains the important data
+            // wrap = domConfig?.dataset?.isMilestone
+            wrap                              = (domConfig.dataset ? domConfig.dataset.isMilestone : false)
+                ? targetElement.parentElement.parentElement.parentElement
+                : targetElement.parentElement.parentElement,
+            // Get data
+            wrapData                          = scheduler.isVertical ? wrap.elementData.renderData : wrap.elementData,
+            // Get records
+            { assignmentRecord, eventRecord } = isRelease ? domConfigData || {} : wrapData || {},
+            // Calculate key
+            key                               = assignmentRecord ? `assignment-${assignmentRecord.id}` : null;
+
+        let [existing] = $refs[key] || [];
+
+        // If the targetElement has vueInstance, move its element out of way
+        if (vueInstance) {
+            $refs.cellInstancesHolder.appendChild(vueInstance.$el);
+            delete targetElement.vueInstance;
+        }
+
+        // If we have an existing vueInstance make it visible
+        if (!isRelease && existing) {
+            targetElement.appendChild(existing.$el);
+            targetElement.vueInstance = existing;
+        }
+
+        // Create or re-create the vueInstance as needed
+        if (isVueConfig(rendererConfig) && (rendererConfig ? rendererConfig.is : false)) {
+            const { cellInstances } = me;
+
+            // Remove the existing vueInstance if the eventRecord has been updated
+            if (existing && existing.generation !== eventRecord.generation) {
+                const eventIndex = cellInstances.findIndex(item => item.key === key);
+                if (eventIndex !== -1) {
+                    cellInstances.splice(eventIndex, 1);
+                }
+                // removeEventComponent.call(me, key);
+                existing = null;
+            }
+            // No existing instance, create a new one and pull its element in on next Vue tick
+            if (!existing) {
+
+                // Data from the renderer that will be turned into a vue instance by the v-for in App.vue
+                cellInstances.push({ ...rendererConfig, key });
+
+                // Wait until the vue component is mounted
+                me.$nextTick(() => {
+                    // Get the newly rendered Vue component (refs in v-for are arrays)
+                    const [instance] = $refs[key];
+
+                    if (instance) {
+                        instance.$el.retainElement = true;
+                        targetElement.appendChild(instance.$el);
+
+                        instance.generation = eventRecord.generation;
+                        targetElement.vueInstance = instance;
+                    }
+                });
+            }
+            domConfig.retainChildren = true;
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * Hook called by instance when rendering cells within
+     * Row::renderCell(), creates portals for JSX supplied by renderers
+     * @param {Object} context
+     * @param {Object} context.rendererData Data passed from renderCell
+     * @param {Object} context.rendererHtml Data passed from renderCell
+     */
+    function processCellContent({
+        rendererData,
+        rendererData : { record },
+        rendererData : { cellElement },
+        rendererHtml : cellContent
+    }) {
+        if (!isVueConfig(rendererData.column.data) || record.isSpecialRow || typeof cellContent !== 'object') {
+            return true;
+        }
+
+        const // Bound array of cell components + refs from the Grid Vue component
+            me                       = this,
+            { cellInstances, $refs } = me,
+            // Vue component currently displayed in the cell
+            { vueInstance }          = cellElement,
+            // Key, used as both key and ref
+            key                      = `${rendererData.column.id}-${record.id}`,
+            // Reuse already existing component for this cell (refs in v-for are arrays)
+            [existing]               = $refs[key] || [];
+
+        // Cell has a vue instance associated with it, move its element back to the cell instance container before
+        // adding a new instance. It will be pulled in again if another cell renders the same record later
+        if (vueInstance) {
+            $refs.cellInstancesHolder.appendChild(vueInstance.$el);
+
+            // If we're removing vue element from the cell, we need to remove references to it and from it, so
+            // current cell doesn't know about vueInstance and vueInstance doesn't know about cell it was rendered to
+            if (vueInstance.cellElement) {
+                delete vueInstance.cellElement.vueInstance;
+            }
+            delete vueInstance.cellElement;
+        }
+
+        // There is an existing instance previously rendered, pull its element in from the cell instance container
+        if (existing) {
+            // `existing` is a VueComponent.
+            // `existing.$props.record` is the record which holds the data to render into the component.
+            // Note, if store.syncDataOnLoad is falsy and you load the data with the same ID,
+            // the record and existing.$props.record will be different objects, and existing.$props.record
+            // will hold the old value. Make sure `syncDataOnLoad` is true.
+
+            // Move its element to the cell
+            cellElement.appendChild(existing.$el);
+
+            // Remember that cell is displaying it
+            cellElement.vueInstance = existing;
+
+            // When reassigning cell remove reference to the vueInstance from the previous cellElement
+            if (existing.cellElement) {
+                delete existing.cellElement.vueInstance;
+            }
+
+            existing.cellElement = cellElement;
+        }
+        // No existing instance, create a new one and pull its element in on next Vue tick
+        else {
+            // Data from the renderer that will be turned into a vue instance by the v-for in App.vue
+            cellInstances.push({ ...cellContent, key });
+
+            // Wait until the vue component is mounted
+            me.$nextTick(() => {
+                // Get the newly rendered Vue component (refs in v-for are arrays)
+                const [instance] = $refs[key];
+
+                // Move its element to the cell
+                cellElement.appendChild(instance.$el);
+                // Remember that cell is displaying it
+                cellElement.vueInstance = instance;
+
+                // Let vue instance to know about the cell it is rendered to, so when it gets moved to cache it can
+                // clear itself from the cellElement
+                instance.cellElement = cellElement;
+            });
+        }
+        return false;
+    }
+
+    return {
+        createWidget,
+        hasFrameworkRenderer,
+        isVueConfig,
+        processCellContent,
+        processEventContent,
+        relayStores,
+        watchProps
+    };
+
+}
+
+// Expose wrapper methods on window.bryntum
+window.bryntum = window.bryntum || {};
+window.bryntum.vue = {
+    isVueConfig : WrapperHelper().isVueConfig
+};