underpost 2.8.844 → 2.8.845

package/README.md

@@ -35,10 +35,13 @@ template
 
 
 
+
+
+
 <!-- badges -->
 
 
-[![Node.js CI](https://github.com/underpostnet/engine/actions/workflows/docker-image.ci.yml/badge.svg?branch=master)](https://github.com/underpostnet/engine/actions/workflows/docker-image.yml) [![Test](https://github.com/underpostnet/engine/actions/workflows/coverall.ci.yml/badge.svg?branch=master)](https://github.com/underpostnet/engine/actions/workflows/coverall.yml) [![Downloads](https://img.shields.io/npm/dm/underpost.svg)](https://www.npmjs.com/package/underpost) [![Socket Badge](https://socket.dev/api/badge/npm/package/underpost/2.8.844)](https://socket.dev/npm/package/underpost/overview/2.8.844) [![Coverage Status](https://coveralls.io/repos/github/underpostnet/engine/badge.svg?branch=master)](https://coveralls.io/github/underpostnet/engine?branch=master) [![Version](https://img.shields.io/npm/v/underpost.svg)](https://www.npmjs.org/package/underpost) [![License](https://img.shields.io/npm/l/underpost.svg)](https://www.npmjs.com/package/underpost)
+[![Node.js CI](https://github.com/underpostnet/engine/actions/workflows/docker-image.ci.yml/badge.svg?branch=master)](https://github.com/underpostnet/engine/actions/workflows/docker-image.yml) [![Test](https://github.com/underpostnet/engine/actions/workflows/coverall.ci.yml/badge.svg?branch=master)](https://github.com/underpostnet/engine/actions/workflows/coverall.yml) [![Downloads](https://img.shields.io/npm/dm/underpost.svg)](https://www.npmjs.com/package/underpost) [![Socket Badge](https://socket.dev/api/badge/npm/package/underpost/2.8.845)](https://socket.dev/npm/package/underpost/overview/2.8.845) [![Coverage Status](https://coveralls.io/repos/github/underpostnet/engine/badge.svg?branch=master)](https://coveralls.io/github/underpostnet/engine?branch=master) [![Version](https://img.shields.io/npm/v/underpost.svg)](https://www.npmjs.org/package/underpost) [![License](https://img.shields.io/npm/l/underpost.svg)](https://www.npmjs.com/package/underpost)
 
 
 <!-- end-badges -->
@@ -56,6 +59,9 @@ template
 
 
 
+
+
+
 </div>
 
 <div align="center">
@@ -100,7 +106,7 @@ Run dev client server
 npm run dev
 ```
 <!-- -->
-## underpost ci/cd cli v2.8.844
+## underpost ci/cd cli v2.8.845
 
 ### Usage: `underpost [options] [command]`
   ```

package/cli.md

@@ -1,4 +1,4 @@
-## underpost ci/cd cli v2.8.844
+## underpost ci/cd cli v2.8.845
 
 ### Usage: `underpost [options] [command]`
   ```

package/docker-compose.yml

@@ -58,7 +58,7 @@ services:
           cpus: '0.25'
           memory: 20M
     labels: # labels in Compose file instead of Dockerfile
-      engine.version: '2.8.844'
+      engine.version: '2.8.845'
     networks:
       - load-balancer
 

package/manifests/deployment/dd-template-development/deployment.yaml

@@ -17,7 +17,7 @@ spec:
     spec:
       containers:
         - name: dd-template-development-blue
-          image: localhost/rockylinux9-underpost:v2.8.844
+          image: localhost/rockylinux9-underpost:v2.8.845
           #          resources:
           #            requests:
           #              memory: "124Ki"
@@ -100,7 +100,7 @@ spec:
     spec:
       containers:
         - name: dd-template-development-green
-          image: localhost/rockylinux9-underpost:v2.8.844
+          image: localhost/rockylinux9-underpost:v2.8.845
           #          resources:
           #            requests:
           #              memory: "124Ki"

package/package.json

@@ -2,7 +2,7 @@
     "type": "module",
     "main": "src/index.js",
     "name": "underpost",
-    "version": "2.8.844",
+    "version": "2.8.845",
     "description": "pwa api rest template",
     "scripts": {
         "start": "env-cmd -f .env.production node --max-old-space-size=8192 src/server",
@@ -105,7 +105,6 @@
         "rrule": "^2.8.1",
         "sharp": "^0.32.5",
         "shelljs": "^0.8.5",
-        "simple-icons": "^13.9.0",
         "sitemap": "^7.1.1",
         "socket.io": "^4.8.0",
         "sortablejs": "^1.15.0",

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

@@ -1,9 +1,9 @@
-import { getId, newInstance, range, s4, splitEveryXChar } from './CommonJs.js';
+import { getId, newInstance, range, rgbToHex, s4, splitEveryXChar } from './CommonJs.js';
 import { CssCoreDark, CssCoreLight } from './CssCore.js';
 import { DropDown } from './DropDown.js';
 import { Modal } from './Modal.js';
 import { Translate } from './Translate.js';
-import { append, getProxyPath, htmls, s } from './VanillaJs.js';
+import { append, getProxyPath, htmls, s, sa } from './VanillaJs.js';
 
 let ThemesScope = [];
 
@@ -12,6 +12,39 @@ let ThemesScope = [];
 // https://www.1001fonts.com/
 
 const Css = {
+  // Menu button container transition styles
+  menuButtonContainer: () => css`
+    .main-btn-menu {
+      transition: all 0.2s ease-in-out;
+      position: relative;
+    }
+
+    .main-btn-menu::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 0;
+      height: 2px;
+      background: currentColor;
+      transition: all 0.2s ease-in-out;
+      transform: translateX(-50%);
+    }
+
+    .main-btn-menu:hover::after {
+      width: 60%;
+    }
+
+    .main-btn-menu.active {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    .main-btn-menu.active::after {
+      width: 80%;
+      background: currentColor;
+    }
+  `,
+
   loadThemes: async function (themes = []) {
     ThemesScope = [];
     for (const themeOptions of themes) addTheme(themeOptions);
@@ -31,6 +64,16 @@ const Css = {
   Init: async function (options) {
     if (!options) options = ThemesScope[0];
     const { theme } = options;
+
+    // Inject menu button container styles
+    const styleId = 'menu-btn-container-styles';
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement('style');
+      style.id = styleId;
+      style.textContent = this.menuButtonContainer();
+      document.head.appendChild(style);
+    }
+
     return await Themes[theme](options);
   },
   RenderSetting: async function () {
@@ -811,6 +854,12 @@ const imageShimmer = () => html`<div
   </div>
 </div>`;
 
+const simpleIconsRender = (selector) => {
+  sa(selector).forEach((el) => {
+    el.src = `https://cdn.simpleicons.org/coveralls/${rgbToHex(window.getComputedStyle(s('html')).color)}`;
+  });
+};
+
 export {
   Css,
   Themes,
@@ -843,4 +892,5 @@ export {
   renderWave,
   cssEffect,
   imageShimmer,
+  simpleIconsRender,
 };

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

@@ -1,12 +1,12 @@
 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 { Css, darkTheme, dynamicCol, renderCssAttr, simpleIconsRender, ThemeEvents, Themes } from './Css.js';
 import { DropDown } from './DropDown.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 { getProxyPath, getQueryParams, htmls, s, sa } from './VanillaJs.js';
 import Sortable from 'sortablejs';
 
 // https://mintlify.com/docs/quickstart
@@ -46,6 +46,11 @@ const Docs = {
     Modal.Data[ModalId].onObserverListener[ModalId] = () => {
       if (s(`.iframe-${ModalId}`))
         s(`.iframe-${ModalId}`).style.height = `${s(`.${ModalId}`).offsetHeight - Modal.headerTitleHeight}px`;
+
+      if (type.match('coverage')) {
+        simpleIconsRender(`.doc-icon-coverage`);
+        simpleIconsRender(`.doc-icon-coverage-link`);
+      }
     };
     Modal.Data[ModalId].onObserverListener[ModalId]();
   },
@@ -96,10 +101,7 @@ const Docs = {
         return `${getProxyPath()}docs/coverage`;
       },
       themeEvent: () => {
-        if (s(`.doc-icon-coverage`))
-          s(`.doc-icon-coverage`).src = `https://cdn.simpleicons.org/coveralls/${rgbToHex(
-            window.getComputedStyle(s('html')).color,
-          )}`;
+        if (s(`.doc-icon-coverage`)) setTimeout(() => simpleIconsRender(`.doc-icon-coverage`));
       },
     },
     {
@@ -110,10 +112,7 @@ const Docs = {
         return `https://coveralls.io/github/underpostnet/engine`;
       },
       themeEvent: () => {
-        if (s(`.doc-icon-coverage-link`))
-          s(`.doc-icon-coverage-link`).src = `https://cdn.simpleicons.org/coveralls/${rgbToHex(
-            window.getComputedStyle(s('html')).color,
-          )}`;
+        if (s(`.doc-icon-coverage-link`)) setTimeout(() => simpleIconsRender(`.doc-icon-coverage-link`));
       },
     },
   ],

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

