chore: Update Vue + Vuetify

Themes/VuetifyCore/Cli/FooterSectionWriter.php

@@ -2,7 +2,9 @@
 
 namespace Themes\VuetifyCore\Cli;
 
+use WebFiori\Framework\Ui\WebPage;
 use WebFiori\Framework\Writers\ClassWriter;
+use WebFiori\Ui\HTMLNode;
 
 /**
  * A class which is used to write footer section class of the theme.
@@ -21,8 +23,8 @@ public function getWireframe() : string {
     public function __construct(VuetifyThemeClassWriter $writer) {
         parent::__construct('FooterSection', $writer->getPath(), $writer->getNamespace());
 
-        $this->addUseStatement('WebFiori\Framework\Ui\WebPage');
-        $this->addUseStatement('WebFiori\\Ui\\HTMLNode');
+        $this->addUseStatement(WebPage::class);
+        $this->addUseStatement(HTMLNode::class);
         $this->wf = $writer->getWireframe();
 
 

Themes/VuetifyCore/Cli/HeadSectionWriter.php

@@ -2,7 +2,10 @@
 
 namespace Themes\VuetifyCore\Cli;
 
+use Themes\VuetifyCore\VueHeadSectionV2;
+use WebFiori\Framework\Ui\WebPage;
 use WebFiori\Framework\Writers\ClassWriter;
+use WebFiori\Ui\HeadNode;
 
 /**
  * A class which is used to write head section class of the theme.
@@ -12,8 +15,9 @@
 class HeadSectionWriter extends ClassWriter {
     public function __construct(VuetifyThemeClassWriter $writer) {
         parent::__construct('HeadSection', $writer->getPath(), $writer->getNamespace());
-        $this->addUseStatement('WebFiori\Framework\Ui\WebPage');
-        $this->addUseStatement('WebFiori\\Ui\\HeadNode');
+        $this->addUseStatement(WebPage::class);
+        $this->addUseStatement(HeadNode::class);
+        $this->addUseStatement(VueHeadSectionV2::class);
     }
     public function writeClassBody() {
 
@@ -27,12 +31,6 @@ public function writeClassBody() {
         ], 1);
         $this->append([
             'parent::__construct();',
-            "\$this->addJs('https://unpkg.com/vue@2.x.x');",
-            "\$this->addCSS('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');",
-            "\$this->addCSS('https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css');",
-            "\$this->addCSS('https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css');",
-            "\$this->addJs('https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js');",
-            "\$this->addJs('https://cdn.jsdelivr.net/gh/usernane/AJAXRequestJs@2.0.3/AJAXRequest.js');",
             '//TODO: Add any extra JS or Css files here in addition to meta tags.',
         ], 2);
         $this->append('}', 1);
@@ -46,7 +44,7 @@ public function writeClassComment() {
     }
 
     public function writeClassDeclaration() {
-        $this->append("class ".$this->getName().' extends HeadNode {');
+        $this->append("class ".$this->getName().' extends VueHeadSectionV2 {');
     }
 
 }

Themes/VuetifyCore/Cli/HeaderSectionWriter.php

@@ -2,7 +2,9 @@
 
 namespace Themes\VuetifyCore\Cli;
 
+use WebFiori\Framework\Ui\WebPage;
 use WebFiori\Framework\Writers\ClassWriter;
+use WebFiori\Ui\HTMLNode;
 
 /**
  * A class which is used to write header section class of the theme.
@@ -21,8 +23,8 @@ public function getWireframe() : string {
     public function __construct(VuetifyThemeClassWriter $writer) {
         parent::__construct('HeaderSection', $writer->getPath(), $writer->getNamespace());
 
-        $this->addUseStatement('WebFiori\Framework\Ui\WebPage');
-        $this->addUseStatement('WebFiori\\Ui\\HTMLNode');
+        $this->addUseStatement(WebPage::class);
+        $this->addUseStatement(HTMLNode::class);
         $this->wf = $writer->getWireframe();
 
     }

Themes/VuetifyCore/Cli/SideSectionWriter.php

@@ -2,7 +2,9 @@
 
 namespace Themes\VuetifyCore\Cli;
 
+use WebFiori\Framework\Ui\WebPage;
 use WebFiori\Framework\Writers\ClassWriter;
+use WebFiori\Ui\HTMLNode;
 
 /**
  * A class which is used to write footer section class of the theme.
@@ -18,8 +20,9 @@ class SideSectionWriter extends ClassWriter {
     public function __construct(VuetifyThemeClassWriter $writer) {
         parent::__construct('AsideSection', $writer->getPath(), $writer->getNamespace());
 
-        $this->addUseStatement('WebFiori\Framework\Ui\WebPage');
-        $this->addUseStatement('WebFiori\\Ui\\HTMLNode');
+        $this->addUseStatement(WebPage::class);
+        $this->addUseStatement(HTMLNode::class);
+
         $this->wf = $writer->getWireframe();
     }
     public function getWireframe() : string {

Themes/VuetifyCore/Cli/SysBarWriter.php

@@ -2,7 +2,9 @@
 
 namespace Themes\VuetifyCore\Cli;
 
+use WebFiori\Framework\Ui\WebPage;
 use WebFiori\Framework\Writers\ClassWriter;
+use WebFiori\Ui\HTMLNode;
 
 /**
  * A class which is used to write system bar section class of the theme.
@@ -18,8 +20,8 @@ class SysBarWriter extends ClassWriter {
     public function __construct(VuetifyThemeClassWriter $writer) {
         parent::__construct('SystemBarSection', $writer->getPath(), $writer->getNamespace());
 
-        $this->addUseStatement('WebFiori\Framework\Ui\WebPage');
-        $this->addUseStatement('use WebFiori\\Ui\\HTMLNode');
+        $this->addUseStatement(WebPage::class);
+        $this->addUseStatement(HTMLNode::class);
         $this->wf = $writer->getWireframe();
     }
     public function getWireframe() : string {

Themes/VuetifyCore/Cli/VuetifyThemeClassWriter.php

@@ -1,7 +1,11 @@
 <?php
 namespace Themes\VuetifyCore\Cli;
 
+use Themes\VuetifyCore\VuetifyThemeCore;
 use WebFiori\Framework\Writers\ClassWriter;
+use WebFiori\Ui\HeadNode;
+use WebFiori\Ui\HTMLNode;
+
 /**
  * Description of VuetifyThemeClassWriter
  *
@@ -16,9 +20,9 @@ public function __construct(array $classInfoArr) {
         $this->wireframe = $classInfoArr['wireframe'];
         $ns = $this->getNamespace();
 
-        $this->addUseStatement('Themes\\VuetifyCore\\VuetifyThemeCore;');
-        $this->addUseStatement('WebFiori\\Ui\\HTMLNode;');
-        $this->addUseStatement('WebFiori\Ui\HeadNode');
+        $this->addUseStatement(VuetifyThemeCore::class);
+        $this->addUseStatement(HTMLNode::class);
+        $this->addUseStatement(HeadNode::class);
 
         $this->addUseStatement($ns.'\\AsideSection');
         $this->addUseStatement($ns.'\\FooterSection');

Themes/VuetifyCore/CommonHead.php

@@ -19,25 +19,33 @@ class CommonHead extends HeadNode {
     /**
      * Creates new instance of the class.
      */
