added multiple HTML buttons

Author: jchan444

src/components/composables/useExportComponent.js

@@ -48,6 +48,15 @@ export function useExportComponent() {
           "list-ul": ["<ul>", "</ul>"],
           input: ["<input />", ""],
           navbar: ["<nav>", "</nav>"],
+          header:["<header>", "</header>"],
+          footer:["<footer>", "</footer>"],
+          meta: ["<meta>", "</meta>"],
+          h1:["<h1>", "</h1>"],
+          h2:["<h2>", "</h2>"],
+          h3:["<h3>", "</h3>"],
+          h4:["<h4>", "</h4>"],
+          h5:["<h5>", "</h5>"],
+          h6:["<h6>", "</h6>"],
         };
         // function to loop through nested elements
         const writeNested = (childrenArray, indent) => {

src/components/left-sidebar/ComponentTab/ImportComponent.vue

@@ -127,6 +127,15 @@ export default {
         "list-ul": ["<ul>", "</ul>"],
         input: ["<input />", ""],
         navbar: ["<nav>", "</nav>"],
+        header:["<header>", "</header>"],
+        footer:["<footer>", "</footer>"],
+        meta: ["<meta>", "</meta>"],
+        h1:["<h1>", "</h1>"],
+        h2:["<h2>", "</h2>"],
+        h3:["<h3>", "</h3>"],
+        h4:["<h4>", "</h4>"],
+        h5:["<h5>", "</h5>"],
+        h6:["<h6>", "</h6>"],
       };
 
       

src/components/nav-buttons/ExportMenu.vue

@@ -129,6 +129,15 @@ export default {
         "list-ul": ["<ul>", "</ul>"],
         input: ["<input />", ""],
         navbar: ["<nav>", "</nav>"],
+        header:["<header>", "</header>"],
+        footer:["<footer>", "</footer>"],
+        meta: ["<meta>", "</meta>"],
+        h1:["<h1>", "</h1>"],
+        h2:["<h2>", "</h2>"],
+        h3:["<h3>", "</h3>"],
+        h4:["<h4>", "</h4>"],
+        h5:["<h5>", "</h5>"],
+        h6:["<h6>", "</h6>"],
       };
       // function to loop through nested elements
       function writeNested(childrenArray, indent) {

src/components/right-sidebar/CodeSnippet.vue

@@ -95,6 +95,15 @@ export default {
         "list-ul": ["<ul>", "</ul>"],
         input: ["<input />", ""],
         navbar: ["<nav>", "</nav>"],
+        header:["<header>", "</header>"],
+        footer:["<footer>", "</footer>"],
+        meta: ["<meta>", "</meta>"],
+        h1:["<h1>", "</h1>"],
+        h2:["<h2>", "</h2>"],
+        h3:["<h3>", "</h3>"],
+        h4:["<h4>", "</h4>"],
+        h5:["<h5>", "</h5>"],
+        h6:["<h6>", "</h6>"],
       };
 
       // Helper function that recursively iterates through the given html element's children and their children's children.

src/components/right-sidebar/ComponentDetails.vue

@@ -21,8 +21,6 @@ Description:
         <q-tab name="code" label="Code Snippet" class="label-text" />
         <q-tab name="html" label="HTML Elements" class="label-text" />
         <q-tab name="state" label="Component Properties" class="label-text" />
-        <!-- <q-tab name="actions" label="Component Actions" class="label-text" />
-        <q-tab name="props" label="Component Props" class="label-text" /> -->
       </q-tabs>
       <q-tab-panels v-model="tab" animated class="html-bg text-white">
         <q-tab-panel name="code">
@@ -206,5 +204,7 @@ i {
 
 .componentProperties {
   margin-bottom:2em;
+
 }
+
 </style>

src/index.template.html

@@ -9,10 +9,9 @@
     <meta name="msapplication-tap-highlight" content="no">
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
 
-    <script src="https://kit.fontawesome.com/647682ac21.js" crossorigin="anonymous" data-auto-add-css="false"></script>
+    <script src="https://kit.fontawesome.com/050e20b677.js" crossorigin="anonymous" data-auto-add-css="false"></script>
 
 
-
     <link rel="icon" type="image/png" href="statics/app-logo-128x128.png">
     <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">

src/store/state/htmlElementMap.js

@@ -9,7 +9,16 @@ const htmlElementMap = {
   'list-ol': ['<ol>', '</ol>'],
   'list-ul': ['<ul>', '</ul>'],
   input: ['<input />', ''],
-  navbar: ['<nav>', '</nav>']
+  navbar: ['<nav>', '</nav>'],
+  header:['<header>', '</header>'],
+  footer:['<footer>', '</footer>'],
+  meta: ['<meta>', '</meta>'],
+  h1:['<h1>', '</h1>'],
+  h2:['<h2>', '</h2>'],
+  h3:['<h3>', '</h3>'],
+  h4:['<h4>', '</h4>'],
+  h5:['<h5>', '</h5>'],
+  h6:['<h6>', '</h6>'],
 }
 
 export default htmlElementMap

src/store/state/icons.js

@@ -9,7 +9,17 @@ const icons = {
   'list-ol': 'fas fa-list-ol fa-lg',
   'list-ul': 'fas fa-list-ul fa-lg',
   input: 'fas fa-pen fa-lg',
-  navbar: 'fas fa-window-maximize fa-lg'
+  navbar: 'fas fa-window-maximize fa-lg',
+  header:['fa-solid fa-heading'],
+  footer:['fa-solid fa-shoe-prints'],
+  meta: ['fa-solid fa-book'],
+  h1:['fa-regular fa-1'],
+  h2:['fa-regular fa-2'],
+  h3:['fa-regular fa-3'],
+  h4:['fa-regular fa-4'],
+  h5:['fa-regular fa-5'],
+  h6:['fa-regular fa-6'],
 }
 
+
 export default icons

test/jest/__tests__/openProject.spec.js

@@ -28,7 +28,7 @@ describe("Test Suite for Image Upload", () => {
     const App = {}
     const app = createApp(App);
     app.use(Quasar, Vuex, { components });
-    const payload = {"icons":{"div":"far fa-square fa-lg","button":"fas fa-toggle-off fa-lg","form":"fab fa-wpforms fa-lg","img":"far fa-image fa-lg","link":"fas fa-link fa-lg","list":"fas fa-circle fa-lg","paragraph":"fas fa-paragraph fa-lg","list-ol":"fas fa-list-ol fa-lg","list-ul":"fas fa-list-ul fa-lg","input":"fas fa-pen fa-lg","navbar":"fas fa-window-maximize fa-lg"},
+    const payload = {"icons":{"div":"far fa-square fa-lg","button":"fas fa-toggle-off fa-lg","form":"fab fa-wpforms fa-lg","img":"far fa-image fa-lg","link":"fas fa-link fa-lg","list":"fas fa-circle fa-lg","paragraph":"fas fa-paragraph fa-lg","list-ol":"fas fa-list-ol fa-lg","list-ul":"fas fa-list-ul fa-lg","input":"fas fa-pen fa-lg","navbar":"fas fa-window-maximize fa-lg", "unicorn":"fa-duotone fa-alicorn"},
         "htmlElementMap":{"div":["<div>","</div>"],"button":["<button>","</button>"],"form":["<form>","</form>"],"img":["<img>",""],"link":["<a href=\"#\"/>",""],"list":["<li>","</li>"],"paragraph":["<p>","</p>"],"list-ol":["<ol>","</ol>"],"list-ul":["<ul>","</ul>"],"input":["<input />",""],"navbar":["<nav>","</nav>"]},
         "componentMap":{"App":{"componentName":"App","children":["HomeView","b"],"htmlList":[]},
             "HomeView":{"componentName":"HomeView","children":["a"],"htmlList":[]},