Upgrade Vue.js to v3 and drop IE11 support

.github/workflows/test-unit.yml

@@ -292,22 +292,26 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-composer-
 
-      - name: Install JS dependencies (only for Slow)
-        if: matrix.type == 'Chrome Slow'
-        run: |
-          mv public public.orig
-          mkdir public public/css public/external
-          cp public.orig/.gitattributes public
-          cp public.orig/.gitignore public
-          cp public.orig/logo.png public
-          cp public.orig/css/agileui.less public/css
-          cp public.orig/external/.gitignore public/external
-          cp public.orig/external/package.json public/external
-          cp public.orig/external/package-lock.json public/external
-          cp public.orig/external/postinstall.js public/external
-          npm install --loglevel=error -g pug-cli less less-plugin-clean-css uglify-js
-          (cd js && npm ci --loglevel=error)
-          (cd public/external && npm ci --loglevel=error && git clean -dxfq .)
+      - name: Install JS dependencies (only for coverage or Slow)
+        if: env.LOG_COVERAGE || matrix.type == 'Chrome Slow'
+        run: |
+          if [ -n "$LOG_COVERAGE" ]; then
+            (cd js && npm install --package-lock-only --save-dev babel-plugin-istanbul nyc && npm ci --loglevel=error)
+          else
+            mv public public.orig
+            mkdir public public/css public/external
+            cp public.orig/.gitattributes public
+            cp public.orig/.gitignore public
+            cp public.orig/logo.png public
+            cp public.orig/css/agileui.less public/css
+            cp public.orig/external/.gitignore public/external
+            cp public.orig/external/package.json public/external
+            cp public.orig/external/package-lock.json public/external
+            cp public.orig/external/postinstall.js public/external
+            npm install --loglevel=error -g pug-cli less less-plugin-clean-css uglify-js
+            (cd js && npm ci --loglevel=error)
+            (cd public/external && npm ci --loglevel=error && git clean -dxfq .)
+          fi
 
       - name: Lint JS files (only for Slow)
         if: matrix.type == 'Chrome Slow'
@@ -326,10 +330,20 @@ jobs:
         run: |
           lessc public/css/agileui.less public/css/agileui.min.css --clean-css="--s1 --advanced" --source-map
 
-      - name: Compile JS files (only for Slow)
-        if: matrix.type == 'Chrome Slow'
-        run: |
-          (cd js && npm run build)
+      - name: Compile JS files (only for coverage or Slow)
+        if: env.LOG_COVERAGE || matrix.type == 'Chrome Slow'
+        run: |
+          if [ -n "$LOG_COVERAGE" ]; then
+            rm -r public/js
+            (cd js && ISTANBUL_COVERAGE=1 npm run build)
+          else
+            # fix webpack build repeatability
+            # https://github.com/vuejs/vue-loader/blob/v17.0.1/src/index.ts#L284 should be fine,
+            # the import itself is relativized, but the variable (generated by webpack) is not
+            # TODO submit webpack GH issue
+            sed -i -E 's~(import exportComponent from )\$\{exportHelperPath\}(`;)~\1'"'"'vue-loader/dist/exportHelper.js'"'"'\2~' js/node_modules/vue-loader/dist/index.js
+            (cd js && npm run build)
+          fi
 
       - name: Diff compiled files (only for Slow)
         if: matrix.type == 'Chrome Slow'
@@ -338,13 +352,6 @@ jobs:
           diff -ru template.orig template
           rm -r public.orig template.orig
 
-      - name: Instrument & recompile JS files (only for coverage)
-        if: env.LOG_COVERAGE
-        run: |
-          rm -r public/js
-          (cd js && npm install --package-lock-only --save-dev nyc && npm ci --loglevel=error)
-          (cd js && npx nyc instrument --in-place . && npx webpack --env production)
-
       - name: Install PHP dependencies
         run: |
           composer remove --no-interaction --no-update phpunit/phpunit johnkary/phpunit-speedtrap --dev
@@ -439,7 +446,7 @@ jobs:
           ls -l coverage | wc -l
           php -d memory_limit=2G vendor/bin/phpcov merge coverage/ --clover coverage/merged.xml
           ls -l coverage/js | wc -l
-          (cd js && npx nyc report --temp-dir ../coverage/js --report-dir ../coverage/js --reporter=clover)
+          (cd js && npx nyc report --temp-dir ../coverage/js --report-dir ../coverage/js -e vue --reporter=clover)
           # fix never reached condition is rendered to clover with falsecount > 0
           # https://github.com/istanbuljs/istanbuljs/issues/695
           sed -i -E 's~count="0" type="cond" truecount="0" falsecount="[1-9]+[0-9]*"~count="0" type="cond" truecount="0" falsecount="0"~' coverage/js/clover.xml

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');

