@bryntum/grid-vue 7.1.1

package/src/BryntumChipView.vue

@@ -0,0 +1,350 @@
+<!--
+  Vue wrapper for Bryntum ChipView
+-->
+
+<template>
+
+</template>
+
+<script>
+
+import { Base, ChipView, Collection, List, Model, Rectangle, Scroller, Store, 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 : 'BryntumChipView',
+
+    props : {
+
+        // Configs only
+        activateOnMouseover             : { type : Boolean, default : undefined },
+        adopt                           : { type : [HTMLElement, String], default : undefined },
+        align                           : { type : [Object, String], default : undefined },
+        allowGroupSelect                : { type : Boolean, 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 },
+        clearSelectionOnEmptySpaceClick : { type : Boolean, default : undefined },
+        closable                        : { type : Boolean, default : undefined },
+        closeHandler                    : { type : Function, 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 },
+        displayField                    : { type : String, default : undefined },
+        dock                            : { type : [String, Object], default : undefined },
+        draggable                       : { type : [Boolean, Object], default : undefined },
+        elementAttributes               : { type : Object, default : undefined },
+        floating                        : { type : Boolean, default : undefined },
+        getItemCls                      : { type : Function, default : undefined },
+        getItemStyle                    : { type : Function, default : undefined },
+        groupHeaderTpl                  : { type : Function, default : undefined },
+        hideAnimation                   : { type : [Boolean, Object], default : undefined },
+        htmlCls                         : { type : [String, Object], default : undefined },
+        iconTpl                         : { type : Function, default : undefined },
+        ignoreParentReadOnly            : { type : Boolean, default : undefined },
+        isSelectable                    : { type : Function, default : undefined },
+        itemTpl                         : { type : Function, 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 },
+        selectAllItem                   : { type : [Boolean, String], 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 },
+        tooltipTemplate                 : { type : Function, default : undefined },
+        type                            : { type : String, default : undefined },
+        ui                              : { type : [String, Object], default : undefined },
+        virtualize                      : { type : [Boolean, Number], 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 },
+        collapsibleGroups           : { type : Boolean, default : undefined },
+        column                      : { type : Number, default : undefined },
+        content                     : { type : String, default : undefined },
+        dataset                     : { type : Object, default : undefined },
+        disabled                    : { type : [Boolean, String], default : undefined },
+        emptyText                   : { type : 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 },
+        items                       : { type : Array, 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 },
+        multiSelect                 : { type : Boolean, default : undefined },
+        readOnly                    : { type : Boolean, default : undefined },
+        rtl                         : { type : Boolean, default : undefined },
+        scrollable                  : { type : [Scroller, Boolean, Object], default : undefined },
+        selected                    : { type : [Model, Array, String, Number, Collection, Object], default : undefined },
+        span                        : { type : Number, default : undefined },
+        store                       : { type : [Object, Array, Store], default : undefined },
+        title                       : { type : String, default : undefined },
+        toggleAllIfCtrlPressed      : { 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 },
+        parent       : { type : Widget, default : undefined },
+
+        // Events
+        onBeforeDestroy   : { type : Function },
+        onBeforeHide      : { type : Function },
+        onBeforeItem      : { type : Function },
+        onBeforeShow      : { type : Function },
+        onCatchAll        : { type : Function },
+        onDestroy         : { type : Function },
+        onElementCreated  : { type : Function },
+        onFocusIn         : { type : Function },
+        onFocusOut        : { type : Function },
+        onHide            : { type : Function },
+        onItem            : { type : Function },
+        onPaint           : { type : Function },
+        onReadOnly        : { type : Function },
+        onRecompose       : { type : Function },
+        onResize          : { type : Function },
+        onSelectionChange : { type : Function },
+        onShow            : { type : Function },
+        onToggleGroup     : { type : Function },
+        onToggleNode      : { type : Function },
+
+    },
+
+    data : () => {
+        return {
+            instanceClass : ChipView,
+            instanceName : 'ChipView',
+
+            configNames : [
+                'activateOnMouseover',
+                'adopt',
+                'align',
+                'allowGroupSelect',
+                'anchor',
+                'ariaDescription',
+                'ariaLabel',
+                'bubbleEvents',
+                'centered',
+                'clearSelectionOnEmptySpaceClick',
+                'closable',
+                'closeHandler',
+                'color',
+                'config',
+                'constrainTo',
+                'contentElementCls',
+                'dataField',
+                'defaultBindProperty',
+                'detectCSSCompatibilityIssues',
+                'displayField',
+                'dock',
+                'draggable',
+                'elementAttributes',
+                'floating',
+                'getItemCls',
+                'getItemStyle',
+                'groupHeaderTpl',
+                'hideAnimation',
+                'htmlCls',
+                'iconTpl',
+                'ignoreParentReadOnly',
+                'isSelectable',
+                'itemTpl',
+                'listeners',
+                'localeClass',
+                'localizable',
+                'localizableProperties',
+                'maskDefaults',
+                'masked',
+                'monitorResize',
+                'owner',
+                'positioned',
+                'preventTooltipOnTouch',
+                'relayStoreEvents',
+                'ripple',
+                'rootElement',
+                'scrollAction',
+                'selectAllItem',
+                'showAnimation',
+                'showTooltipWhenDisabled',
+                'tab',
+                'tag',
+                'textAlign',
+                'tooltipTemplate',
+                'type',
+                'ui',
+                'virtualize',
+                'weight'
+            ],
+
+            propertyConfigNames : [
+                'alignSelf',
+                'appendTo',
+                'callOnFunctions',
+                'catchEventHandlerExceptions',
+                'cls',
+                'collapsibleGroups',
+                'column',
+                'content',
+                'dataset',
+                'disabled',
+                'emptyText',
+                'extraData',
+                'flex',
+                'height',
+                'hidden',
+                'html',
+                'id',
+                'insertBefore',
+                'insertFirst',
+                'items',
+                'keyMap',
+                'margin',
+                'maxHeight',
+                'maximizeOnMobile',
+                'maxWidth',
+                'minHeight',
+                'minWidth',
+                'multiSelect',
+                'onBeforeDestroy',
+                'onBeforeHide',
+                'onBeforeItem',
+                'onBeforeShow',
+                'onCatchAll',
+                'onDestroy',
+                'onElementCreated',
+                'onFocusIn',
+                'onFocusOut',
+                'onHide',
+                'onItem',
+                'onPaint',
+                'onReadOnly',
+                'onRecompose',
+                'onResize',
+                'onSelectionChange',
+                'onShow',
+                'onToggleGroup',
+                'onToggleNode',
+                'readOnly',
+                'rtl',
+                'scrollable',
+                'selected',
+                'span',
+                'store',
+                'title',
+                'toggleAllIfCtrlPressed',
+                'tooltip',
+                'width',
+                'x',
+                'y'
+            ],
+
+            propertyNames : [
+                'anchorSize',
+                'focusVisible',
+                'parent'
+            ],
+
+            eventNames : [
+                'beforeDestroy',
+                'beforeHide',
+                'beforeItem',
+                'beforeShow',
+                'catchAll',
+                'destroy',
+                'elementCreated',
+                'focusIn',
+                'focusOut',
+                'hide',
+                'item',
+                'paint',
+                'readOnly',
+                'recompose',
+                'resize',
+                'selectionChange',
+                'show',
+                'toggleGroup',
+                'toggleNode'
+            ]
+        };
+    },
+
+    /**
+     * 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>