Create a Real-World Example #7144

Author: tobiu

.github/epic-string-based-templates.md

@@ -163,7 +163,7 @@ After the feature is functionally complete and well-tested, refactor the new mod
 
 ### 12. Create a Real-World Example
 
-**Status: To Do**
+**Status: Done**
 
 **Description:**
 To showcase the new feature and provide a practical learning resource, create a new, simple example application that is built using a functional component with a string-based template. This will serve as a clear, working demonstration for developers.

examples/functional/templateComponent/Component.mjs

@@ -16,16 +16,46 @@ export default defineComponent({
          * @member {String} greeting_='Hello'
          * @reactive
          */
-        greeting_: 'Hello'
+        greeting_: 'Hello',
+        /**
+         * @member {String} jobTitle_='Neo.mjs Developer'
+         * @reactive
+         */
+        jobTitle_: 'Neo.mjs Developer'
     },
 
     createTemplateVdom(config) {
-        const [name, setName] = useConfig('World');
+        const [isActive, setIsActive] = useConfig(true);
+
+        useEvent('click', () => setIsActive(prev => !prev));
+
+        const cardStyle = {
+            border    : '1px solid #eee',
+            borderRadius: '8px',
+            padding   : '16px',
+            textAlign : 'center',
+            cursor    : 'pointer',
+            boxShadow : '0 2px 4px rgba(0,0,0,0.1)'
+        };
 
-        useEvent('click', () => setName(prev => prev === 'Neo' ? 'World' : 'Neo'));
+        const statusStyle = {
+            display      : 'inline-block',
+            padding      : '4px 8px',
+            borderRadius : '12px',
+            color        : 'white',
+            backgroundColor: isActive ? '#28a745' : '#dc3545',
+            fontSize     : '12px',
+            marginTop    : '10px'
+        };
 
         return html`
-            <div>${config.greeting}, ${name}</div>
+            <div style="${cardStyle}">
+                <h2>${config.greeting}, Neo!</h2>
+                <p>${config.jobTitle}</p>
+                <div style="${statusStyle}">
+                    ${isActive ? 'Active' : 'Inactive'}
+                </div>
+            </div>
         `
     }
 });

examples/functional/templateComponent/MainContainer.mjs

@@ -24,6 +24,13 @@ class MainContainer extends ConfigurationViewport {
             listeners : {change: me.onConfigChange.bind(me, 'greeting')},
             style     : {marginTop: '10px'},
             value     : me.exampleComponent.greeting
+        }, {
+            module    : TextField,
+            clearable : true,
+            labelText : 'jobTitle',
+            listeners : {change: me.onConfigChange.bind(me, 'jobTitle')},
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.jobTitle
         }]
     }