demos/form-control/multiline.php

@@ -29,7 +29,7 @@
 
 // Add multiline field and set model.
 /** @var Form\Control\Multiline */
-$multiline = $form->addControl('ml', [Form\Control\Multiline::class, 'tableProps' => ['color' => 'blue'], 'itemLimit' => 10, 'addOnTab' => true]);
+$multiline = $form->addControl('items', [Form\Control\Multiline::class, 'tableProps' => ['color' => 'blue'], 'itemLimit' => 10, 'addOnTab' => true]);
 $multiline->setModel($inventory);
 
 // Add total field.

demos/javascript/vue-component.php

@@ -7,6 +7,7 @@
 use Atk4\Ui\Button;
 use Atk4\Ui\Header;
 use Atk4\Ui\HtmlTemplate;
+use Atk4\Ui\JsExpression;
 use Atk4\Ui\Lister;
 use Atk4\Ui\Message;
 use Atk4\Ui\View;
@@ -75,75 +76,98 @@
 
 Header::addTo($app, ['External Component', 'subHeader' => 'Creating component using an external component definition.']);
 
-$app->requireJs($app->cdn['atk'] . '/external/vue-clock2/dist/vue-clock.min.js');
+$app->html->template->dangerouslyAppendHtml('Head', $app->getTag('script', [], <<<'EOF'
+    window.vueDemoClock = {
+        template: '<div :style="{ fontSize: \'80px\', padding: \'25px\', color: color, textShadow: textShadow, background: background }">{{ time }}</div>',
+        props: ['color', 'textShadow', 'background'],
+        data: function () {
+            return {
+                time: '-',
+            };
+        },
+        mounted: function () {
+            this.interval = setInterval(this.updateClock, 100);
+        },
+        beforeUnmount: function () {
+            clearInterval(this.interval);
+        },
+        methods: {
+            updateClock: function () {
+                const date = new Date();
+                this.time = date.getHours().toString().padStart(2, '0')
+                    + ':' + date.getMinutes().toString().padStart(2, '0')
+                    + ':' + date.getSeconds().toString().padStart(2, '0');
+            },
+        },
+    };
+    EOF));
 
 // Injecting template but normally you would create a template file.