@@ -8,7 +8,7 @@ const DropDown = {
   Tokens: {},
   Render: async function (options) {
     const id = options.id ? options.id : getId(this.Tokens, 'dropdown-');
-    this.Tokens[id] = { onClickEvents: {}, lastSelectValue: undefined };
+    this.Tokens[id] = { onClickEvents: {}, lastSelectValue: undefined, oncheckvalues: {} };
 
     options.data.push({
       value: 'reset',
@@ -39,6 +39,96 @@ const DropDown = {
       else s(`.dropdown-option-${id}`).classList.add('hide');
     };
 
+    const _render = async (data) => {
+      let render = '';
+      let index = -1;
+      for (const optionData of data) {
+        index++;
+        const i = index;
+        const valueDisplay = optionData.value.trim().replaceAll(' ', '-');
+        setTimeout(() => {
+          const onclick = (e) => {
+            if (options && options.lastSelectClass && s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`)) {
+              s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`).classList.remove(options.lastSelectClass);
+            }
+            this.Tokens[id].lastSelectValue = valueDisplay;
+            if (options && options.lastSelectClass && s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`)) {
+              s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`).classList.add(options.lastSelectClass);
+            }
+
+            if (
+              !(options && options.disableClose) &&
+              (options.type !== 'checkbox' || optionData.value === 'close' || optionData.value === 'reset')
+            )
+              s(`.dropdown-option-${id}`).classList.add('hide');
+
+            if (options.type === 'checkbox' && ToggleSwitch.Tokens[`checkbox-role-${valueDisplay}`])
+              ToggleSwitch.Tokens[`checkbox-role-${valueDisplay}`].click();
+            if (optionData.value !== 'close') {
+              if (optionData.value !== 'reset')
+                htmls(
+                  `.dropdown-current-${id}`,
+                  options.type === 'checkbox'
+                    ? data
+                        .filter((d) => d.checked)
+                        .map((v, i, a) => `${v.display}${i < a.length - 1 ? ',' : ''}`)
+                        .join('')
+                    : optionData.display,
+                );
+              else htmls(`.dropdown-current-${id}`, '');
+
+              this.Tokens[id].value =
+                options.type === 'checkbox' ? data.filter((d) => d.checked).map((d) => d.data) : optionData.data;
+
+              console.warn('current value dropdown id:' + id, this.Tokens[id].value);
+
+              s(`.${id}`).value = this.Tokens[id].value;
+
+              optionData.onClick(e);
+            }
+          };
+
+          this.Tokens[id].onClickEvents[`dropdown-option-${id}-${i}`] = onclick;
+          this.Tokens[id].onClickEvents[`dropdown-option-${id}-${valueDisplay}`] = onclick;
+          this.Tokens[id].onClickEvents[`dropdown-option-${valueDisplay}`] = onclick;
+
+          s(`.dropdown-option-${id}-${i}`).onclick = onclick;
+        });
+        render += html`
+          <div
+            class="in dropdown-option dropdown-option-${id}-${i} dropdown-option-${id}-${valueDisplay} dropdown-option-${valueDisplay} ${valueDisplay ===
+              'reset' &&
+            options &&
+            !(options.resetOption === true)
+              ? 'hide'
+              : ''}"
+          >
+            ${options.type === 'checkbox' && optionData.value !== 'close' && optionData.value !== 'reset'
+              ? html`
+                  ${await ToggleSwitch.Render({
+                    id: `checkbox-role-${valueDisplay}`,
+                    type: 'checkbox',
+                    disabledOnClick: true,
+                    checked: optionData.checked,
+                    on: {
+                      unchecked: () => {
+                        optionData.checked = false;
+                        delete DropDown.Tokens[id].oncheckvalues[valueDisplay];
+                      },
+                      checked: () => {
+                        optionData.checked = true;
+                        DropDown.Tokens[id].oncheckvalues[valueDisplay] = {};
+                      },
+                    },
+                  })}
+                `
+              : ''}${optionData.display}
+          </div>
+        `;
+      }
+      return { render, index };
+    };
+
     setTimeout(() => {
       if (options.type === 'checkbox')
         options.data.map((optionData) => {
@@ -53,92 +143,48 @@ const DropDown = {
       s(`.dropdown-label-${id}`).onclick = switchOptionsPanel;
       s(`.dropdown-current-${id}`).onclick = switchOptionsPanel;
       if (options && options.open) switchOptionsPanel();
-    });
 
-    let render = '';
-    let index = -1;
-    for (const optionData of options.data) {
-      index++;
-      const i = index;
-      const valueDisplay = optionData.value.trim().replaceAll(' ', '-');
-      setTimeout(() => {
-        const onclick = (e) => {
-          if (options && options.lastSelectClass && s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`)) {
-            s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`).classList.remove(options.lastSelectClass);
-          }
-          this.Tokens[id].lastSelectValue = valueDisplay;
-          if (options && options.lastSelectClass && s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`)) {
-            s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`).classList.add(options.lastSelectClass);
-          }
+      const dropDownSearchHandle = async () => {
+        const _data = [];
+        if (!s(`.search-box-${id}`)) return;
 
+        let _value = s(`.search-box-${id}`).value.toLowerCase();
+
+        for (const objData of options.data) {
+          const objValue = objData.value.toLowerCase();
           if (
-            !(options && options.disableClose) &&
-            (options.type !== 'checkbox' || optionData.value === 'close' || optionData.value === 'reset')
-          )
-            s(`.dropdown-option-${id}`).classList.add('hide');
-
-          if (options.type === 'checkbox' && ToggleSwitch.Tokens[`checkbox-role-${valueDisplay}`])
-            ToggleSwitch.Tokens[`checkbox-role-${valueDisplay}`].click();
-          if (optionData.value !== 'close') {
-            if (optionData.value !== 'reset')
-              htmls(
-                `.dropdown-current-${id}`,
-                options.type === 'checkbox'
-                  ? options.data
-                      .filter((d) => d.checked)
-                      .map((v, i, a) => `${v.display}${i < a.length - 1 ? ',' : ''}`)
-                      .join('')
-                  : optionData.display,
-              );
-            else htmls(`.dropdown-current-${id}`, '');
-
-            this.Tokens[id].value =
-              options.type === 'checkbox' ? options.data.filter((d) => d.checked).map((d) => d.data) : optionData.data;
-
-            console.warn('current value dropdown id:' + id, this.Tokens[id].value);
-
-            s(`.${id}`).value = this.Tokens[id].value;
-
-            optionData.onClick(e);
+            objValue.match(_value) ||
+            (Translate.Data[objData.value] &&
+              Object.keys(Translate.Data[objData.value]).find((t) =>
+                Translate.Data[objData.value][t].toLowerCase().match(_value),
+              ))
+          ) {
+            _data.push(objData);
           }
-        };
+        }
+
+        if (_data.length > 0) {
+          const { render, index } = await _render(_data);
+          htmls(`.${id}-render-container`, render);
+        } else {
+          // const { render, index } = await _render(options.data);
+          htmls(
+            `.${id}-render-container`,
+            html` <div class="inl" style="padding: 10px; color: red">
+              <i class="fas fa-exclamation-circle"></i> ${Translate.Render('no-result-found')}
+            </div>`,
+          );
+        }
+      };
+
+      s(`.search-box-${id}`).oninput = dropDownSearchHandle;
+
+      // Not use onblur generate bug on input toggle
+      // s(`.search-box-${id}`).onblur = dropDownSearchHandle;
+    });
 
-        this.Tokens[id].onClickEvents[`dropdown-option-${id}-${i}`] = onclick;
-        this.Tokens[id].onClickEvents[`dropdown-option-${id}-${valueDisplay}`] = onclick;
-        this.Tokens[id].onClickEvents[`dropdown-option-${valueDisplay}`] = onclick;
+    const { render, index } = await _render(options.data);
 
-        s(`.dropdown-option-${id}-${i}`).onclick = onclick;
-      });
-      render += html`
-        <div
-          class="in dropdown-option dropdown-option-${id}-${i} dropdown-option-${id}-${valueDisplay} dropdown-option-${valueDisplay} ${valueDisplay ===
-            'reset' &&
-          options &&
-          !(options.resetOption === true)
-            ? 'hide'
-            : ''}"
-        >
-          ${options.type === 'checkbox' && optionData.value !== 'close' && optionData.value !== 'reset'
-            ? html`
-                ${await ToggleSwitch.Render({
-                  id: `checkbox-role-${valueDisplay}`,
-                  type: 'checkbox',
-                  disabledOnClick: true,
-                  checked: optionData.checked,
-                  on: {
-                    unchecked: () => {
-                      optionData.checked = false;
-                    },
-                    checked: () => {
-                      optionData.checked = true;
-                    },
-                  },
-                })}
-              `
-            : ''}${optionData.display}
-        </div>
-      `;
-    }
     return html`
       <div class="inl dropdown-container ${id} ${options?.containerClass ? options.containerClass : ''}">
         <div class="in dropdown-option dropdown-label-${id} ${options && options.disableSelectLabel ? 'hide' : ''}">
@@ -158,7 +204,7 @@ const DropDown = {
               placeholder: true,
             })}
           </div>
-          ${render}
+          <div class="${id}-render-container">${render}</div>
         </div>
       </div>
     `;

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

@@ -24,7 +24,7 @@ import {
   renderStatus,
   renderCssAttr,
 } from './Css.js';
-import { setDocTitle } from './Router.js';
+import { setDocTitle, closeModalRouteChangeEvent, handleModalViewRoute } from './Router.js';
 import { NotificationManager } from './NotificationManager.js';
 import { EventsUI } from './EventsUI.js';
 import { Translate } from './Translate.js';
@@ -126,19 +126,13 @@ const Modal = {
           };
           Responsive.Event[`view-${idModal}`]();
 
-          // Router
-          if (options.route)
-            (() => {
-              let path = window.location.pathname;
-              if (path !== '/' && path[path.length - 1] === '/') path = path.slice(0, -1);
-              const proxyPath = getProxyPath();
-              const newPath = `${proxyPath}${options.route}`;
-              if (path !== newPath) {
-                // console.warn('SET MODAL URI', newPath);
-                setPath(`${newPath}`); // ${location.search}
-                setDocTitle({ ...options.RouterInstance, route: options.route });
-              }
-            })();
+          // Handle view mode modal route
+          if (options.route) {
+            handleModalViewRoute({
+              route: options.route,
+              RouterInstance: options.RouterInstance,
+            });
+          }
 
           break;
         case 'slide-menu':
@@ -697,6 +691,7 @@ const Modal = {
                   Modal.MoveTitleToBar(id);
 
                   prepend(`.btn-bar-modal-container-${id}`, html`<div class="hide">${inputInfoNode.outerHTML}</div>`);
+                  if (s(`.slide-menu-top-bar-fix`)) s(`.slide-menu-top-bar-fix`).classList.add('hide');
                 }
               };
 
