@bryntum/grid-vue 7.1.1

package/src/BryntumWidget.vue

@@ -0,0 +1,294 @@
+<!--
+  Vue wrapper for Bryntum Widget
+-->
+
+<template>
+
+</template>
+
+<script>
+
+import { Base, 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 : 'BryntumWidget',
+
+    props : {
+
+         // Type for WidgetHelper
+         type : { type : String, default : undefined },
+
+        // Configs only
+        adopt                        : { type : [HTMLElement, String], default : undefined },
+        align                        : { type : [Object, String], default : undefined },
+        anchor                       : { type : Boolean, default : undefined },
+        ariaDescription              : { type : String, default : undefined },
+        ariaLabel                    : { type : String, default : undefined },
+        bubbleEvents                 : { type : Object, default : undefined },
+        centered                     : { type : Boolean, default : undefined },
+        color                        : { type : String, 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 },
+        detectCSSCompatibilityIssues : { type : Boolean, default : undefined },
+        dock                         : { type : [String, Object], default : undefined },
+        draggable                    : { type : [Boolean, Object], default : undefined },
+        elementAttributes            : { type : Object, default : undefined },
+        floating                     : { type : Boolean, default : undefined },
+        hideAnimation                : { type : [Boolean, Object], default : undefined },
+        htmlCls                      : { type : [String, Object], default : undefined },
+        ignoreParentReadOnly         : { type : Boolean, 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 },
+        monitorResize                : { type : [Boolean, 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 },
+        tag                          : { type : String, default : undefined },
+        textAlign                    : { type : String, 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 },
+        insertBefore                : { type : [HTMLElement, String], default : undefined },
+        insertFirst                 : { type : [HTMLElement, String], default : undefined },
+        keyMap                      : { 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 },
+        rtl                         : { type : Boolean, default : undefined },
+        scrollable                  : { type : [Scroller, Boolean, Object], default : undefined },
+        span                        : { type : Number, 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 },
+        parent       : { type : Widget, default : undefined },
+
+        // Events
+        onBeforeDestroy  : { type : Function },
+        onBeforeHide     : { type : Function },
+        onBeforeShow     : { type : Function },
+        onCatchAll       : { type : Function },
+        onDestroy        : { type : Function },
+        onElementCreated : { type : Function },
+        onFocusIn        : { type : Function },
+        onFocusOut       : { type : Function },
+        onHide           : { type : Function },
+        onPaint          : { type : Function },
+        onReadOnly       : { type : Function },
+        onRecompose      : { type : Function },
+        onResize         : { type : Function },
+        onShow           : { type : Function },
+
+    },
+
+    data : () => {
+        return {
+            instanceClass : Widget,
+            instanceName : 'Widget',
+
+            configNames : [
+                'adopt',
+                'align',
+                'anchor',
+                'ariaDescription',
+                'ariaLabel',
+                'bubbleEvents',
+                'centered',
+                'color',
+                'config',
+                'constrainTo',
+                'contentElementCls',
+                'dataField',
+                'defaultBindProperty',
+                'detectCSSCompatibilityIssues',
+                'dock',
+                'draggable',
+                'elementAttributes',
+                'floating',
+                'hideAnimation',
+                'htmlCls',
+                'ignoreParentReadOnly',
+                'listeners',
+                'localeClass',
+                'localizable',
+                'localizableProperties',
+                'maskDefaults',
+                'masked',
+                'monitorResize',
+                'owner',
+                'positioned',
+                'preventTooltipOnTouch',
+                'relayStoreEvents',
+                'ripple',
+                'rootElement',
+                'scrollAction',
+                'showAnimation',
+                'showTooltipWhenDisabled',
+                'tab',
+                'tag',
+                'textAlign',
+                'title',
+                'type',
+                'ui',
+                'weight'
+            ],
+
+            propertyConfigNames : [
+                'alignSelf',
+                'appendTo',
+                'callOnFunctions',
+                'catchEventHandlerExceptions',
+                'cls',
+                'column',
+                'content',
+                'dataset',
+                'disabled',
+                'extraData',
+                'flex',
+                'height',
+                'hidden',
+                'html',
+                'id',
+                'insertBefore',
+                'insertFirst',
+                'keyMap',
+                'margin',
+                'maxHeight',
+                'maximizeOnMobile',
+                'maxWidth',
+                'minHeight',
+                'minWidth',
+                'onBeforeDestroy',
+                'onBeforeHide',
+                'onBeforeShow',
+                'onCatchAll',
+                'onDestroy',
+                'onElementCreated',
+                'onFocusIn',
+                'onFocusOut',
+                'onHide',
+                'onPaint',
+                'onReadOnly',
+                'onRecompose',
+                'onResize',
+                'onShow',
+                'readOnly',
+                'rtl',
+                'scrollable',
+                'span',
+                'tooltip',
+                'width',
+                'x',
+                'y'
+            ],
+
+            propertyNames : [
+                'anchorSize',
+                'focusVisible',
+                'parent'
+            ],
+
+            eventNames : [
+                'beforeDestroy',
+                'beforeHide',
+                'beforeShow',
+                'catchAll',
+                'destroy',
+                'elementCreated',
+                'focusIn',
+                'focusOut',
+                'hide',
+                'paint',
+                'readOnly',
+                'recompose',
+                'resize',
+                'show'
+            ]
+        };
+    },
+
+    /**
+     * 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>