underpost 2.8.84 → 2.8.85

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

@@ -105,7 +105,6 @@ const Content = {
       class: '',
       container: '',
       url: '',
-      aHrefOptions: { disable: false },
       raw: false,
     },
   ) {
@@ -143,10 +142,7 @@ const Content = {
           ? getApiBaseUrl({ id: file._id, endpoint: 'file/blob' })
           : URL.createObjectURL(getBlobFromUint8ArrayFile(file.data.data, file.mimetype));
         const imgRender = html`<img class="in ${options.class}" ${options.style} src="${url}" />`;
-        render += html`${options.aHrefOptions?.disable
-          ? imgRender
-          : html`<a href="${url}" target="_top">${imgRender}</a>`}`;
-
+        render += imgRender;
         break;
       }
       case 'pdf': {

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,14 +12,47 @@ 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);
     // if (!ThemesScope.find((t) => t.dark)) addTheme(CssCoreDark);
     // if (!ThemesScope.find((t) => !t.dark)) addTheme(CssCoreLight);
     if (ThemesScope.length === 0) {
-      addTheme(CssCoreDark);
       addTheme(CssCoreLight);
+      addTheme(CssCoreDark);
     }
     const localStorageTheme = localStorage.getItem('_theme');
     if (localStorageTheme && Themes[localStorageTheme]) {
@@ -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 () {
@@ -156,6 +199,7 @@ const addTheme = (options) => {
       if (!['core', 'css-core'].includes(options.theme))
         render += darkTheme ? await CssCoreDark.render() : await CssCoreLight.render();
       render += await options.render();
+      render += await subThemeManager.render();
       htmls('.theme', render);
       TriggerThemeEvents();
     }
@@ -169,13 +213,13 @@ const addTheme = (options) => {
   };
 };
 
-const borderChar = (px, color, selectors) => {
+const borderChar = (px, color, selectors, hover = false) => {
   if (selectors) {
     return selectors
       .map(
         (selector) => html`
           <style>
-            ${selector} {
+            ${selector}${hover ? ':hover' : ''} {
               text-shadow: ${px}px -${px}px ${px}px ${color}, -${px}px ${px}px ${px}px ${color},
                 -${px}px -${px}px ${px}px ${color}, ${px}px ${px}px ${px}px ${color};
             }
@@ -189,18 +233,29 @@ const borderChar = (px, color, selectors) => {
     ${color}, ${px}px ${px}px ${px}px ${color};
   `;
 };
-
 const boxShadow = ({ selector }) => html`
-  <style>
-    ${selector} {
-      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    }
-    ${selector}:hover {
-      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 10px 30px 0 rgba(0, 0, 0, 0.3);
-    }
-  </style>
+  ${darkTheme
+    ? html`
+        <style>
+          ${selector} {
+            box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.1), 0 6px 20px 0 rgba(255, 255, 255, 0.08);
+          }
+          ${selector}:hover {
+            box-shadow: 0 8px 16px 0 rgba(255, 255, 255, 0.15), 0 10px 30px 0 rgba(255, 255, 255, 0.1);
+          }
+        </style>
+      `
+    : html`
+        <style>
+          ${selector} {
+            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+          }
+          ${selector}:hover {
+            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 10px 30px 0 rgba(0, 0, 0, 0.3);
+          }
+        </style>
+      `}
 `;
-
 const renderMediaQuery = (mediaData) => {
   //  first limit should be '0'
   return html`
@@ -634,6 +689,166 @@ const scrollBarLightRender = () => {
     .join('');
 };
 
+/**
+ * Adjust hex color brightness toward white/black ("mix") or by modifying HSL lightness ("hsl").
+ *
+ * @param {string} hex - Color as '#rrggbb', 'rrggbb', '#rgb', or 'rgb'.
+ * @param {number} factor - -1..1 or -100..100 (percent). Positive = lighten, negative = darken.
+ * @param {{mode?: 'mix'|'hsl'}} [options]
+ * @returns {string} - Adjusted color as '#rrggbb' (lowercase).
+ */
+function adjustHex(hex, factor = 0.1, options = {}) {
+  if (typeof hex !== 'string') throw new TypeError('hex must be a string');
+  if (typeof factor !== 'number') throw new TypeError('factor must be a number');
+
+  // normalize factor: allow -100..100 or -1..1
+  if (factor > 1 && factor <= 100) factor = factor / 100;
+  if (factor < -1 && factor >= -100) factor = factor / 100;
+  factor = Math.max(-1, Math.min(1, factor));
+
+  const mode = options.mode === 'hsl' ? 'hsl' : 'mix';
+
+  // normalize hex
+  let h = hex.replace(/^#/, '').trim();
+  if (!(h.length === 3 || h.length === 6)) throw new Error('Invalid hex format');
+  if (h.length === 3)
+    h = h
+      .split('')
+      .map((c) => c + c)
+      .join('');
+
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+
+  const clamp = (v, a = 0, z = 255) => Math.max(a, Math.min(z, v));
+
+  const rgbToHex = (rr, gg, bb) =>
+    '#' +
+    [rr, gg, bb]
+      .map((v) => Math.round(v).toString(16).padStart(2, '0'))
+      .join('')
+      .toLowerCase();
+
+  if (mode === 'mix') {
+    // positive: mix toward white (255); negative: mix toward black (0)
+    const mixChannel = (c) => {
+      if (factor >= 0) {
+        return clamp(Math.round(c + (255 - c) * factor));
+      } else {
+        const a = Math.abs(factor);
+        return clamp(Math.round(c * (1 - a)));
+      }
+    };
+    return rgbToHex(mixChannel(r), mixChannel(g), mixChannel(b));
+  } else {
+    // HSL mode: convert rgb to hsl, adjust L by factor, convert back
+    const rgbToHsl = (r, g, b) => {
+      r /= 255;
+      g /= 255;
+      b /= 255;
+      const max = Math.max(r, g, b),
+        min = Math.min(r, g, b);
+      let h = 0,
+        s = 0,
+        l = (max + min) / 2;
+      if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+          case r:
+            h = (g - b) / d + (g < b ? 6 : 0);
+            break;
+          case g:
+            h = (b - r) / d + 2;
+            break;
+          case b:
+            h = (r - g) / d + 4;
+            break;
+        }
+        h /= 6;
+      }
+      return { h, s, l };
+    };
+
+    const hslToRgb = (h, s, l) => {
+      let r, g, b;
+      if (s === 0) {
+        r = g = b = l;
+      } else {
+        const hue2rgb = (p, q, t) => {
+          if (t < 0) t += 1;
+          if (t > 1) t -= 1;
+          if (t < 1 / 6) return p + (q - p) * 6 * t;
+          if (t < 1 / 2) return q;
+          if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+          return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+      }
+      return { r: r * 255, g: g * 255, b: b * 255 };
+    };
+
+    const { h: hh, s: ss, l: ll } = rgbToHsl(r, g, b);
+    // add factor to lightness (factor already normalized -1..1)
+    let newL = ll + factor;
+    newL = Math.max(0, Math.min(1, newL));
+    const { r: r2, g: g2, b: b2 } = hslToRgb(hh, ss, newL);
+    return rgbToHex(r2, g2, b2);
+  }
+}
+
+// Convenience helpers:
+function lightenHex(hex, percentOr01 = 0.1, options = {}) {
+  return adjustHex(hex, Math.abs(percentOr01), options);
+}
+function darkenHex(hex, percentOr01 = 0.1, options = {}) {
+  return adjustHex(hex, -Math.abs(percentOr01), options);
+}
+
+const subThemeManager = {
+  render: async function () {
+    if (darkTheme && this.renderDark) {
+      return await this.renderDark();
+    } else if (!darkTheme && this.renderLight) {
+      return await this.renderLight();
+    }
+    return html``;
+  },
+  lightColor: null,
+  setLightTheme: function (color) {
+    this.lightColor = color;
+    this.renderLight = async function () {
+      return html`<style>
+        button:hover,
+        .a-btn:hover,
+        .main-btn-menu-active {
+          color: ${this.lightColor};
+          background-color: ${lightenHex(this.lightColor, 0.8)};
+        }
+      </style>`;
+    };
+  },
+  darkColor: null,
+  setDarkTheme: function (color) {
+    this.darkColor = color;
+    this.renderDark = async function () {
+      return html`<style>
+        button:hover,
+        .a-btn:hover,
+        .main-btn-menu-active {
+          color: ${lightenHex(this.darkColor, 0.8)};
+          background-color: ${darkenHex(this.darkColor, 0.75)};
+        }
+      </style>`;
+    };
+  },
+};
+
 const scrollBarDarkRender = () => {
   return cssBrowserCodes
     .map(
@@ -642,8 +857,8 @@ const scrollBarDarkRender = () => {
     ::-` +
         b +
         `-scrollbar {
-      width: 5px;
-      height: 5px; 
+      width: 8px;
+      height: 8px; 
       /* line-height: 1em; */
     }
 
@@ -659,7 +874,7 @@ const scrollBarDarkRender = () => {
         b +
         `-scrollbar-thumb {
       background: #74747457;
-      border-radius: 3px;
+      border-radius: 4px;
     }
 
     /* Handle on hover */
@@ -811,6 +1026,24 @@ const imageShimmer = () => html`<div
   </div>
 </div>`;
 
+const renderChessPattern = () => `background: repeating-conic-gradient(#808080 0 25%, #0000 0 50%) 50% / 20px 20px`;
+
+const extractBackgroundImageUrl = (element) => {
+  const style = window.getComputedStyle(element);
+  const imageString = style.backgroundImage;
+  const foundUrlRaw = imageString.match(/^url\(?(.+)\)$/i)[1];
+  if (!foundUrlRaw) return null;
+  const foundUrl = foundUrlRaw.replace(/^['|"| ]*/, '').replace(/['" ]*$/, '');
+  if (!foundUrl) return null;
+  return foundUrl;
+};
+
+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 +1076,11 @@ export {
   renderWave,
   cssEffect,
   imageShimmer,
+  simpleIconsRender,
+  extractBackgroundImageUrl,
+  renderChessPattern,
+  subThemeManager,
+  lightenHex,
+  darkenHex,
+  adjustHex,
 };

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

@@ -17,8 +17,8 @@ const CssCommonCore = async () => {
   await AgGrid.RenderStyle();
   return html`<style>
       .top-bar-app-icon {
-        width: 35px;
-        height: 35px;
+        width: 40px;
+        height: 40px;
       }
       .mini-title {
         font-size: 15px;
@@ -33,7 +33,7 @@ const CssCommonCore = async () => {
         top: 0;
         left: 0;
         transition: 0.3s;
-        height: 5px;
+        height: 10px;
         width: 100%;
         z-index: 11;
       }
@@ -51,7 +51,6 @@ const CssCommonCore = async () => {
         cursor: grabbing !important;
       }
       .btn-label-content {
-        height: 100%;
         top: 15px;
       }
       .badge {
@@ -122,6 +121,7 @@ const CssCommonCore = async () => {
         left: 0;
         width: 100%;
         z-index: 1;
+        transition: 0.3s;
       }
       @keyframes ripple {
         to {
@@ -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;
@@ -611,6 +607,10 @@ const CssCoreLight = {
           background: gray;
           transition: 0.3s;
         }
+        .bar-default-modal-icon {
+          width: 15px;
+          height: 15px;
+        }
         .slide-menu-top-bar {
           width: 100%;
           top: 0;

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

@@ -1,27 +1,22 @@
 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);
     const ModalId = `modal-docs-${docData.type}`;
     const { barConfig } = await Themes[Css.currentTheme]();
-    barConfig.buttons.close.onClick = () => {
-      setQueryPath({ path: 'docs' });
-      Modal.removeModal(ModalId);
-    };
+
     await Modal.Render({
       barConfig,
       title: renderViewTitle(docData),
@@ -48,8 +43,16 @@ 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]();
+    Modal.Data[ModalId].onCloseListener[ModalId] = () => {
+      setQueryPath({ path: 'docs', queryPath: '' });
+    };
   },
   Data: [
     {
@@ -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',