@mframework/ui 0.1.0-beta.3 → 0.1.0-beta.5

package/dist/runtime/plugins/builder.js

@@ -1,311 +1,336 @@
-import { defineNuxtPlugin } from 'nuxt/app';
-import 'grapesjs/dist/css/grapes.min.css';
-import grapesjs from 'grapesjs';
+import {
+  defineNuxtPlugin
+} from "nuxt/app";
+import "grapesjs/dist/css/grapes.min.css";
+import grapesjs from "grapesjs";
 export default defineNuxtPlugin((nuxtApp) => {
-    if (process.server)
-        return;
-    const mount = () => {
-        const el = document.querySelector('#gjs');
-        if (!el)
-            return null;
-        const editor = grapesjs.init({
-            container: `${el}`,
-            fromElement: true,
-            height: '100%',
-            width: 'auto',
-            storageManager: {
-                type: 'local',
-                autosave: true,
-                autoload: true,
-                stepsBeforeSave: 1,
-                options: {
-                    local: {
-                        key: 'gjsProject'
-                    }
-                }
-            },
-            // Avoid any default panel
-            layerManager: {
-                appendTo: '.layers-container',
-            },
-            mediaCondition: 'min-width', // default is `max-width`
-            deviceManager: {
-                devices: [{
-                        name: 'Desktop',
-                        width: '', // default size
-                        widthMedia: '1024px', // this value will be used in CSS @media
-                    },
-                    {
-                        name: 'Mobile',
-                        width: '320px', // this value will be used on canvas width
-                        widthMedia: '480px', // this value will be used in CSS @media
-                    },
-                ],
-            },
-            blockManager: {
-                appendTo: '#blocks',
-                blocks: [{
-                        id: 'section', // id is mandatory
-                        label: '<b>Section</b>', // You can use HTML/SVG inside labels
-                        category: 'Basic',
-                        attributes: {
-                            class: 'gjs-block-section'
-                        },
-                        content: {
-                            tagName: 'div',
-                            draggable: false,
-                            attributes: {
-                                'some-attribute': 'some-value'
-                            },
-                            components: [{
-                                    tagName: 'span',
-                                    content: '<b>Some static content</b>',
-                                },
-                                {
-                                    tagName: 'div',
-                                    // use `content` for static strings, `components` string will be parsed
-                                    // and transformed in Components
-                                    components: '<span>HTML at some point</span>',
-                                },
-                            ],
-                        },
-                    },
-                    {
-                        id: 'text',
-                        label: 'Text',
-                        content: '<div data-gjs-type="text">Insert your text here</div>',
-                    },
-                    {
-                        id: 'image',
-                        label: 'Image',
-                        // Select the component once it's dropped
-                        select: true,
-                        // You can pass components as a JSON instead of a simple HTML string,
-                        // in this case we also use a defined component type `image`
-                        content: {
-                            type: 'image'
-                        },
-                        // This triggers `active` event on dropped components and the `image`
-                        // reacts by opening the AssetManager
-                        activate: true,
-                    },
-                ],
-            },
-            panels: {
-                defaults: [{
-                        id: 'layers',
-                        el: '.panel__right',
-                        // Make the panel resizable
-                        resizable: {
-                            maxDim: 350,
-                            minDim: 200,
-                            tc: false, // Top handler
-                            cl: true, // Left handler
-                            cr: false, // Right handler
-                            bc: false, // Bottom handler
-                            // Being a flex child we need to change `flex-basis` property
-                            // instead of the `width` (default)
-                            keyWidth: 'flex-basis',
-                        },
-                    },
-                    {
-                        id: 'panel-switcher',
-                        el: '.panel__switcher',
-                        buttons: [{
-                                id: 'show-layers',
-                                active: true,
-                                label: 'Layers',
-                                command: 'show-layers',
-                                // Once activated disable the possibility to turn it off
-                                togglable: false,
-                            },
-                            {
-                                id: 'show-style',
-                                active: true,
-                                label: 'Styles',
-                                command: 'show-styles',
-                                togglable: false,
-                            },
-                            {
-                                id: 'show-traits',
-                                active: true,
-                                label: 'Traits',
-                                command: 'show-traits',
-                                togglable: false,
-                            },
-                        ],
-                    },
-                    {
-                        id: 'panel-devices',
-                        el: '.panel__devices',
-                        buttons: [{
-                                id: 'device-desktop',
-                                label: 'D',
-                                command: 'set-device-desktop',
-                                active: true,
-                                togglable: false,
-                            },
-                            {
-                                id: 'device-mobile',
-                                label: 'M',
-                                command: 'set-device-mobile',
-                                togglable: false,
-                            },
-                        ],
-                    },
-                ],
-            },
-            // The Selector Manager allows to assign classes and
-            // different states (eg. :hover) on components.
-            // Generally, it's used in conjunction with Style Manager
-            // but it's not mandatory
-            selectorManager: {
-                appendTo: '.styles-container',
-            },
-            styleManager: {
-                appendTo: '.styles-container',
-                sectors: [{
-                        name: 'Dimension',
-                        open: false,
-                        // Use built-in properties
-                        buildProps: ['width', 'min-height', 'padding'],
-                        // Use `properties` to define/override single property
-                        properties: [{
-                                // Type of the input,
-                                // options: integer | radio | select | color | slider | file | composite | stack
-                                type: 'integer',
-                                name: 'The width', // Label for the property
-                                property: 'width', // CSS property (if buildProps contains it will be extended)
-                                units: ['px', '%'], // Units, available only for 'integer' types
-                                defaults: 'auto', // Default value
-                                min: 0, // Min value, available only for 'integer' types
-                            },],
-                    },
-                    {
-                        name: 'Extra',
-                        open: false,
-                        buildProps: ['background-color', 'box-shadow', 'custom-prop'],
-                        properties: [{
-                                id: 'custom-prop',
-                                name: 'Custom Label',
-                                property: 'font-size',
-                                type: 'select',
-                                defaults: '32px',
-                                // List of options, available only for 'select' and 'radio'  types
-                                options: [{
-                                        id: 'tiny',
-                                        value: '12px',
-                                        name: 'Tiny'
-                                    },
-                                    {
-                                        id: 'medium',
-                                        value: '18px',
-                                        name: 'Medium'
-                                    },
-                                    {
-                                        id: 'big',
-                                        value: '32px',
-                                        name: 'Big'
-                                    },
-                                ],
-                            },],
-                    },
-                ],
-            },
-        });
-        // Define commands
-        editor.Commands.add('show-layers', {
-            getRowEl(editor) {
-                return editor.getContainer().closest('.editor-row');
-            },
-            getLayersEl(row) {
-                return row.querySelector('.layers-container');
-            },
-            run(editor, sender) {
-                const lmEl = this.getLayersEl(this.getRowEl(editor));
-                lmEl.style.display = '';
-            },
-            stop(editor, sender) {
-                const lmEl = this.getLayersEl(this.getRowEl(editor));
-                lmEl.style.display = 'none';
-            },
-        });
-        editor.Commands.add('show-styles', {
-            getRowEl(editor) {
-                return editor.getContainer().closest('.editor-row');
+  if (process.server) return;
+  const mount = () => {
+    const el = document.querySelector("#gjs");
+    if (!el) return null;
+    const editor = grapesjs.init({
+      container: `${el}`,
+      fromElement: true,
+      height: "100%",
+      width: "auto",
+      storageManager: {
+        type: "local",
+        autosave: true,
+        autoload: true,
+        stepsBeforeSave: 1,
+        options: {
+          local: {
+            key: "gjsProject"
+          }
+        }
+      },
+      // Avoid any default panel
+      layerManager: {
+        appendTo: ".layers-container"
+      },
+      mediaCondition: "min-width",
+      // default is `max-width`
+      deviceManager: {
+        devices: [
+          {
+            name: "Desktop",
+            width: "",
+            // default size
+            widthMedia: "1024px"
+            // this value will be used in CSS @media
+          },
+          {
+            name: "Mobile",
+            width: "320px",
+            // this value will be used on canvas width
+            widthMedia: "480px"
+            // this value will be used in CSS @media
+          }
+        ]
+      },
+      blockManager: {
+        appendTo: "#blocks",
+        blocks: [
+          {
+            id: "section",
+            // id is mandatory
+            label: "<b>Section</b>",
+            // You can use HTML/SVG inside labels
+            category: "Basic",
+            attributes: {
+              class: "gjs-block-section"
             },
-            getStyleEl(row) {
-                return row.querySelector('.styles-container');
-            },
-            run(editor, sender) {
-                const smEl = this.getStyleEl(this.getRowEl(editor));
-                smEl.style.display = '';
-            },
-            stop(editor, sender) {
-                const smEl = this.getStyleEl(this.getRowEl(editor));
-                smEl.style.display = 'none';
-            },
-        });
-        editor.Commands.add('show-traits', {
-            getTraitsEl(editor) {
-                const row = editor.getContainer().closest('.editor-row');
-                return row.querySelector('.traits-container');
-            },
-            run(editor, sender) {
-                this.getTraitsEl(editor).style.display = '';
-            },
-            stop(editor, sender) {
-                this.getTraitsEl(editor).style.display = 'none';
-            },
-        });
-        editor.Panels.addPanel({
-            id: 'panel-top',
-            el: '.panel__top',
-        });
-        editor.Panels.addPanel({
-            id: 'basic-actions',
-            el: '.panel__basic-actions',
-            buttons: [{
-                    id: 'visibility',
-                    active: true, // active by default
-                    className: 'btn-toggle-borders',
-                    label: '<u>B</u>',
-                    command: 'sw-visibility', // Built-in command
+            content: {
+              tagName: "div",
+              draggable: false,
+              attributes: {
+                "some-attribute": "some-value"
+              },
+              components: [
+                {
+                  tagName: "span",
+                  content: "<b>Some static content</b>"
                 },
                 {
-                    id: 'export',
-                    className: 'btn-open-export',
-                    label: 'Exp',
-                    command: 'export-template',
-                    context: 'export-template', // For grouping context of buttons from the same panel
+                  tagName: "div",
+                  // use `content` for static strings, `components` string will be parsed
+                  // and transformed in Components
+                  components: "<span>HTML at some point</span>"
+                }
+              ]
+            }
+          },
+          {
+            id: "text",
+            label: "Text",
+            content: '<div data-gjs-type="text">Insert your text here</div>'
+          },
+          {
+            id: "image",
+            label: "Image",
+            // Select the component once it's dropped
+            select: true,
+            // You can pass components as a JSON instead of a simple HTML string,
+            // in this case we also use a defined component type `image`
+            content: {
+              type: "image"
+            },
+            // This triggers `active` event on dropped components and the `image`
+            // reacts by opening the AssetManager
+            activate: true
+          }
+        ]
+      },
+      panels: {
+        defaults: [
+          {
+            id: "layers",
+            el: ".panel__right",
+            // Make the panel resizable
+            resizable: {
+              maxDim: 350,
+              minDim: 200,
+              tc: false,
+              // Top handler
+              cl: true,
+              // Left handler
+              cr: false,
+              // Right handler
+              bc: false,
+              // Bottom handler
+              // Being a flex child we need to change `flex-basis` property
+              // instead of the `width` (default)
+              keyWidth: "flex-basis"
+            }
+          },
+          {
+            id: "panel-switcher",
+            el: ".panel__switcher",
+            buttons: [
+              {
+                id: "show-layers",
+                active: true,
+                label: "Layers",
+                command: "show-layers",
+                // Once activated disable the possibility to turn it off
+                togglable: false
+              },
+              {
+                id: "show-style",
+                active: true,
+                label: "Styles",
+                command: "show-styles",
+                togglable: false
+              },
+              {
+                id: "show-traits",
+                active: true,
+                label: "Traits",
+                command: "show-traits",
+                togglable: false
+              }
+            ]
+          },
+          {
+            id: "panel-devices",
+            el: ".panel__devices",
+            buttons: [
+              {
+                id: "device-desktop",
+                label: "D",
+                command: "set-device-desktop",
+                active: true,
+                togglable: false
+              },
+              {
+                id: "device-mobile",
+                label: "M",
+                command: "set-device-mobile",
+                togglable: false
+              }
+            ]
+          }
+        ]
+      },
+      // The Selector Manager allows to assign classes and
+      // different states (eg. :hover) on components.
+      // Generally, it's used in conjunction with Style Manager
+      // but it's not mandatory
+      selectorManager: {
+        appendTo: ".styles-container"
+      },
+      styleManager: {
+        appendTo: ".styles-container",
+        sectors: [
+          {
+            name: "Dimension",
+            open: false,
+            // Use built-in properties
+            buildProps: ["width", "min-height", "padding"],
+            // Use `properties` to define/override single property
+            properties: [{
+              // Type of the input,
+              // options: integer | radio | select | color | slider | file | composite | stack
+              type: "integer",
+              name: "The width",
+              // Label for the property
+              property: "width",
+              // CSS property (if buildProps contains it will be extended)
+              units: ["px", "%"],
+              // Units, available only for 'integer' types
+              defaults: "auto",
+              // Default value
+              min: 0
+              // Min value, available only for 'integer' types
+            }]
+          },
+          {
+            name: "Extra",
+            open: false,
+            buildProps: ["background-color", "box-shadow", "custom-prop"],
+            properties: [{
+              id: "custom-prop",
+              name: "Custom Label",
+              property: "font-size",
+              type: "select",
+              defaults: "32px",
+              // List of options, available only for 'select' and 'radio'  types
+              options: [
+                {
+                  id: "tiny",
+                  value: "12px",
+                  name: "Tiny"
                 },
                 {
-                    id: 'show-json',
-                    className: 'btn-show-json',
-                    label: 'JSON',
-                    context: 'show-json',
-                    command(editor) {
-                        editor.Modal.setTitle('Components JSON')
-                            .setContent(`<textarea style="width:100%; height: 250px;">
-            ${JSON.stringify(editor.getComponents())}
-          </textarea>`)
-                            .open();
-                    },
+                  id: "medium",
+                  value: "18px",
+                  name: "Medium"
                 },
-            ],
-        });
-        editor.Commands.add('set-device-desktop', {
-            run: (editor) => editor.setDevice('Desktop'),
-        });
-        editor.Commands.add('set-device-mobile', {
-            run: (editor) => editor.setDevice('Mobile'),
-        });
-        editor.on('change:device', () => console.log('Current device: ', editor.getDevice()));
-        // Set initial device as Mobile
-        editor.setDevice('Mobile');
-        nuxtApp.provide('grapesStudio', editor);
-        return editor;
-    };
-    // Auto‑mount when page loads
-    window.addEventListener('DOMContentLoaded', mount);
+                {
+                  id: "big",
+                  value: "32px",
+                  name: "Big"
+                }
+              ]
+            }]
+          }
+        ]
+      }
+    });
+    editor.Commands.add("show-layers", {
+      getRowEl(editor2) {
+        return editor2.getContainer().closest(".editor-row");
+      },
+      getLayersEl(row) {
+        return row.querySelector(".layers-container");
+      },
+      run(editor2, sender) {
+        const lmEl = this.getLayersEl(this.getRowEl(editor2));
+        lmEl.style.display = "";
+      },
+      stop(editor2, sender) {
+        const lmEl = this.getLayersEl(this.getRowEl(editor2));
+        lmEl.style.display = "none";
+      }
+    });
+    editor.Commands.add("show-styles", {
+      getRowEl(editor2) {
+        return editor2.getContainer().closest(".editor-row");
+      },
+      getStyleEl(row) {
+        return row.querySelector(".styles-container");
+      },
+      run(editor2, sender) {
+        const smEl = this.getStyleEl(this.getRowEl(editor2));
+        smEl.style.display = "";
+      },
+      stop(editor2, sender) {
+        const smEl = this.getStyleEl(this.getRowEl(editor2));
+        smEl.style.display = "none";
+      }
+    });
+    editor.Commands.add("show-traits", {
+      getTraitsEl(editor2) {
+        const row = editor2.getContainer().closest(".editor-row");
+        return row.querySelector(".traits-container");
+      },
+      run(editor2, sender) {
+        this.getTraitsEl(editor2).style.display = "";
+      },
+      stop(editor2, sender) {
+        this.getTraitsEl(editor2).style.display = "none";
+      }
+    });
+    editor.Panels.addPanel({
+      id: "panel-top",
+      el: ".panel__top"
+    });
+    editor.Panels.addPanel({
+      id: "basic-actions",
+      el: ".panel__basic-actions",
+      buttons: [
+        {
+          id: "visibility",
+          active: true,
+          // active by default
+          className: "btn-toggle-borders",
+          label: "<u>B</u>",
+          command: "sw-visibility"
+          // Built-in command
+        },
+        {
+          id: "export",
+          className: "btn-open-export",
+          label: "Exp",
+          command: "export-template",
+          context: "export-template"
+          // For grouping context of buttons from the same panel
+        },
+        {
+          id: "show-json",
+          className: "btn-show-json",
+          label: "JSON",
+          context: "show-json",
+          command(editor2) {
+            editor2.Modal.setTitle("Components JSON").setContent(
+              `<textarea style="width:100%; height: 250px;">
+            ${JSON.stringify(editor2.getComponents())}
+          </textarea>`
+            ).open();
+          }
+        }
+      ]
+    });
+    editor.Commands.add("set-device-desktop", {
+      run: (editor2) => editor2.setDevice("Desktop")
+    });
+    editor.Commands.add("set-device-mobile", {
+      run: (editor2) => editor2.setDevice("Mobile")
+    });
+    editor.on("change:device", () => console.log("Current device: ", editor.getDevice()));
+    editor.setDevice("Mobile");
+    nuxtApp.provide("grapesStudio", editor);
+    return editor;
+  };
+  window.addEventListener("DOMContentLoaded", mount);
 });

package/dist/runtime/plugins/fontawesome.d.ts

@@ -1,3 +0,0 @@
-import '@fortawesome/fontawesome-free/css/all.min.css';
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
-export default _default;

package/dist/runtime/plugins/fontawesome.js

@@ -1,9 +1,9 @@
-import { defineNuxtPlugin } from 'nuxt/app';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { fas } from '@fortawesome/free-solid-svg-icons';
-import '@fortawesome/fontawesome-free/css/all.min.css';
+import { defineNuxtPlugin } from "nuxt/app";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import "@fortawesome/fontawesome-free/css/all.min.css";
 export default defineNuxtPlugin((nuxtApp) => {
-    library.add(fas);
-    nuxtApp.vueApp.component('Fa', FontAwesomeIcon);
+  library.add(fas);
+  nuxtApp.vueApp.component("Fa", FontAwesomeIcon);
 });

package/dist/runtime/plugins/formkit.d.ts

@@ -1,3 +0,0 @@
-import '@formkit/themes/genesis';
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
-export default _default;