underpost 2.8.843 → 2.8.845

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/CssCore.js

@@ -137,10 +137,6 @@ const CssCommonCore = async () => {
       .title-view-modal .view-title-icon {
         font-size: 21px !important;
       }
-      .plantuml-svg {
-        width: 100%;
-        height: auto;
-      }
       .down-arrow-submenu {
         top: -20px;
         text-align: right;

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

@@ -1,18 +1,16 @@
 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
 
-const umlTypes = ['server', 'cron', 'client', 'ssr'];
-
 const Docs = {
   RenderModal: async function (type, modalOptions) {
     const docData = this.Data.find((d) => d.type === type);
@@ -48,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]();
   },
@@ -98,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`));
       },
     },
     {
@@ -112,43 +112,10 @@ 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`));
       },
     },
-  ].concat(
-    umlTypes.map((umlType) => {
-      const umlId = `uml-${umlType}`;
-      return {
-        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>
-            </div>
-            <div class="in section-mp">
-              <a href="${getProxyPath()}docs/plantuml/${umlType}-schema.svg" target="_blank"
-                ><img class="in plantuml-svg" src="${getProxyPath()}docs/plantuml/${umlType}-schema.svg"
-              /></a>
-            </div>
-            <div class="in section-mp">
-              <div class="in sub-title-modal"><i class="fas fa-project-diagram"></i> Instance example</div>
-            </div>
-            <div class="in section-mp">
-              <a href="${getProxyPath()}docs/plantuml/${umlType}-conf.svg" target="_blank"
-                ><img class="in plantuml-svg" src="${getProxyPath()}docs/plantuml/${umlType}-conf.svg"
-              /></a>
-            </div>`;
-        },
-      };
-    }),
-  ),
+  ],
   Tokens: {},
   Init: async function (options) {
     const { idModal } = options;
@@ -158,10 +125,6 @@ const Docs = {
         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' });
@@ -195,16 +158,6 @@ const Docs = {
         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' });
-        };
-      }
-
       listenQueryPathInstance({
         id: options.idModal,
         routeId: 'docs',

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/EventsUI.js

@@ -2,7 +2,7 @@ import { LoadingAnimation } from '../core/LoadingAnimation.js';
 import { loggerFactory } from '../core/Logger.js';
 import { cssEffect } from './Css.js';
 import { NotificationManager } from './NotificationManager.js';
-import { s } from './VanillaJs.js';
+import { s, isActiveElement } from './VanillaJs.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -13,10 +13,37 @@ const EventsUI = {
     let complete = true;
     s(id)[type] = async function (e) {
       if (options.clickEffect) cssEffect(id, e);
+      const noGate = !!options.noGate;
+      const noLoading = !!options.noLoading;
+      const playLoading = async () => {
+        if (!noLoading) {
+          await LoadingAnimation.spinner.play(loadingContainer ? loadingContainer : id);
+          if (options.context !== 'modal') await LoadingAnimation.bar.play(id);
+        }
+      };
+      const stopLoading = async () => {
+        if (!noLoading) {
+          if (options.context !== 'modal') LoadingAnimation.bar.stop(id);
+          await LoadingAnimation.spinner.stop(loadingContainer ? loadingContainer : id);
+        }
+      };
+      if (noGate) {
+        try {
+          await playLoading();
+          await logic(e);
+        } catch (error) {
+          logger.error(error);
+          NotificationManager.Push({
+            status: 'error',
+            html: error?.message ? error.message : error ? error : 'Event error',
+          });
+        }
+        await stopLoading();
+        return;
+      }
       if (complete) {
         complete = false;
-        await LoadingAnimation.spinner.play(loadingContainer ? loadingContainer : id);
-        if (options.context !== 'modal') await LoadingAnimation.bar.play(id);
+        await playLoading();
         try {
           await logic(e);
         } catch (error) {
@@ -26,8 +53,7 @@ const EventsUI = {
             html: error?.message ? error.message : error ? error : 'Event error',
           });
         }
-        if (options.context !== 'modal') LoadingAnimation.bar.stop(id);
-        await LoadingAnimation.spinner.stop(loadingContainer ? loadingContainer : id);
+        await stopLoading();
         complete = true;
         return;
       }
@@ -41,6 +67,67 @@ const EventsUI = {
   onChange: async function (id = '', logic = async function (e) {}, options = { loadingContainer: '' }) {
     return await this.on(id, logic, 'onchange', options);
   },
+  // Shared hover/focus controller extracted from Modal
+  HoverFocusController: function ({ inputSelector, panelSelector, activeElementId, onDismiss } = {}) {
+    let hoverPanel = false;
+    let hoverInput = false;
+    const isActive = () => (activeElementId ? isActiveElement(activeElementId) : false);
+    const shouldStay = () => isActive() || hoverPanel || hoverInput;
+    const bind = () => {
+      if (inputSelector && s(inputSelector)) {
+        s(inputSelector).onmouseover = () => {
+          hoverInput = true;
+        };
+        s(inputSelector).onmouseout = () => {
+          hoverInput = false;
+        };
+      }
+      if (panelSelector && s(panelSelector)) {
+        s(panelSelector).onmouseover = () => {
+          hoverPanel = true;
+        };
+        s(panelSelector).onmouseout = () => {
+          hoverPanel = false;
+          if (activeElementId && s(`.${activeElementId}`) && s(`.${activeElementId}`).focus)
+            s(`.${activeElementId}`).focus();
+        };
+      }
+    };
+    const checkDismiss = () => {
+      if (!shouldStay()) onDismiss && onDismiss();
+    };
+    return { bind, shouldStay, checkDismiss };
+  },
+  // Generic click-outside binding to dismiss a panel/modal
+  // Options:
+  //  - shouldStay: function -> boolean
+  //  - onDismiss: function
+  //  - anchors: array of selectors to treat as inside clicks (e.g., input button, panel container)
+  //  - graceMs: number of ms after binding to ignore clicks (avoid closing on the same click that opened)
+  bindDismissOnDocumentClick: function ({ shouldStay, onDismiss, anchors = [], graceMs = 200 } = {}) {
+    if (typeof document === 'undefined') return () => {};
+    const bindAt = Date.now();
+    const isInsideAnchors = (target) => {
+      if (!target) return false;
+      for (const sel of anchors) {
+        const el = sel && typeof sel === 'string' ? s(sel) : null;
+        if (el && (el === target || el.contains(target))) return true;
+      }
+      return false;
+    };
+    const handler = (e) => {
+      // Ignore very quick clicks right after binding
+      if (Date.now() - bindAt < graceMs) return;
+      // If click is within anchors, ignore
+      if (isInsideAnchors(e?.target)) return;
+      // Defer to allow hover flags to update first
+      setTimeout(() => {
+        if (!shouldStay || !shouldStay()) onDismiss && onDismiss();
+      });
+    };
+    document.addEventListener('click', handler, true);
+    return () => document.removeEventListener('click', handler, true);
+  },
 };
 
 export { EventsUI };