@@ -716,6 +711,7 @@ const Modal = {
                   } catch (e) {}
                 }
                 Modal.removeModal(searchBoxHistoryId);
+                if (s(`.slide-menu-top-bar-fix`)) s(`.slide-menu-top-bar-fix`).classList.remove('hide');
               };
               s('.top-bar-search-box').onblur = () => {
                 hoverFocusCtl.checkDismiss();
@@ -890,6 +886,9 @@ const Modal = {
                   ],
                   eventCallBack: () => {
                     if (s(`.top-bar-search-box`)) {
+                      if (s(`.main-body-btn-ui-close`).classList.contains('hide')) {
+                        s(`.main-body-btn-ui-open`).click();
+                      }
                       s(`.top-bar-search-box`).blur();
                       s(`.top-bar-search-box`).focus();
                       s(`.top-bar-search-box`).select();
@@ -1089,12 +1088,13 @@ const Modal = {
                         icon: html`<i class="fas fa-language mini-title"></i>`,
                         text: Translate.Render('select lang'),
                       })}`,
-                      html: () => html``,
+                      html: async () => html`${await Translate.RenderSetting('action-drop-modal' + id)}`,
                       titleClass: 'mini-title',
                       style: {
                         resize: 'none',
-                        'max-width': '300px',
-                        height: '150px !important',
+                        width: '100% !important',
+                        height: '350px !important',
+                        'max-width': '350px !important',
                         'z-index': 7,
                       },
                       dragDisabled: true,
@@ -1652,27 +1652,14 @@ const Modal = {
       setTimeout(() => {
         if (!s(`.${idModal}`)) return;
         this.removeModal(idModal);
-        // Router
-        if (options.route)
-          (() => {
-            let path = window.location.pathname;
-            if (path[path.length - 1] !== '/') path = `${path}/`;
-            let newPath = `${getProxyPath()}`;
-            if (path !== newPath) {
-              for (const subIdModal of Object.keys(this.Data).reverse()) {
-                if (this.Data[subIdModal].options.route) {
-                  newPath = `${newPath}${this.Data[subIdModal].options.route}`;
-                  console.warn('------------> SET MODAL URI', newPath);
-                  setPath(newPath);
-                  this.setTopModalCallback(subIdModal);
-                  return setDocTitle({ ...options.RouterInstance, route: this.Data[subIdModal].options.route });
-                }
-              }
-              console.warn('-------------> SET MODAL URI', newPath);
-              setPath(`${newPath}${Modal.homeCid ? `?cid=${Modal.homeCid}` : ''}`);
-              return setDocTitle({ ...options.RouterInstance, route: '' });
-            }
-          })();
+        // Handle modal route change
+        if (options.route) {
+          closeModalRouteChangeEvent({
+            route: options.route,
+            RouterInstance: options.RouterInstance,
+            homeCid: Modal.homeCid,
+          });
+        }
       }, 300);
     };
     s(`.btn-close-${idModal}`).onclick = btnCloseEvent;

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

@@ -15,7 +15,7 @@ import { getSrcFromFileData } from './Input.js';
 import { imageShimmer, renderCssAttr } from './Css.js';
 import { Translate } from './Translate.js';
 import { Modal } from './Modal.js';
-import { listenQueryPathInstance, setQueryPath } from './Router.js';
+import { closeModalRouteChangeEvents, listenQueryPathInstance, renderTitle, setQueryPath } from './Router.js';
 
 const PanelForm = {
   Data: {},
@@ -425,15 +425,22 @@ const PanelForm = {
       });
     let firsUpdateEvent = false;
     let lastCid;
-    console.warn('------------->  updatePanel 1');
+    let lastUserId;
+    closeModalRouteChangeEvents[idPanel] = (newPath) => {
+      if (newPath.split('?')[0] === '/' && PanelForm.Data[idPanel].data && PanelForm.Data[idPanel].data.length === 0) {
+        this.Data[idPanel].updatePanel();
+      }
+    };
     this.Data[idPanel].updatePanel = async () => {
-      console.warn('------------->  updatePanel 2');
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
-      if (lastCid === cid) return;
+      const forceUpdate = lastUserId !== Elements.Data.user.main.model.user._id;
+      if (lastCid === cid && !forceUpdate) return;
+      lastUserId = newInstance(Elements.Data.user.main.model.user._id);
       lastCid = cid;
       if (options.route === 'home') Modal.homeCid = newInstance(cid);
       htmls(`.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`, await renderSrrPanelData());
       await getPanelData();
+      if (this.Data[idPanel].data.length === 1) renderTitle(this.Data[idPanel].data[0].title);
       htmls(
         `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`,
         await panelRender({ data: this.Data[idPanel].data }),
@@ -454,6 +461,7 @@ const PanelForm = {
       if (!options.parentIdModal)
         Modal.Data['modal-menu'].onHome[idPanel] = async () => {
           lastCid = undefined;
+          lastUserId = undefined;
           setQueryPath({ path: options.route, queryPath: '' });
           await this.Data[idPanel].updatePanel();
         };

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

@@ -1,16 +1,20 @@
 import { titleFormatted } from './CommonJs.js';
 import { loggerFactory } from './Logger.js';
 import { getProxyPath, getQueryParams, htmls, s, setPath } from './VanillaJs.js';
+import { Modal } from './Modal.js';
+import { Worker } from './Worker.js';
 
 // Router
 
 const logger = loggerFactory(import.meta);
 
+const renderTitle = (title, nameApp) => htmls('title', html`${title} | ${nameApp ?? Worker.RouterInstance.NameApp}`);
+
 const setDocTitle = (options = { Routes: () => {}, route: '', NameApp: '' }) => {
   const { Routes, route, NameApp } = options;
   let title = titleFormatted(Routes()[`/${route}`].title);
   if (Routes()[`/${route}`].upperCase) title = title.toUpperCase();
-  htmls('title', html`${title} | ${NameApp}`);
+  renderTitle(title, NameApp);
   {
     const routeId = route === '' ? 'home' : route;
     if (s(`.main-btn-${routeId}`)) {
@@ -75,4 +79,61 @@ const listenQueryPathInstance = ({ id, routeId, event }, queryKey = 'cid') => {
     });
 };
 
-export { Router, setDocTitle, LoadRouter, RouterEvents, setQueryPath, listenQueryPathInstance };
+const closeModalRouteChangeEvents = {};
+const triggerCloseModalRouteChangeEvents = (newPath) => {
+  console.warn('[closeModalRouteChangeEvent]', newPath);
+  for (const event of Object.keys(closeModalRouteChangeEvents)) closeModalRouteChangeEvents[event](newPath);
+};
+
+const closeModalRouteChangeEvent = (options = {}) => {
+  const { route, RouterInstance, homeCid } = options;
+  if (!route) return;
+
+  let path = window.location.pathname;
+  if (path[path.length - 1] !== '/') path = `${path}/`;
+  let newPath = `${getProxyPath()}`;
+
+  if (path !== newPath) {
+    for (const subIdModal of Object.keys(Modal.Data).reverse()) {
+      if (Modal.Data[subIdModal]?.options?.route) {
+        newPath = `${newPath}${Modal.Data[subIdModal].options.route}`;
+        triggerCloseModalRouteChangeEvents(newPath);
+        setPath(newPath);
+        Modal.setTopModalCallback(subIdModal);
+        return setDocTitle({ ...RouterInstance, route: Modal.Data[subIdModal].options.route });
+      }
+    }
+    newPath = `${newPath}${homeCid ? `?cid=${homeCid}` : ''}`;
+    triggerCloseModalRouteChangeEvents(newPath);
+    setPath(newPath);
+    return setDocTitle({ ...RouterInstance, route: '' });
+  }
+};
+
+const handleModalViewRoute = (options = {}) => {
+  const { route, RouterInstance } = options;
+  if (!route) return;
+
+  let path = window.location.pathname;
+  if (path !== '/' && path[path.length - 1] === '/') path = path.slice(0, -1);
+  const proxyPath = getProxyPath();
+  const newPath = `${proxyPath}${route}`;
+
+  if (path !== newPath) {
+    setPath(newPath);
+    setDocTitle({ ...RouterInstance, route });
+  }
+};
+
+export {
+  Router,
+  setDocTitle,
+  LoadRouter,
+  RouterEvents,
+  setQueryPath,
+  listenQueryPathInstance,
+  closeModalRouteChangeEvent,
+  handleModalViewRoute,
+  closeModalRouteChangeEvents,
+  renderTitle,
+};

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

@@ -60,10 +60,10 @@ const Translate = {
     this.Parse(language);
     if (s(`.action-btn-lang-render`)) htmls(`.action-btn-lang-render`, s('html').lang);
   },
-  RenderSetting: async function () {
+  RenderSetting: async function (id) {
     return html` <div class="in section-mp">
       ${await DropDown.Render({
-        id: 'settings-lang',
+        id: id ?? 'settings-lang',
         value: s('html').lang ? s('html').lang : 'en',
         label: html`${Translate.Render('lang')}`,
         data: ['en', 'es'].map((language) => {

package/src/index.js

@@ -34,7 +34,7 @@ class Underpost {
    * @type {String}
    * @memberof Underpost
    */
-  static version = 'v2.8.844';
+  static version = 'v2.8.845';
   /**
    * Repository cli API
    * @static

package/src/server/client-build-docs.js

@@ -0,0 +1,205 @@
+'use strict';
+
+import fs from 'fs-extra';
+import swaggerAutoGen from 'swagger-autogen';
+import { shellExec } from './process.js';
+import { loggerFactory } from './logger.js';
+import { JSONweb } from './client-formatted.js';
+
+/**
+ * Builds API documentation using Swagger
+ * @param {Object} options - Documentation build options
+ * @param {string} options.host - The hostname for the API
+ * @param {string} options.path - The base path for the API
+ * @param {number} options.port - The port number for the API
+ * @param {Object} options.metadata - Metadata for the API documentation
+ * @param {Array<string>} options.apis - List of API modules to document
+ * @param {string} options.publicClientId - Client ID for the public documentation
+ * @param {string} options.rootClientPath - Root path for client files
+ * @param {Object} options.packageData - Package.json data
+ */
+const buildApiDocs = async ({
+  host,
+  path,
+  port,
+  metadata = {},
+  apis = [],
+  publicClientId,
+  rootClientPath,
+  packageData,
+}) => {
+  const logger = loggerFactory(import.meta);
+  const basePath = path === '/' ? `${process.env.BASE_API}` : `/${process.env.BASE_API}`;
+
+  const doc = {
+    info: {
+      version: packageData.version,
+      title: metadata?.title ? `${metadata.title}` : 'REST API',
+      description: metadata?.description ? metadata.description : '',
+    },
+    servers: [
+      {
+        url:
+          process.env.NODE_ENV === 'development'
+            ? `http://localhost:${port}${path}${basePath}`
+            : `https://${host}${path}${basePath}`,
+        description: `${process.env.NODE_ENV} server`,
+      },
+    ],
+    tags: [
+      {
+        name: 'user',
+        description: 'User API operations',
+      },
+    ],
+    components: {
+      schemas: {
+        userRequest: {
+          username: 'user123',
+          password: 'Password123',
+          email: 'user@example.com',
+        },
+        userResponse: {
+          status: 'success',
+          data: {
+            token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjY2YzM3N2Y1N2Y5OWU1OTY5YjgxZG...',
+            user: {
+              _id: '66c377f57f99e5969b81de89',
+              email: 'user@example.com',
+              emailConfirmed: false,
+              username: 'user123',
+              role: 'user',
+              profileImageId: '66c377f57f99e5969b81de87',
+            },
+          },
+        },
+        userUpdateResponse: {
+          status: 'success',
+          data: {
+            _id: '66c377f57f99e5969b81de89',
+            email: 'user@example.com',
+            emailConfirmed: false,
+            username: 'user123222',
+            role: 'user',
+            profileImageId: '66c377f57f99e5969b81de87',
+          },
+        },
+        userGetResponse: {
+          status: 'success',
+          data: {
+            _id: '66c377f57f99e5969b81de89',
+            email: 'user@example.com',
+            emailConfirmed: false,
+            username: 'user123222',
+            role: 'user',
+            profileImageId: '66c377f57f99e5969b81de87',
+          },
+        },
+        userLogInRequest: {
+          email: 'user@example.com',
+          password: 'Password123',
+        },
+        userBadRequestResponse: {
+          status: 'error',
+          message: 'Bad request. Please check your inputs, and try again',
+        },
+      },
+      securitySchemes: {
+        bearerAuth: {
+          type: 'http',
+          scheme: 'bearer',
+        },
+      },
+    },
+  };
+
+  logger.warn('build swagger api docs', doc.info);
+
+  const outputFile = `./public/${host}${path === '/' ? path : `${path}/`}swagger-output.json`;
+  const routes = [];
+  for (const api of apis) {
+    if (['user'].includes(api)) routes.push(`./src/api/${api}/${api}.router.js`);
+  }
+
+  await swaggerAutoGen({ openapi: '3.0.0' })(outputFile, routes, doc);
+};
+
+/**
+ * Builds JSDoc documentation
+ * @param {Object} options - JSDoc build options
+ * @param {string} options.host - The hostname for the documentation
+ * @param {string} options.path - The base path for the documentation
+ * @param {Object} options.metadata - Metadata for the documentation
+ */
+const buildJsDocs = async ({ host, path, metadata = {} }) => {
+  const logger = loggerFactory(import.meta);
+  const jsDocsConfig = JSON.parse(fs.readFileSync(`./jsdoc.json`, 'utf8'));
+
+  jsDocsConfig.opts.destination = `./public/${host}${path === '/' ? path : `${path}/`}docs/`;
+  jsDocsConfig.opts.theme_opts.title = metadata?.title ? metadata.title : undefined;
+  jsDocsConfig.opts.theme_opts.favicon = `./public/${host}${path === '/' ? path : `${path}/favicon.ico`}`;
+
+  fs.writeFileSync(`./jsdoc.json`, JSON.stringify(jsDocsConfig, null, 4), 'utf8');
+  logger.warn('build jsdoc view', jsDocsConfig.opts.destination);
+
+  shellExec(`npm run docs`, { silent: true });
+};
+
+/**
+ * Builds test coverage documentation
+ * @param {Object} options - Coverage build options
+ * @param {string} options.host - The hostname for the coverage
+ * @param {string} options.path - The base path for the coverage
+ */
+const buildCoverage = async ({ host, path }) => {
+  const logger = loggerFactory(import.meta);
+  const jsDocsConfig = JSON.parse(fs.readFileSync(`./jsdoc.json`, 'utf8'));
+
+  if (!fs.existsSync(`./coverage`)) {
+    shellExec(`npm test`);
+  }
+
+  const coverageBuildPath = `${jsDocsConfig.opts.destination}/coverage`;
+  fs.mkdirSync(coverageBuildPath, { recursive: true });
+  fs.copySync(`./coverage`, coverageBuildPath);
+
+  logger.warn('build coverage', coverageBuildPath);
+};
+
+/**
+ * Main function to build all documentation
+ * @param {Object} options - Documentation build options
+ * @param {string} options.host - The hostname
+ * @param {string} options.path - The base path
+ * @param {number} options.port - The port number
+ * @param {Object} options.metadata - Metadata for the documentation
+ * @param {Array<string>} options.apis - List of API modules to document
+ * @param {string} options.publicClientId - Client ID for the public documentation
+ * @param {string} options.rootClientPath - Root path for client files
+ * @param {Object} options.packageData - Package.json data
+ */
+const buildDocs = async ({
+  host,
+  path,
+  port,
+  metadata = {},
+  apis = [],
+  publicClientId,
+  rootClientPath,
+  packageData,
+}) => {
+  await buildJsDocs({ host, path, metadata });
+  await buildCoverage({ host, path });
+  await buildApiDocs({
+    host,
+    path,
+    port,
+    metadata,
+    apis,
+    publicClientId,
+    rootClientPath,
+    packageData,
+  });
+};
+
+export { buildDocs };

package/src/server/client-build.js

@@ -17,11 +17,11 @@ import dotenv from 'dotenv';
 import AdmZip from 'adm-zip';
 import * as dir from 'path';
 import { shellExec } from './process.js';
-import swaggerAutoGen from 'swagger-autogen';
 import { SitemapStream, streamToPromise } from 'sitemap';
 import { Readable } from 'stream';
 import { buildIcons, buildTextImg, getBufferPngText } from './client-icons.js';
 import Underpost from '../index.js';
+import { buildDocs } from './client-build-docs.js';
 
 dotenv.config();
 
@@ -557,125 +557,16 @@ Sitemap: https://${host}${path === '/' ? '' : path}/sitemap.xml`,
       }
 
       if (!enableLiveRebuild && !process.argv.includes('l') && !process.argv.includes('deploy') && docsBuild) {
-        // https://www.pullrequest.com/blog/leveraging-jsdoc-for-better-code-documentation-in-javascript/
-        // https://jsdoc.app/about-configuring-jsdoc
-        // https://jsdoc.app/ Block tags
-
-        const jsDocsConfig = JSON.parse(fs.readFileSync(`./jsdoc.json`, 'utf8'));
-        jsDocsConfig.opts.destination = `./public/${host}${path === '/' ? path : `${path}/`}docs/`;
-        jsDocsConfig.opts.theme_opts.title = metadata && metadata.title ? metadata.title : undefined;
-        jsDocsConfig.opts.theme_opts.favicon = `./public/${host}${path === '/' ? path : `${path}/favicon.ico`}`;
-        fs.writeFileSync(`./jsdoc.json`, JSON.stringify(jsDocsConfig, null, 4), 'utf8');
-        logger.warn('build jsdoc view', jsDocsConfig.opts.destination);
-        shellExec(`npm run docs`, { silent: true });
-
-        // coverage
-        if (!fs.existsSync(`./coverage`)) {
-          shellExec(`npm test`);
-        }
-        const coverageBuildPath = `${jsDocsConfig.opts.destination}/coverage`;
-        fs.mkdirSync(coverageBuildPath, { recursive: true });
-        fs.copySync(`./coverage`, coverageBuildPath);
-
-        // https://swagger-autogen.github.io/docs/
-
-        const basePath = path === '/' ? `${process.env.BASE_API}` : `/${process.env.BASE_API}`;
-
-        const doc = {
-          info: {
-            version: packageData.version, // by default: '1.0.0'
-            title: metadata?.title ? `${metadata.title}` : 'REST API', // by default: 'REST API'
-            description: metadata?.description ? metadata.description : '', // by default: ''
-          },
-          servers: [
-            {
-              url:
-                process.env.NODE_ENV === 'development'
-                  ? `http://localhost:${port}${path}${basePath}`
-                  : `https://${host}${path}${basePath}`, // by default: 'http://localhost:3000'
-              description: `${process.env.NODE_ENV} server`, // by default: ''
-            },
-          ],
-          tags: [
-            // by default: empty Array
-            {
-              name: 'user', // Tag name
-              description: 'User API operations', // Tag description
-            },
-          ],
-          components: {
-            schemas: {
-              userRequest: {
-                username: 'user123',
-                password: 'Password123',
-                email: 'user@example.com',
-              },
-              userResponse: {
-                status: 'success',
-                data: {
-                  token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7Il9pZCI6IjY2YzM3N2Y1N2Y5OWU1OTY5YjgxZG...',
-                  user: {
-                    _id: '66c377f57f99e5969b81de89',
-                    email: 'user@example.com',
-                    emailConfirmed: false,
-                    username: 'user123',
-                    role: 'user',
-                    profileImageId: '66c377f57f99e5969b81de87',
-                  },
-                },
-              },
-              userUpdateResponse: {
-                status: 'success',
-                data: {
-                  _id: '66c377f57f99e5969b81de89',
-                  email: 'user@example.com',
-                  emailConfirmed: false,
-                  username: 'user123222',
-                  role: 'user',
-                  profileImageId: '66c377f57f99e5969b81de87',
-                },
-              },
-              userGetResponse: {
-                status: 'success',
-                data: {
-                  _id: '66c377f57f99e5969b81de89',
-                  email: 'user@example.com',
-                  emailConfirmed: false,
-                  username: 'user123222',
-                  role: 'user',
-                  profileImageId: '66c377f57f99e5969b81de87',
-                },
-              },
-              userLogInRequest: {
-                email: 'user@example.com',
-                password: 'Password123',
-              },
-              userBadRequestResponse: {
-                status: 'error',
-                message: 'Bad request. Please check your inputs, and try again',
-              },
-            },
-            securitySchemes: {
-              bearerAuth: {
-                type: 'http',
-                scheme: 'bearer',
-              },
-            },
-          },
-        };
-
-        logger.warn('build swagger api docs', doc.info);
-
-        const outputFile = `./public/${host}${path === '/' ? path : `${path}/`}swagger-output.json`;
-        const routes = [];
-        for (const api of apis) {
-          if (['user'].includes(api)) routes.push(`./src/api/${api}/${api}.router.js`);
-        }
-
-        /* NOTE: If you are using the express Router, you must pass in the 'routes' only the 
-root file where the route starts, such as index.js, app.js, routes.js, etc ... */
-
-        await swaggerAutoGen({ openapi: '3.0.0' })(outputFile, routes, doc);
+        await buildDocs({
+          host,
+          path,
+          port,
+          metadata,
+          apis,
+          publicClientId,
+          rootClientPath,
+          packageData,
+        });
       }
 
       if (client) {