@bryntum/grid-vue 7.1.1

package/src/BryntumEditor.vue

@@ -0,0 +1,385 @@
+<!--
+  Vue wrapper for Bryntum Editor
+-->
+
+<template>
+
+</template>
+
+<script>
+
+import { Base, Container, Editor, Layout, Model, Rectangle, Scroller, Widget } from '@bryntum/grid';
+
+import { StringHelper } from '@bryntum/grid';
+import WrapperHelper from './WrapperHelper.js';
+
+export default {
+
+    // eslint-disable-next-line vue/multi-word-component-names
+    name : 'BryntumEditor',
+
+    props : {
+
+        // Configs only
+        adopt                        : { type : [HTMLElement, String], default : undefined },
+        align                        : { type : Object, default : undefined },
+        anchor                       : { type : Boolean, default : undefined },
+        appendToTargetParent         : { type : Boolean, default : undefined },
+        ariaDescription              : { type : String, default : undefined },
+        ariaLabel                    : { type : String, default : undefined },
+        autoUpdateRecord             : { type : Boolean, default : undefined },
+        blurAction                   : { type : [String, null], default : undefined },
+        bubbleEvents                 : { type : Object, default : undefined },
+        cancelKey                    : { type : String, default : undefined },
+        centered                     : { type : Boolean, default : undefined },
+        color                        : { type : String, default : undefined },
+        completeKey                  : { type : String, default : undefined },
+        completeOnChange             : { type : Boolean, default : undefined },
+        config                       : { type : Object, default : undefined },
+        constrainTo                  : { type : [HTMLElement, Widget, Rectangle], default : undefined },
+        contentElementCls            : { type : [String, Object], default : undefined },
+        dataField                    : { type : String, default : undefined },
+        defaultBindProperty          : { type : String, default : undefined },
+        defaultFocus                 : { type : Function, default : undefined },
+        defaults                     : { type : Object, default : undefined },
+        detectCSSCompatibilityIssues : { type : Boolean, default : undefined },
+        dock                         : { type : [String, Object], default : undefined },
+        draggable                    : { type : [Boolean, Object], default : undefined },
+        elementAttributes            : { type : Object, default : undefined },
+        fitTargetContent             : { type : Boolean, default : undefined },
+        floating                     : { type : Boolean, default : undefined },
+        hideAnimation                : { type : [Boolean, Object], default : undefined },
+        hideTarget                   : { type : Boolean, default : undefined },
+        hideWhenEmpty                : { type : Boolean, default : undefined },
+        htmlCls                      : { type : [String, Object], default : undefined },
+        ignoreParentReadOnly         : { type : Boolean, default : undefined },
+        invalidAction                : { type : String, default : undefined },
+        itemCls                      : { type : String, default : undefined },
+        lazyItems                    : { type : [Object, Array], default : undefined },
+        listeners                    : { type : Object, default : undefined },
+        localeClass                  : { type : Function, default : undefined },
+        localizable                  : { type : Boolean, default : undefined },
+        localizableProperties        : { type : Array, default : undefined },
+        maskDefaults                 : { type : Object, default : undefined },
+        masked                       : { type : [Boolean, String, Object], default : undefined },
+        matchFont                    : { type : Boolean, default : undefined },
+        matchSize                    : { type : [Boolean, Object], default : undefined },
+        monitorResize                : { type : [Boolean, Object], default : undefined },
+        namedItems                   : { type : Object, default : undefined },
+        owner                        : { type : [Widget, Object], default : undefined },
+        positioned                   : { type : Boolean, default : undefined },
+        preventTooltipOnTouch        : { type : Boolean, default : undefined },
+        relayStoreEvents             : { type : Boolean, default : undefined },
+        ripple                       : { type : [Boolean, Object], default : undefined },
+        rootElement                  : { type : [ShadowRoot, HTMLElement], default : undefined },
+        scrollAction                 : { type : [String, null], default : undefined },
+        showAnimation                : { type : [Boolean, Object], default : undefined },
+        showTooltipWhenDisabled      : { type : Boolean, default : undefined },
+        tab                          : { type : [Boolean, Object], default : undefined },
+        tabBarItems                  : { type : Array, default : undefined },
+        tag                          : { type : String, default : undefined },
+        textAlign                    : { type : String, default : undefined },
+        textContent                  : { type : Boolean, default : undefined },
+        title                        : { type : String, default : undefined },
+        type                         : { type : String, default : undefined },
+        ui                           : { type : [String, Object], default : undefined },
+        weight                       : { type : Number, default : undefined },
+
+        // Configs and properties
+        alignSelf                   : { type : String, default : undefined },
+        appendTo                    : { type : [HTMLElement, String], default : undefined },
+        callOnFunctions             : { type : Boolean, default : undefined },
+        catchEventHandlerExceptions : { type : Boolean, default : undefined },
+        cls                         : { type : [String, Object], default : undefined },
+        column                      : { type : Number, default : undefined },
+        content                     : { type : String, default : undefined },
+        dataset                     : { type : Object, default : undefined },
+        disabled                    : { type : [Boolean, String], default : undefined },
+        extraData                   : { type : Object, default : undefined },
+        flex                        : { type : [Number, String], default : undefined },
+        height                      : { type : [Number, String], default : undefined },
+        hidden                      : { type : Boolean, default : undefined },
+        html                        : { type : Function, default : undefined },
+        id                          : { type : String, default : undefined },
+        inputField                  : { type : [Object, String, Widget], default : undefined },
+        inputFieldAlign             : { type : String, default : undefined },
+        insertBefore                : { type : [HTMLElement, String], default : undefined },
+        insertFirst                 : { type : [HTMLElement, String], default : undefined },
+        items                       : { type : [Array, Object], default : undefined },
+        keyMap                      : { type : Object, default : undefined },
+        labelPosition               : { type : [String, null], default : undefined },
+        layout                      : { type : [Layout, String, Object], default : undefined },
+        layoutStyle                 : { type : Object, default : undefined },
+        margin                      : { type : [Number, String], default : undefined },
+        maxHeight                   : { type : [String, Number], default : undefined },
+        maximizeOnMobile            : { type : [Number, String], default : undefined },
+        maxWidth                    : { type : [String, Number], default : undefined },
+        minHeight                   : { type : [String, Number], default : undefined },
+        minWidth                    : { type : [String, Number], default : undefined },
+        readOnly                    : { type : Boolean, default : undefined },
+        record                      : { type : Model, default : undefined },
+        rendition                   : { type : [String, Object, null], default : undefined },
+        rtl                         : { type : Boolean, default : undefined },
+        scrollable                  : { type : [Scroller, Boolean, Object], default : undefined },
+        span                        : { type : Number, default : undefined },
+        strictRecordMapping         : { type : Boolean, default : undefined },
+        tooltip                     : { type : [String, Object, null], default : undefined },
+        width                       : { type : [Number, String], default : undefined },
+        x                           : { type : Number, default : undefined },
+        y                           : { type : Number, default : undefined },
+
+        // Properties only
+        anchorSize      : { type : Array, default : undefined },
+        focusVisible    : { type : Boolean, default : undefined },
+        hasChanges      : { type : Boolean, default : undefined },
+        isSettingValues : { type : Boolean, default : undefined },
+        isValid         : { type : Boolean, default : undefined },
+        parent          : { type : Widget, default : undefined },
+        values          : { type : Object, default : undefined },
+
+        // Events
+        onAfterEdit        : { type : Function },
+        onBeforeCancel     : { type : Function },
+        onBeforeComplete   : { type : Function },
+        onBeforeDestroy    : { type : Function },
+        onBeforeHide       : { type : Function },
+        onBeforeSetRecord  : { type : Function },
+        onBeforeShow       : { type : Function },
+        onBeforeStart      : { type : Function },
+        onCancel           : { type : Function },
+        onCatchAll         : { type : Function },
+        onComplete         : { type : Function },
+        onDestroy          : { type : Function },
+        onDirtyStateChange : { type : Function },
+        onElementCreated   : { type : Function },
+        onFocusIn          : { type : Function },
+        onFocusOut         : { type : Function },
+        onHide             : { type : Function },
+        onKeyDown          : { type : Function },
+        onPaint            : { type : Function },
+        onReadOnly         : { type : Function },
+        onRecompose        : { type : Function },
+        onResize           : { type : Function },
+        onShow             : { type : Function },
+        onStart            : { type : Function },
+
+    },
+
+    data : () => {
+        return {
+            instanceClass : Editor,
+            instanceName : 'Editor',
+
+            configNames : [
+                'adopt',
+                'align',
+                'anchor',
+                'appendToTargetParent',
+                'ariaDescription',
+                'ariaLabel',
+                'autoUpdateRecord',
+                'blurAction',
+                'bubbleEvents',
+                'cancelKey',
+                'centered',
+                'color',
+                'completeKey',
+                'completeOnChange',
+                'config',
+                'constrainTo',
+                'contentElementCls',
+                'dataField',
+                'defaultBindProperty',
+                'defaultFocus',
+                'defaults',
+                'detectCSSCompatibilityIssues',
+                'dock',
+                'draggable',
+                'elementAttributes',
+                'fitTargetContent',
+                'floating',
+                'hideAnimation',
+                'hideTarget',
+                'hideWhenEmpty',
+                'htmlCls',
+                'ignoreParentReadOnly',
+                'invalidAction',
+                'itemCls',
+                'lazyItems',
+                'listeners',
+                'localeClass',
+                'localizable',
+                'localizableProperties',
+                'maskDefaults',
+                'masked',
+                'matchFont',
+                'matchSize',
+                'monitorResize',
+                'namedItems',
+                'owner',
+                'positioned',
+                'preventTooltipOnTouch',
+                'relayStoreEvents',
+                'ripple',
+                'rootElement',
+                'scrollAction',
+                'showAnimation',
+                'showTooltipWhenDisabled',
+                'tab',
+                'tabBarItems',
+                'tag',
+                'textAlign',
+                'textContent',
+                'title',
+                'type',
+                'ui',
+                'weight'
+            ],
+
+            propertyConfigNames : [
+                'alignSelf',
+                'appendTo',
+                'callOnFunctions',
+                'catchEventHandlerExceptions',
+                'cls',
+                'column',
+                'content',
+                'dataset',
+                'disabled',
+                'extraData',
+                'flex',
+                'height',
+                'hidden',
+                'html',
+                'id',
+                'inputField',
+                'inputFieldAlign',
+                'insertBefore',
+                'insertFirst',
+                'items',
+                'keyMap',
+                'labelPosition',
+                'layout',
+                'layoutStyle',
+                'margin',
+                'maxHeight',
+                'maximizeOnMobile',
+                'maxWidth',
+                'minHeight',
+                'minWidth',
+                'onAfterEdit',
+                'onBeforeCancel',
+                'onBeforeComplete',
+                'onBeforeDestroy',
+                'onBeforeHide',
+                'onBeforeSetRecord',
+                'onBeforeShow',
+                'onBeforeStart',
+                'onCancel',
+                'onCatchAll',
+                'onComplete',
+                'onDestroy',
+                'onDirtyStateChange',
+                'onElementCreated',
+                'onFocusIn',
+                'onFocusOut',
+                'onHide',
+                'onKeyDown',
+                'onPaint',
+                'onReadOnly',
+                'onRecompose',
+                'onResize',
+                'onShow',
+                'onStart',
+                'readOnly',
+                'record',
+                'rendition',
+                'rtl',
+                'scrollable',
+                'span',
+                'strictRecordMapping',
+                'tooltip',
+                'width',
+                'x',
+                'y'
+            ],
+
+            propertyNames : [
+                'anchorSize',
+                'focusVisible',
+                'hasChanges',
+                'isSettingValues',
+                'isValid',
+                'parent',
+                'values'
+            ],
+
+            eventNames : [
+                'afterEdit',
+                'beforeCancel',
+                'beforeComplete',
+                'beforeDestroy',
+                'beforeHide',
+                'beforeSetRecord',
+                'beforeShow',
+                'beforeStart',
+                'cancel',
+                'catchAll',
+                'complete',
+                'destroy',
+                'dirtyStateChange',
+                'elementCreated',
+                'focusIn',
+                'focusOut',
+                'hide',
+                'keyDown',
+                'paint',
+                'readOnly',
+                'recompose',
+                'resize',
+                'show',
+                'start'
+            ]
+        };
+    },
+
+    /**
+     * Called after the instance has been mounted
+     */
+    mounted() {
+        const
+            me = this,
+            {
+                createWidget,
+                relayStores,
+                watchProps,
+                processCellContent,
+                processEventContent,
+                hasFrameworkRenderer
+            }  = WrapperHelper();
+
+        me.instance = createWidget({
+            me,
+            props     : me.$props,
+            data      : me.$data,
+            listeners : me.$listeners,
+            emit      : me.$emit.bind(me),
+            element   : me.$el
+        });
+
+        const watcher = me.$watch.bind(me);
+        watchProps(me, me.instance, me.$props, me.$data, watcher);
+    },
+
+    /**
+     * Called right before a Vue instance is destroyed. At this stage the instance is still fully functional.
+     */
+    beforeDestroy() {
+        if (this.instance) {
+            this.instance.destroy();
+        }
+    }
+
+};
+
+</script>