underpost 2.8.55 → 2.8.61

package/src/cli/deploy.js

@@ -32,7 +32,7 @@ class UnderpostDeploy {
       await Config.build(undefined, 'proxy', deployList);
       return buildPortProxyRouter(env === 'development' ? 80 : 443, buildProxyRouter());
     },
-    async buildManifest(deployList, env) {
+    async buildManifest(deployList, env, version) {
       for (const _deployId of deployList.split(',')) {
         const deployId = _deployId.trim();
         if (!deployId) continue;
@@ -69,7 +69,18 @@ spec:
     spec:
       containers:
         - name: ${deployId}-${env}
-          image: localhost/${deployId}-${env}:${Underpost.version}
+          image: localhost/underpost-engine:${version && typeof version === 'string' ? version : Underpost.version}
+          lifecycle:
+            postStart:
+              exec:
+                command:
+                  - /bin/sh
+                  - -c
+                  - >
+                    sleep 60 &&
+                    underpost config set deploy-id ${deployId} &&
+                    underpost config set deploy-env ${env}
+# image: localhost/${deployId}-${env}:${version && typeof version === 'string' ? version : Underpost.version}
 ---
 apiVersion: v1
 kind: Service
@@ -180,7 +191,16 @@ spec:
     async callback(
       deployList = 'default',
       env = 'development',
-      options = { remove: false, infoRouter: false, sync: false, buildManifest: false, infoUtil: false, expose: false },
+      options = {
+        remove: false,
+        infoRouter: false,
+        sync: false,
+        buildManifest: false,
+        infoUtil: false,
+        expose: false,
+        cert: false,
+        version: '',
+      },
     ) {
       if (options.infoUtil === true)
         return logger.info(`
@@ -191,7 +211,7 @@ kubectl scale statefulsets <stateful-set-name> --replicas=<new-replicas>
       if (deployList === 'dd' && fs.existsSync(`./engine-private/deploy/dd.router`))
         deployList = fs.readFileSync(`./engine-private/deploy/dd.router`, 'utf8');
       if (options.sync) UnderpostDeploy.API.sync(deployList);
-      if (options.buildManifest === true) await UnderpostDeploy.API.buildManifest(deployList, env);
+      if (options.buildManifest === true) await UnderpostDeploy.API.buildManifest(deployList, env, options.version);
       if (options.infoRouter === true)
         return logger.info('router', await UnderpostDeploy.API.routerFactory(deployList, env));
       const etcHost = (
@@ -219,7 +239,7 @@ kubectl scale statefulsets <stateful-set-name> --replicas=<new-replicas>
         const confServer = JSON.parse(fs.readFileSync(`./engine-private/conf/${deployId}/conf.server.json`, 'utf8'));
         for (const host of Object.keys(confServer)) {
           shellExec(`sudo kubectl delete HTTPProxy ${host}`);
-          if (env === 'production') shellExec(`sudo kubectl delete Certificate ${host}`);
+          if (env === 'production' && options.cert === true) shellExec(`sudo kubectl delete Certificate ${host}`);
           if (!options.remove === true && env === 'development') concatHots += ` ${host}`;
         }
 
@@ -231,7 +251,8 @@ kubectl scale statefulsets <stateful-set-name> --replicas=<new-replicas>
         if (!options.remove === true) {
           shellExec(`sudo kubectl apply -f ./${manifestsPath}/deployment.yaml`);
           shellExec(`sudo kubectl apply -f ./${manifestsPath}/proxy.yaml`);
-          if (env === 'production') shellExec(`sudo kubectl apply -f ./${manifestsPath}/secret.yaml`);
+          if (env === 'production' && options.cert === true)
+            shellExec(`sudo kubectl apply -f ./${manifestsPath}/secret.yaml`);
         }
       }
       let renderHosts;

package/src/cli/fs.js

@@ -0,0 +1,149 @@
+import { v2 as cloudinary } from 'cloudinary';
+import { loggerFactory } from '../server/logger.js';
+import dotenv from 'dotenv';
+import AdmZip from 'adm-zip';
+import * as dir from 'path';
+import fs from 'fs-extra';
+import { Downloader } from '../server/downloader.js';
+import UnderpostRepository from './repository.js';
+import { shellExec } from '../server/process.js';
+dotenv.config();
+
+const logger = loggerFactory(import.meta);
+
+class UnderpostFileStorage {
+  static API = {
+    cloudinaryConfig() {
+      // https://console.cloudinary.com/
+      cloudinary.config({
+        cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
+        api_key: process.env.CLOUDINARY_API_KEY,
+        api_secret: process.env.CLOUDINARY_API_SECRET,
+      });
+    },
+    getStorageConf(options) {
+      let storage, storageConf;
+      if (options.deployId && typeof options.deployId === 'string') {
+        storageConf = `./engine-private/conf/${options.deployId}/storage.json`;
+        if (!fs.existsSync(storageConf)) fs.writeFileSync(storageConf, JSON.stringify({}), 'utf8');
+        storage = JSON.parse(fs.readFileSync(storageConf, 'utf8'));
+      }
+      return { storage, storageConf };
+    },
+    writeStorageConf(storage, storageConf) {
+      if (storage) fs.writeFileSync(storageConf, JSON.stringify(storage, null, 4), 'utf8');
+    },
+    async recursiveCallback(
+      path,
+      options = { rm: false, recursive: false, deployId: '', force: false, pull: false, git: false },
+    ) {
+      const { storage, storageConf } = UnderpostFileStorage.API.getStorageConf(options);
+      const deleteFiles = UnderpostRepository.API.getDeleteFiles(path);
+      for (const relativePath of deleteFiles) {
+        const _path = path + '/' + relativePath;
+        if (_path in storage) {
+          await UnderpostFileStorage.API.delete(_path);
+          delete storage[_path];
+        }
+      }
+      const files =
+        options.git === true
+          ? UnderpostRepository.API.getChangedFiles(path)
+          : await fs.readdir(path, { recursive: true });
+      if (options.pull === true) {
+        for (const _path of Object.keys(storage)) {
+          if (!fs.existsSync(_path) || options.force === true) {
+            if (options.force === true && fs.existsSync(_path)) fs.removeSync(_path);
+            await UnderpostFileStorage.API.pull(_path, options);
+          } else logger.warn(`Pull path already exists`, _path);
+        }
+      } else
+        for (const relativePath of files) {
+          const _path = path + '/' + relativePath;
+          if (fs.statSync(_path).isDirectory()) {
+            if (options.pull === true && !fs.existsSync(_path)) fs.mkdirSync(_path, { recursive: true });
+            continue;
+          } else if (!(_path in storage) || options.force === true) {
+            await UnderpostFileStorage.API.upload(_path, options);
+            if (storage) storage[_path] = {};
+          } else logger.warn('File already exists', _path);
+        }
+      UnderpostFileStorage.API.writeStorageConf(storage, storageConf);
+      if (options.git === true) {
+        shellExec(`cd ${path} && git add .`);
+        shellExec(`underpost cmt ${path} feat`);
+      }
+    },
+    async callback(
+      path,
+      options = { rm: false, recursive: false, deployId: '', force: false, pull: false, git: false },
+    ) {
+      if (options.recursive === true || options.git === true)
+        return await UnderpostFileStorage.API.recursiveCallback(path, options);
+      if (options.pull === true) return await UnderpostFileStorage.API.pull(path, options);
+      if (options.rm === true) return await UnderpostFileStorage.API.delete(path, options);
+      return await UnderpostFileStorage.API.upload(path, options);
+    },
+    async upload(path, options = { rm: false, recursive: false, deployId: '', force: false, pull: false }) {
+      UnderpostFileStorage.API.cloudinaryConfig();
+      const { storage, storageConf } = UnderpostFileStorage.API.getStorageConf(options);
+      // path = UnderpostFileStorage.API.file2Zip(path);
+      const uploadResult = await cloudinary.uploader
+        .upload(path, {
+          public_id: path,
+          resource_type: 'raw',
+          overwrite: options.force === true ? true : false,
+        })
+        .catch((error) => {
+          logger.error(error, { path, stack: error.stack });
+        });
+      logger.info('upload result', uploadResult);
+      if (storage) storage[path] = {};
+      UnderpostFileStorage.API.writeStorageConf(storage, storageConf);
+      return uploadResult;
+    },
+    async pull(path) {
+      UnderpostFileStorage.API.cloudinaryConfig();
+      const folder = dir.dirname(path);
+      if (!fs.existsSync(folder)) fs.mkdirSync(folder, { recursive: true });
+      const downloadResult = await cloudinary.utils.download_archive_url({
+        public_ids: [path],
+        resource_type: 'raw',
+      });
+      logger.info('download result', downloadResult);
+      await Downloader(downloadResult, path + '.zip');
+      path = UnderpostFileStorage.API.zip2File(path + '.zip');
+      fs.removeSync(path + '.zip');
+    },
+    async delete(path) {
+      UnderpostFileStorage.API.cloudinaryConfig();
+      const deleteResult = await cloudinary.api
+        .delete_resources([path], { type: 'upload', resource_type: 'raw' })
+        .catch((error) => {
+          logger.error(error, { path, stack: error.stack });
+        });
+      logger.info('delete result', deleteResult);
+      return deleteResult;
+    },
+    file2Zip(path) {
+      const zip = new AdmZip();
+      zip.addLocalFile(path, '/');
+      path = path + '.zip';
+      zip.writeZip(path);
+      return path;
+    },
+    zip2File(path) {
+      const zip = new AdmZip(path);
+      path = path.replaceAll('.zip', '');
+      zip.extractEntryTo(
+        /*entry name*/ path.split('/').pop(),
+        /*target path*/ dir.dirname(path),
+        /*maintainEntryPath*/ false,
+        /*overwrite*/ true,
+      );
+      return path;
+    },
+  };
+}
+
+export default UnderpostFileStorage;

package/src/cli/image.js

@@ -1,9 +1,10 @@
 import fs from 'fs-extra';
 import Underpost from '../index.js';
-import { shellExec } from '../server/process.js';
+import { shellCd, shellExec } from '../server/process.js';
 import dotenv from 'dotenv';
 import { getNpmRootPath } from '../server/conf.js';
 import { timer } from '../client/components/core/CommonJs.js';
+import UnderpostRootEnv from './env.js';
 
 dotenv.config();
 
@@ -17,9 +18,13 @@ class UnderpostImage {
         deployId = 'default',
         env = 'development',
         path = '.',
-        options = { imageArchive: false, podmanSave: false },
+        options = { imageArchive: false, podmanSave: false, imageName: '', imageVersion: '' },
       ) {
-        const imgName = `${deployId}-${env}:${Underpost.version}`;
+        const imgName = `${
+          options.imageName && typeof options.imageName === 'string' ? options.imageName : `${deployId}-${env}`
+        }:${
+          options.imageVersion && typeof options.imageVersions === 'string' ? options.imageVersion : Underpost.version
+        }`;
         const podManImg = `localhost/${imgName}`;
         const imagesStoragePath = `/images`;
         if (!fs.existsSync(`${path}${imagesStoragePath}`))
@@ -48,7 +53,34 @@ class UnderpostImage {
           shellExec(`cd ${path} && podman save -o ${tarFile} ${podManImg}`);
         shellExec(`cd ${path} && sudo kind load image-archive ${tarFile}`);
       },
-      async script(deployId = 'default', env = 'development', options = { run: false }) {
+      async script(deployId = 'default', env = 'development', options = { run: false, build: false }) {
+        if (deployId === 'deploy') {
+          const _deployId = UnderpostRootEnv.API.get('deploy-id');
+          const _env = UnderpostRootEnv.API.get('deploy-env');
+          const _path = UnderpostRootEnv.API.get('deploy-path');
+          if (_deployId) {
+            deployId = _deployId;
+            if (_env) env = _env;
+            if (_path) path = _path;
+          } else {
+            await timer(30 * 1000);
+            return await UnderpostImage.API.script(deployId, env, path, options);
+          }
+        }
+        if (options.build === true) {
+          const buildBasePath = `/home/dd`;
+          const repoName = `engine-${deployId.split('-')[1]}`;
+          fs.mkdirSync(buildBasePath, { recursive: true });
+          shellExec(`cd ${buildBasePath} && underpost clone underpostnet/${repoName}`);
+          shellExec(`cd ${buildBasePath} && sudo mv ./${repoName} ./engine`);
+          shellExec(`cd ${buildBasePath}/engine && underpost clone underpostnet/${repoName}-private`);
+          shellExec(`cd ${buildBasePath}/engine && sudo mv ./${repoName}-private ./engine-private`);
+          shellCd(`${buildBasePath}/engine`);
+          shellExec(`npm install`);
+          const itcScripts = fs.readdir('./engine-private/itc-scripts');
+          for (const itcScript of itcScripts)
+            if (itcScript.match(deployId)) shellExec(`node ./engine-private/itc-scripts/${itcScript}`);
+        }
         switch (deployId) {
           case 'dd-lampp':
             {

package/src/cli/repository.js

@@ -98,6 +98,27 @@ class UnderpostRepository {
         }
       });
     },
+
+    getDeleteFiles(path = '.') {
+      const commandUntrack = `cd ${path} && git ls-files --deleted`;
+      const diffUntrackOutput = shellExec(commandUntrack, { stdout: true, silent: true });
+      return diffUntrackOutput.toString().split('\n').filter(Boolean);
+    },
+
+    getChangedFiles(path = '.', extension = '', head = false) {
+      const extensionFilter = extension ? `-- '***.${extension}'` : '';
+      const command = `cd ${path} && git diff ${head ? 'HEAD^ HEAD ' : ''}--name-only ${extensionFilter}`;
+      const commandUntrack = `cd ${path} && git ls-files --others --exclude-standard`;
+      const diffOutput = shellExec(command, { stdout: true, silent: true });
+      const diffUntrackOutput = shellExec(commandUntrack, { stdout: true, silent: true });
+      const deleteFiles = UnderpostRepository.API.getDeleteFiles(path);
+      return diffOutput
+        .toString()
+        .split('\n')
+        .filter(Boolean)
+        .concat(diffUntrackOutput.toString().split('\n').filter(Boolean))
+        .filter((f) => !deleteFiles.includes(f));
+    },
   };
 }
 

package/src/cli/test.js

@@ -36,7 +36,7 @@ class UnderpostTest {
         options.podStatus &&
         typeof options.podStatus === 'string'
       )
-        return await UnderpostTest.API.podStatusMonitor(options.podName, options.podStatus);
+        return await UnderpostTest.API.statusMonitor(options.podName, options.podStatus, options.kindType);
 
       if (options.sh === true || options.logs === true) {
         const [pod] = UnderpostDeploy.API.get(deployList);
@@ -86,16 +86,27 @@ class UnderpostTest {
         }
       } else return UnderpostTest.API.run();
     },
-    podStatusMonitor(podName, status = 'Running', deltaMs = 1000) {
+    statusMonitor(podName, status = 'Running', kindType = '', deltaMs = 1000, maxAttempts = 60 * 5) {
+      if (!(kindType && typeof kindType === 'string')) kindType = 'pods';
       return new Promise(async (resolve) => {
         let index = 0;
-        logger.info(`Loading ${podName} instance`, { status, deltaMs });
+        logger.info(`Loading instance`, { podName, status, kindType, deltaMs, maxAttempts });
         const _monitor = async () => {
           await timer(deltaMs);
-          const result = UnderpostDeploy.API.get(podName).find((p) => p.STATUS === status);
-          logger.info(`Testing pod ${podName}... ${result ? 1 : 0}/1 - elapsed time ${deltaMs * (index + 1)}ms`);
-          if (result) return resolve();
+          const pods = UnderpostDeploy.API.get(podName, kindType);
+          const result = pods.find((p) => p.STATUS === status);
+          logger.info(
+            `Testing pod ${podName}... ${result ? 1 : 0}/1 - elapsed time ${deltaMs * (index + 1)}s - attempt ${
+              index + 1
+            }/${maxAttempts}`,
+            pods[0] ? pods[0].STATUS : 'Not found kind object',
+          );
+          if (result) return resolve(true);
           index++;
+          if (index === maxAttempts) {
+            logger.error(`Failed to test pod ${podName} within ${maxAttempts} attempts`);
+            return resolve(false);
+          }
           return _monitor();
         };
         await _monitor();

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

@@ -404,7 +404,15 @@ const CalendarCore = {
         <div class="in" style="margin-bottom: 100px"></div>`;
     };
 
+    let delayBlock = false;
     this.Data[options.idModal].updatePanel = async () => {
+      if (delayBlock) return;
+      else {
+        delayBlock = true;
+        setTimeout(() => {
+          delayBlock = false;
+        }, 500);
+      }
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
       if (options.route === 'home') Modal.homeCid = newInstance(cid);
       if (s(`.main-body-calendar-${options.idModal}`)) {
@@ -426,7 +434,10 @@ const CalendarCore = {
         },
       });
 
-    if (options.route === 'home') setTimeout(CalendarCore.Data[options.idModal].updatePanel);
+    // if (options.route === 'home')
+    setTimeout(() => {
+      CalendarCore.Data[options.idModal].updatePanel();
+    });
 
     return html`
       <style>

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

@@ -890,8 +890,58 @@ const commitData = {
   },
 };
 
-const userRoleEnum = ['admin', 'moderator', 'user', 'guest'];
+const emotionsData = [
+  {
+    name: 'like',
+    ad_display: {
+      es: 'Me gusta',
+      en: 'Like',
+    },
+    emoji: '👍',
+  },
+  {
+    name: 'love',
+    ad_display: {
+      es: 'Me encanta',
+      en: 'Love',
+    },
+    emoji: '❤️',
+  },
+  {
+    name: 'haha',
+    ad_display: {
+      es: 'Me divierte',
+      en: 'Haha',
+    },
+    emoji: '😂',
+  },
+  {
+    name: 'wow',
+    ad_display: {
+      es: 'Me asombra',
+      en: 'Wow',
+    },
+    emoji: '😮',
+  },
+  {
+    name: 'sad',
+    ad_display: {
+      es: 'Me entristece',
+      en: 'Sad',
+    },
+    emoji: '😢',
+  },
+  {
+    name: 'angry',
+    ad_display: {
+      es: 'Me enoja',
+      en: 'Angry',
+    },
+    emoji: '😠',
+  },
+];
 
+const userRoleEnum = ['admin', 'moderator', 'user', 'guest'];
 const commonAdminGuard = (role) => userRoleEnum.indexOf(role) === userRoleEnum.indexOf('admin');
 const commonModeratorGuard = (role) => userRoleEnum.indexOf(role) <= userRoleEnum.indexOf('moderator');
 
@@ -954,4 +1004,5 @@ export {
   getCurrentTrace,
   userRoleEnum,
   commitData,
+  emotionsData,
 };

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

@@ -396,8 +396,7 @@ const CssCoreDark = {
           text-align: center;
           background: #1a1a1a;
           font-size: 17px;
-          padding-top: 7px;
-          padding-bottom: 6px;
+          height: 35px;
         }
         ::placeholder {
           color: #c6c4c4;
@@ -701,8 +700,7 @@ const CssCoreLight = {
           text-align: center;
           background: #eaeaea;
           font-size: 17px;
-          padding-top: 7px;
-          padding-bottom: 6px;
+          height: 35px;
         }
         ::placeholder {
           color: #333;

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

@@ -1,4 +1,3 @@
-import { _VERSION, CoreService } from '../../services/core/core.service.js';
 import { Badge } from './Badge.js';
 import { BtnIcon } from './BtnIcon.js';
 import { rgbToHex } from './CommonJs.js';
@@ -80,7 +79,7 @@ const Docs = {
       icon: html`<i class="fa-brands fa-osi"></i>`,
       text: 'Source Docs',
       url: function () {
-        return `${getProxyPath()}docs/engine/${_VERSION}`;
+        return `${getProxyPath()}docs/engine/${window.renderPayload.version}`;
       },
     },
     {

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

@@ -88,8 +88,10 @@ const Input = {
               <div class="fl input-row-${id}">
                 <div class="in fll" style="width: 80%;">${inputElement}</div>
                 <div class="in fll btn-eye-password btn-eye-${id}" style="width: 20%;">
-                  <i class="fas fa-eye fa-eye-${id} eye-password"></i>
-                  <i class="fas fa-eye-slash fa-eye-slash-${id} eye-password" style="display: none"></i>
+                  <div class="abs center">
+                    <i class="fas fa-eye fa-eye-${id} eye-password"></i>
+                    <i class="fas fa-eye-slash fa-eye-slash-${id} eye-password" style="display: none"></i>
+                  </div>
                 </div>
               </div>
             `

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

@@ -75,12 +75,17 @@ const LoadingAnimation = {
       const style = {
         'text-align': 'center',
       };
-
       if (s(container).classList) {
         const classes = Array.from(s(container).classList);
         if (classes.find((e) => e.match('management-table-btn-mini'))) {
           style.top = '-2px';
           style.left = '-2px';
+        } else if (classes.find((e) => e.match('-btn-tool'))) {
+          style.top = '-26px';
+          style.left = '-10px';
+        } else if (classes.find((e) => e.match('main-btn-')) && !classes.find((e) => e.match('main-btn-square-menu'))) {
+          style.top = '-8px';
+          style.left = '-10px';
         } else if (classes.find((e) => e.match('action-bar-box'))) {
           style.top = '-30px';
           style.left = '-12px';
@@ -145,6 +150,8 @@ const LoadingAnimation = {
         s(backgroundContainer).style.opacity = 0;
         setTimeout(async () => {
           s(backgroundContainer).style.display = 'none';
+          if (s(`.modal-menu`)) s(`.modal-menu`).classList.remove('hide');
+          if (s(`.main-body-btn-container`)) s(`.main-body-btn-container`).classList.remove('hide');
           if (callBack) callBack();
         }, 300);
       });

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

@@ -49,6 +49,7 @@ const Modal = {
       mode: '' /* slide-menu */,
       RouterInstance: {},
       disableTools: [],
+      observer: false,
     },
   ) {
     if (options.heightBottomBar === undefined) options.heightBottomBar = 50;
@@ -76,6 +77,8 @@ const Modal = {
       options,
       onCloseListener: {},
       onMenuListener: {},
+      onCollapseMenuListener: {},
+      onExtendMenuListener: {},
       onDragEndListener: {},
       onObserverListener: {},
       onClickListener: {},
@@ -156,7 +159,8 @@ const Modal = {
             };
             options.mode === 'slide-menu-right' ? (options.style.right = '0px') : (options.style.left = '0px');
             const contentIconClass = 'abs center';
-
+            if (options.class) options.class += ' hide';
+            else options.class = 'hide';
             options.dragDisabled = true;
             options.titleClass = 'hide';
             top = '0px';
@@ -238,7 +242,7 @@ const Modal = {
                 'body',
                 html`
                   <div
-                    class="abs main-body-btn-container"
+                    class="abs main-body-btn-container hide"
                     style="top: ${options.heightTopBar + 50}px; z-index: 9; ${true ||
                     (options.mode && options.mode.match('right'))
                       ? 'right'
@@ -1383,6 +1387,9 @@ const Modal = {
             if (options.onCollapseMenu) options.onCollapseMenu();
             s(`.sub-menu-title-container-${'modal-menu'}`).classList.add('hide');
             s(`.nav-path-container-${'modal-menu'}`).classList.add('hide');
+            Object.keys(this.Data[idModal].onCollapseMenuListener).map((keyListener) =>
+              this.Data[idModal].onCollapseMenuListener[keyListener](),
+            );
           } else {
             slideMenuWidth = originSlideMenuWidth;
             setTimeout(() => {
@@ -1403,6 +1410,9 @@ const Modal = {
             if (options.onExtendMenu) options.onExtendMenu();
             s(`.sub-menu-title-container-${'modal-menu'}`).classList.remove('hide');
             s(`.nav-path-container-${'modal-menu'}`).classList.remove('hide');
+            Object.keys(this.Data[idModal].onExtendMenuListener).map((keyListener) =>
+              this.Data[idModal].onExtendMenuListener[keyListener](),
+            );
           }
           // btn-bar-center-icon-menu
           this.actionBtnCenter();
@@ -1781,20 +1791,34 @@ const renderMenuLabel = ({ img, text, icon }) => {
     <div class="abs center main-btn-menu-text">${text}</div>`;
 };
 
-const renderViewTitle = (options = { icon: '', img: '', text: '', assetFolder: '', 'ui-icons': '', dim, top }) => {
-  if (options.dim === undefined) options.dim = 60;
+const renderViewTitle = (
+  options = { icon: '', img: '', text: '', assetFolder: '', 'ui-icons': '', dim, top, topText: '' },
+) => {
+  if (options.dim === undefined) options.dim = 30;
   const { img, text, icon, dim, top } = options;
   if (!img && !options['ui-icon']) return html`<span class="view-title-icon">${icon}</span> ${text}`;
   return html`<img
       class="abs img-btn-square-view-title"
       style="${renderCssAttr({
-        style: { width: `${dim}px`, height: `${dim}px`, top: top !== undefined ? `${top}px` : `-${dim / 2}px` },
+        style: {
+          width: `${dim}px`,
+          height: `${dim}px`,
+          top: top !== undefined ? `${top}px !important` : undefined,
+        },
       })}"
       src="${options['ui-icon']
         ? `${getProxyPath()}assets/${options.assetFolder ? options.assetFolder : 'ui-icons'}/${options['ui-icon']}`
         : img}"
     />
-    <div class="in text-btn-square-view-title" style="${renderCssAttr({ style: { 'padding-left': `${dim}px` } })}">
+    <div
+      class="in text-btn-square-view-title"
+      style="${renderCssAttr({
+        style: {
+          // 'padding-left': `${20 + dim}px`,
+          ...(options.topText !== undefined ? { top: options.topText + 'px !important' } : {}),
+        },
+      })}"
+    >
       ${text}
     </div>`;
 };

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

@@ -26,6 +26,7 @@ const Panel = {
       idPanel: '',
       parentIdModal: '',
       scrollClassContainer: '',
+      htmlFormHeader: async () => '',
       formData: [],
       data: [],
       originData: () => [],
@@ -244,12 +245,13 @@ const Panel = {
 
     let render = '';
     let renderForm = html` <div class="in modal stq" style="top: 0px; z-index: 1; padding-bottom: 5px">
-      ${await BtnIcon.Render({
-        class: `section-mp btn-custom btn-${idPanel}-close`,
-        label: html`<i class="fa-solid fa-xmark"></i> ${Translate.Render('close')}`,
-        type: 'button',
-      })}
-    </div>`;
+        ${await BtnIcon.Render({
+          class: `section-mp btn-custom btn-${idPanel}-close`,
+          label: html`<i class="fa-solid fa-xmark"></i> ${Translate.Render('close')}`,
+          type: 'button',
+        })}
+      </div>
+      ${options?.htmlFormHeader ? await options.htmlFormHeader() : ''}`;
 
     for (const modelData of formData) {
       if (modelData.disableRender) continue;