Fix issue load Article Widget in front-end editor

assets/vendor/manager/src/App.vue

@@ -4,13 +4,18 @@ import Container from "./components/Container.vue";
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircle, faArrowsLeftRight, faTrash, faDownload } from "@fortawesome/free-solid-svg-icons";
 import { onBeforeMount, provide, ref } from "vue";
+import { Tooltip, Toast, Modal } from 'bootstrap/js/index.esm'
+import 'bootstrap/scss/bootstrap.scss'
+import './assets/base.scss'
 library.add(faCircle, faArrowsLeftRight, faTrash, faDownload);
 const astroid_config = JSON.parse(document.getElementById("astroid-script-options").innerHTML);
 const theme = ref('light');
 provide('theme', theme);
 provide('constant', astroid_config.astroid_lib);
 provide('language', astroid_config.astroid_lang);
-
+window.Tooltip = Tooltip;
+window.Toast = Toast;
+window.Modal = Modal;
 onBeforeMount(()=>{
   const colorMode = getCookie('astroid_colormode');
   if (colorMode) {

assets/vendor/manager/src/Article.vue

@@ -3,6 +3,7 @@ import { onBeforeMount, ref, provide } from 'vue';
 import axios from "axios";
 import { faCircle, faArrowsLeftRight, faTrash, faDownload } from "@fortawesome/free-solid-svg-icons";
 import { library } from '@fortawesome/fontawesome-svg-core'
+import './assets/article_data.scss'
 import Modal from "./components/helpers/Modal.vue";
 library.add(faCircle, faArrowsLeftRight, faTrash, faDownload);
 const props = defineProps(['widget_json_id']);
@@ -56,7 +57,7 @@ function saveElement(params) {
 }
 </script>
 <template>
-    <div class="article-layout-data row row-cols-xl-4 row-cols-lg-3 row-cols-md-2 row-cols-sm-1 row-cols-2">
+    <div class="article-layout-data row row-cols-xl-4 row-cols-lg-3 row-cols-md-2 row-cols-sm-1 row-cols-2 g-4">
         <div v-for="widget in widgets">
             <div class="article-widget card card-body border">
                 <div class="d-flex justify-content-between">

assets/vendor/manager/src/article.js

@@ -5,7 +5,6 @@ import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'
 import "vue-search-select/dist/VueSearchSelect.css"
 import 'vue-color-kit/dist/vue-color-kit.css'
 import 'quill/dist/quill.snow.css'
-import './assets/article_data.scss'
 let as_widgets = document.querySelectorAll('.as-article-widget-data');
 as_widgets.forEach(as_widget => {
     let app = createApp(Article, {

assets/vendor/manager/src/assets/article_data.scss

@@ -20,13 +20,9 @@
         }
     }
 }
-
-.as-article-widget-data {
+.admin .as-article-widget-data {
     --bs-body-bg: var(--body-bg);
     --bs-border-color: var(--border-color);
-    .row {
-        --gutter-y: 1rem;
-    }
     .astroid-heading-line {
         font-size: 1.2rem;
         >::before, >::after {

assets/vendor/manager/src/main.js

@@ -1,24 +1,41 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import 'bootstrap/scss/bootstrap.scss'
+import Article from './Article.vue'
 import "vue-search-select/dist/VueSearchSelect.css"
 import 'vue-color-kit/dist/vue-color-kit.css'
 import 'quill/dist/quill.snow.css'
-import { Tooltip, Toast, Modal } from 'bootstrap/js/index.esm'
 import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'
 import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'
-import './assets/base.scss'
-window.Tooltip = Tooltip;
-window.Toast = Toast;
-window.Modal = Modal;
-const app = createApp(App);
-app.use(VueMonacoEditorPlugin, {
-    paths: {
-        // The default CDN config
-        vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
-    },
-});
-app.component('font-awesome-icon', FontAwesomeIcon);
-app.component('font-awesome-layers', FontAwesomeLayers);
-app.component('font-awesome-layers-text', FontAwesomeLayersText);
-app.mount('#astroid-app')
+let astroid_app = document.getElementById('astroid-app');
+let as_widgets = document.querySelectorAll('.as-article-widget-data');
+if (typeof(astroid_app) !== 'undefined' && astroid_app !== null)
+{
+    const app = createApp(App);
+    app.use(VueMonacoEditorPlugin, {
+        paths: {
+            // The default CDN config
+            vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
+        },
+    });
+    app.component('font-awesome-icon', FontAwesomeIcon);
+    app.component('font-awesome-layers', FontAwesomeLayers);
+    app.component('font-awesome-layers-text', FontAwesomeLayersText);
+    app.mount('#astroid-app')
+}
+else if (as_widgets.length > 0) {
+    as_widgets.forEach(as_widget => {
+        let app = createApp(Article, {
+            widget_json_id : as_widget.id
+        });
+        app.use(VueMonacoEditorPlugin, {
+            paths: {
+                // The default CDN config
+                vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
+            },
+        });
+        app.component('font-awesome-icon', FontAwesomeIcon);
+        app.component('font-awesome-layers', FontAwesomeLayers);
+        app.component('font-awesome-layers-text', FontAwesomeLayersText);
+        app.mount('#'+as_widget.id);
+    });
+}

framework/fields/astroidlayoutdata.php

@@ -34,10 +34,17 @@ class JFormFieldAstroidLayoutData extends FormField {
     protected $ordering;
 
     protected function getInput() {
-        $params = new Registry();
-        $app = Factory::getApplication();
-        if ($app->input->get('view', '') == 'article') {
-            $id = $app->input->get('id');
+        $params =   new Registry();
+        $app    =   Factory::getApplication();
+        $view   =   $app->input->get('view', '');
+        if ($app->input->get('option', '') == 'com_content'
+            && in_array($view, ['article', 'form'])
+            && $app->input->get('layout', '') == 'edit') {
+            $id     =   match ($view) {
+                'article' => $app->input->get('id'),
+                'form' => $app->input->get('a_id'),
+                default => ''
+            };
             if (empty($id)) {
                 return Text::_('ASTROID_ARTICLE_NOTICE_EMPTY_ID');
             }
@@ -71,7 +78,9 @@ protected function getInput() {
                 if (!isset($sublayout['data']) || !$sublayout['data']) {
                     return Text::_('ASTROID_ARTICLE_WARNING_LAYOUT_EMPTY');
                 }
-                define('ASTROID_TEMPLATE_NAME', $article_layout->template);
+                if (!defined('ASTROID_TEMPLATE_NAME')) {
+                    define('ASTROID_TEMPLATE_NAME', $article_layout->template);
+                }
                 $widgets    =   array();
                 $constant   =   Helper\Constants::manager_configs('article_data');
                 $form_template  =   $constant['form_template'];
@@ -102,9 +111,9 @@ protected function getInput() {
                 $html   =   '<script type="application/json" id="'.$this->id.'_json">'.json_encode($json).'</script>';
                 $html   .=  '<div class="as-article-widget-data" id="'.$this->id.'"></div>';
                 $wa = Factory::getApplication()->getDocument()->getWebAssetManager();
-                $wa->registerAndUseStyle('astroid.article.widget.data', "media/astroid/assets/vendor/articlelayout/dist/index.css");
+                $wa->registerAndUseStyle('astroid.article.widget.data', "media/astroid/assets/vendor/manager/dist/index.css");
                 $wa->useScript('bootstrap.tab');
-                $wa->registerAndUseScript('astroid.article.widget.data', 'media/astroid/assets/vendor/articlelayout/dist/index.js', ['relative' => true, 'version' => 'auto'], ['type' => 'module']);
+                $wa->registerAndUseScript('astroid.article.widget.data', 'media/astroid/assets/vendor/manager/dist/index.js', ['relative' => true, 'version' => 'auto'], ['type' => 'module']);
                 return $html;
             }
         }

framework/library/astroid/Element/Element.php

@@ -44,7 +44,7 @@ public function _content()
         $app            = Factory::getApplication();
         $option         = $app->input->get('option', '', 'RAW');
         $view           = $app->input->get('view', '', 'RAW');
-        $id             = $app->input->get('id', null, 'RAW');
+        $id             = (int) $app->input->get('id', null, 'RAW');
         if ($option === 'com_content' && $view === 'article' && !empty($id)) {
             $template_name = Framework::getTemplate()->template;
             $layout_path = Path::clean(JPATH_SITE . "/media/templates/site/$template_name/astroid/article_widget_data/". $id . '_' . $this->unqid . '.json');