-    public function __construct(WebPage $page) {
+    public function __construct(?WebPage $page = null) {
         parent::__construct();
         $this->addJs('https://unpkg.com/ajaxrequest-helper@2.1.9/AJAXRequest.js', [
             'integrity' => "sha256-s9Ds9XxJtxeXIpTz5boTwnVxkYJ6lQ/SlkqNsebuCjQ=",
             'crossorigin' => "anonymous",
             'id' => 'ajaxrequest-helper'
         ]);
 
-        $this->addLink('icon', App::getConfig()->getBaseURL().'/favicon.ico', [
-            'id' => 'favicon'
-        ]);
+        try {
+            $this->addLink('icon', App::getConfig()->getBaseURL().'/favicon.ico', [
+                'id' => 'favicon'
+            ]);
+        } catch (\Throwable $ex) {
+            $this->addLink('icon', 'favicon.ico', [
+                'id' => 'favicon'
+            ]);
+        }
+
+
         $this->addCSS('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
         $this->addCSS('https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.4.47/css/materialdesignicons.min.css', [
             'integrity' => "sha256-A/48q6BeZbFOQDUTnu6JsSvofNC880KsOIZ3Duw6mWI=",
             'crossorigin' => "anonymous",
             'id' => 'MaterialDesign-Webfont'
         ]);
 
-        if (!(defined('TESTING') && TESTING) && !(defined('STAGING') && STAGING)) {
+        if ($page !== null && !(defined('TESTING') && TESTING) && !(defined('STAGING') && STAGING)) {
             $page->addBeforeRender(function (WebPage $p) {
 
                 $head = $p->getDocument()->getHeadNode();

Themes/VuetifyCore/VueHeadSectionV2.php

@@ -11,12 +11,15 @@ class VueHeadSectionV2 extends CommonHead {
     /**
      * Creates new instance of the class.
      */
-    public function __construct(WebPage $page) {
+    public function __construct(?WebPage $page = null) {
         parent::__construct($page);
-        $vueVersion = '2.7.16';
-        $vuetifyVersion = '2.7.2';
+        define('VUE_VERSION', '2.7.16');
+        define('VUETIFY_VERSION', '2.7.2');
+
+        $vueVersion = VUE_VERSION;
+        $vuetifyVersion = VUETIFY_VERSION;
 
-        if (WF_VERBOSE) {
+        if (defined('WF_VERBOSE') && WF_VERBOSE) {
             $this->addJs("https://unpkg.com/vue@$vueVersion/dist/vue.js", [
                 'integrity' => "sha256-NrENO0kgWSpOwmwGTEKemj37RokjX9/JHhc2toHHZ4Y=",
                 'crossorigin' => "anonymous",
@@ -31,7 +34,10 @@ public function __construct(WebPage $page) {
                 'version' => $vueVersion
             ]);
         }
-
+        $this->addCSS("https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.4.47/css/materialdesignicons.min.css", [
+            'integrity' => "sha256-A/48q6BeZbFOQDUTnu6JsSvofNC880KsOIZ3Duw6mWI=",
+            'crossorigin' => "anonymous"
+        ]);
         $this->addCSS("https://cdnjs.cloudflare.com/ajax/libs/vuetify/$vuetifyVersion/vuetify.min.css", [
             'integrity' => "sha256-Y2/mvM8cPptVwHOaNUPMi+I636ATzQd9zc4vvqWIv/I=",
             'crossorigin' => "anonymous",

Themes/VuetifyCore/VueHeadSectionV3.php

@@ -1,58 +1,59 @@
 <?php
 namespace Themes\VuetifyCore;
 
-use WebFiori\Framework\ui\WebPage;
+use WebFiori\Framework\Ui\WebPage;
 
 
 /**
  * A head tag that holds CDN files for vue 3 and vuetify 3.
  * 
  */
 class VueHeadSectionV3 extends CommonHead {
-    public function __construct(WebPage $page) {
+    public function __construct(?WebPage $page = null) {
         parent::__construct($page);
 
-        define('VUE_VERSION', '3.5.14');
-        define('VUETIFY_VERSION', '3.7.8');
+        define('VUE_VERSION', '3.5.22');
+        define('VUETIFY_VERSION', '3.10.3');
 
         $vueVersion = VUE_VERSION;
         $vuetifyVersion = VUETIFY_VERSION;
-        if (WF_VERBOSE) {
+
+        if (defined('WF_VERBOSE') && WF_VERBOSE) {
             $this->addJs("https://unpkg.com/vue@$vueVersion/dist/vue.global.js", [
-                'integrity' => "sha256-pMWQ5r9rnIyHnjdyvp6GlqmxIr/veom1EbAa22k8fu0=",
+                'integrity' => "sha256-Ka+7P07D8H/NDYgiK7BYrLnsYlPYzPlBL45gbUpYEhY=",
                 'crossorigin' => "anonymous",
                 'id' => 'vue-script',
                 'version' => $vueVersion
             ]);
 
         } else {
             $this->addJs("https://unpkg.com/vue@$vueVersion/dist/vue.global.prod.js", [
-                'integrity' => "sha256-ewTfzPdWQgxTZNeP25A9hU8AQCfVrFVIzJQA5el11nw=",
+                'integrity' => "sha256-2unBeOhuCSQOWHIc20aoGslq4dxqhw0bG7n/ruPG0/4=",
                 'crossorigin' => "anonymous",
                 'id' => 'vue-script',
                 'version' => $vueVersion
             ]);
         }
         $this->addCSS("https://cdnjs.cloudflare.com/ajax/libs/vuetify/$vuetifyVersion/vuetify.min.css", [
-            'integrity' => "sha256-Dlnp/rmEf5MhIrKZ5rNvXH1C+gW5S0eczEPPdHtIVDg=",
+            'integrity' => "sha256-hX27sGJbWKQMwtOB6Wi24yy0c/sF1ZD3PQbnpAMV+/U=",
             'crossorigin' => "anonymous",
             'id' => 'vuetify-css',
             'version' => $vuetifyVersion
         ]);
         $this->addCSS("https://cdnjs.cloudflare.com/ajax/libs/vuetify/$vuetifyVersion/vuetify-labs.min.css", [
-            'integrity' => "sha256-SfpdqbfoTXHiaZrXGNV3D3IKogXsj99VJ1TYowZ53nw=",
+            'integrity' => "sha256-NPHYAkvbGN9rN5PLyexRnLP1eXJE4JuRb3Jeyrd7EP4=",
             'crossorigin' => "anonymous",
             'id' => 'vuetify-labs-css',
             'version' => $vuetifyVersion
         ]);
         $this->addJs("https://cdnjs.cloudflare.com/ajax/libs/vuetify/$vuetifyVersion/vuetify.min.js", [
-            'integrity' => "sha256-f9d1J5BICD5jgnzKaWeHZL4IXPkjh04tKPQRo8T2awY=",
+            'integrity' => "sha256-giyx/CJouYmk5r3yZ/vlWayMWVrCdPB0DG9dYYtMElk=",
             'crossorigin' => "anonymous",
             'id' => 'vuetify-script',
             'version' => $vuetifyVersion
         ]);
         $this->addJs("https://cdnjs.cloudflare.com/ajax/libs/vuetify/$vuetifyVersion/vuetify-labs.min.js", [
-            'integrity' => "sha256-kDjMygj+Kz7W1UO7mhNwVvKeZy99WuiDyz/CueRp5eI=",
+            'integrity' => "sha256-mRW9D4I/lWPNbUPLfI+D5ME4s3lmYU9wIFhMtUIo3w0=",
             'crossorigin' => "anonymous",
             'id' => 'vuetify-labs-script',
             'version' => $vuetifyVersion

tests/render-test/test-v2.php

@@ -0,0 +1,26 @@
+<?php
+
+use Themes\VuetifyCore\VueHeadSectionV2;
+
+require_once '../../vendor/autoload.php';
+
+$head = new VueHeadSectionV2();
+
+echo '<html>'.$head.'<body><div id="app">
+<v-card>
+<v-card-title>Hi, Vuetify V'.VUETIFY_VERSION.'</v-card-title>
+</v-card>
+</div>
+<script>
+
+app = new Vue({
+    el:"#app",
+    data: {
+        drawer:null,
+    },
+    vuetify: new Vuetify({
+
+    })
+});
+</script>
+</body></html>';

tests/render-test/test-v3.php

@@ -0,0 +1,41 @@
+<?php
+
+use Themes\VuetifyCore\VueHeadSectionV3;
+
+require_once '../../vendor/autoload.php';
+
+$head = new VueHeadSectionV3();
+
+echo '<html>'.$head.'<body><div id="app">
+<v-card>
+<v-card-title>Hi, Vuetify V'.VUETIFY_VERSION.'</v-card-title>
+</v-card>
+</div>
+<script>
+const { createApp } = Vue;
+const { createVuetify } = Vuetify;
+
+
+const vuetify = createVuetify({
+
+});
+const vue = createApp({
+    mixins: [],
+    data() {
+       return {
+
+       };
+    },
+    methods:{
+
+    },
+    computed:{
+
+    },
+    mounted:function() {
+
+    }
+});
+var app = vue.use(vuetify).mount(\'#app\');
+</script>
+</body></html>';