@bryntum/grid-vue 7.1.1

package/src/BryntumDateTimeField.vue

@@ -0,0 +1,362 @@
+<!--
+  Vue wrapper for Bryntum DateTimeField
+-->
+
+<template>
+
+</template>
+
+<script>
+
+import { Base, DateTimeField, Field, FieldContainer, 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 : 'BryntumDateTimeField',
+
+    props : {
+
+        // 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 },
+        autoSelect                   : { type : Boolean, default : undefined },
+        bubbleEvents                 : { type : Object, default : undefined },
+        centered                     : { type : Boolean, default : undefined },
+        clearable                    : { type : [Boolean, Object], default : undefined },
+        color                        : { type : String, default : undefined },
+        config                       : { type : Object, default : undefined },
+        constrainTo                  : { type : [HTMLElement, Widget, Rectangle], default : undefined },
+        container                    : { type : [Object, Array, FieldContainer], default : undefined },
+        containValues                : { type : Function, default : undefined },
+        contentElementCls            : { type : [String, Object], default : undefined },
+        dataField                    : { type : String, default : undefined },
+        dateField                    : { type : Object, 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 },
+        highlightExternalChange      : { type : Boolean, default : undefined },
+        hint                         : { type : Function, default : undefined },
+        hintHtml                     : { type : Function, default : undefined },
+        ignoreParentReadOnly         : { type : Boolean, default : undefined },
+        inline                       : { type : Boolean, default : undefined },
+        inputTag                     : { type : String, default : undefined },
+        keyStrokeChangeDelay         : { type : Number, default : undefined },
+        labelCls                     : { type : [String, Object], default : undefined },
+        labelPosition                : { type : [String, null], default : undefined },
+        labels                       : { type : Array, default : undefined },
+        labelWidth                   : { type : [String, Number], 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 },
+        name                         : { type : String, default : undefined },
+        owner                        : { type : [Widget, Object], default : undefined },
+        positioned                   : { type : Boolean, default : undefined },
+        preventTooltipOnTouch        : { type : Boolean, default : undefined },
+        relayStoreEvents             : { type : Boolean, default : undefined },
+        revertOnEscape               : { 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 },
+        skipValidation               : { type : Boolean, default : undefined },
+        tab                          : { type : [Boolean, Object], default : undefined },
+        textAlign                    : { type : String, default : undefined },
+        timeField                    : { type : Object, default : undefined },
+        title                        : { type : String, default : undefined },
+        type                         : { type : String, default : undefined },
+        ui                           : { type : [String, Object], default : undefined },
+        weekStartDay                 : { type : Number, default : undefined },
+        weight                       : { type : Number, default : undefined },
+
+        // Configs and properties
+        alignSelf                   : { type : String, default : undefined },
+        appendTo                    : { type : [HTMLElement, String], default : undefined },
+        badge                       : { type : String, default : undefined },
+        callOnFunctions             : { type : Boolean, default : undefined },
+        catchEventHandlerExceptions : { type : Boolean, default : undefined },
+        cls                         : { type : [String, Object], default : undefined },
+        column                      : { type : Number, default : undefined },
+        dataset                     : { type : Object, default : undefined },
+        disabled                    : { type : [Boolean, String], default : undefined },
+        editable                    : { type : Boolean, default : undefined },
+        extraData                   : { type : Object, default : undefined },
+        flex                        : { type : [Number, String], default : undefined },
+        height                      : { type : [Number, String], default : undefined },
+        hidden                      : { type : Boolean, default : undefined },
+        id                          : { type : String, default : undefined },
+        insertBefore                : { type : [HTMLElement, String], default : undefined },
+        insertFirst                 : { type : [HTMLElement, String], default : undefined },
+        keyMap                      : { type : Object, default : undefined },
+        label                       : { type : String, 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 },
+        placeholder                 : { type : String, default : undefined },
+        readOnly                    : { type : Boolean, default : undefined },
+        rendition                   : { type : String, default : undefined },
+        required                    : { type : Boolean, default : undefined },
+        rtl                         : { type : Boolean, default : undefined },
+        showRequiredIndicator       : { type : String, default : undefined },
+        span                        : { type : Number, default : undefined },
+        tooltip                     : { type : [String, Object, null], default : undefined },
+        triggers                    : { type : Object, default : undefined },
+        value                       : { type : [Object, String], 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 },
+        content      : { type : String, default : undefined },
+        focusVisible : { type : Boolean, default : undefined },
+        html         : { type : Function, default : undefined },
+        input        : { type : HTMLElement, default : undefined },
+        parent       : { type : Widget, default : undefined },
+        scrollable   : { type : Scroller, default : undefined },
+
+        // Events
+        onAction         : { type : Function },
+        onBeforeDestroy  : { type : Function },
+        onBeforeHide     : { type : Function },
+        onBeforeShow     : { type : Function },
+        onCatchAll       : { type : Function },
+        onChange         : { type : Function },
+        onClear          : { type : Function },
+        onDestroy        : { type : Function },
+        onElementCreated : { type : Function },
+        onFocusIn        : { type : Function },
+        onFocusOut       : { type : Function },
+        onHide           : { type : Function },
+        onInput          : { type : Function },
+        onPaint          : { type : Function },
+        onReadOnly       : { type : Function },
+        onRecompose      : { type : Function },
+        onResize         : { type : Function },
+        onShow           : { type : Function },
+        onTrigger        : { type : Function },
+
+    },
+
+    data : () => {
+        return {
+            instanceClass : DateTimeField,
+            instanceName : 'DateTimeField',
+
+            configNames : [
+                'adopt',
+                'align',
+                'anchor',
+                'ariaDescription',
+                'ariaLabel',
+                'autoSelect',
+                'bubbleEvents',
+                'centered',
+                'clearable',
+                'color',
+                'config',
+                'constrainTo',
+                'container',
+                'containValues',
+                'contentElementCls',
+                'dataField',
+                'dateField',
+                'defaultBindProperty',
+                'detectCSSCompatibilityIssues',
+                'dock',
+                'draggable',
+                'elementAttributes',
+                'floating',
+                'hideAnimation',
+                'highlightExternalChange',
+                'hint',
+                'hintHtml',
+                'ignoreParentReadOnly',
+                'inline',
+                'inputTag',
+                'keyStrokeChangeDelay',
+                'labelCls',
+                'labelPosition',
+                'labels',
+                'labelWidth',
+                'listeners',
+                'localeClass',
+                'localizable',
+                'localizableProperties',
+                'maskDefaults',
+                'masked',
+                'monitorResize',
+                'name',
+                'owner',
+                'positioned',
+                'preventTooltipOnTouch',
+                'relayStoreEvents',
+                'revertOnEscape',
+                'ripple',
+                'rootElement',
+                'scrollAction',
+                'showAnimation',
+                'showTooltipWhenDisabled',
+                'skipValidation',
+                'tab',
+                'textAlign',
+                'timeField',
+                'title',
+                'type',
+                'ui',
+                'weekStartDay',
+                'weight'
+            ],
+
+            propertyConfigNames : [
+                'alignSelf',
+                'appendTo',
+                'badge',
+                'callOnFunctions',
+                'catchEventHandlerExceptions',
+                'cls',
+                'column',
+                'dataset',
+                'disabled',
+                'editable',
+                'extraData',
+                'flex',
+                'height',
+                'hidden',
+                'id',
+                'insertBefore',
+                'insertFirst',
+                'keyMap',
+                'label',
+                'margin',
+                'maxHeight',
+                'maximizeOnMobile',
+                'maxWidth',
+                'minHeight',
+                'minWidth',
+                'onAction',
+                'onBeforeDestroy',
+                'onBeforeHide',
+                'onBeforeShow',
+                'onCatchAll',
+                'onChange',
+                'onClear',
+                'onDestroy',
+                'onElementCreated',
+                'onFocusIn',
+                'onFocusOut',
+                'onHide',
+                'onInput',
+                'onPaint',
+                'onReadOnly',
+                'onRecompose',
+                'onResize',
+                'onShow',
+                'onTrigger',
+                'placeholder',
+                'readOnly',
+                'rendition',
+                'required',
+                'rtl',
+                'showRequiredIndicator',
+                'span',
+                'tooltip',
+                'triggers',
+                'value',
+                'width',
+                'x',
+                'y'
+            ],
+
+            propertyNames : [
+                'anchorSize',
+                'content',
+                'focusVisible',
+                'html',
+                'input',
+                'parent',
+                'scrollable'
+            ],
+
+            eventNames : [
+                'action',
+                'beforeDestroy',
+                'beforeHide',
+                'beforeShow',
+                'catchAll',
+                'change',
+                'clear',
+                'destroy',
+                'elementCreated',
+                'focusIn',
+                'focusOut',
+                'hide',
+                'input',
+                'paint',
+                'readOnly',
+                'recompose',
+                'resize',
+                'show',
+                'trigger'
+            ]
+        };
+    },
+
+    /**
+     * 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>