SAP · hardl · Jun 13, 2024 · Jun 13, 2024 · Jun 13, 2024 · Jun 14, 2024
@@ -0,0 +1,37 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+/.nyc_output
+
+# production
+/build
+/public
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+.idea
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.vscode/
+/public*/luigi*.css
+/public*/luigi*.js
+/public*/*.woff
+/public*/*.woff2
+/public*/*.ttf
+
+# maps
+*.map
+
+/dev-tools/simple-app
@@ -0,0 +1,5 @@
+# Luigi Modular Core
+
+## Overview
+
+Luigi Core, headless, modular. WIP
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Luigi Headless</title>
+
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"
+    />
+
+    <script
+      src="https://ui5-community.github.io/ui5-webcomponents-bundle/assets/bundle.esm.js"
+      type="module"
+    ></script>
+    <script src="https://unpkg.com/@luigi-project/container" type="module"></script>
+
+    <script data-ui5-config type="application/json">
+      { "theme": "sap_horizon" }
+    </script>
+    <link rel="stylesheet" href="/luigi-ui/lui.css" />
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script src="/public/luigi.js"></script>
+    <script src="/luigi-ui/lui-ui5wc.js"></script>
+    <script src="/luigi-config.js"></script>
+
+    <div class="tool-layout">
+      <ui5-shellbar>
+        <!-- <ui5-button icon="menu" slot="startButton" id="toggle"></ui5-button>
+        <ui5-avatar slot="profile" icon="customer"></ui5-avatar>
+        <img
+          slot="logo"
+          src="https://sap.github.io/ui5-webcomponents/images/sap-logo-svg.svg"
+        />
+        <ui5-shellbar-item icon="area-chart" text="Node"></ui5-shellbar-item> -->
+      </ui5-shellbar>
+
+      <ui5-side-navigation>
+        <!--<ui5-side-navigation-item
+          text="Home"
+          icon="home"
+        ></ui5-side-navigation-item>
+        <ui5-side-navigation-item text="People" expanded icon="group">
+          <ui5-side-navigation-sub-item
+            text="From My Team"
+          ></ui5-side-navigation-sub-item>
+          <ui5-side-navigation-sub-item
+            text="From Other Team"
+          ></ui5-side-navigation-sub-item>
+        </ui5-side-navigation-item>
+        <ui5-side-navigation-item
+          text="Locations"
+          icon="locate-me"
+          selected
+        ></ui5-side-navigation-item>
+        <ui5-side-navigation-item text="Events" icon="calendar">
+          <ui5-side-navigation-sub-item
+            text="Local"
+          ></ui5-side-navigation-sub-item>
+          <ui5-side-navigation-sub-item
+            text="Others"
+          ></ui5-side-navigation-sub-item>
+          <ui5-side-navigation-sub-item
+            text="External Link"
+            href="https://sap.com"
+            target="_blank"
+          >
+          </ui5-side-navigation-sub-item>
+        </ui5-side-navigation-item>
+        <ui5-side-navigation-item
+          slot="fixedItems"
+          text="Useful Links"
+          icon="chain-link"
+        >
+          <ui5-side-navigation-sub-item
+            text="External Link"
+            href="https://sap.com"
+            target="_blank"
+          >
+          </ui5-side-navigation-sub-item>
+        </ui5-side-navigation-item>
+        <ui5-side-navigation-item
+          slot="fixedItems"
+          text="History"
+          icon="history"
+        >
+        </ui5-side-navigation-item>-->
+      </ui5-side-navigation>
+
+      <div class="content"></div>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,42 @@
+window.onload = () => {
+  window.Luigi.setConfig({
+    navigation: {
+      nodes: [
+        {
+          pathSegment: 'home',
+          icon: 'home',
+          viewUrl: '/microfrontend.html#home',
+          children: [
+            {
+              pathSegment: 'c1',
+              label: 'MFE1',
+              icon: 'group',
+              viewUrl: '/microfrontend.html#child1'
+            },
+            {
+              pathSegment: 'c2',
+              label: 'MFE2',
+              icon: 'calendar',
+              viewUrl: '/microfrontend.html#child2'
+            }
+          ]
+        },
+        {
+          pathSegment: 'help',
+          icon: 'sys-help',
+          viewUrl: '/microfrontend.html#help'
+        }
+      ]
+    },
+    routing: {
+      useHashRouting: true
+    },
+    settings: {
+      responsiveNavigation: 'Fiori3',
+      header: {
+        title: 'Luigi Headless POC',
+        logo: 'https://fiddle.luigi-project.io/img/luigi.svg'
+      }
+    }
+  });
+};
@@ -0,0 +1,80 @@
+const connector = {
+  renderTopNav: topNavData => {
+    const shellbar = document.querySelector('.tool-layout > ui5-shellbar');
+    shellbar.setAttribute('primary-title', topNavData.appTitle);
+    let html = '';
+    html += '<ui5-button icon="menu" slot="startButton" id="toggle"></ui5-button>';
+    if (topNavData.logo) {
+      html += `<img
+          slot="logo"
+          src="${topNavData.logo}"
+        />`;
+    }
+    (topNavData.topNodes || []).forEach(n => {
+      html += `<ui5-shellbar-item icon="${n.icon}" text="${n.label}" luigi-route="${n.pathSegment}"></ui5-shellbar-item>`;
+    });
+    shellbar.innerHTML = html;
+    const items = shellbar.querySelectorAll('ui5-shellbar-item');
+    if (items) {
+      items.forEach(item => {
+        item.addEventListener('click', () => {
+          Luigi.navigation().navigate(item.getAttribute('luigi-route'));
+        });
+      });
+    }
+    //...
+  },
+  renderLeftNav: leftNavData => {
+    const sidenav = document.querySelector('ui5-side-navigation');
+    const burger = document.getElementById('toggle');
+    if (sidenav && burger) {
+      if (!burger._clickListener) {
+        burger._clickListener = () => {
+          sidenav.toggleAttribute('collapsed');
+        };
+        burger.addEventListener('click', burger._clickListener);
+      }
+
+      let html = '';
+
+      if (leftNavData.items) {
+        leftNavData.items.forEach(item => {
+          if (item.node) {
+            html += `<ui5-side-navigation-item
+                                    text="${item.node.label}"
+                                    icon="${item.node.icon}"
+                                    luigi-route="${leftNavData.basePath + '/' + item.node.pathSegment}"
+                                    ${item.selected ? 'selected' : ''}
+                                    ></ui5-side-navigation-item>`;
+          } else if (item.category) {
+            // tbd
+          }
+        });
+      }
+
+      document.body.classList.toggle('left-nav-hidden', !(leftNavData.items?.length > 0));
+      sidenav.innerHTML = html;
+
+      const items = sidenav.querySelectorAll('[luigi-route]');
+      if (items) {
+        items.forEach(item => {
+          item.addEventListener('click', () => {
+            Luigi.navigation().navigate(item.getAttribute('luigi-route'));
+          });
+        });
+      }
+    }
+  },
+  renderContent: navNode => {
+    const contentContainer = document.querySelector('.tool-layout > .content');
+    contentContainer.innerHTML = '';
+    const lc = document.createElement('luigi-container');
+    lc.setAttribute('viewUrl', navNode.viewUrl);
+    lc.webcomponent = navNode.webcomponent;
+    lc.context = navNode.context;
+    contentContainer.appendChild(lc);
+  }
+};
+
+// eslint-disable-next-line no-undef
+Luigi.bootstrap(connector);
@@ -0,0 +1,52 @@
+html,
+body {
+    margin: 0;
+    position: relativ;
+    height: 100%;
+    background: var(--sapBackgroundColor);
+}
+
+ui5-side-navigation {
+    min-height: 0;
+}
+
+.left-nav-hidden ui5-side-navigation,
+.left-nav-hidden ui5-shellbar #toggle {
+    display: none;
+}
+
+.left-nav-hidden .content {
+    grid-column: 1 / span 2;
+}
+
+ui5-shellbar::part(root) {
+    padding-inline-start: 0.75rem;
+    padding-inline-end: 1.25rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 0 0.125rem 0 color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent),
+        0 0.5rem 1rem 0 color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent);
+}
+
+.tool-layout {
+    height: 100%;
+    box-sizing: border-box;
+    padding: 0.5rem 0.5rem 0 0.5rem;
+    /* background: color-mix(in srgb, black 4%, var(--sapBackgroundColor)); */
+    display: grid;
+    gap: 0.5rem;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: auto 1fr;
+}
+
+ui5-shellbar {
+    grid-column: 1 / span 2;
+    grid-row: 1 / 2;
+}
+
+.content {
+    position: relative;
+    background: var(--sapBackgroundColor);
+    border-radius: 0.5rem 0.5rem 0 0;
+    box-shadow: 0 0 0.125rem 0 color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent),
+        0 0.5rem 1rem 0 color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent);
+}
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title></title>
+    <meta charset="utf-8" />
+    <link
+      href="https://unpkg.com/@luigi-project/core/luigi_horizon.css"
+      rel="stylesheet"
+    />
+
+    <style>
+      body {
+        font-family: var(--sapFontFamily);
+        text-align: center;
+        color: #515559;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div>
+      <h1>Luigi Simple Development Template</h1>
+      <p>Some content</p>
+    </div>
+    <script>
+      let div = document.createElement('div');
+      div.innerHTML = location.hash;
+      document.body.appendChild(div);
+    </script>
+  </body>
+</html>