style chnages

convertingjsontovue.js

@@ -3,6 +3,8 @@ const path = require('path');
 const jsonDataPath = path.join(__dirname, 'data.json');
 const jsonData = require(jsonDataPath);
 const templateContent = generateTemplate(jsonData);
+const styles = generateStyles(jsonData.template,[]);
+
 const componentCode = `
 <template>
   ${templateContent}
@@ -16,6 +18,8 @@ export default {
 
 <style scoped>
 
+${styles}
+
 </style>
 `;
 const outputFilePath = path.join(__dirname, 'GeneratedComponent.vue');
@@ -48,13 +52,11 @@ function generateTemplate(data) {
 }
 function generateScriptContent(scriptData) {
   console.log('scriptData:', scriptData); 
-
   const scriptProperties = scriptData.exportDefault ? generateDataProperties(scriptData.exportDefault) : '{}';
   return `
   data() {
     return ${scriptProperties}
   },
-  // Add other Vue component options here
   `;
 }
 function generateDataProperties(data) {
@@ -68,4 +70,36 @@ function generateDataProperties(data) {
     })
     .join(', ');
   return `{${properties}}`;
-}
\ No newline at end of file
+}
+
+
+function generateStyles(data) {
+  function traverseStyles(data, parentSelector = '') {
+    let styles = '';
+
+    if (data.properties && data.properties.class && data.styles) {
+      const selector = parentSelector ? `${parentSelector} ${data.tagName}` : data.tagName;
+      const classList = data.properties.class.split(' ');
+
+      styles += `${selector} { ${generateStyleProperties(data.styles)} }\n`;
+    }
+
+    if (data.children) {
+      data.children.forEach(child => {
+        styles += traverseStyles(child, parentSelector ? `${parentSelector} ${data.tagName}` : data.tagName);
+      });
+    }
+
+    return styles;
+  }
+
+  function generateStyleProperties(styles) {
+    return Object.entries(styles || {})
+      .map(([property, value]) => `${property}: ${value};`)
+      .join(' ');
+  }
+
+  return traverseStyles(data);
+}
+
+

data.json

@@ -5,6 +5,10 @@
       "id": "about",
       "class": "section section-about section-about-1 pp-scrollable"
     },
+    "styles": {
+      "background-color": "#f0f0f0",
+      "padding": "20px"
+    },
     "children": [
       {
         "tagName": "assign",
@@ -39,7 +43,10 @@
                   {
                     "tagName": "div",
                     "properties": {
-                      "class": ["container", "about-me-text-container"]
+                      "class": [
+                        "container",
+                        "about-me-text-container"
+                      ]
                     },
                     "children": [
                       {
@@ -50,14 +57,18 @@
                         "properties": {
                           "v-if": "user.isAdmin"
                         },
-                        "children": ["This paragraph will be rendered if the user is an admin."]
+                        "children": [
+                          "This paragraph will be rendered if the user is an admin."
+                        ]
                       },
                       {
                         "tagName": "div",
                         "properties": {
                           "v-show": "showDetails"
                         },
-                        "children": ["This div will be shown if showDetails is true."]
+                        "children": [
+                          "This div will be shown if showDetails is true."
+                        ]
                       },
                       {
                         "tagName": "div",
@@ -67,7 +78,9 @@
                         "children": [
                           {
                             "tagName": "span",
-                            "children": ["{{ item }}"]
+                            "children": [
+                              "{{ item }}"
+                            ]
                           }
                         ]
                       }
@@ -88,9 +101,10 @@
         "user": {
           "isAdmin": false
         },
-        "items": []
+        "items": [],
+        "methods": {},
+        "created()": {}
       }
     }
   }
-}
-
+}
\ No newline at end of file