fix vue date flatpickr

Author: mvorisek

demos/_unit-test/calendar-input.php

@@ -20,7 +20,7 @@
     return $view;
 };
 
-Header::addTo($app, ['Testing flatpickr using Behat']);
+Header::addTo($app, ['Testing Flatpickr using Behat']);
 $form = Form::addTo($app);
 $c = $form->addControl('field', [], ['type' => 'date']);
 $form->buttonSave->set($c->shortName);

demos/_unit-test/scope-builder.php

@@ -17,7 +17,7 @@
 
 $project = new Condition($model->fieldName()->project_name, Condition::OPERATOR_REGEXP, '[a-zA-Z]');
 $brazil = new Condition($model->fieldName()->client_country_iso, '=', 'BR');
-$start = new Condition($model->fieldName()->start_date, '=', '2020-10-22');
+$start = new Condition($model->fieldName()->start_date, '=', '2020-10-22'); // TODO php/DateTime value should be supported
 $finish = new Condition($model->fieldName()->finish_time, '!=', '22:22');
 $isCommercial = new Condition($model->fieldName()->is_commercial, '0');
 $budget = new Condition($model->fieldName()->project_budget, '>=', '1000');

js/.eslintrc.js

@@ -49,6 +49,13 @@ module.exports = {
                 balanced: true,
             },
         }],
+        'comma-dangle': ['error', {
+            arrays: 'always-multiline',
+            objects: 'always-multiline',
+            functions: 'never',
+            imports: 'always-multiline',
+            exports: 'always-multiline',
+        }],
         'import/no-unresolved': 'off',
         'import/prefer-default-export': 'off',
         'import/extensions': ['error', 'always', {
@@ -57,6 +64,7 @@ module.exports = {
             vue: 'never',
         }],
         'vue/html-indent': ['error', 4],
+        'vue/attribute-hyphenation': ['error', 'never'],
         'jsdoc/require-param': 'off',
         'jsdoc/require-param-description': 'off',
         'jsdoc/require-returns': 'off',

js/src/plugins/file-upload.plugin.js

@@ -156,7 +156,7 @@ export default class AtkFileUploadPlugin extends AtkPlugin {
             { fUploadAction: 'upload' },
             this.settings.url,
             completeCb,
-            xhrCb,
+            xhrCb
         );
     }
 

js/src/plugins/js-sortable.plugin.js

@@ -43,7 +43,7 @@ export default class AtkJsSortablePlugin extends AtkPlugin {
             {
                 draggable: this.settings.draggable,
                 handle: this.settings.handleClass ? '.' + this.settings.handleClass : null,
-            },
+            }
         );
         this.initialize();
 

js/src/plugins/reload-view.plugin.js

@@ -26,7 +26,7 @@ export default class AtkReloadViewPlugin extends AtkPlugin {
         // add new param and remove duplicate, prioritizing the latest one.
         let urlParams = Object.assign(
             atk.urlHelper.parseParams(this.settings.url),
-            this.settings.urlOptions ? this.settings.urlOptions : {},
+            this.settings.urlOptions ? this.settings.urlOptions : {}
         );
 
         // get store object.

js/src/services/upload.service.js

@@ -23,7 +23,7 @@ class UploadService {
         data,
         uploadUrl,
         completeCb = function (r, c) {},
-        xhrCb = function () { return new window.XMLHttpRequest(); },
+        xhrCb = function () { return new window.XMLHttpRequest(); }
     ) {
         const formData = new FormData();
 

js/src/vue-components/multiline/multiline.component.js

@@ -38,7 +38,7 @@ export default {
                 </SuiTableFooter>
             </SuiTable>
             <div>
-                <input ref="atkmlInput" :form="form" :name="name" type="hidden" :value="value" />
+                <input ref="atkmlInput" :form="form" :name="name" type="hidden" :value="valueJson" />
             </div>
         </div>`,
     props: {
@@ -55,8 +55,8 @@ export default {
 
         return {
             form: this.data.formName,
-            value: this.data.inputValue,
-            name: this.data.inputName, // form input name where to set multiline content value.
+            valueJson: this.data.inputValue,
+            name: this.data.inputName,
             rowData: [],
             fieldData: this.data.fields || [],
             eventFields: this.data.eventFields || [],
@@ -72,7 +72,7 @@ export default {
         AtkMultilineBody: multilineBody,
     },
     mounted: function () {
-        this.rowData = this.buildRowData(this.value ? this.value : '[]');
+        this.rowData = this.buildRowData(this.valueJson ? this.valueJson : '[]');
         this.updateInputValue();
 
         atk.eventBus.on(this.$root.$el.id + '-update-row', (payload) => {
@@ -112,7 +112,7 @@ export default {
             this.rowData.push(newRow);
             this.updateInputValue();
             if (this.data.afterAdd && typeof this.data.afterAdd === 'function') {
-                this.data.afterAdd(JSON.parse(this.value));
+                this.data.afterAdd(JSON.parse(this.valueJson));
             }
             this.fetchExpression(newRow.__atkml);
             this.fetchOnUpdateAction();
@@ -125,7 +125,7 @@ export default {
             this.updateInputValue();
             this.fetchOnUpdateAction();
             if (this.data.afterDelete && typeof this.data.afterDelete === 'function') {
-                this.data.afterDelete(JSON.parse(this.value));
+                this.data.afterDelete(JSON.parse(this.valueJson));
             }
         },
         onUpdate: function (atkmlId, fieldName, value) {
@@ -183,7 +183,7 @@ export default {
          * as JSON string.
          */
         updateInputValue: function () {
-            this.value = JSON.stringify(this.rowData);
+            this.valueJson = JSON.stringify(this.rowData);
         },
         /**
          * Build rowData from JSON string.
@@ -213,7 +213,7 @@ export default {
                     on: 'now',
                     url: this.data.url,
                     method: 'POST',
-                    data: { __atkml_action: 'on-change', rows: this.value },
+                    data: { __atkml_action: 'on-change', rows: this.valueJson },
                 });
             }
         },
@@ -233,7 +233,7 @@ export default {
         fetchExpression: async function (atkmlId) {
             if (this.hasExpression()) {
                 const row = this.findRow(atkmlId);
-                // server will return expression field - value if define.
+                // server will return expression field/value if defined
                 if (row) {
                     const resp = await this.postData(row);
                     if (resp.expressions) {

js/src/vue-components/query-builder/fomantic-ui-group.component.vue

@@ -1,11 +1,11 @@
 <template>
     <div
         class="vqb-group ui fluid card"
-        :class="[labels.spaceRule, 'depth-' + depth.toString()]"
+        :class="[labels.spaceRule, 'depth-' + depth]"
     >
         <div
             class="vbq-group-heading content"
-            :class="'depth-' + depth.toString()"
+            :class="'depth-' + depth"
         >
             <div class="ui grid">
                 <div class="fourteen wide column">

js/src/vue-components/query-builder/query-builder.component.vue

@@ -4,7 +4,7 @@
             :form="form"
             :name="name"
             type="hidden"
-            :value="value"
+            :value="valueJson"
         >
         <VueQueryBuilder
             v-model="query"
@@ -64,7 +64,7 @@ export default {
         };
     },
     computed: {
-        value: function () {
+        valueJson: function () {
             return JSON.stringify(this.query, null);
         },
     },