-$clock_template = new HtmlTemplate(<<<'EOF'
+$clockTemplate = new HtmlTemplate(<<<'EOF'
     <div id="{$_id}" class="ui center aligned segment">
-    <my-clock inline-template v-bind="initData">
-        <div>
-            <clock :color="color" :border="border" :bg="bg"></clock>
-            <div class="ui basic segment inline"><div class="ui button primary" @click="onChangeStyle">Change Style</div></div>
-        </div>
-    </my-clock>
+        <my-clock v-bind="initData"></my-clock>
     </div>
     {$script}
     EOF);
 
 // Injecting script but normally you would create a separate js file and include it in your page.
-// This is the vue component definition. It is also using another external vue component 'vue-clock2'
-$clock_script = $app->getTag('script', [], <<<'EOF'
-    // Register clock component from vue-clock2 to use with myClock.
-    atk.vueService.getVue().component('clock', Clock.default);
-
-    var myClock = {
-      props : { clock: Array },
-      data: function () {
-        return { style : this.clock, currentIdx : 0 }
-      },
-      mounted: function () {
-        // add a listener for changing clock style.
-        // this will listen to event '-clock-change-style' emit on the eventBus.
-        atk.eventBus.on(this.$root.$el.id + '-clock-change-style', (payload) => {
-            this.onChangeStyle();
-        });
-      },
-      computed: {
-        color: function () {
-          return this.style[this.currentIdx].color
+$clockScript = $app->getTag('script', [], <<<'EOF'
+    let myClock = {
+        template: `
+            <div>
+                <demo-clock :color="color" :text-shadow="textShadow" :background="background"></demo-clock>
+                <div class="ui basic segment inline"><div class="ui button primary" @click="onChangeStyle">Change Style</div></div>
+            </div>`,
+        components: {
+            'demo-clock': window.vueDemoClock,
         },
-        border: function () {
-          return this.style[this.currentIdx].border
+        props: { styles: Array },
+        data: function () {
+            return { style: this.styles, currentIndex: 0 };
         },
-        bg: function () {
-          return this.style[this.currentIdx].bg
-        }
-      },
-      name: 'my-clock',
-      methods: {
-        onChangeStyle: function () {
-          this.currentIdx = this.currentIdx + 1;
-          if (this.currentIdx > this.style.length - 1) {
-            this.currentIdx = 0;
-          }
-        }
-      },
-    }
+        mounted: function () {
+            // add a listener for changing clock style.
+            // this will listen to event '-clock-change-style' emit on the eventBus.
+            atk.eventBus.on(this.$root.$el.parentElement.id + '-clock-change-style', (payload) => {
+                this.onChangeStyle();
+            });
+        },
+        computed: {
+            color: function () {
+                return this.style[this.currentIndex].color;
+            },
+            textShadow: function () {
+                return this.style[this.currentIndex].textShadow;
+            },
+            background: function () {
+                return this.style[this.currentIndex].background;
+            },
+        },
+        name: 'my-clock',
+        methods: {
+            onChangeStyle: function () {
+                this.currentIndex++;
+                if (this.currentIndex >= this.style.length) {
+                    this.currentIndex = 0;
+                }
+            },
+        },
+    };
     EOF);
 
 // Creating the clock view and injecting js.
-$clock = View::addTo($app, ['template' => $clock_template]);
-$clock->template->tryDangerouslySetHtml('script', $clock_script);
+$clock = View::addTo($app, ['template' => $clockTemplate]);
+$clock->template->dangerouslySetHtml('script', $clockScript);
 
 // passing some style to my-clock component.
-$clock_style = [
-    ['color' => '#4AB7BD', 'border' => '', 'bg' => 'none'],
-    ['color' => '#FFFFFF', 'border' => 'none', 'bg' => '#E0DCFF'],
-    ['color' => '', 'border' => 'none', 'bg' => 'radial-gradient(circle, #ecffe5, #fffbe1, #38ff91)'],
+$clockStyle = [
+    ['color' => 'maroon', 'background' => '', 'textShadow' => '5px 5px 10px teal'],
+    ['color' => 'white', 'background' => '', 'textShadow' => '0px 0px 10px blue'],
+    ['color' => '', 'background' => 'radial-gradient(ellipse at center, rgba(0, 255, 0, 0.25) 0%,rgba(0, 255, 0, 0) 50%)', 'textShadow' => ''],
 ];
 
 // creating vue using an external definition.
-$clock->vue('my-clock', ['clock' => $clock_style], 'myClock');
+$clock->vue('my-clock', ['styles' => $clockStyle], new JsExpression('myClock'));
 
 $btn = Button::addTo($app, ['Change Style']);
 $btn->on('click', $clock->jsEmitEvent($clock->name . '-clock-change-style'));

docs/multiline.rst

@@ -150,8 +150,8 @@ Lets use the example of demos/multiline.php::
             parent::init();
 
             $this->addField('item', ['required' => true, 'default' => 'item']);
-            $this->addField('qty', ['type' => 'integer', 'caption' => 'Qty / Box', 'required' => true, 'ui' => ['multiline' => ['sui-table-cell' => ['width' => 2]]]]);
-            $this->addField('box', ['type' => 'integer', 'caption' => '# of Boxes', 'required' => true, 'ui' => ['multiline' => ['sui-table-cell' => ['width' => 2]]]]);
+            $this->addField('qty', ['type' => 'integer', 'caption' => 'Qty / Box', 'required' => true, 'ui' => ['multiline' => [Form\Control\Multiline::TABLE_CELL => ['width' => 2]]]]);
+            $this->addField('box', ['type' => 'integer', 'caption' => '# of Boxes', 'required' => true, 'ui' => ['multiline' => [Form\Control\Multiline::TABLE_CELL => ['width' => 2]]]]);
             $this->addExpression('total', ['expr' => function (Model $row) {
                 return $row->get('qty') * $row->get('box');
             }, 'type' => 'integer']);
@@ -203,7 +203,7 @@ Use the $componentProps property of Multiline in order to apply 'Props' to compo
 
 .. php:attr:: componentProps
 
-Example of changing all Dropdown(sui-dropdown) within Multiline::
+Example of changing all Dropdown(SuiDropdown) within Multiline::
 
     $ml = $form->addControl('ml', [Multiline::class, 'compponentProps' => [Multiline::SELECT => ['floating' => true]]]);
 
@@ -224,7 +224,7 @@ Specific field components Props may be applied using the 'ui' field property whe
 Note on Multiline control
 -------------------------
 
-Each control inside Multiline is wrap within a table cell(sui-table-cell) component and this component can be customize as
+Each control inside Multiline is wrap within a table cell(SuiTableCell) component and this component can be customize as
 well using the 'ui' property of the model's field::
 
     $this->addExpression('total', [
@@ -237,7 +237,7 @@ well using the 'ui' property of the model's field::
 
 Table appearance within Multiline
 ---------------------------------
-Table(sui-table) Props can be set using $tableProps property of Multiline::
+Table(SuiTable) Props can be set using $tableProps property of Multiline::
 
     $ml = $form->addControl('ml', [Multiline::class, 'tableProps' => ['color' => 'blue']]);