underpost 2.7.7 → 2.7.9

package/src/client/components/core/Css.js

@@ -31,228 +31,6 @@ const Css = {
   Init: async function (options) {
     if (!options) options = ThemesScope[0];
     const { theme } = options;
-    append(
-      'body',
-      html`
-        <style>
-          html {
-            scroll-behavior: smooth;
-          }
-
-          body {
-            /* overscroll-behavior: contain; */
-            /* box-sizing: border-box; */
-            padding: 0px;
-            margin: 0px;
-          }
-
-          .fl {
-            position: relative;
-            display: flow-root;
-          }
-
-          .abs,
-          .in {
-            display: block;
-          }
-
-          .fll {
-            float: left;
-          }
-
-          .flr {
-            float: right;
-          }
-
-          .abs {
-            position: absolute;
-          }
-
-          .in,
-          .inl {
-            position: relative;
-          }
-
-          .inl {
-            display: inline-table;
-            display: -webkit-inline-table;
-            display: -moz-inline-table;
-            display: -ms-inline-table;
-            display: -o-inline-table;
-          }
-
-          .fix {
-            position: fixed;
-            display: block;
-          }
-
-          .stq {
-            position: sticky;
-            /* require defined at least top, bottom, left o right */
-          }
-
-          .wfa {
-            width: available;
-            width: -webkit-available;
-            width: -moz-available;
-            width: -ms-available;
-            width: -o-available;
-
-            width: fill-available;
-            width: -webkit-fill-available;
-            width: -moz-fill-available;
-            width: -ms-fill-available;
-            width: -o-fill-available;
-          }
-
-          .wft {
-            width: fit-content;
-            width: -webkit-fit-content;
-            width: -moz-fit-content;
-            width: -ms-fit-content;
-            width: -o-fit-content;
-          }
-
-          .wfm {
-            width: max-content;
-            width: -webkit-max-content;
-            width: -moz-max-content;
-            width: -ms-max-content;
-            width: -o-max-content;
-          }
-
-          .negative-color {
-            filter: invert(1);
-            -webkit-filter: invert(1);
-            -moz-filter: invert(1);
-            -ms-filter: invert(1);
-            -o-filter: invert(1);
-          }
-
-          .no-drag {
-            user-drag: none;
-            -webkit-user-drag: none;
-            -moz-user-drag: none;
-            -ms-user-drag: none;
-            -o-user-drag: none;
-            user-select: none;
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            -o-user-select: none;
-          }
-
-          .center {
-            transform: translate(-50%, -50%);
-            top: 50%;
-            left: 50%;
-            width: 100%;
-            text-align: center;
-          }
-
-          input {
-            outline: none !important;
-            border: none;
-            padding-block: 0;
-            padding-inline: 0;
-          }
-          input::file-selector-button {
-            outline: none !important;
-            border: none;
-          }
-
-          .hide {
-            display: none !important;
-          }
-          /*
-
-          placeholder
-
-          */
-
-          ::placeholder {
-            color: black;
-            opacity: 1;
-            /* Firefox */
-            background: none;
-          }
-
-          :-ms-input-placeholder {
-            /* Internet Explorer 10-11 */
-            color: black;
-            background: none;
-          }
-
-          ::-ms-input-placeholder {
-            /* Microsoft Edge */
-            color: black;
-            background: none;
-          }
-
-          /*
-
-          selection
-
-          */
-
-          ::-moz-selection {
-            /* Code for Firefox */
-            color: black;
-            background: rgb(208, 208, 208);
-          }
-
-          ::selection {
-            color: black;
-            background: rgb(208, 208, 208);
-          }
-
-          .lowercase {
-            text-transform: lowercase;
-          }
-          .uppercase {
-            text-transform: uppercase;
-          }
-          .capitalize {
-            text-transform: capitalize;
-          }
-
-          .bold {
-            font-weight: bold;
-          }
-
-          .m {
-            font-family: monospace;
-          }
-
-          .gray {
-            filter: grayscale(1);
-          }
-        </style>
-        <div class="session">
-          <style>
-            .session-in-log-out {
-              display: block;
-            }
-            .session-inl-log-out {
-              display: inline-table;
-            }
-            .session-fl-log-out {
-              display: flow-root;
-            }
-            .session-in-log-in {
-              display: none;
-            }
-            .session-inl-log-in {
-              display: none;
-            }
-            .session-fl-log-in {
-              display: none;
-            }
-          </style>
-        </div>
-        <div class="theme"></div>
-      `,
-    );
     return await Themes[theme](options);
   },
   RenderSetting: async function () {

package/src/client/components/core/CssCore.js

@@ -1,5 +1,5 @@
 import { AgGrid } from './AgGrid.js';
-import { boxShadow, scrollBarDarkRender, scrollBarLightRender } from './Css.js';
+import { borderChar, boxShadow, scrollBarDarkRender, scrollBarLightRender } from './Css.js';
 import { LoadingAnimation } from './LoadingAnimation.js';
 import { append, getProxyPath, s } from './VanillaJs.js';
 
@@ -135,6 +135,21 @@ const CssCommonCore = async () => {
         width: 100%;
         height: auto;
       }
+      .down-arrow-submenu {
+        top: -20px;
+        text-align: right;
+        padding-right: 42px;
+        color: #5f5f5f;
+      }
+      .main-body-btn {
+        width: 50px;
+        height: 50px;
+        font-size: 18px;
+        cursor: pointer;
+      }
+      .main-body-btn:hover {
+        font-size: 21px;
+      }
     </style>
     <style>
       .lds-dual-ring,
@@ -484,6 +499,12 @@ const CssCoreDark = {
         a:hover {
           color: #cdcdcd;
         }
+        .ac {
+          color: #b1a7a7 !important;
+        }
+        .ahc {
+          color: #cdcdcd !important;
+        }
         .content-render {
           font-size: 16px;
           font-family: monospace;
@@ -499,7 +520,7 @@ const CssCoreDark = {
         .btn-input-extension:hover {
         }
       </style>
-      ${scrollBarDarkRender()}
+      ${scrollBarDarkRender()} ${borderChar(1, 'black', ['.main-body-btn-container'])}
     `,
 };
 
@@ -795,6 +816,12 @@ const CssCoreLight = {
         a:hover {
           color: #e89f4c;
         }
+        .ac {
+          color: #6d68ff !important;
+        }
+        .ahc {
+          color: #e89f4c !important;
+        }
         .content-render {
           font-size: 16px;
           font-family: monospace;
@@ -810,7 +837,7 @@ const CssCoreLight = {
         .btn-input-extension:hover {
         }
       </style>
-      ${scrollBarLightRender()}
+      ${scrollBarLightRender()} ${borderChar(1, 'white', ['.main-body-btn-container'])}
     `,
 };
 

package/src/client/components/core/Docs.js

@@ -1,11 +1,13 @@
+import { Badge } from './Badge.js';
 import { BtnIcon } from './BtnIcon.js';
 import { rgbToHex } from './CommonJs.js';
 import { Css, darkTheme, dynamicCol, renderCssAttr, ThemeEvents, Themes } from './Css.js';
 import { DropDown } from './DropDown.js';
-import { Modal, renderMenuLabel, renderViewTitle } from './Modal.js';
+import { buildBadgeToolTipMenuOption, Modal, renderMenuLabel, renderViewTitle } from './Modal.js';
 import { listenQueryPathInstance, setQueryPath } from './Router.js';
 import { Translate } from './Translate.js';
 import { getProxyPath, getQueryParams, htmls, s } from './VanillaJs.js';
+import Sortable from 'sortablejs';
 
 // https://mintlify.com/docs/quickstart
 
@@ -55,7 +57,21 @@ const Docs = {
       icon: html`<i class="fab fa-github"></i>`,
       text: `Last Release`,
       url: function () {
-        return `https://github.com/underpostnet/engine/`;
+        return `https://github.com/underpostnet/pwa-microservices-template-ghpkg/`;
+      },
+    },
+    {
+      type: 'demo',
+      icon: html`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
+        <path fill="currentColor" d="M20 2v12l10-6z" />
+        <path
+          fill="currentColor"
+          d="M28 14v8H4V6h10V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-8zM18 28h-4v-4h4z"
+        />
+      </svg>`,
+      text: html`Demo`,
+      url: function () {
+        return `https://underpostnet.github.io/pwa-microservices-template-ghpkg/`;
       },
     },
     {
@@ -63,7 +79,7 @@ const Docs = {
       icon: html`<i class="fa-brands fa-osi"></i>`,
       text: 'Source Docs',
       url: function () {
-        return `${getProxyPath()}docs/engine/2.7.7`;
+        return `${getProxyPath()}docs/engine/2.7.9`;
       },
     },
     {
@@ -109,6 +125,9 @@ const Docs = {
         type: umlId,
         icon: html`<i class="fas fa-sitemap"></i>`,
         text: Translate.Render(`${umlType} config uml`),
+        url: function () {
+          return `/docs/?cid=${umlId}`;
+        },
         renderHtml: function () {
           return html` <div class="in section-mp">
               <div class="in sub-title-modal"><i class="fas fa-project-diagram"></i> Schema</div>
@@ -130,19 +149,36 @@ const Docs = {
       };
     }),
   ),
+  Tokens: {},
   Init: async function (options) {
     const { idModal } = options;
+    this.Tokens[idModal] = options;
     setTimeout(() => {
+      const cleanActive = () => {
+        s(`.btn-docs-src`).classList.remove('main-btn-menu-active');
+        s(`.btn-docs-api`).classList.remove('main-btn-menu-active');
+        s(`.btn-docs-coverage`).classList.remove('main-btn-menu-active');
+        for (const umlType of umlTypes) {
+          const umlId = `uml-${umlType}`;
+          s(`.btn-docs-${umlId}`).classList.remove('main-btn-menu-active');
+        }
+      };
       s(`.btn-docs-src`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'src' });
+        cleanActive();
+        s(`.btn-docs-src`).classList.add('main-btn-menu-active');
         await this.RenderModal('src', options.modalOptions);
       };
       s(`.btn-docs-api`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'api' });
+        cleanActive();
+        s(`.btn-docs-api`).classList.add('main-btn-menu-active');
         await this.RenderModal('api', options.modalOptions);
       };
       s(`.btn-docs-coverage`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'coverage' });
+        cleanActive();
+        s(`.btn-docs-coverage`).classList.add('main-btn-menu-active');
         await this.RenderModal('coverage', options.modalOptions);
       };
 
@@ -154,10 +190,16 @@ const Docs = {
         const docData = this.Data.find((d) => d.type === 'repo');
         location.href = docData.url();
       };
+      s(`.btn-docs-demo`).onclick = () => {
+        const docData = this.Data.find((d) => d.type === 'demo');
+        location.href = docData.url();
+      };
 
       for (const umlType of umlTypes) {
         const umlId = `uml-${umlType}`;
         s(`.btn-docs-${umlId}`).onclick = async () => {
+          cleanActive();
+          s(`.btn-docs-${umlId}`).classList.add('main-btn-menu-active');
           setQueryPath({ path: 'docs', queryPath: umlId });
           await this.RenderModal(umlId, { ...options.modalOptions, handleType: 'bar' });
         };
@@ -181,7 +223,6 @@ const Docs = {
       switch (docData.type) {
         case 'repo':
         case 'coverage-link':
-          tabHref = docData.url();
           style = renderCssAttr({ style: { height: '45px' } });
           labelStyle = renderCssAttr({ style: { top: '8px', left: '9px' } });
           break;
@@ -189,16 +230,75 @@ const Docs = {
         default:
           break;
       }
-      docMenuRender += html` <div class="in">
+      tabHref = docData.url();
+      docMenuRender += html`
         ${await BtnIcon.Render({
-          class: `inl section-mp btn-custom btn-docs-${docData.type}`,
-          label: html`${docData.icon} ${docData.text}`,
+          class: `in wfa main-btn-menu btn-docs-${docData.type}`,
+          label: html`<span class="menu-btn-icon">${docData.icon}</span
+            ><span class="menu-label-text"> ${docData.text} </span>`,
           tabHref,
-          style,
-          labelStyle,
+          handleContainerClass: 'handle-btn-container',
+          tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption(docData.text, 'right')),
+          attrs: `data-id="${docData.type}"`,
+          handleContainerClass: 'handle-btn-container',
         })}
-      </div>`;
+      `;
     }
+
+    htmls('.menu-btn-container-children', html` <div class="fl menu-btn-container-docs">${docMenuRender}</div>`);
+    if (s(`.menu-btn-container-main`)) s(`.menu-btn-container-main`).classList.add('hide');
+    htmls(`.nav-path-display-${'modal-menu'}`, location.pathname);
+
+    this.Tokens[idModal] = new Sortable(s(`.menu-btn-container-docs`), {
+      animation: 150,
+      group: `docs-sortable`,
+      forceFallback: true,
+      fallbackOnBody: true,
+      handle: '.handle-btn-container',
+      store: {
+        /**
+         * Get the order of elements. Called once during initialization.
+         * @param   {Sortable}  sortable
+         * @returns {Array}
+         */
+        get: function (sortable) {
+          const order = localStorage.getItem(sortable.options.group.name);
+          return order ? order.split('|') : [];
+        },
+
+        /**
+         * Save the order of elements. Called onEnd (when the item is dropped).
+         * @param {Sortable}  sortable
+         */
+        set: function (sortable) {
+          const order = sortable.toArray();
+          localStorage.setItem(sortable.options.group.name, order.join('|'));
+        },
+      },
+      // chosenClass: 'css-class',
+      // ghostClass: 'css-class',
+      // Element dragging ended
+      onEnd: function (/**Event*/ evt) {
+        // console.log('Sortable onEnd', evt);
+        // console.log('evt.oldIndex', evt.oldIndex);
+        // console.log('evt.newIndex', evt.newIndex);
+        const slotId = Array.from(evt.item.classList).pop();
+        // console.log('slotId', slotId);
+        if (evt.oldIndex === evt.newIndex) s(`.${slotId}`).click();
+
+        // var itemEl = evt.item; // dragged HTMLElement
+        // evt.to; // target list
+        // evt.from; // previous list
+        // evt.oldIndex; // element's old index within old parent
+        // evt.newIndex; // element's new index within new parent
+        // evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
+        // evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
+        // evt.clone; // the clone element
+        // evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
+      },
+    });
+
+    return '';
     return html` <div class="in section-mp">${docMenuRender}</div>`;
     return html` <div class="in section-mp">
       ${await DropDown.Render({